refactor(components): 优化 SectionCard 组件内置渐变色逻辑
- 在 SectionCard 组件内添加默认渐变色处理 - 移除三个页面中的重复渐变色处理代码 - 统一使用浅蓝色渐变 background: linear-gradient(90deg, #EFF6FF 0%, #DBEAFE 100%) - 保持 API 返回自定义渐变色的兼容性 - 简化页面代码,提升可维护性 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
4 changed files
with
19 additions
and
10 deletions
| 1 | <template> | 1 | <template> |
| 2 | <view class="bg-white rounded-[32rpx] mb-[32rpx] pb-[56rpx] overflow-hidden shadow-sm"> | 2 | <view class="bg-white rounded-[32rpx] mb-[32rpx] pb-[56rpx] overflow-hidden shadow-sm"> |
| 3 | <!-- Section Header --> | 3 | <!-- Section Header --> |
| 4 | - <view v-if="title" class="px-[40rpx] py-[32rpx]" :style="{ background: bgGradient }"> | 4 | + <view v-if="title" class="px-[40rpx] py-[32rpx]" :style="{ background: computedBgGradient }"> |
| 5 | <text class="text-[#1f2937] text-[32rpx] font-normal">{{ title }}</text> | 5 | <text class="text-[#1f2937] text-[32rpx] font-normal">{{ title }}</text> |
| 6 | </view> | 6 | </view> |
| 7 | 7 | ||
| ... | @@ -23,13 +23,14 @@ | ... | @@ -23,13 +23,14 @@ |
| 23 | </template> | 23 | </template> |
| 24 | 24 | ||
| 25 | <script setup> | 25 | <script setup> |
| 26 | +import { computed } from 'vue' | ||
| 26 | import SectionItem from './SectionItem.vue' | 27 | import SectionItem from './SectionItem.vue' |
| 27 | 28 | ||
| 28 | /** | 29 | /** |
| 29 | * Section Card Component | 30 | * Section Card Component |
| 30 | * @description 可复用的分组卡片组件,用于展示带标题的项目列表 | 31 | * @description 可复用的分组卡片组件,用于展示带标题的项目列表 |
| 31 | */ | 32 | */ |
| 32 | -defineProps({ | 33 | +const props = defineProps({ |
| 33 | /** | 34 | /** |
| 34 | * Section 标题 | 35 | * Section 标题 |
| 35 | */ | 36 | */ |
| ... | @@ -38,8 +39,9 @@ defineProps({ | ... | @@ -38,8 +39,9 @@ defineProps({ |
| 38 | default: '' | 39 | default: '' |
| 39 | }, | 40 | }, |
| 40 | /** | 41 | /** |
| 41 | - * Section 背景渐变色 | 42 | + * Section 背景渐变色(可选) |
| 42 | * @example 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)' | 43 | * @example 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)' |
| 44 | + * @description 如果不传,则使用默认的浅蓝色渐变 | ||
| 43 | */ | 45 | */ |
| 44 | bgGradient: { | 46 | bgGradient: { |
| 45 | type: String, | 47 | type: String, |
| ... | @@ -59,6 +61,20 @@ defineProps({ | ... | @@ -59,6 +61,20 @@ defineProps({ |
| 59 | const emit = defineEmits(['item-click']) | 61 | const emit = defineEmits(['item-click']) |
| 60 | 62 | ||
| 61 | /** | 63 | /** |
| 64 | + * 默认的卡片渐变背景色 | ||
| 65 | + * @description 统一的浅蓝色渐变,用于所有卡片 | ||
| 66 | + */ | ||
| 67 | +const DEFAULT_GRADIENT = 'linear-gradient( 90deg, #EFF6FF 0%, #DBEAFE 100%)' | ||
| 68 | + | ||
| 69 | +/** | ||
| 70 | + * 计算最终的背景渐变色 | ||
| 71 | + * @description 如果传入了 bgGradient 则使用传入的,否则使用默认渐变 | ||
| 72 | + */ | ||
| 73 | +const computedBgGradient = computed(() => { | ||
| 74 | + return props.bgGradient || DEFAULT_GRADIENT | ||
| 75 | +}) | ||
| 76 | + | ||
| 77 | +/** | ||
| 62 | * 处理项目点击 | 78 | * 处理项目点击 |
| 63 | * @param {Object} item - 点击的项目数据 | 79 | * @param {Object} item - 点击的项目数据 |
| 64 | */ | 80 | */ | ... | ... |
| ... | @@ -9,7 +9,6 @@ | ... | @@ -9,7 +9,6 @@ |
| 9 | v-for="(section, index) in sections" | 9 | v-for="(section, index) in sections" |
| 10 | :key="index" | 10 | :key="index" |
| 11 | :title="section.title" | 11 | :title="section.title" |
| 12 | - :bg-gradient="section.bgGradient" | ||
| 13 | :items="section.items" | 12 | :items="section.items" |
| 14 | @item-click="handleItemClick" | 13 | @item-click="handleItemClick" |
| 15 | /> | 14 | /> |
| ... | @@ -32,7 +31,6 @@ const go = useGo() | ... | @@ -32,7 +31,6 @@ const go = useGo() |
| 32 | const sections = shallowRef([ | 31 | const sections = shallowRef([ |
| 33 | { | 32 | { |
| 34 | title: '家庭成员', | 33 | title: '家庭成员', |
| 35 | - bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)', | ||
| 36 | items: [ | 34 | items: [ |
| 37 | { | 35 | { |
| 38 | title: '成员列表', | 36 | title: '成员列表', |
| ... | @@ -48,7 +46,6 @@ const sections = shallowRef([ | ... | @@ -48,7 +46,6 @@ const sections = shallowRef([ |
| 48 | }, | 46 | }, |
| 49 | { | 47 | { |
| 50 | title: '健康档案', | 48 | title: '健康档案', |
| 51 | - bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)', | ||
| 52 | items: [ | 49 | items: [ |
| 53 | { | 50 | { |
| 54 | title: '体检报告', | 51 | title: '体检报告', |
| ... | @@ -64,7 +61,6 @@ const sections = shallowRef([ | ... | @@ -64,7 +61,6 @@ const sections = shallowRef([ |
| 64 | }, | 61 | }, |
| 65 | { | 62 | { |
| 66 | title: '资产管理', | 63 | title: '资产管理', |
| 67 | - bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)', | ||
| 68 | items: [ | 64 | items: [ |
| 69 | { | 65 | { |
| 70 | title: '保单管理', | 66 | title: '保单管理', |
| ... | @@ -80,7 +76,6 @@ const sections = shallowRef([ | ... | @@ -80,7 +76,6 @@ const sections = shallowRef([ |
| 80 | }, | 76 | }, |
| 81 | { | 77 | { |
| 82 | title: '生活服务', | 78 | title: '生活服务', |
| 83 | - bgGradient: 'linear-gradient(90deg, #E0F2FE 0%, #BAE6FD 100%)', | ||
| 84 | items: [ | 79 | items: [ |
| 85 | { | 80 | { |
| 86 | title: '高端医疗', | 81 | title: '高端医疗', | ... | ... |
| ... | @@ -9,7 +9,6 @@ | ... | @@ -9,7 +9,6 @@ |
| 9 | v-for="(section, index) in sections" | 9 | v-for="(section, index) in sections" |
| 10 | :key="index" | 10 | :key="index" |
| 11 | :title="section.title" | 11 | :title="section.title" |
| 12 | - :bg-gradient="section.bgGradient" | ||
| 13 | :items="section.items" | 12 | :items="section.items" |
| 14 | @item-click="handleItemClick" | 13 | @item-click="handleItemClick" |
| 15 | /> | 14 | /> | ... | ... |
| ... | @@ -9,7 +9,6 @@ | ... | @@ -9,7 +9,6 @@ |
| 9 | v-for="(section, index) in sections" | 9 | v-for="(section, index) in sections" |
| 10 | :key="index" | 10 | :key="index" |
| 11 | :title="section.title" | 11 | :title="section.title" |
| 12 | - :bg-gradient="section.bgGradient" | ||
| 13 | :items="section.items" | 12 | :items="section.items" |
| 14 | @item-click="handleItemClick" | 13 | @item-click="handleItemClick" |
| 15 | /> | 14 | /> | ... | ... |
-
Please register or login to post a comment