Ver Fonte

refactor(beautify): D5 report-result DAN 报告页清理 (debt 120->45, P0 清零)

- template 6 处 RadarChart 内联色属性(fillColor/gridColor/labelColor x2 组)绑定到 data.chartColors(JS 色板收编)
- style 全局令牌映射:#4F46E5->dim-wisdom-deep, #7C3AED->facade-violet-deep,
  #FDE68A->status-warning-light, #FBBF24->status-warning, #6EE7B7->status-success-light-2,
  #F5F3FF->facade-violet-tint-2, #A78BFA->facade-violet-light
- 专属色收编局部变量:紫罗兰系(\-rpt-violet-*) + 青/米黄(\-rpt-cyan/yellow) +
  灰阶(\-rpt-grid/gray-line/line/body/foot) + mask-image #000
- P0 1->0(全站 P0 清零);hardcoded hex 剩 JS 色板 + palette 声明
liaoxg há 5 dias atrás
pai
commit
ebce26047c

+ 52 - 35
cfc-frontend/pages/dan-assessment/report-result.vue

@@ -60,9 +60,9 @@
               :dimensions="abilityRadarDims"
               :scores="abilityRadarScores"
               :population-scores="abilityRadarPopulation"
-              fillColor="#6366F1"
-              gridColor="#EEF0F6"
-              labelColor="#1F2937"
+              :fill-color="chartColors.wisdomFill"
+              :grid-color="chartColors.grid"
+              :label-color="chartColors.label"
               :width="600"
               :height="600"
               :child-name="childName" />
@@ -97,9 +97,9 @@
               :dimensions="bigFiveRadarDims"
               :scores="bigFiveRadarScores"
               :population-scores="bigFiveRadarPopulation"
-              fillColor="#8B5CF6"
-              gridColor="#F0ECFA"
-              labelColor="#5B21B6"
+              :fill-color="chartColors.violetFill"
+              :grid-color="chartColors.gridViolet"
+              :label-color="chartColors.labelViolet"
               :width="600"
               :height="600"
               :child-name="childName" />
