更新

uniapp/pages/features/features.vue

@@ -38,7 +38,7 @@
 						>
 							<view class="fn-card" :class="{ locked: item.locked }">
 								<view class="tint-icon fn-icon" :class="item.tint">
-									<FaIcon :name="item.icon" color="#ffffff" :size="18" />
+									<FaIcon :name="item.icon" color="#ffffff" :size="20" />
 								</view>
 								<text class="fn-name">{{ item.menu.title }}</text>
 							</view>
@@ -56,12 +56,8 @@
 
 				<view v-for="group in groups" :key="group.id" class="group-card">
 					<view class="group-head">
-						<view class="tint-icon group-icon" :class="group.tint">
-							<FaIcon :name="group.icon" color="#ffffff" :size="16" />
-						</view>
 						<text class="group-title">{{ group.name }}</text>
 						<text v-if="group.locked" class="group-lock">未开通</text>
-						<text class="group-count">{{ group.items.length }}</text>
 					</view>
 
 					<view v-if="group.items.length" class="grid">
@@ -74,9 +70,9 @@
 							<view class="fn-card" :class="{ locked: group.locked || item.locked }">
 								<view
 									class="tint-icon fn-icon"
-									:class="group.locked || item.locked ? 'tint-off' : group.tint"
+									:class="group.locked || item.locked ? 'tint-off' : 'tint-' + (item.tintIndex % 8)"
 								>
-									<FaIcon :name="item.icon || group.icon" color="#ffffff" :size="18" />
+									<FaIcon :name="item.icon || group.icon" color="#ffffff" :size="20" />
 								</view>
 								<text class="fn-name">{{ item.title }}</text>
 							</view>
@@ -182,14 +178,15 @@ const groups = computed(() => {
 	if (common.items.length) all.push(common)
 	all.push(...dirGroups)
 
-	// 组级「未开通」：整组菜单均被锁定；图标底色按分组下标轮换
-	return all.map((group, gi) => {
+	// 组级「未开通」：整组菜单均被锁定；卡片浅底色与图标色按展开顺序统一编号轮换
+	let colorIndex = 0
+	return all.map((group) => {
 		const locked = group.items.length > 0 && group.items.every((it) => it.locked === true)
 		return {
 			...group,
 			icon: group.icon || 'file-lines',
-			tint: locked ? 'tint-off' : 'tint-' + (gi % 8),
-			locked
+			locked,
+			items: group.items.map((it) => ({ ...it, tintIndex: colorIndex++ }))
 		}
 	})
 })
@@ -213,7 +210,6 @@ const searchResults = computed(() => {
 			const mod = modules.value.find((x) => x.code === m.module)
 			return {
 				menu: m,
-				moduleName: (mod && mod.name) || '协作工具',
 				icon: MODULE_ICONS[String(m.module || '').toLowerCase()] || 'file-lines',
 				tint: mod && mod.enabled === false ? 'tint-off' : 'tint-' + (i % 8),
 				locked: m.locked === true || (mod && mod.enabled === false)
@@ -326,7 +322,9 @@ onShow(() => {
 	color: $color-text-muted;
 }
 
-/* ============ 分组卡：外层一个 card，内含一行 4 个功能 card ============ */
+/* ============ 分组卡：白色卡片 + 一行 4 个功能宫格（图标在上、名称在下） ============
+   cell 占 25% 并自带右间隙，容器负 margin 抵消末列间隙，
+   避免使用 calc 除法——小程序端 wxss 对复杂 calc 支持不稳。 */
 .group-card {
 	@include card;
 	padding: 24rpx 20rpx 8rpx;
@@ -343,16 +341,10 @@ onShow(() => {
 	padding: 0 4rpx 20rpx;
 }
 
-.group-icon {
-	@include tint-icon(56rpx, 14rpx);
-}
-
 .group-title {
+	@include section-title;
 	flex: 1;
 	min-width: 0;
-	font-size: 28rpx;
-	font-weight: 600;
-	color: $color-text;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -363,13 +355,6 @@ onShow(() => {
 	flex-shrink: 0;
 }
 
-.group-count {
-	@include chip;
-	flex-shrink: 0;
-}
-
-/* 功能格子：一行 4 个；cell 占 25% 并自带右间隙，容器负 margin 抵消末列间隙，
-   避免使用 calc 除法——小程序端 wxss 对复杂 calc 支持不稳。 */
 .grid {
 	display: flex;
 	flex-wrap: wrap;
@@ -379,15 +364,11 @@ onShow(() => {
 .cell {
 	width: 25%;
 	padding-right: 16rpx;
-	margin-bottom: 16rpx;
+	margin-bottom: 24rpx;
 	box-sizing: border-box;
 }
 
 .fn-card {
-	height: 100%;
-	padding: 18rpx 6rpx 16rpx;
-	border-radius: $radius-md;
-	background: $color-bg-page;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -400,12 +381,12 @@ onShow(() => {
 }
 
 .fn-icon {
-	@include tint-icon(64rpx, 18rpx);
+	@include tint-icon(84rpx, 24rpx);
 }
 
 .fn-name {
 	max-width: 100%;
-	font-size: 22rpx;
+	font-size: 24rpx;
 	line-height: 1.3;
 	color: $color-text;
 	text-align: center;