commit 25d2419a507938ea2915cdcaf530776c67efe8e8 Author: DESKTOP-BLB5287\FP <18691763612@163.com> Date: Wed Apr 8 17:15:27 2026 +0800 h5原型文件 diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..ad024d8 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,11 @@ +# 项目约束 + +本项目所有工作必须严格遵守 `项目背景.md` 中定义的全部规范，包括： + +- 项目结构规范（三端目录划分、模块分目录） +- HTML 原型编写规范（独立文件粒度、自包含、视觉尺寸、设计令牌） +- 交互效果规范（导航跳转、Tab切换、交互注释标注） +- 命名规范（小写短横线文件名、BEM 类名） +- 墨刀导入兼容约束（禁止外部引用、简洁DOM、内联SVG） + +每次生成或修改 HTML 原型文件前，必须先确认符合上述约束。 diff --git a/employee-app/health-consult/assistant-chat.html b/employee-app/health-consult/assistant-chat.html new file mode 100644 index 0000000..5176712 --- /dev/null +++ b/employee-app/health-consult/assistant-chat.html @@ -0,0 +1,156 @@ + + + + + + 健康小助手 + + + +
+ +
+ 9:41 +
📶📡🔋
+
+ +
+ ← +
🤖
+
+
健康小助手
+
● 在线
+
+
+ +
+ +
+
🤖
+
您好！我是健康小助手，可以为您解答健康问题、体检咨询、用药指导等。请问有什么可以帮您？
+
+ +
+
👤
+
我想了解一下体检套餐包含哪些项目？
+
+ +
+
🤖
+
标准体检套餐通常包含：血常规、尿常规、肝功能、肾功能、血糖、血脂、心电图、胸部X光、腹部B超等项目。您想了解哪个具体套餐？
+
+
+ +
+
+ + + + + +
+ +
+
🖼️
图片
+
📷
拍摄
+
📋
体检报告
+
📁
选择档案
+
+
+
+ + + + diff --git a/employee-app/health-consult/consult-notice-dialog.html b/employee-app/health-consult/consult-notice-dialog.html new file mode 100644 index 0000000..ff74386 --- /dev/null +++ b/employee-app/health-consult/consult-notice-dialog.html @@ -0,0 +1,118 @@ + + + + + + 咨询须知弹窗 + + + + +
+ +
+ 9:41 + + ●●●● + WiFi + 🔋 + +
+ + +
+ + + +
+ + + + diff --git a/employee-app/health-consult/end-consult-dialog.html b/employee-app/health-consult/end-consult-dialog.html new file mode 100644 index 0000000..e6d9abb --- /dev/null +++ b/employee-app/health-consult/end-consult-dialog.html @@ -0,0 +1,103 @@ + + + + + + 结束咨询确认弹窗 + + + + +
+
+ 9:41 + + ●●●● + WiFi + 🔋 + +
+
+ + + +
+ + + + diff --git a/employee-app/health-consult/expert-list.html b/employee-app/health-consult/expert-list.html new file mode 100644 index 0000000..817421f --- /dev/null +++ b/employee-app/health-consult/expert-list.html @@ -0,0 +1,254 @@ + + + + + + 科室专家 - 分类专家子列表 + + + + + +
+ + +
+ 9:41 +
+ ●●●● + WiFi + 🔋 +
+
+ + + +
+ ‹ + 科室专家 +
+ + +
+
心内科
+
共 8位专家
+
+ + +
+ 排序： + + + +
+ + +
+
+ 🔍 + + +
+
+ + +
+ + +
+
👨‍⚕️
+
+
+ 张建国 + 主任医师 +
+
北京协和医院·心内科
+
+ 冠心病 + 高血压 +
+
+ ⭐ 4.9分 + 💬 1280次 + ✉ 回复率 96% +
+
+
+ + +
+
👩‍⚕️
+
+
+ 陈美华 + 主任医师 +
+
北京天坛医院·神经内科
+
+ 头痛 + 失眠 +
+
+ ⭐ 4.9分 + 💬 2100次 + ✉ 回复率 98% +
+
+
+ + +
+
👨‍⚕️
+
+
+ 刘海波 + 副主任医师 +
+
北京协和医院·消化内科
+
+ 胃炎 + 结肠炎 +
+
+ ⭐ 4.7分 + 💬 430次 + ✉ 回复率 85% +
+
+
+ +
+ + +
+
🔍
+
未找到匹配的专家
+
+ +
+ + + + + diff --git a/employee-app/health-consult/expert-profile.html b/employee-app/health-consult/expert-profile.html new file mode 100644 index 0000000..a0e6e45 --- /dev/null +++ b/employee-app/health-consult/expert-profile.html @@ -0,0 +1,536 @@ + + + + + + 专家主页 + + + + + +
+ + +
+ 9:41 + + ●●●● + WiFi + 🔋 + +
+ + + +
+ + + +
+ + +
+ + +
+ +
👨‍⚕️
+ +
张建国
+ +
主任医师 · 心内科
+ +
北京协和医院
+
+ + +
+
+
4.9
+
综合评价
+
+
+
96%
+
24h回复率
+
+
+
1,280
+
总咨询量
+
+
+ + +
+ + + + +
+ + +
+

