|
@@ -0,0 +1,152 @@
|
|
|
|
|
+# UI 设计令牌收敛执行任务书(U1/U2)
|
|
|
|
|
+
|
|
|
|
|
+> 日期:2026-10-26 | 依据:docs/2026-10-25-后台与小程序UI审查报告.md + docs/2026-10-25-字体边距间距专项审查.md
|
|
|
|
|
+> 本任务书是派发会话的唯一事实源。**所有替换规则以本文件为准,实际命中数以 grep 实测为准(本地数据可能略旧)。**
|
|
|
|
|
+
|
|
|
|
|
+## 全局纪律(每个会话必须遵守)
|
|
|
|
|
+
|
|
|
|
|
+1. **分支**:`git fetch origin cfclub` → 基于 `origin/cfclub` 新建 `feature/ui-token-<slug>` 分支,**不要合并主干、不要 push 主干**
|
|
|
|
|
+2. **只 git add 自己新增/修改的文件**(禁止 `git add .` / `git add -A`),commit message 用 `style(<模块>): <一句话描述>`,**完成后立即 commit + push 自己的分支,不需要等待确认**
|
|
|
|
|
+3. **只改样式**:禁止改动任何逻辑、接口、数据结构、页面行为。遇到疑似逻辑的地方**跳过并在报告中列出**
|
|
|
|
|
+4. **改前先 grep 基线计数,改后再 grep 复查**,报告前后数字
|
|
|
|
|
+5. **CSS 变量/SCSS 变量是既有体系**(cfc-web 的 `src/styles/admin-tokens.css`、cfc-frontend 的 `uni.scss`),本任务只是让页面**遵守既有令牌**,**不得改动令牌本身**(除非任务明确要求新增)
|
|
|
|
|
+6. 小程序限制:禁止可选链 `?.`、禁止 CSS Grid、禁止 `:key` 表达式、禁止 `new Date(string)`——本任务不涉及,但不要顺手引入
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+# U1 小程序批次(cfc-frontend)
|
|
|
|
|
+
|
|
|
|
|
+**目标目录**:`cfc-frontend/pages/` + `cfc-frontend/components/` + `cfc-frontend/common/uni.css`(uni.scss 只做新增,见 U1-4)
|
|
|
|
|
+
|
|
|
|
|
+## U1-1 font-scale 补漏(最高优先级)
|
|
|
|
|
+
|
|
|
|
|
+**背景**:`utils/fontScale.js` 已实现微信系统字号缩放(读 fontSizeScaleFactor/fontSizeSetting,钳制 [0.9,1.7],页面根节点注入 `--font-scale`,332/334 页面已覆盖)。但全库仍有约 **1826 处裸写 `font-size: NNNrpx;`** 未包裹 `calc(NNNrpx * var(--font-scale, 1))`,导致大字号用户同一页面"一半文字变大一半不变"。
|
|
|
|
|
+
|
|
|
|
|
+**规则**:
|
|
|
|
|
+- 把 `font-size: <数字>rpx;`(含 `font-size:<数字>rpx;` 无空格形式)统一改为 `font-size: calc(<数字>rpx * var(--font-scale, 1));`
|
|
|
|
|
+- **不要碰**:已用 `calc(` 包裹的、`common/uni.css` 中作为全局基线仅有的两处(第 21、35 行的 28rpx,改它们等于改全局基线——**这属于 U1-4 的令牌层,不在本项**)、`font-size: inherit` / `monospace` 等非 rpx 值
|
|
|
|
|
+- 内联 `style="font-size:NNNrpx"` 的同样处理
|
|
|
|
|
+- 图标类元素(如 line-height:1 配 emoji 的)**也要包裹**(scale=1 时无变化,安全);如遇特殊情况在报告中说明
|
|
|
|
|
+
|
|
|
|
|
+**验证**:改前 `grep -rhoE "font-size: *[0-9]+rpx" pages/ components/ | wc -l` ≈ 1928(含已 calc 的会少,以实测为准)→ 改后裸写(非 calc)应接近 0;报告"已包裹 N 处 / 跳过 M 处(含原因)"
|
|
|
|
|
+
|
|
|
|
|
+## U1-2 品牌色硬编码 → SCSS 变量
|
|
|
|
|
+
|
|
|
|
|
+**背景**:uni.scss 已定义 `$uni-primary:#F97316 / $uni-primary-pale:#FFF7ED / $uni-primary-dark:#EA580C` 等,但页面写死了约 24 处。
|
|
|
|
|
+
|
|
|
|
|
+**规则**:把页面(pages/components 的 `<style>` 段)中的以下写死色值替换为对应变量:
|
|
|
|
|
+- `#F97316` → `$uni-primary`
|
|
|
|
|
+- `#FFF7ED` → `$uni-primary-pale`
|
|
|
|
|
+- `#EA580C` → `$uni-primary-dark`
|
|
|
|
|
+- 只替换**色值**,不替换 rgba/其他色;如某处是 JS 里的色值(非 style 段),跳过并报告
|
|
|
|
|
+
|
|
|
|
|
+**验证**:`grep -rhoE "#(F97316|FFF7ED|EA580C)" pages/ components/ | wc -l` 应从约 24 降到接近 0(保留的逐条说明)
|
|
|
|
|
+
|
|
|
|
|
+## U1-3 AI 味文案清理(用户可见文字)
|
|
|
|
|
+
|
|
|
|
|
+**背景**:全库有"赋能"≥10 处、"开启XX之旅"多处,属 AI 生成腔。产品叙事是"五维主动健康",不要让文案稀释品牌辨识度。
|
|
|
|
|
+
|
|
|
|
|
+**规则**(模板文案里的也要改):
|
|
|
|
|
+- 「开启全家健康之旅」→「全家健康,从今天开始」
|
|
|
|
|
+- 「开启五维能量之旅」→「先了解你的五维能量」
|
|
|
|
|
+- 「开启健康之旅」→「开始记录你的健康」
|
|
|
|
|
+- 「开启 DOA 之旅」→「开始 DOA 自测」
|
|
|
|
|
+- 其余「赋能」:删除该词;若所在句子结构允许,改为具体动作(如「AI 赋能家庭健康」→「AI 陪伴家庭健康」);逐个判断,**不要机械删词导致句子不通**
|
|
|
|
|
+- 只改用户可见文字(模板/页面文案),不改代码注释、日志、API 字段
|
|
|
|
|
+
|
|
|
|
|
+**验证**:`grep -rnoE "赋能|开启.{0,6}之旅" pages/ components/` 改后应大幅下降;列出每处原句 → 新句对照表
|
|
|
|
|
+
|
|
|
|
|
+## U1-4 新增 spacing 令牌(uni.scss 追加,不动既有值)
|
|
|
|
|
+
|
|
|
|
|
+**背景**:uni.scss 只有 font-size/font-weight/radius 令牌,**没有 spacing 令牌**,导致间距 30+ 种裸值。
|
|
|
|
|
+
|
|
|
|
|
+**规则**:在 uni.scss 末尾追加(**只追加,不修改既有行**):
|
|
|
|
|
+
|
|
|
|
|
+```scss
|
|
|
|
|
+// ============================================================
|
|
|
|
|
+// 13. 间距令牌 Spacing Tokens(2026-10-26 新增,4rpx 基准)
|
|
|
|
|
+// 页面新样式优先使用;存量裸值按 § 迁移规则逐步归并
|
|
|
|
|
+// ============================================================
|
|
|
|
|
+$uni-space-2xs: 4rpx; /* 图标与文字微距 */
|
|
|
|
|
+$uni-space-xs: 8rpx; /* 标签内边距、紧凑间距 */
|
|
|
|
|
+$uni-space-sm: 12rpx; /* 列表项内距、次级间距 */
|
|
|
|
|
+$uni-space-md: 16rpx; /* 表单项间距、卡片内边距基准 */
|
|
|
|
|
+$uni-space-lg: 24rpx; /* 卡片内边距、区块间距 */
|
|
|
|
|
+$uni-space-xl: 32rpx; /* 区块间距 */
|
|
|
|
|
+$uni-space-2xl: 40rpx; /* 页面区块分隔 */
|
|
|
|
|
+$uni-space-3xl: 60rpx; /* 大留白 */
|
|
|
|
|
+$uni-space-4xl: 80rpx; /* 空状态留白 */
|
|
|
|
|
+$uni-space-page: 30rpx; /* 页面左右安全边距(兼容存量,不归并) */
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+**验证**:uni.scss 尾部出现 10 个新变量;`grep -c "uni-space" uni.scss` ≥ 10
|
|
|
|
|
+
|
|
|
|
|
+## U1-5(不做)30rpx 归并、字号归并、圆角归并
|
|
|
|
|
+
|
|
|
|
|
+本批次**不做** 30rpx×492 归并、字号 26/22/30rpx 归并、圆角收敛——改动面大且有视觉回退风险,留待下批人工目检。**不要顺手做**。
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+# U2 后台批次(cfc-web)
|
|
|
|
|
+
|
|
|
|
|
+**目标目录**:`cfc-web/src/views/` + `cfc-web/src/components/`
|
|
|
|
|
+
|
|
|
|
|
+## U2-1 #1677FF 去硬编码
|
|
|
|
|
+
|
|
|
|
|
+**背景**:`admin-tokens.css` 已定义 `--adm-primary:#1677FF`,页面约 15 处写死。
|
|
|
|
|
+
|
|
|
|
|
+**规则**:`src/views/` 与 `src/components/` 下所有 `#1677FF`(含大小写变体 `#1677ff`)→ `var(--adm-primary)`。仅替换**色值出现处**(color/background/border/border-color/box-shadow 等),不替换注释里的。
|
|
|
|
|
+
|
|
|
|
|
+**验证**:`grep -rhi "#1677ff" src/views/ src/components/ | wc -l` → 接近 0
|
|
|
|
|
+
|
|
|
|
|
+## U2-2 间距 20px → 24px(仅 padding/margin 上下文)
|
|
|
|
|
+
|
|
|
|
|
+**背景**:`admin-tokens.css:60` 明文「原 20px → 规范 24」,但 `padding/margin` 上下文约 **141 处**仍在用 20px。
|
|
|
|
|
+
|
|
|
|
|
+**规则**:**只替换 padding/margin 属性值**(`padding: 20px`、`padding-top/right/bottom/left: 20px`、`margin: 20px`、`margin-*: 20px`,含 `padding:20px` 无空格形式)→ 24px。
|
|
|
|
|
+**严禁**替换其他属性里的 20px(width/height/font-size/border-radius/left/top 等**不属于本项**,border-radius 见 U2-4)。
|
|
|
|
|
+
|
|
|
|
|
+**验证**:`grep -rhoE "(padding|margin)(-[a-z]+)? *: *20px" src/views/ src/components/ | wc -l` → 接近 0
|
|
|
|
|
+
|
|
|
|
|
+## U2-3 字号 13px 归位(标题 14px / 辅助 12px)
|
|
|
|
|
+
|
|
|
|
|
+**背景**:`admin-tokens.css:52` 明文「原 13px → 规范正文 14」,但 28 个文件 63 处仍在用 13px。
|
|
|
|
|
+
|
|
|
|
|
+**规则**:按**语义**归类替换:
|
|
|
|
|
+- 标题类(`title`/`header`/`name`/`hot-title`/`article-title` 等选择器)→ `14px`
|
|
|
|
|
+- 辅助说明类(`sub`/`desc`/`tip`/`empty`/`placeholder` 等)→ `12px`
|
|
|
|
|
+- 正文类(`name` 表示人名/正文、列表文字)→ `14px`
|
|
|
|
|
+- 拿不准的 → `14px`(保守)并在报告列出
|
|
|
|
|
+
|
|
|
|
|
+**验证**:`grep -rn "font-size: 13px" src/views/ src/components/ | wc -l` → 接近 0;报告 14px/12px 各归并多少处
|
|
|
|
|
+
|
|
|
|
|
+## U2-4 非标圆角收敛
|
|
|
|
|
+
|
|
|
|
|
+**背景**:tokens 定义圆角 2/4/6/8px(`--adm-radius-sm/md/control/card`),页面存在越界值。
|
|
|
|
|
+
|
|
|
|
|
+**规则**(只替换 border-radius 上下文):
|
|
|
|
|
+- `16px` → `8px`
|
|
|
|
|
+- `12px` → `8px`
|
|
|
|
|
+- `20px` → `8px`
|
|
|
|
|
+- `10px` → `8px`
|
|
|
|
|
+- `9px` → `4px`
|
|
|
|
|
+- `3px` → `2px`
|
|
|
|
|
+- `5px`、`2px`、`4px`、`6px`、`8px` 本身合规,**不动**
|
|
|
|
|
+- 只动 `<style>` 里的 border-radius,不动 el 组件的 prop(如 `:border-radius="16"`)
|
|
|
|
|
+
|
|
|
|
|
+**验证**:`grep -rhoE "border-radius: *(16|12|20|10|9|3)px" src/views/ src/components/ | wc -l` → 接近 0
|
|
|
|
|
+
|
|
|
|
|
+## U2-5 验证
|
|
|
|
|
+
|
|
|
|
|
+cfc-web 改完必须:`cd cfc-web && npm run lint`(如有)或至少 `npx vue-cli-service lint --no-fix` 无新增 error;**不跑全量 build 太久则跳过并在报告说明**。
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+# 报告要求(会话完成时随 commit 一并说明)
|
|
|
|
|
+
|
|
|
|
|
+每个会话按以下格式回报:
|
|
|
|
|
+1. 改前基线(grep 计数)→ 改后计数
|
|
|
|
|
+2. 每项替换的命中清单摘要(Top 文件)
|
|
|
|
|
+3. 跳过清单及原因(每条)
|
|
|
|
|
+4. 目检风险提示(哪些替换可能引起视觉回退,建议真机/浏览器抽查哪些页面)
|
|
|
|
|
+5. commit hash + 分支名
|