Эх сурвалжийг харах

refactor(beautify): D2 index-home 主包门面页清理 (debt 135->27)

- 局部调色板 4 值映射全局令牌:#B45309->status-warning-strong-2,
  #4338CA->accent-indigo-ink, #ECFDF5->status-success-tint, #F5F3FF->facade-violet-tint-2
- #ff4d4f 2 处 -> status-danger-2
- script 三处维度渐变数组(5x3=15 hex)改用 BrandColors.* 模板字符串
- brand-colors.js 补充 successLight3/info/infoLight/wisdomLight 色值
- 新增 scripts/check-vue-script.js .vue script 语法校验工具
- hex 45->9, debt 135->27(P0 4->3);硬编码色总数 1818->1782
liaoxg 5 өдөр өмнө
parent
commit
43e46600e7

+ 22 - 21
cfc-frontend/pages/index-home/index.vue

@@ -428,6 +428,7 @@ import FamilyChallengeCard from '../../components/FamilyChallengeCard.vue'
 import DailyTaskCard from '../../components/daily-task-card.vue'
 import ReportUploadCard from '../../components/report-upload-card.vue'
 import OnboardingProgressBar from '../../components/OnboardingProgressBar.vue'
+import { BrandColors } from '../../utils/brand-colors.js'
 import OnboardingGuide from '../../components/OnboardingGuide.vue'
 import ConfigurableGuide from '../../components/ConfigurableGuide.vue'
 import { acceptParentInvite, getActivityList, getFeaturedArticles, getEnergySandbox, getEnergyOverview, getFamilyMemberList, getChallengeList, getGuideConfig, getGuidePopupList, consumeGuidePopup, switchToFamilyMember, getMyMembership, updateChallengeProgress, respondChallenge, getTodayTasks, completeTask as completeTaskApi, getTodayParentTasks, completeParentTask as completeParentTaskApi, getTaskHistory, getNotices, getNotificationList, readNotification, getSurveyStatus, getSelfCheckStatus, getReferralCode, extractReferralCode, getAppLibrary, reportAppEnter, getEnergyLogs, getPointsLogs, getCfList, getCfSummary } from '../../utils/api.js'
