cfc/cfc-frontend/scripts/d10-family-members.js

#!/usr/bin/env node
/**
 * D10: family-members.vue 家庭成员管理页清理 (debt 90)
 *
 * 1) script canvas 15 处色收编为 CANVAS_COLORS 常量（引用 BrandColors + import）
 * 2) style 全局令牌映射：#FF6B9D->$dim-mind, #EEF2FF->$dim-wisdom-tint-2
 * 3) style 专属色收编局部变量：暖米族($c-fam-*) + 紫罗兰族($c-fam-violet-*)
 *    + Element UI 浅底族($c-elm-*)
 * 4) brand-colors.js 补 bodyLight(#FFB366)/primaryDeep(#C2410C)
 */
const fs = require('fs');
const F = 'pages/profile-extra/family-members.vue';
let src = fs.readFileSync(F, 'utf8');
let replaced = 0;

function repl(from, to) {
  const cnt = src.split(from).length - 1;
  if (cnt === 0) { console.warn('NOT FOUND:', from.slice(0, 80)); return; }
  src = src.split(from).join(to);
  replaced += cnt;
}

// ---- 1. import + CANVAS_COLORS ----
repl(
  "<script>\nexport default {",
  [
    "<script>",
    "import { BrandColors } from '../../utils/brand-colors.js'",
    "",
    "// canvas 画布色板（引用 BrandColors；画布专属浅色保留集中定义，约定见 uni.scss §14）",
    "var CANVAS_COLORS = {",
    "  gradStart:   BrandColors.body,        // #FF8C42 背景渐变起",
    "  gradEnd:     BrandColors.bodyLight,   // #FFB366 背景渐变终",
    "  cardFace:    '#FFFCF5',               // 卡片面（米白）",
    "  cardInk:     BrandColors.primaryDeep, // #C2410C 深橙文字",
    "  cardFaceAlt: '#FFF0E0',               // 卡片内底（浅橙）",
    "  hintText:    BrandColors.textMuted,   // #999999 占位灰",
    "  btnStart:    BrandColors.body,",
    "  btnEnd:      BrandColors.bodyLight,",
    "  btnInk:      BrandColors.white,",
    "  dotColors: [BrandColors.body, BrandColors.wisdom, BrandColors.wealth, BrandColors.action, BrandColors.mind]",
    "};",
    "",
    "export default {",
  ].join('\n')
);

// ---- 2. canvas 调用处 ----
repl("bgGrad.addColorStop(0, '#FF8C42')", "bgGrad.addColorStop(0, CANVAS_COLORS.gradStart)");
repl("bgGrad.addColorStop(1, '#FFB366')", "bgGrad.addColorStop(1, CANVAS_COLORS.gradEnd)");
repl("ctx.setFillStyle('#FFFCF5')", "ctx.setFillStyle(CANVAS_COLORS.cardFace)");
repl("ctx.setFillStyle('#C2410C')", "ctx.setFillStyle(CANVAS_COLORS.cardInk)");
repl("ctx.setFillStyle('#FFF0E0')", "ctx.setFillStyle(CANVAS_COLORS.cardFaceAlt)");
repl("ctx.setFillStyle('#FF8C42')", "ctx.setFillStyle(CANVAS_COLORS.gradStart)");
repl("ctx.setFillStyle('#999999')", "ctx.setFillStyle(CANVAS_COLORS.hintText)");
repl("btnGrad.addColorStop(0, '#FF8C42')", "btnGrad.addColorStop(0, CANVAS_COLORS.btnStart)");
repl("btnGrad.addColorStop(1, '#FFB366')", "btnGrad.addColorStop(1, CANVAS_COLORS.btnEnd)");
repl("ctx.setFillStyle('#FFFFFF')", "ctx.setFillStyle(CANVAS_COLORS.btnInk)");
repl("var dotColors = ['#FF8C42', '#6366F1', '#F59E0B', '#10B981', '#FF6B9D']",
     "var dotColors = CANVAS_COLORS.dotColors");

// ---- 3. style 块 ----
const styleIdx = src.indexOf('<style');
const before = src.slice(0, styleIdx);
let styleBody = src.slice(styleIdx);

// 全局令牌
styleBody = styleBody.replace(/#FF6B9D(?![0-9a-fA-F])/g, '$dim-mind');
styleBody = styleBody.replace(/#EEF2FF(?![0-9a-fA-F])/g, '$dim-wisdom-tint-2');

// 局部变量
const PAL_MAP = [
  ['#F5F0EB', '$c-fam-page'],
  ['#FFFCF5', '$c-fam-card'],
  ['#F0EAE2', '$c-fam-line'],
  ['#FFF1E8', '$c-fam-tint'],
  ['#6D28D9', '$c-fam-violet-text'],
  ['#EDE9FE', '$c-fam-violet-bg'],
  ['#C7D2FE', '$c-fam-violet-line'],
  ['#f0f9ff', '$c-elm-info-bg'],
  ['#EEF0FF', '$c-elm-info-bg-2'],
  ['#f0f9eb', '$c-elm-success-bg'],
  ['#67c23a', '$c-elm-success-text'],
  ['#fef0f0', '$c-elm-danger-bg'],
  ['#f56c6c', '$c-elm-danger-text'],
];
for (const [from, to] of PAL_MAP) {
  styleBody = styleBody.split(from).join(to);
}

const palette = [
  '// ===== 家员管理页专属色阶（暖米卡片 + 紫罗兰 + Element UI 浅底；单页专用，约定见 uni.scss §14）=====',
  '$c-fam-page:         #F5F0EB; // 页面底（暖灰米）',
  '$c-fam-card:         #FFFCF5; // 卡片底（米白）',
  '$c-fam-line:         #F0EAE2; // 暖分隔线',
  '$c-fam-tint:         #FFF1E8; // 浅橙底',
  '$c-fam-violet-text:  #6D28D9; // 紫罗兰文字',
  '$c-fam-violet-bg:    #EDE9FE; // 紫罗兰底',
  '$c-fam-violet-line:  #C7D2FE; // 紫罗兰深底（亲密条）',
  '$c-elm-info-bg:      #f0f9ff; // Element UI 信息浅底',
  '$c-elm-info-bg-2:    #EEF0FF; // Element UI 蓝浅底',
  '$c-elm-success-bg:   #f0f9eb; // Element UI 成功浅底',
  '$c-elm-success-text: #67c23a; // Element UI 成功文字',
  '$c-elm-danger-bg:    #fef0f0; // Element UI 危险浅底',
  '$c-elm-danger-text:  #f56c6c; // Element UI 危险文字',
  ''
].join('\n');

styleBody = styleBody.replace(/(<style[^>]*>\s*\n)/, '$1' + palette + '\n');
src = before + styleBody;

fs.writeFileSync(F, src);
console.log('total replaced:', replaced);

// 校验
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 (!/^\$c-/.test(L)) { console.log('HEX ' + (i + 1) + ': ' + L); n++; }
  }
}
console.log('remaining hex (excl palette decl):', n);