refactor(beautify): D23 completion-rate flat 色收编全局令牌 (debt 60->0)

- uni.scss 新增 \-* 设计主题族（14 色：青绿/绿/米白/暖卡/深灰/警示橙黄）
- completion-rate 局部 \-comp-* 全部替换为 \-*，删除页面 palette 声明
- script RATE_COLORS 收编 BrandColors.flat*（brand-colors.js 同步 7 个 flat 键）
- hex 20->0；P1 1->0（P1 全站清零）

cfc-frontend/pages/stats/completion-rate.vue

@@ -151,16 +151,16 @@
 import { getChildCompletionStats, getFamilyCompletionStats, getChildren } from '../../utils/api.js'
 import { BrandColors } from '../../utils/brand-colors.js'
 
-// 完成率页专属色板（flat 青绿图表系 + 米白卡片系，单页专用）
+// 完成率页图表色板（flat 主题，通用令牌见 uni.scss $flat-* / utils/brand-colors.js）
 const RATE_COLORS = {
-  track:      '#FFF0E6', // 环形底轨
-  done:       '#4ECDC4', // 已完成（青绿）
-  doneDeep:   '#44B09E', // 青绿渐变深档
-  pending:    '#FFB088', // 进行中（浅橙）
-  overdue:    BrandColors.primary, // 已逾期（品牌橙）
-  bar:        '#FFD93D', // 柱图高亮黄
-  barGreen:   '#A8E063', // 柱图渐变绿起
-  barGreenTo: '#56AB2F', // 柱图渐变绿终
+  track:      BrandColors.flatWarm,      // 环形底轨
+  done:       BrandColors.flatTeal,      // 已完成（青绿）
+  doneDeep:   BrandColors.flatTealDeep,  // 青绿渐变深档
+  pending:    BrandColors.flatOrangeSoft,// 进行中（浅橙）
+  overdue:    BrandColors.primary,       // 已逾期（品牌橙）
+  bar:        BrandColors.flatBar,       // 柱图高亮黄
+  barGreen:   BrandColors.flatGreen,     // 柱图渐变绿起
+  barGreenTo: BrandColors.flatGreenDeep, // 柱图渐变绿终
 };
 
 export default {
@@ -269,23 +269,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// ===== 完成率页专属色阶（flat 图表青绿 + 米白卡片，单页专用；约定见 uni.scss §14）=====
-$c-comp-bg:           #FFF9F0; // 页面米白底
-$c-comp-card:         #FFF5EB; // 暖白卡片底
-$c-comp-warm:         #FFF0E6; // 暖米色（环形底轨 / 分隔）
-$c-comp-done:         #4ECDC4; // 已完成青绿（图表 / 图例）
-$c-comp-done-deep:    #44B09E; // 青绿渐变深档
-$c-comp-ink:          #2D3436; // 主文字（深灰）
-$c-comp-muted:        #B2BEC3; // 次要文字（灰）
-$c-comp-muted2:       #636E72; // 辅助文字（中灰）
-$c-comp-danger-line:  #FFE0E0; // 危险浅描边
-$c-comp-orange-text:  #E17055; // 警示橙文字
-$c-comp-bar-yellow:   #FFD93D; // 柱图高亮黄
-$c-comp-bar-green:    #A8E063; // 柱图绿渐变起
-$c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
+// flat 主题色走 uni.scss 全局令牌（$flat-*），本页不再声明局部色阶
 
 .container {
-  background: $c-comp-bg;
+  background: $flat-bg;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -298,7 +285,7 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
   justify-content: space-between;
   padding: 24rpx 32rpx;
   padding-top: calc(88rpx + env(safe-area-inset-top));
-  background: $c-comp-bg;
+  background: $flat-bg;
   position: sticky;
   top: 0;
   z-index: 10;
@@ -315,7 +302,7 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 
 .back-arrow {
   font-size: 48rpx;
-  color: $c-comp-ink;
+  color: $flat-ink;
   font-weight: 300;
   line-height: 1;
 }
@@ -323,13 +310,13 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 .header-title {
   font-size: 34rpx;
   font-weight: 700;
-  color: $c-comp-ink;
+  color: $flat-ink;
 }
 
 .period-btn {
   font-size: 26rpx;
   color: $dim-body;
-  background: $c-comp-card;
+  background: $flat-card;
   padding: 8rpx 20rpx;
   border-radius: 24rpx;
   font-weight: 500;
@@ -353,7 +340,7 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 .loading-spinner {
   width: 64rpx;
   height: 64rpx;
-  border: 6rpx solid $c-comp-warm;
+  border: 6rpx solid $flat-warm;
   border-top-color: $dim-body;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
@@ -365,7 +352,7 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 
 .loading-text {
   font-size: 26rpx;
-  color: $c-comp-muted;
+  color: $flat-muted;
   margin-top: 20rpx;
 }
 
@@ -409,13 +396,13 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 .rate-value {
   font-size: 40rpx;
   font-weight: 800;
-  color: $c-comp-ink;
+  color: $flat-ink;
   line-height: 1.2;
 }
 
 .rate-label {
   font-size: 22rpx;
-  color: $c-comp-muted;
+  color: $flat-muted;
   margin-top: 4rpx;
 }
 
@@ -441,7 +428,7 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 
 .legend-label {
   font-size: 26rpx;
-  color: $c-comp-muted2;
+  color: $flat-muted-2;
 }
 
 /* 快捷统计卡片 */
@@ -470,12 +457,12 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 
 .quick-stat-label {
   font-size: 22rpx;
-  color: $c-comp-muted;
+  color: $flat-muted;
   margin-top: 8rpx;
 }
 
 .primary-color { color: $dim-body; }
-.success-color { color: $c-comp-done; }
+.success-color { color: $flat-teal; }
 .danger-color { color: $brand-primary; }
 
 /* 逾期警示 */
@@ -486,7 +473,7 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
   margin-bottom: 24rpx;
   display: flex;
   align-items: flex-start;
-  border: 1rpx solid $c-comp-danger-line;
+  border: 1rpx solid $flat-danger-line;
 }
 
 .alert-icon {
@@ -508,7 +495,7 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 
 .alert-desc {
   font-size: 24rpx;
-  color: $c-comp-orange-text;
+  color: $flat-orange-text;
   margin-top: 6rpx;
   display: block;
 }
@@ -532,7 +519,7 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 .section-title {
   font-size: 30rpx;
   font-weight: 700;
-  color: $c-comp-ink;
+  color: $flat-ink;
 }
 
 /* 孩子对比 */
@@ -550,7 +537,7 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 
 .compare-name {
   font-size: 28rpx;
-  color: $c-comp-ink;
+  color: $flat-ink;
   font-weight: 500;
 }
 
@@ -562,7 +549,7 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 
 .compare-bar-bg {
   height: 12rpx;
-  background: $c-comp-warm;
+  background: $flat-warm;
   border-radius: 999rpx;
   overflow: hidden;
 }
@@ -573,11 +560,11 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
   transition: width 0.5s ease;
 }
 
-.bar-color-0 { background: linear-gradient(90deg, $dim-body, $c-comp-bar-yellow); }
-.bar-color-1 { background: linear-gradient(90deg, $c-comp-done, $c-comp-done-deep); }
+.bar-color-0 { background: linear-gradient(90deg, $dim-body, $flat-bar); }
+.bar-color-1 { background: linear-gradient(90deg, $flat-teal, $flat-teal-deep); }
 .bar-color-2 { background: linear-gradient(90deg, $accent-indigo, $accent-indigo-deep); }
 .bar-color-3 { background: linear-gradient(90deg, $brand-primary, $brand-primary-light); }
-.bar-color-4 { background: linear-gradient(90deg, $c-comp-bar-green, $c-comp-bar-green-to); }
+.bar-color-4 { background: linear-gradient(90deg, $flat-green, $flat-green-deep); }
 
 /* 分类列表 */
 .category-list {
@@ -599,13 +586,13 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 
 .category-name {
   font-size: 24rpx;
-  color: $c-comp-muted2;
+  color: $flat-muted-2;
   display: block;
 }
 
 .category-count {
   font-size: 20rpx;
-  color: $c-comp-muted;
+  color: $flat-muted;
   display: block;
   margin-top: 2rpx;
 }
@@ -613,14 +600,14 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 .category-bar-bg {
   flex: 1;
   height: 16rpx;
-  background: $c-comp-warm;
+  background: $flat-warm;
   border-radius: 999rpx;
   overflow: hidden;
 }
 
 .category-bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, $c-comp-done, $c-comp-done-deep);
+  background: linear-gradient(90deg, $flat-teal, $flat-teal-deep);
   border-radius: 999rpx;
   transition: width 0.5s ease;
 }
@@ -630,7 +617,7 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
   text-align: right;
   font-size: 24rpx;
   font-weight: 600;
-  color: $c-comp-done;
+  color: $flat-teal;
   flex-shrink: 0;
 }
 
@@ -653,7 +640,7 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 
 .completed-title {
   font-size: 28rpx;
-  color: $c-comp-ink;
+  color: $flat-ink;
   flex: 1;
   padding-right: 16rpx;
 }
@@ -675,7 +662,7 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 .empty-icon-area {
   width: 160rpx;
   height: 160rpx;
-  background: $c-comp-card;
+  background: $flat-card;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -690,13 +677,13 @@ $c-comp-bar-green-to: #56AB2F; // 柱图绿渐变终
 .empty-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: $c-comp-ink;
+  color: $flat-ink;
   margin-bottom: 12rpx;
 }
 
 .empty-hint {
   font-size: 26rpx;
-  color: $c-comp-muted;
+  color: $flat-muted;
   text-align: center;
 }
 </style>

cfc-frontend/scripts/d23-completion-rate.js

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+/**
+ * D23: completion-rate.vue 完成率页 flat 色收编全局令牌 (debt 60 -> 0)
+ * $c-comp-* 局部色阶 -> uni.scss $flat-* 全局令牌；移除页面 palette 声明
+ */
+const fs = require('fs');
+const F = 'pages/stats/completion-rate.vue';
+let src = fs.readFileSync(F, 'utf8');
+
+const MAP = [
+  ['$c-comp-bg', '$flat-bg'],
+  ['$c-comp-card', '$flat-card'],
+  ['$c-comp-warm', '$flat-warm'],
+  ['$c-comp-done-deep', '$flat-teal-deep'], // 先长后短
+  ['$c-comp-done', '$flat-teal'],
+  ['$c-comp-ink', '$flat-ink'],
+  ['$c-comp-muted2', '$flat-muted-2'],
+  ['$c-comp-muted', '$flat-muted'],
+  ['$c-comp-danger-line', '$flat-danger-line'],
+  ['$c-comp-orange-text', '$flat-orange-text'],
+  ['$c-comp-bar-yellow', '$flat-bar'],
+  ['$c-comp-bar-green-to', '$flat-green-deep'],
+  ['$c-comp-bar-green', '$flat-green'],
+];
+for (const [from, to] of MAP) {
+  const re = new RegExp(from.replace('$', '\\$') + '(?![\\w-])', 'g');
+  src = src.replace(re, to);
+}
+
+// 移除 palette 声明块（现已全部指向全局令牌）
+src = src.replace(
+  /\/\/ ===== 完成率页专属色阶[^\n]*\n(?:\$c-comp-[^\n]*\n)+\n/,
+  ''
+);
+
+fs.writeFileSync(F, src);
+console.log('done; remaining $c-comp:', (src.match(/\$c-comp-/g) || []).length);
+
+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, 100)); n++; }
+}
+console.log('remaining hex lines:', n);