@@ -483,11 +484,11 @@ components: {
       indexArticles: [],
       articlesLoading: false,
       gradientColors: [
-        'linear-gradient(135deg, #10B981, #34D399)',
-        'linear-gradient(135deg, #0EA5E9, #38BDF8)',
-        'linear-gradient(135deg, #F59E0B, #FBBF24)',
-        'linear-gradient(135deg, #F97316, #FB923C)',
-        'linear-gradient(135deg, #6366F1, #818CF8)'
+        `linear-gradient(135deg, ${BrandColors.action}, ${BrandColors.successLight3})`,
+        `linear-gradient(135deg, ${BrandColors.info}, ${BrandColors.infoLight})`,
+        `linear-gradient(135deg, ${BrandColors.wealth}, ${BrandColors.warning})`,
+        `linear-gradient(135deg, ${BrandColors.primary}, ${BrandColors.primaryLight})`,
+        `linear-gradient(135deg, ${BrandColors.wisdom}, ${BrandColors.wisdomLight})`
       ],
 
       // 登录态数据
@@ -1068,11 +1069,11 @@ title: '添加家庭成员',
       getFeaturedArticles({ size: 5 }).then(function(res) {
         if (res.code === 200 && res.data) {
           var gradientColors = [
-            'linear-gradient(135deg, #10B981, #34D399)',
-            'linear-gradient(135deg, #0EA5E9, #38BDF8)',
-            'linear-gradient(135deg, #F59E0B, #FBBF24)',
-            'linear-gradient(135deg, #F97316, #FB923C)',
-            'linear-gradient(135deg, #6366F1, #818CF8)'
+            `linear-gradient(135deg, ${BrandColors.action}, ${BrandColors.successLight3})`,
+            `linear-gradient(135deg, ${BrandColors.info}, ${BrandColors.infoLight})`,
+            `linear-gradient(135deg, ${BrandColors.wealth}, ${BrandColors.warning})`,
+            `linear-gradient(135deg, ${BrandColors.primary}, ${BrandColors.primaryLight})`,
+            `linear-gradient(135deg, ${BrandColors.wisdom}, ${BrandColors.wisdomLight})`
           ]
           var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
           self.articles = list.map(function(item, index) {
@@ -1892,11 +1893,11 @@ title: '添加家庭成员',
         self.articlesLoading = false
         if (res && res.code === 200) {
           var gradientColors = [
-            'linear-gradient(135deg, #10B981, #34D399)',
-            'linear-gradient(135deg, #0EA5E9, #38BDF8)',
-            'linear-gradient(135deg, #F59E0B, #FBBF24)',
-            'linear-gradient(135deg, #F97316, #FB923C)',
-            'linear-gradient(135deg, #6366F1, #818CF8)'
+            `linear-gradient(135deg, ${BrandColors.action}, ${BrandColors.successLight3})`,
+            `linear-gradient(135deg, ${BrandColors.info}, ${BrandColors.infoLight})`,
+            `linear-gradient(135deg, ${BrandColors.wealth}, ${BrandColors.warning})`,
+            `linear-gradient(135deg, ${BrandColors.primary}, ${BrandColors.primaryLight})`,
+            `linear-gradient(135deg, ${BrandColors.wisdom}, ${BrandColors.wisdomLight})`
           ]
           // res.data is the response wrapper, articles are in res.data.data
           var rawList = res.data && (Array.isArray(res.data) ? res.data : (res.data.data || res.data.records || []))
@@ -2033,7 +2034,7 @@ title: '添加家庭成员',
 $c-brand-tint-3:  $brand-primary-light-2;   // orange-200
 $c-brand-ink:     #7C2D12;   // orange-900 深文字
 $c-brand-ink-2:   #9A3412;   // orange-800
-$c-brand-ink-3:   #B45309;   // amber-700
+$c-brand-ink-3:   $status-warning-strong-2;   // amber-700
 // 文字阶(页面既有灰阶)
 $c-text-slate:    $uni-text-color-secondary;   // slate-500
 $c-ink-slate:     $facade-text-slate-700;   // slate-700
@@ -2042,13 +2043,13 @@ $c-fill-slate:    $facade-fill-slate-50;   // slate-50
 // 维度深/浅阶(wisdom indigo / action emerald / violet)
 $c-wisdom-tint:   #EFF4FF;
 $c-wisdom-ink:    #312E81;
-$c-wisdom-mid:    #4338CA;
+$c-wisdom-mid:    $accent-indigo-ink;
 $c-wisdom-light:  $dim-wisdom-light;
-$c-action-tint:   #ECFDF5;
+$c-action-tint:   $status-success-tint;
 $c-action-ink:    #064E3B;
 $c-action-mid:    #047857;
 $c-action-light:  $status-success-light-3;
-$c-violet-tint:   #F5F3FF;
+$c-violet-tint:   $facade-violet-tint-2;
 $c-violet-ink:    #4C1D95;
 $c-violet-mid:    #6D28D9;
 // Material 状态阶(页面既有观感,与 §13 tailwind 状态令牌不同值,故局部承载)
@@ -2938,14 +2939,14 @@ $c-warm-tint:     #FFF3E7;
 
 /* ===== 超期任务样式 ===== */
 .task-quick-item--overdue .task-quick-meta--overdue {
-  color: #ff4d4f;
+  color: $status-danger-2;
   font-weight: bold;
 }
 .status-badge-overdue {
   margin-left: 16rpx;
   padding: 8rpx 20rpx;
   background: rgba(255,77,79,0.1);
-  color: #ff4d4f;
+  color: $status-danger-2;
   font-size: 24rpx;
   font-weight: bold;
   border-radius: 20rpx;

+ 26 - 0
cfc-frontend/scripts/check-vue-script.js

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+/**
+ * 提取 .vue 的 <script> 块并 node --check 语法校验
+ * 用法: node scripts/check-vue-script.js <file...>
+ */
+const fs = require('fs');
+const cp = require('child_process');
+const os = require('os');
+const path = require('path');
+
+for (const f of process.argv.slice(2)) {
+  if (!fs.existsSync(f)) { console.log('SKIP(not found):', f); continue; }
+  const src = fs.readFileSync(f, 'utf8');
+  const m = src.match(/<script>([\s\S]*?)<\/script>/);
+  if (!m) { console.log('NO SCRIPT:', f); continue; }
+  const tmp = path.join(os.tmpdir(), 'check_' + Math.random().toString(36).slice(2) + '.js');
+  fs.writeFileSync(tmp, m[1], 'utf8');
+  try {
+    cp.execFileSync('node', ['--check', tmp], { stdio: 'pipe' });
+    console.log('OK  :', f);
+  } catch (e) {
+    console.log('FAIL:', f);
+    console.log(String(e.stderr || '').slice(0, 600));
+  }
+  fs.unlinkSync(tmp);
+}

+ 22 - 0
cfc-frontend/scripts/d2-index-home.js

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+/** D2: index-home.vue 局部调色板中可等值映射全局令牌的值替换(减少硬编码 hex 计数) */
+const fs = require('fs');
+const F = 'pages/index-home/index.vue';
+let src = fs.readFileSync(F, 'utf8');
+const REPL = [
+  ['#B45309', '$status-warning-strong-2'],
+  ['#4338CA', '$accent-indigo-ink'],
+  ['#ECFDF5', '$status-success-tint'],
+  ['#F5F3FF', '$facade-violet-tint-2'],
+  ['#ff4d4f', '$status-danger-2'],
+];
+let cnt = 0;
+for (const [from, to] of REPL) {
+  const esc = from.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  src = src.replace(new RegExp(esc + '(?![0-9a-fA-F])', 'g'), () => { cnt++; return to; });
+}
+fs.writeFileSync(F, src);
+console.log('replaced:', cnt);
+const rest = (src.match(/#[0-9a-fA-F]{3,8}\b/g) || []);
+const uniq = [...new Set(rest)];
+console.log('remaining uniq hex:', uniq.length, uniq.join(' '));

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

@@ -42,8 +42,12 @@ export const BrandColors = {
 
   // 状态色
   success: '#10B981',
+  successLight3: '#34D399', // emerald-400 成功亮档·三档
   warning: '#FBBF24',
   danger: '#EF4444',
+  info: '#0EA5E9',          // sky-500 信息
+  infoLight: '#38BDF8',     // sky-400 信息亮档
+  wisdomLight: '#818CF8',   // indigo-400 智慧亮档
 
   // 中性灰阶
   white: '#FFFFFF',