2c567bd772
Phase 0 基础设施:
- statusTag.ts: getStatusInlineStyle() 移除内联 borderRadius/padding/fontSize，仅返回 {background, color}
- 新增 SEVERITY_COLORS + getSeverityStyle() + getSeverityLabel() 统一告警严重程度样式
- variables.scss: 新增 9 个语义颜色别名 ($success/$danger/$warning/$info 等)
- mixins.scss: 新增 status-inline mixin 统一状态标签样式
- 7 个消费者页面添加 @include status-inline CSS 补偿
Phase 1 HIGH 修复 (4 页面):
- P46 随访管理: 移除 getTypeStyle() 硬编码 fontSize，替换文字 Loading 为组件
- P45 咨询详情医护: 添加 Loading/ErrorState 三态模板 + error ref
- P02 健康数据: 添加 loading ref + Loading 组件 + 错误 toast 提示
- P48 告警中心: 替换本地 SEVERITY_COLORS/SEVERITY_LABELS 为 statusTag.ts 导出
Phase 2 全局一致性:
- 2.1 触控补全: 17 页面为可点击元素添加 min-height: $touch-min
- 2.2 字号替换: 19 文件 31 处硬编码 px → Design Token CSS 变量
- 2.3 颜色替换: 18 文件 ~50 处硬编码十六进制 → SCSS 语义变量
- 2.4 elder-mode.scss: 新增 9 个选择器到触控放大清单
Phase 3 LOW 修复:
- 3.1 统一 Loading: 21 页面旧式文字加载 → <Loading> 组件
- 3.2 useElderClass: 8 页面补全长者模式 class 绑定
- 3.3 零散修复: 按钮 44px→48px，诊断记录添加 scroll-view 无限加载
同时新增 UniApp (Vue 3 + Vite) 小程序完整代码库 (146 文件)
52 lines
2.1 KiB
SCSS
52 lines
2.1 KiB
SCSS
// Design Token — CSS 自定义属性（校准后）
|
||
// 基于全量审计：600+ font-size 声明的频率分布
|
||
// 页面样式应引用 var(--tk-*) 而非硬编码 px 值
|
||
// 关怀模式通过 .elder-mode 覆盖 token 值自动生效
|
||
|
||
// ═══════════════════════════════════════
|
||
// 正常模式 Token
|
||
// ═══════════════════════════════════════
|
||
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; // 角标、标签
|
||
|
||
// ─── 结构 ───
|
||
--tk-line-height: 1.5;
|
||
--tk-touch-min: 48px;
|
||
--tk-btn-primary-h: 56px;
|
||
--tk-text-secondary: #78716C; // $tx3 — 关怀模式提升对比度
|
||
}
|
||
|
||
// ═══════════════════════════════════════
|
||
// 关怀模式 Token（非线性放大）
|
||
// 标题 ×1.15 / 正文 ×1.35 / 辅助 ×1.55
|
||
// ═══════════════════════════════════════
|
||
.elder-mode {
|
||
--tk-font-display: 80px;
|
||
--tk-font-hero: 56px;
|
||
--tk-font-h1: 30px;
|
||
--tk-font-h2: 28px;
|
||
--tk-font-body-lg: 34px;
|
||
--tk-font-body: 30px;
|
||
--tk-font-body-sm: 22px;
|
||
--tk-font-num: 34px;
|
||
--tk-font-num-lg: 40px;
|
||
--tk-font-cap: 18px;
|
||
--tk-font-micro: 17px;
|
||
|
||
--tk-line-height: 1.7;
|
||
--tk-touch-min: 56px;
|
||
--tk-btn-primary-h: 64px;
|
||
--tk-text-secondary: #5A554F; // $tx2 — 对比度提升
|
||
}
|