[阶段7] 前端重做：31 项指标全部露出，配色经色盲校验
原来仪表板只有 4 张卡片和 4 张图，31 项指标里绝大多数没有出口。 信息架构重组为 7 个页面（原 5 个）: - 今日 按活动 / 心率压力 / 睡眠呼吸三组展示 16 项指标 - 趋势 15 组指标可切换，5 档时间窗口（最长一年） - 睡眠 新增。分期堆叠图 + 夜间血氧/呼吸/压力 - 成就 新增。奖励徽章按年份分组、个人纪录、运动记录 - 建议 / 同步 / 设置 保持 配色（依据 dataviz 规范，用校验器实测而非目测）: - 采用验证过的分类色板并按既定 slot 顺序取色 —— 顺序本身就是 色盲安全机制，不是审美选择，因此只取不循环 - 浅色 worst adjacent CVD ΔE 9.1 / 常视觉 22.9 深色 worst adjacent CVD ΔE 8.4 / 常视觉 19.8，两档全部通过 - 浅色表面下 aqua 2.74:1、yellow 2.11:1 低于 3:1，按规范提供 "relief"：每张图都带表格视图，且图例始终与文字标签同现 - 深色不是自动反色，是同色相针对深色表面重新取阶并单独校验 - 状态色（good/warning/serious/critical）保留专用，绝不当作 第 N 个系列色；且始终图标 + 文字同现，不靠颜色单独表意 图表规范: - 单一 y 轴，绝不双轴；量纲不同的指标拆成不同图 - 2px 线宽、4px 圆角柱端锚定基线、堆叠段间 2px 表面色间隙、 悬停标记 2px 表面色描边 - 两系列以上必有图例，单系列不加（标题已经点明） - 折线 connectNulls，设备漏记的日子不把线打断 - 数值文字一律用文字色令牌，不染系列色 其他: - 主题切换（自动/浅色/深色），选择写入 localStorage 并标在 <html> - 导航改为顶部横向，移动端可横滑 - 表格、徽章、空状态等组件统一到设计令牌 验证方式: DOM 审计确认 2px 线宽、圆角为 A 4,4 弧、堆叠段 2px 间隙、图例数量与系列数匹配、两档主题令牌各自解析到校验过的色值。 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
ericwyuan
@@ -12,14 +12,87 @@ export interface AuthResponse {
|
||||
token: string;
|
||||
}
|
||||
|
||||
export interface SleepDetail {
|
||||
duration: number;
|
||||
quality: number | null;
|
||||
deepSeconds: number | null;
|
||||
lightSeconds: number | null;
|
||||
remSeconds: number | null;
|
||||
awakeSeconds: number | null;
|
||||
}
|
||||
|
||||
/** One day, with every metric the sync stores. All are nullable: a device
|
||||
* that does not record a metric leaves it null rather than zero. */
|
||||
export interface HealthDay {
|
||||
date: string;
|
||||
steps: number | null;
|
||||
heartRate: number | null;
|
||||
heartRateVariability: number | null;
|
||||
sleep: { duration: number; quality: number | null } | null;
|
||||
stress: number | null;
|
||||
stepGoal: number | null;
|
||||
distanceMeters: number | null;
|
||||
caloriesBurned: number | null;
|
||||
activeCalories: number | null;
|
||||
bmrCalories: number | null;
|
||||
floorsAscended: number | null;
|
||||
floorsDescended: number | null;
|
||||
intensityMinutes: number | null;
|
||||
sedentarySeconds: number | null;
|
||||
activeSeconds: number | null;
|
||||
heartRate: number | null;
|
||||
heartRateMax: number | null;
|
||||
heartRateMin: number | null;
|
||||
heartRateVariability: number | null;
|
||||
stress: number | null;
|
||||
stressMax: number | null;
|
||||
bodyBatteryHigh: number | null;
|
||||
bodyBatteryLow: number | null;
|
||||
bodyBatteryCharged: number | null;
|
||||
bodyBatteryDrained: number | null;
|
||||
spo2Avg: number | null;
|
||||
spo2Min: number | null;
|
||||
respirationAvg: number | null;
|
||||
respirationMin: number | null;
|
||||
respirationMax: number | null;
|
||||
sleepDuration: number | null;
|
||||
sleepQuality: number | null;
|
||||
sleepSpo2Avg: number | null;
|
||||
sleepRespirationAvg: number | null;
|
||||
sleepStressAvg: number | null;
|
||||
trainingReadiness: number | null;
|
||||
vo2max: number | null;
|
||||
enduranceScore: number | null;
|
||||
sleep: SleepDetail | null;
|
||||
}
|
||||
|
||||
export interface Badge {
|
||||
id: string;
|
||||
badge_key: string | null;
|
||||
name: string | null;
|
||||
category_id: number | null;
|
||||
difficulty_id: number | null;
|
||||
earned_date: string | null;
|
||||
earned_count: number | null;
|
||||
points: number | null;
|
||||
}
|
||||
|
||||
export interface PersonalRecord {
|
||||
id: string;
|
||||
type_id: number | null;
|
||||
activity_id: string | null;
|
||||
activity_name: string | null;
|
||||
activity_type: string | null;
|
||||
value: number | null;
|
||||
achieved_at: string | null;
|
||||
}
|
||||
|
||||
export interface Activity {
|
||||
id: string;
|
||||
activity_type: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
duration: number | null;
|
||||
distance: number | null;
|
||||
calories: number | null;
|
||||
heart_rate_average: number | null;
|
||||
heart_rate_max: number | null;
|
||||
}
|
||||
|
||||
export interface SyncStatus {
|
||||
@@ -266,13 +339,25 @@ class ApiClient {
|
||||
}
|
||||
|
||||
async getActivities(startDate?: string, endDate?: string) {
|
||||
const { data } = await this.client.get<any[]>(
|
||||
const { data } = await this.client.get<Activity[]>(
|
||||
'/health/activities',
|
||||
this.range(startDate, endDate)
|
||||
);
|
||||
return data;
|
||||
}
|
||||
|
||||
async getBadges() {
|
||||
const { data } = await this.client.get<Badge[]>('/health/badges');
|
||||
return data;
|
||||
}
|
||||
|
||||
async getPersonalRecords() {
|
||||
const { data } = await this.client.get<PersonalRecord[]>(
|
||||
'/health/personal-records'
|
||||
);
|
||||
return data;
|
||||
}
|
||||
|
||||
// --- analysis ---
|
||||
async getTrends(metricType: string, startDate?: string, endDate?: string) {
|
||||
const { data } = await this.client.get<TrendPoint[]>('/analysis/trends', {
|
||||
|
||||
Reference in New Issue
Block a user