cfc-frontend/uni.scss

@@ -59,6 +59,23 @@ $mat-blue-strong:  #1565C0; // blue-800 深文字（17 文件）
 $mat-blue:         #1976D2; // blue-700 主色（5 文件）
 $mat-green-soft:   #A5D6A7; // green-200 浅边线（3 文件）
 
+// ---- Flat 设计主题（游戏/测评/统计等活力页共用：青绿主色 + 暖白卡片 + 深灰文字）----
+$flat-teal:        #4ECDC4; // 青绿主色（图表/图例，10 文件）
+$flat-teal-deep:   #44B09E; // 青绿渐变深档（4 文件）
+$flat-green:       #A8E063; // 绿浅档（渐变起，5 文件）
+$flat-green-deep:  #56AB2F; // 绿深档（渐变终，4 文件）
+$flat-bg:          #FFF9F0; // 页面米白底（5 文件）
+$flat-card:        #FFF5EB; // 暖白卡片底（7 文件）
+$flat-warm:        #FFF0E6; // 暖米色（环形底轨/分隔线，2 文件）
+$flat-line:        #F5F0EB; // 暖分隔线（2 文件）
+$flat-ink:         #2D3436; // 主文字深灰（2 文件）
+$flat-muted:       #B2BEC3; // 次要文字灰（2 文件）
+$flat-muted-2:     #636E72; // 辅助文字中灰（2 文件）
+$flat-danger-line: #FFE0E0; // 危险浅描边（2 文件）
+$flat-orange-text: #E17055; // 警示橙文字（1 文件）
+$flat-orange-soft: #FFB088; // 进行中浅橙（1 文件）
+$flat-bar:         #FFD93D; // 柱图高亮黄（2 文件）
+
 $uni-warning: #FFB74D;
 $uni-warning-light: #FFD54F;
 $uni-error: #EF5350;

cfc-frontend/utils/brand-colors.js

@@ -86,6 +86,14 @@ export const BrandColors = {
   fillGray100: '#F3F4F6',   // $facade-fill-gray-100
   goldDeep: '#FFA500',      // $accent-gold-deep（数据图标橙）
   blush: '#FFF5F7',         // 浅粉底（家庭看板画布）
+  // Flat 设计主题（与 uni.scss $flat-* 同值；scss 侧见 uni.scss §Flat）
+  flatTeal: '#4ECDC4',
+  flatTealDeep: '#44B09E',
+  flatGreen: '#A8E063',
+  flatGreenDeep: '#56AB2F',
+  flatWarm: '#FFF0E6',
+  flatOrangeSoft: '#FFB088',
+  flatBar: '#FFD93D',
 
   // Plutchik 八基本情绪色板（情绪打卡专属；单一事实源）
   emotionJoy: '#FFD93D',       // 开心