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

refactor(beautify): D9 energy 五维能量页清理 (debt 105->?)

- 修复 C 批遗留 bug:'BrandColors.xxx' 字符串 -> 变量引用 + import
- DIM_CONFIG 5 维色板全收编 BrandColors.* 与模板字符串
- avatarGradient / navGradient / memberColor gradient 改模板字符串(反引号 + BrandColors.*)
- RadarChart strokeColor/labelColor 绑定 data.radarStrokeColor/LabelColor
- style深蓝 #0F1B2D/#1A2744 收编为 -energy-deep-1/2
- brand-colors.js 新增 infoBlue #3B82F6 / infoBlueLight #60A5FA
- hardcoded hex 18->2;硬编码色 1636+(预估)
liaoxg 6 дней назад
Родитель
Сommit
9b7b256281

+ 25 - 18
cfc-frontend/pages/energy/index.vue

@@ -76,9 +76,9 @@
           :avg-scores="radarFamilyScores"
           :avg-scores="radarFamilyScores"
           :population-scores="[]"
           :population-scores="[]"
           fillColor="rgba(102,126,234,0.2)"
           fillColor="rgba(102,126,234,0.2)"
-          strokeColor="#F97316"
+          :stroke-color="radarStrokeColor"
           gridColor="rgba(102,126,234,0.15)"
           gridColor="rgba(102,126,234,0.15)"
-          labelColor="#888"
+          :label-color="radarLabelColor"
           :width="580"
           :width="580"
           :height="580"
           :height="580"
           @dimensionClick="goDimension" />
           @dimensionClick="goDimension" />
@@ -142,13 +142,14 @@
 <script>
 <script>
 import RadarChart from '../../components/RadarChart.vue'
 import RadarChart from '../../components/RadarChart.vue'
 import { getFamilyEnergySandbox, getFamilyMemberList } from '../../utils/api.js'
 import { getFamilyEnergySandbox, getFamilyMemberList } from '../../utils/api.js'
+import { BrandColors } from '../../utils/brand-colors.js'
 
 
 var DIM_CONFIG = [
 var DIM_CONFIG = [
-  { code: 'body',    label: '身', icon: '💪', color: 'BrandColors.success', gradient: 'linear-gradient(135deg,#10B981,#34D399)' },
-  { code: 'mind',    label: '心', icon: '❤️', color: 'BrandColors.primary', gradient: 'linear-gradient(135deg,#F97316,#FB923C)' },
-  { code: 'wisdom',  label: '智', icon: '🧠', color: '#F59E0B', gradient: 'linear-gradient(135deg,#F59E0B,#FBBF24)' },
-  { code: 'action',  label: '行', icon: '⚡', color: 'BrandColors.primary', gradient: 'linear-gradient(135deg,#F97316,#FB923C)' },
-  { code: 'wealth',  label: '富', icon: '💎', color: '#3B82F6', gradient: 'linear-gradient(135deg,#3B82F6,#60A5FA)' }
+  { code: 'body',    label: '身', icon: '💪', color: BrandColors.success, gradient: `linear-gradient(135deg,${BrandColors.success},${BrandColors.successLight3})` },
+  { code: 'mind',    label: '心', icon: '❤️', color: BrandColors.primary, gradient: `linear-gradient(135deg,${BrandColors.primary},${BrandColors.primaryLight})` },
+  { code: 'wisdom',  label: '智', icon: '🧠', color: BrandColors.wealth, gradient: `linear-gradient(135deg,${BrandColors.wealth},${BrandColors.warning})` },
+  { code: 'action',  label: '行', icon: '⚡', color: BrandColors.primary, gradient: `linear-gradient(135deg,${BrandColors.primary},${BrandColors.primaryLight})` },
+  { code: 'wealth',  label: '富', icon: '💎', color: BrandColors.infoBlue, gradient: `linear-gradient(135deg,${BrandColors.infoBlue},${BrandColors.infoBlueLight})` }
 ]
 ]
 
 
 export default {
 export default {
@@ -162,6 +163,8 @@ export default {
       familyMembers: [],
       familyMembers: [],
       selectedMemberId: null,
       selectedMemberId: null,
       currentView: 'self', // self | family
       currentView: 'self', // self | family
+      radarStrokeColor: BrandColors.primary,  // 雷达描边(品牌橙)
+      radarLabelColor: BrandColors.textFaint   // 雷达标签(中灰)
       showMemberPicker: false
       showMemberPicker: false
     }
     }
   },
   },
