From 6c9f2cf1475192d409e987bfa1e202df167db923 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E9=9F=B5=E7=90=B4?= <757188142@qq.com> Date: Thu, 7 May 2026 11:46:23 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=9B=E4=B8=AA=E9=A2=84=E8=AD=A6?= =?UTF-8?q?=E5=8E=86=E5=8F=B2=E9=A1=B5=E9=9D=A2=E6=96=B0=E5=A2=9E=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E7=AD=9B=E9=80=89=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 预警记录标题右侧添加筛选按钮（日历图标） - 点击弹出底部弹窗，支持年份和月份的级联选择 - 月份支持"全部"选项，可同时筛选多个条件 - 选择后点击"确定"按钮过滤预警记录显示 - 弹窗采用底部滑出动画，确定按钮颜色与各页面主题色一致 - 涉及文件：heart-rate-alerts.html、blood-oxygen-alerts.html、temperature-alerts.html、stress-alerts.html Co-Authored-By: Claude Haiku 4.5 --- .../health-monitor/blood-oxygen-alerts.html | 275 +++++++++++++++++- employee-app/health-monitor/doc/CHANGELOG.md | 97 ++++++ .../health-monitor/heart-rate-alerts.html | 272 ++++++++++++++++- .../health-monitor/stress-alerts.html | 271 ++++++++++++++++- .../health-monitor/temperature-alerts.html | 271 ++++++++++++++++- 5 files changed, 1175 insertions(+), 11 deletions(-) diff --git a/employee-app/health-monitor/blood-oxygen-alerts.html b/employee-app/health-monitor/blood-oxygen-alerts.html index 0dd6bf7..c90ef8c 100644 --- a/employee-app/health-monitor/blood-oxygen-alerts.html +++ b/employee-app/health-monitor/blood-oxygen-alerts.html @@ -204,6 +204,165 @@ body { /* 底部安全区 */ .bottom-safe { height: 20px; flex-shrink: 0; } + +/* 筛选按钮 */ +.filter-btn { + display: flex; + align-items: center; + gap: 4px; + padding: 6px 12px; + border: 1px solid #ddd; + border-radius: 6px; + background: #fff; + font-size: 12px; + color: #666; + cursor: pointer; + transition: all 0.2s; +} +.filter-btn:active { + background: #f5f5f5; + border-color: #bbb; +} + +/* 时间筛选弹窗 */ +.time-filter-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: none; + z-index: 1000; +} +.time-filter-modal.active { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; +} + +.time-filter-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.4); +} + +.time-filter-panel { + position: relative; + width: 100%; + max-width: 390px; + background: #fff; + border-radius: 16px 16px 0 0; + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); + animation: slideUp 0.3s ease-out; +} + +@keyframes slideUp { + from { + transform: translateY(100%); + } + to { + transform: translateY(0); + } +} + +.time-filter-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + border-bottom: 1px solid #f0f0f0; + font-size: 16px; + font-weight: 600; + color: #1a1a1a; +} + +.time-filter-close { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: none; + background: none; + font-size: 20px; + color: #999; + cursor: pointer; +} + +.time-filter-content { + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.filter-section { + display: flex; + flex-direction: column; + gap: 8px; +} + +.filter-label { + font-size: 13px; + font-weight: 600; + color: #333; +} + +.filter-select { + padding: 10px 12px; + border: 1px solid #ddd; + border-radius: 8px; + font-size: 14px; + color: #333; + background: #fff; + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 10px center; + padding-right: 32px; +} + +.time-filter-footer { + display: flex; + gap: 12px; + padding: 16px; + border-top: 1px solid #f0f0f0; +} + +.filter-btn-cancel, +.filter-btn-confirm { + flex: 1; + padding: 12px; + border: none; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; +} + +.filter-btn-cancel { + background: #f5f5f5; + color: #666; +} + +.filter-btn-cancel:active { + background: #e8e8e8; +} + +.filter-btn-confirm { + background: #52c41a; + color: #fff; +} + +.filter-btn-confirm:active { + background: #3a9013; +} @@ -259,8 +418,8 @@ body { -
最近预警时间
-
暂无
+ +
无预警，请继续保持
@@ -277,8 +436,17 @@ body { - -
预警记录（共 1 条）
+ +
+
预警记录（共 1 条）
+ +
@@ -324,6 +492,105 @@ body {
+ +
+
+
+
+ 选择时间 + +
+ +
+ +
+ + +
+ + +
+ + +
+
+ +
+ + +
+
+
+ + + diff --git a/employee-app/health-monitor/doc/CHANGELOG.md b/employee-app/health-monitor/doc/CHANGELOG.md index 9608ac0..b2c5508 100644 --- a/employee-app/health-monitor/doc/CHANGELOG.md +++ b/employee-app/health-monitor/doc/CHANGELOG.md @@ -4,6 +4,23 @@ --- +## [2026-05-07] feat: 四个预警历史页面新增时间筛选功能 + +**涉及文件（4个修改）：** +- `heart-rate-alerts.html` — 预警记录标题右侧添加筛选按钮，点击弹出年月级联选择弹窗，支持按年份和月份筛选预警记录 +- `blood-oxygen-alerts.html` — 同步添加时间筛选功能 +- `temperature-alerts.html` — 同步添加时间筛选功能 +- `stress-alerts.html` — 同步添加时间筛选功能 + +**变更说明：** +- 预警记录标题区域新增"筛选"按钮（日历图标 + 文字），点击后弹出底部弹窗 +- 弹窗支持年份选择（2024-2026）和月份选择（1-12月），月份支持"全部"选项 +- 选择年月后点击"确定"按钮，预警列表根据选中时间过滤显示 +- 点击"取消"或弹窗外部可关闭弹窗 +- 弹窗采用底部滑出动画，确定按钮颜色与各页面主题色保持一致 + +--- + ## [2026-05-07] refactor: 统一四个预警历史页面布局结构 **涉及文件（4个修改）：** @@ -85,3 +102,83 @@ - 每个指标支持多时间维度数据展示（日/周/月/年） - 前 4 个指标配备预警历史页面，展示预警统计和详细记录 - 所有页面采用统一的设计规范和交互模式 + +**涉及文件（4个修改）：** +- `blood-oxygen-alerts.html` — 更新 stats-card 结构，添加 stats-card__recent-label 和 stats-card__recent-time，删除 stats-card__sub-label；更新 section-title 文本为"预警记录（共 1 条）" +- `temperature-alerts.html` — 完全重构为标准格式，采用与 heart-rate-alerts.html 相同的 stats-card 和 alert-card 结构，颜色主题使用黄色（#faad14） +- `stress-alerts.html` — 已符合标准格式（无需修改） +- `heart-rate-alerts.html` — 参考标准（无需修改） + +**变更说明：** +- 四个预警历史页面现采用统一的布局结构：stats-card（左侧统计数据 + 右侧图标和最近预警时间）+ alert-card（左侧等级圆点 + 右侧卡片内容） +- 各页面保持各自的颜色主题：心率红色（#ff7a8a）、血氧绿色（#52c41a）、体温黄色（#faad14）、压力橙色（#fa8c16） +- 统一的 CSS 类名和 DOM 结构便于后续维护和扩展 + +--- + +## [2026-04-30] refactor: 压缩四个详情页面整体布局高度 + +**涉及文件（4个修改）：** +- `heart-rate.html` — 减少主值字体大小（58px → 48px）、图表高度（258px → 160px）、卡片内边距（18px 12px → 14px 12px） +- `temperature.html` — 同步应用布局压缩 +- `blood-oxygen.html` — 同步应用布局压缩 +- `stress.html` — 同步应用布局压缩 + +**变更说明：** +- 所有详情页面现可在 844px 手机屏幕内完整显示，无需垂直滚动 +- 减少了 150+ 像素的垂直空间占用 + +--- + +## [2026-04-30] refactor: 详情页面最高/最低/平均改为一行三列显示 + +**涉及文件（4个修改）：** +- `heart-rate.html` — 将三个指标从垂直堆叠改为水平三列布局，使用 flex: 1 实现等宽分布 +- `temperature.html` — 同步应用三列布局 +- `blood-oxygen.html` — 同步应用三列布局 +- `stress.html` — 同步应用三列布局 + +**变更说明：** +- 指标卡片从竖向排列改为横向三列，每列包含标签、数值、单位和时间提示 +- 使用垂直分隔线（1px 灰色）分隔三列 +- 提高了空间利用效率 + +--- + +## [2026-04-27] refactor: 血氧和压力详情页现代化设计 + +**涉及文件（2个修改）：** +- `blood-oxygen.html` — 从旧的 hero-card 布局改为现代 top-panel 结构，新增 CSS 变量（--theme: #52c41a）、Tab 导航、图表、时间模式切换 +- `stress.html` — 从旧的 hero-card 布局改为现代 top-panel 结构，新增 CSS 变量（--theme: #faad14）、Tab 导航、图表、时间模式切换 + +**变更说明：** +- 采用与 temperature.html 相同的现代设计风格 +- 新增日/周/月/年四种时间维度的数据展示 +- 图表使用 SVG 绘制，支持动态数据切换 +- 保留各指标的特定说明文案（血氧正常范围、压力等级说明） + +--- + +## [2026-04-21] init: 健康监测模块初始化 + +**新增文件（10个）：** + +| 文件 | 说明 | +|------|------| +| `index.html` | 模块首页：四个监测指标入口 | +| `heart-rate.html` | 心率详情：日/周/月/年数据展示 + 预警历史入口 | +| `heart-rate-alerts.html` | 心率预警历史：预警统计 + 预警记录列表 | +| `blood-oxygen.html` | 血氧详情：日/周/月/年数据展示 + 预警历史入口 | +| `blood-oxygen-alerts.html` | 血氧预警历史：预警统计 + 预警记录列表 | +| `temperature.html` | 体温详情：日/周/月/年数据展示 + 预警历史入口 | +| `temperature-alerts.html` | 体温预警历史：预警统计 + 预警记录列表 | +| `stress.html` | 压力详情：日/周/月/年数据展示 + 预警历史入口 | +| `stress-alerts.html` | 压力预警历史：预警统计 + 预警记录列表 | +| `exercise.html` | 运动详情：日/周/月/年数据展示 | +| `sleep.html` | 睡眠详情：日/周/月/年数据展示 | + +**变更说明：** +- 健康监测模块包含 6 个主要监测指标（心率、血氧、体温、压力、运动、睡眠） +- 每个指标支持多时间维度数据展示（日/周/月/年） +- 前 4 个指标配备预警历史页面，展示预警统计和详细记录 +- 所有页面采用统一的设计规范和交互模式 diff --git a/employee-app/health-monitor/heart-rate-alerts.html b/employee-app/health-monitor/heart-rate-alerts.html index 7d726ec..5892ed8 100644 --- a/employee-app/health-monitor/heart-rate-alerts.html +++ b/employee-app/health-monitor/heart-rate-alerts.html @@ -203,7 +203,165 @@ body { /* 底部安全区 */ .bottom-safe { height: 20px; flex-shrink: 0; } - + +/* 筛选按钮 */ +.filter-btn { + display: flex; + align-items: center; + gap: 4px; + padding: 6px 12px; + border: 1px solid #ddd; + border-radius: 6px; + background: #fff; + font-size: 12px; + color: #666; + cursor: pointer; + transition: all 0.2s; +} +.filter-btn:active { + background: #f5f5f5; + border-color: #bbb; +} + +/* 时间筛选弹窗 */ +.time-filter-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: none; + z-index: 1000; +} +.time-filter-modal.active { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; +} + +.time-filter-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.4); +} + +.time-filter-panel { + position: relative; + width: 100%; + max-width: 390px; + background: #fff; + border-radius: 16px 16px 0 0; + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); + animation: slideUp 0.3s ease-out; +} + +@keyframes slideUp { + from { + transform: translateY(100%); + } + to { + transform: translateY(0); + } +} + +.time-filter-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + border-bottom: 1px solid #f0f0f0; + font-size: 16px; + font-weight: 600; + color: #1a1a1a; +} + +.time-filter-close { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: none; + background: none; + font-size: 20px; + color: #999; + cursor: pointer; +} + +.time-filter-content { + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.filter-section { + display: flex; + flex-direction: column; + gap: 8px; +} + +.filter-label { + font-size: 13px; + font-weight: 600; + color: #333; +} + +.filter-select { + padding: 10px 12px; + border: 1px solid #ddd; + border-radius: 8px; + font-size: 14px; + color: #333; + background: #fff; + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 10px center; + padding-right: 32px; +} + +.time-filter-footer { + display: flex; + gap: 12px; + padding: 16px; + border-top: 1px solid #f0f0f0; +} + +.filter-btn-cancel, +.filter-btn-confirm { + flex: 1; + padding: 12px; + border: none; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; +} + +.filter-btn-cancel { + background: #f5f5f5; + color: #666; +} + +.filter-btn-cancel:active { + background: #e8e8e8; +} + +.filter-btn-confirm { + background: #ff7a8a; + color: #fff; +} + +.filter-btn-confirm:active { + background: #ff5a7a; +}
@@ -262,8 +420,17 @@ body {
- -
预警记录（共 3 条）
+ +
+
预警记录（共 3 条）
+ +
@@ -385,6 +552,105 @@ body {
+ +
+
+
+
+ 选择时间 + +
+ +
+ +
+ + +
+ + +
+ + +
+
+ +
+ + +
+
+
+ + + diff --git a/employee-app/health-monitor/stress-alerts.html b/employee-app/health-monitor/stress-alerts.html index c557839..c029a51 100644 --- a/employee-app/health-monitor/stress-alerts.html +++ b/employee-app/health-monitor/stress-alerts.html @@ -208,6 +208,165 @@ body { /* 底部安全区 */ .bottom-safe { height: 20px; flex-shrink: 0; } + +/* 筛选按钮 */ +.filter-btn { + display: flex; + align-items: center; + gap: 4px; + padding: 6px 12px; + border: 1px solid #ddd; + border-radius: 6px; + background: #fff; + font-size: 12px; + color: #666; + cursor: pointer; + transition: all 0.2s; +} +.filter-btn:active { + background: #f5f5f5; + border-color: #bbb; +} + +/* 时间筛选弹窗 */ +.time-filter-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: none; + z-index: 1000; +} +.time-filter-modal.active { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; +} + +.time-filter-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.4); +} + +.time-filter-panel { + position: relative; + width: 100%; + max-width: 390px; + background: #fff; + border-radius: 16px 16px 0 0; + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); + animation: slideUp 0.3s ease-out; +} + +@keyframes slideUp { + from { + transform: translateY(100%); + } + to { + transform: translateY(0); + } +} + +.time-filter-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + border-bottom: 1px solid #f0f0f0; + font-size: 16px; + font-weight: 600; + color: #1a1a1a; +} + +.time-filter-close { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: none; + background: none; + font-size: 20px; + color: #999; + cursor: pointer; +} + +.time-filter-content { + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.filter-section { + display: flex; + flex-direction: column; + gap: 8px; +} + +.filter-label { + font-size: 13px; + font-weight: 600; + color: #333; +} + +.filter-select { + padding: 10px 12px; + border: 1px solid #ddd; + border-radius: 8px; + font-size: 14px; + color: #333; + background: #fff; + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 10px center; + padding-right: 32px; +} + +.time-filter-footer { + display: flex; + gap: 12px; + padding: 16px; + border-top: 1px solid #f0f0f0; +} + +.filter-btn-cancel, +.filter-btn-confirm { + flex: 1; + padding: 12px; + border: none; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; +} + +.filter-btn-cancel { + background: #f5f5f5; + color: #666; +} + +.filter-btn-cancel:active { + background: #e8e8e8; +} + +.filter-btn-confirm { + background: #fa8c16; + color: #fff; +} + +.filter-btn-confirm:active { + background: #d46b08; +} @@ -270,8 +429,17 @@ body { - -
预警记录（共 2 条）
+ +
+
预警记录（共 2 条）
+ +
@@ -357,6 +525,105 @@ body {
+ +
+
+
+
+ 选择时间 + +
+ +
+ +
+ + +
+ + +
+ + +
+
+ +
+ + +
+
+
+ + + diff --git a/employee-app/health-monitor/temperature-alerts.html b/employee-app/health-monitor/temperature-alerts.html index f09be52..187e600 100644 --- a/employee-app/health-monitor/temperature-alerts.html +++ b/employee-app/health-monitor/temperature-alerts.html @@ -203,6 +203,165 @@ body { /* 底部安全区 */ .bottom-safe { height: 20px; flex-shrink: 0; } + +/* 筛选按钮 */ +.filter-btn { + display: flex; + align-items: center; + gap: 4px; + padding: 6px 12px; + border: 1px solid #ddd; + border-radius: 6px; + background: #fff; + font-size: 12px; + color: #666; + cursor: pointer; + transition: all 0.2s; +} +.filter-btn:active { + background: #f5f5f5; + border-color: #bbb; +} + +/* 时间筛选弹窗 */ +.time-filter-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: none; + z-index: 1000; +} +.time-filter-modal.active { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; +} + +.time-filter-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.4); +} + +.time-filter-panel { + position: relative; + width: 100%; + max-width: 390px; + background: #fff; + border-radius: 16px 16px 0 0; + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); + animation: slideUp 0.3s ease-out; +} + +@keyframes slideUp { + from { + transform: translateY(100%); + } + to { + transform: translateY(0); + } +} + +.time-filter-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + border-bottom: 1px solid #f0f0f0; + font-size: 16px; + font-weight: 600; + color: #1a1a1a; +} + +.time-filter-close { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: none; + background: none; + font-size: 20px; + color: #999; + cursor: pointer; +} + +.time-filter-content { + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.filter-section { + display: flex; + flex-direction: column; + gap: 8px; +} + +.filter-label { + font-size: 13px; + font-weight: 600; + color: #333; +} + +.filter-select { + padding: 10px 12px; + border: 1px solid #ddd; + border-radius: 8px; + font-size: 14px; + color: #333; + background: #fff; + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 10px center; + padding-right: 32px; +} + +.time-filter-footer { + display: flex; + gap: 12px; + padding: 16px; + border-top: 1px solid #f0f0f0; +} + +.filter-btn-cancel, +.filter-btn-confirm { + flex: 1; + padding: 12px; + border: none; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; +} + +.filter-btn-cancel { + background: #f5f5f5; + color: #666; +} + +.filter-btn-cancel:active { + background: #e8e8e8; +} + +.filter-btn-confirm { + background: #faad14; + color: #fff; +} + +.filter-btn-confirm:active { + background: #d48806; +} @@ -262,8 +421,17 @@ body { - -
预警记录（共 1 条）
+ +
+
预警记录（共 1 条）
+ +
@@ -309,6 +477,105 @@ body {
+ +
+
+
+
+ 选择时间 + +
+ +
+ +
+ + +
+ + +
+ + +
+
+ +
+ + +
+
+
+ + +