SectionCard.vue
2.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<template>
<view class="bg-white rounded-[32rpx] mb-[32rpx] pb-[56rpx] overflow-hidden shadow-sm">
<!-- Section Header -->
<view v-if="title" class="px-[40rpx] py-[32rpx]" :style="{ background: computedBgGradient }">
<text class="text-[#1f2937] text-[32rpx] font-normal">{{ title }}</text>
</view>
<!-- Section Items -->
<view class="flex flex-col">
<view v-for="(item, index) in items" :key="index" class="flex flex-col">
<SectionItem
:icon="item.icon"
:title="item.title"
:subtitle="item.subtitle"
:route="item.route"
@click="handleItemClick(item)"
/>
<!-- Divider -->
<view v-if="index < items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></view>
</view>
</view>
</view>
</template>
<script setup>
import { computed } from 'vue'
import SectionItem from './SectionItem.vue'
/**
* Section Card Component
* @description 可复用的分组卡片组件，用于展示带标题的项目列表
*/
const props = defineProps({
/**
* Section 标题
*/
title: {
type: String,
default: ''
},
/**
* Section 背景渐变色（可选）
* @example 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)'
* @description 如果不传，则使用默认的浅蓝色渐变
*/
bgGradient: {
type: String,
default: ''
},
/**
* 项目列表
* @example [{ icon: 'Edit', title: '标题', subtitle: '副标题', route: '/page/path' }]
*/
items: {
type: Array,
required: true,
default: () => []
}
})
const emit = defineEmits(['item-click'])
/**
* 默认的卡片渐变背景色
* @description 统一的浅蓝色渐变，用于所有卡片
*/
const DEFAULT_GRADIENT = 'linear-gradient( 90deg, #EFF6FF 0%, #DBEAFE 100%)'
/**
* 计算最终的背景渐变色
* @description 如果传入了 bgGradient 则使用传入的，否则使用默认渐变
*/
const computedBgGradient = computed(() => {
return props.bgGradient || DEFAULT_GRADIENT
})
/**
* 处理项目点击
* @param {Object} item - 点击的项目数据
*/
const handleItemClick = (item) => {
emit('item-click', item)
}
</script>
<script>
export default {
name: 'SectionCard'
}
</script>