Sfoglia il codice sorgente

refactor(beautify): D12 report-detail 健康报告详情页清理 (debt 78->~40)

- style 全局令牌映射 6 色:#D32F2F->fortune-0-ink, #FFF8E1->mat-amber-tint,
  #F57F17->mat-amber-strong, #66BB6A->mat-green-light-2, #43A047->mat-green-base-2,
  #FFD54F->uni-warning-light
- 医疗蓝 + Material 渐变 + 暖橙提示收编局部 \-rptd-* 12 色
- hex 21->0(余 palette 声明);硬编码色 1636->1579(含前序批次累积)
liaoxg 6 giorni fa
parent
commit
d2d21a94a9

+ 35 - 21
cfc-frontend/pages/health/report-detail.vue

@@ -1303,6 +1303,20 @@ export default {
 </script>
 
 <style scoped lang="scss">
+// ===== 报告详情页专属色阶(医疗蓝 + Material 渐变档 + 暖橙提示;单页专用,约定见 uni.scss §14)=====
+$c-rptd-blue:        #4a90d9; // 医疗蓝(标题/主元素)
+$c-rptd-blue-bg:     #eef4ff; // 医疗蓝浅底
+$c-rptd-line:        #E8EDF2; // 浅灰分隔线
+$c-rptd-card:        #F8FAFB; // 卡片底(浅灰白)
+$c-rptd-red-bg:      #FFF0F0; // 警示浅红底
+$c-rptd-amber-deep:  #FFC107; // Material 琥珀深档
+$c-rptd-orange-1:    #FF8A65; // 低档渐变起
+$c-rptd-orange-2:    #FF5722; // 低档渐变终(deep-orange-500)
+$c-rptd-red-1:       #EF9A9A; // 无档渐变起
+$c-rptd-red-2:       #E53935; // 无档渐变终
+$c-rptd-orange-tint: #FFF0E0; // 浅橙底(提示卡)
+$c-rptd-orange-line: #FFD4A8; // 暖橙描边
+
 .page {
   min-height: 100vh;
   background: $facade-fill-page;
@@ -1331,8 +1345,8 @@ export default {
 }
 .type-badge {
   font-size: 22rpx;
-  color: #4a90d9;
-  background: #eef4ff;
+  color: $c-rptd-blue;
+  background: $c-rptd-blue-bg;
   padding: 4rpx 14rpx;
   border-radius: 8rpx;
 }
@@ -1352,7 +1366,7 @@ export default {
   justify-content: center;
 }
 .nav-edit {
-  background: #4a90d9;
+  background: $c-rptd-blue;
   color: $app-surface;
   padding: 16rpx 60rpx;
   border-radius: 40rpx;
@@ -1408,7 +1422,7 @@ export default {
 
 /* ===== 鎸囨爣鍒嗙粍鎶樺彔 ===== */
 .indicator-group {
-  border: 2rpx solid #E8EDF2;
+  border: 2rpx solid $c-rptd-line;
   border-radius: 12rpx;
   margin-bottom: 12rpx;
   overflow: hidden;
@@ -1514,7 +1528,7 @@ export default {
   flex-shrink: 0;
 }
 .member-panel {
-  background: #F8FAFB;
+  background: $c-rptd-card;
   border-radius: 12rpx;
   padding: 16rpx;
   margin: 8rpx 0 16rpx;
@@ -1585,7 +1599,7 @@ export default {
 .member-name { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-strong; }
 
 .indicator-item {
-  background: #F8FAFB;
+  background: $c-rptd-card;
   border-radius: 12rpx;
   padding: 16rpx;
   margin-bottom: 12rpx;
@@ -1681,7 +1695,7 @@ export default {
 .ind-name-high-risk, .ind-value-high-risk,
 .ind-name-low-risk, .ind-value-low-risk,
 .ind-name-not-detected, .ind-value-not-detected {
-  background: #FFF0F0;
+  background: $c-rptd-red-bg;
   color: $status-danger-strong-2;
 }
 
@@ -1752,7 +1766,7 @@ export default {
 .help-desc {
   margin-top: 8rpx;
   padding: 20rpx;
-  background: #F8FAFB;
+  background: $c-rptd-card;
   border-radius: 12rpx;
 }
 .help-desc-label {
@@ -1774,7 +1788,7 @@ export default {
   align-items: center;
   gap: 12rpx;
   padding: 12rpx 16rpx;
-  background: #F8FAFB;
+  background: $c-rptd-card;
   border-radius: 10rpx;
   margin-bottom: 8rpx;
 }
@@ -1820,7 +1834,7 @@ export default {
   display: block;
   font-size: calc(24rpx * var(--font-scale, 1));
   font-weight: 500;
-  color: #D32F2F;
+  color: $fortune-0-ink;
   padding: 8rpx 4rpx 6rpx;
 }
 
@@ -1830,7 +1844,7 @@ export default {
   align-items: center;
   gap: 12rpx;
   padding: 12rpx 16rpx;
-  background: #F8FAFB;
+  background: $c-rptd-card;
   border-radius: 10rpx;
   margin-bottom: 8rpx;
 }
@@ -1917,7 +1931,7 @@ export default {
   border-radius: 20rpx;
 }
 .badge-high { background: $mat-green-tint; color: $mat-green-strong; }
-.badge-medium { background: #FFF8E1; color: #F57F17; }
+.badge-medium { background: $mat-amber-tint; color: $mat-amber-strong; }
 .badge-low { background: $fortune-1-tint; color: $mat-orange-strong; }
 .badge-none { background: $fortune-0-tint; color: $status-danger-strong-2; }
 
@@ -1933,10 +1947,10 @@ export default {
   border-radius: 6rpx;
   transition: width 0.3s ease;
 }
-.fill-high { background: linear-gradient(90deg, #66BB6A, #43A047); }
-.fill-medium { background: linear-gradient(90deg, #FFD54F, #FFC107); }
-.fill-low { background: linear-gradient(90deg, #FF8A65, #FF5722); }
-.fill-none { background: linear-gradient(90deg, #EF9A9A, #E53935); }
+.fill-high { background: linear-gradient(90deg, $mat-green-light-2, $mat-green-base-2); }
+.fill-medium { background: linear-gradient(90deg, $uni-warning-light, $c-rptd-amber-deep); }
+.fill-low { background: linear-gradient(90deg, $c-rptd-orange-1, $c-rptd-orange-2); }
+.fill-none { background: linear-gradient(90deg, $c-rptd-red-1, $c-rptd-red-2); }
 
 .confidence-desc {
   font-size: calc(22rpx * var(--font-scale, 1));
@@ -1960,7 +1974,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 16rpx;
-  background: #F8FAFB;
+  background: $c-rptd-card;
   border-radius: 12rpx;
   margin-bottom: 10rpx;
   border: 2rpx solid transparent;
@@ -2143,7 +2157,7 @@ export default {
 .tongue-summary {
   margin-top: 20rpx;
   padding: 20rpx 24rpx;
-  background: #FFF8E1;
+  background: $mat-amber-tint;
   border-radius: 16rpx;
 }
 .tongue-summary-title {
@@ -2172,8 +2186,8 @@ export default {
 .parsing-banner {
   display: flex;
   align-items: center;
-  background: linear-gradient(135deg, $uni-primary-pale, #FFF0E0);
-  border: 1rpx solid #FFD4A8;
+  background: linear-gradient(135deg, $uni-primary-pale, $c-rptd-orange-tint);
+  border: 1rpx solid $c-rptd-orange-line;
   border-radius: 20rpx;
   padding: 28rpx 32rpx;
   margin-bottom: 20rpx;
@@ -2181,7 +2195,7 @@ export default {
 .parsing-spinner {
   width: 48rpx;
   height: 48rpx;
-  border: 4rpx solid #FFD4A8;
+  border: 4rpx solid $c-rptd-orange-line;
   border-top-color: $dim-body;
   border-radius: 50%;
   flex-shrink: 0;

+ 79 - 0
cfc-frontend/scripts/d12-report-detail.js

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+/**
+ * D12: report-detail.vue 健康报告详情页清理 (debt 78)
+ *
+ * style 全局令牌映射 6 色:
+ *   #D32F2F->$fortune-0-ink, #FFF8E1->$mat-amber-tint, #F57F17->$mat-amber-strong,
+ *   #66BB6A->$mat-green-light-2, #43A047->$mat-green-base-2, #FFD54F->$uni-warning-light
+ * 专属色(医疗蓝 + Material 渐变 + 暖橙)收编局部 $c-rptd-* 变量
+ */
+const fs = require('fs');
+const F = 'pages/health/report-detail.vue';
+let src = fs.readFileSync(F, 'utf8');
+
+const styleIdx = src.indexOf('<style');
+const before = src.slice(0, styleIdx);
+let styleBody = src.slice(styleIdx);
+
+const GLOBAL = [
+  ['#D32F2F', '$fortune-0-ink'],
+  ['#FFF8E1', '$mat-amber-tint'],
+  ['#F57F17', '$mat-amber-strong'],
+  ['#66BB6A', '$mat-green-light-2'],
+  ['#43A047', '$mat-green-base-2'],
+  ['#FFD54F', '$uni-warning-light'],
+];
+for (const [f, t] of GLOBAL) {
+  const esc = f.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  styleBody = styleBody.replace(new RegExp(esc + '(?![0-9a-fA-F])', 'gi'), t);
+}
+
+const PAL = [
+  ['#4a90d9', '$c-rptd-blue'],       // 医疗蓝 x2
+  ['#eef4ff', '$c-rptd-blue-bg'],    // 医疗蓝浅底
+  ['#E8EDF2', '$c-rptd-line'],       // 浅灰分隔线
+  ['#F8FAFB', '$c-rptd-card'],       // 卡片底(浅灰白)x6
+  ['#FFF0F0', '$c-rptd-red-bg'],     // 警示浅红底
+  ['#FFC107', '$c-rptd-amber-deep'], // Material 琥珀深档
+  ['#FF8A65', '$c-rptd-orange-1'],   // 低档渐变起
+  ['#FF5722', '$c-rptd-orange-2'],   // 低档渐变终(deep-orange-500)
+  ['#EF9A9A', '$c-rptd-red-1'],      // 无档渐变起
+  ['#E53935', '$c-rptd-red-2'],      // 无档渐变终
+  ['#FFF0E0', '$c-rptd-orange-tint'],// 浅橙底(提示卡)
+  ['#FFD4A8', '$c-rptd-orange-line'],// 暖橙描边 x2
+];
+for (const [f, t] of PAL) {
+  const esc = f.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  styleBody = styleBody.replace(new RegExp(esc + '(?![0-9a-fA-F])', 'gi'), t);
+}
+
+const palette = [
+  '// ===== 报告详情页专属色阶(医疗蓝 + Material 渐变档 + 暖橙提示;单页专用,约定见 uni.scss §14)=====',
+  '$c-rptd-blue:        #4a90d9; // 医疗蓝(标题/主元素)',
+  '$c-rptd-blue-bg:     #eef4ff; // 医疗蓝浅底',
+  '$c-rptd-line:        #E8EDF2; // 浅灰分隔线',
+  '$c-rptd-card:        #F8FAFB; // 卡片底(浅灰白)',
+  '$c-rptd-red-bg:      #FFF0F0; // 警示浅红底',
+  '$c-rptd-amber-deep:  #FFC107; // Material 琥珀深档',
+  '$c-rptd-orange-1:    #FF8A65; // 低档渐变起',
+  '$c-rptd-orange-2:    #FF5722; // 低档渐变终(deep-orange-500)',
+  '$c-rptd-red-1:       #EF9A9A; // 无档渐变起',
+  '$c-rptd-red-2:       #E53935; // 无档渐变终',
+  '$c-rptd-orange-tint: #FFF0E0; // 浅橙底(提示卡)',
+  '$c-rptd-orange-line: #FFD4A8; // 暖橙描边',
+  ''
+].join('\n');
+styleBody = styleBody.replace(/(<style[^>]*>\s*\n)/, '$1' + palette + '\n');
+
+fs.writeFileSync(F, before + styleBody);
+console.log('D12 done');
+
+const lines = src.split('\n');
+let n = 0;
+for (let i = 0; i < lines.length; i++) {
+  if (/#[0-9a-fA-F]{3,8}\b/.test(lines[i])) {
+    const L = lines[i].trim();
+    if (L.indexOf('$c-') !== 0 && !/^\$c-/.test(L)) { console.log('HEX ' + (i + 1) + ': ' + L); n++; }
+  }
+}
+console.log('remaining hex (excl palette):', n);