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

refactor(mind-detail): B-1d FamilyTianpanCard + index 运势 ramp 全局化(零观感变化)

- §16 新增运势五级 ramp 10 枚($fortune-0..4-ink/tint,Material 色系)
  与 $mind-insight-ink 洞察棕——index.vue 原 $f0-$f4/$f*-bg/$c-insight-ink
  局部声明与本组件硬编码同值,按 §14 提升全局单一事实源
- FamilyTianpanCard:37 处全局映射 + 4 处局部(三栏背景/底部浅底/
  详情按钮渐变终点);var(--theme-*) 运行时主题钩子的 fallback 值
  同步令牌化(SCSS 先编译成字面量,运行时行为不变)
- index.vue:11 处引用改名、删 12 行局部声明,零死变量
- 验证:两页等价回归均 PASS(编译产物逐字节相同)
liaoxg 1 неделя назад
Родитель
Сommit
ce98a2ae8b

+ 44 - 38
cfc-frontend/pages/mind-detail/components/FamilyTianpanCard.vue

@@ -574,10 +574,16 @@ export default {
 }
 }
 </script>
 </script>
 
 
-<style scoped>
+<style scoped lang="scss">
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
+$c-col-bg:     #FAFBFC;   // 三栏列背景(蓝灰近白)
+$c-footer-tint:#FFF5F0;   // 底部提示浅底(暖调)
+$c-detail-tint:#FFE0E8;   // 查看详情按钮渐变终点(粉)
+// 运势五级 ramp 与洞察棕已提全局(fortune 系 / mind-insight-ink,与 mind-detail index 共用)
+
 .tianpan-card {
 .tianpan-card {
   margin: 20rpx 30rpx;
   margin: 20rpx 30rpx;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx;
   border-radius: 24rpx;
   padding: 28rpx 24rpx;
   padding: 28rpx 24rpx;
   /* 动态主题阴影 */
   /* 动态主题阴影 */
@@ -606,7 +612,7 @@ export default {
   width: 64rpx;
   width: 64rpx;
   height: 64rpx;
   height: 64rpx;
   border-radius: 20rpx;
   border-radius: 20rpx;
-  background: var(--theme-gradient, linear-gradient(135deg, #FF6B9D, #FF8FB1));
+  background: var(--theme-gradient, linear-gradient(135deg, $dim-mind, $dim-mind-light-2));
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
@@ -615,7 +621,7 @@ export default {
 }
 }
 .tp-icon-text {
 .tp-icon-text {
   font-size: 32rpx;
   font-size: 32rpx;
-  color: #FFFFFF;
+  color: $app-surface;
 }
 }
 .tp-header-info {
 .tp-header-info {
   display: flex;
   display: flex;
@@ -624,25 +630,25 @@ export default {
 .tp-title {
 .tp-title {
   font-size: 30rpx;
   font-size: 30rpx;
   font-weight: 700;
   font-weight: 700;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 }
 .tp-subtitle {
 .tp-subtitle {
   font-size: 22rpx;
   font-size: 22rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
   margin-top: 2rpx;
   margin-top: 2rpx;
 }
 }
 .tp-header-action {
 .tp-header-action {
   width: 56rpx;
   width: 56rpx;
   height: 56rpx;
   height: 56rpx;
   border-radius: 28rpx;
   border-radius: 28rpx;
-  background: var(--theme-lighter, #FFF0F3);
+  background: var(--theme-lighter, $dim-mind-tint-2);
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
 }
 }
 .tp-action-text {
 .tp-action-text {
   font-size: 28rpx;
   font-size: 28rpx;
-  color: var(--theme-color, #FF6B9D);
+  color: var(--theme-color, $dim-mind);
   font-weight: 600;
   font-weight: 600;
 }
 }
 .tp-header-action:active {
 .tp-header-action:active {
@@ -662,7 +668,7 @@ export default {
   align-items: center;
   align-items: center;
   padding: 16rpx 8rpx;
   padding: 16rpx 8rpx;
   border-radius: 20rpx;
   border-radius: 20rpx;
-  background: #FAFBFC;
+  background: $c-col-bg;
 }
 }
 .tp-col-fortune {
 .tp-col-fortune {
   margin-right: 12rpx;
   margin-right: 12rpx;
@@ -682,7 +688,7 @@ export default {
 }
 }
 .tp-col-label {
 .tp-col-label {
   font-size: 22rpx;
   font-size: 22rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
   margin-bottom: 12rpx;
   margin-bottom: 12rpx;
   font-weight: 500;
   font-weight: 500;
 }
 }
@@ -694,34 +700,34 @@ export default {
   margin-bottom: 8rpx;
   margin-bottom: 8rpx;
 }
 }
 .fortune-level-0 {
 .fortune-level-0 {
-  background: #FFEBEE;
+  background: $fortune-0-tint;
 }
 }
 .fortune-level-0 .tp-fortune-text {
 .fortune-level-0 .tp-fortune-text {
-  color: #D32F2F;
+  color: $fortune-0-ink;
 }
 }
 .fortune-level-1 {
 .fortune-level-1 {
-  background: #FFF3E0;
+  background: $fortune-1-tint;
 }
 }
 .fortune-level-1 .tp-fortune-text {
 .fortune-level-1 .tp-fortune-text {
-  color: #E65100;
+  color: $fortune-1-ink;
 }
 }
 .fortune-level-2 {
 .fortune-level-2 {
-  background: #FFFDE7;
+  background: $fortune-2-tint;
 }
 }
 .fortune-level-2 .tp-fortune-text {
 .fortune-level-2 .tp-fortune-text {
-  color: #F9A825;
+  color: $fortune-2-ink;
 }
 }
 .fortune-level-3 {
 .fortune-level-3 {
-  background: #F3E5F5;
+  background: $fortune-3-tint;
 }
 }
 .fortune-level-3 .tp-fortune-text {
 .fortune-level-3 .tp-fortune-text {
-  color: #7B1FA2;
+  color: $fortune-3-ink;
 }
 }
 .fortune-level-4 {
 .fortune-level-4 {
-  background: #FFCDD2;
+  background: $fortune-4-tint;
 }
 }
 .fortune-level-4 .tp-fortune-text {
 .fortune-level-4 .tp-fortune-text {
-  color: #B71C1C;
+  color: $fortune-4-ink;
 }
 }
 .tp-fortune-text {
 .tp-fortune-text {
   font-size: 26rpx;
   font-size: 26rpx;
@@ -729,7 +735,7 @@ export default {
 }
 }
 .tp-fortune-desc {
 .tp-fortune-desc {
   font-size: 20rpx;
   font-size: 20rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
   text-align: center;
   text-align: center;
   line-height: 1.4;
   line-height: 1.4;
 }
 }
@@ -738,19 +744,19 @@ export default {
 .tp-mood-value {
 .tp-mood-value {
   font-size: 26rpx;
   font-size: 26rpx;
   font-weight: 600;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
   margin-bottom: 10rpx;
   margin-bottom: 10rpx;
 }
 }
 .tp-mood-bar-track {
 .tp-mood-bar-track {
   width: 100%;
   width: 100%;
   height: 10rpx;
   height: 10rpx;
-  background: #E2E8F0;
+  background: $uni-bg-color-dark;
   border-radius: 5rpx;
   border-radius: 5rpx;
   overflow: hidden;
   overflow: hidden;
 }
 }
 .tp-mood-bar-fill {
 .tp-mood-bar-fill {
   height: 100%;
   height: 100%;
-  background: var(--theme-gradient, linear-gradient(90deg, #FF6B9D, #FF8FB1));
+  background: var(--theme-gradient, linear-gradient(90deg, $dim-mind, $dim-mind-light-2));
   border-radius: 5rpx;
   border-radius: 5rpx;
   transition: width 0.5s;
   transition: width 0.5s;
 }
 }
@@ -768,7 +774,7 @@ export default {
 .tp-direction-value {
 .tp-direction-value {
   font-size: 24rpx;
   font-size: 24rpx;
   font-weight: 700;
   font-weight: 700;
-  color: var(--theme-color, #FF6B9D);
+  color: var(--theme-color, $dim-mind);
 }
 }
 
 
 /* ===== 底部提示 ===== */
 /* ===== 底部提示 ===== */
@@ -778,7 +784,7 @@ export default {
   align-items: flex-start;
   align-items: flex-start;
   margin-top: 20rpx;
   margin-top: 20rpx;
   padding: 16rpx;
   padding: 16rpx;
-  background: var(--theme-lighter, #FFF5F0);
+  background: var(--theme-lighter, $c-footer-tint);
   border-radius: 14rpx;
   border-radius: 14rpx;
 }
 }
 .tp-footer-icon {
 .tp-footer-icon {
@@ -788,7 +794,7 @@ export default {
 }
 }
 .tp-footer-text {
 .tp-footer-text {
   font-size: 22rpx;
   font-size: 22rpx;
-  color: #8B6914;
+  color: $mind-insight-ink;
   line-height: 1.5;
   line-height: 1.5;
   flex: 1;
   flex: 1;
 }
 }
@@ -811,19 +817,19 @@ export default {
 }
 }
 .tp-advice-icon {
 .tp-advice-icon {
   font-size: 24rpx;
   font-size: 24rpx;
-  color: var(--theme-color, #FF6B9D);
+  color: var(--theme-color, $dim-mind);
   margin-right: 12rpx;
   margin-right: 12rpx;
 }
 }
 .tp-advice-label {
 .tp-advice-label {
   font-size: 22rpx;
   font-size: 22rpx;
   font-weight: 600;
   font-weight: 600;
-  color: var(--theme-color, #FF6B9D);
+  color: var(--theme-color, $dim-mind);
   margin-right: 12rpx;
   margin-right: 12rpx;
   min-width: 60rpx;
   min-width: 60rpx;
 }
 }
 .tp-advice-text {
 .tp-advice-text {
   font-size: 22rpx;
   font-size: 22rpx;
-  color: #374151;
+  color: $facade-text-gray-700;
   flex: 1;
   flex: 1;
   line-height: 1.4;
   line-height: 1.4;
 }
 }
@@ -833,7 +839,7 @@ export default {
   margin-top: 16rpx;
   margin-top: 16rpx;
   text-align: center;
   text-align: center;
   padding: 14rpx;
   padding: 14rpx;
-  background: var(--theme-lighter, linear-gradient(135deg, #FFF0F3, #FFE0E8));
+  background: var(--theme-lighter, linear-gradient(135deg, $dim-mind-tint-2, $c-detail-tint));
   border-radius: 14rpx;
   border-radius: 14rpx;
 }
 }
 .tp-detail-btn:active {
 .tp-detail-btn:active {
@@ -841,7 +847,7 @@ export default {
 }
 }
 .tp-detail-text {
 .tp-detail-text {
   font-size: 24rpx;
   font-size: 24rpx;
-  color: var(--theme-color, #FF6B9D);
+  color: var(--theme-color, $dim-mind);
   font-weight: 600;
   font-weight: 600;
 }
 }
 
 
@@ -867,18 +873,18 @@ export default {
 }
 }
 .tp-trad-label {
 .tp-trad-label {
   font-size: 20rpx;
   font-size: 20rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
   margin-bottom: 6rpx;
   margin-bottom: 6rpx;
 }
 }
 .tp-trad-value {
 .tp-trad-value {
   font-size: 26rpx;
   font-size: 26rpx;
   font-weight: 600;
   font-weight: 600;
-  color: var(--theme-color, #FF6B9D);
+  color: var(--theme-color, $dim-mind);
 }
 }
 .tp-trad-bar-track {
 .tp-trad-bar-track {
   width: 80%;
   width: 80%;
   height: 8rpx;
   height: 8rpx;
-  background: #E2E8F0;
+  background: $uni-bg-color-dark;
   border-radius: 4rpx;
   border-radius: 4rpx;
   overflow: hidden;
   overflow: hidden;
   margin-bottom: 4rpx;
   margin-bottom: 4rpx;
@@ -889,7 +895,7 @@ export default {
 }
 }
 .tp-trad-val {
 .tp-trad-val {
   font-size: 20rpx;
   font-size: 20rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
 }
 }
 .tp-trad-row-split {
 .tp-trad-row-split {
   justify-content: space-around;
   justify-content: space-around;
@@ -898,7 +904,7 @@ export default {
   display: flex;
   display: flex;
   flex-direction: row;
   flex-direction: row;
   align-items: center;
   align-items: center;
-  background: var(--theme-lighter, #FFF0F3);
+  background: var(--theme-lighter, $dim-mind-tint-2);
   padding: 8rpx 20rpx;
   padding: 8rpx 20rpx;
   border-radius: 20rpx;
   border-radius: 20rpx;
 }
 }
@@ -909,6 +915,6 @@ export default {
 .tp-trad-tag-text {
 .tp-trad-tag-text {
   font-size: 24rpx;
   font-size: 24rpx;
   font-weight: 600;
   font-weight: 600;
-  color: var(--theme-color, #FF6B9D);
+  color: var(--theme-color, $dim-mind);
 }
 }
 </style>
 </style>

+ 11 - 22
cfc-frontend/pages/mind-detail/index.vue

@@ -1305,7 +1305,6 @@ $c-mind-ink: #9D174D;
 // 信息蓝
 // 信息蓝
 $c-info: #3B82F6;
 $c-info: #3B82F6;
 // 洞察文案(棕金)
 // 洞察文案(棕金)
-$c-insight-ink: #8B6914;
 // 夜间渐变 起
 // 夜间渐变 起
 $c-night-1: #1a1a2e;
 $c-night-1: #1a1a2e;
 // 夜间渐变 中
 // 夜间渐变 中
@@ -1313,25 +1312,15 @@ $c-night-2: #16213e;
 // 夜间渐变 止
 // 夜间渐变 止
 $c-night-3: #0f3460;
 $c-night-3: #0f3460;
 // 运势 0 前景
 // 运势 0 前景
-$f0: #D32F2F;
 // 运势 0 背景
 // 运势 0 背景
-$f0-bg: #FFEBEE;
 // 运势 1 前景
 // 运势 1 前景
-$f1: #E65100;
 // 运势 1 背景
 // 运势 1 背景
-$f1-bg: #FFF3E0;
 // 运势 2 前景
 // 运势 2 前景
-$f2: #F9A825;
 // 运势 2 背景
 // 运势 2 背景
-$f2-bg: #FFFDE7;
 // 运势 3 前景
 // 运势 3 前景
-$f3: #7B1FA2;
 // 运势 3 背景
 // 运势 3 背景
-$f3-bg: #F3E5F5;
 // 运势 4 前景
 // 运势 4 前景
-$f4: #B71C1C;
 // 运势 4 背景
 // 运势 4 背景
-$f4-bg: #FFCDD2;
 // 玫瑰浅底
 // 玫瑰浅底
 $tint-rose: #FDF2F7;
 $tint-rose: #FDF2F7;
 // 紫浅底
 // 紫浅底
@@ -2388,24 +2377,24 @@ $tint-cyan: #F0F6F7;
   border-radius: 10rpx;
   border-radius: 10rpx;
 }
 }
 .ki-fortune-0 {
 .ki-fortune-0 {
-  color: $f0;
-  background: $f0-bg;
+  color: $fortune-0-ink;
+  background: $fortune-0-tint;
 }
 }
 .ki-fortune-1 {
 .ki-fortune-1 {
-  color: $f1;
-  background: $f1-bg;
+  color: $fortune-1-ink;
+  background: $fortune-1-tint;
 }
 }
 .ki-fortune-2 {
 .ki-fortune-2 {
-  color: $f2;
-  background: $f2-bg;
+  color: $fortune-2-ink;
+  background: $fortune-2-tint;
 }
 }
 .ki-fortune-3 {
 .ki-fortune-3 {
-  color: $f3;
-  background: $f3-bg;
+  color: $fortune-3-ink;
+  background: $fortune-3-tint;
 }
 }
 .ki-fortune-4 {
 .ki-fortune-4 {
-  color: $f4;
-  background: $f4-bg;
+  color: $fortune-4-ink;
+  background: $fortune-4-tint;
 }
 }
 .ki-insight {
 .ki-insight {
   display: flex;
   display: flex;
@@ -2422,7 +2411,7 @@ $tint-cyan: #F0F6F7;
 }
 }
 .ki-insight-text {
 .ki-insight-text {
   font-size: 22rpx;
   font-size: 22rpx;
-  color: $c-insight-ink;
+  color: $mind-insight-ink;
   line-height: 1.5;
   line-height: 1.5;
 }
 }
 .ki-footer {
 .ki-footer {

+ 15 - 0
cfc-frontend/uni.scss

@@ -522,6 +522,21 @@ $facade-gray-200:      #E5E7EB; // gray-200 填充/描边兼用(18 文件)
 $facade-text-gray-400: #9CA3AF; // gray-400 弱文字(18 文件)
 $facade-text-gray-400: #9CA3AF; // gray-400 弱文字(18 文件)
 $facade-text-gray-700: #374151; // gray-700 深文字(12 文件)
 $facade-text-gray-700: #374151; // gray-700 深文字(12 文件)
 
 
+// ---- 运势五级 ramp(mind-detail index + FamilyTianpanCard 共用,Material 色系)----
+$fortune-0-ink:  #D32F2F;  // 大凶(red-700)
+$fortune-0-tint: #FFEBEE;  // red-50
+$fortune-1-ink:  #E65100;  // 凶(orange-900)
+$fortune-1-tint: #FFF3E0;  // orange-50
+$fortune-2-ink:  #F9A825;  // 平(yellow-800)
+$fortune-2-tint: #FFFDE7;  // yellow-50
+$fortune-3-ink:  #7B1FA2;  // 吉(purple-700)
+$fortune-3-tint: #F3E5F5;  // purple-50
+$fortune-4-ink:  #B71C1C;  // 大吉(red-900)
+$fortune-4-tint: #FFCDD2;  // red-100
+
+// ---- 洞察文案 ----
+$mind-insight-ink: #8B6914; // 洞察/宜忌文案棕金(mind-detail index + FamilyTianpanCard)
+
 // ---- 状态色补档(与 §13 既有令牌同角色不同值,拆档保零观感)----
 // ---- 状态色补档(与 §13 既有令牌同角色不同值,拆档保零观感)----
 $status-info:        #3B82F6; // 信息蓝(vs $uni-info #0EA5E9;PsychCrisisBanner + emotion-report + emotion-trend + soothe-toolbox)
 $status-info:        #3B82F6; // 信息蓝(vs $uni-info #0EA5E9;PsychCrisisBanner + emotion-report + emotion-trend + soothe-toolbox)
 $status-danger-tint: #FFF5F5; // red-50 浅底(vs $status-danger-soft #FEE2E2;PsychCrisisBanner + emotion-checkin + screening)
 $status-danger-tint: #FFF5F5; // red-50 浅底(vs $status-danger-soft #FEE2E2;PsychCrisisBanner + emotion-checkin + screening)