From f120bc16f51464b1855fd0a191f7f411fd481c6e Mon Sep 17 00:00:00 2001 From: "liweiliang0905@gmail.com" Date: Tue, 27 Jan 2026 16:32:44 +0800 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E7=9D=A1=E7=9C=A0=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E6=B7=BB=E5=8A=A0=E5=81=A5=E5=BA=B7=E8=AF=84=E4=BC=B0?= =?UTF-8?q?=E4=B8=8E=E5=BD=B1=E5=93=8D=E5=8D=A1=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加睡眠健康评估卡片和睡眠影响卡片，显示近7天睡眠状况分析和健康提示。 同时修改睡眠时长趋势图，根据睡眠时长自动着色数据点。 Co-Authored-By: Claude Opus 4.5 --- src/vitals/web/app.py | 116 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) diff --git a/src/vitals/web/app.py b/src/vitals/web/app.py index b30d91a..25694de 100644 --- a/src/vitals/web/app.py +++ b/src/vitals/web/app.py @@ -6374,6 +6374,19 @@ def get_sleep_page_html() -> str: + +
+

睡眠健康评估

+
+
加载中...
+
+
+ + + +

近 30 天睡眠时长趋势

@@ -6504,6 +6517,9 @@ def get_sleep_page_html() -> str: backgroundColor: 'rgba(109, 40, 217, 0.2)', fill: true, tension: 0.3, + pointBackgroundColor: durationData.map(d => + d >= 7 && d <= 9 ? '#10B981' : d < 6 ? '#EF4444' : '#F59E0B' + ), }] }, options: { responsive: true, scales: { y: { beginAtZero: true } } } @@ -6572,6 +6588,105 @@ def get_sleep_page_html() -> str: } } + async function loadSleepAssessment() { + try { + const res = await fetch('/api/sleep/assessment'); + const data = await res.json(); + + // Render assessment card + const assessmentContainer = document.getElementById('sleep-assessment-content'); + const statusColor = data.status.color; + const avgPercent = Math.min(Math.max((data.avg_duration - 4) / 6 * 100, 0), 100); + + assessmentContainer.innerHTML = ` +
+
近 7 天平均睡眠
+
${data.avg_duration} 小时
+
+ +
+
+
+
+
+
+
+
+
▲
+
+
+
偏少 <5h
+
不足 5-6h
+
理想 7-9h
+
过多 >9h
+
+
+ +
+
+ ${data.status.label} + ${data.gap_hours > 0 ? `距理想还差 ${data.gap_hours} 小时/天` : ''} +
+
+ 本周: 理想 ${data.ideal_days_count}/${data.total_days} 天 +
+
+ `; + + // Render impact card + const impactCard = document.getElementById('sleep-impact-card'); + const impactContainer = document.getElementById('sleep-impact-content'); + + const isWarning = data.status.level === 'severe' || data.status.level === 'insufficient'; + const bgColor = isWarning ? 'rgba(127, 29, 29, 0.2)' : 'rgba(6, 95, 70, 0.2)'; + const borderColor = isWarning ? 'rgba(239, 68, 68, 0.3)' : 'rgba(16, 185, 129, 0.3)'; + const titleColor = isWarning ? '#F87171' : '#34D399'; + const title = isWarning ? '睡眠不足警告' : '睡眠状态良好'; + const intro = isWarning + ? `您近 7 天平均睡眠仅 ${data.avg_duration} 小时，低于健康标准 7 小时。长期睡眠不足会对身体造成以下影响：` + : `您近 7 天平均睡眠 ${data.avg_duration} 小时，处于健康范围内！充足睡眠为您带来以下益处：`; + + impactCard.style.display = 'block'; + impactCard.style.background = bgColor; + impactCard.style.border = `1px solid ${borderColor}`; + + const impacts = data.health_impacts; + let impactHtml = ` +

${title}

+

${intro}

+ +
+ `; + + Object.values(impacts).forEach(impact => { + impactHtml += ` +
+
${impact.title}
+
    + `; + impact.effects.forEach(e => { + impactHtml += `
  • ${e}
    • `; + }); + impactHtml += ` +
+
+ `; + }); + + impactHtml += ` +
+
+ ${data.suggestion} +
+ `; + + impactContainer.innerHTML = impactHtml; + } catch (e) { + console.error('加载睡眠评估失败:', e); + document.getElementById('sleep-assessment-content').innerHTML = '
加载失败
'; + } + } + async function deleteSleep(id) { if (!confirm('确定要删除这条睡眠记录吗？')) return; try { @@ -6615,6 +6730,7 @@ def get_sleep_page_html() -> str: document.getElementById('addSleepForm').addEventListener('submit', submitSleepForm); loadSleepData(); + loadSleepAssessment(); // 检查管理员状态 const user = JSON.parse(localStorage.getItem('user') || '{}');