医生简介

+

从事心内科临床工作20余年，擅长冠心病、高血压、心律失常等心血管疾病的诊断与治疗。曾赴美国哈佛医学院进修，发表SCI论文30余篇，主持国家自然科学基金项目2项。

+
+ + +
+

擅长方向

+
+ 冠心病 + 高血压 + 心律失常 + 心力衰竭 + 心肌病 + 瓣膜性心脏病 + 心脏康复 + 二级预防 +
+
+ + +
+

用户评价

+ + +
+
员工A
+
⭐⭐⭐⭐⭐
+
张医生非常耐心，详细解答了我关于高血压用药的疑问，建议很专业，感谢！
+
+ + +
+
员工B
+
⭐⭐⭐⭐⭐
+
回复很及时，分析病情很到位，给出了具体的检查建议，非常满意。
+
+ + +
+
员工C
+
⭐⭐⭐⭐
+
专业水平很高，解释清晰易懂，下次还会来咨询。
+
+ + + +
+ + +
+ +
+ + + + +
+ + + + + diff --git a/employee-app/health-consult/expert-reviews.html b/employee-app/health-consult/expert-reviews.html new file mode 100644 index 0000000..b56bab7 --- /dev/null +++ b/employee-app/health-consult/expert-reviews.html @@ -0,0 +1,550 @@ + + + + + + 用户评价 - 健康咨询 + + + + +
+ + +
+
9:41
+
+ + + + + + +
+
+ + +
+ +
+ + 返回 +
+
用户评价
+
+ + +
+ + +
+
+ +
+
4.9
+
+ ★ + ★ + ★ + ★ + ★ +
+
综合评分
+
+ +
+
+ 5星 +
+ 88% +
+
+ 4星 +
+ 9% +
+
+ 3星 +
+ 3% +
+
+ 2星 +
+ 0% +
+
+ 1星 +
+ 0% +
+
+
+ +
+
+
4.9
+
专业性
+
+
+
4.8
+
回复速度
+
+
+
4.9
+
服务态度
+
+
+ +
共 1,280 条评价
+
+ + +
+
全部评价
+ + +
+
+
+
A
+ 员工A +
+ 2026-04-05 +
+
+ ★ + ★ + ★ + ★ + ★ +
+
张医生非常耐心，详细询问了我的症状和病史，给出了非常专业的建议。整个问诊过程让我很安心，感觉比线下看病还要细致。
+
+ 专业 + 耐心 +
+
+ + +
+
+
+
B
+ 员工B +
+ 2026-04-03 +
+
+ ★ + ★ + ★ + ★ + ★ +
+
回复很及时，基本上几分钟就能收到回复。对我提出的每个问题都给出了详细的解答，还主动提醒了一些注意事项。
+
+ 回复及时 +
+
+ + +
+
+
+
C
+ 员工C +
+ 2026-03-30 +
+
+ ★ + ★ + ★ + ★ + ★ +
+
专业水平很高，能够准确地判断问题所在。给出的用药建议也很合理，不会过度用药。整体体验不错。
+
+ + +
+
+
+
D
+ 员工D +
+ 2026-03-28 +
+
+ ★ + ★ + ★ + ★ + ★ +
+
张医生对病情分析得非常透彻，不仅解决了我当前的问题，还给出了长期的健康管理建议。非常负责任的好医生！
+
+ 专业 + 负责任 +
+
+ + +
+
+
+
E
+ 员工E +
+ 2026-03-25 +
+
+ ★ + ★ + ★ + ★ + ★ +
+
第一次线上问诊，本来还有些担心，没想到张医生特别耐心，把每一个问题都解释得很清楚，让我对线上问诊有了信心。
+
+ 耐心 +
+
+ + +
+
+
+
F
+ 员工F +
+ 2026-03-22 +
+
+ ★ + ★ + ★ + ★ + ★ +
+
回复速度很快，问诊过程非常顺畅。给出的方案也很实用，已经按照建议调整了作息，感觉好多了。
+
+ + +
+
+
+
G
+ 员工G +
+ 2026-03-18 +
+
+ ★ + ★ + ★ + ★ + ★ +
+
针对我的具体情况给出了个性化的建议，不是那种千篇一律的回复。推荐的调理方案很实用，已经坚持了两周，效果明显。
+
+ 个性化 + 实用 +
+
+
+ + +
+
+
+ + + + diff --git a/employee-app/health-consult/find-expert.html b/employee-app/health-consult/find-expert.html new file mode 100644 index 0000000..211b3d0 --- /dev/null +++ b/employee-app/health-consult/find-expert.html @@ -0,0 +1,492 @@ + + + + + +找专家 + + + +
+ +
+ 9:41 +
+ + + +
+
+ + + +
+
+ +
+
找专家
+
+ + +
+
+ + +
+ +
搜索基于 ElasticSearch 模糊匹配，支持拼音首字母、同义词扩展
+
+ + + +
+
全部医院
+
全部科室
+
全部疾病
+
+ + +
+ + +
+
+ +
+
🏥
+
+
北京协和医院三甲
+
📍 2.3km👨‍⚕️ 128位专家
+
北京市东城区帅府园1号
+
+
+
+
+
🏥
+
+
上海瑞金医院三甲
+
📍 1058km👨‍⚕️ 96位专家
+
上海市黄浦区瑞金二路197号
+
+
+
+
+
🏥
+
+
广州中山医院三甲
+
📍 1892km👨‍⚕️ 85位专家
+
广州市越秀区中山二路58号
+
+
+
+
+
🏥
+
+
北京天坛医院三甲
+
📍 5.1km👨‍⚕️ 72位专家
+
北京市丰台区南四环西路119号
+
+
+
+
+
🏥
+
+
复旦华山医院三甲
+
📍 1062km👨‍⚕️ 91位专家
+
上海市静安区乌鲁木齐中路12号
+
+
+
+
+
+ + + +
+
+
内科
+
外科
+
妇产科
+
儿科
+
眼耳鼻喉
+
皮肤科
+
+
+ +
+
❤️心内科
+
🧠神经内科
+
🔬内分泌科
+
🫁消化内科
+
💨呼吸科
+
🫘肾内科
+
+
+
🦴骨科
+
🔪普通外科
+
🧠神经外科
+
🫀泌尿外科
+
+
+
👩妇科
+
🤰产科
+
🧬生殖科
+
+
+
👶儿内科
+
🩹儿外科
+
🍼新生儿科
+
+
+
👁️眼科
+
👂耳鼻喉科
+
🦷口腔科
+
+
+
🧴皮肤科
+
💊性病科
+
+
+
+ + +
+ +
+
心血管疾病
+
内分泌疾病
+
骨骼肌肉
+
神经系统
+
消化系统
+
呼吸系统
+
+ + +
+
+
+ 冠心病 + +
+
+
+ 高血压 + +
+
+
+ 心律失常 + +
+
+
+ 心肌炎 + +
+
+
+ 心力衰竭 + +
+
+ +
+
+
+ 糖尿病 + +
+
+
+ 甲状腺疾病 + +
+
+
+ 肥胖症 + +
+
+
+ 痛风 + +
+
+
+ 骨质疏松 + +
+
+ +
+
+
+ 颈椎病 + +
+
+
+ 腰椎间盘突出 + +
+
+
+ 关节炎 + +
+
+
+ 骨折 + +
+
+
+ 肩周炎 + +
+
+ +
+
+
+ 头痛偏头痛 + +
+
+
+ 失眠 + +
+
+
+ 眩晕 + +
+
+
+ 帕金森 + +
+
+
+ 癫痫 + +
+
+ +
+
+
+ 胃炎 + +
+
+
+ 胃溃疡 + +
+
+
+ 结肠炎 + +
+
+
+ 肝炎 + +
+
+
+ 胆囊炎 + +
+
+ +
+
+
+ 慢性咳嗽 + +
+
+
+ 哮喘 + +
+
+
+ 慢阻肺 + +
+
+
+ 肺炎 + +
+
+
+ 支气管炎 + +
+
+
+ +
+
+ + + + diff --git a/employee-app/health-consult/hospital-detail.html b/employee-app/health-consult/hospital-detail.html new file mode 100644 index 0000000..1bb6312 --- /dev/null +++ b/employee-app/health-consult/hospital-detail.html @@ -0,0 +1,322 @@ + + + + + +医院详情 + + + + + +
+ + +
+ 10:24 +
+ + + +
+
+ + + +
+
+ +
+
医院详情
+
+ + +
医院实景图
+ + +
+
北京协和医院
+ 三甲 +
+ 📍 + 北京市西城区大木仓胡同41号 +
+
+ 📏 + 距您 2.3 km +
+ + +
+ + +
+
医院简介
+
北京协和医院是集医疗、教学、科研于一体的大型综合性三级甲等医院，始建于1921年。拥有国家级重点学科20个，博士点36个，年门诊量300余万人次。在历次全国医院综合排名中名列前茅，是国内顶级医疗机构之一。
+ + 展开 +
+ + +
+ + +
本院专家
+ + +
+ 排序： + + + +
+ + +
+
+ 🔍 + + +
+
+ + +
+ + +
+
👨‍⚕️
+
+
+ 张建国 + 主任医师 +
+
北京协和医院·心内科
+
+ 冠心病 + 高血压 +
+
+ ⭐ 4.9分 + 💬 1280次 + ✉ 回复率 96% +
+
+
+ + +
+
👩‍⚕️
+
+
+ 陈美华 + 主任医师 +
+
北京协和医院·神经内科
+
+ 头痛 + 失眠 +
+
+ ⭐ 4.9分 + 💬 2100次 + ✉ 回复率 98% +
+
+
+ + +
+
👨‍⚕️
+
+
+ 刘海波 + 副主任医师 +
+
北京协和医院·消化内科
+
+ 胃炎 + 结肠炎 +
+
+ ⭐ 4.7分 + 💬 430次 + ✉ 回复率 85% +
+
+
+ +
+ + +
+
🔍
+
未找到匹配的专家
+
+ +
+ + + + + diff --git a/employee-app/health-consult/index.html b/employee-app/health-consult/index.html new file mode 100644 index 0000000..ee48df4 --- /dev/null +++ b/employee-app/health-consult/index.html @@ -0,0 +1,252 @@ + + + + + + 健康咨询 + + + + +
+ + +
+ 10:24 +
+ + +
+
+ + +
+ ← 返回 + 健康咨询 + 💬 +
+ + +
+ + +
+

