yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 废弃专家/小助手详情页，图文咨询改用内联对话弹窗，对话气泡增加发送人名称

Browse Source 
- archive-personal-detail.html: 图文咨询和小助手查看对话从iframe加载废弃页面改为内联modal弹窗
- history-expert.html / history-assistant.html: 对话气泡上方新增发送人名称显示
- 删除废弃页面 history-expert-detail.html、history-assistant-detail.html
- 更新PRD文档和页面截图

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
2026-04-17 18:30:59 +08:00
co-authored by Claude Opus 4.6
parent 367391f568
commit fc38844eb9
21 changed files with 152 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -142,7 +142,7 @@ body { background: var(--background); font-family: -apple-system, BlinkMacSystem
<div class="header">
<div class="header__inner">
<div class="header__title">健康长庆升级项目 · 高保真交互原型</div>
<div class="header__sub">点击模块卡片跳转至对应模块主页，点击页数徽章查看全部页面</div>
<div class="header__sub">点击模块卡片跳转至对应模块主页，点击页数徽章查看全部页面，点击PRD文档在线预览详细功能说明</div>
</div>
<div class="tab-nav" id="tab-nav"></div>
</div>
web-admin/health-consult/archive-personal-detail.html
+84 -17
View File
@@ -91,6 +91,28 @@
.overlay-modal__close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0.04);border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#999;z-index:10;transition:all .15s;}
.overlay-modal__close:hover{background:rgba(0,0,0,0.08);color:#333;}
.overlay-modal iframe{border:none;display:block;}
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1000;align-items:center;justify-content:center;}
.modal.open{display:flex;}
.modal-content{background:#fff;border-radius:var(--radius-md);width:90%;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,0.15);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
.modal-title{font-size:var(--font-base);font-weight:600;}
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
.modal-close:hover{color:var(--text-primary);}
.modal-info{padding:16px 24px;background:#FAFAFA;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.modal-info-item{display:flex;flex-direction:column;gap:4px;}
.modal-info-label{font-size:var(--font-xs);color:var(--text-secondary);}
.modal-info-value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;}
.modal-body{padding:24px;}
.chat-message{display:flex;margin-bottom:16px;gap:12px;}
.chat-message.user{flex-direction:row-reverse;}
.chat-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);flex-shrink:0;}
.chat-message.user .chat-avatar{background:#E8E8E8;color:var(--text-primary);}
.chat-body{display:flex;flex-direction:column;max-width:70%;}
.chat-name{font-size:var(--font-xs);color:var(--text-secondary);margin-bottom:4px;}
.chat-message.user .chat-name{text-align:right;}
.chat-bubble{padding:12px 16px;border-radius:12px;background:#F0F0F0;color:var(--text-primary);font-size:var(--font-sm);line-height:1.6;word-break:break-word;}
.chat-message.user .chat-bubble{background:var(--primary);color:#fff;}
.chat-time{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;text-align:center;margin-bottom:12px;}
</style>
</head>
<body>
@@ -266,8 +288,8 @@
<td>2026-04-09 09:35</td>
<td>23分钟</td>
<td><span class="stars">★★★★★</span></td>
<!-- [交互] 图文咨询-已完成：查看对话，加载 history-expert-detail.html -->
<td class="col-fixed col-end"><span class="link" onclick="openExpertChat('ZJ20260409001')">查看对话</span></td>
<!-- [交互] 图文咨询-已完成：查看对话，弹出图文对话弹窗 -->
<td class="col-fixed col-end"><span class="link" onclick="openChat('张伟','李医生','长庆医院','心血管内科','2026-04-09 09:12')">查看对话</span></td>
</tr>
<tr>
<td class="col-fixed col-no">2</td>
@@ -302,7 +324,7 @@
<td>2026-04-07 14:30</td>
<td>30分钟</td>
<td><span class="stars">★★★★★</span></td>
<td class="col-fixed col-end"><span class="link" onclick="openExpertChat('ZJ20260407003')">查看对话</span></td>
<td class="col-fixed col-end"><span class="link" onclick="openChat('张伟','陈医生','西安交大一附院','骨科','2026-04-07 14:00')">查看对话</span></td>
</tr>
<tr>
<td class="col-fixed col-no">4</td>
@@ -375,8 +397,8 @@
<td>2026-04-14 08:35</td>
<td>2026-04-14 08:38</td>
<td>8分钟</td>
<!-- [交互] 查看对话，加载 history-assistant-detail.html -->
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('ZX20260414001')">查看对话</span></td>
<!-- [交互] 查看对话，弹出小助手对话弹窗 -->
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('张伟','健康小助手','2026-04-14 08:30')">查看对话</span></td>
</tr>
<tr>
<td class="col-fixed col-no">2</td>
@@ -386,7 +408,7 @@
<td>2026-04-13 09:50</td>
<td>2026-04-13 10:05</td>
<td>20分钟</td>
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('ZX20260413002')">查看对话</span></td>
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('张伟','健康小助手','2026-04-13 09:45')">查看对话</span></td>
</tr>
<tr>
<td class="col-fixed col-no">3</td>
@@ -396,7 +418,7 @@
<td>2026-04-12 14:02</td>
<td>—</td>
<td>35分钟</td>
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('ZX20260412003')">查看对话</span></td>
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('张伟','健康小助手','2026-04-12 14:00')">查看对话</span></td>
</tr>
<tr>
<td class="col-fixed col-no">4</td>
@@ -406,7 +428,7 @@
<td>2026-04-10 10:14</td>
<td>2026-04-10 10:15</td>
<td>3分钟</td>
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('ZX20260410004')">查看对话</span></td>
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('张伟','健康小助手','2026-04-10 10:12')">查看对话</span></td>
</tr>
<tr>
<td class="col-fixed col-no">5</td>
@@ -416,7 +438,7 @@
<td>2026-04-09 16:01</td>
<td>2026-04-09 16:08</td>
<td>8分钟</td>
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('ZX20260409005')">查看对话</span></td>
<td class="col-fixed col-end"><span class="link" onclick="openAssistantChat('张伟','健康小助手','2026-04-09 16:00')">查看对话</span></td>
</tr>
</tbody>
</table>
@@ -434,8 +456,8 @@
</main>
<!-- ⑥ overlay 弹窗 -->
<!-- [交互] 点击查看对话/查看详情时弹出，iframe 加载对应详情页 -->
<!-- ⑥ overlay 弹窗（视频咨询/已取消详情） -->
<!-- [交互] 点击查看详情时弹出，iframe 加载对应详情页 -->
<div class="overlay-modal" id="overlayModal">
<div class="overlay-modal__box" style="width:1100px;height:85vh;">
<button class="overlay-modal__close" onclick="closeOverlay()">✕</button>
@@ -443,6 +465,19 @@
</div>
</div>
<!-- ⑦ 图文咨询对话弹窗 -->
<!-- [交互] 图文咨询点击"查看对话"时弹出，展示对话内容 -->
<div class="modal" id="chatModal" onclick="if(event.target===this)closeChat()">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title" id="modalTitle">咨询对话</div>
<button class="modal-close" onclick="closeChat()">✕</button>
</div>
<div class="modal-info" id="chatInfo"></div>
<div class="modal-body" id="chatContent"></div>
</div>
</div>
<script>
// [交互] Tab 切换
function switchTab(tab) {
@@ -456,9 +491,29 @@
}
// [交互] 打开图文咨询对话弹窗
function openExpertChat(no) {
document.getElementById('overlayFrame').src = 'history-expert-detail.html';
document.getElementById('overlayModal').classList.add('open');
function openChat(name, expert, hospital, dept, time) {
document.getElementById('modalTitle').textContent = '咨询对话';
document.getElementById('chatInfo').innerHTML =
'<div class="modal-info-item"><div class="modal-info-label">员工姓名</div><div class="modal-info-value">' + name + '</div></div>' +
'<div class="modal-info-item"><div class="modal-info-label">咨询专家</div><div class="modal-info-value">' + expert + '</div></div>' +
'<div class="modal-info-item"><div class="modal-info-label">专家医院</div><div class="modal-info-value">' + hospital + '</div></div>' +
'<div class="modal-info-item"><div class="modal-info-label">专家科室</div><div class="modal-info-value">' + dept + '</div></div>' +
'<div class="modal-info-item"><div class="modal-info-label">发起咨询时间</div><div class="modal-info-value">' + time + '</div></div>' +
'<div class="modal-info-item"><div class="modal-info-label">咨询状态</div><div class="modal-info-value">已完成</div></div>';
document.getElementById('chatContent').innerHTML =
'<div class="chat-time">2026-04-09 09:12</div>' +
'<div class="chat-message user"><div class="chat-avatar">我</div><div class="chat-body"><div class="chat-name">' + name + '</div><div class="chat-bubble">您好，我最近感觉心悸，请问需要做什么检查？</div></div></div>' +
'<div class="chat-time">2026-04-09 09:25</div>' +
'<div class="chat-message"><div class="chat-avatar">医</div><div class="chat-body"><div class="chat-name">' + expert + '</div><div class="chat-bubble">您好，根据您的描述，建议先做心电图和心脏彩超检查，排除器质性心脏病。同时要注意休息，避免过度劳累。</div></div></div>' +
'<div class="chat-message user"><div class="chat-avatar">我</div><div class="chat-body"><div class="chat-name">' + name + '</div><div class="chat-bubble">好的，谢谢医生。那这些检查大概需要多少费用？</div></div></div>' +
'<div class="chat-time">2026-04-09 09:35</div>' +
'<div class="chat-message"><div class="chat-avatar">医</div><div class="chat-body"><div class="chat-name">' + expert + '</div><div class="chat-bubble">心电图大约100-200元，心脏彩超大约300-500元，具体费用可能因医院而异。建议您到当地医院咨询。</div></div></div>';
document.getElementById('chatModal').classList.add('open');
}
// [交互] 关闭图文对话弹窗
function closeChat() {
document.getElementById('chatModal').classList.remove('open');
}
// [交互] 打开视频/取消咨询详情弹窗
@@ -469,9 +524,21 @@
}
// [交互] 打开小助手对话弹窗
function openAssistantChat(no) {
document.getElementById('overlayFrame').src = 'history-assistant-detail.html';
document.getElementById('overlayModal').classList.add('open');
function openAssistantChat(name, assistant, time) {
document.getElementById('modalTitle').textContent = '咨询对话';
document.getElementById('chatInfo').innerHTML =
'<div class="modal-info-item"><div class="modal-info-label">员工姓名</div><div class="modal-info-value">' + name + '</div></div>' +
'<div class="modal-info-item"><div class="modal-info-label">咨询小助手</div><div class="modal-info-value">' + assistant + '</div></div>' +
'<div class="modal-info-item"><div class="modal-info-label">发起咨询时间</div><div class="modal-info-value">' + time + '</div></div>';
document.getElementById('chatContent').innerHTML =
'<div class="chat-time">2026-04-09 08:30</div>' +
'<div class="chat-message user"><div class="chat-avatar">我</div><div class="chat-body"><div class="chat-name">' + name + '</div><div class="chat-bubble">最近睡眠不好，有什么办法改善吗？</div></div></div>' +
'<div class="chat-time">2026-04-09 08:35</div>' +
'<div class="chat-message"><div class="chat-avatar">助</div><div class="chat-body"><div class="chat-name">' + assistant + '</div><div class="chat-bubble">您好，改善睡眠可以尝试以下方法：1.保持规律的作息时间 2.避免睡前使用电子产品 3.适度运动 4.放松身心，可以尝试冥想或深呼吸</div></div></div>' +
'<div class="chat-message user"><div class="chat-avatar">我</div><div class="chat-body"><div class="chat-name">' + name + '</div><div class="chat-bubble">谢谢，我会试试看</div></div></div>' +
'<div class="chat-time">2026-04-09 08:38</div>' +
'<div class="chat-message"><div class="chat-avatar">助</div><div class="chat-body"><div class="chat-name">' + assistant + '</div><div class="chat-bubble">不客气，希望能帮到您。如果问题持续，建议咨询专业医生。</div></div></div>';
document.getElementById('chatModal').classList.add('open');
}
// [交互] 关闭弹窗，清空 iframe src 防止后台播放
web-admin/health-consult/config-department.html
-5
View File
@@ -232,11 +232,6 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
导出列表数据
</button>
<!-- [交互] 点击查看导出任务列表 -->
<button class="btn btn-default">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
查看导出任务
</button>
</div>
<div class="table-card">
<div class="table-card__header">
web-admin/health-consult/config-disease.html
-4
View File
@@ -237,10 +237,6 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
导出列表数据
</button>
<button class="btn btn-default">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
查看导出任务
</button>
</div>
<div class="table-card">
web-admin/health-consult/config-hospital.html
-5
View File
@@ -281,11 +281,6 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
导出列表数据
</button>
<!-- [交互] 点击查看导出任务列表 -->
<button class="btn btn-default">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
查看导出任务
</button>
</div>
<div class="table-card">
web-admin/health-consult/config-phrase.html
-9
View File
@@ -224,10 +224,6 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
导出列表数据
</button>
<button class="btn btn-default">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
查看导出任务
</button>
</div>
<div class="table-card">
@@ -243,7 +239,6 @@
<th class="col-fixed col-fixed-2">常用语内容</th>
<th class="col-fixed col-fixed-3">分类</th>
<th>适用角色</th>
<th>使用次数</th>
<th>创建时间</th>
<th class="col-fixed col-fixed-end">操作</th>
</tr>
@@ -254,7 +249,6 @@
<td class="col-fixed col-fixed-2"><div class="phrase-text">您好！我是健康咨询小助手，很高兴为您服务。请问您有什么健康问题需要咨询？</div></td>
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">问候语</span></td>
<td><span class="tag tag-green">咨询小助手</span></td>
<td>1,234</td>
<td>2025-06-01</td>
<td class="col-fixed col-fixed-end">
<div style="display:flex;gap:8px;">
@@ -268,7 +262,6 @@
<td class="col-fixed col-fixed-2"><div class="phrase-text">您好，我是您的健康咨询专家，请详细描述您的症状，包括发病时间、症状表现及既往病史。</div></td>
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">问候语</span></td>
<td><span class="tag tag-purple">咨询专家</span></td>
<td>876</td>
<td>2025-06-01</td>
<td class="col-fixed col-fixed-end">
<div style="display:flex;gap:8px;">
@@ -282,7 +275,6 @@
<td class="col-fixed col-fixed-2"><div class="phrase-text">建议您尽快前往医院进行进一步检查，以便获得更准确的诊断和治疗方案。</div></td>
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">注意事项</span></td>
<td><span class="tag tag-green">通用</span></td>
<td>654</td>
<td>2025-07-15</td>
<td class="col-fixed col-fixed-end">
<div style="display:flex;gap:8px;">
@@ -296,7 +288,6 @@
<td class="col-fixed col-fixed-2"><div class="phrase-text">感谢您的咨询！如有其他健康问题，欢迎随时联系我们。祝您身体健康！</div></td>
<td class="col-fixed col-fixed-3"><span class="tag tag-blue">结束语</span></td>
<td><span class="tag tag-green">通用</span></td>
<td>543</td>
<td>2025-07-15</td>
<td class="col-fixed col-fixed-end">
<div style="display:flex;gap:8px;">
web-admin/health-consult/consult-record-detail.html
-4
View File
@@ -171,10 +171,6 @@
<div class="card">
<div class="card__title">
基本信息
<button class="btn btn-default">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
导出档案
</button>
</div>
<div class="info-grid">
<div class="info-item">
web-admin/health-consult/doc/PRD.md
+42 -70
View File
@@ -32,31 +32,6 @@
└── 结算报表
```
### 图文咨询状态流转
```mermaid
stateDiagram-v2
[*] --> 待回复 : 员工发起图文咨询
待回复 --> 进行中 : 专家首次回复
进行中 --> 已完成 : 任一方结束咨询
已完成 --> [*]
```
### 视频咨询状态流转
```mermaid
stateDiagram-v2
[*] --> 待确认 : 员工发起视频预约
待确认 --> 待开始 : 专家确认接诊
待确认 --> 已拒绝 : 专家拒绝
待确认 --> 已取消 : 员工取消
待开始 --> 已完成 : 视频通话结束
待开始 --> 已取消 : 员工取消
已完成 --> [*]
已拒绝 --> [*]
已取消 --> [*]
```
## 页面清单
### 咨询数据
@@ -127,45 +102,39 @@ stateDiagram-v2
![页面截图](screenshots/history-expert.jpg)
**功能说明：** 管理员查看所有员工向专家发起的咨询历史记录，支持多维度筛选、高级条件展开和数据导出。
**功能说明：** 管理员查看员工向专家发起的咨询历史记录，支持多维度筛选、高级条件展开和数据导出。
**筛选条件：** 年份（下拉，2026/2025/2024/2023）、咨询单号、姓名、员工编号、咨询类型（下拉，全部/图文咨询/视频咨询）、咨询状态（下拉，随咨询类型联动，见业务规则）、所属单位/部门（级联选择器，左列选单位，右列联动部门）；展开后可见：专家姓名、专家医院（下拉）、专家科室（下拉）、专家类型（下拉，收费专家/免费专家/其他专家）、发起咨询时间（日期范围）、首次回复时间（日期范围）
**表格列：** 序号、咨询单号、姓名、员工工号、所属单位、所属部门、咨询类型、咨询状态、咨询专家、专家职称、专家医院、专家科室、专家类型、发起咨询时间、首次回复时间、咨询完成时间、咨询时长、评分（星级）、操作
**业务规则：**
- 咨询状态随咨询类型联动：图文咨询状态为"待回复/进行中/已完成"；视频咨询状态为"待确认/待开始/已完成/已取消/已拒绝"
- 序号、咨询单号、姓名固定在表格左侧，操作列固定在右侧
- 分页支持 10/20 条每页切换
- 咨询状态随咨询类型联动：图文咨询状态为"待回复/进行中/已完成/已超时"；视频咨询状态为"待确认/待开始/已完成/已取消/已拒绝"
- 序号、咨询单号、员工信息固定在表格左侧，操作列固定在右侧
- 分页支持 10/20/50/100 条每页切换
**交互说明：**
- 点击"更多条件"展开/收起高级筛选区
- 点击"更多条件"展开/收起条件筛选区
- 图文咨询记录操作列显示"查看对话"，点击弹出对话模态框展示聊天气泡
- 视频咨询记录操作列显示"查看详情"，点击以 overlay iframe 弹窗加载对应状态的视频详情页
- 点击"导出列表数据"导出当前筛选结果
- 点击"导出列表数据"异步导出当前筛选结果
- 点击"查看导出任务"查看历史导出记录
---
### 2. 专家对话详情（history-expert-detail.html）
### 2. 专家对话详情（history-expert.html内嵌弹窗）
![页面截图](screenshots/history-expert-detail.jpg)
![页面截图](screenshots/history-expert-detail.png)
**功能说明：** 展示单次员工与专家图文咨询的完整对话记录，采用左右两栏布局。
**功能说明：** 展示单次员工与专家图文咨询的完整对话记录。
**左侧 — 对话记录区：**
- 头部元信息：咨询单号、咨询类型（图文咨询）、咨询状态、咨询时长、发起时间、结束时间
- 对话气泡：员工消息（右侧蓝色气泡）、专家消息（左侧灰色气泡）、系统消息（居中灰色标签）
**业务规则**
- 头部元信息：员工信息、咨询专家、专家医院、专家科室、咨询状态、发起时间、结束时间
- 对话气泡：员工消息、专家消息、小助手消息显示消息发送人的名称和图像、显示每条消息发送时间
- 支持图片消息展示（如体检报告图片）
**右侧 — 信息面板（3张卡片）：**
- 员工信息：姓名、工号、所属单位、职务、联系电话（脱敏显示）
- 专家信息：姓名、科室、职称、所属医院
- 评价信息：评分（星级+数值）、评价时间、评价文字
**交互说明：**
- 面包屑"员工咨询专家"可返回列表页
- 点击"打印记录"调用浏览器打印功能
- 关闭弹窗返回列表页
---
@@ -198,6 +167,8 @@ stateDiagram-v2
| 已拒绝 | video-detail-rejected.html | 红色 | 拒绝原因卡片（拒绝时间+拒绝原因） | 红色 |
| 已取消 | video-detail-cancelled.html | 灰色 | 取消原因卡片（取消人+取消时间+取消原因） | 灰色 |
<font size="2" color="red">备注：具体状态的颜色设定与APP端设计图中状态保持一致</font>
**业务规则：**
- 所有状态页面均为纯查看页面，管理端不提供操作按钮
- 已拒绝状态下整个面板的视觉色调变为红色，强化拒绝状态感知
@@ -210,14 +181,14 @@ stateDiagram-v2
![页面截图](screenshots/history-assistant.jpg)
**功能说明：** 管理员查看所有员工与 AI 小助手的咨询对话记录列表。
**功能说明：** 管理员查看所有员工与 小助手的咨询对话记录列表。
**筛选条件：** 年份、咨询单号、姓名、员工编号、所属单位/部门（级联选择器）、发起咨询时间（日期范围）
**表格列：** 序号、咨询单号、姓名、员工编号、所属单位、所属部门、咨询小助手、咨询状态、发起咨询时间、首次回复时间、咨询完成时间、咨询时长、操作
**业务规则：**
- 咨询状态值：已结束（灰色）、进行中（蓝色）、待回复（橙色）
- 咨询状态值：已结束、进行中、待回复
- 小助手咨询仅有文字对话，无咨询类型区分
- 无评分列（小助手咨询不支持评价）
@@ -227,28 +198,19 @@ stateDiagram-v2
---
### 9. 小助手对话详情（history-assistant-detail.html）
### 9. 小助手对话详情（history-assistant.html内嵌弹窗）
![页面截图](screenshots/history-assistant-detail.jpg)
![页面截图](screenshots/history-assistant-dialog.png)
**功能说明：** 展示员工与小助手的完整对话记录及会话统计，左右两栏布局。
**左侧 — 对话记录区：**
- 头部元信息：会话 ID、消息数、时长、转专家状态、起止时间
- 对话气泡：小助手消息（左侧绿色头像"助"）、员工消息（右侧蓝色头像）
- 转接专家通知条（橙色背景）：显示转接目标专家信息
- 系统消息：会话开始/结束标记
**右侧 — 信息面板：**
- 员工信息：姓名、工号、所属单位、职务
- 会话统计：总消息数、员工发送数、助手回复数、会话时长、是否转专家
**业务规则：**
- 小助手对话可触发"转专家"流程，转接后会话结束并标记转接目标专家
**业务规则**
- 头部元信息：员工姓名、小助手名称、发起时间、结束时间
- 对话气泡：员工消息、小助手消息显示消息发送人的名称和图像、显示每条消息发送时间
- 支持图片消息展示（如体检报告图片）
**交互说明：**
- 面包屑"员工咨询小助手"可返回列表页
- 点击"打印记录"调用浏览器打印功能
- 关闭弹窗返回列表页
---
@@ -268,7 +230,7 @@ stateDiagram-v2
- "2星及以下"筛选项明确标注为"差评"
**交互说明：**
- 点击"查看对话"弹出模态框展示咨询对话
- 点击"查看对话"弹出模态框展示咨询对话，样式同员工咨询专家中图文咨询查看对话
- 支持导出列表数据、查看导出任务
---
@@ -284,7 +246,7 @@ stateDiagram-v2
**表格列：** 序号、头像、姓名、员工编号、性别、年龄、单位、部门、手机号、咨询人数量、操作
**业务规则：**
- 档案按员工维度聚合，一个员工对应一条档案记录
- 档案按员工维度聚合，一个员工对应一条记录
- 咨询人数量统计该员工名下建立的所有咨询人（含本人和家属）
**交互说明：**
@@ -295,24 +257,31 @@ stateDiagram-v2
### 12. 咨询档案详情（consult-record-detail.html）
![页面截图](screenshots/consult-record-detail.jpg)
![页面截图](screenshots/consult-record-detail.png)
**功能说明：** 查看某位员工的完整档案，包括员工基本信息和其名下所有咨询人的健康档案。
**功能说明：** 查看某位员工的完整档案，包括员工基本信息和其名下所有咨询人信息以及咨询人档案。
**基本信息卡片（两列网格）：** 姓名、员工编号、性别、年龄、单位、部门、手机号、身份证号
**员工基本信息卡片（两列网格）：** 姓名、员工编号、性别、年龄、单位、部门、手机号、身份证号
**咨询人信息区域：** 通过 Tab 切换不同咨询人（如咨询人1/2/3），每个咨询人包含：
- 基本信息：咨询人姓名、性别、出生日期、与本人关系
- 生活习惯：是否抽烟、是否饮酒、饮食喜好、睡眠质量
- 身体情况：身高、体重、过敏史、遗传史、既往史、其他疾病
**咨询人档案信息：** 展示不同咨询人建立的档案列表，详细信息默认是收起状态，展开展示详细档案信息
- 档案名称
- 问题描述
- 持续时间
- 检查资料:显示图片缩略图，点击放大
- 是否前往医院就诊(是/否) 当用户选项为‘是’需要换行展示 【医院名称、科室、疾病名称】，当用户选项为‘否’隐藏这三个内容
- 期望帮助
**业务规则：**
- 一个员工可为多个家庭成员建立咨询档案（本人、父亲、母亲等）
- 一个员工可为多个家庭成员分别建立多个咨询档案（本人、父亲、母亲等）
- 与本人关系字段标识咨询人与员工的亲属关系
**交互说明：**
- 面包屑"咨询档案"可返回列表页
- 点击"导出档案"导出当前员工的完整档案
---
@@ -354,7 +323,10 @@ stateDiagram-v2
---
## 二、档案
--改到这里
## 二、档案
### 15. 个人咨询数据（archive-personal.html）
web-admin/health-consult/doc/screenshots/config-phrase.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 77 KiB

web-admin/health-consult/doc/screenshots/consult-record-detail.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 77 KiB

web-admin/health-consult/doc/screenshots/consult-record-detail.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

web-admin/health-consult/doc/screenshots/history-assistant-detail.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 92 KiB

web-admin/health-consult/doc/screenshots/history-assistant-dialog.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

web-admin/health-consult/doc/screenshots/history-expert-detail.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 107 KiB

web-admin/health-consult/doc/screenshots/history-expert-detail.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

web-admin/health-consult/history-assistant-detail.html
-200
View File
@@ -1,200 +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>
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
.top-bar__logo svg{width:28px;height:28px;}
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
.top-bar__nav a.active{color:#fff;background:var(--primary);}
.top-bar__right{display:flex;align-items:center;gap:16px;font-size:var(--font-sm);}
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
.sidebar-item.active{color:#fff;background:var(--primary);}
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
.sidebar-item--parent{justify-content:space-between;}
.sidebar-item__left{display:flex;align-items:center;gap:10px;}
.sidebar-item__arrow{font-size:10px;color:rgba(255,255,255,0.35);transition:transform .2s;flex-shrink:0;}
.sidebar-subitem{display:flex;align-items:center;padding:9px 24px 9px 50px;color:rgba(255,255,255,0.45);font-size:var(--font-xs);cursor:pointer;transition:all .2s;text-decoration:none;position:relative;}
.sidebar-subitem:hover{color:#fff;}
.sidebar-subitem.active{color:#fff;background:var(--primary);}
.sidebar-subitem.active::before{content:'';position:absolute;left:34px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#FAAD14;}
.main{margin-left:240px;margin-top:56px;padding:24px;}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:var(--font-sm);}
.breadcrumb a{color:var(--primary);text-decoration:none;}
.breadcrumb span{color:var(--text-secondary);}
.detail-layout{display:grid;grid-template-columns:1fr 280px;gap:20px;}
.chat-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
.chat-card__header{padding:20px 24px;border-bottom:1px solid var(--border);}
.chat-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.chat-meta__item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);}
.chat-meta__item strong{color:var(--text-primary);}
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
.tag-blue{background:var(--primary-light);color:var(--primary);}
.tag-green{background:#F6FFED;color:var(--success);}
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
.chat-card__body{padding:24px;max-height:calc(100vh - 300px);overflow-y:auto;display:flex;flex-direction:column;gap:16px;}
.msg{display:flex;gap:12px;align-items:flex-start;}
.msg.right{flex-direction:row-reverse;}
.msg__avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);font-weight:600;}
.msg__avatar.user{background:#E6F7FF;color:var(--primary);}
.msg__avatar.bot{background:#F6FFED;color:var(--success);}
.msg__content{}
.msg__name{font-size:var(--font-xs);color:var(--text-secondary);margin-bottom:4px;}
.msg.right .msg__name{text-align:right;}
.msg__bubble{background:#F5F7FA;border-radius:var(--radius-md);padding:12px 16px;font-size:var(--font-sm);line-height:1.7;max-width:520px;}
.msg.right .msg__bubble{background:var(--primary-light);}
.msg__time{font-size:var(--font-xs);color:#bbb;margin-top:4px;}
.msg.right .msg__time{text-align:right;}
.system-msg{text-align:center;font-size:var(--font-xs);color:#bbb;padding:4px 0;}
.transfer-notice{background:#FFF7E6;border:1px solid #FFD591;border-radius:var(--radius-sm);padding:10px 16px;font-size:var(--font-sm);color:var(--warning);text-align:center;}
.info-panel{display:flex;flex-direction:column;gap:16px;}
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:20px;}
.info-card__title{font-size:var(--font-sm);font-weight:600;margin-bottom:14px;}
.info-row{display:flex;justify-content:space-between;margin-bottom:10px;font-size:var(--font-sm);}
.info-row:last-child{margin-bottom:0;}
.info-row__label{color:var(--text-secondary);}
.info-row__value{color:var(--text-primary);}
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;width:100%;justify-content:center;}
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
</style>
</head>
<body>
<div class="top-bar">
<div class="top-bar__logo">
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
专家咨询–管理员
</div>
<nav class="top-bar__nav">
<a href="archive-personal.html">档案</a>
<a href="config-hospital.html">基础配置</a>
<a href="history-expert.html" class="active">咨询数据</a>
<a href="exception-dirty.html">异常事件</a>
</nav>
<div class="top-bar__right">
<div class="btn-back" onclick="history.back()">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
返回首页
</div>
<div class="avatar">管</div>
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
</div>
</div>
<aside class="sidebar">
<div class="sidebar-group-title">咨询数据</div>
<a href="history-expert.html" class="sidebar-item sidebar-item--parent open">
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询历史记录</div>
<span class="sidebar-item__arrow">▲</span>
</a>
<a href="history-expert.html" class="sidebar-subitem">员工咨询专家</a>
<a href="history-assistant.html" class="sidebar-subitem active">员工咨询小助手</a>
<a href="history-expert-assistant.html" class="sidebar-subitem">专家咨询小助手</a>
<a href="history-evaluation.html" class="sidebar-subitem">用户评价</a>
<a href="consult-record.html" class="sidebar-item">
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5h4M6 8h4M6 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询档案</div>
</a>
<a href="expert-statistics.html" class="sidebar-item">
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
</a>
<a href="unit-statistics.html" class="sidebar-item">
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
</a>
<a href="settlement.html" class="sidebar-item">
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
</a>
</aside>
<main class="main">
<div class="breadcrumb">
<a href="history-assistant.html">员工咨询小助手</a>
<span>›</span>
<span>对话详情 #AS20260409002</span>
</div>
<div class="detail-layout">
<div class="chat-card">
<div class="chat-card__header">
<div class="chat-meta">
<div class="chat-meta__item">会话ID：<strong>AS20260409002</strong></div>
<div class="chat-meta__item">消息数：<strong>18条</strong></div>
<div class="chat-meta__item">时长：<strong>15分钟</strong></div>
<div class="chat-meta__item">转专家：<span class="tag tag-blue">已转专家</span></div>
<div class="chat-meta__item">时间：<strong>2026-04-09 09:45</strong></div>
</div>
</div>
<div class="chat-card__body">
<div class="system-msg">会话开始 · 2026-04-09 09:45</div>
<div class="msg">
<div class="msg__avatar bot">助</div>
<div class="msg__content">
<div class="msg__name">咨询小助手</div>
<div class="msg__bubble">您好！我是健康咨询小助手，很高兴为您服务。请问您有什么健康问题需要咨询？</div>
<div class="msg__time">09:45</div>
</div>
</div>
<div class="msg right">
<div class="msg__avatar user">李</div>
<div class="msg__content">
<div class="msg__name">李明（员工）</div>
<div class="msg__bubble">我体检报告显示空腹血糖6.8，这是糖尿病吗？</div>
<div class="msg__time">09:46</div>
</div>
</div>
<div class="msg">
<div class="msg__avatar bot">助</div>
<div class="msg__content">
<div class="msg__name">咨询小助手</div>
<div class="msg__bubble">您好！空腹血糖6.8 mmol/L属于糖尿病前期（正常值为3.9-6.1 mmol/L，6.1-7.0为糖尿病前期，≥7.0为糖尿病）。<br><br>建议您：<br>1. 不要过于担心，糖尿病前期是可以逆转的<br>2. 控制饮食，减少精制碳水化合物摄入<br>3. 增加运动，每天至少30分钟中等强度运动<br>4. 建议咨询专科医生进行进一步评估</div>
<div class="msg__time">09:47</div>
</div>
</div>
<div class="msg right">
<div class="msg__avatar user">李</div>
<div class="msg__content">
<div class="msg__name">李明（员工）</div>
<div class="msg__bubble">我想咨询一下专科医生，能帮我转接吗？</div>
<div class="msg__time">09:58</div>
</div>
</div>
<div class="transfer-notice">
系统提示：员工申请转接专家咨询 · 09:58 · 已转接至内分泌科 王医生
</div>
<div class="system-msg">会话结束（已转专家）· 2026-04-09 10:00</div>
</div>
</div>
<div class="info-panel">
<div class="info-card">
<div class="info-card__title">员工信息</div>
<div class="info-row"><span class="info-row__label">姓名</span><span class="info-row__value">李明</span></div>
<div class="info-row"><span class="info-row__label">工号</span><span class="info-row__value">CQ002571</span></div>
<div class="info-row"><span class="info-row__label">所属单位</span><span class="info-row__value">采油二厂</span></div>
<div class="info-row"><span class="info-row__label">职务</span><span class="info-row__value">班长</span></div>
</div>
<div class="info-card">
<div class="info-card__title">会话统计</div>
<div class="info-row"><span class="info-row__label">总消息数</span><span class="info-row__value">18条</span></div>
<div class="info-row"><span class="info-row__label">员工发送</span><span class="info-row__value">9条</span></div>
<div class="info-row"><span class="info-row__label">助手回复</span><span class="info-row__value">9条</span></div>
<div class="info-row"><span class="info-row__label">会话时长</span><span class="info-row__value">15分钟</span></div>
<div class="info-row"><span class="info-row__label">转专家</span><span class="info-row__value" style="color:var(--primary);">是</span></div>
</div>
<button class="btn btn-default" onclick="window.print()">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 5V2h8v3M3 9H1V5h12v4h-2M3 9v3h8V9" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
打印记录
</button>
</div>
</div>
</main>
</body>
</html>
web-admin/health-consult/history-assistant.html
+8 -5
View File
@@ -103,7 +103,10 @@
.chat-message.user{flex-direction:row-reverse;}
.chat-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);flex-shrink:0;}
.chat-message.user .chat-avatar{background:#E8E8E8;color:var(--text-primary);}
.chat-bubble{max-width:70%;padding:12px 16px;border-radius:12px;background:#F0F0F0;color:var(--text-primary);font-size:var(--font-sm);line-height:1.6;word-break:break-word;}
.chat-body{display:flex;flex-direction:column;max-width:70%;}
.chat-name{font-size:var(--font-xs);color:var(--text-secondary);margin-bottom:4px;}
.chat-message.user .chat-name{text-align:right;}
.chat-bubble{padding:12px 16px;border-radius:12px;background:#F0F0F0;color:var(--text-primary);font-size:var(--font-sm);line-height:1.6;word-break:break-word;}
.chat-message.user .chat-bubble{background:var(--primary);color:#fff;}
.chat-time{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;text-align:center;margin-bottom:12px;}
@@ -428,21 +431,21 @@ function openChat(name, assistant, time) {
<div class="chat-time">2026-04-09 08:30</div>
<div class="chat-message user">
<div class="chat-avatar">我</div>
<div class="chat-bubble">最近睡眠不好，有什么办法改善吗？</div>
<div class="chat-body"><div class="chat-name">${name}</div><div class="chat-bubble">最近睡眠不好，有什么办法改善吗？</div></div>
</div>
<div class="chat-time">2026-04-09 08:35</div>
<div class="chat-message">
<div class="chat-avatar">助</div>
<div class="chat-bubble">您好，改善睡眠可以尝试以下方法：1.保持规律的作息时间 2.避免睡前使用电子产品 3.适度运动 4.放松身心，可以尝试冥想或深呼吸</div>
<div class="chat-body"><div class="chat-name">${assistant}</div><div class="chat-bubble">您好，改善睡眠可以尝试以下方法：1.保持规律的作息时间 2.避免睡前使用电子产品 3.适度运动 4.放松身心，可以尝试冥想或深呼吸</div></div>
</div>
<div class="chat-message user">
<div class="chat-avatar">我</div>
<div class="chat-bubble">谢谢，我会试试看</div>
<div class="chat-body"><div class="chat-name">${name}</div><div class="chat-bubble">谢谢，我会试试看</div></div>
</div>
<div class="chat-time">2026-04-09 08:38</div>
<div class="chat-message">
<div class="chat-avatar">助</div>
<div class="chat-bubble">不客气，希望能帮到您。如果问题持续，建议咨询专业医生。</div>
<div class="chat-body"><div class="chat-name">${assistant}</div><div class="chat-bubble">不客气，希望能帮到您。如果问题持续，建议咨询专业医生。</div></div>
</div>
`;
document.getElementById('chatModal').classList.add('open');
web-admin/health-consult/history-evaluation.html
+2 -2
View File
@@ -286,8 +286,8 @@
<tr>
<td class="col-fixed col-fixed-1">5</td>
<td class="col-fixed col-fixed-2" style="font-family:monospace;color:var(--text-secondary);">ZX20260406005</td>
<td class="col-fixed col-fixed-3">孙丽</td>
<td style="font-family:monospace;color:var(--text-secondary);">EMP005234</td>
<td class="col-fixed col-fixed-3">匿名用户</td>
<td style="font-family:monospace;color:var(--text-secondary);">--</td>
<td>孙医生</td>
<td>杭州邵逸夫医院</td>
<td>消化内科</td>
web-admin/health-consult/history-expert-detail.html
-256
View File
@@ -1,256 +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>
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
.top-bar__logo svg{width:28px;height:28px;}
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
.top-bar__nav a.active{color:#fff;background:var(--primary);}
.top-bar__right{display:flex;align-items:center;gap:16px;font-size:var(--font-sm);}
.btn-back-link{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
.btn-back-link:hover{color:#fff;}
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
.sidebar-item.active{color:#fff;background:var(--primary);}
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
.sidebar-item--parent{justify-content:space-between;}
.sidebar-item__left{display:flex;align-items:center;gap:10px;}
.sidebar-item__arrow{font-size:10px;color:rgba(255,255,255,0.35);transition:transform .2s;flex-shrink:0;}
.sidebar-subitem{display:flex;align-items:center;padding:9px 24px 9px 50px;color:rgba(255,255,255,0.45);font-size:var(--font-xs);cursor:pointer;transition:all .2s;text-decoration:none;position:relative;}
.sidebar-subitem:hover{color:#fff;}
.sidebar-subitem.active{color:#fff;background:var(--primary);}
.sidebar-subitem.active::before{content:'';position:absolute;left:34px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#FAAD14;}
.main{margin-left:240px;margin-top:56px;padding:24px;}
/* 面包屑 */
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:var(--font-sm);}
.breadcrumb a{color:var(--primary);text-decoration:none;}
.breadcrumb a:hover{color:#40a9ff;}
.breadcrumb span{color:var(--text-secondary);}
/* 布局 */
.detail-layout{display:grid;grid-template-columns:1fr 320px;gap:20px;}
/* 左侧对话区 */
.chat-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;}
.chat-card__header{padding:20px 24px;border-bottom:1px solid var(--border);}
.chat-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.chat-meta__item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);}
.chat-meta__item strong{color:var(--text-primary);}
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
.tag-blue{background:var(--primary-light);color:var(--primary);}
.tag-green{background:#F6FFED;color:var(--success);}
.tag-orange{background:#FFF7E6;color:var(--warning);}
.chat-card__body{padding:24px;flex:1;overflow-y:auto;max-height:calc(100vh - 320px);display:flex;flex-direction:column;gap:20px;}
/* 消息气泡 */
.msg{display:flex;gap:12px;align-items:flex-start;}
.msg.right{flex-direction:row-reverse;}
.msg__avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);font-weight:600;}
.msg__avatar.user{background:#E6F7FF;color:var(--primary);}
.msg__avatar.expert{background:#F6FFED;color:var(--success);}
.msg__content{}
.msg__name{font-size:var(--font-xs);color:var(--text-secondary);margin-bottom:4px;}
.msg.right .msg__name{text-align:right;}
.msg__bubble{background:#F5F7FA;border-radius:var(--radius-md);padding:12px 16px;font-size:var(--font-sm);line-height:1.7;max-width:520px;color:var(--text-primary);}
.msg.right .msg__bubble{background:var(--primary-light);color:var(--text-primary);}
.msg__time{font-size:var(--font-xs);color:#bbb;margin-top:4px;}
.msg.right .msg__time{text-align:right;}
.msg__img{width:160px;height:120px;border-radius:var(--radius-sm);object-fit:cover;background:#E8E8E8;display:flex;align-items:center;justify-content:center;color:#999;font-size:var(--font-xs);}
.system-msg{text-align:center;font-size:var(--font-xs);color:#bbb;padding:4px 0;}
/* 右侧信息面板 */
.info-panel{display:flex;flex-direction:column;gap:16px;}
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:20px;}
.info-card__title{font-size:var(--font-sm);font-weight:600;margin-bottom:14px;color:var(--text-primary);}
.info-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;font-size:var(--font-sm);}
.info-row:last-child{margin-bottom:0;}
.info-row__label{color:var(--text-secondary);flex-shrink:0;}
.info-row__value{color:var(--text-primary);text-align:right;max-width:180px;}
.stars{color:#FAAD14;}
.eval-content{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.6;margin-top:8px;padding:10px 12px;background:#FAFAFA;border-radius:var(--radius-sm);}
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;width:100%;justify-content:center;}
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
</style>
</head>
<body>
<div class="top-bar">
<div class="top-bar__logo">
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
专家咨询–管理员
</div>
<nav class="top-bar__nav">
<a href="archive-personal.html">档案</a>
<a href="config-hospital.html">基础配置</a>
<a href="history-expert.html" class="active">咨询数据</a>
<a href="exception-dirty.html">异常事件</a>
</nav>
<div class="top-bar__right">
<div class="btn-back-link" onclick="history.back()">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
返回首页
</div>
<div class="avatar">管</div>
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
</div>
</div>
<aside class="sidebar">
<div class="sidebar-group-title">咨询数据</div>
<a href="history-expert.html" class="sidebar-item sidebar-item--parent open">
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询历史记录</div>
<span class="sidebar-item__arrow">▲</span>
</a>
<a href="history-expert.html" class="sidebar-subitem active">员工咨询专家</a>
<a href="history-assistant.html" class="sidebar-subitem">员工咨询小助手</a>
<a href="history-expert-assistant.html" class="sidebar-subitem">专家咨询小助手</a>
<a href="history-evaluation.html" class="sidebar-subitem">用户评价</a>
<a href="consult-record.html" class="sidebar-item">
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5h4M6 8h4M6 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询档案</div>
</a>
<a href="expert-statistics.html" class="sidebar-item">
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
</a>
<a href="unit-statistics.html" class="sidebar-item">
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>单位咨询统计</div>
</a>
<a href="settlement.html" class="sidebar-item">
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
</a>
</aside>
<main class="main">
<!-- [交互] 面包屑导航 -->
<div class="breadcrumb">
<a href="history-expert.html">员工咨询专家</a>
<span>›</span>
<span>咨询详情 #ZX20260409001</span>
</div>
<div class="detail-layout">
<!-- 左侧对话记录 -->
<div class="chat-card">
<div class="chat-card__header">
<div class="chat-meta">
<div class="chat-meta__item">单号：<strong>ZX20260409001</strong></div>
<div class="chat-meta__item">类型：<span class="tag tag-blue">图文咨询</span></div>
<div class="chat-meta__item">状态：<span class="tag tag-green">已完成</span></div>
<div class="chat-meta__item">时长：<strong>23分钟</strong></div>
<div class="chat-meta__item">发起：<strong>2026-04-09 09:12</strong></div>
<div class="chat-meta__item">结束：<strong>2026-04-09 09:35</strong></div>
</div>
</div>
<div class="chat-card__body">
<div class="system-msg">咨询开始 · 2026-04-09 09:12</div>
<!-- 员工消息（右侧） -->
<div class="msg right">
<div class="msg__avatar user">张</div>
<div class="msg__content">
<div class="msg__name">张伟（员工）</div>
<div class="msg__bubble">您好，我最近经常感到心跳加速，有时候会有胸闷的感觉，特别是在爬楼梯或者快走的时候。这种情况已经持续了大概两周了，请问需要注意什么？</div>
<div class="msg__time">09:12</div>
</div>
</div>
<!-- 专家消息（左侧） -->
<div class="msg">
<div class="msg__avatar expert">李</div>
<div class="msg__content">
<div class="msg__name">李医生（心血管内科）</div>
<div class="msg__bubble">您好！根据您描述的症状，心跳加速和胸闷在活动后加重，需要引起重视。请问您有没有高血压、糖尿病等基础疾病？家族中有没有心脏病史？另外，您最近的睡眠和饮食情况如何？</div>
<div class="msg__time">09:15</div>
</div>
</div>
<!-- 员工消息 -->
<div class="msg right">
<div class="msg__avatar user">张</div>
<div class="msg__content">
<div class="msg__name">张伟（员工）</div>
<div class="msg__bubble">我有轻度高血压，在吃药控制。父亲有冠心病。最近工作比较忙，睡眠不太好，大概每天只睡5-6小时。我上传一下我最近的体检报告。</div>
<div class="msg__time">09:18</div>
</div>
</div>
<!-- 图片消息 -->
<div class="msg right">
<div class="msg__avatar user">张</div>
<div class="msg__content">
<div class="msg__name">张伟（员工）</div>
<div class="msg__img">[体检报告图片]</div>
<div class="msg__time">09:19</div>
</div>
</div>
<!-- 专家消息 -->
<div class="msg">
<div class="msg__avatar expert">李</div>
<div class="msg__content">
<div class="msg__name">李医生（心血管内科）</div>
<div class="msg__bubble">看了您的体检报告，您的血压控制在正常范围内，但心电图显示有轻度ST段改变。结合您的家族史和症状，建议您：<br><br>1. 尽快到医院做一个动态心电图（Holter）检查<br>2. 同时做心脏彩超排除器质性病变<br>3. 近期避免剧烈运动，注意休息<br>4. 保证充足睡眠，每天不少于7小时<br>5. 如果出现持续胸痛、呼吸困难，立即就医</div>
<div class="msg__time">09:28</div>
</div>
</div>
<!-- 员工消息 -->
<div class="msg right">
<div class="msg__avatar user">张</div>
<div class="msg__content">
<div class="msg__name">张伟（员工）</div>
<div class="msg__bubble">好的，谢谢医生！我明天就去医院检查。请问去哪个医院比较好？</div>
<div class="msg__time">09:32</div>
</div>
</div>
<!-- 专家消息 -->
<div class="msg">
<div class="msg__avatar expert">李</div>
<div class="msg__content">
<div class="msg__name">李医生（心血管内科）</div>
<div class="msg__bubble">建议您去西安交通大学第一附属医院或长庆油田职工医院的心血管内科就诊，挂心血管内科门诊即可。祝您早日康复！</div>
<div class="msg__time">09:35</div>
</div>
</div>
<div class="system-msg">咨询结束 · 2026-04-09 09:35</div>
</div>
</div>
<!-- 右侧信息面板 -->
<div class="info-panel">
<div class="info-card">
<div class="info-card__title">员工信息</div>
<div class="info-row"><span class="info-row__label">姓名</span><span class="info-row__value">张伟</span></div>
<div class="info-row"><span class="info-row__label">工号</span><span class="info-row__value">CQ001234</span></div>
<div class="info-row"><span class="info-row__label">所属单位</span><span class="info-row__value">采油一厂</span></div>
<div class="info-row"><span class="info-row__label">职务</span><span class="info-row__value">一线员工</span></div>
<div class="info-row"><span class="info-row__label">联系电话</span><span class="info-row__value">138****5678</span></div>
</div>
<div class="info-card">
<div class="info-card__title">专家信息</div>
<div class="info-row"><span class="info-row__label">姓名</span><span class="info-row__value">李医生</span></div>
<div class="info-row"><span class="info-row__label">科室</span><span class="info-row__value">心血管内科</span></div>
<div class="info-row"><span class="info-row__label">职称</span><span class="info-row__value">主任医师</span></div>
<div class="info-row"><span class="info-row__label">所属医院</span><span class="info-row__value">西安交大一附院</span></div>
</div>
<div class="info-card">
<div class="info-card__title">评价信息</div>
<div class="info-row"><span class="info-row__label">评分</span><span class="info-row__value stars">★★★★★ 5.0</span></div>
<div class="info-row"><span class="info-row__label">评价时间</span><span class="info-row__value">2026-04-09 09:40</span></div>
<div class="eval-content">专家回复很专业，解答了我的疑惑，建议也很实用，非常感谢！</div>
</div>
<button class="btn btn-default" onclick="window.print()">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 5V2h8v3M3 9H1V5h12v4h-2M3 9v3h8V9" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
打印记录
</button>
</div>
</div>
</main>
</body>
</html>
web-admin/health-consult/history-expert.html
+14 -7
View File
@@ -113,7 +113,10 @@
.chat-message.user{flex-direction:row-reverse;}
.chat-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);flex-shrink:0;}
.chat-message.user .chat-avatar{background:#E8E8E8;color:var(--text-primary);}
.chat-bubble{max-width:70%;padding:12px 16px;border-radius:12px;background:#F0F0F0;color:var(--text-primary);font-size:var(--font-sm);line-height:1.6;word-break:break-word;}
.chat-body{display:flex;flex-direction:column;max-width:70%;}
.chat-name{font-size:var(--font-xs);color:var(--text-secondary);margin-bottom:4px;}
.chat-message.user .chat-name{text-align:right;}
.chat-bubble{padding:12px 16px;border-radius:12px;background:#F0F0F0;color:var(--text-primary);font-size:var(--font-sm);line-height:1.6;word-break:break-word;}
.chat-message.user .chat-bubble{background:var(--primary);color:#fff;}
.chat-time{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;text-align:center;margin-bottom:12px;}
/* overlay 弹窗 */
@@ -467,7 +470,7 @@
<td>采油一厂</td>
<td>技术部</td>
<td><span class="tag tag-blue">图文咨询</span></td>
<td><span class="tag tag-green">已完成</span></td>
<td><span class="tag tag-gray">已超时</span></td>
<td>李医生</td>
<td>主任医师</td>
<td>长庆医院</td>
@@ -607,7 +610,7 @@ const deptMap = {
// 咨询状态映射
const consultStatusMap = {
'text': ['待回复', '进行中', '已完成'],
'text': ['待回复', '进行中', '已完成', '已超时'],
'video': ['待确认', '待开始', '已完成', '已取消', '已拒绝']
};
@@ -716,6 +719,10 @@ function openChat(name, expert, hospital, dept, time) {
<div class="modal-info-item">
<div class="modal-info-label">发起咨询时间</div>
<div class="modal-info-value">${time}</div>
</div>
<div class="modal-info-item">
<div class="modal-info-label">咨询状态</div>
<div class="modal-info-value">已完成</div>
</div>
`;
@@ -724,21 +731,21 @@ function openChat(name, expert, hospital, dept, time) {
<div class="chat-time">2026-04-09 09:12</div>
<div class="chat-message user">
<div class="chat-avatar">我</div>
<div class="chat-bubble">您好，我最近感觉心悸，请问需要做什么检查？</div>
<div class="chat-body"><div class="chat-name">${name}</div><div class="chat-bubble">您好，我最近感觉心悸，请问需要做什么检查？</div></div>
</div>
<div class="chat-time">2026-04-09 09:25</div>
<div class="chat-message">
<div class="chat-avatar">医</div>
<div class="chat-bubble">您好，根据您的描述，建议先做心电图和心脏彩超检查，排除器质性心脏病。同时要注意休息，避免过度劳累。</div>
<div class="chat-body"><div class="chat-name">${expert}</div><div class="chat-bubble">您好，根据您的描述，建议先做心电图和心脏彩超检查，排除器质性心脏病。同时要注意休息，避免过度劳累。</div></div>
</div>
<div class="chat-message user">
<div class="chat-avatar">我</div>
<div class="chat-bubble">好的，谢谢医生。那这些检查大概需要多少费用？</div>
<div class="chat-body"><div class="chat-name">${name}</div><div class="chat-bubble">好的，谢谢医生。那这些检查大概需要多少费用？</div></div>
</div>
<div class="chat-time">2026-04-09 09:35</div>
<div class="chat-message">
<div class="chat-avatar">医</div>
<div class="chat-bubble">心电图大约100-200元，心脏彩超大约300-500元，具体费用可能因医院而异。建议您到当地医院咨询。</div>
<div class="chat-body"><div class="chat-name">${expert}</div><div class="chat-bubble">心电图大约100-200元，心脏彩超大约300-500元，具体费用可能因医院而异。建议您到当地医院咨询。</div></div>
</div>
`;
document.getElementById('chatModal').classList.add('open');
共性需求说明.md
+1 -1
View File
@@ -262,7 +262,7 @@
- 按钮权限：页面内操作按钮根据权限控制显示/隐藏或启用/禁用
- 数据权限：所有业务数据默认按组织架构层级与登录用户管理范围进行隔离，禁止数据越权访问（如员工健康数据、单位活动、监测设备信息等）
- 数据权限：所有业务数据默认按组织架构层级与登录用户管理范围进行隔离，禁止数据越权访问（如涉及到员工信息的业务数据、单位活动、监测设备信息等），需要特殊处理或不做数据权限控制的板块会在对应板块的PRD文档中备注说明
- 接口权限：核心业务接口必须加权限校验，普通员工 Token 无法访问后台统计接口，管理员 Token 无法访问 APP 专用接口