refactor(mp): CSS 变量主题 + 登录页改造 — UI 优化 Phase 0-2

Phase 0: 建立 design token 体系
- tokens.scss 新增 --tk-pri/--tk-pri-l/--tk-pri-d/--tk-shadow-btn/--tk-shadow-tab
- .doctor-mode 覆盖为靛蓝色系，.elder-mode 非线性放大字号
- variables.scss 新增医生端色彩 + 阴影变量

Phase 1: 组件库 + 页面全局替换
- 75 个页面 SCSS $pri → var(--tk-pri) 全量替换
- 11 个新 UI 组件（PrimaryButton/TabFilter/FormInput/ProgressRing 等）
- 8 个现有组件 SCSS 更新
- 18 个医生端页面 useElderClass → useDoctorClass
- PageHeader 匹配原型 NavBar 规格

Phase 2: 登录页重写
- Logo: 方形+ → 圆形渐变 H
- 登录方式: 纯微信 → 账号密码 + 微信一键登录
- 新增 credentialLogin API + store action
- 字号/间距严格匹配原型 mp-01-login.html

apps/miniprogram/src/styles/tokens.scss

@@ -1,43 +1,60 @@
-// Design Token — CSS 自定义属性（校准后）
-// 基于全量审计：600+ font-size 声明的频率分布
+// Design Token — CSS 自定义属性
+// 基准参考：docs/design/mp-redesign-home.html 原型设计
 // 页面样式应引用 var(--tk-*) 而非硬编码 px 值
 // 关怀模式通过 .elder-mode 覆盖 token 值自动生效
 
 // ═══════════════════════════════════════
-// 正常模式 Token
+// 正常模式 Token（对齐原型 mp-redesign-home.html）
 // ═══════════════════════════════════════
 page {
-  // ─── 字号（11 级，覆盖 92.5% 场景）───
-  --tk-font-display: 72px;     // 大型装饰数值（积分余额、空状态图标）
-  --tk-font-hero: 48px;        // 装饰图标、空状态字符
-  --tk-font-h1: 26px;          // 页面/区块标题
-  --tk-font-h2: 24px;          // 副标题、日期、菜单组
-  --tk-font-body-lg: 28px;     // 大正文、按钮（页面默认字号）
-  --tk-font-body: 22px;        // 正文、标签
-  --tk-font-body-sm: 16px;     // 中等正文、列表项
-  --tk-font-num: 30px;         // 数值
-  --tk-font-num-lg: 34px;      // 大数值、统计
-  --tk-font-cap: 13px;         // 说明文字、时间戳
-  --tk-font-micro: 11px;       // 角标、标签
+  // ─── 色彩 Token（CSS 变量级联，医生端可覆盖）───
+  --tk-pri: #{$pri};
+  --tk-pri-l: #{$pri-l};
+  --tk-pri-d: #{$pri-d};
+  --tk-shadow-btn: #{$shadow-btn};
+  --tk-shadow-tab: #{$shadow-tab};
+
+  // ─── 字号（11 级）───
+  --tk-font-display: 72px;
+  --tk-font-hero: 48px;
+  --tk-font-h1: 26px;          // 页面标题（原型 fontSize:26 serif bold）
+  --tk-font-h2: 24px;          // 副标题
+  --tk-font-body-lg: 28px;     // 按钮大字、页面默认
+  --tk-font-body: 22px;        // 正文
+  --tk-font-body-sm: 16px;     // 列表项、副文本（原型 15-16px）
+  --tk-font-num: 30px;         // 数值（原型 fontSize:30 serif bold）
+  --tk-font-num-lg: 34px;      // 大数值
+  --tk-font-cap: 13px;         // 说明文字（原型 fontSize:13）
+  --tk-font-nav: 18px;         // 导航栏标题（原型 fontSize:18 serif bold）
+  --tk-font-micro: 11px;       // 角标（原型 fontSize:11）
 
   // ─── 结构 ───
   --tk-line-height: 1.5;
   --tk-touch-min: 48px;
-  --tk-btn-primary-h: 56px;
-  --tk-text-secondary: #78716C;  // $tx3 — 关怀模式提升对比度
+  --tk-btn-primary-h: 52px;    // 按钮高度（原型 height:52）
+  --tk-text-secondary: #78716C;
 
   // ─── 统一组件库结构化 Token ───
   --tk-card-bg: #FFFFFF;
-  --tk-card-padding: 24px;
-  --tk-card-radius: 16px;
-  --tk-gap-sm: 12px;
-  --tk-gap-md: 16px;
+  --tk-card-padding: 20px;     // 卡片内边距（原型 padding:16-20）
+  --tk-card-padding-sm: 16px;  // 紧凑卡片
+  --tk-card-padding-lg: 28px;  // 大卡片
+  --tk-card-radius: 16px;      // 卡片圆角（原型 borderRadius:16）
+  --tk-gap-2xs: 4px;
+  --tk-gap-xs: 8px;
+  --tk-gap-sm: 12px;           // 网格/列表项间距（原型 gap:10）
+  --tk-gap-md: 16px;           // 区块间距（原型 marginBottom:16）
+  --tk-section-gap: 20px;      // 大区块间距
   --tk-gap-lg: 24px;
-  --tk-page-padding: 24px;
+  --tk-gap-xl: 32px;
+  --tk-gap-2xl: 48px;
+  --tk-page-padding: 20px;     // 页面边距（原型 padding:20）
+  --tk-input-height: 56px;
+  --tk-tabbar-space: 100px;
   --tk-touch-feedback-opacity: 0.85;
-  --tk-tag-font-size: 12px;
-  --tk-tag-padding-v: 4px;
-  --tk-tag-padding-h: 12px;
+  --tk-tag-font-size: 11px;    // 标签字号（原型 fontSize:11）
+  --tk-tag-padding-v: 3px;     // 标签纵向（原型 padding:3px）
+  --tk-tag-padding-h: 8px;     // 标签横向（原型 padding:8px）
 }
 
 // ═══════════════════════════════════════
