Răsfoiți Sursa

refactor(body-detail): B-2c checkin 令牌化 + Material 兜底色统一成 $mat-* 一套(零观感变化)

【B-2c checkin.vue】28 处硬编码色收敛(补 lang="scss"):15 色映射全局令牌,
#FFECB3 跨页零复用留 $c-tint-amber-edge 局部;equiv-regression PASS

【兜底统一成一套】原散落 4 族的 Material 补档令牌归一为 $mat-* 族(§12 语义色区,
色相 × 档位一套命名:tint 极浅底 / light 亮档 / base 主色 / strong 深文字):
- $mat-green #4CAF50 / $mat-green-light #81C784 / $mat-green-light-2 #66BB6A /
  $mat-green-tint #E8F5E9 / $mat-green-strong #2E7D32
- $mat-amber-tint #FFF8E1 / $mat-orange-strong #E65100
- $mat-blue-tint #E3F2FD / $mat-blue-strong #1565C0
- 吸收原 $uni-success/$uni-success-light(3 引用文件 + .text-success 内部引用全改名)
- 删除原 7 枚散档($status-warning-strong-2/$tint-amber-soft/$tint-green-soft/
  $status-success-strong-2/$uni-success-light-2/$status-info-tint-2/$status-info-deep-2)

【顺带修】uni.scss $status-danger-tint 重复声明(§14 #FEF2F2 与 §16 #FFF5F5 冲突,
后者覆盖前者)——删 §14 旧声明,该值由 $status-danger-tint-2 承载

验证:uni.scss 独立编译 OK;checkin equiv PASS;member-body-detail/index-home
旧令牌→新令牌同值对比 PASS(归一后逐字节相同)
liaoxg 1 săptămână în urmă
părinte
comite
146615db64

+ 30 - 27
cfc-frontend/pages/body-detail/checkin.vue

@@ -276,10 +276,13 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+// 页面级局部调色板:仅本页专有色阶(跨页共性走 uni.scss 全局令牌)
+$c-tint-amber-edge: #FFECB3;  // 能量提示渐变终点(amber-100;与全局 $mat-amber-tint 成梯度)
+
 .checkin-container {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
   padding-bottom: 60rpx;
 }
 
