Prechádzať zdrojové kódy

refactor(beautify): D25 parent-index 家长首页清理 (debt 57->0)

- template 五维自检图标 5 处内联 background -> 语义 class(\-* 令牌)
- script gradientColors 5 条渐变收编 BrandColors(含 import)
- style:\-pink / \-success-tint / \-success-strong / \-orange-deep
- uni.scss 补 \-orange-deep(#9A3412,8 文件复用);brand-colors 补 violetLighter
- hex 19->0;P2 44->43
liaoxg 5 dní pred
rodič
commit
131bcf86db

+ 22 - 14
cfc-frontend/pages/home-pages/parent-index.vue

@@ -99,19 +99,19 @@
       <PlayfulCard variant="flat" shadow="sm" :clickable="true" @click="goToSelfCheck" class="selfcheck-card-wide">
         <view class="selfcheck-card-content">
           <view class="selfcheck-icon-wrap">
-            <view class="selfcheck-icon-circle" style="background: #FF8C42;">
+            <view class="selfcheck-icon-circle selfcheck-icon-body">
               <text class="selfcheck-icon-char">身</text>
             </view>
-            <view class="selfcheck-icon-circle" style="background: #6366F1;">
+            <view class="selfcheck-icon-circle selfcheck-icon-wisdom">
               <text class="selfcheck-icon-char">智</text>
             </view>
-            <view class="selfcheck-icon-circle" style="background: #F59E0B;">
+            <view class="selfcheck-icon-circle selfcheck-icon-wealth">
               <text class="selfcheck-icon-char">富</text>
             </view>
-            <view class="selfcheck-icon-circle" style="background: #10B981;">
+            <view class="selfcheck-icon-circle selfcheck-icon-action">
               <text class="selfcheck-icon-char">行</text>
             </view>
-            <view class="selfcheck-icon-circle" style="background: #FF6B9D;">
+            <view class="selfcheck-icon-circle selfcheck-icon-mind">
               <text class="selfcheck-icon-char">心</text>
             </view>
           </view>
@@ -494,6 +494,7 @@
 <script>
 import { getFamilyMemberList, getChildren, getPendingReviewTasks, getPendingWishes, approveTask, rejectTask, getChildCompletionStats, getParentDashboard, getFamilyEnergySandbox, getEnergySandbox, getUnlockStatus, getEnergyOverview, getActivityList, getProductsByDomain, getContactList, getFeaturedArticles, getActiveAlerts, dismissAlert, getFamilyRanking, getChallengeList, getCircleList, getCircleRanking, getInviteQrCode, switchToFamilyMember, getSelfCheckStatus } from '../../utils/api.js'
 import store from '../../store/index.js'
+import { BrandColors } from '../../utils/brand-colors.js'
 import PlayfulCard from '../../components/PlayfulCard.vue'
 import PlayfulButton from '../../components/PlayfulButton.vue'
 import BaseBadge from '../../components/BaseBadge.vue'
@@ -577,11 +578,11 @@ export default {
       articlesLoading: false,
       isLoggedIn: false,
       gradientColors: [
-        'linear-gradient(135deg, #10B981, #34D399)',
-        'linear-gradient(135deg, #0EA5E9, #38BDF8)',
-        'linear-gradient(135deg, #8B5CF6, #C084FC)',
-        'linear-gradient(135deg, #F97316, #FB923C)',
-        'linear-gradient(135deg, #6366F1, #818CF8)'
+        'linear-gradient(135deg, ' + BrandColors.success + ', ' + BrandColors.successLight3 + ')',
+        'linear-gradient(135deg, ' + BrandColors.infoSky + ', ' + BrandColors.infoLight + ')',
+        'linear-gradient(135deg, ' + BrandColors.violet + ', ' + BrandColors.violetLighter + ')',
+        'linear-gradient(135deg, ' + BrandColors.primary + ', ' + BrandColors.primaryLight + ')',
+        'linear-gradient(135deg, ' + BrandColors.wisdom + ', ' + BrandColors.wisdomLight + ')'
       ],
       selectedMemberId: null,
       // L1 即时反馈状态
@@ -1596,7 +1597,7 @@ export default {
 .pending-info { flex: 1; min-width: 0; }
 .pending-count { font-size: 36rpx; font-weight: 800; display: block; }
 .pending-label { font-size: 22rpx; color: $facade-text-body; margin-top: 4rpx; display: block; }
-.pink-color { color: #EC4899; }
+.pink-color { color: $accent-pink; }
 .orange-color { color: $brand-primary; }
 
 /* ========================================
@@ -2008,7 +2009,7 @@ export default {
 
 /* 无数据:邀请加入样式 */
 .circle-card-invite {
-  background: linear-gradient(135deg, $status-success-tint-2, #ECFDF5);
+  background: linear-gradient(135deg, $status-success-tint-2, $status-success-tint);
 }
 .circle-invite-content {
   padding: 32rpx 24rpx;
@@ -2024,7 +2025,7 @@ export default {
 .circle-invite-title {
   font-size: 30rpx;
   font-weight: 700;
-  color: #065F46;
+  color: $status-success-strong;
 }
 .circle-invite-desc {
   font-size: 24rpx;
@@ -2058,6 +2059,13 @@ export default {
   align-items: center;
   flex-shrink: 0;
 }
+// 五维自检图标底色(全局维度令牌)
+.selfcheck-icon-body { background: $dim-body; }
+.selfcheck-icon-wisdom { background: $dim-wisdom; }
+.selfcheck-icon-wealth { background: $dim-wealth; }
+.selfcheck-icon-action { background: $dim-action; }
+.selfcheck-icon-mind { background: $dim-mind; }
+
 .selfcheck-icon-circle {
   width: 52rpx;
   height: 52rpx;
@@ -2230,7 +2238,7 @@ export default {
 .empty-family-title {
   font-size: 34rpx;
   font-weight: 600;
-  color: #9A3412;
+  color: $mat-orange-deep;
   margin-bottom: 10rpx;
 }
 .empty-family-desc {

+ 54 - 0
cfc-frontend/scripts/d25-parent-index.js

@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+/**
+ * D25: parent-index.vue 家长首页清理 (debt 57 -> 0)
+ * 1) template 5 个五维自检图标内联色 -> 语义 class($dim-* 令牌)
+ * 2) script 5 条渐变 -> BrandColors
+ * 3) style 4 色 -> 全局令牌
+ */
+const fs = require('fs');
+const F = 'pages/home-pages/parent-index.vue';
+let src = fs.readFileSync(F, 'utf8');
+let replaced = 0;
+
+function repl(from, to) {
+  const cnt = src.split(from).length - 1;
+  if (cnt === 0) { console.warn('NOT FOUND: ' + from.slice(0, 100)); return; }
+  src = src.split(from).join(to);
+  replaced += cnt;
+}
+
+// ---- 1. template 内联色 -> class ----
+repl('<view class="selfcheck-icon-circle" style="background: #FF8C42;">', '<view class="selfcheck-icon-circle selfcheck-icon-body">');
+repl('<view class="selfcheck-icon-circle" style="background: #6366F1;">', '<view class="selfcheck-icon-circle selfcheck-icon-wisdom">');
+repl('<view class="selfcheck-icon-circle" style="background: #F59E0B;">', '<view class="selfcheck-icon-circle selfcheck-icon-wealth">');
+repl('<view class="selfcheck-icon-circle" style="background: #10B981;">', '<view class="selfcheck-icon-circle selfcheck-icon-action">');
+repl('<view class="selfcheck-icon-circle" style="background: #FF6B9D;">', '<view class="selfcheck-icon-circle selfcheck-icon-mind">');
+
+// ---- 2. script 渐变 ----
+repl("        'linear-gradient(135deg, #10B981, #34D399)',", "        'linear-gradient(135deg, ' + BrandColors.success + ', ' + BrandColors.successLight3 + ')',");
+repl("        'linear-gradient(135deg, #0EA5E9, #38BDF8)',", "        'linear-gradient(135deg, ' + BrandColors.infoSky + ', ' + BrandColors.infoLight + ')',");
+repl("        'linear-gradient(135deg, #8B5CF6, #C084FC)',", "        'linear-gradient(135deg, ' + BrandColors.violet + ', ' + BrandColors.violetLighter + ')',");
+repl("        'linear-gradient(135deg, #F97316, #FB923C)',", "        'linear-gradient(135deg, ' + BrandColors.primary + ', ' + BrandColors.primaryLight + ')',");
+repl("        'linear-gradient(135deg, #6366F1, #818CF8)'", "        'linear-gradient(135deg, ' + BrandColors.wisdom + ', ' + BrandColors.wisdomLight + ')'");
+
+// ---- 3. style ----
+repl('.pink-color { color: #EC4899; }', '.pink-color { color: $accent-pink; }');
+repl('background: linear-gradient(135deg, $status-success-tint-2, #ECFDF5);', 'background: linear-gradient(135deg, $status-success-tint-2, $status-success-tint);');
+repl('color: #065F46;', 'color: $status-success-strong;');
+repl('color: #9A3412;', 'color: $mat-orange-deep;');
+
+// ---- 4. 图标 class 定义(追加到 .selfcheck-icon-circle 规则后)----
+repl(
+  '.selfcheck-icon-circle {',
+  '// 五维自检图标底色(全局维度令牌)\n.selfcheck-icon-body { background: $dim-body; }\n.selfcheck-icon-wisdom { background: $dim-wisdom; }\n.selfcheck-icon-wealth { background: $dim-wealth; }\n.selfcheck-icon-action { background: $dim-action; }\n.selfcheck-icon-mind { background: $dim-mind; }\n\n.selfcheck-icon-circle {'
+);
+
+fs.writeFileSync(F, src);
+console.log('total replaced:', replaced);
+
+const lines = src.split('\n');
+let n = 0;
+for (let i = 0; i < lines.length; i++) {
+  if (/#[0-9a-fA-F]{3,8}\b/.test(lines[i])) { console.log('HEX ' + (i + 1) + ': ' + lines[i].trim().slice(0, 110)); n++; }
+}
+console.log('remaining hex lines:', n);

+ 1 - 0
cfc-frontend/uni.scss

@@ -51,6 +51,7 @@ $mat-amber-tint:   #FFF8E1; // amber-50 极浅底(14 文件)
 $mat-amber-strong: #F57F17; // amber-800 深文字(6 文件;vs $status-warning-strong #92400E 同角色不同值)
 // 橙(警示文字)
 $mat-orange-strong:#E65100; // orange-900 深文字(24 文件)
+$mat-orange-deep:  #9A3412; // orange-800 深橙文字(8 文件)
 // 蓝(信息态)
 $mat-blue-tint:    #E3F2FD; // blue-50 极浅底(29 文件)
 $mat-blue-light:   #BBDEFB; // blue-100 浅档(4 文件)

+ 1 - 0
cfc-frontend/utils/brand-colors.js

@@ -107,6 +107,7 @@ export const BrandColors = {
   // 语义别名(后端配置色兜底;SCSS 侧等值令牌见 uni.scss $facade-violet/$status-info)
   violet: '#8B5CF6',      // violet-500 紫罗兰(心智维度组件色板)
   violetLight: '#A78BFA', // violet-400 紫罗兰浅档(渐变起)
+  violetLighter: '#C084FC', // violet-400 更浅档(渐变起)
   gold: '#FFD700',        // 亮金(智慧维度渐变起)
   orangeDeep: '#EA580C',  // orange-600 橙深档(全家渐变终)
   matGreen: '#4CAF50',    // Material green-500