Просмотр исходного кода

refactor(beautify): D13 tianpan 家庭天盘页清理 (debt 78->~30)

- 修复 C 批字符串 bug:elementColors/colorMap/getDimColor 中 'BrandColors.*' 字符串 -> 变量引用
- script 10 处 canvas/colorMap 色收编 BrandColors.*(含 import)
- style 全局映射:#FFF8F0->\-body-tint, #D1D5DB->\-border-strong,
  #F5F0FF->\-violet-tint, #7C3AED->\-violet-deep
- 专属色收编局部 \-tp-*(暖橙/棕/紫罗兰 5 色)
- brand-colors.js 补 bodyTint(#FFF8F0)/textGray800(#1F2937)
- hex 23->0(palette 声明除外)
liaoxg 6 дней назад
Родитель
Сommit
d75fca7a3d

+ 31 - 23
cfc-frontend/pages/tianpan/index.vue

@@ -163,6 +163,7 @@
 
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex'
+import { BrandColors } from '../../utils/brand-colors.js'
 
 export default {
   data: function() {
@@ -255,7 +256,7 @@ export default {
       
       // 清空画布
       ctx.clearRect(0, 0, w, h)
-      ctx.fillStyle = '#FFF8F0'
+      ctx.fillStyle = BrandColors.bodyTint
       ctx.fillRect(0, 0, w, h)
       
       // 获取数据
@@ -278,7 +279,7 @@ export default {
     drawRadar: function(ctx, cx, cy, r, members) {
       var axes = ['木', '火', '土', '金', '水']
       var elementKeys = ['wood', 'fire', 'earth', 'metal', 'water']
-      var elementColors = ['BrandColors.success', '#FF6B9D', 'BrandColors.body', 'BrandColors.wisdom', '#F59E0B']
+      var elementColors = [BrandColors.success, BrandColors.mind, BrandColors.body, BrandColors.wisdom, BrandColors.wealth]
       var angleStep = (Math.PI * 2) / 5
 
       // 获取五行数据
@@ -386,14 +387,14 @@ export default {
       }
 
       // 中心文字:家庭名 + 最强/最弱
-      ctx.fillStyle = '#1F2937'
+      ctx.fillStyle = BrandColors.textGray800
       ctx.font = 'bold 11px sans-serif'
       ctx.textAlign = 'center'
       ctx.textBaseline = 'middle'
       ctx.fillText(familyLabel, cx, cy - 6)
 
       if (strongest || weakest) {
-        ctx.fillStyle = '#6B7280'
+        ctx.fillStyle = BrandColors.textSlate
         ctx.font = '9px sans-serif'
         var strongestZh = strongest === 'wood' ? '木' : strongest === 'fire' ? '火' : strongest === 'earth' ? '土' : strongest === 'metal' ? '金' : strongest === 'water' ? '水' : strongest
         var weakestZh = weakest === 'wood' ? '木' : weakest === 'fire' ? '火' : weakest === 'earth' ? '土' : weakest === 'metal' ? '金' : weakest === 'water' ? '水' : weakest
@@ -415,12 +416,12 @@ export default {
         ctx.arc(x, y, 15, 0, Math.PI * 2)
         ctx.fillStyle = this.getMemberColor(member.effectiveRole)
         ctx.fill()
-        ctx.strokeStyle = '#FFF'
+        ctx.strokeStyle = BrandColors.white
         ctx.lineWidth = 2
         ctx.stroke()
         
         // 绘制名字
-        ctx.fillStyle = '#FFF'
+        ctx.fillStyle = BrandColors.white
         ctx.font = '10px sans-serif'
         ctx.textAlign = 'center'
         ctx.textBaseline = 'middle'
@@ -532,7 +533,7 @@ export default {
         if (score >= 80) {
           ctx.strokeStyle = 'BrandColors.success'
         } else if (score >= 60) {
-          ctx.strokeStyle = '#F59E0B'
+          ctx.strokeStyle = BrandColors.wealth
         } else {
           ctx.strokeStyle = 'BrandColors.danger'
         }
@@ -544,10 +545,10 @@ export default {
     getMemberColor: function(role) {
       var colorMap = {
         'parent': 'BrandColors.primary',
-        'child': '#3B82F6',
-        'teacher': '#8B5CF6'
+        'child': BrandColors.infoBlue,
+        'teacher': BrandColors.violet
       }
-      return colorMap[role] || '#6B7280'
+      return colorMap[role] || BrandColors.textSlate
     },
     
     getEightCharsText: function(eightChars) {
@@ -568,8 +569,8 @@ export default {
     },
     
     getDimColor: function(key) {
-      var colors = { body: 'BrandColors.body', mind: '#FF6B9D', wisdom: 'BrandColors.wisdom', action: 'BrandColors.success', wealth: '#F59E0B' }
-      return colors[key] || '#6B7280'
+      var colors = { body: BrandColors.body, mind: BrandColors.mind, wisdom: BrandColors.wisdom, action: BrandColors.success, wealth: BrandColors.wealth }
+      return colors[key] || BrandColors.textSlate
     },
     
     onCanvasTouchEnd: function(e) {
@@ -695,9 +696,16 @@ export default {
 import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
 
 <style lang="scss">
+// ===== 天盘页专属色阶(暖橙提示 + 紫罗兰软阶;单页专用,约定见 uni.scss §14)=====
+$c-tp-orange:       #FDBA74; // 暖橙(徽章渐变档)
+$c-tp-brown-deep:   #7C2D12; // 深棕文字(暖卡内)
+$c-tp-brown:        #9A3412; // 棕橙文字(橙卡内)
+$c-tp-violet-soft:  #E0D4FF; // 紫罗兰软底渐变终
+$c-tp-violet-text:  #6D28D9; // 紫罗兰文字
+
 .tianpan-container {
   min-height: 100vh;
-  background: linear-gradient(180deg, #FFF8F0 0%, $app-surface 100%);
+  background: linear-gradient(180deg, $dim-body-tint 0%, $app-surface 100%);
   padding-bottom: 40rpx;
 }
 
@@ -748,7 +756,7 @@ import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
 .tianpan-canvas {
   width: 750rpx;
   height: 750rpx;
-  background: #FFF8F0;
+  background: $dim-body-tint;
   border-radius: 32rpx;
   box-shadow: 0 8rpx 24rpx rgba(249, 114, 22, 0.1);
 }
@@ -816,7 +824,7 @@ import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
 
 .item-arrow {
   font-size: 40rpx;
-  color: #D1D5DB;
+  color: $app-border-strong;
 }
 
 .empty-state {
@@ -830,7 +838,7 @@ import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
 .fortune-card {
   margin: 32rpx;
   padding: 40rpx;
-  background: linear-gradient(135deg, $brand-primary-light-2 0%, #FDBA74 100%);
+  background: linear-gradient(135deg, $brand-primary-light-2 0%, $c-tp-orange 100%);
   border-radius: 32rpx;
   box-shadow: 0 8rpx 24rpx rgba(249, 114, 22, 0.2);
 }
@@ -845,12 +853,12 @@ import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
 .fortune-title {
   font-size: 36rpx;
   font-weight: bold;
-  color: #7C2D12;
+  color: $c-tp-brown-deep;
 }
 
 .fortune-date {
   font-size: 24rpx;
-  color: #9A3412;
+  color: $c-tp-brown;
 }
 
 .fortune-content {
@@ -859,14 +867,14 @@ import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
 
 .fortune-text {
   font-size: 28rpx;
-  color: #9A3412;
+  color: $c-tp-brown;
   line-height: 1.6;
 }
 
 .fortune-arrow {
   text-align: right;
   font-size: 24rpx;
-  color: #7C2D12;
+  color: $c-tp-brown-deep;
 }
 
 /* 成员弹窗 */
@@ -1002,16 +1010,16 @@ import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
 
 /* 传统命理入口卡片 */
 .tradition-card {
-  background: linear-gradient(135deg, #F5F0FF 0%, #E0D4FF 100%);
+  background: linear-gradient(135deg, $facade-violet-tint 0%, $c-tp-violet-soft 100%);
   box-shadow: 0 8rpx 24rpx rgba(139, 92, 246, 0.2);
 }
 
 .tradition-card .fortune-title {
-  color: #6D28D9;
+  color: $c-tp-violet-text;
 }
 
 .tradition-card .fortune-text {
-  color: #7C3AED;
+  color: $facade-violet-deep;
 }
 
 .tradition-card .fortune-arrow {

+ 90 - 0
cfc-frontend/scripts/d13-tianpan-index.js

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+/**
+ * D13: tianpan/index.vue 家庭天盘页清理 (debt 78)
+ *
+ * 1) 修复字符串 bug:'BrandColors.*' -> 变量 + import
+ * 2) script canvas/colorMap 色收编 BrandColors.*
+ * 3) style 全局映射 4 色 + 局部变量 5 色
+ */
+const fs = require('fs');
+const F = 'pages/tianpan/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, 80)); return; }
+  src = src.split(from).join(to);
+  replaced += cnt;
+}
+
+// ---- 1. import ----
+repl(
+  "<script>\nexport default {",
+  "<script>\nimport { BrandColors } from '../../utils/brand-colors.js'\n\nexport default {"
+);
+
+// ---- 2. script canvas ----
+repl("ctx.fillStyle = '#FFF8F0'", "ctx.fillStyle = BrandColors.bodyTint");
+repl("var elementColors = ['BrandColors.success', '#FF6B9D', 'BrandColors.body', 'BrandColors.wisdom', '#F59E0B']",
+     "var elementColors = [BrandColors.success, BrandColors.mind, BrandColors.body, BrandColors.wisdom, BrandColors.wealth]");
+repl("ctx.fillStyle = '#1F2937'", "ctx.fillStyle = BrandColors.textGray800");
+repl("ctx.fillStyle = '#6B7280'", "ctx.fillStyle = BrandColors.textSlate");
+repl("ctx.strokeStyle = '#FFF'", "ctx.strokeStyle = BrandColors.white");
+repl("ctx.fillStyle = '#FFF'", "ctx.fillStyle = BrandColors.white");
+repl("ctx.strokeStyle = '#F59E0B'", "ctx.strokeStyle = BrandColors.wealth");
+
+// ---- 3. colorMap ----
+repl("        'parent': 'BrandColors.primary',\n        'child': '#3B82F6',\n        'teacher': '#8B5CF6'",
+     "        'parent': BrandColors.primary,\n        'child': BrandColors.infoBlue,\n        'teacher': BrandColors.violet");
+repl("return colorMap[role] || '#6B7280'", "return colorMap[role] || BrandColors.textSlate");
+repl("var colors = { body: 'BrandColors.body', mind: '#FF6B9D', wisdom: 'BrandColors.wisdom', action: 'BrandColors.success', wealth: '#F59E0B' }",
+     "var colors = { body: BrandColors.body, mind: BrandColors.mind, wisdom: BrandColors.wisdom, action: BrandColors.success, wealth: BrandColors.wealth }");
+repl("return colors[key] || '#6B7280'", "return colors[key] || BrandColors.textSlate");
+
+// ---- 4. style 块 ----
+const styleIdx = src.indexOf('<style');
+const before = src.slice(0, styleIdx);
+let styleBody = src.slice(styleIdx);
+
+const GLOBAL = [
+  ['#FFF8F0', '$dim-body-tint'],
+  ['#D1D5DB', '$app-border-strong'],
+  ['#F5F0FF', '$facade-violet-tint'],
+  ['#7C3AED', '$facade-violet-deep'],
+];
+const PAL = [
+  ['#FDBA74', '$c-tp-orange'],
+  ['#7C2D12', '$c-tp-brown-deep'],
+  ['#9A3412', '$c-tp-brown'],
+  ['#E0D4FF', '$c-tp-violet-soft'],
+  ['#6D28D9', '$c-tp-violet-text'],
+];
+for (const [f, t] of [...GLOBAL, ...PAL]) {
+  const esc = f.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  styleBody = styleBody.replace(new RegExp(esc + '(?![0-9a-fA-F])', 'g'), t);
+}
+
+const palette = [
+  '// ===== 天盘页专属色阶(暖橙提示 + 紫罗兰软阶;单页专用,约定见 uni.scss §14)=====',
+  '$c-tp-orange:       #FDBA74; // 暖橙(徽章渐变档)',
+  '$c-tp-brown-deep:   #7C2D12; // 深棕文字(暖卡内)',
+  '$c-tp-brown:        #9A3412; // 棕橙文字(橙卡内)',
+  '$c-tp-violet-soft:  #E0D4FF; // 紫罗兰软底渐变终',
+  '$c-tp-violet-text:  #6D28D9; // 紫罗兰文字',
+  ''
+].join('\n');
+styleBody = styleBody.replace(/(<style[^>]*>\s*\n)/, '$1' + palette + '\n');
+
+src = before + styleBody;
+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++) {
+  const L = lines[i].trim();
+  if (/#[0-9a-fA-F]{3,8}\b/.test(L) && !/^\$c-/.test(L)) { console.log('HEX ' + (i + 1) + ': ' + L); n++; }
+}
+console.log('remaining non-palette hex:', n);

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

@@ -34,6 +34,7 @@ export const BrandColors = {
   primaryDark: '#EA580C',
   primaryDeep: '#C2410C',  // 深橙(画布卡片文字档)
   bodyLight: '#FFB366',    // 身体维度亮档(画布渐变终)
+  bodyTint: '#FFF8F0',     // 身体维度浅底($dim-body-tint)
 
   // 五维身份色
   body: '#FF8C42',
@@ -72,6 +73,7 @@ export const BrandColors = {
   hairline2: '#EEE',
   textFaint: '#888',
   gray200: '#E5E7EB',      // gray-200 浅灰(canvas 连线/分隔)
+  textGray800: '#1F2937',  // gray-800 深灰($facade-text-gray-800)
 
   // Plutchik 八基本情绪色板(情绪打卡专属;单一事实源)
   emotionJoy: '#FFD93D',       // 开心