feat(miniprogram): 老年友好版本全面重设计 — 5→4 Tab + 首页/健康/消息/我的重写
Some checks failed
CI / rust-check (push) Has been cancelled
CI / rust-test (push) Has been cancelled
CI / frontend-build (push) Has been cancelled
CI / security-audit (push) Has been cancelled

- TabBar 从 5 Tab 调整为 4 Tab(首页/健康/消息/我的)
- 首页重写为 5 区域布局:问候+进度环+体征2x2+待办+快捷操作
- 健康页重写:体征录入大输入框+趋势柱状图+BLE设备卡片
- 新建消息页:咨询对话+系统通知双 Tab
- 我的页调整:菜单高度64px+新增积分商城入口
- 设计系统更新:色彩对比度提升(WCAG AA)+触控参数+老年友好 mixin
- 新增 ProgressRing 组件(CSS conic-gradient 实现)
- 修复 diagnoses 页面 $suc-l 未定义变量
This commit is contained in:
iven
2026-04-30 22:51:05 +08:00
parent 813843e8cc
commit 50772878da
14 changed files with 1256 additions and 771 deletions

View File

@@ -0,0 +1,29 @@
@import '../styles/variables.scss';
.progress-ring {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.progress-ring-inner {
background: $card;
border-radius: 50%;
display: flex;
align-items: baseline;
justify-content: center;
}
.progress-ring-percent {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 22px;
font-weight: bold;
line-height: 1;
}
.progress-ring-unit {
font-size: 12px;
font-weight: 600;
line-height: 1;
}

View File

@@ -0,0 +1,40 @@
import { View, Text } from '@tarojs/components';
import './ProgressRing.scss';
interface ProgressRingProps {
percent: number;
size?: number;
strokeWidth?: number;
color?: string;
trackColor?: string;
}
export default function ProgressRing({
percent,
size = 72,
strokeWidth = 7,
color = '#C4623A',
trackColor = '#E8E2DC',
}: ProgressRingProps) {
const clamped = Math.max(0, Math.min(100, percent));
const innerSize = size - strokeWidth * 2;
return (
<View
className='progress-ring'
style={`width:${size}px;height:${size}px;background:conic-gradient(${color} ${clamped}%, ${trackColor} ${clamped}%);border-radius:50%;padding:${strokeWidth}px;`}
>
<View
className='progress-ring-inner'
style={`width:${innerSize}px;height:${innerSize}px;`}
>
<Text className='progress-ring-percent' style={`color:${color};`}>
{clamped}
</Text>
<Text className='progress-ring-unit' style={`color:${color};`}>
%
</Text>
</View>
</View>
);
}