Jelajahi Sumber

refactor(beautify): D28 diet/preferences 饮食偏好页清理 (debt 48->33)

- #FFF3E6 -> \-cream(uni.scss 新增,4 文件复用:饮食/健康问卷)
- 11 色暖棕/奶油问卷色阶收编局部 \-dp-*(无全局等值令牌)
- hex 16->11(palette 声明);P2 41,硬编码色 1286->1281
liaoxg 5 hari lalu
induk
melakukan
8b1724ed3a

+ 28 - 15
cfc-frontend/pages/diet/preferences.vue

@@ -376,9 +376,22 @@ export default {
 </script>
 
 <style scoped lang="scss">
+// ===== 饮食偏好页专属色阶(暖棕/奶油问卷主题;单页专用,约定见 uni.scss §14)=====
+$c-dp-track:       #FFE3C7; // 进度条底轨
+$c-dp-label:       #C2A78A; // 进度标签文字
+$c-dp-ink:         #4A2E1A; // 主文字深棕
+$c-dp-muted:       #A08B72; // 辅助文字浅棕
+$c-dp-chip:        #F5F0EA; // 选项胶囊底
+$c-dp-chip-ink:    #6B5340; // 选项胶囊文字
+$c-dp-accent:      #E8732A; // 选中态强调橙
+$c-dp-line:        #FFD9B8; // 输入框描边
+$c-dp-input:       #FFF9F2; // 输入框底
+$c-dp-footer:      #FFFDF8; // 底部操作条底
+$c-dp-footer-line: #FFE9D4; // 底部操作条描边
+
 .preferences-page {
   min-height: 100vh;
-  background: linear-gradient(180deg, $uni-primary-pale 0%, #FFF3E6 100%);
+  background: linear-gradient(180deg, $uni-primary-pale 0%, $warm-cream 100%);
   display: flex;
   flex-direction: column;
 }
@@ -386,14 +399,14 @@ export default {
 /* ===== 进度条 ===== */
 .progress-bar { padding: 30rpx 32rpx 10rpx; }
 .progress-track {
-  height: 12rpx; background: #FFE3C7; border-radius: 6rpx; overflow: hidden;
+  height: 12rpx; background: $c-dp-track; border-radius: 6rpx; overflow: hidden;
 }
 .progress-fill {
   height: 100%; background: linear-gradient(90deg, $dim-body, $dim-body-light);
   border-radius: 6rpx; transition: width 0.3s ease;
 }
 .progress-labels { display: flex; justify-content: space-between; margin-top: 12rpx; }
-.progress-label { font-size: 22rpx; color: #C2A78A; flex: 1; text-align: center; }
+.progress-label { font-size: 22rpx; color: $c-dp-label; flex: 1; text-align: center; }
 .progress-label-active { color: $dim-body; font-weight: 600; }
 
 /* ===== 内容 ===== */
@@ -401,26 +414,26 @@ export default {
 .step-head { display: flex; align-items: center; margin: 20rpx 0 24rpx; }
 .step-icon { font-size: 52rpx; margin-right: 20rpx; }
 .step-head-text { display: flex; flex-direction: column; }
-.step-title { font-size: 34rpx; font-weight: 700; color: #4A2E1A; }
-.step-sub { font-size: 24rpx; color: #A08B72; margin-top: 6rpx; }
+.step-title { font-size: 34rpx; font-weight: 700; color: $c-dp-ink; }
+.step-sub { font-size: 24rpx; color: $c-dp-muted; margin-top: 6rpx; }
 
 /* ===== 卡片 ===== */
 .card {
   background: $app-surface; border-radius: 24rpx; padding: 28rpx;
   margin-bottom: 24rpx; box-shadow: 0 4rpx 20rpx rgba(255, 140, 66, 0.08);
 }
-.card-title { font-size: 28rpx; font-weight: 600; color: #4A2E1A; margin-bottom: 20rpx; display: block; }
+.card-title { font-size: 28rpx; font-weight: 600; color: $c-dp-ink; margin-bottom: 20rpx; display: block; }
 
 /* ===== chip ===== */
 .chip-group { display: flex; flex-wrap: wrap; }
 .chip {
-  padding: 14rpx 28rpx; border-radius: 999rpx; background: #F5F0EA;
-  font-size: 26rpx; color: #6B5340; margin: 0 16rpx 16rpx 0;
+  padding: 14rpx 28rpx; border-radius: 999rpx; background: $c-dp-chip;
+  font-size: 26rpx; color: $c-dp-chip-ink; margin: 0 16rpx 16rpx 0;
   border: 2rpx solid transparent;
 }
 .chip-active {
   background: $dim-body; color: $app-surface; font-weight: 600;
-  border-color: #E8732A;
+  border-color: $c-dp-accent;
 }
 
 /* ===== 自定义添加 ===== */
@@ -429,8 +442,8 @@ export default {
 }
 .custom-row { display: flex; align-items: center; margin-top: 8rpx; margin-bottom: 12rpx; }
 .custom-input {
-  flex: 1; border: 2rpx solid #FFD9B8; border-radius: 999rpx;
-  padding: 14rpx 24rpx; font-size: 26rpx; background: #FFF9F2;
+  flex: 1; border: 2rpx solid $c-dp-line; border-radius: 999rpx;
+  padding: 14rpx 24rpx; font-size: 26rpx; background: $c-dp-input;
 }
 .custom-confirm {
   background: $dim-body; color: $app-surface; font-size: 26rpx; font-weight: 600;
@@ -439,21 +452,21 @@ export default {
 
 /* ===== 滑块 ===== */
 .slider-row { display: flex; align-items: center; }
-.slider-label { font-size: 24rpx; color: #A08B72; width: 72rpx; }
+.slider-label { font-size: 24rpx; color: $c-dp-muted; width: 72rpx; }
 .slider { flex: 1; }
 .spice-level-label { font-size: 24rpx; color: $dim-body; text-align: center; margin-top: 8rpx; display: block; }
 
 /* ===== 底栏 ===== */
 .footer-bar {
-  display: flex; padding: 20rpx 32rpx 30rpx; background: #FFFDF8;
-  border-top: 2rpx solid #FFE9D4;
+  display: flex; padding: 20rpx 32rpx 30rpx; background: $c-dp-footer;
+  border-top: 2rpx solid $c-dp-footer-line;
 }
 .footer-btn {
   flex: 1; text-align: center; padding: 24rpx 0; border-radius: 999rpx;
   font-size: 30rpx; font-weight: 600;
 }
 .footer-btn-ghost {
-  background: #F5F0EA; color: #6B5340; margin-right: 20rpx;
+  background: $c-dp-chip; color: $c-dp-chip-ink; margin-right: 20rpx;
 }
 .footer-btn-primary {
   background: linear-gradient(135deg, $dim-body, $dim-body-light); color: $app-surface;

+ 68 - 0
cfc-frontend/scripts/d28-diet-preferences.js

@@ -0,0 +1,68 @@
+#!/usr/bin/env node
+/**
+ * D28: diet/preferences.vue 饮食偏好页清理 (debt 48 -> 0)
+ * #FFF3E6 -> $warm-cream(4 文件复用);其余暖棕/奶油色阶收编局部 $c-dp-*
+ */
+const fs = require('fs');
+const F = 'pages/diet/preferences.vue';
+let src = fs.readFileSync(F, 'utf8');
+let replaced = 0;
+
+const styleIdx = src.indexOf('<style');
+const before = src.slice(0, styleIdx);
+let styleBody = src.slice(styleIdx);
+
+const GLOBAL = [['#FFF3E6', '$warm-cream']];
+for (const [from, to] of GLOBAL) {
+  const re = new RegExp(from + '(?![0-9a-fA-F])', 'gi');
+  replaced += (styleBody.match(re) || []).length;
+  styleBody = styleBody.replace(re, to);
+}
+
+const LOCAL = [
+  ['#FFE3C7', '$c-dp-track'],
+  ['#C2A78A', '$c-dp-label'],
+  ['#4A2E1A', '$c-dp-ink'],
+  ['#A08B72', '$c-dp-muted'],
+  ['#F5F0EA', '$c-dp-chip'],
+  ['#6B5340', '$c-dp-chip-ink'],
+  ['#E8732A', '$c-dp-accent'],
+  ['#FFD9B8', '$c-dp-line'],
+  ['#FFF9F2', '$c-dp-input'],
+  ['#FFFDF8', '$c-dp-footer'],
+  ['#FFE9D4', '$c-dp-footer-line'],
+];
+for (const [from, to] of LOCAL) {
+  const re = new RegExp(from + '(?![0-9a-fA-F])', 'gi');
+  replaced += (styleBody.match(re) || []).length;
+  styleBody = styleBody.replace(re, to);
+}
+
+const palette = [
+  '// ===== 饮食偏好页专属色阶(暖棕/奶油问卷主题;单页专用,约定见 uni.scss §14)=====',
+  '$c-dp-track:       #FFE3C7; // 进度条底轨',
+  '$c-dp-label:       #C2A78A; // 进度标签文字',
+  '$c-dp-ink:         #4A2E1A; // 主文字深棕',
+  '$c-dp-muted:       #A08B72; // 辅助文字浅棕',
+  '$c-dp-chip:        #F5F0EA; // 选项胶囊底',
+  '$c-dp-chip-ink:    #6B5340; // 选项胶囊文字',
+  '$c-dp-accent:      #E8732A; // 选中态强调橙',
+  '$c-dp-line:        #FFD9B8; // 输入框描边',
+  '$c-dp-input:       #FFF9F2; // 输入框底',
+  '$c-dp-footer:      #FFFDF8; // 底部操作条底',
+  '$c-dp-footer-line: #FFE9D4; // 底部操作条描边',
+  ''
+].join('\n');
+styleBody = styleBody.replace(/(<style[^>]*>\s*\n)/, '$1' + palette + '\n');
+
+fs.writeFileSync(F, before + styleBody);
+console.log('total replaced:', replaced);
+
+const out = fs.readFileSync(F, 'utf8');
+const lines = out.split('\n');
+let n = 0;
+for (let i = 0; i < lines.length; i++) {
+  const L = lines[i].trim();
+  if (/#[0-9a-fA-F]{3,8}\b/.test(L) && L.charAt(0) !== '$') { console.log('HEX ' + (i + 1) + ': ' + L.slice(0, 110)); n++; }
+}
+console.log('remaining non-palette hex:', n);

+ 1 - 0
cfc-frontend/uni.scss

@@ -619,6 +619,7 @@ $accent-indigo-tint: #E0E7FF; // indigo-100 靛紫浅底(7 文件)
 $accent-navy:        #1E3A5F; // 深海军蓝渐变主色(4 文件;评分卡/引导条渐变)
 $tint-info-soft:     #E8F4FD; // 信息蓝浅底(article-edit + articles)
 $hint-cream-bg:      #FEF9E7; // 提示条奶油底(articles + shop/index)
+$warm-cream:         #FFF3E6; // 暖奶油底(饮食/健康问卷,4 文件)
 $hint-cream-border:  #F0E6C0; // 提示条奶油描边(articles + shop/index)
 $hint-gold-ink:      #B8860B; // 提示条金褐文字(8 文件)
 $facade-fill-page:   #F8F8F8; // 页面灰底(33 文件;health-main 原 $c-fill-warm 同值收敛于此)