@@ -637,12 +637,29 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.container { min-height: 100vh; background: #F3F2FA; padding-bottom: 40rpx; }
+// ===== DAN 报告页专属色阶(紫罗兰主题 + 图表色板,单页专用;约定见 uni.scss §14)=====
+$c-rpt-bg:           #F3F2FA; // 页面底(淡紫)
+$c-rpt-brown:        #7C2D12; // 深棕徽章文字
+$c-rpt-cyan-1:       #A5F3FC; // 渐变青浅档(星级光谱)
+$c-rpt-cyan-2:       #67E8F9; // 渐变青深档
+$c-rpt-orange:       #FDBA74; // 需关注暖橙(徽章/渐变/边框)
+$c-rpt-grid:         #EEF0F6; // 图表网格灰
+$c-rpt-violet-grid:  #F0ECFA; // 雷达网格/底(浅紫)
+$c-rpt-gray-line:    #C7C9D9; // 灰色分隔
+$c-rpt-violet-soft:  #C4B5FD; // 紫罗兰浅渐变起
+$c-rpt-yellow:       #FCD34D; // 黄渐变起
+$c-rpt-violet-text:  #6D28D9; // 紫罗兰文字
+$c-rpt-line:         #F1F2F7; // 浅紫分隔线
+$c-rpt-body:         #4B5563; // 正文灰
+$c-rpt-foot:         #B0B3C3; // 脚注灰
+$c-rpt-mask-ink:     #000;    // 遮罩渐变异色(mask-image)
+
+.container { min-height: 100vh; background: $c-rpt-bg; padding-bottom: 40rpx; }
 
 /* ==================== Hero ==================== */
 .hero {
   position: relative;
-  background: linear-gradient(160deg, #4F46E5 0%, #7C3AED 55%, $facade-violet 100%);
+  background: linear-gradient(160deg, $dim-wisdom-deep 0%, $facade-violet-deep 55%, $facade-violet 100%);
   padding: 48rpx 36rpx 44rpx;
   overflow: hidden;
   border-bottom-left-radius: 36rpx;
@@ -662,8 +679,8 @@ export default {
   margin-right: 14rpx;
 }
 .hero-level-badge {
-  font-size: 22rpx; color: #7C2D12; font-weight: 600;
-  background: linear-gradient(135deg, #FDE68A, #FBBF24);
+  font-size: 22rpx; color: $c-rpt-brown; font-weight: 600;
+  background: linear-gradient(135deg, $status-warning-light, $status-warning);
   border-radius: 24rpx; padding: 6rpx 18rpx;
   margin-right: 14rpx;
 }
@@ -688,7 +705,7 @@ export default {
 }
 .hero-pct-fill {
   height: 100%; border-radius: 8rpx;
-  background: linear-gradient(90deg, #A5F3FC, #67E8F9, #FDE68A);
+  background: linear-gradient(90deg, $c-rpt-cyan-1, $c-rpt-cyan-2, $status-warning-light);
 }
 .hero-pct-marker {
   position: absolute; top: -6rpx; width: 4rpx; height: 26rpx;
@@ -722,42 +739,42 @@ export default {
 .metric-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
 .metric-name { font-size: 26rpx; color: $facade-text-gray-700; font-weight: 500; }
 .metric-value-wrap { display: flex; align-items: center; }
-.metric-value { font-size: 30rpx; font-weight: 700; color: #4F46E5; }
+.metric-value { font-size: 30rpx; font-weight: 700; color: $dim-wisdom-deep; }
 .metric-value-warn { color: $brand-primary-dark; }
 .metric-unit { font-size: 20rpx; font-weight: 400; }
 .metric-warn-badge {
   font-size: 20rpx; color: $brand-primary-dark;
-  background: $uni-primary-pale; border: 1rpx solid #FDBA74;
+  background: $uni-primary-pale; border: 1rpx solid $c-rpt-orange;
   border-radius: 16rpx; padding: 2rpx 12rpx; margin-right: 10rpx;
 }
 .metric-track {
-  position: relative; height: 16rpx; border-radius: 8rpx; background: #EEF0F6;
+  position: relative; height: 16rpx; border-radius: 8rpx; background: $c-rpt-grid;
 }
 .metric-fill { height: 100%; border-radius: 8rpx; }
 .metric-fill-main { background: linear-gradient(90deg, $dim-wisdom-light, $dim-wisdom); }
-.metric-fill-warn { background: linear-gradient(90deg, #FDBA74, $brand-primary-dark); }
+.metric-fill-warn { background: linear-gradient(90deg, $c-rpt-orange, $brand-primary-dark); }
 .metric-ref-line {
   position: absolute; top: -4rpx; width: 2rpx; height: 24rpx;
-  background: #C7C9D9; border-radius: 1rpx;
+  background: $c-rpt-gray-line; border-radius: 1rpx;
 }
 /* 非数值指标行(名称 + 取值,无进度条) */
 .metric-plain-row {
   display: flex; justify-content: space-between; align-items: center;
   padding: 10rpx 0;
 }
-.metric-plain-value { font-size: 26rpx; color: #4F46E5; font-weight: 600; }
+.metric-plain-value { font-size: 26rpx; color: $dim-wisdom-deep; font-weight: 600; }
 
 /* ==================== 大五人格 ==================== */
 .bf-row { margin-bottom: 24rpx; }
 .bf-row:last-child { margin-bottom: 4rpx; }
 .bf-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10rpx; }
 .bf-name { font-size: 26rpx; color: $facade-text-gray-700; font-weight: 500; }
-.bf-value { font-size: 30rpx; font-weight: 700; color: #7C3AED; }
-.bf-track { position: relative; height: 14rpx; border-radius: 7rpx; background: #F0ECFA; }
+.bf-value { font-size: 30rpx; font-weight: 700; color: $facade-violet-deep; }
+.bf-track { position: relative; height: 14rpx; border-radius: 7rpx; background: $c-rpt-violet-grid; }
 .bf-fill { height: 100%; border-radius: 7rpx; }
-.bf-neutral { background: linear-gradient(90deg, #C4B5FD, $facade-violet); }
-.bf-high { background: linear-gradient(90deg, #6EE7B7, $status-success); }
-.bf-low { background: linear-gradient(90deg, #FCD34D, $dim-wealth); }
+.bf-neutral { background: linear-gradient(90deg, $c-rpt-violet-soft, $facade-violet); }
+.bf-high { background: linear-gradient(90deg, $status-success-light-2, $status-success); }
+.bf-low { background: linear-gradient(90deg, $c-rpt-yellow, $dim-wealth); }
 .bf-avg-line {
   position: absolute; top: -5rpx; left: 60%; width: 2rpx; height: 24rpx;
   background: $facade-text-gray-400; border-radius: 1rpx;
@@ -769,13 +786,13 @@ export default {
 .emo-row:last-child { margin-bottom: 4rpx; }
 .emo-chip {
   display: flex; align-items: baseline;
-  background: #F5F3FF; border-radius: 14rpx;
+  background: $facade-violet-tint-2; border-radius: 14rpx;
   padding: 10rpx 18rpx; margin-right: 18rpx; flex-shrink: 0;
 }
-.emo-name { font-size: 24rpx; color: #6D28D9; margin-right: 12rpx; }
-.emo-value { font-size: 28rpx; font-weight: 700; color: #7C3AED; }
-.emo-track { flex: 1; height: 12rpx; border-radius: 6rpx; background: #F0ECFA; overflow: hidden; }
-.emo-fill { height: 100%; border-radius: 6rpx; background: linear-gradient(90deg, #A78BFA, #7C3AED); }
+.emo-name { font-size: 24rpx; color: $c-rpt-violet-text; margin-right: 12rpx; }
+.emo-value { font-size: 28rpx; font-weight: 700; color: $facade-violet-deep; }
+.emo-track { flex: 1; height: 12rpx; border-radius: 6rpx; background: $c-rpt-violet-grid; overflow: hidden; }
+.emo-fill { height: 100%; border-radius: 6rpx; background: linear-gradient(90deg, $facade-violet-light, $facade-violet-deep); }
 
 /* ==================== 雷达图容器 ==================== */
 .radar-wrap {
@@ -787,12 +804,12 @@ export default {
 
 /* ==================== 情绪总分行 ==================== */
 .emo-summary {
-  background: #F5F3FF;
+  background: $facade-violet-tint-2;
   border-radius: 14rpx;
   padding: 16rpx 20rpx;
   margin-bottom: 20rpx;
 }
-.emo-summary-text { font-size: 24rpx; color: #6D28D9; }
+.emo-summary-text { font-size: 24rpx; color: $c-rpt-violet-text; }
 
 /* ==================== 体质健康 ==================== */
 .habit-row {
@@ -800,11 +817,11 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 14rpx 0;
-  border-bottom: 1rpx solid #F1F2F7;
+  border-bottom: 1rpx solid $c-rpt-line;
 }
 .habit-row:last-child { border-bottom: none; }
 .habit-name { font-size: 26rpx; color: $facade-text-gray-700; }
-.habit-value { font-size: 26rpx; color: #4F46E5; font-weight: 600; }
+.habit-value { font-size: 26rpx; color: $dim-wisdom-deep; font-weight: 600; }
 
 /* ==================== 基本信息 ==================== */
 .info-grid { display: flex; flex-wrap: wrap; }
@@ -818,19 +835,19 @@ export default {
 
 /* ==================== 成长建议/评语 ==================== */
 .advice-content {
-  font-size: 26rpx; color: #4B5563; line-height: 1.8;
+  font-size: 26rpx; color: $c-rpt-body; line-height: 1.8;
   white-space: pre-wrap; word-break: break-all;
 }
 .advice-clamped {
   max-height: 320rpx; overflow: hidden;
-  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
-  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
+  -webkit-mask-image: linear-gradient(180deg, $c-rpt-mask-ink 60%, transparent 100%);
+  mask-image: linear-gradient(180deg, $c-rpt-mask-ink 60%, transparent 100%);
 }
 .advice-toggle { text-align: center; margin-top: 16rpx; }
 .advice-toggle-text { font-size: 24rpx; color: $dim-wisdom; font-weight: 500; }
 
 .foot-note { text-align: center; padding: 18rpx 0 8rpx; }
-.foot-note-text { font-size: 20rpx; color: #B0B3C3; }
+.foot-note-text { font-size: 20rpx; color: $c-rpt-foot; }
 
 /* ==================== 其他 ==================== */
 .loading-wrap { display: flex; justify-content: center; padding: 140rpx 0; }

+ 114 - 0
cfc-frontend/scripts/d5-report-result.js

@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+/**
+ * D5: report-result.vue DAN 测评报告页清理 (debt 120)
+ *
+ * 1) template 6 处 RadarChart 内联色属性(fillColor/gridColor/labelColor x2 组)绑定到 data.chartColors
+ * 2) style 块 7 色映射全局等值令牌
+ * 3) style 块 15 个专属色(紫罗兰系 + 青/米黄/灰阶)收编为页面级局部 SCSS 变量
+ */
+const fs = require('fs');
+const F = 'pages/dan-assessment/report-result.vue';
+let src = fs.readFileSync(F, 'utf8');
+
+// ---- 1. template 内联色属性 -> 动态绑定 ----
+const TEMPLATE_REPL = [
+  ['fillColor="#6366F1"', ':fill-color="chartColors.wisdomFill"'],
+  ['gridColor="#EEF0F6"', ':grid-color="chartColors.grid"'],
+  ['labelColor="#1F2937"', ':label-color="chartColors.label"'],
+  ['fillColor="#8B5CF6"', ':fill-color="chartColors.violetFill"'],
+  ['gridColor="#F0ECFA"', ':grid-color="chartColors.gridViolet"'],
+  ['labelColor="#5B21B6"', ':label-color="chartColors.labelViolet"'],
+];
+for (const [from, to] of TEMPLATE_REPL) {
+  if (!src.includes(from)) console.warn('TPL NOT FOUND:', from);
+  src = src.split(from).join(to);
+}
+
+// ---- 2. script 顶部插入 JS 色板 + import ----
+const PALETTE_JS = [
+  "import { getDanReportDetail } from '../../utils/api.js'",
+  "import RadarChart from '../../components/RadarChart.vue'",
+  "import { BrandColors } from '../../utils/brand-colors.js'",
+  "",
+  "// DAN 报告页专属色板(雷达图填充/网格/标签靛蓝+紫罗兰双主题)",
+  "var REPORT_COLORS = {",
+  "  wisdomFill:  BrandColors.dimWisdom, // #6366F1 能力雷达填充(靛蓝)",
+  "  grid:        '#EEF0F6',             // 能力雷达网格灰",
+  "  label:       '#1F2937',             // 能力雷达标签深灰",
+  "  violetFill:  '#8B5CF6',             // 大五人格雷达填充(紫罗兰)",
+  "  gridViolet:  '#F0ECFA',             // 大五雷达网格浅紫",
+  "  labelViolet: '#5B21B6',             // 大五雷达标签深紫",
+  "};",
+].join('\n');
+
+src = src.replace(
+  "import { getDanReportDetail } from '../../utils/api.js'\nimport RadarChart from '../../components/RadarChart.vue'",
+  PALETTE_JS
+);
+
+// data() 注入 chartColors
+src = src.replace(
+  /    return \{\n      reportId: null,/,
+  "    return {\n      chartColors: REPORT_COLORS,\n      reportId: null,"
+);
+
+// ---- 3. style 块 ----
+const styleIdx = src.indexOf('<style');
+const before = src.slice(0, styleIdx);
+let styleBody = src.slice(styleIdx);
+
+const GLOBAL_MAP = [
+  ['#4F46E5', '$dim-wisdom-deep'],
+  ['#7C3AED', '$facade-violet-deep'],
+  ['#FDE68A', '$status-warning-light'],
+  ['#FBBF24', '$status-warning'],
+  ['#6EE7B7', '$status-success-light-2'],
+  ['#F5F3FF', '$facade-violet-tint-2'],
+  ['#A78BFA', '$facade-violet-light'],
+];
+const PALETTE_MAP = [
+  ['#F3F2FA', '$c-rpt-bg'],           // 页面底(淡紫)
+  ['#7C2D12', '$c-rpt-brown'],        // 深棕徽章文字
+  ['#A5F3FC', '$c-rpt-cyan-1'],       // 渐变青浅档
+  ['#67E8F9', '$c-rpt-cyan-2'],       // 渐变青深档
+  ['#FDBA74', '$c-rpt-orange'],       // 暖橙(需关注/边框)
+  ['#EEF0F6', '$c-rpt-grid'],         // 网格灰(指标条底)
+  ['#F0ECFA', '$c-rpt-violet-grid'],  // 紫罗兰网格/底
+  ['#C7C9D9', '$c-rpt-gray-line'],    // 灰色分隔
+  ['#C4B5FD', '$c-rpt-violet-soft'],  // 紫罗兰浅渐变
+  ['#FCD34D', '$c-rpt-yellow'],       // 黄渐变
+  ['#6D28D9', '$c-rpt-violet-text'],  // 紫罗兰文字
+  ['#F1F2F7', '$c-rpt-line'],         // 浅紫分隔线
+  ['#4B5563', '$c-rpt-body'],         // 正文灰
+  ['#B0B3C3', '$c-rpt-foot'],         // 脚注灰
+  ['#000', '$c-rpt-mask-ink'],        // 遮罩渐变异色
+];
+for (const [from, to] of [...GLOBAL_MAP, ...PALETTE_MAP]) {
+  const esc = from.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  styleBody = styleBody.replace(new RegExp(esc + '(?![0-9a-fA-F])', 'g'), to);
+}
+
+const palette = [
+  '// ===== DAN 报告页专属色阶(紫罗兰主题 + 图表色板,单页专用;约定见 uni.scss §14)=====',
+  '$c-rpt-bg:           #F3F2FA; // 页面底(淡紫)',
+  '$c-rpt-brown:        #7C2D12; // 深棕徽章文字',
+  '$c-rpt-cyan-1:       #A5F3FC; // 渐变青浅档(星级光谱)',
+  '$c-rpt-cyan-2:       #67E8F9; // 渐变青深档',
+  '$c-rpt-orange:       #FDBA74; // 需关注暖橙(徽章/渐变/边框)',
+  '$c-rpt-grid:         #EEF0F6; // 图表网格灰',
+  '$c-rpt-violet-grid:  #F0ECFA; // 雷达网格/底(浅紫)',
+  '$c-rpt-gray-line:    #C7C9D9; // 灰色分隔',
+  '$c-rpt-violet-soft:  #C4B5FD; // 紫罗兰浅渐变起',
+  '$c-rpt-yellow:       #FCD34D; // 黄渐变起',
+  '$c-rpt-violet-text:  #6D28D9; // 紫罗兰文字',
+  '$c-rpt-line:         #F1F2F7; // 浅紫分隔线',
+  '$c-rpt-body:         #4B5563; // 正文灰',
+  '$c-rpt-foot:         #B0B3C3; // 脚注灰',
+  '$c-rpt-mask-ink:     #000;    // 遮罩渐变异色(mask-image)',
+  ''
+].join('\n');
+
+styleBody = styleBody.replace(/(<style[^>]*>\s*\n)/, '$1' + palette + '\n');
+
+fs.writeFileSync(F, before + styleBody);
+console.log('D5 done');