Эх сурвалжийг харах

refactor(mind-detail): B-1g emotion-trend 令牌化——32 处硬编码色收敛(零观感变化)

- 31 处全局映射 + 1 处局部(图表画布近白底 $c-canvas-bg)
- §16 增 $facade-fill-page #F8F8F8(页面灰,33 文件复用),
  health-main 原 $c-fill-warm 同值局部收敛至全局(该页自此零局部调色板)
- 验证:emotion-trend 与 health-main 等价回归均 PASS(逐字节相同)
liaoxg 1 долоо хоног өмнө
parent
commit
d4d5ae4541

+ 2 - 3
cfc-frontend/pages/health-main/index.vue

@@ -652,10 +652,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
-$c-fill-warm:     #F8F8F8;
+// 本页无色:全局令牌全覆盖($c-fill-warm #F8F8F8 已提全局 $facade-fill-page)
 
-  .container { background: $c-fill-warm; min-height: 100vh; padding-bottom: calc(160rpx + env(safe-area-inset-bottom)); }
+  .container { background: $facade-fill-page; min-height: 100vh; padding-bottom: calc(160rpx + env(safe-area-inset-bottom)); }
 .section { margin: 16rpx 24rpx; }
 .tab-bar { display: flex; background: $app-surface; margin: 0 24rpx 16rpx; border-radius: 16rpx; padding: 8rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
 .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12rpx 0; position: relative; border-radius: 12rpx; }

+ 35 - 32
cfc-frontend/pages/mind-detail/emotion-trend.vue

@@ -551,17 +551,20 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
+$c-canvas-bg:  #FCFCFC;   // 图表画布近白底
+
 .trend-container {
   min-height: 100vh;
-  background: #F8F8F8;
+  background: $facade-fill-page;
   padding-bottom: 40rpx;
 }
 
 .stats-overview {
   display: flex;
   margin: 24rpx 32rpx;
-  background: linear-gradient(135deg, #FF6B9D, #FF8CB3);
+  background: linear-gradient(135deg, $dim-mind, $dim-mind-light);
   border-radius: 20rpx;
   padding: 28rpx 16rpx;
 }
@@ -574,7 +577,7 @@ export default {
 .stat-value {
   font-size: 36rpx;
   font-weight: 700;
-  color: #fff;
+  color: $app-surface;
   display: block;
 }
 
@@ -588,7 +591,7 @@ export default {
 .period-tabs {
   display: flex;
   margin: 0 32rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 12rpx;
   overflow: hidden;
 }
@@ -598,19 +601,19 @@ export default {
   text-align: center;
   padding: 16rpx 0;
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 
 .period-active {
-  background: #FF6B9D;
-  color: #fff;
+  background: $dim-mind;
+  color: $app-surface;
   font-weight: 600;
 }
 
 /* ===== 图表卡片 ===== */
 .chart-card {
   margin: 24rpx 32rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 28rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
@@ -619,14 +622,14 @@ export default {
 .chart-card .card-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 4rpx;
 }
 
 .chart-card .card-subtitle {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   display: block;
   margin-bottom: 16rpx;
 }
@@ -636,14 +639,14 @@ export default {
   width: 100%;
   height: 360rpx;
   border-radius: 12rpx;
-  background: #FCFCFC;
+  background: $c-canvas-bg;
 }
 
 .calendar-card,
 .distribution-card,
 .daily-list-card {
   margin: 24rpx 32rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 28rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
@@ -652,7 +655,7 @@ export default {
 .card-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 20rpx;
 }
@@ -666,7 +669,7 @@ export default {
   width: 14.28%;
   text-align: center;
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   padding: 10rpx 0;
 }
 
@@ -687,13 +690,13 @@ export default {
 }
 
 .is-today {
-  border: 2rpx solid #FF6B9D;
+  border: 2rpx solid $dim-mind;
   box-sizing: border-box;
 }
 
 .day-num {
   font-size: 24rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .day-emoji-small {
@@ -703,7 +706,7 @@ export default {
 
 .day-score {
   font-size: 18rpx;
-  color: #888;
+  color: $facade-text-faint;
   margin-top: 2rpx;
 }
 
@@ -718,7 +721,7 @@ export default {
 
 .legend-label {
   font-size: 20rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .legend-bar {
@@ -754,14 +757,14 @@ export default {
 
 .dist-label {
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
   width: 120rpx;
 }
 
 .dist-bar-track {
   flex: 1;
   height: 20rpx;
-  background: #F0F0F0;
+  background: $facade-fill;
   border-radius: 10rpx;
   overflow: hidden;
 }
@@ -774,7 +777,7 @@ export default {
 
 .dist-count {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   width: 60rpx;
   text-align: right;
 }
@@ -784,13 +787,13 @@ export default {
   display: flex;
   align-items: center;
   padding: 16rpx 0;
-  border-bottom: 2rpx solid #F5F5F5;
+  border-bottom: 2rpx solid $facade-fill-2;
   gap: 16rpx;
 }
 
 .daily-date {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   width: 100rpx;
   flex-shrink: 0;
 }
@@ -804,7 +807,7 @@ export default {
 
 .daily-weather {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   width: 120rpx;
   flex-shrink: 0;
 }
@@ -819,12 +822,12 @@ export default {
   font-size: 20rpx;
   padding: 4rpx 12rpx;
   border-radius: 12rpx;
-  color: #fff;
+  color: $app-surface;
 }
 
-.score-tag { background: #FF6B9D; }
-.type-tag { background: #8B5CF6; }
-.arousal-tag { background: #3B82F6; }
+.score-tag { background: $dim-mind; }
+.type-tag { background: $facade-violet; }
+.arousal-tag { background: $status-info; }
 
 .empty-state {
   display: flex;
@@ -840,13 +843,13 @@ export default {
 
 .empty-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-bottom: 40rpx;
 }
 
 .empty-btn {
-  background: #FF6B9D;
-  color: #fff;
+  background: $dim-mind;
+  color: $app-surface;
   padding: 16rpx 60rpx;
   border-radius: 40rpx;
   font-size: 28rpx;

+ 1 - 0
cfc-frontend/uni.scss

@@ -552,6 +552,7 @@ $tint-info-soft:     #E8F4FD; // 信息蓝浅底(article-edit + articles)
 $hint-cream-bg:      #FEF9E7; // 提示条奶油底(articles + shop/index)
 $hint-cream-border:  #F0E6C0; // 提示条奶油描边(articles + shop/index)
 $hint-gold-ink:      #B8860B; // 提示条金褐文字(8 文件)
+$facade-fill-page:   #F8F8F8; // 页面灰底(33 文件;health-main 原 $c-fill-warm 同值收敛于此)
 
 // ---- 状态色补档(与 §13 既有令牌同角色不同值,拆档保零观感)----
 $status-info:        #3B82F6; // 信息蓝(vs $uni-info #0EA5E9;PsychCrisisBanner + emotion-report + emotion-trend + soothe-toolbox)