@@ -291,7 +294,7 @@ export default {
 /* ===== 能量提示 ===== */
 .energy-tip {
   margin: 20rpx 30rpx;
-  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
+  background: linear-gradient(135deg, $mat-amber-tint, $c-tint-amber-edge);
   border-radius: 16rpx;
   padding: 16rpx 24rpx;
   display: flex;
@@ -304,13 +307,13 @@ export default {
 }
 .tip-text {
   font-size: 26rpx;
-  color: #E65100;
+  color: $mat-orange-strong;
 }
 
 /* ===== 表单 ===== */
 .form-section {
   margin: 20rpx 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -318,7 +321,7 @@ export default {
 .form-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 24rpx;
 }
 .form-item {
@@ -326,7 +329,7 @@ export default {
 }
 .form-label {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   display: block;
   margin-bottom: 12rpx;
 }
@@ -337,15 +340,15 @@ export default {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  background: #f5f7fa;
+  background: $app-bg;
   border-radius: 12rpx;
   padding: 16rpx 20rpx;
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .date-arrow {
   font-size: 32rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
 }
 
 /* 行为选择 */
@@ -355,8 +358,8 @@ export default {
   flex-wrap: wrap;
 }
 .behavior-chip {
-  background: #f0f0f0;
-  color: #666;
+  background: $facade-fill;
+  color: $facade-text-body;
   font-size: 24rpx;
   padding: 12rpx 20rpx;
   border-radius: 24rpx;
@@ -364,8 +367,8 @@ export default {
   margin-bottom: 12rpx;
 }
 .behavior-selected {
-  background: #E8F5E9;
-  color: #2E7D32;
+  background: $mat-green-tint;
+  color: $mat-green-strong;
 }
 
 /* 心情 */
@@ -382,14 +385,14 @@ export default {
   border-radius: 12rpx;
 }
 .mood-selected {
-  background: #FFF8E1;
+  background: $mat-amber-tint;
 }
 .mood-emoji {
   font-size: 40rpx;
 }
 .mood-label {
   font-size: 20rpx;
-  color: #666;
+  color: $facade-text-body;
   margin-top: 4rpx;
 }
 
@@ -397,18 +400,18 @@ export default {
 .note-input {
   width: 100%;
   box-sizing: border-box;
-  background: #f5f7fa;
+  background: $app-bg;
   border-radius: 12rpx;
   padding: 16rpx;
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   min-height: 120rpx;
 }
 
 /* 提交按钮 */
 .submit-btn {
-  background: linear-gradient(135deg, #4CAF50, #66BB6A);
-  color: #fff;
+  background: linear-gradient(135deg, $mat-green, $mat-green-light-2);
+  color: $app-surface;
   font-size: 32rpx;
   font-weight: bold;
   text-align: center;
@@ -427,7 +430,7 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 16rpx;
 }
 .history-list {
@@ -435,7 +438,7 @@ export default {
   flex-direction: column;
 }
 .history-item {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 20rpx;
   margin-bottom: 12rpx;
@@ -450,7 +453,7 @@ export default {
 }
 .history-date {
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
   display: block;
   margin-bottom: 8rpx;
@@ -461,8 +464,8 @@ export default {
   flex-wrap: wrap;
 }
 .bh-tag {
-  background: #E3F2FD;
-  color: #1565C0;
+  background: $mat-blue-tint;
+  color: $mat-blue-strong;
   font-size: 20rpx;
   padding: 4rpx 12rpx;
   border-radius: 12rpx;
@@ -479,13 +482,13 @@ export default {
 }
 .history-energy {
   font-size: 22rpx;
-  color: #4CAF50;
+  color: $mat-green;
   margin-top: 4rpx;
 }
 .history-empty {
   text-align: center;
   padding: 40rpx;
-  color: #999;
+  color: $facade-text-muted;
   font-size: 26rpx;
 }
 

+ 2 - 2
cfc-frontend/pages/body-detail/member-body-detail.vue

@@ -208,7 +208,7 @@ export default {
   width: 80rpx;
   height: 80rpx;
   border-radius: 40rpx;
-  background: linear-gradient(135deg, $uni-success, $uni-success-light);
+  background: linear-gradient(135deg, $mat-green, $mat-green-light);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -242,7 +242,7 @@ export default {
 .score-value {
   font-size: 40rpx;
   font-weight: bold;
-  color: $uni-success;
+  color: $mat-green;
 }
 .score-label {
   font-size: 22rpx;

+ 1 - 1
cfc-frontend/pages/index-home/index.vue

@@ -2516,7 +2516,7 @@ $c-warm-tint:     #FFF3E7;
   font-weight: bold;
 }
 .activity-fee.fee-free {
-  color: $uni-success;
+  color: $mat-green;
 }
 
 /* ===== 文章列表 ===== */

+ 17 - 4
cfc-frontend/uni.scss

@@ -37,8 +37,22 @@ $uni-warm-light: #F4B0A5;
 $uni-warm-dark: #E06A58;
 
 // 语义色 (Semantic)
-$uni-success: #4CAF50;
-$uni-success-light: #81C784;
+// ---- Material 兜底色板族(全库 ≥2 页复用的 Material 值,统一一套命名:色相 × 档位)----
+// 档位约定:tint 极浅底 / light 亮档(渐变伴生)/ base 主色 / strong 深文字
+// 绿(成功 / 健康 / 选中态)
+$mat-green:        #4CAF50; // green-500 主色(33 文件;原 $uni-success)
+$mat-green-light:  #81C784; // green-300 亮档(5 文件;原 $uni-success-light)
+$mat-green-light-2:#66BB6A; // green-400 亮档·副档(5 文件;同渐变族不同档)
+$mat-green-tint:   #E8F5E9; // green-50 极浅底(38 文件)
+$mat-green-strong: #2E7D32; // green-800 深文字(25 文件)
+// 琥珀(警示 / 提示 / 选中浅底)
+$mat-amber-tint:   #FFF8E1; // amber-50 极浅底(14 文件)
+// 橙(警示文字)
+$mat-orange-strong:#E65100; // orange-900 深文字(24 文件)
+// 蓝(信息态)
+$mat-blue-tint:    #E3F2FD; // blue-50 极浅底(29 文件)
+$mat-blue-strong:  #1565C0; // blue-800 深文字(17 文件)
+
 $uni-warning: #FFB74D;
 $uni-warning-light: #FFD54F;
 $uni-error: #EF5350;
@@ -182,7 +196,7 @@ $uni-transition-slow: 0.3s ease;
 // --- 文字色彩 ---
 .text-primary { color: $uni-primary; }
 .text-warm { color: $uni-warm; }
-.text-success { color: $uni-success; }
+.text-success { color: $mat-green; }
 .text-warning { color: $uni-warning; }
 .text-error { color: $uni-error; }
 .text-muted { color: $uni-text-color-grey; }
@@ -448,7 +462,6 @@ $app-text-subtle:   #94A3B8;
 
 // 状态深阶(文字 / 强调)
 $status-danger-deep:    #DC2626;  // 危险态文字:较差 / 已过期
-$status-danger-tint:    #FEF2F2;  // 危险态极浅底
 $status-warning-deep:   #D97706;  // 警示态文字
 $status-success-deep:   #059669;  // 成功态文字
 $status-success-text:   #16A34A;  // 成功态文字(green-600)