健康咨询

+

专业医生在线，守护您的健康

+
+ + +
+ +
🔍
+
找专家
+
按科室查找
+ + +
🤖
+
小助手
+
AI智能问诊
+ + +
📋
+
我的咨询
+
历史记录
+ +
+ + +
+

推荐专家

+ 查看全部 › +
+ + +
+
👨‍⚕️
+
+
张建国 主任医师
+
北京协和医院 · 心内科
+
+ 高血压 + 冠心病 + 心律失常 +
+
+
+
⭐ 4.9
+
咨询 2,356次
+
回复率 99%
+ + +
+
+ + +
+
👩‍⚕️
+
+
李晓梅 副主任医师
+
上海瑞金医院 · 内分泌科
+
+ 糖尿病 + 甲状腺 + 代谢病 +
+
+
+
⭐ 4.8
+
咨询 1,892次
+
回复率 98%
+ + +
+
+ + +
+
👨‍⚕️
+
+
王志远 主任医师
+
广州中山医院 · 骨科
+
+ 腰椎病 + 关节炎 + 运动损伤 +
+
+
+
⭐ 4.9
+
咨询 3,105次
+
回复率 97%
+ + +
+
+ +
+ + +
+ +
+ + diff --git a/employee-app/health-consult/my-records.html b/employee-app/health-consult/my-records.html new file mode 100644 index 0000000..8e13f6d --- /dev/null +++ b/employee-app/health-consult/my-records.html @@ -0,0 +1,228 @@ + + + + + + 我的咨询 + + + + +
+ + +
+ 10:24 +
+ + +
+
+ + +
+ ← 返回 + 我的咨询 +
+ + +
+
图文咨询
+
视频咨询
+
+ + +
+ + +
+ + + +
+
👨‍⚕️
+
+
张建国医生
+
北京协和医院 · 心内科
+
+ 进行中 +
+
咨询人：本人
+
张医生：您好，胸闷气短需要引起重视...
+
2026-04-07 10:20
+ + + + +
+
👩‍⚕️
+
+
李晓梅医生
+
上海瑞金医院 · 内分泌科
+
+ 已完成 +
+
咨询人：张三（父亲）已评价
+
您的血糖控制情况良好，继续保持...
+
2026-03-28 14:35
+ + + + +
+
👨‍⚕️
+
+
王志远医生
+
广州中山医院 · 骨科
+
+ 已完成 +
+
咨询人：本人
+
建议您做颈椎MRI检查，明确诊断...
+
2026-03-15 09:10
+ +
+ + +
+ + + +
+
👨‍⚕️
+
+
张建国医生
+
北京协和医院 · 心内科
+
+ 待开始 +
+
📹 视频咨询 · 预约时间：2026-04-08 14:00
+
预约于 2026-04-07 11:00
+ + + + +
+
👩‍⚕️
+
+
陈美华医生
+
北京天坛医院 · 神经内科
+
+ 已完成 +
+
📹 视频咨询 · 时长 18分钟
+
2026-03-20 10:00
+ +
+ +
+ + +
+
+ + + + diff --git a/employee-app/health-consult/rate-dialog.html b/employee-app/health-consult/rate-dialog.html new file mode 100644 index 0000000..e246846 --- /dev/null +++ b/employee-app/health-consult/rate-dialog.html @@ -0,0 +1,127 @@ + + + + + + 评价医生弹窗 + + + +
+
+ 9:41 + ●●●●WiFi🔋 +
+
+ + + +
+ + + + diff --git a/employee-app/health-consult/rate-doctor.html b/employee-app/health-consult/rate-doctor.html new file mode 100644 index 0000000..4ca81f2 --- /dev/null +++ b/employee-app/health-consult/rate-doctor.html @@ -0,0 +1,159 @@ + + + + + + 评价医生 + + + +
+ +
+ 9:41 +
+ 📶📡🔋 +
+
+ + +
+ 评价医生 +
+ + +
+ +
+
👨‍⚕️
+
张建国医生
+
本次咨询已结束
+
+ + +
+
您对本次咨询满意吗？
+ + +
+ ⭐ + ⭐ + ⭐ + ⭐ + ⭐ +
+ + + + + + +
+
+
+ + + + diff --git a/employee-app/health-consult/record-detail.html b/employee-app/health-consult/record-detail.html new file mode 100644 index 0000000..549cc95 --- /dev/null +++ b/employee-app/health-consult/record-detail.html @@ -0,0 +1,196 @@ + + + + + + 咨询详情 + + + + +
+ + +
+ 10:24 +
+ + +
+
+ + +
+ ← 返回 + 咨询详情 +
+ + +
+ + +
+
👨‍⚕️
+
+
张建国医生
+
北京协和医院 · 心内科
+
+ 进行中 +
+ + +
+
+ 咨询类型 + 💬 图文咨询 +
+
+ 咨询时间 + 2026-04-07 10:20 +
+
+ 咨询状态 + 进行中 +
+
+ 咨询时长 + — +
+
+ + + + 💬 +
+
查看历史对话记录
+
点击查看完整对话内容
+
+ › + + +
+ + +
+ +
+ + +
+
+ + diff --git a/employee-app/health-consult/select-person-dialog.html b/employee-app/health-consult/select-person-dialog.html new file mode 100644 index 0000000..75cc2eb --- /dev/null +++ b/employee-app/health-consult/select-person-dialog.html @@ -0,0 +1,233 @@ + + + + + + 选择咨询人弹窗 + + + +
+
+ 9:41 + ●●●●WiFi🔋 +
+
+ + +
+
+
+

