Преглед на файлове

refactor(body-detail): B-2g health-report 令牌化——body-detail 生态 7/7 收官(零观感变化)

- style 块 71 处 hex 全映射全局令牌:文字 33 + Material 语义族 16 + 状态族 11 + 运势 ramp 3 + 填充 8
- uni.scss 新登记 5 枚:$mat-green-base-2 #43A047、$mat-blue-light #BBDEFB、$mat-blue-light-2 #64B5F6(§12 mat 族补档)、$status-success-soft-2 #DCFCE7、$status-success-strong-2 #16A34A
- SVG 模板属性 4 处 + 脚本/canvas 运行时色 20 处按纪律保持原样
- equiv-regression PASS
liaoxg преди 1 седмица
родител
ревизия
ea480c6043
променени са 2 файла, в които са добавени 75 реда и са изтрити 70 реда
  1. 70 70
      cfc-frontend/pages/body-detail/health-report.vue
  2. 5 0
      cfc-frontend/uni.scss

+ 70 - 70
cfc-frontend/pages/body-detail/health-report.vue

@@ -518,10 +518,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .report-container {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
 }
 
 /* ===== 导航栏 ===== */
@@ -531,15 +531,15 @@ export default {
 
 /* ===== 报告头部 ===== */
 .report-header {
-  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
+  background: linear-gradient(135deg, $mat-blue-tint, $mat-blue-light);
   margin: 20rpx 30rpx;
   border-radius: 20rpx;
   padding: 30rpx 24rpx;
 }
 .report-type-tag {
   display: inline-block;
-  background: #1565C0;
-  color: #fff;
+  background: $mat-blue-strong;
+  color: $app-surface;
   font-size: 22rpx;
   padding: 6rpx 20rpx;
   border-radius: 20rpx;
@@ -560,7 +560,7 @@ export default {
   width: 140rpx;
   height: 140rpx;
   border-radius: 70rpx;
-  background: #fff;
+  background: $app-surface;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -568,26 +568,26 @@ export default {
   margin-bottom: 8rpx;
 }
 .score-circle-green {
-  background: #E8F5E9;
+  background: $mat-green-tint;
 }
 .score-num {
   font-size: 48rpx;
   font-weight: bold;
-  color: #1565C0;
+  color: $mat-blue-strong;
 }
 .score-circle-green .score-num {
-  color: #2E7D32;
+  color: $mat-green-strong;
 }
 .score-unit {
   font-size: calc(22rpx * var(--font-scale, 1));
-  color: #64B5F6;
+  color: $mat-blue-light-2;
 }
 .score-circle-green .score-unit {
-  color: #81C784;
+  color: $mat-green-light;
 }
 .score-label {
   font-size: calc(24rpx * var(--font-scale, 1));
-  color: #666;
+  color: $facade-text-body;
 }
 .report-info-row {
   display: flex;
@@ -595,8 +595,8 @@ export default {
   margin-bottom: 16rpx;
 }
 .info-chip {
-  background: #fff;
-  color: #333;
+  background: $app-surface;
+  color: $facade-text-strong;
   font-size: 24rpx;
   padding: 8rpx 20rpx;
   border-radius: 20rpx;
@@ -604,7 +604,7 @@ export default {
 }
 .report-date {
   font-size: calc(22rpx * var(--font-scale, 1));
-  color: #888;
+  color: $facade-text-faint;
 }
 
 /* ===== 指标明细 ===== */
@@ -618,11 +618,11 @@ export default {
   margin-bottom: 20rpx;
   font-size: calc(30rpx * var(--font-scale, 1));
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .section-sub {
   font-size: calc(22rpx * var(--font-scale, 1));
-  color: #999;
+  color: $facade-text-muted;
   font-weight: normal;
   margin-left: 12rpx;
 }
@@ -639,14 +639,14 @@ export default {
 .category-name {
   font-size: calc(26rpx * var(--font-scale, 1));
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .category-count {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .indicator-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 20rpx;
   margin-bottom: 12rpx;
@@ -661,7 +661,7 @@ export default {
 }
 .ind-name {
   font-size: calc(28rpx * var(--font-scale, 1));
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
 }
 .ind-status {
@@ -670,16 +670,16 @@ export default {
   border-radius: 16rpx;
 }
 .status-normal {
-  background: #E8F5E9;
-  color: #2E7D32;
+  background: $mat-green-tint;
+  color: $mat-green-strong;
 }
 .status-warning {
-  background: #FFF3E0;
-  color: #E65100;
+  background: $fortune-1-tint;
+  color: $mat-orange-strong;
 }
 .status-warn {
-  background: #F3E5F5;
-  color: #7B1FA2;
+  background: $fortune-3-tint;
+  color: $fortune-3-ink;
 }
 .ind-body {
   display: flex;
@@ -695,21 +695,21 @@ export default {
 .ind-value {
   font-size: 36rpx;
   font-weight: bold;
-  color: #1565C0;
+  color: $mat-blue-strong;
 }
 .ind-unit {
   font-size: calc(24rpx * var(--font-scale, 1));
-  color: #999;
+  color: $facade-text-muted;
   margin-left: 8rpx;
 }
 .ind-ref {
   font-size: calc(22rpx * var(--font-scale, 1));
-  color: #bbb;
+  color: $facade-text-ghost-light;
 }
 .empty-indicators {
   text-align: center;
   padding: 60rpx;
-  color: #999;
+  color: $facade-text-muted;
   font-size: calc(28rpx * var(--font-scale, 1));
 }
 
@@ -724,8 +724,8 @@ export default {
   bottom: 40rpx;
   left: 50%;
   transform: translateX(-50%);
-  background: linear-gradient(135deg, #43A047, #66BB6A);
-  color: #fff;
+  background: linear-gradient(135deg, $mat-green-base-2, $mat-green-light-2);
+  color: $app-surface;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -747,7 +747,7 @@ export default {
 
 .score-dashboard {
   margin: 20rpx 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -770,7 +770,7 @@ export default {
 }
 .main-score-label {
   font-size: calc(24rpx * var(--font-scale, 1));
-  color: #666;
+  color: $facade-text-body;
   font-weight: 500;
 }
 .flora-score-row {
@@ -779,7 +779,7 @@ export default {
   justify-content: space-around;
   margin-top: 16rpx;
   padding-top: 20rpx;
-  border-top: 2rpx solid #F0F0F0;
+  border-top: 2rpx solid $facade-fill;
 }
 .flora-score-item {
   display: flex;
@@ -798,11 +798,11 @@ export default {
 .flora-score-num {
   font-size: 28rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
 }
 .flora-score-label {
   font-size: calc(20rpx * var(--font-scale, 1));
-  color: #888;
+  color: $facade-text-faint;
 }
 
 /* ===== 营养缺乏分析 ===== */
@@ -811,7 +811,7 @@ export default {
   flex-direction: column;
 }
 .deficiency-card {
-  background: #FAFAFA;
+  background: $facade-fill-ghost;
   border-radius: 16rpx;
   padding: 20rpx;
   margin-bottom: 12rpx;
@@ -826,30 +826,30 @@ export default {
 .deficiency-nutrient {
   font-size: calc(28rpx * var(--font-scale, 1));
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .deficiency-type-tag {
   font-size: 22rpx;
   padding: 4rpx 16rpx;
   border-radius: 16rpx;
-  background: #FFF3E0;
-  color: #E65100;
+  background: $fortune-1-tint;
+  color: $mat-orange-strong;
 }
 .dtype-deficiency {
-  background: #FEE2E2;
-  color: #DC2626;
+  background: $status-danger-soft;
+  color: $status-danger-deep;
 }
 .dtype-excess {
-  background: #FFF3E0;
-  color: #E65100;
+  background: $fortune-1-tint;
+  color: $mat-orange-strong;
 }
 .dtype-borderline {
-  background: #FEF3C7;
-  color: #D97706;
+  background: $status-warning-soft;
+  color: $status-warning-deep;
 }
 .dtype-unclassified {
-  background: #F3F4F6;
-  color: #6B7280;
+  background: $facade-fill-gray-100;
+  color: $facade-text-slate;
 }
 .deficiency-severity-row {
   display: flex;
@@ -860,7 +860,7 @@ export default {
 .severity-bar {
   flex: 1;
   height: 12rpx;
-  background: #F3F4F6;
+  background: $facade-fill-gray-100;
   border-radius: 6rpx;
   overflow: hidden;
   margin-right: 16rpx;
@@ -871,25 +871,25 @@ export default {
 }
 .severity-val {
   font-size: calc(24rpx * var(--font-scale, 1));
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
   width: 60rpx;
   text-align: right;
 }
 .deficiency-meta {
   font-size: calc(22rpx * var(--font-scale, 1));
-  color: #6B7280;
+  color: $facade-text-slate;
   margin-bottom: 6rpx;
 }
 .deficiency-foods {
   font-size: calc(22rpx * var(--font-scale, 1));
-  color: #374151;
+  color: $facade-text-gray-700;
   margin-top: 8rpx;
 }
 .foods-label {
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
 }
 .foods-value {
-  color: #2E7D32;
+  color: $mat-green-strong;
 }
 
 /* ===== 雷达图 ===== */
@@ -910,7 +910,7 @@ export default {
   flex-direction: column;
 }
 .food-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 20rpx;
   margin-bottom: 12rpx;
@@ -926,7 +926,7 @@ export default {
 .food-name {
   font-size: calc(28rpx * var(--font-scale, 1));
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .food-score {
   font-size: calc(24rpx * var(--font-scale, 1));
@@ -935,28 +935,28 @@ export default {
   font-weight: 600;
 }
 .score-high {
-  background: #DCFCE7;
-  color: #16A34A;
+  background: $status-success-soft-2;
+  color: $status-success-strong-2;
 }
 .score-mid {
-  background: #FEF3C7;
-  color: #D97706;
+  background: $status-warning-soft;
+  color: $status-warning-deep;
 }
 .score-low {
-  background: #FEE2E2;
-  color: #DC2626;
+  background: $status-danger-soft;
+  color: $status-danger-deep;
 }
 .score-unknown {
-  background: #F3F4F6;
-  color: #6B7280;
+  background: $facade-fill-gray-100;
+  color: $facade-text-slate;
 }
 .food-meta {
   margin-bottom: 8rpx;
 }
 .food-category {
   font-size: calc(22rpx * var(--font-scale, 1));
-  color: #6B7280;
-  background: #F3F4F6;
+  color: $facade-text-slate;
+  background: $facade-fill-gray-100;
   padding: 2rpx 12rpx;
   border-radius: 12rpx;
 }
@@ -975,11 +975,11 @@ export default {
 }
 .n-label {
   font-size: calc(20rpx * var(--font-scale, 1));
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
 }
 .n-value {
   font-size: calc(24rpx * var(--font-scale, 1));
-  color: #374151;
+  color: $facade-text-gray-700;
   font-weight: 500;
 }
 </style>

+ 5 - 0
cfc-frontend/uni.scss

@@ -45,6 +45,7 @@ $mat-green-light:  #81C784; // green-300 亮档(5 文件;原 $uni-success-li
 $mat-green-light-2:#66BB6A; // green-400 亮档·副档(5 文件;同渐变族不同档)
 $mat-green-tint:   #E8F5E9; // green-50 极浅底(38 文件)
 $mat-green-strong: #2E7D32; // green-800 深文字(25 文件)
+$mat-green-base-2:  #43A047; // green-600 深主色(5 文件;vs $mat-green #4CAF50 green-500)
 // 琥珀(警示 / 提示 / 选中浅底)
 $mat-amber-tint:   #FFF8E1; // amber-50 极浅底(14 文件)
 $mat-amber-strong: #F57F17; // amber-800 深文字(6 文件;vs $status-warning-strong #92400E 同角色不同值)
@@ -52,6 +53,8 @@ $mat-amber-strong: #F57F17; // amber-800 深文字(6 文件;vs $status-warni
 $mat-orange-strong:#E65100; // orange-900 深文字(24 文件)
 // 蓝(信息态)
 $mat-blue-tint:    #E3F2FD; // blue-50 极浅底(29 文件)
+$mat-blue-light:   #BBDEFB; // blue-100 浅档(4 文件)
+$mat-blue-light-2: #64B5F6; // blue-300 亮档·副档(1 文件)
 $mat-blue-strong:  #1565C0; // blue-800 深文字(17 文件)
 
 $uni-warning: #FFB74D;
@@ -608,3 +611,5 @@ $facade-fill-4:        #E8E8E8; // 灰填充·深档(4 文件;vs $facade-fil
 $status-danger-strong-2: #C62828; // red-800 深文字(16 文件;vs $status-danger-strong #B91C1C red-700)
 $status-info-soft:    #DBEAFE; // blue-100 信息浅档(15 文件;vs $status-info-tint #EFF6FF blue-50)
 $facade-hairline:     #E0E0E0; // 浅灰描边(26 文件高频)
+$status-success-soft-2: #DCFCE7; // green-100 浅档(15 文件;vs $status-success-soft #D1FAE5 emerald-100)
+$status-success-strong-2: #16A34A; // green-600 深文字(21 文件;vs $status-success-strong #065F46 emerald-800)