iven/hms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(health): 健康卡片增加状态色（正常绿/异常红）+ 参考范围显示

Browse Source
This commit is contained in:
iven
2026-04-24 12:35:13 +08:00
parent 8dc00fbd9e
commit fa21bbcadd
4 changed files with 73 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/miniprogram/src/pages/health/index.scss
View File

@@ -44,6 +44,12 @@
border-radius: $r;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border-left: 6px solid $bd;
transition: border-left-color 0.2s;
&.status-normal { border-left-color: $acc; }
&.status-high { border-left-color: $dan; }
&.status-low { border-left-color: $dan; }
}
.health-card-label {
@@ -73,7 +79,15 @@
.health-card-status {
font-size: 22px;
color: $acc;
&.status-normal { color: $acc; }
&.status-high, &.status-low { color: $dan; font-weight: bold; }
}
.health-card-ref {
font-size: 20px;
color: $tx3;
margin-top: 4px;
}
.health-actions {

37
apps/miniprogram/src/pages/health/index.tsx
View File

@@ -4,6 +4,13 @@ import { useHealthStore } from '../../stores/health';
import Loading from '../../components/Loading';
import './index.scss';
function getStatusStyle(status?: string) {
if (status === 'high') return { cls: 'status-high', label: '偏高 ▲' };
if (status === 'low') return { cls: 'status-low', label: '偏低 ▼' };
if (status === 'normal') return { cls: 'status-normal', label: '正常 ─' };
return { cls: '', label: '' };
}
export default function Health() {
const { todaySummary, loading, refreshToday } = useHealthStore();
@@ -21,10 +28,10 @@ export default function Health() {
const summary = todaySummary || {};
const items = [
{ label: '血压', value: summary.blood_pressure ? `${summary.blood_pressure.systolic}/${summary.blood_pressure.diastolic}` : '--/--', unit: 'mmHg', indicator: 'blood_pressure_systolic', status: summary.blood_pressure?.status },
{ label: '心率', value: summary.heart_rate ? `${summary.heart_rate.value}` : '--', unit: 'bpm', indicator: 'heart_rate', status: summary.heart_rate?.status },
{ label: '血糖', value: summary.blood_sugar ? `${summary.blood_sugar.value}` : '--', unit: 'mmol/L', indicator: 'blood_sugar_fasting', status: summary.blood_sugar?.status },
{ label: '体重', value: summary.weight ? `${summary.weight.value}` : '--', unit: 'kg', indicator: 'weight', status: summary.weight?.status },
{ label: '血压', value: summary.blood_pressure ? `${summary.blood_pressure.systolic}/${summary.blood_pressure.diastolic}` : '--/--', unit: 'mmHg', indicator: 'blood_pressure_systolic', status: summary.blood_pressure?.status, ref: summary.blood_pressure?.reference_range },
{ label: '心率', value: summary.heart_rate ? `${summary.heart_rate.value}` : '--', unit: 'bpm', indicator: 'heart_rate', status: summary.heart_rate?.status, ref: summary.heart_rate?.reference_range },
{ label: '血糖', value: summary.blood_sugar ? `${summary.blood_sugar.value}` : '--', unit: 'mmol/L', indicator: 'blood_sugar_fasting', status: summary.blood_sugar?.status, ref: summary.blood_sugar?.reference_range },
{ label: '体重', value: summary.weight ? `${summary.weight.value}` : '--', unit: 'kg', indicator: 'weight', status: summary.weight?.status, ref: summary.weight?.reference_range },
];
return (
@@ -40,16 +47,20 @@ export default function Health() {
<Loading />
) : (
<View className='health-grid'>
{items.map((item) => (
<View className='health-card' key={item.label} onClick={() => goToTrend(item.indicator)}>
<Text className='health-card-label'>{item.label}</Text>
<Text className='health-card-value'>{item.value}</Text>
<View className='health-card-bottom'>
<Text className='health-card-unit'>{item.unit}</Text>
{item.status && <Text className='health-card-status'>{item.status}</Text>}
{items.map((item) => {
const style = getStatusStyle(item.status);
return (
<View className={`health-card ${style.cls}`} key={item.label} onClick={() => goToTrend(item.indicator)}>
<Text className='health-card-label'>{item.label}</Text>
<Text className='health-card-value'>{item.value}</Text>
<View className='health-card-bottom'>
<Text className='health-card-unit'>{item.unit}</Text>
{style.label && <Text className={`health-card-status ${style.cls}`}>{style.label}</Text>}
</View>
{item.ref && <Text className='health-card-ref'>参考: {item.ref}</Text>}
</View>
</View>
))}
);
})}
</View>
)}