diff --git a/.design/tokens.yml b/.design/tokens.yml new file mode 100644 index 0000000..72acfe4 --- /dev/null +++ b/.design/tokens.yml @@ -0,0 +1,405 @@ +version: 1 +updated: "2026-05-17" + +# ============================================================================ +# Design Token 注册表 +# 数据源: apps/miniprogram/src/styles/tokens.scss + variables.scss +# ============================================================================ + +colors: + # --- 主色系(赤土橙) --- + - token: --tk-pri + value: "#C4623A" + scss_var: "$pri" + role: 主色/赤土橙 accent + + - token: --tk-pri-l + value: "#F0DDD4" + scss_var: "$pri-l" + role: 主色浅/赤土浅 + + - token: --tk-pri-d + value: "#8B3E1F" + scss_var: "$pri-d" + role: 主色深/赤土深 + + # --- 阴影色(含透明度) --- + - token: --tk-shadow-btn + value: "0 4px 16px rgba(196, 98, 58, 0.3)" + scss_var: "$shadow-btn" + role: 主按钮阴影 + + - token: --tk-shadow-tab + value: "0 2px 8px rgba(196, 98, 58, 0.25)" + scss_var: "$shadow-tab" + role: 选中Tab阴影 + + # --- 文字色 --- + - token: --tk-text-secondary + value: "#78716C" + scss_var: "$tx3" + role: 淡文字/辅助文字 + + # --- 卡片背景 --- + - token: --tk-card-bg + value: "#FFFFFF" + scss_var: "$card" + role: 卡片白底 + + # --- 医生端覆盖色(.doctor-mode 下自动替换 --tk-pri*) --- + - token: --tk-pri.doctor + value: "#3A6B8C" + scss_var: "$doc-pri" + role: 医生端主色/靛蓝 + note: 仅在 .doctor-mode 下覆盖 --tk-pri + + - token: --tk-pri-l.doctor + value: "#D4E5F0" + scss_var: "$doc-pri-l" + role: 医生端浅色 + + - token: --tk-pri-d.doctor + value: "#2A4F6A" + scss_var: "$doc-pri-d" + role: 医生端深色 + +# --- 未映射到 Token 的 SCSS 变量(原型中有但 tokens.scss 未声明为 CSS 变量) --- +unmapped_scss_variables: + - scss_var: "$bg" + value: "#F5F0EB" + role: 页面主背景/温润米底 + note: "原型 T.bg 映射目标,tokens.scss 未声明为 CSS 变量" + + - scss_var: "$tx" + value: "#2D2A26" + role: 主文字色/暖黑 + note: "原型 T.tx 映射目标,tokens.scss 未声明为 CSS 变量" + + - scss_var: "$tx2" + value: "#5A554F" + role: 次文字色/暖灰 + note: "原型 T.tx2 近似映射,elder-mode 下 --tk-text-secondary 覆盖为此值" + + - scss_var: "$bd" + value: "#E8E2DC" + role: 边框色 + note: "原型 T.bd 映射目标,tokens.scss 未声明为 CSS 变量" + + - scss_var: "$bd-l" + value: "#F0EBE5" + role: 浅边框色 + + - scss_var: "$acc" + value: "#5B7A5E" + role: 鼠尾草绿/成功色 + note: "原型中成功色,tokens.scss 未声明为 CSS 变量" + + - scss_var: "$acc-l" + value: "#E8F0E8" + role: 成功浅色 + + - scss_var: "$dan" + value: "#B54A4A" + role: 危险色/柔红 + note: "原型中危险色,tokens.scss 未声明为 CSS 变量" + + - scss_var: "$dan-l" + value: "#FDEAEA" + role: 危险浅色 + + - scss_var: "$wrn" + value: "#C4873A" + role: 警告色/暖琥珀 + note: "原型中警告色,tokens.scss 未声明为 CSS 变量" + + - scss_var: "$wrn-l" + value: "#FFF3E0" + role: 警告浅色 + + - scss_var: "$surface-alt" + value: "#EDE8E2" + role: 辅助底色 + + - scss_var: "$wechat" + value: "#07C160" + role: 微信绿 + +typography: + - token: --tk-font-display + value: "72px" + note: 大屏展示 + elder: "80px" + + - token: --tk-font-hero + value: "48px" + note: 启动页标题 + elder: "56px" + + - token: --tk-font-h1 + value: "28px" + note: 页面标题 serif bold + elder: "32px" + + - token: --tk-font-h2 + value: "22px" + note: 副标题、用户名 serif bold + elder: "25px" + + - token: --tk-font-body-lg + value: "18px" + note: 按钮文字、section 标题 fontWeight:600 + elder: "22px" + + - token: --tk-font-body + value: "16px" + note: 正文、输入框、icon 文字(最常用 UI 字号) + elder: "22px" + + - token: --tk-font-body-sm + value: "14px" + note: 副文本、描述 + elder: "19px" + + - token: --tk-font-num + value: "30px" + note: 数值 serif bold + elder: "34px" + + - token: --tk-font-num-lg + value: "34px" + note: 大数值 + elder: "40px" + + - token: --tk-font-cap + value: "13px" + note: 说明文字(第一高频字号) + elder: "18px" + + - token: --tk-font-nav + value: "18px" + note: 导航栏标题 serif bold + elder: "22px" + + - token: --tk-font-micro + value: "11px" + note: 角标、tag + elder: "17px" + +structure: + - token: --tk-line-height + value: "1.5" + elder: "1.7" + +spacing: + - token: --tk-gap-2xs + value: "4px" + scss_var: "$sp-2xs" + elder: "6px" + + - token: --tk-gap-xs + value: "8px" + scss_var: "$sp-xs" + elder: "12px" + + - token: --tk-gap-sm + value: "12px" + scss_var: "$sp-sm" + elder: "16px" + + - token: --tk-gap-md + value: "16px" + scss_var: "$sp-md" + elder: "20px" + + - token: --tk-section-gap + value: "20px" + scss_var: "$sp-section" + elder: "28px" + + - token: --tk-gap-lg + value: "24px" + scss_var: "$sp-lg" + elder: "32px" + + - token: --tk-gap-xl + value: "32px" + scss_var: "$sp-xl" + elder: "40px" + + - token: --tk-gap-2xl + value: "48px" + scss_var: "$sp-2xl" + elder: "56px" + + - token: --tk-page-padding + value: "20px" + elder: "28px" + + - token: --tk-card-padding + value: "20px" + elder: "28px" + + - token: --tk-card-padding-sm + value: "16px" + elder: "20px" + + - token: --tk-card-padding-lg + value: "28px" + elder: "36px" + +radius: + - token: --tk-card-radius + value: "16px" + scss_var: "$r" + elder: "20px" + +radius_unmapped: + - scss_var: "$r-sm" + value: "12px" + note: "原型 T.rSm 映射目标" + - scss_var: "$r-xs" + value: "8px" + note: "原型 T.rXs 映射目标" + - scss_var: "$r-lg" + value: "20px" + - scss_var: "$r-pill" + value: "999px" + +sizing: + - token: --tk-touch-min + value: "48px" + role: 最小触控区 + elder: "56px" + + - token: --tk-btn-primary-h + value: "52px" + role: 主按钮高度 + elder: "60px" + + - token: --tk-input-height + value: "56px" + role: 输入框高度 + elder: "64px" + + - token: --tk-tabbar-space + value: "100px" + role: TabBar 底部安全区 + elder: "120px" + +feedback: + - token: --tk-touch-feedback-opacity + value: "0.85" + role: 触控反馈透明度 + elder: "0.8" + +tag: + - token: --tk-tag-font-size + value: "11px" + elder: "13px" + + - token: --tk-tag-padding-v + value: "3px" + elder: "5px" + + - token: --tk-tag-padding-h + value: "8px" + elder: "12px" + +shadow_unmapped: + # tokens.scss 中的 --tk-shadow-btn/tab 是复合值(含偏移+模糊+颜色) + # 以下为 variables.scss 中的其他阴影,未声明为 CSS Token + - scss_var: "$shadow-sm" + value: "0 1px 4px rgba(45, 42, 38, 0.06)" + role: 小阴影 + + - scss_var: "$shadow-md" + value: "0 2px 12px rgba(45, 42, 38, 0.10)" + role: 中阴影 + + - scss_var: "$shadow-lg" + value: "0 8px 32px rgba(45, 42, 38, 0.15)" + role: 大阴影 + +# ============================================================================ +# 原型 Key → Token 映射(aliases) +# 用于设计移交时自动匹配原型属性到实际 Token +# ============================================================================ +aliases: + prototype_keys: + T.pri: + token: --tk-pri + status: exact_match + + T.priL: + token: --tk-pri-l + status: exact_match + + T.priD: + token: --tk-pri-d + status: exact_match + + T.bg: + token: null + nearest: --tk-card-bg + scss_var: "$bg" + value: "#F5F0EB" + status: unmatched + note: "原型页面背景色,tokens.scss 未声明为 CSS 变量,直接用 $bg SCSS 变量" + + T.card: + token: --tk-card-bg + status: exact_match + + T.surface: + token: --tk-card-bg + status: approximate + note: "原型中 surface ≈ 卡片白底" + + T.tx: + token: null + nearest: --tk-text-secondary + scss_var: "$tx" + value: "#2D2A26" + status: unmatched + note: "主文字色,tokens.scss 未声明为 CSS 变量,直接用 $tx SCSS 变量" + + T.tx2: + token: null + nearest: --tk-text-secondary + scss_var: "$tx2" + value: "#5A554F" + status: unmatched + note: "次文字色,tokens.scss 未声明,elder-mode 下 --tk-text-secondary 覆盖为此值" + + T.tx3: + token: --tk-text-secondary + scss_var: "$tx3" + value: "#78716C" + status: exact_match + + T.bd: + token: null + scss_var: "$bd" + value: "#E8E2DC" + status: unmatched + note: "边框色(不是圆角),tokens.scss 未声明为 CSS 变量" + + T.r: + token: --tk-card-radius + scss_var: "$r" + value: "16px" + status: exact_match + + T.rSm: + token: null + scss_var: "$r-sm" + value: "12px" + status: unmatched + note: "tokens.scss 未声明,需添加 --tk-radius-sm 或直接用 $r-sm SCSS 变量" + + T.rXs: + token: null + scss_var: "$r-xs" + value: "8px" + status: unmatched + note: "tokens.scss 未声明,需添加 --tk-radius-xs 或直接用 $r-xs SCSS 变量" diff --git a/docs/design/mp-00-visitor/META.yml b/docs/design/mp-00-visitor/META.yml new file mode 100644 index 0000000..d0a4207 --- /dev/null +++ b/docs/design/mp-00-visitor/META.yml @@ -0,0 +1,15 @@ +prototype: mp-00-visitor.html +source: docs/design/mp-00-visitor.html +generated_at: "2026-05-18T00:07:00+08:00" +tokens: + matched: 20 + unmatched: 2 + confirmed: 19 + pending: 14 + approximate: 1 +components: + total: 7 + mapped: 0 + new: 0 +interactions: 5 +screens: 5 diff --git a/docs/design/mp-00-visitor/screenshots/guest-profile.png b/docs/design/mp-00-visitor/screenshots/guest-profile.png new file mode 100644 index 0000000..8dd94a7 Binary files /dev/null and b/docs/design/mp-00-visitor/screenshots/guest-profile.png differ diff --git a/docs/design/mp-00-visitor/screenshots/guesthome-slide-1.png b/docs/design/mp-00-visitor/screenshots/guesthome-slide-1.png new file mode 100644 index 0000000..49c9f3d Binary files /dev/null and b/docs/design/mp-00-visitor/screenshots/guesthome-slide-1.png differ diff --git a/docs/design/mp-00-visitor/screenshots/guesthome-slide-2.png b/docs/design/mp-00-visitor/screenshots/guesthome-slide-2.png new file mode 100644 index 0000000..dc4b47a Binary files /dev/null and b/docs/design/mp-00-visitor/screenshots/guesthome-slide-2.png differ diff --git a/docs/design/mp-00-visitor/screenshots/guesthome-slide-3.png b/docs/design/mp-00-visitor/screenshots/guesthome-slide-3.png new file mode 100644 index 0000000..664bfd4 Binary files /dev/null and b/docs/design/mp-00-visitor/screenshots/guesthome-slide-3.png differ diff --git a/docs/design/mp-00-visitor/screenshots/guesthome.png b/docs/design/mp-00-visitor/screenshots/guesthome.png new file mode 100644 index 0000000..0e25af0 Binary files /dev/null and b/docs/design/mp-00-visitor/screenshots/guesthome.png differ diff --git a/docs/design/mp-00-visitor/tokens.json b/docs/design/mp-00-visitor/tokens.json new file mode 100644 index 0000000..eb51139 --- /dev/null +++ b/docs/design/mp-00-visitor/tokens.json @@ -0,0 +1,291 @@ +{ + "source": null, + "matched": { + "T.pri": { + "method": "alias", + "confidence": "confirmed", + "token": "--tk-pri", + "scssVar": null, + "prototypeValue": "#C4623A", + "tokenValue": "#C4623A" + }, + "T.priL": { + "method": "alias", + "confidence": "confirmed", + "token": "--tk-pri-l", + "scssVar": null, + "prototypeValue": "#F0DDD4", + "tokenValue": "#F0DDD4" + }, + "T.priD": { + "method": "alias", + "confidence": "confirmed", + "token": "--tk-pri-d", + "scssVar": null, + "prototypeValue": "#8B3E1F", + "tokenValue": "#8B3E1F" + }, + "T.bg": { + "method": "alias", + "confidence": "pending", + "token": null, + "scssVar": "$bg", + "tokenValue": "#F5F0EB", + "note": "原型页面背景色,tokens.scss 未声明为 CSS 变量,直接用 $bg SCSS 变量", + "prototypeValue": "#F5F0EB" + }, + "T.card": { + "method": "alias", + "confidence": "confirmed", + "token": "--tk-card-bg", + "scssVar": null, + "prototypeValue": "#FFFFFF", + "tokenValue": "#FFFFFF" + }, + "T.surface": { + "method": "alias", + "confidence": "approximate", + "token": "--tk-card-bg", + "scssVar": null, + "note": "原型中 surface ≈ 卡片白底", + "prototypeValue": "#EDE8E2", + "tokenValue": "#FFFFFF" + }, + "T.tx": { + "method": "alias", + "confidence": "pending", + "token": null, + "scssVar": "$tx", + "tokenValue": "#2D2A26", + "note": "主文字色,tokens.scss 未声明为 CSS 变量,直接用 $tx SCSS 变量", + "prototypeValue": "#2D2A26" + }, + "T.tx2": { + "method": "alias", + "confidence": "pending", + "token": null, + "scssVar": "$tx2", + "tokenValue": "#5A554F", + "note": "次文字色,tokens.scss 未声明,elder-mode 下 --tk-text-secondary 覆盖为此值", + "prototypeValue": "#5A554F" + }, + "T.tx3": { + "method": "alias", + "confidence": "confirmed", + "token": "--tk-text-secondary", + "scssVar": "$tx3", + "prototypeValue": "#78716C", + "tokenValue": "#78716C" + }, + "T.bd": { + "method": "alias", + "confidence": "pending", + "token": null, + "scssVar": "$bd", + "tokenValue": "#E8E2DC", + "note": "边框色(不是圆角),tokens.scss 未声明为 CSS 变量", + "prototypeValue": "#E8E2DC" + }, + "T.bdL": { + "token": null, + "scssVar": "$bd-l", + "prototypeValue": "#F0EBE5", + "tokenValue": "#F0EBE5", + "method": "value_exact", + "confidence": "pending", + "role": "浅边框色", + "note": "匹配到 SCSS 变量 $bd-l,但无对应 CSS Token" + }, + "T.acc": { + "token": null, + "scssVar": "$acc", + "prototypeValue": "#5B7A5E", + "tokenValue": "#5B7A5E", + "method": "value_exact", + "confidence": "pending", + "role": "鼠尾草绿/成功色", + "note": "匹配到 SCSS 变量 $acc,但无对应 CSS Token" + }, + "T.accL": { + "token": null, + "scssVar": "$acc-l", + "prototypeValue": "#E8F0E8", + "tokenValue": "#E8F0E8", + "method": "value_exact", + "confidence": "pending", + "role": "成功浅色", + "note": "匹配到 SCSS 变量 $acc-l,但无对应 CSS Token" + }, + "T.wrn": { + "token": null, + "scssVar": "$wrn", + "prototypeValue": "#C4873A", + "tokenValue": "#C4873A", + "method": "value_exact", + "confidence": "pending", + "role": "警告色/暖琥珀", + "note": "匹配到 SCSS 变量 $wrn,但无对应 CSS Token" + }, + "T.wrnL": { + "token": null, + "scssVar": "$wrn-l", + "prototypeValue": "#FFF3E0", + "tokenValue": "#FFF3E0", + "method": "value_exact", + "confidence": "pending", + "role": "警告浅色", + "note": "匹配到 SCSS 变量 $wrn-l,但无对应 CSS Token" + }, + "T.dan": { + "token": null, + "scssVar": "$dan", + "prototypeValue": "#B54A4A", + "tokenValue": "#B54A4A", + "method": "value_exact", + "confidence": "pending", + "role": "危险色/柔红", + "note": "匹配到 SCSS 变量 $dan,但无对应 CSS Token" + }, + "T.danL": { + "token": null, + "scssVar": "$dan-l", + "prototypeValue": "#FDEAEA", + "tokenValue": "#FDEAEA", + "method": "value_exact", + "confidence": "pending", + "role": "危险浅色", + "note": "匹配到 SCSS 变量 $dan-l,但无对应 CSS Token" + }, + "T.r": { + "method": "alias", + "confidence": "confirmed", + "token": "--tk-card-radius", + "scssVar": "$r", + "prototypeValue": "16", + "tokenValue": "16px" + }, + "T.rSm": { + "method": "alias", + "confidence": "pending", + "token": null, + "scssVar": "$r-sm", + "tokenValue": "12px", + "note": "tokens.scss 未声明,需添加 --tk-radius-sm 或直接用 $r-sm SCSS 变量", + "prototypeValue": "12" + }, + "T.rXs": { + "method": "alias", + "confidence": "pending", + "token": null, + "scssVar": "$r-xs", + "tokenValue": "8px", + "note": "tokens.scss 未声明,需添加 --tk-radius-xs 或直接用 $r-xs SCSS 变量", + "prototypeValue": "8" + } + }, + "unmatched": [ + "T.serif", + "T.sans" + ], + "inlineTokenMap": { + "fontSize:28": { + "token": "--tk-font-h1", + "tokenValue": "28px", + "confidence": "confirmed", + "method": "value_exact" + }, + "fontSize:22": { + "token": "--tk-font-h2", + "tokenValue": "22px", + "confidence": "confirmed", + "method": "value_exact" + }, + "fontSize:18": { + "token": "--tk-font-body-lg", + "tokenValue": "18px", + "confidence": "confirmed", + "method": "value_exact" + }, + "fontSize:16": { + "token": "--tk-font-body", + "tokenValue": "16px", + "confidence": "confirmed", + "method": "value_exact" + }, + "fontSize:14": { + "token": "--tk-font-body-sm", + "tokenValue": "14px", + "confidence": "confirmed", + "method": "value_exact" + }, + "fontSize:13": { + "token": "--tk-font-cap", + "tokenValue": "13px", + "confidence": "confirmed", + "method": "value_exact" + }, + "fontSize:11": { + "token": "--tk-font-micro", + "tokenValue": "11px", + "confidence": "confirmed", + "method": "value_exact" + }, + "padding:20": { + "token": "--tk-section-gap", + "scssVar": "$sp-section", + "tokenValue": "20px", + "confidence": "confirmed", + "method": "value_exact" + }, + "padding:16": { + "token": "--tk-gap-md", + "scssVar": "$sp-md", + "tokenValue": "16px", + "confidence": "confirmed", + "method": "value_exact" + }, + "padding:12": { + "token": "--tk-gap-sm", + "scssVar": "$sp-sm", + "tokenValue": "12px", + "confidence": "confirmed", + "method": "value_exact" + }, + "borderRadius:20": { + "token": null, + "scssVar": "$r-lg", + "tokenValue": "20px", + "confidence": "pending", + "method": "value_exact", + "note": "匹配到 SCSS 变量 $r-lg,但无对应 CSS Token" + }, + "gap:16": { + "token": "--tk-gap-md", + "scssVar": "$sp-md", + "tokenValue": "16px", + "confidence": "confirmed", + "method": "value_exact" + }, + "lineHeight:1.5": { + "token": "--tk-line-height", + "tokenValue": "1.5", + "confidence": "confirmed", + "method": "value_exact" + }, + "height:52": { + "token": "--tk-btn-primary-h", + "tokenValue": "52px", + "confidence": "confirmed", + "method": "value_exact" + } + }, + "summary": { + "total": 102, + "aliasTokens": 22, + "inlineValues": 80, + "confirmed": 19, + "pending": 14, + "approximate": 1, + "unmatched": 2 + } +}