feat(health): 健康卡片增加状态色(正常绿/异常红)+ 参考范围显示
This commit is contained in:
@@ -44,6 +44,12 @@
|
|||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
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 {
|
.health-card-label {
|
||||||
@@ -73,7 +79,15 @@
|
|||||||
|
|
||||||
.health-card-status {
|
.health-card-status {
|
||||||
font-size: 22px;
|
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 {
|
.health-actions {
|
||||||
|
|||||||
@@ -4,6 +4,13 @@ import { useHealthStore } from '../../stores/health';
|
|||||||
import Loading from '../../components/Loading';
|
import Loading from '../../components/Loading';
|
||||||
import './index.scss';
|
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() {
|
export default function Health() {
|
||||||
const { todaySummary, loading, refreshToday } = useHealthStore();
|
const { todaySummary, loading, refreshToday } = useHealthStore();
|
||||||
|
|
||||||
@@ -21,10 +28,10 @@ export default function Health() {
|
|||||||
|
|
||||||
const summary = todaySummary || {};
|
const summary = todaySummary || {};
|
||||||
const items = [
|
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.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 },
|
{ 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 },
|
{ 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 },
|
{ label: '体重', value: summary.weight ? `${summary.weight.value}` : '--', unit: 'kg', indicator: 'weight', status: summary.weight?.status, ref: summary.weight?.reference_range },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -40,16 +47,20 @@ export default function Health() {
|
|||||||
<Loading />
|
<Loading />
|
||||||
) : (
|
) : (
|
||||||
<View className='health-grid'>
|
<View className='health-grid'>
|
||||||
{items.map((item) => (
|
{items.map((item) => {
|
||||||
<View className='health-card' key={item.label} onClick={() => goToTrend(item.indicator)}>
|
const style = getStatusStyle(item.status);
|
||||||
<Text className='health-card-label'>{item.label}</Text>
|
return (
|
||||||
<Text className='health-card-value'>{item.value}</Text>
|
<View className={`health-card ${style.cls}`} key={item.label} onClick={() => goToTrend(item.indicator)}>
|
||||||
<View className='health-card-bottom'>
|
<Text className='health-card-label'>{item.label}</Text>
|
||||||
<Text className='health-card-unit'>{item.unit}</Text>
|
<Text className='health-card-value'>{item.value}</Text>
|
||||||
{item.status && <Text className='health-card-status'>{item.status}</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>
|
);
|
||||||
))}
|
})}
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@@ -57,6 +57,24 @@
|
|||||||
border-radius: $r-sm;
|
border-radius: $r-sm;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border-left: 4px solid transparent;
|
||||||
|
|
||||||
|
&.health-item-ok { border-left-color: $acc; }
|
||||||
|
&.health-item-warn { border-left-color: $dan; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-item-bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-status {
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
&.normal { color: $acc; }
|
||||||
|
&.high, &.low { color: $dan; font-weight: bold; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.health-label {
|
.health-label {
|
||||||
|
|||||||
@@ -31,12 +31,19 @@ export default function Index() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const healthItems = [
|
const healthItems = [
|
||||||
{ label: '血压', value: todaySummary?.blood_pressure ? `${todaySummary.blood_pressure.systolic}/${todaySummary.blood_pressure.diastolic}` : '--/--', unit: 'mmHg' },
|
{ label: '血压', value: todaySummary?.blood_pressure ? `${todaySummary.blood_pressure.systolic}/${todaySummary.blood_pressure.diastolic}` : '--/--', unit: 'mmHg', status: todaySummary?.blood_pressure?.status },
|
||||||
{ label: '心率', value: todaySummary?.heart_rate ? `${todaySummary.heart_rate.value}` : '--', unit: 'bpm' },
|
{ label: '心率', value: todaySummary?.heart_rate ? `${todaySummary.heart_rate.value}` : '--', unit: 'bpm', status: todaySummary?.heart_rate?.status },
|
||||||
{ label: '血糖', value: todaySummary?.blood_sugar ? `${todaySummary.blood_sugar.value}` : '--', unit: 'mmol/L' },
|
{ label: '血糖', value: todaySummary?.blood_sugar ? `${todaySummary.blood_sugar.value}` : '--', unit: 'mmol/L', status: todaySummary?.blood_sugar?.status },
|
||||||
{ label: '体重', value: todaySummary?.weight ? `${todaySummary.weight.value}` : '--', unit: 'kg' },
|
{ label: '体重', value: todaySummary?.weight ? `${todaySummary.weight.value}` : '--', unit: 'kg', status: todaySummary?.weight?.status },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const getStatusLabel = (status?: string) => {
|
||||||
|
if (status === 'high') return '偏高 ▲';
|
||||||
|
if (status === 'low') return '偏低 ▼';
|
||||||
|
if (status === 'normal') return '正常';
|
||||||
|
return '';
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className='index-page'>
|
<View className='index-page'>
|
||||||
<View className='greeting-bar'>
|
<View className='greeting-bar'>
|
||||||
@@ -54,10 +61,13 @@ export default function Index() {
|
|||||||
) : (
|
) : (
|
||||||
<View className='health-grid'>
|
<View className='health-grid'>
|
||||||
{healthItems.map((item) => (
|
{healthItems.map((item) => (
|
||||||
<View className='health-item' key={item.label}>
|
<View className={`health-item ${item.status === 'high' || item.status === 'low' ? 'health-item-warn' : item.status === 'normal' ? 'health-item-ok' : ''}`} key={item.label}>
|
||||||
<Text className='health-label'>{item.label}</Text>
|
<Text className='health-label'>{item.label}</Text>
|
||||||
<Text className='health-value'>{item.value}</Text>
|
<Text className='health-value'>{item.value}</Text>
|
||||||
<Text className='health-unit'>{item.unit}</Text>
|
<View className='health-item-bottom'>
|
||||||
|
<Text className='health-unit'>{item.unit}</Text>
|
||||||
|
{item.status && <Text className={`health-status ${item.status}`}>{getStatusLabel(item.status)}</Text>}
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
))}
|
))}
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
Reference in New Issue
Block a user