feat: 完善专家端页面原型,新增视频咨询取消/拒绝页、疾病编辑页,优化多端交互与PRD文档

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-20 08:50:43 +08:00
co-authored by Claude Opus 4.6
parent fc38844eb9
commit 28bbe3f620
68 changed files with 1934 additions and 979 deletions
+191 -125
View File
@@ -2,30 +2,30 @@
## 模块概述
咨询小助手端为平台客服人员提供移动端工作平台,负责接收员工的初步咨询请求,进行图文对话沟通,并在需要时为员工推荐合适的专家。小助手端仅支持图文咨询,不支持视频咨询。
咨询小助手端为平台客服人员提供移动端工作平台,负责接收员工步咨询请求,进行图文对话沟通,并在需要时为员工推荐合适的专家。小助手端仅支持图文咨询,不支持视频咨询。
### 页面导航结构
```
咨询小助手端
├── 工作台(底部Tab
│ ├── 工作台首页(3分类Tab)
│ │ ├── 待回复 → 图文聊天
│ │ ├── 进行中 → 图文聊天
│ │ └── 已完成 → 咨询完成详情 → 历史对话
├── 图文聊天
│ │ ├── 查看档案 → 员工健康档案
│ │ ├── 结束咨询 → 结束咨询确认弹窗
│ │ └── 推送专家 → 选择专家页 → 返回聊天(发送名片)
│ ├── 工作台首页(3分类Tab + 过滤条件
│ │ ├── 待回复 → 图文聊天(进行中)
│ │ ├── 进行中 → 图文聊天(进行中)
│ │ └── 已完成
│ ├── 已完成 → 图文咨询完成详情 → 历史对话(只读)→ 咨询人健康档案
│ │ └── 已超时 → 图文咨询已超时详情 → 历史对话(只读)→ 咨询人健康档案
├── 知识库(底部Tab
│ ├── 知识库首页4分类Tab
└── 知识详情
├── AI助手(底部Tab,共享模块)
├── 消息(底部Tab,共享模块
│ ├── 知识库首页
│ ├── 知识文章(知识分类-知识列表)→ 知识详情
│ │ └── 规章制度(PDF列表)→ 查看文件
├── AI助手(底部Tab
├── 消息(底部Tab
└── 我的(底部Tab
├── 个人中心主页
│ ├── 咨询统计
── 修改密码
│ ├── 个人信息设置
── 修改密码
│ └── 关于我们
└── 退出登录(确认弹窗)
```
@@ -36,223 +36,287 @@ stateDiagram-v2
[*] --> 待回复 : 员工发起咨询
待回复 --> 进行中 : 小助手首次回复
进行中 --> 进行中 : 推送专家名片
进行中 --> 已完成 : 小助手结束咨询
进行中 --> 已完成 : 任一方结束咨询/有回复但是7天无更新自动变为已完成
进行中 --> 已超时 : 7天首次未回复自动关闭
```
## 页面清单
| 序号 | 文件名 | 页面名称 | 类型 | 所属模块 |
|------|--------|----------|------|----------|
| 1 | workbench/index.html | 工作台首页 | 页面 | 工作台 |
| 2 | workbench/text-chat.html | 图文咨询 | 页面 | 工作台 |
| 3 | workbench/consult-done.html | 咨询完成详情 | 页面 | 工作台 |
| 4 | workbench/employee-profile.html | 员工健康档案 | 页面 | 工作台 |
| 5 | workbench/end-consult-dialog.html | 结束咨询确认弹窗 | 弹窗 | 工作台 |
| 6 | workbench/push-expert.html | 选择专家 | 页面 | 工作台 |
| 7 | knowledge/index.html | 知识库首页 | 页面 | 知识库 |
| 8 | knowledge/detail.html | 知识详情 | 页面 | 知识库 |
| 9 | ../ai-assistant/index.html | AI 助手(共享) | 页面 | AI 助手 |
| 10 | ../message/index.html | 消息列表(共享) | 页面 | 消息 |
| 11 | ../message/contacts.html | 通讯录(共享) | 页面 | 消息 |
| 12 | ../message/im-chat.html | IM 聊天(共享) | 页面 | 消息 |
| 13 | profile/index.html | 个人中心主页 | 页面 | 我的 |
| 14 | profile/stats.html | 咨询统计 | 页面 | 我的 |
| 15 | profile/change-pwd.html | 修改密码 | 页面 | 我的 |
| 序号 | 文件名 | 页面名称 | 所属模块 |
|------|--------|-----|-------|
| 1 | workbench/index.html | 工作台首页 | 工作台 |
| 2 | workbench/text-chat.html | 图文聊天 | 工作台·图文咨询 |
| 3 | workbench/text-chat-done.html | 历史对话(只读) | 工作台·图文咨询 |
| 4 | workbench/text-consult-done.html | 图文咨询完成详情 | 工作台·图文咨询 |
| 5 | workbench/text-consult-timeout.html | 图文咨询已超时详情 | 工作台·图文咨询 |
| 6 | workbench/employee-profile.html | 咨询人健康档案 | 工作台 |
| 7 | workbench/end-consult-dialog.html | 结束咨询确认弹窗 | 工作台 |
| 8 | workbench/push-expert.html | 选择专家 | 工作台 |
| 9 | knowledge/index.html | 知识库首页 | 知识库 |
| 10 | knowledge/detail.html | 知识详情 | 知识库 |
| 11 | ../ai-assistant/index.html | AI 助手 | AI 助手 |
| 12 | ../message/index.html | 消息列表 | 消息 |
| 13 | ../message/contacts.html | 通讯录 | 消息 |
| 14 | ../message/im-chat.html | IM 聊天 | 消息 |
| 15 | profile/index.html | 个人中心主页 | 我的 |
| 16 | profile/edit-profile.html | 个人信息设置 | 我的 |
| 17 | profile/change-pwd.html | 修改密码 | 我的 |
## 逐页说明
---
## 一、工作台模块
### 1. 工作台首页(workbench/index.html
**功能说明:** 小助手工作台入口,展示图文咨询任务队列,按状态分类管理。
![页面截图](screenshots/index.jpg)
**功能说明:** 小助手工作台入口,展示图文咨询任务队列,按状态分类管理,支持多维度过滤筛选。
**业务规则:**
- 头部统计卡片展示:待回复数、进行中数、今日完成数、满意度百分比
- 仅支持图文咨询,无视频咨询Tab
- 分三个子Tab:待回复、进行中、已完成
- 头部展示欢迎语和统计数据:待回复数、进行中数
- 二级 Tab 切换:待回复、进行中、已结束(已完成、已超时)
- 过滤条件栏支持按咨询类型(咨询专家 / 咨询小助手)和专家未回复筛选
- 咨询卡片展示:咨询人头像、姓名、角色标签、最后消息、时间
- 咨询类型标签:咨询专家、咨询小助手
- 已完成面板同时展示已完成和已超时两种终态卡片
**交互说明:**
- 点击待回复/进行中咨询卡片跳转到图文聊天
- 点击已完成咨询卡片跳转到咨询完成详情
- 底部5Tab导航:工作台/知识库/AI助手/消息/我的
- 点击"待回复 / 进行中"咨询卡片跳转到图文聊天
- 点击"已完成"咨询卡片跳转到图文咨询完成详情
- 点击"已超时"咨询卡片:跳转到图文咨询已超时详情页
- 点击过滤条件:动态筛选当前列表
---
### 2. 图文咨询(workbench/text-chat.html
## 二、图文咨询业务线
**功能说明:** 小助手与员工的实时图文对话界面,相比专家端多了"推送专家"功能。
### 2. 图文聊天(workbench/text-chat.html
![页面截图](screenshots/text-chat.jpg)
**功能说明:** 小助手与员工的实时图文对话界面,支持文字、语音、图片发送,提供常用语快捷填充和推送专家功能。
**业务规则:**
- 聊天区分员工消息(左侧白色气泡)和小助手消息(右侧蓝色气泡,机器人头像
- 支持文字、语音、图片三种消息类型
- 常用语面板提供5条预设快捷语
- 导航栏展示咨询人姓名和咨询类型标签(咨询专家蓝色 / 咨询小助手紫色
- 咨询信息条(可折叠)展示:发起时间、咨询人信息、专家信息、查看档案入口。“咨询人档案”按钮需判断当前员工是否选择了咨询档案进行发起咨询,如果没有选择,则按钮置灰,点击时提示Toast“员工未选择咨询人档案”
- 员工消息以左侧白色气泡展示(含咨询卡片),小助手消息以右侧蓝色气泡展示
- 常用语面板支持分类 Tab:全部 / 问候语 / 注意事项 / 结束语/ 引导语
- 媒体选择面板提供:拍照、图库、推送专家三个选项
- 推送专家后,聊天区自动插入专家名片气泡(含头像、姓名、科室、职称、医院、擅长病种)
**交互说明:**
- 点击"查看档案"跳转到员工健康档案
- 点击"结束咨询"跳转到结束咨询确认弹窗
- 点击闪电图标展开/收起常用语面板
- 点击加号展开媒体面板(拍照/图库/推送专家)
- 点击"推送专家"跳转到选择专家页
- 点击咨询人档案卡片或"查看档案"跳转到咨询人健康档案
- 点击右上角"结束咨询"跳转到结束咨询确认弹窗
- 点击"⚡"图标展开 / 收起常用语面板,点击常用语自动填入输入框
- 点击"🎤"图标:切换语音 / 文字输入模式
- 点击"+"图标:展开 / 收起媒体选择面板
- 点击"推送专家":跳转到选择专家页
- 点击"➤"发送按钮:将输入框内容发送为小助手消息气泡
---
### 3. 咨询完成详情workbench/consult-done.html
### 3. 历史对话(只读)workbench/text-chat-done.html
**功能说明:** 展示已完结的员工咨询全部信息,包括咨询统计、评价及健康档案。
![页面截图](screenshots/text-chat-done.jpg)
**功能说明:** 展示已结束图文咨询的历史对话记录,为只读模式,无输入区,底部显示咨询结束说明。
**业务规则:**
- 展示咨询类型(员工咨询)、发起/完成时间、员工评分
- 布局与图文聊天页一致,但无导航栏右上角"结束咨询"按钮,无底部输入区
- 底部固定条显示咨询状态文案:
- 正常完成:「— 本次咨询已结束 —」
- 超时关闭:「— 长时间未回复系统已自动结束本次咨询 —」
- 聊天区末尾展示绿色结束卡片(含完成时间),超时状态下不展示该卡片
**交互说明:**
- 对话内交互与图文聊天页一致
- 返回按钮:跳转到工作台首页
---
### 4. 图文咨询完成详情(workbench/text-consult-done.html
![页面截图](screenshots/text-consult-done.jpg)
**功能说明:** 展示已完成图文咨询的摘要信息,提供查看历史对话和咨询人健康档案的入口。
**业务规则:**
- 顶部员工信息卡展示:头像、姓名、所属部门、"已完成"标签
- 咨询信息区展示:咨询类型、发起时间、结束时间
- 员工评价以黄色引用框展示
- 健康档案分基本信息、生活习惯、身体情况三组
- 咨询人健康档案区支持折叠 / 展开
**交互说明:**
- 点击"查看历史对话记录"跳转到图文聊天页(只读)
- 健康档案支持折叠/展开
- 点击"查看历史对话记录"跳转到历史对话(只读)
- 点击"咨询人健康档案"标题:展开 / 收起档案详情
- 返回按钮:跳转到工作台首页
---
### 4. 员工健康档案workbench/employee-profile.html
### 5. 图文咨询已超时详情workbench/text-consult-timeout.html
**功能说明:** 展示咨询员工的完整健康档案,供小助手参考。
![页面截图](screenshots/text-consult-timeout.jpg)
**功能说明:** 展示因 7 天未回复被系统自动关闭的图文咨询详情,提示超时原因,并提供查看历史记录和健康档案的入口。
**业务规则:**
- 分三组展示:基本信息(姓名、性别/年龄、身高/体重)、生活习惯(吸烟、饮酒、饮食、睡眠)、身体情况(过敏史、遗传史、既往史)
- 过敏史以红色高亮标记
- 顶部员工信息卡展示:头像、姓名、所属部门、"已超时"标签
- 咨询信息区展示:咨询对象、咨询单号、发起时间、结束时间
- 橙色警示卡片展示超时原因:「超过七天无回复,本次咨询已自动关闭。」
**交互说明:**
- 返回按钮跳转到图文聊天页
- 点击"查看历史对话记录":跳转到历史对话(只读)页,
- 点击"咨询人健康档案":跳转到咨询人健康档案页
- 返回按钮:跳转到工作台首页
---
### 5. 结束咨询确认弹窗workbench/end-consult-dialog.html
### 6. 咨询人健康档案workbench/employee-profile.html
**功能说明:** 小助手结束咨询的二次确认弹窗,作为独立HTML页面实现。
![页面截图](screenshots/employee-profile.jpg)
**功能说明:** 展示咨询员工的完整健康档案,供小助手在咨询过程中参考。
**业务规则:**
- 基本信息卡:姓名、关系、性别、年龄、身高、体重
- 生活习惯卡:以标签形式展示,吸烟、饮酒、饮食均衡、睡眠良好
- 身体情况卡:红色高亮标记,过敏史、遗传史、既往史、其他疾病
- 咨询信息卡:问题描述、持续时间、检查资料(图片展示)、就诊经历、期望帮助
**交互说明:**
- 返回按钮:返回来源页面
---
### 7. 结束咨询确认弹窗(workbench/end-consult-dialog.html
![页面截图](screenshots/end-consult-dialog.jpg)
**功能说明:** 小助手结束咨询的二次确认弹窗,作为独立 HTML 页面实现。
**业务规则:**
- 弹窗提示"确认结束与XX的咨询?结束后将无法继续发送消息"
- 半透明蒙层背景
**交互说明:**
- 点击"取消"返回图文聊天页
- 点击"确认结束"跳转到工作台首页
- 点击"取消":关闭弹窗
- 点击"确认结束"跳转到工作台首页
---
### 6. 选择专家(workbench/push-expert.html
### 8. 选择专家(workbench/push-expert.html
![页面截图](screenshots/push-expert.jpg)
**功能说明:** 小助手在咨询中为员工推荐合适的专家,选择后将专家名片发送至聊天会话。
**业务规则:**
- 展示可推荐的专家列表,每位含头像、姓名、医院、科室职称、本月咨询数、擅长病种标签
- 选择专家后数据存入 sessionStorage返回聊天页后自动发送名片气泡
- 选择专家后返回聊天页后自动发送名片气泡
**交互说明:**
- 顶部搜索框支持按姓名/科室搜索
- 点击专家卡片选中并返回图文聊天页
- 顶部搜索框支持按姓名 / 科室搜索
- 点击专家卡片选中并返回图文聊天页
---
### 7. 知识库首页(knowledge/index.html
## 三、知识库模块
**功能说明:** 小助手查阅专业医学知识的参考库,与专家端知识库结构和内容一致。
### 9. 知识库首页(knowledge/index.html
![页面截图](screenshots/knowledge-index.jpg)
**功能说明:** 后续规划,暂时显示”开发中,敬请期待~”。
**业务规则:**
- 4个分类Tab:体检知识、药品知识、疾病知识、保健知识
- 共10条知识条目
**交互说明:**
- 切换分类Tab显示对应知识列表
- 点击知识条目跳转到知识详情
---
### 8. 知识详情(knowledge/detail.html
### 10. 知识详情(knowledge/detail.html
**功能说明:** 展示单条知识的完整内容,由URL参数动态渲染,与专家端内容一致。
![页面截图](screenshots/knowledge-detail.jpg)
**业务规则**
- 共支持9个知识条目的动态渲染
- 每条含概述段落和2-3个主要内容分项
**交互说明:**
- 返回按钮跳转到知识库首页
**功能说明** 后续规划,暂时显示”开发中,敬请期待~”。
---
### 9. 个人中心主页(profile/index.html
## 四、我的模块
### 11. 个人中心主页(profile/index.html
![页面截图](screenshots/profile-index.jpg)
**功能说明:** 小助手个人中心入口,展示用户信息和功能菜单。
**业务规则:**
- 蓝色渐变头部展示小助手头像、姓名、角色标签、所属机构
- 功能菜单分两组:第一组为咨询统计(显示今日完成次数),第二组为修改密码关于我们
- 底部提供退出登录按钮
- 蓝色渐变头部展示小助手头像、姓名、角色标签(咨询小助手)
- 功能菜单:个人信息设置、修改密码关于我们
- 底部提供红色退出登录按钮
**交互说明:**
- 点击"咨询统计"跳转到咨询统计
- 点击"修改密码"跳转到修改密码页
- 点击"退出登录"弹出确认弹窗,确认后退出
- 底部5Tab导航:工作台/知识库/AI助手/消息/我的
- 点击"个人信息设置":跳转到个人信息设置
- 点击"修改密码"跳转到修改密码页
- 点击"退出登录"弹出确认弹窗,确认后退出
---
### 10. 咨询统计profile/stats.html
### 12. 个人信息设置profile/edit-profile.html
**功能说明:** 展示小助手的咨询工作量统计数据。
![页面截图](screenshots/edit-profile.jpg)
**功能说明:** 小助手编辑个人基本信息,支持更换头像和修改姓名。
**业务规则:**
- 数据概览2×2网格:今日完成、本周完成、本月完成、累计完成
- 本月咨询类型仅图文咨询(小助手不支持视频咨询)
- 近7日完成量以柱状图展示,今日高亮
- 头像区支持点击更换(拍照 / 相册选择)
- 姓名输入框可编辑
**交互说明:**
- 返回按钮跳转到个人中心主页
- 点击头像:弹出底部弹窗选择拍照或从相册选择
- 点击"保存":显示 Toast 提示保存成功
- 返回按钮:跳转到个人中心主页
---
### 11. 修改密码(profile/change-pwd.html
### 13. 修改密码(profile/change-pwd.html
![页面截图](screenshots/change-pwd.jpg)
**功能说明:** 小助手修改登录密码。
**业务规则:**
- 表单包含当前密码、新密码(至少8位)、确认新密码三个字段
- 表单包含当前密码、新密码(至少 8 位)、确认新密码三个字段
- 修改成功后弹窗提示
**交互说明:**
- 点击"保存修改"弹出修改成功弹窗
- 弹窗点击"确定"跳转到个人中心主页
- 点击"保存修改"弹出修改成功弹窗
- 弹窗点击"确定"跳转到个人中心主页
**表单字段表:**
| 字段名 | 类型 | 必填 | 规则 |
|--------|------|------|------|
| 当前密码 | password | 是 | - |
| 新密码 | password | 是 | 至少8位 |
| 确认新密码 | password | 是 | 与新密码一致 |
| 字段名 | 类型 | 必填 | 规则 |
|--------|------|------|-----------|
| 当前密码 | password | 是 | - |
| 新密码 | password | 是 | 跟当前系统规则一致 |
| 确认新密码 | password | 是 | 与新密码一致 |
---
## 共享模块说明
## 五、AI模块说明
以下模块为专家端和小助手端共用,通过 sessionStorage 的 `appRole` 标记区分当前端,动态设置底部导航栏的工作台返回目标。
### 12. AI 助手(../ai-assistant/index.html
### 14. AI 助手(../ai-assistant/index.html
**功能说明:** AI 智能助手,提供医学知识问答辅助
**功能说明:** 后续规划,暂时显示”开发中,敬请期待~”
**业务规则:**
- AI 回复为系统自动生成
- 底部 Tab 导航中"工作台"按钮根据 `appRole` 动态跳转到对应端的工作台
**交互说明:**
- 底部输入框输入问题,AI 自动回复
- 底部 Tab 导航切换到其他模块
---
### 13. 消息列表(../message/index.html
## 六、消息模块说明
### 15. 消息列表(../message/index.html
**功能说明:** 内部消息模块,展示与其他角色的消息列表。
@@ -261,13 +325,13 @@ stateDiagram-v2
- 每条消息显示联系人头像、姓名、角色标签、最后一条消息预览、时间
**交互说明:**
- 点击消息项跳转到 IM 聊天页
- 点击右上角通讯录图标跳转到通讯录页
- 点击消息项跳转到 IM 聊天页
- 点击右上角通讯录图标跳转到通讯录页
- 底部 Tab 导航切换到其他模块
---
### 14. 通讯录(../message/contacts.html
### 16. 通讯录(../message/contacts.html
**功能说明:** 展示系统内所有可联系的内部人员,支持按角色筛选和姓名搜索。
@@ -276,15 +340,17 @@ stateDiagram-v2
- 支持搜索和角色筛选
**交互说明:**
- 点击联系人跳转到 IM 聊天页
- 返回按钮跳转到消息列表
- 点击联系人跳转到 IM 聊天页
- 返回按钮跳转到消息列表
---
### 15. IM 聊天(../message/im-chat.html
### 17. IM 聊天(../message/im-chat.html
**功能说明:** 与内部人员的即时通讯聊天界面。
**交互说明:**
- 底部输入框输入文字并发送
- 返回按钮跳转到消息列表
- 返回按钮跳转到消息列表
@@ -0,0 +1,88 @@
/**
* 小助手端 APP 页面截图脚本
* 按规范:移除 phone-shell 高度限制、视口 390px、JPEG 85%
*/
import { chromium } from 'playwright';
import { fileURLToPath } from 'url';
import path from 'path';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const screenshotsDir = path.join(__dirname, 'screenshots');
// 小助手端所有页面
const pages = [
// 工作台
{ file: '../../assistant/workbench/index.html', name: 'index' },
{ file: '../../assistant/workbench/text-chat.html', name: 'text-chat' },
{ file: '../../assistant/workbench/text-chat-done.html', name: 'text-chat-done' },
{ file: '../../assistant/workbench/consult-done.html', name: 'consult-done' },
{ file: '../../assistant/workbench/text-consult-done.html', name: 'text-consult-done' },
{ file: '../../assistant/workbench/text-consult-timeout.html', name: 'text-consult-timeout' },
{ file: '../../assistant/workbench/employee-profile.html', name: 'employee-profile' },
{ file: '../../assistant/workbench/end-consult-dialog.html', name: 'end-consult-dialog' },
{ file: '../../assistant/workbench/push-expert.html', name: 'push-expert' },
// 知识库
{ file: '../../assistant/knowledge/index.html', name: 'knowledge-index' },
{ file: '../../assistant/knowledge/detail.html', name: 'knowledge-detail' },
// 个人中心
{ file: '../../assistant/profile/index.html', name: 'profile-index' },
{ file: '../../assistant/profile/edit-profile.html', name: 'edit-profile' },
{ file: '../../assistant/profile/change-pwd.html', name: 'change-pwd' },
];
(async () => {
const browser = await chromium.launch({
executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
args: ['--no-sandbox', '--disable-setuid-sandbox'],
});
const context = await browser.newContext({ viewport: { width: 390, height: 844 } });
for (const p of pages) {
const page = await context.newPage();
const filePath = path.resolve(__dirname, p.file);
await page.goto(`file:///${filePath.replace(/\\/g, '/')}`, { waitUntil: 'networkidle' });
// 移除 phone-shell 高度限制、圆角、阴影;展开内容
await page.evaluate(() => {
const shell = document.querySelector('.phone-shell');
if (shell) {
shell.style.height = 'auto';
shell.style.borderRadius = '0';
shell.style.boxShadow = 'none';
shell.style.overflow = 'visible';
}
const content = document.querySelector('.page-content') || document.querySelector('.scroll-content');
if (content) {
content.style.overflow = 'visible';
content.style.maxHeight = 'none';
content.style.height = 'auto';
content.style.flex = 'none';
}
document.body.style.padding = '0';
document.body.style.minHeight = 'auto';
document.body.style.background = '#fff';
});
await page.waitForTimeout(300);
const height = await page.evaluate(() => {
const shell = document.querySelector('.phone-shell');
return shell ? shell.scrollHeight : document.body.scrollHeight;
});
await page.setViewportSize({ width: 390, height: Math.max(height, 200) });
const shell = await page.$('.phone-shell');
const target = shell || page;
await target.screenshot({
path: path.join(screenshotsDir, `${p.name}.jpg`),
type: 'jpeg',
quality: 85,
});
console.log(`${p.name}.jpg`);
await page.close();
}
await browser.close();
console.log(`\n完成!共截取 ${pages.length} 张截图`);
})();
Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