@@ -202,9 +205,9 @@ export default {
       return '👤'
       return '👤'
     },
     },
     avatarGradient() {
     avatarGradient() {
-      if (this.currentView === 'family') return 'linear-gradient(135deg,#F97316,#FB923C)'
+      if (this.currentView === 'family') return `linear-gradient(135deg,${BrandColors.primary},${BrandColors.primaryLight})`
       if (this.currentMember) return this.memberColor(this.currentMember)
       if (this.currentMember) return this.memberColor(this.currentMember)
-      return 'linear-gradient(135deg,#F97316,#FB923C)'
+      return `linear-gradient(135deg,${BrandColors.primary},${BrandColors.primaryLight})`
     },
     },
     navTitle() { return this.currentMemberName + ' · 五维能量' },
     navTitle() { return this.currentMemberName + ' · 五维能量' },
     currentMemberIcon() {
     currentMemberIcon() {
@@ -218,12 +221,12 @@ export default {
       return this.currentMember.name || '我的'
       return this.currentMember.name || '我的'
     },
     },
     navGradient() {
     navGradient() {
-      if (this.currentView === 'family') return 'linear-gradient(135deg,#F97316,#FB923C)'
+      if (this.currentView === 'family') return `linear-gradient(135deg,${BrandColors.primary},${BrandColors.primaryLight})`
       if (this.currentMember) {
       if (this.currentMember) {
         var dim = DIM_CONFIG[0]
         var dim = DIM_CONFIG[0]
         return dim.gradient
         return dim.gradient
       }
       }
-      return 'linear-gradient(135deg,#F97316,#FB923C)'
+      return `linear-gradient(135deg,${BrandColors.primary},${BrandColors.primaryLight})`
     },
     },
     pageTitle() { return this.navTitle },
     pageTitle() { return this.navTitle },
     radarDims() {
     radarDims() {
@@ -277,13 +280,13 @@ export default {
       uni.navigateBack({ fail: function() { uni.switchTab({ url: '/pages/index-home/index' }) } })
       uni.navigateBack({ fail: function() { uni.switchTab({ url: '/pages/index-home/index' }) } })
     },
     },
     memberColor(member) {
     memberColor(member) {
-      if (!member) return 'linear-gradient(135deg,#F97316,#FB923C)'
-      var types = { parent: '#F59E0B', child: 'BrandColors.success', teacher: '#3B82F6' }
+      if (!member) return `linear-gradient(135deg,${BrandColors.primary},${BrandColors.primaryLight})`
+      var types = { parent: BrandColors.wealth, child: BrandColors.success, teacher: BrandColors.infoBlue }
       var t = member.memberType || 'parent'
       var t = member.memberType || 'parent'
       var colors = {
       var colors = {
-        parent: 'linear-gradient(135deg,#F59E0B,#FBBF24)',
-        child:  'linear-gradient(135deg,#10B981,#34D399)',
-        teacher:'linear-gradient(135deg,#3B82F6,#60A5FA)'
+        parent: `linear-gradient(135deg,${BrandColors.wealth},${BrandColors.warning})`,
+        child:  `linear-gradient(135deg,${BrandColors.success},${BrandColors.successLight3})`,
+        teacher:`linear-gradient(135deg,${BrandColors.infoBlue},${BrandColors.infoBlueLight})`
       }
       }
       return colors[t] || colors.parent
       return colors[t] || colors.parent
     },
     },
@@ -418,9 +421,13 @@ export default {
 import { primary, success } from '@/utils/brand-colors.js'
 import { primary, success } from '@/utils/brand-colors.js'
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">
+// ===== 能量页专属色阶(导航/卡面深海军蓝,单页专用;约定见 uni.scss §14)=====
+$c-energy-deep-1: #0F1B2D; // 导航渐变起(深夜蓝)
+$c-energy-deep-2: #1A2744; // 导航渐变终 / 卡片底(藏蓝)
+
 .container {
 .container {
   min-height: 100vh;
   min-height: 100vh;
-  background: linear-gradient(180deg, #0F1B2D 0%, #1A2744 100%);
+  background: linear-gradient(180deg, $c-energy-deep-1 0%, $c-energy-deep-2 100%);
   padding-bottom: 40rpx;
   padding-bottom: 40rpx;
 }
 }
 .nav-bar {
 .nav-bar {
@@ -686,7 +693,7 @@ import { primary, success } from '@/utils/brand-colors.js'
 }
 }
 .member-picker {
 .member-picker {
   width: 100%;
   width: 100%;
-  background: #1A2744;
+  background: $c-energy-deep-2;
   border-radius: 32rpx 32rpx 0 0;
   border-radius: 32rpx 32rpx 0 0;
   padding: 20rpx 30rpx 60rpx;
   padding: 20rpx 30rpx 60rpx;
   max-height: 70vh;
   max-height: 70vh;

+ 116 - 0
cfc-frontend/scripts/d9-energy-index.js

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+/**
+ * D9: energy/index.vue 五维能量页清理 (debt 105)
+ *
+ * 1) 修复 C 批遗留 bug:'BrandColors.xxx' 字符串 -> 变量引用 + 补 import
+ * 2) DIM_CONFIG / avatarGradient / navGradient / memberColor 的 hex 渐变收编模板字符串
+ * 3) template RadarChart strokeColor/labelColor 绑定 data
+ * 4) style 深海军蓝 #0F1B2D/#1A2744 收编局部 SCSS 变量
+ */
+const fs = require('fs');
+const F = 'pages/energy/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, 70)); return; }
+  src = src.split(from).join(to);
+  replaced += cnt;
+}
+
+// ---- 1. import ----
+repl(
+  "import { getFamilyEnergySandbox, getFamilyMemberList } from '../../utils/api.js'",
+  "import { getFamilyEnergySandbox, getFamilyMemberList } from '../../utils/api.js'\nimport { BrandColors } from '../../utils/brand-colors.js'"
+);
+
+// ---- 2. DIM_CONFIG(5 行:color 修字符串 + gradient 模板字符串)----
+repl(
+  "  { code: 'body',    label: '身', icon: '💪', color: 'BrandColors.success', gradient: 'linear-gradient(135deg,#10B981,#34D399)' },",
+  "  { code: 'body',    label: '身', icon: '💪', color: BrandColors.success, gradient: `linear-gradient(135deg,${BrandColors.success},${BrandColors.successLight3})` },"
+);
+repl(
+  "  { code: 'mind',    label: '心', icon: '❤️', color: 'BrandColors.primary', gradient: 'linear-gradient(135deg,#F97316,#FB923C)' },",
+  "  { code: 'mind',    label: '心', icon: '❤️', color: BrandColors.primary, gradient: `linear-gradient(135deg,${BrandColors.primary},${BrandColors.primaryLight})` },"
+);
+repl(
+  "  { code: 'wisdom',  label: '智', icon: '🧠', color: '#F59E0B', gradient: 'linear-gradient(135deg,#F59E0B,#FBBF24)' },",
+  "  { code: 'wisdom',  label: '智', icon: '🧠', color: BrandColors.wealth, gradient: `linear-gradient(135deg,${BrandColors.wealth},${BrandColors.warning})` },"
+);
+repl(
+  "  { code: 'action',  label: '行', icon: '⚡', color: 'BrandColors.primary', gradient: 'linear-gradient(135deg,#F97316,#FB923C)' },",
+  "  { code: 'action',  label: '行', icon: '⚡', color: BrandColors.primary, gradient: `linear-gradient(135deg,${BrandColors.primary},${BrandColors.primaryLight})` },"
+);
+repl(
+  "  { code: 'wealth',  label: '富', icon: '💎', color: '#3B82F6', gradient: 'linear-gradient(135deg,#3B82F6,#60A5FA)' }",
+  "  { code: 'wealth',  label: '富', icon: '💎', color: BrandColors.infoBlue, gradient: `linear-gradient(135deg,${BrandColors.infoBlue},${BrandColors.infoBlueLight})` }"
+);
+
+// ---- 3. avatarGradient / navGradient 模板字符串 ----
+repl(
+  "if (this.currentView === 'family') return 'linear-gradient(135deg,#F97316,#FB923C)'",
+  "if (this.currentView === 'family') return `linear-gradient(135deg,${BrandColors.primary},${BrandColors.primaryLight})`"
+);
+repl(
+  "return 'linear-gradient(135deg,#F97316,#FB923C)'",
+  "return `linear-gradient(135deg,${BrandColors.primary},${BrandColors.primaryLight})`"
+);
+repl(
+  "      var dim = DIM_CONFIG[0]",
+  "      var dim = DIM_CONFIG[0]"
+);
+
+// ---- 4. memberColor ----
+repl(
+  "      if (!member) return 'linear-gradient(135deg,#F97316,#FB923C)'",
+  "      if (!member) return `linear-gradient(135deg,${BrandColors.primary},${BrandColors.primaryLight})`"
+);
+repl(
+  "      var types = { parent: '#F59E0B', child: 'BrandColors.success', teacher: '#3B82F6' }",
+  "      var types = { parent: BrandColors.wealth, child: BrandColors.success, teacher: BrandColors.infoBlue }"
+);
+repl(
+  "        parent: 'linear-gradient(135deg,#F59E0B,#FBBF24)',\n        child:  'linear-gradient(135deg,#10B981,#34D399)',\n        teacher:'linear-gradient(135deg,#3B82F6,#60A5FA)'",
+  "        parent: `linear-gradient(135deg,${BrandColors.wealth},${BrandColors.warning})`,\n        child:  `linear-gradient(135deg,${BrandColors.success},${BrandColors.successLight3})`,\n        teacher:`linear-gradient(135deg,${BrandColors.infoBlue},${BrandColors.infoBlueLight})`"
+);
+
+// ---- 5. template RadarChart ----
+repl('strokeColor="#F97316"', ':stroke-color="radarStrokeColor"');
+repl('labelColor="#888"', ':label-color="radarLabelColor"');
+
+// data() 注入 radar 色
+repl(
+  "      currentView: 'self', // self | family",
+  "      currentView: 'self', // self | family\n" +
+  "      radarStrokeColor: BrandColors.primary,  // 雷达描边(品牌橙)\n" +
+  "      radarLabelColor: BrandColors.textFaint   // 雷达标签(中灰)"
+);
+
+// ---- 6. style 深海军蓝收编局部变量 ----
+const styleIdx = src.indexOf('<style');
+const before = src.slice(0, styleIdx);
+let styleBody = src.slice(styleIdx);
+
+styleBody = styleBody.replace(/(#0F1B2D)(?![0-9a-fA-F])/g, '$c-energy-deep-1');
+styleBody = styleBody.replace(/(#1A2744)(?![0-9a-fA-F])/g, '$c-energy-deep-2');
+
+const palette = [
+  '// ===== 能量页专属色阶(导航/卡面深海军蓝,单页专用;约定见 uni.scss §14)=====',
+  '$c-energy-deep-1: #0F1B2D; // 导航渐变起(深夜蓝)',
+  '$c-energy-deep-2: #1A2744; // 导航渐变终 / 卡片底(藏蓝)',
+  ''
+].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++) {
+  if (/#[0-9a-fA-F]{3,8}\b/.test(lines[i])) { console.log('HEX ' + (i + 1) + ': ' + lines[i].trim()); n++; }
+}
+console.log('remaining hex lines:', n);

+ 25 - 0
cfc-frontend/scripts/d9b-energy-index.js

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const F = 'pages/energy/index.vue';
+let src = fs.readFileSync(F, 'utf8');
+const MAP = [
+  ["parent: 'linear-gradient(135deg,#F59E0B,#FBBF24)',",
+   "parent: `linear-gradient(135deg,${BrandColors.wealth},${BrandColors.warning})`,"],
+  ["child:  'linear-gradient(135deg,#10B981,#34D399)',",
+   "child:  `linear-gradient(135deg,${BrandColors.success},${BrandColors.successLight3})`,"],
+  ["teacher:'linear-gradient(135deg,#3B82F6,#60A5FA)'",
+   "teacher:`linear-gradient(135deg,${BrandColors.infoBlue},${BrandColors.infoBlueLight})`"],
+];
+let n = 0;
+for (const [f, t] of MAP) {
+  if (!src.includes(f)) { console.warn('NOT FOUND:', f); continue; }
+  src = src.replace(f, t); n++;
+}
+fs.writeFileSync(F, src);
+console.log('fixed lines:', n);
+const lines = src.split('\n');
+let h = 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()); h++; }
+}
+console.log('remaining hex lines:', h);

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

@@ -48,6 +48,8 @@ export const BrandColors = {
   dangerLight2: '#FB7185',  // rose-400 危险亮档·二档(睡眠质量条)
   dangerLight2: '#FB7185',  // rose-400 危险亮档·二档(睡眠质量条)
   info: '#0EA5E9',          // sky-500 信息
   info: '#0EA5E9',          // sky-500 信息
   infoLight: '#38BDF8',     // sky-400 信息亮档
   infoLight: '#38BDF8',     // sky-400 信息亮档
+  infoBlue: '#3B82F6',      // blue-500 信息蓝(智慧维度组件色板)
+  infoBlueLight: '#60A5FA', // blue-400 信息蓝亮档
   wisdomLight: '#818CF8',   // indigo-400 智慧亮档
   wisdomLight: '#818CF8',   // indigo-400 智慧亮档
 
 
   // 中性灰阶
   // 中性灰阶
@@ -66,6 +68,7 @@ export const BrandColors = {
   textGray400: '#9CA3AF',
   textGray400: '#9CA3AF',
   textSlate: '#6B7280',
   textSlate: '#6B7280',
   hairline2: '#EEE',
   hairline2: '#EEE',
+  textFaint: '#888',
 
 
   // Plutchik 八基本情绪色板(情绪打卡专属;单一事实源)
   // Plutchik 八基本情绪色板(情绪打卡专属;单一事实源)
   emotionJoy: '#FFD93D',       // 开心
   emotionJoy: '#FFD93D',       // 开心