Ver Fonte

refactor(beautify): D14 child-detail 孩子详情页清理 (debt 73->~30)

- flat 设计主题专属色收编局部 \-cd-*(14 色:米白底/青绿/绿/粉红/灰阶/暖卡)
- 全局无等值令牌(与 completion-rate 同主题色调)
- hex 20->0(palette 声明除外);P1 12->9
liaoxg há 5 dias atrás
pai
commit
040a0b5735

+ 36 - 20
cfc-frontend/pages/parent/child-detail.vue

@@ -201,9 +201,25 @@ if (!this.childName || this.childName === '成员') {
 </script>
 
 <style scoped lang="scss">
+// ===== 孩子详情页专属色阶(flat 图表青绿 + 米白卡片;单页专用,约定见 uni.scss §14)=====
+$c-cd-bg:         #FFF9F0; // 页面米白底
+$c-cd-card:       #FFF5EB; // 暖白卡片底
+$c-cd-line:       #F5F0EB; // 暖分隔线
+$c-cd-ink:        #2D3436; // 主文字(深灰)
+$c-cd-muted:      #B2BEC3; // 次要文字(灰)
+$c-cd-muted2:     #636E72; // 辅助文字(中灰)
+$c-cd-orange:     #FF7A2E; // 橙渐变终档
+$c-cd-teal:       #4ECDC4; // 青绿主色
+$c-cd-teal-deep:  #44B09E; // 青绿深档
+$c-cd-green:      #A8E063; // 绿浅档
+$c-cd-green-deep: #56AB2F; // 绿深档
+$c-cd-pink:       #F093FB; // 粉紫渐变起
+$c-cd-red:        #F5576C; // 红粉渐变终
+$c-cd-danger-bg:  #FFF0F0; // 警示浅红底
+
 .container {
   padding: 30rpx;
-  background: #FFF9F0;
+  background: $c-cd-bg;
   min-height: 100vh;
 }
 
@@ -216,7 +232,7 @@ if (!this.childName || this.childName === '成员') {
 
 .loading-text {
   font-size: 28rpx;
-  color: #B2BEC3;
+  color: $c-cd-muted;
 }
 
 /* 孩子信息卡片 */
@@ -247,12 +263,12 @@ if (!this.childName || this.childName === '成员') {
   color: $app-surface;
 }
 
-.child-avatar-color-0 { background: linear-gradient(135deg, $dim-body, #FF7A2E); }
+.child-avatar-color-0 { background: linear-gradient(135deg, $dim-body, $c-cd-orange); }
 .child-avatar-color-1 { background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep); }
-.child-avatar-color-2 { background: linear-gradient(135deg, #4ECDC4, #44B09E); }
+.child-avatar-color-2 { background: linear-gradient(135deg, $c-cd-teal, $c-cd-teal-deep); }
 .child-avatar-color-3 { background: linear-gradient(135deg, $brand-primary, $brand-primary-light); }
-.child-avatar-color-4 { background: linear-gradient(135deg, #A8E063, #56AB2F); }
-.child-avatar-color-5 { background: linear-gradient(135deg, #F093FB, #F5576C); }
+.child-avatar-color-4 { background: linear-gradient(135deg, $c-cd-green, $c-cd-green-deep); }
+.child-avatar-color-5 { background: linear-gradient(135deg, $c-cd-pink, $c-cd-red); }
 
 .child-info-body {
   flex: 1;
@@ -262,7 +278,7 @@ if (!this.childName || this.childName === '成员') {
 .child-info-name {
   font-size: 36rpx;
   font-weight: 700;
-  color: #2D3436;
+  color: $c-cd-ink;
   display: block;
 }
 
@@ -288,21 +304,21 @@ if (!this.childName || this.childName === '成员') {
 
 .progress-label {
   font-size: 22rpx;
-  color: #636E72;
+  color: $c-cd-muted2;
   display: block;
   margin-bottom: 8rpx;
 }
 
 .progress-bar-bg {
   height: 10rpx;
-  background: #FFF5EB;
+  background: $c-cd-card;
   border-radius: 9999rpx;
   overflow: hidden;
 }
 
 .progress-bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, #4ECDC4, #44B09E);
+  background: linear-gradient(90deg, $c-cd-teal, $c-cd-teal-deep);
   border-radius: 9999rpx;
   transition: width 0.3s ease;
 }
@@ -311,7 +327,7 @@ if (!this.childName || this.childName === '成员') {
 .section-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: #2D3436;
+  color: $c-cd-ink;
   margin-bottom: 20rpx;
 }
 
@@ -336,7 +352,7 @@ if (!this.childName || this.childName === '成员') {
   align-items: center;
   box-shadow: 0 4px 20px rgba(255, 140, 66, 0.08);
   position: relative;
-  border: 8rpx solid #FFF9F0;
+  border: 8rpx solid $c-cd-bg;
 }
 
 .action-btn-icon {
@@ -357,7 +373,7 @@ if (!this.childName || this.childName === '成员') {
 
 .action-btn-label {
   font-size: 24rpx;
-  color: #636E72;
+  color: $c-cd-muted2;
   font-weight: 500;
 }
 
@@ -392,7 +408,7 @@ if (!this.childName || this.childName === '成员') {
   display: flex;
   align-items: center;
   padding: 20rpx 0;
-  border-bottom: 1rpx solid #F5F0EB;
+  border-bottom: 1rpx solid $c-cd-line;
 }
 
 .task-item:last-child {
@@ -413,7 +429,7 @@ if (!this.childName || this.childName === '成员') {
 
 .task-title {
   font-size: 28rpx;
-  color: #2D3436;
+  color: $c-cd-ink;
 }
 
 .task-points {
@@ -439,7 +455,7 @@ if (!this.childName || this.childName === '成员') {
 
 .empty-text {
   font-size: 28rpx;
-  color: #B2BEC3;
+  color: $c-cd-muted;
 }
 
 /* 待处理 */
@@ -458,7 +474,7 @@ if (!this.childName || this.childName === '成员') {
   display: flex;
   align-items: center;
   padding: 20rpx 0;
-  border-bottom: 1rpx solid #F5F0EB;
+  border-bottom: 1rpx solid $c-cd-line;
 }
 
 .pending-item:last-child {
@@ -473,7 +489,7 @@ if (!this.childName || this.childName === '成员') {
 .pending-desc {
   flex: 1;
   font-size: 28rpx;
-  color: #2D3436;
+  color: $c-cd-ink;
 }
 
 .pending-tag {
@@ -484,12 +500,12 @@ if (!this.childName || this.childName === '成员') {
 }
 
 .tag-review {
-  background: #FFF5EB;
+  background: $c-cd-card;
   color: $dim-body;
 }
 
 .tag-wish {
-  background: #FFF0F0;
+  background: $c-cd-danger-bg;
   color: $brand-primary;
 }
 </style>

+ 56 - 0
cfc-frontend/scripts/d14-child-detail.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+/**
+ * D14: child-detail.vue 孩子详情页清理 (debt 73)
+ * flat 设计主题专属色收编为页面级局部变量 $c-cd-*(无全局等值令牌)
+ */
+const fs = require('fs');
+const F = 'pages/parent/child-detail.vue';
+let src = fs.readFileSync(F, 'utf8');
+
+const styleIdx = src.indexOf('<style');
+const before = src.slice(0, styleIdx);
+let styleBody = src.slice(styleIdx);
+
+const PAL = [
+  ['#FFF9F0', '$c-cd-bg'],          // 页面米白底 x2
+  ['#B2BEC3', '$c-cd-muted'],       // 次要灰文字 x3
+  ['#FF7A2E', '$c-cd-orange'],      // 橙渐变档
+  ['#4ECDC4', '$c-cd-teal'],        // 青绿主色 x3
+  ['#44B09E', '$c-cd-teal-deep'],   // 青绿深档 x3
+  ['#A8E063', '$c-cd-green'],       // 绿浅档
+  ['#56AB2F', '$c-cd-green-deep'],  // 绿深档
+  ['#F093FB', '$c-cd-pink'],        // 粉紫
+  ['#F5576C', '$c-cd-red'],         // 红粉
+  ['#2D3436', '$c-cd-ink'],         // 主文字深灰 x5
+  ['#636E72', '$c-cd-muted2'],      // 辅助文字中灰 x3
+  ['#FFF5EB', '$c-cd-card'],        // 暖白卡片底 x2
+  ['#F5F0EB', '$c-cd-line'],        // 暖分隔线 x2
+  ['#FFF0F0', '$c-cd-danger-bg'],   // 警示浅红底
+];
+for (const [f, t] of PAL) {
+  const esc = f.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  styleBody = styleBody.replace(new RegExp(esc + '(?![0-9a-fA-F])', 'gi'), t);
+}
+
+const palette = [
+  '// ===== 孩子详情页专属色阶(flat 图表青绿 + 米白卡片;单页专用,约定见 uni.scss §14)=====',
+  '$c-cd-bg:         #FFF9F0; // 页面米白底',
+  '$c-cd-card:       #FFF5EB; // 暖白卡片底',
+  '$c-cd-line:       #F5F0EB; // 暖分隔线',
+  '$c-cd-ink:        #2D3436; // 主文字(深灰)',
+  '$c-cd-muted:      #B2BEC3; // 次要文字(灰)',
+  '$c-cd-muted2:     #636E72; // 辅助文字(中灰)',
+  '$c-cd-orange:     #FF7A2E; // 橙渐变终档',
+  '$c-cd-teal:       #4ECDC4; // 青绿主色',
+  '$c-cd-teal-deep:  #44B09E; // 青绿深档',
+  '$c-cd-green:      #A8E063; // 绿浅档',
+  '$c-cd-green-deep: #56AB2F; // 绿深档',
+  '$c-cd-pink:       #F093FB; // 粉紫渐变起',
+  '$c-cd-red:        #F5576C; // 红粉渐变终',
+  '$c-cd-danger-bg:  #FFF0F0; // 警示浅红底',
+  ''
+].join('\n');
+styleBody = styleBody.replace(/(<style[^>]*>\s*\n)/, '$1' + palette + '\n');
+
+fs.writeFileSync(F, before + styleBody);
+console.log('D14 done');