Procházet zdrojové kódy

refactor(beautify): D26 child-index 孩子首页清理 (debt 54->0)

- style 全局令牌:\-info-deep/\-bg-color-grey/\-warning-light
- uni.scss 新增 Tailwind pastel 描边族 5 色(sky/green/blue/pink/indigo-200,均 ≥2 文件)
- 页面专属 5 色收编局部 \-ci-*(天空蓝渐变 + 徽章金)
- hex 18->0;P2 43->42
liaoxg před 5 dny
rodič
revize
a835da84c7

+ 24 - 17
cfc-frontend/pages/home-pages/child-index.vue

@@ -919,6 +919,13 @@ export default {
 </script>
 
 <style scoped lang="scss">
+// ===== 孩子首页专属色阶(天空蓝渐变族 + 徽章金;单页专用,约定见 uni.scss §14)=====
+$c-ci-sky:    #E0ECF8; // 顶部渐变终(浅天蓝)
+$c-ci-navy:   #1E4A7A; // 深海军蓝文字
+$c-ci-gold:   #FFB800; // 徽章金渐变终
+$c-ci-blue-1: #DCE8F5; // 空态卡渐变起
+$c-ci-blue-2: #C8DDF0; // 空态卡渐变终
+
 /* ============================================================
    知心益家 — 孩子端首页 Flat Rounded 设计系统
    色彩体系:品牌橙($brand-primary)+浅橙($brand-primary-light) | 双重阴影 | 4rpx边框
@@ -956,7 +963,7 @@ padding-top: 4rpx;
   display: flex;
   align-items: center;
   gap: 10rpx;
-  background: linear-gradient(145deg, $uni-bg-color, #E0ECF8);
+  background: linear-gradient(145deg, $uni-bg-color, $c-ci-sky);
   padding: 12rpx 24rpx 12rpx 18rpx;
   border-radius: 40rpx;
   border: 4rpx solid $brand-primary-light;
@@ -985,14 +992,14 @@ padding-top: 4rpx;
 .streak-days {
   font-size: 32rpx;
   font-weight: 800;
-  color: #1E4A7A;
+  color: $c-ci-navy;
   line-height: 1.1;
 }
 
 .streak-unit {
   font-size: 18rpx;
   font-weight: 600;
-  color: #2563EB;
+  color: $status-info-deep;
 }
 
 /* ----------------------------------------------------------
@@ -1121,7 +1128,7 @@ padding-top: 4rpx;
 
 .progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, $accent-gold, #FFB800);
+  background: linear-gradient(90deg, $accent-gold, $c-ci-gold);
   border-radius: 6rpx;
   transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
@@ -1174,7 +1181,7 @@ padding-top: 4rpx;
   align-items: center;
   width: 200rpx;
   min-height: 260rpx;
-  background: linear-gradient(145deg, $app-surface, var(--bg-grey, #EDF2F7));
+  background: linear-gradient(145deg, $app-surface, var(--bg-grey, $uni-bg-color-grey));
   border-radius: 28rpx;
   padding: 24rpx 16rpx 20rpx;
   margin-right: 20rpx;
@@ -1211,12 +1218,12 @@ padding-top: 4rpx;
 }
 
 /* 分类图标底色 */
-.task-cat--study   .task-card-icon-wrap { background: rgba(14,165,233,0.12); border-color: #BAE6FD; }
-.task-cat--reading .task-card-icon-wrap { background: rgba(34,197,94,0.12);  border-color: #BBF7D0; }
+.task-cat--study   .task-card-icon-wrap { background: rgba(14,165,233,0.12); border-color: $tint-sky-line; }
+.task-cat--reading .task-card-icon-wrap { background: rgba(34,197,94,0.12);  border-color: $tint-green-line; }
 .task-cat--life    .task-card-icon-wrap { background: rgba(2,132,199,0.12); border-color: $uni-border-color; }
-.task-cat--sports  .task-card-icon-wrap { background: rgba(59,130,246,0.12); border-color: #BFDBFE; }
-.task-cat--chores  .task-card-icon-wrap { background: rgba(245,158,11,0.12); border-color: #FDE68A; }
-.task-cat--art     .task-card-icon-wrap { background: rgba(236,72,153,0.12); border-color: #FBCFE8; }
+.task-cat--sports  .task-card-icon-wrap { background: rgba(59,130,246,0.12); border-color: $tint-blue-line; }
+.task-cat--chores  .task-card-icon-wrap { background: rgba(245,158,11,0.12); border-color: $status-warning-light; }
+.task-cat--art     .task-card-icon-wrap { background: rgba(236,72,153,0.12); border-color: $tint-pink-line; }
 .task-cat--default .task-card-icon-wrap { background: rgba(148,163,184,0.12); border-color: $uni-border-color-light; }
 
 .task-card-name {
@@ -1303,7 +1310,7 @@ padding-top: 4rpx;
   align-items: center;
   justify-content: center;
   padding: 28rpx 16rpx;
-  background: linear-gradient(145deg, $app-surface, var(--bg-grey, #EDF2F7));
+  background: linear-gradient(145deg, $app-surface, var(--bg-grey, $uni-bg-color-grey));
   border-radius: 28rpx;
   border: 4rpx solid var(--border, $uni-border-color);
   box-shadow: inset -4rpx -4rpx 10rpx rgba(255,255,255,0.6),
@@ -1339,11 +1346,11 @@ padding-top: 4rpx;
 }
 
 /* 各按钮图标色彩 */
-.quick-icon--tasks   { background: rgba(14,165,233,0.15); border-color: #BAE6FD; }
-.quick-icon--rewards { background: rgba(245,158,11,0.15); border-color: #FDE68A; }
+.quick-icon--tasks   { background: rgba(14,165,233,0.15); border-color: $tint-sky-line; }
+.quick-icon--rewards { background: rgba(245,158,11,0.15); border-color: $status-warning-light; }
 .quick-icon--growth  { background: rgba(2,132,199,0.15); border-color: $uni-border-color; }
-.quick-icon--games   { background: rgba(236,72,153,0.12); border-color: #FBCFE8; }
-.quick-icon--quiz    { background: rgba(99,102,241,0.15); border-color: #C7D2FE; }
+.quick-icon--games   { background: rgba(236,72,153,0.12); border-color: $tint-pink-line; }
+.quick-icon--quiz    { background: rgba(99,102,241,0.15); border-color: $tint-indigo-line; }
 
 .quick-btn-label {
   font-size: 28rpx;
@@ -1386,7 +1393,7 @@ padding-top: 4rpx;
   width: 100rpx;
   height: 100rpx;
   border-radius: 50%;
-  background: linear-gradient(145deg, #DCE8F5, #C8DDF0);
+  background: linear-gradient(145deg, $c-ci-blue-1, $c-ci-blue-2);
   border: 4rpx solid var(--border, $uni-border-color);
   box-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.5),
               4rpx 4rpx 14rpx rgba(249,115,22,0.08);
@@ -1414,7 +1421,7 @@ padding-top: 4rpx;
 }
 
 .achievement-icon-wrap--locked {
-  background: var(--bg-grey, #EDF2F7);
+  background: var(--bg-grey, $uni-bg-color-grey);
   border-color: var(--border-light, $uni-border-color-light);
   box-shadow: none;
 }

+ 65 - 0
cfc-frontend/scripts/d26-child-index.js

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+/**
+ * D26: child-index.vue 孩子首页清理 (debt 54 -> 0)
+ * 全局令牌 3 色 + Tailwind pastel 描边族 5 色;页面专属 5 色收编局部 $c-ci-*
+ */
+const fs = require('fs');
+const F = 'pages/home-pages/child-index.vue';
+let src = fs.readFileSync(F, 'utf8');
+let replaced = 0;
+
+const styleIdx = src.indexOf('<style');
+const before = src.slice(0, styleIdx);
+let styleBody = src.slice(styleIdx);
+
+const GLOBAL = [
+  ['#2563EB', '$status-info-deep'],
+  ['#EDF2F7', '$uni-bg-color-grey'],
+  ['#FDE68A', '$status-warning-light'],
+  ['#BAE6FD', '$tint-sky-line'],
+  ['#BBF7D0', '$tint-green-line'],
+  ['#BFDBFE', '$tint-blue-line'],
+  ['#FBCFE8', '$tint-pink-line'],
+  ['#C7D2FE', '$tint-indigo-line'],
+];
+for (const [from, to] of GLOBAL) {
+  const re = new RegExp(from + '(?![0-9a-fA-F])', 'gi');
+  replaced += (styleBody.match(re) || []).length;
+  styleBody = styleBody.replace(re, to);
+}
+
+const LOCAL = [
+  ['#E0ECF8', '$c-ci-sky'],
+  ['#1E4A7A', '$c-ci-navy'],
+  ['#FFB800', '$c-ci-gold'],
+  ['#DCE8F5', '$c-ci-blue-1'],
+  ['#C8DDF0', '$c-ci-blue-2'],
+];
+for (const [from, to] of LOCAL) {
+  const re = new RegExp(from + '(?![0-9a-fA-F])', 'gi');
+  replaced += (styleBody.match(re) || []).length;
+  styleBody = styleBody.replace(re, to);
+}
+
+const palette = [
+  '// ===== 孩子首页专属色阶(天空蓝渐变族 + 徽章金;单页专用,约定见 uni.scss §14)=====',
+  '$c-ci-sky:    #E0ECF8; // 顶部渐变终(浅天蓝)',
+  '$c-ci-navy:   #1E4A7A; // 深海军蓝文字',
+  '$c-ci-gold:   #FFB800; // 徽章金渐变终',
+  '$c-ci-blue-1: #DCE8F5; // 空态卡渐变起',
+  '$c-ci-blue-2: #C8DDF0; // 空态卡渐变终',
+  ''
+].join('\n');
+styleBody = styleBody.replace(/(<style[^>]*>\s*\n)/, '$1' + palette + '\n');
+
+fs.writeFileSync(F, before + styleBody);
+console.log('total replaced:', replaced);
+
+const out = fs.readFileSync(F, 'utf8');
+const lines = out.split('\n');
+let n = 0;
+for (let i = 0; i < lines.length; i++) {
+  const L = lines[i].trim();
+  if (/#[0-9a-fA-F]{3,8}\b/.test(L) && L.charAt(0) !== '$') { console.log('HEX ' + (i + 1) + ': ' + L.slice(0, 110)); n++; }
+}
+console.log('remaining non-palette hex:', n);

+ 6 - 0
cfc-frontend/uni.scss

@@ -603,6 +603,12 @@ $status-info-tint:     #EFF6FF; // blue-50(3 文件)
 $status-danger-tint-2: #FEF2F2; // tailwind red-50(11 文件;vs $status-danger-tint #FFF5F5 自定义浅档)
 $facade-border-soft:   #DDD;    // 描边灰(46 文件)
 $danger-line:          #FECACA; // red-200 警示描边(5 文件)
+// ---- Tailwind pastel 描边族(分类卡片/图标容器浅描边)----
+$tint-sky-line:        #BAE6FD; // sky-200(7 文件)
+$tint-green-line:      #BBF7D0; // green-200(4 文件)
+$tint-blue-line:       #BFDBFE; // blue-200(3 文件)
+$tint-pink-line:       #FBCFE8; // pink-200(2 文件)
+$tint-indigo-line:     #C7D2FE; // indigo-200(2 文件)
 $app-ink-night:        #1A1A2E; // 深夜蓝黑(17 文件)
 
 // ---- 封面渐变 / 提示条(B 批 articles 收敛时登记)----