hookehuyr

refactor(components): 优化 SectionCard 组件内置渐变色逻辑

- 在 SectionCard 组件内添加默认渐变色处理
- 移除三个页面中的重复渐变色处理代码
- 统一使用浅蓝色渐变 background: linear-gradient(90deg, #EFF6FF 0%, #DBEAFE 100%)
- 保持 API 返回自定义渐变色的兼容性
- 简化页面代码,提升可维护性

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
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 />
......