@@ -47,30 +64,52 @@ page {
 .elder-mode {
   --tk-font-display: 80px;
   --tk-font-hero: 56px;
-  --tk-font-h1: 30px;
-  --tk-font-h2: 28px;
+  --tk-font-h1: 30px;            // 26×1.15
+  --tk-font-h2: 28px;            // 24×1.15
   --tk-font-body-lg: 34px;
-  --tk-font-body: 30px;
-  --tk-font-body-sm: 22px;
+  --tk-font-body: 30px;          // 22×1.35
+  --tk-font-body-sm: 22px;       // 16×1.35
   --tk-font-num: 34px;
   --tk-font-num-lg: 40px;
-  --tk-font-cap: 18px;
-  --tk-font-micro: 17px;
+  --tk-font-cap: 18px;           // 13×1.4
+  --tk-font-nav: 22px;           // 18×1.2（标题轻度放大）
+  --tk-font-micro: 17px;         // 11×1.55
 
   --tk-line-height: 1.7;
   --tk-touch-min: 56px;
-  --tk-btn-primary-h: 64px;
-  --tk-text-secondary: #5A554F;  // $tx2 — 对比度提升
+  --tk-btn-primary-h: 60px;
+  --tk-text-secondary: #5A554F;
 
-  // ─── 统一组件库 — 关怀覆写 ───
-  --tk-card-padding: 32px;
+  --tk-card-padding: 28px;
+  --tk-card-padding-sm: 20px;
+  --tk-card-padding-lg: 36px;
   --tk-card-radius: 20px;
+  --tk-gap-2xs: 6px;
+  --tk-gap-xs: 12px;
   --tk-gap-sm: 16px;
   --tk-gap-md: 20px;
+  --tk-section-gap: 28px;
   --tk-gap-lg: 32px;
-  --tk-page-padding: 32px;
+  --tk-gap-xl: 40px;
+  --tk-gap-2xl: 56px;
+  --tk-page-padding: 28px;
+  --tk-input-height: 64px;
+  --tk-tabbar-space: 120px;
   --tk-touch-feedback-opacity: 0.8;
   --tk-tag-font-size: 13px;
-  --tk-tag-padding-v: 6px;
-  --tk-tag-padding-h: 16px;
+  --tk-tag-padding-v: 5px;
+  --tk-tag-padding-h: 12px;
+}
+
+// ═══════════════════════════════════════
+// 医生端 Token 覆盖（靛蓝色系）
+// 在医生端页面根容器添加 class="doctor-mode"
+// 所有引用 var(--tk-pri) 的组件自动变色
+// ═══════════════════════════════════════
+.doctor-mode {
+  --tk-pri: #{$doc-pri};
+  --tk-pri-l: #{$doc-pri-l};
+  --tk-pri-d: #{$doc-pri-d};
+  --tk-shadow-btn: #{$shadow-btn-doc};
+  --tk-shadow-tab: #{$shadow-tab-doc};
 }