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

refactor(beautify): D15 traditional 传统天盘页清理 (debt 72->~20)

- script 五行色板/1-9 数字色板/五维色板全部收编 BrandColors.*(含 import)
- template 头像 fallback 绑定 data.memberColorFallback
- style #FFF8F0->\-body-tint
- brand-colors.js 补 appTextSubtle(#94A3B8)/pink(#EC4899)/tealDeep(#14B8A6)
- hex 8 行(24 次出现)->0;P1 9->8
liaoxg 5 дней назад
Родитель
Сommit
59ed2347d5

+ 11 - 9
cfc-frontend/pages/tianpan/traditional.vue

@@ -17,7 +17,7 @@
       <view class="member-card" v-for="member in members" :key="member.memberId">
       <view class="member-card" v-for="member in members" :key="member.memberId">
         <!-- 头部 -->
         <!-- 头部 -->
         <view class="card-header">
         <view class="card-header">
-          <view class="avatar" :style="{ backgroundColor: member.colorHex || '#6B7280' }">
+          <view class="avatar" :style="{ backgroundColor: member.colorHex || memberColorFallback }">
             <text class="avatar-text">{{ member.nickname ? member.nickname.charAt(0) : 'M' }}</text>
             <text class="avatar-text">{{ member.nickname ? member.nickname.charAt(0) : 'M' }}</text>
           </view>
           </view>
           <view class="member-info">
           <view class="member-info">
@@ -99,13 +99,15 @@
 </template>
 </template>
 
 
 <script>
 <script>
+import { BrandColors } from '../../utils/brand-colors.js'
 import { mapState, mapGetters, mapActions } from 'vuex'
 import { mapState, mapGetters, mapActions } from 'vuex'
 
 
 export default {
 export default {
   data: function() {
   data: function() {
     return {
     return {
       loading: false,
       loading: false,
-      members: []
+      members: [],
+      memberColorFallback: BrandColors.textSlate
     }
     }
   },
   },
   computed: {
   computed: {
@@ -146,12 +148,12 @@ export default {
 
 
     getWuxingData: function(wuxingElements) {
     getWuxingData: function(wuxingElements) {
       if (!wuxingElements) return []
       if (!wuxingElements) return []
-      var colorMap = { wood: '#10B981', fire: '#FF6B9D', earth: '#FF8C42', metal: '#6366F1', water: '#3B82F6' }
+      var colorMap = { wood: BrandColors.success, fire: BrandColors.mind, earth: BrandColors.body, metal: BrandColors.wisdom, water: BrandColors.infoBlue }
       var labelMap = { wood: '木', fire: '火', earth: '土', metal: '金', water: '水' }
       var labelMap = { wood: '木', fire: '火', earth: '土', metal: '金', water: '水' }
       var result = []
       var result = []
       for (var key in wuxingElements) {
       for (var key in wuxingElements) {
         if (wuxingElements.hasOwnProperty(key)) {
         if (wuxingElements.hasOwnProperty(key)) {
-          result.push({ key: key, label: labelMap[key] || key, value: wuxingElements[key], color: colorMap[key] || '#94A3B8' })
+          result.push({ key: key, label: labelMap[key] || key, value: wuxingElements[key], color: colorMap[key] || BrandColors.appTextSubtle })
         }
         }
       }
       }
       return result.sort(function(a, b) { return b.value - a.value })
       return result.sort(function(a, b) { return b.value - a.value })
@@ -163,8 +165,8 @@ export default {
     },
     },
 
 
     getLifeNumberColor: function(num) {
     getLifeNumberColor: function(num) {
-      var colors = { 1: '#F97316', 2: '#EC4899', 3: '#8B5CF6', 4: '#F59E0B', 5: '#3B82F6', 6: '#10B981', 7: '#6366F1', 8: '#EF4444', 9: '#14B8A6' }
-      return colors[num] || '#6B7280'
+      var colors = { 1: BrandColors.primary, 2: BrandColors.pink, 3: BrandColors.violet, 4: BrandColors.wealth, 5: BrandColors.infoBlue, 6: BrandColors.success, 7: BrandColors.wisdom, 8: BrandColors.danger, 9: BrandColors.tealDeep }
+      return colors[num] || BrandColors.textSlate
     },
     },
 
 
     getLifeNumberTitle: function(num) {
     getLifeNumberTitle: function(num) {
@@ -178,8 +180,8 @@ export default {
     },
     },
 
 
     getDimColor: function(key) {
     getDimColor: function(key) {
-      var colors = { body: '#FF8C42', mind: '#FF6B9D', wisdom: '#6366F1', action: '#10B981', wealth: '#F59E0B' }
-      return colors[key] || '#6B7280'
+      var colors = { body: BrandColors.body, mind: BrandColors.mind, wisdom: BrandColors.wisdom, action: BrandColors.action, wealth: BrandColors.wealth }
+      return colors[key] || BrandColors.textSlate
     }
     }
   }
   }
 }
 }
@@ -188,7 +190,7 @@ export default {
 <style scoped lang="scss">
 <style scoped lang="scss">
 .traditional-container {
 .traditional-container {
   min-height: 100vh;
   min-height: 100vh;
-  background: #FFF8F0;
+  background: $dim-body-tint;
   padding-bottom: 80rpx;
   padding-bottom: 80rpx;
 }
 }
 
 

+ 51 - 0
cfc-frontend/scripts/d15-traditional.js

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+/**
+ * D15: traditional.vue 传统天盘页清理 (debt 72)
+ * script 五行/数字/五维色板全部收编 BrandColors(含 import)
+ * template 头像 fallback 绑定 data
+ * style #FFF8F0 -> $dim-body-tint
+ */
+const fs = require('fs');
+const F = 'pages/tianpan/traditional.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, 90)); return; }
+  src = src.split(from).join(to);
+  replaced += cnt;
+}
+
+// ---- 1. import(接在首个 import 后)----
+const m = src.match(/<script>([\s\S]{0,200})/);
+console.log('script head:', JSON.stringify(m[1].slice(0, 120)));
+if (!src.includes('utils/brand-colors.js')) {
+  src = src.replace('<script>', "<script>\nimport { BrandColors } from '../../utils/brand-colors.js'");
+}
+
+// ---- 2. template fallback ----
+repl("backgroundColor: member.colorHex || '#6B7280'", "backgroundColor: member.colorHex || memberColorFallback");
+repl("      currentUser: null,", "      currentUser: null,\n      memberColorFallback: BrandColors.textSlate,");
+
+// ---- 3. 五行色板 ----
+repl("var colorMap = { wood: '#10B981', fire: '#FF6B9D', earth: '#FF8C42', metal: '#6366F1', water: '#3B82F6' }",
+     "var colorMap = { wood: BrandColors.success, fire: BrandColors.mind, earth: BrandColors.body, metal: BrandColors.wisdom, water: BrandColors.infoBlue }");
+repl("colorMap[key] || '#94A3B8'", "colorMap[key] || BrandColors.appTextSubtle");
+
+// ---- 4. 数字色板 + 五维色板 ----
+repl("var colors = { 1: '#F97316', 2: '#EC4899', 3: '#8B5CF6', 4: '#F59E0B', 5: '#3B82F6', 6: '#10B981', 7: '#6366F1",
+     "var colors = { 1: BrandColors.primary, 2: BrandColors.pink, 3: BrandColors.violet, 4: BrandColors.wealth, 5: BrandColors.infoBlue, 6: BrandColors.success, 7: BrandColors.wisdom");
+repl("return colors[num] || '#6B7280'", "return colors[num] || BrandColors.textSlate");
+repl("var colors = { body: '#FF8C42', mind: '#FF6B9D', wisdom: '#6366F1', action: '#10B981', wealth: '#F59E0B' }",
+     "var colors = { body: BrandColors.body, mind: BrandColors.mind, wisdom: BrandColors.wisdom, action: BrandColors.action, wealth: BrandColors.wealth }");
+repl("return colors[key] || '#6B7280'", "return colors[key] || BrandColors.textSlate");
+
+// ---- 5. style ----
+const styleIdx = src.indexOf('<style');
+const before = src.slice(0, styleIdx);
+let styleBody = src.slice(styleIdx);
+styleBody = styleBody.replace(/#FFF8F0(?![0-9a-fA-F])/gi, '$dim-body-tint');
+
+fs.writeFileSync(F, before + styleBody);
+console.log('total replaced:', replaced);

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

@@ -74,6 +74,9 @@ export const BrandColors = {
   textFaint: '#888',
   textFaint: '#888',
   gray200: '#E5E7EB',      // gray-200 浅灰(canvas 连线/分隔)
   gray200: '#E5E7EB',      // gray-200 浅灰(canvas 连线/分隔)
   textGray800: '#1F2937',  // gray-800 深灰($facade-text-gray-800)
   textGray800: '#1F2937',  // gray-800 深灰($facade-text-gray-800)
+  appTextSubtle: '#94A3B8', // slate-400 弱文字($app-text-subtle)
+  pink: '#EC4899',          // pink-500($accent-pink)
+  tealDeep: '#14B8A6',      // teal-500(天盘 9 档色板)
 
 
   // Plutchik 八基本情绪色板(情绪打卡专属;单一事实源)
   // Plutchik 八基本情绪色板(情绪打卡专属;单一事实源)
   emotionJoy: '#FFD93D',       // 开心
   emotionJoy: '#FFD93D',       // 开心