选择咨询人

+ +
+
+ +
+
+ 👤 +
本人
28岁 · 男
+ 本人 +
+
+ 👴 +
张三
58岁 · 男
+ 父亲 +
+
+ 👩 +
李梅
55岁 · 女
+ 母亲 +
+
+ 🧒 +
张小宇
8岁 · 男
+ 儿子 +
+ +
+ 新增咨询人
+
+
+ + +
+ +
+
+ +
+
男
+
女
+
+
+
+
+ +
生活习惯
+
+ +
否
偶尔
是
+
+
+ +
否
偶尔
是
+
+
+ +
清淡
均衡
偏油腻
偏辛辣
+
+
+ +
良好
一般
较差
+
+ +
身体情况
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + + + + diff --git a/employee-app/health-consult/select-report-dialog.html b/employee-app/health-consult/select-report-dialog.html new file mode 100644 index 0000000..dc2ed42 --- /dev/null +++ b/employee-app/health-consult/select-report-dialog.html @@ -0,0 +1,116 @@ + + + + + + 选择体检报告弹窗 + + + +
+
+ 9:41 + ●●●●WiFi🔋 +
+
+ + +
+
+
+

选择体检报告

+ +
+
+ +
+
📄
+
2026年度综合体检报告
2026-03-15 · 北京协和医院
+ +
+
+
📄
+
心内科专项检查报告
2025-11-20 · 北京天坛医院
+ +
+
+
📄
+
2025年度综合体检报告
2025-03-10 · 上海瑞金医院
+ +
+
+
📄
+
血液常规检验报告
2025-08-05 · 广州中山医院
+ +
+
+
+
+
+ + + + diff --git a/employee-app/health-consult/text-chat.html b/employee-app/health-consult/text-chat.html new file mode 100644 index 0000000..f07146a --- /dev/null +++ b/employee-app/health-consult/text-chat.html @@ -0,0 +1,242 @@ + + + + + + 图文咨询聊天 + + + +
+ +
+ 9:41 + + ●●●●● + WiFi + 🔋 + +
+ +
+ ← +
👨‍⚕️
+
+ 张建国医生 + ● 在线 +
+ + +
+ + +
📌 温馨提示：请详细描述您的症状，医生将尽快回复。如遇紧急情况请立即就医。
+ + +
+ +
+
👨‍⚕️
+
您好，我是张建国医生，请问有什么可以帮助您的？请详细描述您的症状。
+
+ +
+
😊
+
张医生您好，我最近经常感到胸闷气短，尤其是爬楼梯的时候，已经持续两周了。
+
+ +
+
👨‍⚕️
+
您好，胸闷气短需要引起重视。请问您有没有伴随心跳加速、出汗或者胸痛的情况？平时血压情况如何？
+
+
+ + +
+
+ + + + + +
+ +
+
🖼️
图片
+
📷
拍摄
+ +
📋
体检报告
+ +
📁
选择档案
+ +
❌
结束咨询
+
+
+ + + +
+ + + + diff --git a/employee-app/health-consult/video-booking.html b/employee-app/health-consult/video-booking.html new file mode 100644 index 0000000..dbe702e --- /dev/null +++ b/employee-app/health-consult/video-booking.html @@ -0,0 +1,203 @@ + + + + + + 预约视频咨询 + + + +
+ +
+ 9:41 +
📶📡🔋
+
+ +
+ ← 返回 + 预约视频咨询 +
+ +
+ +
+
👨‍⚕️
+
+
张建国医生
+
北京协和医院 · 心内科
+
+
+ +
+ 📋 预约须知：
1. 预约不收取额外费用
2. 停诊将短信通知 +
+ +
选择日期
+ +
+
今天
04/07
+
明天
04/08
+
周四
04/09
+
周五
04/10
+
周六
04/11
+
周日
04/12
+
+ +
上午
+ +
+
08:00
已约满
+
08:30
已约满
+
09:00
剩余3名
+
09:30
剩余5名
+
10:00
剩余2名
+
10:30
剩余4名
+
+ +
下午
+
+
14:00
剩余3名
+
14:30
剩余5名
+
15:00
已约满
+
15:30
剩余1名
+
16:00
剩余6名
+
16:30
剩余4名
+
+
+ +
+
+
已选时段
+
04/08 10:00
+
+ + +
+
+ + + + diff --git a/employee-app/health-consult/video-success.html b/employee-app/health-consult/video-success.html new file mode 100644 index 0000000..b273a6a --- /dev/null +++ b/employee-app/health-consult/video-success.html @@ -0,0 +1,102 @@ + + + + + + 预约详情 + + + +
+ +
+ 9:41 +
📶📡🔋
+
+ +
+ 预约详情 +
+ +
+ +
✅
+
预约成功！
+
请在预约时间内准时上线 +系统将提前15分钟推送提醒
+ + +
+
医生张建国 · 主任医师
+
医院北京协和医院
+
科室心内科
+
类型📹 视频咨询
+
时间2026-04-08 10:00
+
费用¥50
+
+ + + + + +
+
+ + diff --git a/项目背景.md b/项目背景.md new file mode 100644 index 0000000..2a1d2fb --- /dev/null +++ b/项目背景.md @@ -0,0 +1,324 @@ +# 健康长庆升级 - 高保真交互原型 + +## 项目概述 + +本项目以 HTML 方式生成「健康长庆升级」平台的高保真交互原型，覆盖 Web 管理端、员工端 APP、健康应急 APP 三大终端，用于需求确认、交互评审及后续导入墨刀进行团队协作。 + +--- + +## 一、项目结构规范 + +### 1.1 顶层目录结构 + +``` +prototype-user-app/ +├── web-admin/ # Web 管理端原型 +├── employee-app/ # 员工端 APP 原型 +├── emergency-app/ # 健康应急 APP 原型 +├── shared/ # 共享资源（图标、字体、公共样式） +│ ├── styles/ # 公共 CSS +│ ├── icons/ # 图标资源 +│ └── components/ # 可复用的 HTML 片段 +├── 项目背景.md # 本文件 - 项目约束与规范 +└── README.md # 项目说明 +``` + +### 1.2 各端内部按核心功能模块分目录 + +**员工端 APP（employee-app/）** +``` +employee-app/ +├── index.html # 入口总览页（含底部Tab导航） +├── health-record/ # 健康档案 +├── health-monitor/ # 健康监测 +├── health-consult/ # 健康咨询 +├── emergency-medical/ # 应急就医 +├── health-intervention/ # 健康干预 +├── weight-management/ # 体重管理 +├── nutrition/ # 营养管理 +├── exercise/ # 运动管理 +├── health-assessment/ # 健康评估 +├── knowledge/ # 知识普及 +├── notification/ # 待办通知 +└── profile/ # 个人中心 +``` + +**Web 管理端（web-admin/）** +``` +web-admin/ +├── index.html # 管理端主框架（侧边栏+内容区） +├── user-management/ # 用户管理 +├── role-permission/ # 角色权限 +├── org-structure/ # 组织架构 +├── data-statistics/ # 数据统计报表 +├── health-checkup/ # 体检安排 +├── health-intervention/ # 健康干预活动发布 +├── emergency-dispatch/ # 应急就医调度监控 +├── system-config/ # 系统配置与日志审计 +└── health-data/ # 健康数据可视化 +``` + +**健康应急 APP（emergency-app/）** + +底部固定 5 个 Tab：工作台、知识库、AI助手、消息（即时通讯）、我的。 +6 种角色登录后看到的工作台内容不同，其余 4 个 Tab 全角色共享。 + +| 角色 | 英文标识 | 说明 | +|------|---------|------| +| 咨询专家 | expert | 专业医师/健康管理师，接收咨询、回复问题 | +| 应急操作人员 | operator | 负责应急事件的调度与操作执行 | +| 应急工作人员 | worker | 参与应急响应的一线工作人员 | +| 应急驻场人员 | onsite | 驻扎在现场的应急保障人员 | +| 咨询小助手 | assistant | 辅助答疑、常见问题推送、数据统计 | +| 管理员 | admin | 应急APP端的管理与配置人员 | + +``` +emergency-app/ +├── index.html # 入口页（底部5Tab框架 + 角色切换） +│ +├── workbench/ # 工作台（按角色区分内容） +│ ├── expert/ # 咨询专家工作台 +│ │ └── index.html +│ ├── operator/ # 应急操作人员工作台 +│ │ └── index.html +│ ├── worker/ # 应急工作人员工作台 +│ │ └── index.html +│ ├── onsite/ # 应急驻场人员工作台 +│ │ └── index.html +│ ├── assistant/ # 咨询小助手工作台 +│ │ └── index.html +│ └── admin/ # 管理员工作台 +│ └── index.html +│ +├── knowledge/ # 知识库（全角色共享） +│ └── index.html +│ +├── ai-assistant/ # AI助手（全角色共享） +│ └── index.html +│ +├── message/ # 消息 - 即时通讯聊天（全角色共享） +│ └── index.html +│ +└── profile/ # 我的（全角色共享） + └── index.html +``` + +--- + +## 二、HTML 原型编写规范 + +### 2.1 文件粒度原则（核心约束） + +> **每个独立的页面、弹窗、浮层、操作面板必须是独立的 `.html` 文件。** + +这是为了兼容墨刀导入（通过 `modao-proto-mcp` 的 `import_html` 工具），墨刀以单个 HTML 文件为粒度创建页面。 + +- **页面**：每个可导航的页面 → 独立 `.html` 文件 +- **弹窗/对话框**：每个模态弹窗 → 独立 `.html` 文件，命名如 `xxx-dialog.html` +- **浮层/操作面板**：底部弹出面板、下拉菜单等 → 独立 `.html` 文件，命名如 `xxx-panel.html` +- **状态变体**：同一页面的不同状态（空状态、加载中、错误态）如差异较大 → 独立文件，命名如 `xxx-empty.html`、`xxx-loading.html` + +### 2.2 单文件结构规范 + +每个 `.html` 文件必须是完整的、可独立在浏览器中打开的自包含文件： + +```html + + + + + + [模块名] - [页面名] | 健康长庆原型 + + + + + + + +``` + +**关键要求：** +- CSS 和 JS 全部内联，禁止引用外部文件（确保墨刀导入兼容性） +- 图片优先使用 SVG 内联或 CSS 绘制的图形占位，避免外部图片依赖 +- 图标使用 SVG 内联或 Unicode/Emoji 占位 + +### 2.3 APP 端原型视觉规范 + +APP端（员工端、应急端）使用手机壳模拟器包裹： + +``` +设备尺寸: 390 x 844 (iPhone 14 逻辑分辨率) +外壳圆角: 44px +状态栏高度: 44px +底部安全区: 34px +导航栏高度: 44px +底部Tab栏高度: 50px + 34px安全区 +``` + +### 2.4 Web 端原型视觉规范 + +Web管理端使用标准后台布局： + +``` +最小宽度: 1280px +侧边栏宽度: 240px（折叠态 64px） +顶部导航高度: 56px +内容区内边距: 24px +``` + +### 2.5 统一设计令牌 + +```css +/* 品牌色 */ +--primary: #1890FF; /* 主色 */ +--primary-light: #E6F7FF; /* 主色浅底 */ +--success: #52C41A; /* 成功 */ +--warning: #FAAD14; /* 警告 */ +--danger: #FF4D4F; /* 危险 */ + +/* 中性色 */ +--text-primary: #333333; /* 主文字 */ +--text-secondary: #666666; /* 次要文字 */ +--text-placeholder: #999999; /* 占位文字 */ +--border: #E8E8E8; /* 边框 */ +--background: #F5F7FA; /* 页面背景 */ + +/* 字号 */ +--font-xs: 11px; +--font-sm: 13px; +--font-base: 15px; +--font-lg: 17px; +--font-xl: 20px; +--font-xxl: 24px; + +/* 圆角 */ +--radius-sm: 4px; +--radius-md: 8px; +--radius-lg: 12px; + +/* 阴影 */ +--shadow-sm: 0 1px 4px rgba(0,0,0,0.08); +--shadow-md: 0 4px 12px rgba(0,0,0,0.12); +--shadow-lg: 0 8px 24px rgba(0,0,0,0.16); +``` + +--- + +## 三、交互效果规范 + +### 3.1 必须实现的交互 + +- **页面导航**：点击按钮/链接可跳转至对应页面（通过 `window.location.href` 或页内锚点切换） +- **Tab 切换**：底部 Tab 栏、顶部 Tab 栏的选中态切换 +- **弹窗展示**：点击触发弹窗的元素时，展示弹窗的打开态（弹窗为独立文件，在预览时可用 overlay 模拟） +- **表单交互**：输入框聚焦态、按钮点击态、单选/多选切换 +- **列表滚动**：内容区可滚动，导航栏/Tab 栏固定 +- **下拉刷新/加载更多**：提供视觉占位表现 + +### 3.2 页面间跳转约定 + +由于每个页面是独立文件，页面间通过相对路径跳转： + +```javascript +// 同模块内跳转 +window.location.href = './detail.html'; + +// 跨模块跳转 +window.location.href = '../health-consult/consult-list.html'; + +// 弹窗页面（在当前页面中以 iframe 或 overlay 方式展示） +// 建议在页面内通过注释标注关联的弹窗文件 +// +``` + +### 3.3 交互注释标注 + +在 HTML 中使用注释标注交互说明，便于评审和墨刀导入后的理解： + +```html + +
+ + + + + +
全部
+``` + +--- + +## 四、命名规范 + +### 4.1 文件命名 + +- 全部使用**小写英文 + 短横线**连接：`consult-detail.html` +- 页面文件：`{功能名}.html`，如 `consult-list.html` +- 弹窗文件：`{功能名}-dialog.html`，如 `filter-dialog.html` +- 面板文件：`{功能名}-panel.html`，如 `sort-panel.html` +- 状态变体：`{功能名}-{状态}.html`，如 `list-empty.html` +- 模块入口：统一使用 `index.html` + +### 4.2 CSS 类命名 + +采用 BEM 风格，简洁明了： + +```css +.consult-card { } +.consult-card__title { } +.consult-card__status--resolved { } +``` + +--- + +## 五、墨刀导入兼容约束 + +### 5.1 导入方式 + +通过已配置的 `modao-proto-mcp` MCP 服务，使用 `import_html` 工具将单个 HTML 文件导入墨刀项目。 + +### 5.2 兼容性要求 + +- **自包含**：每个 HTML 不得引用外部 CSS/JS/图片资源 +- **单页面**：每个 HTML 文件仅包含一个页面/弹窗的内容 +- **固定尺寸**：APP端页面内容区域控制在 390×844 内；Web端不设固定高度 +- **简洁 DOM**：避免过度嵌套（建议不超过 8 层），墨刀解析有层级限制 +- **内联 SVG**：图标和简单图形使用内联 SVG，复杂图形使用 CSS 绘制或色块占位 + +--- + +## 六、项目背景参考 + +### 6.1 项目背景 +原健康长庆项目是长庆油田公司内部使用的综合性员工健康管理服务平台，旨在整合健康咨询、应急就医、健康体检、档案管理、健康监测、系统管理、健康干预、健康评估、一线医疗点及体重管理等多元功能，为油田员工提供全周期的健康保障。 + +### 6.2 用户群体 + +| 用户角色 | 角色定义 | 对应原型端 | +|---------|---------|-----------| +| 油田员工 | 长庆油田一线员工及管理人员 | 员工端 APP | +| 平台管理员 | 健康管理部门后台运营人员 | Web 管理端 | +| 健康咨询专家 | 专业医师/健康管理师 | 健康应急 APP | +| 应急就医服务人员 | 应急调度与协调人员 | 健康应急 APP | + +### 6.3 核心业务模块 + +| 模块 | 业务概述 | 所属端 | +|-----|---------|-----------------| +| 系统管理 | 用户管理、角色权限、组织架构、系统配置 | Web 管理端 | +| 健康评估 | 健康风险评估报告，识别风险等级 | 员工端 APP/Web 管理端 | +| 应急就医 | 应急申请、资源调度、进度跟踪的全流程管理 | 健康应急 APP / 员工端/Web 管理端 | +| 专家咨询 | 在线健康咨询，支持图文与视频咨询 | 员工端 / 健康应急 APP/Web 管理端 | +| 健康体检 | 体检预约、报告管理、历年数据对比 | Web 管理端 / 员工端/Web 管理端 | +| 健康监测 | 智能手表采集心率、血压、血氧、睡眠数据 | 员工端 APP/Web 管理端 | +| 营养管理 | 用餐记录、膳食指导、营养分析 | 员工端 APP/Web 管理端 | +| 体重管理 | 体重记录、目标设定、进度追踪 | 员工端 APP/Web 管理端 | +| 知识普及 | 健康资讯、科普文章、视频课程 | 员工端 APP/Web 管理端 | +| 运动管理 | 运动数据记录、目标设定、运动计划 | 员工端 APP/Web 管理端 | +| 健康档案 | 统一归集健康数据，形成个人健康时间轴 | 员工端 APP/Web 管理端 | +| 待办通知 | 待处理事项、系统消息、预警推送 | 全端 |