@@ -50,7 +50,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
</div>
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">新密码</span>
<input type="password" placeholder="请输入新密码(至少8位)" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
<input type="password" placeholder="请输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
</div>
<div style="display:flex;align-items:center;padding:14px 16px;">
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">确认新密码</span>
-120
View File
@@ -1,120 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>咨询小助手 - 咨询统计 | 健康长庆原型</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
.scroll-content::-webkit-scrollbar { display: none; }
</style>
</head>
<body>
<div class="phone-shell">
<div class="status-bar">
<span class="time">9:41</span>
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
</div>
<div class="nav-bar">
<!-- [交互] 点击返回: ./index.html -->
<button class="back-btn" onclick="location.href='./index.html'">
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
</button>
<span class="nav-title">咨询统计</span>
</div>
<div class="scroll-content" style="padding:16px;">
<!-- 数据概览(2x2网格) -->
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:14px;">数据概览</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
<div style="background:#f0f7ff;border-radius:10px;padding:14px;text-align:center;">
<div style="font-size:26px;font-weight:700;color:#1677ff;">24</div>
<div style="font-size:12px;color:#666;margin-top:3px;">今日完成</div>
</div>
<div style="background:#f6ffed;border-radius:10px;padding:14px;text-align:center;">
<div style="font-size:26px;font-weight:700;color:#52c41a;">102</div>
<div style="font-size:12px;color:#666;margin-top:3px;">本周完成</div>
</div>
<div style="background:#fff7e6;border-radius:10px;padding:14px;text-align:center;">
<div style="font-size:26px;font-weight:700;color:#fa8c16;">436</div>
<div style="font-size:12px;color:#666;margin-top:3px;">本月完成</div>
</div>
<div style="background:#f9f0ff;border-radius:10px;padding:14px;text-align:center;">
<div style="font-size:26px;font-weight:700;color:#722ed1;">2,158</div>
<div style="font-size:12px;color:#666;margin-top:3px;">累计完成</div>
</div>
</div>
</div>
<!-- 本月咨询类型 -->
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:12px;">本月咨询类型</div>
<div style="display:flex;align-items:center;gap:10px;">
<span style="font-size:13px;color:#666;width:56px;flex-shrink:0;">图文咨询</span>
<div style="flex:1;height:10px;background:#f0f0f0;border-radius:5px;overflow:hidden;">
<div style="width:100%;height:100%;background:#1677ff;border-radius:5px;"></div>
</div>
<span style="font-size:13px;color:#1677ff;font-weight:600;width:36px;text-align:right;">436</span>
</div>
</div>
<!-- 近7日完成量柱状图 -->
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:12px;">近7日完成量</div>
<div style="display:flex;align-items:flex-end;justify-content:space-between;height:70px;gap:4px;">
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
<div style="font-size:10px;color:#999;">18</div>
<div style="width:100%;height:45%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
<div style="font-size:10px;color:#bbb;">4/4</div>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
<div style="font-size:10px;color:#999;">22</div>
<div style="width:100%;height:55%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
<div style="font-size:10px;color:#bbb;">4/5</div>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
<div style="font-size:10px;color:#999;">30</div>
<div style="width:100%;height:75%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
<div style="font-size:10px;color:#bbb;">4/6</div>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
<div style="font-size:10px;color:#999;">15</div>
<div style="width:100%;height:38%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
<div style="font-size:10px;color:#bbb;">4/7</div>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
<div style="font-size:10px;color:#999;">28</div>
<div style="width:100%;height:70%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
<div style="font-size:10px;color:#bbb;">4/8</div>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
<div style="font-size:10px;color:#999;">20</div>
<div style="width:100%;height:50%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
<div style="font-size:10px;color:#bbb;">4/9</div>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
<div style="font-size:10px;color:#1677ff;font-weight:600;">24</div>
<div style="width:100%;height:60%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
<div style="font-size:10px;color:#1677ff;font-weight:600;">今日</div>
</div>
</div>
</div>
<div style="height:16px;"></div>
</div>
</div>
</body>
</html>
@@ -1,119 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>咨询小助手 - 已完成咨询详情 | 健康长庆原型</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
.scroll-content::-webkit-scrollbar { display: none; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.tag-gray { background: #f5f5f5; color: #999; }
.profile-collapsible { background: #fff; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); overflow: hidden; }
</style>
</head>
<body>
<div class="phone-shell">
<!-- 状态栏 -->
<div class="status-bar">
<span class="time">9:41</span>
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
</div>
<!-- 导航栏 -->
<div class="nav-bar">
<!-- [交互] 点击返回: ./index.html -->
<button class="back-btn" onclick="location.href='./index.html'">
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
</button>
<span class="nav-title">咨询详情</span>
</div>
<!-- 滚动内容 -->
<div class="scroll-content" style="padding:16px;">
<!-- 员工信息卡 -->
<div style="background:#fff;border-radius:16px;padding:20px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
<div style="display:flex;align-items:center;gap:14px;margin-bottom:16px;">
<div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:28px;">👩</div>
<div>
<div style="font-size:17px;font-weight:700;color:#1a1a1a;">孙丽</div>
<div style="font-size:13px;color:#666;margin-top:2px;">行政部 · 行政专员</div>
</div>
<span class="tag tag-gray" style="margin-left:auto;">已完成</span>
</div>
<!-- 咨询信息 -->
<div style="background:#f7f8fa;border-radius:10px;padding:14px;">
<div style="font-size:13px;font-weight:600;color:#666;margin-bottom:10px;">📋 咨询信息</div>
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">咨询类型</span><span style="font-size:13px;color:#1a1a1a;">员工咨询</span></div>
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">发起时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-08 14:10</span></div>
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">完成时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-08 14:38</span></div>
<div style="display:flex;justify-content:space-between;padding:8px 0;"><span style="font-size:13px;color:#999;">员工评分</span><span style="font-size:13px;color:#fa8c16;font-weight:600;">⭐⭐⭐⭐⭐ 5.0</span></div>
</div>
</div>
<!-- 员工评价 -->
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:8px;">员工评价</div>
<div style="font-size:13px;color:#666;line-height:1.6;background:#fffbe6;border-radius:8px;padding:12px;border-left:3px solid #faad14;">"小助手回复很及时,解答很专业,帮我解决了体检报告的疑问,非常感谢!"</div>
</div>
<!-- [交互] 点击跳转至: ./text-chat.html 查看历史对话记录 -->
<div onclick="location.href='./text-chat.html'" style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;cursor:pointer;">
<span style="font-size:16px;margin-right:10px;">💬</span>
<span style="font-size:14px;color:#1a1a1a;flex:1;">查看历史对话记录</span>
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
</div>
<!-- 咨询人健康档案(可折叠) -->
<div class="profile-collapsible">
<!-- [交互] 点击展开/收起档案 -->
<div onclick="toggleProfile(this)" style="display:flex;justify-content:space-between;align-items:center;padding:14px 16px;cursor:pointer;">
<span style="font-size:14px;font-weight:600;color:#1a1a1a;">📋 咨询人健康档案</span>
<span class="profile-arrow" style="font-size:12px;color:#999;transition:transform 0.2s;"></span>
</div>
<div class="profile-body" style="display:none;padding:0 16px 14px;">
<div style="font-size:12px;font-weight:600;color:#1677ff;margin:4px 0 6px;">基本信息</div>
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">姓名</span><span style="font-size:13px;color:#1a1a1a;">孙丽</span></div>
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">性别 / 年龄</span><span style="font-size:13px;color:#1a1a1a;">女 / 26岁</span></div>
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">身高 / 体重</span><span style="font-size:13px;color:#1a1a1a;">160 cm / 50 kg</span></div>
<div style="font-size:12px;font-weight:600;color:#52c41a;margin:10px 0 6px;">生活习惯</div>
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">吸烟</span><span style="font-size:13px;color:#1a1a1a;"></span></div>
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">饮酒</span><span style="font-size:13px;color:#1a1a1a;"></span></div>
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">饮食喜好</span><span style="font-size:13px;color:#1a1a1a;">清淡</span></div>
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">睡眠质量</span><span style="font-size:13px;color:#1a1a1a;">良好</span></div>
<div style="font-size:12px;font-weight:600;color:#fa8c16;margin:10px 0 6px;">身体情况</div>
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">过敏史</span><span style="font-size:13px;color:#1a1a1a;"></span></div>
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">遗传史</span><span style="font-size:13px;color:#1a1a1a;"></span></div>
<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">既往史</span><span style="font-size:13px;color:#1a1a1a;"></span></div>
<div style="display:flex;justify-content:space-between;padding:6px 0;"><span style="font-size:13px;color:#999;">其他疾病</span><span style="font-size:13px;color:#1a1a1a;"></span></div>
</div>
</div>
<div style="height:16px;"></div>
</div>
</div>
<script>
function toggleProfile(el) {
var card = el.closest('.profile-collapsible');
var body = card.querySelector('.profile-body');
var arrow = card.querySelector('.profile-arrow');
var isOpen = body.style.display !== 'none';
body.style.display = isOpen ? 'none' : 'block';
if (arrow) arrow.style.transform = isOpen ? '' : 'rotate(180deg)';
}
</script>
</body>
</html>
@@ -249,7 +249,12 @@ function goBack() {
'expert-chat': '../../expert/workbench/text-chat.html',
'expert-chat-done': '../../expert/workbench/text-chat-done.html',
'expert-consult-done': '../../expert/workbench/text-consult-done.html',
'expert-consult-timeout': '../../expert/workbench/text-consult-timeout.html'
'expert-consult-timeout': '../../expert/workbench/text-consult-timeout.html',
'expert-video-appt': '../../expert/workbench/video-appt.html',
'expert-video-ongoing': '../../expert/workbench/video-ongoing.html',
'expert-video-done': '../../expert/workbench/video-done.html',
'expert-video-cancelled': '../../expert/workbench/video-cancelled.html',
'expert-video-rejected': '../../expert/workbench/video-rejected.html'
};
location.href = backMap[from] || './text-chat.html';
}
@@ -60,7 +60,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<!-- 咨询信息 -->
<div style="background:#f7f8fa;border-radius:10px;padding:14px;">
<div style="font-size:13px;font-weight:600;color:#666;margin-bottom:10px;">📋 咨询信息</div>
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">咨询类型</span><span style="font-size:13px;color:#1a1a1a;">图文咨询</span></div>
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">咨询对象</span><span style="font-size:13px;color:#1a1a1a;">咨询专家</span></div>
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">发起时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-08 08:10</span></div>
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">结束时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-08 08:40</span></div>
</div>
@@ -64,7 +64,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<!-- 咨询信息 -->
<div style="background:#f7f8fa;border-radius:10px;padding:14px;">
<div style="font-size:13px;font-weight:600;color:#666;margin-bottom:10px;">📋 咨询信息</div>
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">咨询类型</span><span style="font-size:13px;color:#1a1a1a;">图文咨询</span></div>
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">咨询对象</span><span style="font-size:13px;color:#1a1a1a;">咨询小助手</span></div>
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">咨询单号</span><span style="font-size:13px;color:#1a1a1a;">ZX202688552270</span></div>
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">发起时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-06 14:20</span></div>
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">结束时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-13 14:20</span></div>