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/elder-mode.scss

@@ -1,5 +1,5 @@
 // 关怀模式 CSS 覆写（仅保留结构性调整）
-// 字号 / 颜色由 tokens.scss 的 .elder-mode 块自动级联处理
+// 字号 / 颜色 / 间距由 tokens.scss 的 .elder-mode 块自动级联处理
 // 此文件仅保留无法通过 CSS 变量表达的布局覆写
 
 .elder-mode {
@@ -31,89 +31,86 @@
   // ─── 体征网格：2 列 → 1 列（解决溢出核心改动）───
   .vitals-grid {
     grid-template-columns: 1fr;
+    gap: var(--tk-gap-md);
   }
 
-  // ─── 间距放大（增加呼吸空间）───
-  .vitals-grid {
-    gap: 14px;
-  }
-
-  .checkin-card {
-    padding: 28px;
-  }
-
-  .reminder-card {
-    padding: 24px;
-  }
-
+  // ─── 页面间距放大 ───
   .home-page,
   .guest-page,
   .health-page,
   .messages-page,
   .consultation-body {
-    padding: 28px 32px 120px;
+    padding: var(--tk-card-padding-lg) var(--tk-gap-xl) var(--tk-tabbar-space);
   }
 
   .profile-page {
-    padding: 28px 32px 120px;
+    padding: var(--tk-card-padding-lg) var(--tk-gap-xl) var(--tk-tabbar-space);
   }
 
   .menu-item {
-    padding: 18px 22px;
+    padding: var(--tk-card-padding) var(--tk-gap-xl);
   }
 
   .session-list,
   .msg-list {
-    gap: 12px;
+    gap: var(--tk-gap-sm);
+  }
+
+  .checkin-card {
+    padding: var(--tk-card-padding-lg);
+  }
+
+  .reminder-card {
+    padding: var(--tk-card-padding);
   }
 
   .session-card,
   .consult-card,
   .notify-card {
-    padding: 20px;
+    padding: var(--tk-section-gap);
   }
 
   .vital-tabs,
   .period-group {
-    gap: 10px;
+    gap: var(--tk-gap-xs);
   }
 
   // ─── 组件布局调整 ───
 
   // EmptyState
   .empty-state-action {
-    padding: 20px 56px;
+    padding: var(--tk-section-gap) 56px;
   }
 
   // ErrorState
   .error-state-retry {
-    padding: 20px 56px;
+    padding: var(--tk-section-gap) 56px;
   }
 
   // Loading
   .loading-spinner {
-    width: 56px;
-    height: 56px;
+    width: var(--tk-btn-primary-h);
+    height: var(--tk-btn-primary-h);
   }
 
   // StepIndicator
   .step-dot {
-    width: 56px;
-    height: 56px;
+    width: var(--tk-btn-primary-h);
+    height: var(--tk-btn-primary-h);
   }
 
   .step-line {
-    height: 4px;
-    top: 28px;
+    height: var(--tk-gap-2xs);
+    top: calc(var(--tk-btn-primary-h) / 2);
   }
 
   // ─── 登录页布局调整 ───
   .login-page {
-    padding: 80px 48px 60px;
+    padding: calc(var(--tk-gap-2xl) * 2) var(--tk-gap-2xl) var(--tk-gap-2xl);
   }
 
   .login-brand {
-    margin-bottom: 56px;
+    margin-bottom: var(--tk-gap-2xl);
   }
 
   .login-logo {
@@ -122,6 +119,6 @@
   }
 
   .guest-login-btn {
-    height: 64px;
+    height: var(--tk-input-height);
   }
 }

apps/miniprogram/src/styles/mixins.scss

