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

refactor(beautify): D8 emotion-checkin 情绪打卡页清理 (hex 36->3, debt 108->30)

- 修复 C 批遗留 bug:7 处 'BrandColors.xxx' 字符串 -> 变量引用(此前为无效色值)+ 补 import
- aiEmotionColors/plutchikEmotions/emotionPool 全部色板收编 BrandColors.*
- brand-colors.js 新增 Plutchik 8 情绪色板(emotionJoy/Trust/Fear/Surprise/Sadness/Disgust/Anger)
  + violetDeep/textGray400/textSlate/hairline2
- template 4 处内联色(未选中描边 #eee + 3 slider activeColor)绑定 data
- P1 16->15;hex 36->3(余 3 个页面 palette 声明,§14 合法)
liaoxg 5 дней назад
Родитель
Сommit
19997f1c60

+ 44 - 40
cfc-frontend/pages/mind-detail/emotion-checkin.vue

@@ -40,7 +40,7 @@
           v-for="em in plutchikEmotions"
           :key="em.type"
           :class="['emotion-btn', selectedEmotionType === em.type ? 'emotion-active' : '']"
-          :style="{ borderColor: selectedEmotionType === em.type ? em.color : '#eee' }"
+          :style="{ borderColor: selectedEmotionType === em.type ? em.color : emotionNeutralBorder }"
           @click="selectedEmotionType = em.type">
           <text class="emotion-icon">{{ em.icon }}</text>
           <text class="emotion-label">{{ em.label }}</text>
@@ -53,7 +53,7 @@
       <text class="section-title">情绪强度</text>
       <view class="slider-row">
         <text class="slider-label">弱</text>
-        <slider class="custom-slider" min="1" max="10" :value="intensityLevel" @change="onIntensityChange" activeColor="#FF6B9D" block-size="20" />
+        <slider class="custom-slider" min="1" max="10" :value="intensityLevel" @change="onIntensityChange" :active-color="emotionSliderIntensity" block-size="20" />
         <text class="slider-value">{{ intensityLevel }}</text>
       </view>
       <view class="intensity-hint">{{ intensityHint }}</view>
@@ -64,7 +64,7 @@
       <text class="section-title">精力水平</text>
       <view class="slider-row">
         <text class="slider-label">低</text>
-        <slider class="custom-slider" min="1" max="10" :value="energyLevel" @change="onEnergyChange" activeColor="#10B981" block-size="20" />
+        <slider class="custom-slider" min="1" max="10" :value="energyLevel" @change="onEnergyChange" :active-color="emotionSliderEnergy" block-size="20" />
         <text class="slider-value">{{ energyLevel }}</text>
       </view>
     </view>
@@ -74,7 +74,7 @@
       <text class="section-title">压力水平</text>
       <view class="slider-row">
         <text class="slider-label">无压力</text>
-        <slider class="custom-slider" min="1" max="10" :value="stressLevel" @change="onStressChange" activeColor="#F59E0B" block-size="20" />
+        <slider class="custom-slider" min="1" max="10" :value="stressLevel" @change="onStressChange" :active-color="emotionSliderStress" block-size="20" />
         <text class="slider-value">{{ stressLevel }}</text>
       </view>
     </view>
@@ -213,6 +213,7 @@ export default {
       // --- 2D 效价-激活度网格 ---
       affectValence: 5,       // 1-10
       affectArousal: 5,       // 1-10
+      emotionNeutralBorder: BrandColors.hairline2,  // 未选中情绪描边
       gridWidth: 360,         // rpx, 会在 onReady 中动态计算
       gridHeight: 360,
 
@@ -220,6 +221,9 @@ export default {
       selectedEmotionType: '',
 
       // --- 滑条 ---
+      emotionSliderIntensity: BrandColors.mind,    // 强度滑条主色
+      emotionSliderEnergy: BrandColors.action,       // 精力滑条主色
+      emotionSliderStress: BrandColors.wealth,       // 压力滑条主色
       intensityLevel: 5,
       energyLevel: 6,
       stressLevel: 4,
@@ -237,14 +241,14 @@ export default {
       aiAnalyzing: false,
       aiResult: null,
       aiEmotionColors: {
-        '开心': 'BrandColors.success',
-        '平静': '#3B82F6',
-        '惊喜': '#8B5CF6',
-        '难过': '#6B9BD2',
-        '生气': 'BrandColors.danger',
-        '紧张': '#F59E0B',
-        '疲惫': '#9CA3AF',
-        '害怕': '#7C3AED'
+        '开心': BrandColors.success,
+        '平静': BrandColors.infoBlue,
+        '惊喜': BrandColors.violet,
+        '难过': BrandColors.emotionSadness,
+        '生气': BrandColors.danger,
+        '紧张': BrandColors.wealth,
+        '疲惫': BrandColors.textGray400,
+        '害怕': BrandColors.violetDeep'
       },
       stats: null,
 
@@ -253,14 +257,14 @@ export default {
 
       // Plutchik 8 基本情绪
       plutchikEmotions: [
-        { type: 'joy',         icon: '\uD83D\uDE04', label: '开心',   color: '#FFD93D' },
-        { type: 'trust',       icon: '\uD83E\uDD1D', label: '信任',   color: '#6BCB77' },
-        { type: 'fear',        icon: '\uD83D\uDE31', label: '恐惧',   color: '#9B59B6' },
-        { type: 'surprise',    icon: '\uD83D\uDE32', label: '惊讶',   color: '#FF9FF3' },
-        { type: 'sadness',     icon: '\uD83D\uDE22', label: '悲伤',   color: '#6B9BD2' },
-        { type: 'disgust',     icon: '\uD83E\uDD2E', label: '厌恶',   color: '#A0A0A0' },
-        { type: 'anger',       icon: '\uD83D\uDE21', label: '愤怒',   color: '#FF6B6B' },
-        { type: 'anticipation',icon: '\uD83E\uDD29', label: '期待',   color: 'BrandColors.body' }
+        { type: 'joy',         icon: '\uD83D\uDE04', label: '开心',   color: BrandColors.emotionJoy },
+        { type: 'trust',       icon: '\uD83E\uDD1D', label: '信任',   color: BrandColors.emotionTrust },
+        { type: 'fear',        icon: '\uD83D\uDE31', label: '恐惧',   color: BrandColors.emotionFear },
+        { type: 'surprise',    icon: '\uD83D\uDE32', label: '惊讶',   color: BrandColors.emotionSurprise },
+        { type: 'sadness',     icon: '\uD83D\uDE22', label: '悲伤',   color: BrandColors.emotionSadness },
+        { type: 'disgust',     icon: '\uD83E\uDD2E', label: '厌恶',   color: BrandColors.emotionDisgust },
+        { type: 'anger',       icon: '\uD83D\uDE21', label: '愤怒',   color: BrandColors.emotionAnger },
+        { type: 'anticipation',icon: '\uD83E\uDD29', label: '期待',   color: BrandColors.body }
       ],
 
       emotionTags: ['开心', '期待', '平静', '惊喜', '难过', '生气', '紧张', '无聊', '疲惫', '害怕'],
@@ -574,38 +578,38 @@ export default {
       if (valence >= 6 && arousal >= 6) {
         // Q1: 高激活 + 积极 → 开心/兴奋/惊喜
         emotionPool = [
-          { label: '开心', base: 38, color: 'BrandColors.success' },
-          { label: '兴奋', base: 22, color: '#8B5CF6' },
-          { label: '惊喜', base: 18, color: '#FF9FF3' },
-          { label: '满足', base: 12, color: '#3B82F6' },
-          { label: '期待', base: 10, color: '#F59E0B' }
+          { label: '开心', base: 38, color: BrandColors.success },
+          { label: '兴奋', base: 22, color: BrandColors.violet },
+          { label: '惊喜', base: 18, color: BrandColors.emotionSurprise },
+          { label: '满足', base: 12, color: BrandColors.infoBlue },
+          { label: '期待', base: 10, color: BrandColors.wealth }
         ]
       } else if (valence >= 6 && arousal < 6) {
         // Q2: 低激活 + 积极 → 平静/满足/放松
         emotionPool = [
-          { label: '平静', base: 32, color: '#3B82F6' },
-          { label: '满足', base: 25, color: 'BrandColors.success' },
-          { label: '放松', base: 20, color: '#6B9BD2' },
-          { label: '开心', base: 15, color: 'BrandColors.success' },
-          { label: '无聊', base: 8, color: '#9CA3AF' }
+          { label: '平静', base: 32, color: BrandColors.infoBlue },
+          { label: '满足', base: 25, color: BrandColors.success },
+          { label: '放松', base: 20, color: BrandColors.emotionSadness },
+          { label: '开心', base: 15, color: BrandColors.success },
+          { label: '无聊', base: 8, color: BrandColors.textGray400 }
         ]
       } else if (valence < 6 && arousal >= 6) {
         // Q3: 高激活 + 消极 → 生气/紧张/恐惧
         emotionPool = [
-          { label: '紧张', base: 30, color: '#F59E0B' },
-          { label: '生气', base: 25, color: 'BrandColors.danger' },
-          { label: '烦躁', base: 20, color: '#FF6B6B' },
-          { label: '恐惧', base: 15, color: '#7C3AED' },
-          { label: '厌恶', base: 10, color: '#A0A0A0' }
+          { label: '紧张', base: 30, color: BrandColors.wealth },
+          { label: '生气', base: 25, color: BrandColors.danger },
+          { label: '烦躁', base: 20, color: BrandColors.emotionAnger },
+          { label: '恐惧', base: 15, color: BrandColors.violetDeep },
+          { label: '厌恶', base: 10, color: BrandColors.emotionDisgust }
         ]
       } else {
         // Q4: 低激活 + 消极 → 难过/疲惫/低落
         emotionPool = [
-          { label: '难过', base: 32, color: '#6B9BD2' },
-          { label: '疲惫', base: 28, color: '#9CA3AF' },
-          { label: '低落', base: 20, color: '#6B7280' },
-          { label: '平静', base: 12, color: '#3B82F6' },
-          { label: '无聊', base: 8, color: '#9CA3AF' }
+          { label: '难过', base: 32, color: BrandColors.emotionSadness },
+          { label: '疲惫', base: 28, color: BrandColors.textGray400 },
+          { label: '低落', base: 20, color: BrandColors.textSlate },
+          { label: '平静', base: 12, color: BrandColors.infoBlue },
+          { label: '无聊', base: 8, color: BrandColors.textGray400 }
         ]
       }
 

+ 115 - 0
cfc-frontend/scripts/d8-emotion-checkin.js

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+/**
+ * D8: emotion-checkin.vue 情绪打卡页清理 (debt 108)
+ *
+ * 1) 修复 C 批遗留 bug:7 处 'BrandColors.xxx' 字符串 -> BrandColors.xxx 变量引用 + 补 import
+ * 2) aiEmotionColors 8 情绪色收编(#3B82F6->infoBlue, #8B5CF6->violet, #6B9BD2->emotionSadness,
+ *    #F59E0B->wealth, #9CA3AF->textGray400, #7C3AED->violetDeep)
+ * 3) plutchikEmotions 8 色收编(emotionJoy/Trust/Fear/Surprise/Sadness/Disgust/Anger + BrandColors.body)
+ * 4) emotionPool 4 段 ~12 色收编
+ * 5) template 4 处内联色(borderColor #eee + 3 slider activeColor)绑定 data
+ */
+const fs = require('fs');
+const F = 'pages/mind-detail/emotion-checkin.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 + 字符串 bug 修复 ----
+if (!src.includes('utils/brand-colors.js')) {
+  src = src.replace(
+    "import { pickImage } from '@/utils/image-picker.js'",
+    "import { pickImage } from '@/utils/image-picker.js'\nimport { BrandColors } from '../../utils/brand-colors.js'"
+  );
+}
+
+// 字符串 -> 变量
+repl("'开心': 'BrandColors.success',", "'开心': BrandColors.success,");
+repl("'生气': 'BrandColors.danger',", "'生气': BrandColors.danger,");
+repl("{ type: 'anticipation',icon: '\\uD83E\\uDD29', label: '期待',   color: 'BrandColors.body' }",
+     "{ type: 'anticipation',icon: '\\uD83E\\uDD29', label: '期待',   color: BrandColors.body }");
+repl("{ label: '开心', base: 38, color: 'BrandColors.success' }", "{ label: '开心', base: 38, color: BrandColors.success }");
+repl("{ label: '满足', base: 25, color: 'BrandColors.success' }", "{ label: '满足', base: 25, color: BrandColors.success }");
+repl("{ label: '开心', base: 15, color: 'BrandColors.success' }", "{ label: '开心', base: 15, color: BrandColors.success }");
+repl("{ label: '生气', base: 25, color: 'BrandColors.danger' }", "{ label: '生气', base: 25, color: BrandColors.danger }");
+
+// ---- 2. aiEmotionColors 色板 ----
+repl("'平静': '#3B82F6',", "'平静': BrandColors.infoBlue,");
+repl("'惊喜': '#8B5CF6',", "'惊喜': BrandColors.violet,");
+repl("'难过': '#6B9BD2',", "'难过': BrandColors.emotionSadness,");
+repl("'紧张': '#F59E0B',", "'紧张': BrandColors.wealth,");
+repl("'疲惫': '#9CA3AF',", "'疲惫': BrandColors.textGray400,");
+repl("'害怕': '#7C3AED'", "'害怕': BrandColors.violetDeep'");
+
+// ---- 3. plutchikEmotions 色板 ----
+repl("{ type: 'joy',         icon: '\\uD83D\\uDE04', label: '开心',   color: '#FFD93D' }",
+     "{ type: 'joy',         icon: '\\uD83D\\uDE04', label: '开心',   color: BrandColors.emotionJoy }");
+repl("{ type: 'trust',       icon: '\\uD83E\\uDD1D', label: '信任',   color: '#6BCB77' }",
+     "{ type: 'trust',       icon: '\\uD83E\\uDD1D', label: '信任',   color: BrandColors.emotionTrust }");
+repl("{ type: 'fear',        icon: '\\uD83D\\uDE31', label: '恐惧',   color: '#9B59B6' }",
+     "{ type: 'fear',        icon: '\\uD83D\\uDE31', label: '恐惧',   color: BrandColors.emotionFear }");
+repl("{ type: 'surprise',    icon: '\\uD83D\\uDE32', label: '惊讶',   color: '#FF9FF3' }",
+     "{ type: 'surprise',    icon: '\\uD83D\\uDE32', label: '惊讶',   color: BrandColors.emotionSurprise }");
+repl("{ type: 'sadness',     icon: '\\uD83D\\uDE22', label: '悲伤',   color: '#6B9BD2' }",
+     "{ type: 'sadness',     icon: '\\uD83D\\uDE22', label: '悲伤',   color: BrandColors.emotionSadness }");
+repl("{ type: 'disgust',     icon: '\\uD83E\\uDD2E', label: '厌恶',   color: '#A0A0A0' }",
+     "{ type: 'disgust',     icon: '\\uD83E\\uDD2E', label: '厌恶',   color: BrandColors.emotionDisgust }");
+repl("{ type: 'anger',       icon: '\\uD83D\\uDE21', label: '愤怒',   color: '#FF6B6B' }",
+     "{ type: 'anger',       icon: '\\uD83D\\uDE21', label: '愤怒',   color: BrandColors.emotionAnger }");
+
+// ---- 4. emotionPool 4 段 ----
+// Q1
+repl("{ label: '兴奋', base: 22, color: '#8B5CF6' },", "{ label: '兴奋', base: 22, color: BrandColors.violet },");
+repl("{ label: '惊喜', base: 18, color: '#FF9FF3' },", "{ label: '惊喜', base: 18, color: BrandColors.emotionSurprise },");
+repl("{ label: '满足', base: 12, color: '#3B82F6' },", "{ label: '满足', base: 12, color: BrandColors.infoBlue },");
+repl("{ label: '期待', base: 10, color: '#F59E0B' }", "{ label: '期待', base: 10, color: BrandColors.wealth }");
+// Q2
+repl("{ label: '平静', base: 32, color: '#3B82F6' },", "{ label: '平静', base: 32, color: BrandColors.infoBlue },");
+repl("{ label: '放松', base: 20, color: '#6B9BD2' },", "{ label: '放松', base: 20, color: BrandColors.emotionSadness },");
+repl("{ label: '无聊', base: 8, color: '#9CA3AF' }", "{ label: '无聊', base: 8, color: BrandColors.textGray400 }");
+// Q3
+repl("{ label: '紧张', base: 30, color: '#F59E0B' },", "{ label: '紧张', base: 30, color: BrandColors.wealth },");
+repl("{ label: '烦躁', base: 20, color: '#FF6B6B' },", "{ label: '烦躁', base: 20, color: BrandColors.emotionAnger },");
+repl("{ label: '恐惧', base: 15, color: '#7C3AED' },", "{ label: '恐惧', base: 15, color: BrandColors.violetDeep },");
+repl("{ label: '厌恶', base: 10, color: '#A0A0A0' }", "{ label: '厌恶', base: 10, color: BrandColors.emotionDisgust }");
+// Q4
+repl("{ label: '难过', base: 32, color: '#6B9BD2' },", "{ label: '难过', base: 32, color: BrandColors.emotionSadness },");
+repl("{ label: '疲惫', base: 28, color: '#9CA3AF' },", "{ label: '疲惫', base: 28, color: BrandColors.textGray400 },");
+repl("{ label: '低落', base: 20, color: '#6B7280' },", "{ label: '低落', base: 20, color: BrandColors.textSlate },");
+repl("{ label: '平静', base: 12, color: '#3B82F6' },", "{ label: '平静', base: 12, color: BrandColors.infoBlue },");
+repl("{ label: '无聊', base: 8, color: '#9CA3AF' }", "{ label: '无聊', base: 8, color: BrandColors.textGray400 }");
+
+// ---- 5. template 内联色 -> data ----
+repl(":style=\"{ borderColor: selectedEmotionType === em.type ? em.color : '#eee' }\"",
+     ":style=\"{ borderColor: selectedEmotionType === em.type ? em.color : emotionNeutralBorder }\"");
+repl("activeColor=\"#FF6B9D\"", ":active-color=\"emotionSliderIntensity\"");
+repl("activeColor=\"#10B981\"", ":active-color=\"emotionSliderEnergy\"");
+repl("activeColor=\"#F59E0B\"", ":active-color=\"emotionSliderStress\"");
+
+// data() 注入 4 个绑定色
+repl(
+  "      affectArousal: 5,       // 1-10",
+  "      affectArousal: 5,       // 1-10\n" +
+  "      emotionNeutralBorder: BrandColors.hairline2,  // 未选中情绪描边"
+);
+repl(
+  "      intensityLevel: 5,",
+  "      emotionSliderIntensity: BrandColors.mind,    // 强度滑条主色\n      emotionSliderEnergy: BrandColors.action,       // 精力滑条主色\n      emotionSliderStress: BrandColors.wealth,       // 压力滑条主色\n      intensityLevel: 5,"
+);
+
+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);

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

@@ -60,6 +60,21 @@ export const BrandColors = {
 
   // 状态深阶
   dangerDeep: '#C62828',
+  violetDeep: '#7C3AED',   // violet-600 深紫(#7C3AED)
+
+  // 中性灰阶扩展(对应 $facade-text-gray-400 / $facade-text-slate / $facade-hairline-2)
+  textGray400: '#9CA3AF',
+  textSlate: '#6B7280',
+  hairline2: '#EEE',
+
+  // Plutchik 八基本情绪色板(情绪打卡专属;单一事实源)
+  emotionJoy: '#FFD93D',       // 开心
+  emotionTrust: '#6BCB77',     // 信任
+  emotionFear: '#9B59B6',      // 恐惧
+  emotionSurprise: '#FF9FF3',  // 惊讶
+  emotionSadness: '#6B9BD2',   // 悲伤/难过
+  emotionDisgust: '#A0A0A0',   // 厌恶
+  emotionAnger: '#FF6B6B',     // 烦躁/愤怒
 
   // 语义别名(后端配置色兜底;SCSS 侧等值令牌见 uni.scss $facade-violet/$status-info)
   violet: '#8B5CF6',      // violet-500 紫罗兰(心智维度组件色板)