@@ -2,10 +2,10 @@
 
 @mixin card {
   background: $card;
-  border-radius: $r;
+  border-radius: var(--tk-card-radius);
   box-shadow: $shadow-md;
-  padding: 28px;
-  margin: 0 24px 24px;
+  padding: var(--tk-card-padding);
+  margin: 0 var(--tk-page-padding) var(--tk-gap-md);
 }
 
 @mixin flex-center {
@@ -29,13 +29,13 @@
   font-size: var(--tk-font-h1);
   font-weight: bold;
   color: $tx;
-  margin-bottom: 20px;
+  margin-bottom: var(--tk-section-gap);
   display: block;
 }
 
 @mixin tag($bg, $color) {
   display: inline-block;
-  padding: 4px 12px;
+  padding: var(--tk-tag-padding-v) var(--tk-tag-padding-h);
   border-radius: $r-sm;
   font-size: var(--tk-font-body);
   font-weight: 500;
@@ -52,33 +52,40 @@
 }
 
 @mixin btn-primary {
-  height: $btn-primary-h;
-  border-radius: $r;
-  background: $pri;
+  height: var(--tk-btn-primary-h);
+  border-radius: var(--tk-card-radius);
+  background: var(--tk-pri);
   color: $white;
   font-size: var(--tk-font-body-lg);
   font-weight: 600;
   border: none;
   width: 100%;
+  box-shadow: var(--tk-shadow-btn);
   @include touch-target;
 
   &:active {
-    opacity: 0.85;
+    opacity: var(--tk-touch-feedback-opacity);
   }
 }
 
 @mixin btn-outline {
-  height: $btn-primary-h;
-  border-radius: $r;
+  height: var(--tk-btn-primary-h);
+  border-radius: var(--tk-card-radius);
   background: transparent;
-  color: $pri;
+  color: var(--tk-pri);
   font-size: var(--tk-font-body-lg);
   font-weight: 600;
-  border: 2px solid $pri;
+  border: 2px solid var(--tk-pri);
   width: 100%;
   @include touch-target;
 
   &:active {
-    background: $pri-l;
+    opacity: var(--tk-touch-feedback-opacity);
+  }
+}
+
+@mixin touch-feedback {
+  &:active {
+    opacity: var(--tk-touch-feedback-opacity);
   }
 }

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};
 }

apps/miniprogram/src/styles/variables.scss

@@ -24,7 +24,15 @@ $wrn: #C4873A;             // 警告 (warm amber)
 $wrn-l: #FFF3E0;           // 警告浅
 $wrn-d: #8B6F4E;           // 警告深（渐变中间色）
 
-// ─── 圆角 ───
+// ─── 医生端色彩（靛蓝系）───
+$doc-pri: #3A6B8C;         // 医生端主色
+$doc-pri-l: #D4E5F0;       // 医生端浅色
+$doc-pri-d: #2A4F6A;       // 医生端深色
+
+// ─── 功能色 ───
+$wechat: #07C160;           // 微信绿
+
+// ─── 圆角（对齐原型 T.r:16, T.rSm:12, T.rXs:8）───
 $r: 16px;
 $r-sm: 12px;
 $r-xs: 8px;
@@ -32,13 +40,31 @@ $r-lg: 20px;
 $r-pill: 999px;
 
 // ─── 老年友好触控参数 ───
-$touch-min: 48px;        // 最小触控区域
-$btn-primary-h: 56px;    // 主按钮高度
-$menu-item-h: 64px;      // 菜单项高度
-$tab-h: 56px;            // Tab 切换高度
-$font-min: 22px;         // 最小字号
+$touch-min: 48px;
+$btn-primary-h: 52px;      // 对齐原型 height:52
+$menu-item-h: 64px;
+$tab-h: 56px;
+$font-min: 22px;
+$input-h: 56px;
 
-// ─── 阴影 ───
-$shadow-sm: 0 1px 4px rgba(45, 42, 38, 0.04);
-$shadow-md: 0 2px 12px rgba(45, 42, 38, 0.08);
-$shadow-lg: 0 8px 32px rgba(45, 42, 38, 0.12);
+// ─── 间距阶梯（SCSS 编译时变量，与 CSS Token 对应）───
+$sp-2xs: 4px;
+$sp-xs: 8px;
+$sp-sm: 12px;
+$sp-md: 16px;
+$sp-section: 20px;
+$sp-lg: 24px;
+$sp-xl: 32px;
+$sp-2xl: 48px;
+
+// ─── TabBar 底部安全区 ───
+$tabbar-space: 100px;
+
+// ─── 阴影（原型 boxShadow 参数，略增可见度）───
+$shadow-sm: 0 1px 4px rgba(45, 42, 38, 0.06);
+$shadow-md: 0 2px 12px rgba(45, 42, 38, 0.10);
+$shadow-lg: 0 8px 32px rgba(45, 42, 38, 0.15);
+$shadow-btn: 0 4px 16px rgba(196, 98, 58, 0.3);    // 主按钮阴影
+$shadow-tab: 0 2px 8px rgba(196, 98, 58, 0.25);     // 选中Tab阴影
+$shadow-btn-doc: 0 4px 16px rgba(58, 107, 140, 0.3); // 医生端按钮阴影
+$shadow-tab-doc: 0 2px 8px rgba(58, 107, 140, 0.25); // 医生端Tab阴影