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

feat: 小助手/专家工作台新增图文咨询完成页和已超时页面，优化多端页面交互

Browse Source 
- 小助手工作台新增图文咨询完成、咨询完成、已超时3个页面
- 专家工作台新增图文咨询完成、已超时2个页面，删除旧的咨询人详情和员工档案页
- 优化小助手工作台首页、聊天页、员工档案页交互和布局
- 优化专家工作台聊天页和咨询完成页
- 优化员工端已超时详情页和历史聊天记录页

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
liuyunqin
2026-04-16 18:11:40 +08:00
co-authored by Claude Opus 4.6
parent 29afceb3d0
commit 104ddd47cf
15 changed files with 699 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files
emergency-app/assistant/workbench/employee-profile.html
+16 -2
View File
@@ -113,8 +113,8 @@
<span class="icons"><span>&#9679;&#9679;&#9679;&#9679;</span><span>WiFi</span><span>&#128267;</span></span>
</div>
<div class="nav-bar">
<!-- [交互] 点击返回: ./text-chat.html -->
<a class="nav-back" onclick="location.href='./text-chat.html'">‹</a>
<!-- [交互] 点击返回: 根据来源页面动态返回 -->
<a class="nav-back" id="back-btn" onclick="goBack()">‹</a>
<span class="nav-title">咨询人档案</span>
</div>
@@ -240,5 +240,19 @@
</div>
</div>
<script>
/* 根据 URL 参数 from 决定返回目标 */
function goBack() {
var from = new URLSearchParams(location.search).get('from');
var backMap = {
'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'
};
location.href = backMap[from] || './text-chat.html';
}
</script>
</body>
</html>
emergency-app/assistant/workbench/index.html
+15 -15
View File
@@ -82,7 +82,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div class="seg-tabs" style="flex-shrink:0;">
<div class="seg-tab active" onclick="switchTab(this,'panel-pending')">待回复<span class="badge">3</span></div>
<div class="seg-tab" onclick="switchTab(this,'panel-ongoing')">进行中<span class="badge" style="background:#fa8c16;">2</span></div>
<div class="seg-tab" onclick="switchTab(this,'panel-done')">已完成</div>
<div class="seg-tab" onclick="switchTab(this,'panel-done')">已结束</div>
</div>
<!-- 内容区 -->
@@ -99,7 +99,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div class="consult-card" data-type="expert" onclick="location.href='./text-chat.html?type=expert'">
<div class="cc-top">
<div class="cc-avatar">👩</div>
<div class="cc-info"><div class="cc-name">张小红<span class="cc-role cc-role--expert">咨询专家</span></div><div class="cc-meta">研发部 · 工程师</div></div>
<div class="cc-info"><div class="cc-name">张小红<span class="cc-role cc-role--expert">咨询专家</span></div><div class="cc-meta">采油一厂 · XXX作业区</div></div>
<span class="tag tag-red">待回复</span>
</div>
<div class="cc-bottom">
@@ -111,7 +111,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div class="consult-card" data-type="expert no-reply" onclick="location.href='./text-chat.html?type=expert'">
<div class="cc-top">
<div class="cc-avatar">👨</div>
<div class="cc-info"><div class="cc-name">李建国<span class="cc-role cc-role--expert">咨询专家</span></div><div class="cc-meta">市场部 · 销售专员</div></div>
<div class="cc-info"><div class="cc-name">李建国<span class="cc-role cc-role--expert">咨询专家</span></div><div class="cc-meta">采油一厂 · XXX作业区</div></div>
<span class="tag tag-red">待回复</span>
</div>
<div class="cc-bottom">
@@ -123,7 +123,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div class="consult-card" data-type="assistant" onclick="location.href='./text-chat.html?type=assistant'">
<div class="cc-top">
<div class="cc-avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">👩</div>
<div class="cc-info"><div class="cc-name">王芳<span class="cc-role cc-role--assistant">咨询小助手</span></div><div class="cc-meta">人事部 · HR专员</div></div>
<div class="cc-info"><div class="cc-name">王芳<span class="cc-role cc-role--assistant">咨询小助手</span></div><div class="cc-meta">采油一厂 · XXX作业区</div></div>
<span class="tag tag-red">待回复</span>
</div>
<div class="cc-bottom">
@@ -145,7 +145,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div class="consult-card" data-type="expert" onclick="location.href='./text-chat.html?type=expert'">
<div class="cc-top">
<div class="cc-avatar">👨</div>
<div class="cc-info"><div class="cc-name">陈伟<span class="cc-role cc-role--expert">咨询专家</span></div><div class="cc-meta">技术部 · 开发工程师</div></div>
<div class="cc-info"><div class="cc-name">陈伟<span class="cc-role cc-role--expert">咨询专家</span></div><div class="cc-meta">采油一厂 · XXX作业区</div></div>
<span class="tag tag-blue">进行中</span>
</div>
<div class="cc-bottom">
@@ -157,7 +157,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div class="consult-card" data-type="assistant" onclick="location.href='./text-chat.html?type=assistant'">
<div class="cc-top">
<div class="cc-avatar" style="background:linear-gradient(135deg,#fff7e6,#ffd591);">👨</div>
<div class="cc-info"><div class="cc-name">刘海波<span class="cc-role cc-role--assistant">咨询小助手</span></div><div class="cc-meta">生产部 · 操作工</div></div>
<div class="cc-info"><div class="cc-name">刘海波<span class="cc-role cc-role--assistant">咨询小助手</span></div><div class="cc-meta">采油一厂 · XXX作业区</div></div>
<span class="tag tag-blue">进行中</span>
</div>
<div class="cc-bottom">
@@ -174,11 +174,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div class="filter-chip" data-filter="expert" onclick="toggleFilter(this)"><span class="filter-chip__check"></span>咨询专家</div>
<div class="filter-chip" data-filter="assistant" onclick="toggleFilter(this)"><span class="filter-chip__check"></span>咨询小助手</div>
</div>
<!-- [交互] 点击跳转至: ./text-chat.html?type=expert&status=done -->
<div class="consult-card" data-type="expert" onclick="location.href='./text-chat.html?type=expert&status=done'">
<!-- [交互] 点击跳转至: ./text-consult-done.html -->
<div class="consult-card" data-type="expert" onclick="location.href='./text-consult-done.html'">
<div class="cc-top">
<div class="cc-avatar">👨</div>
<div class="cc-info"><div class="cc-name">赵磊<span class="cc-role cc-role--expert">咨询专家</span></div><div class="cc-meta">运营部 · 运营专员</div></div>
<div class="cc-info"><div class="cc-name">赵磊<span class="cc-role cc-role--expert">咨询专家</span></div><div class="cc-meta">采油一厂 · XXX作业区</div></div>
<span class="tag tag-green">已完成</span>
</div>
<div class="cc-bottom">
@@ -186,11 +186,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<span class="cc-time">08:40</span>
</div>
</div>
<!-- [交互] 点击跳转至: ./text-chat.html?type=assistant&status=done -->
<div class="consult-card" data-type="assistant" onclick="location.href='./text-chat.html?type=assistant&status=done'">
<!-- [交互] 点击跳转至: ./text-consult-done.html -->
<div class="consult-card" data-type="assistant" onclick="location.href='./text-consult-done.html'">
<div class="cc-top">
<div class="cc-avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">👩</div>
<div class="cc-info"><div class="cc-name">孙丽<span class="cc-role cc-role--assistant">咨询小助手</span></div><div class="cc-meta">行政部 · 行政专员</div></div>
<div class="cc-info"><div class="cc-name">孙丽<span class="cc-role cc-role--assistant">咨询小助手</span></div><div class="cc-meta">采油一厂 · XXX作业区</div></div>
<span class="tag tag-green">已完成</span>
</div>
<div class="cc-bottom">
@@ -198,11 +198,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<span class="cc-time">昨天</span>
</div>
</div>
<!-- [交互] 点击跳转至: ./text-chat.html?type=assistant&status=done -->
<div class="consult-card" data-type="assistant" onclick="location.href='./text-chat.html?type=assistant&status=done'">
<!-- [交互] 点击跳转至: ./text-consult-timeout.html -->
<div class="consult-card" data-type="assistant" onclick="location.href='./text-consult-timeout.html'">
<div class="cc-top">
<div class="cc-avatar" style="background:linear-gradient(135deg,#f6ffed,#b7eb8f);">👩</div>
<div class="cc-info"><div class="cc-name">孙丽<span class="cc-role cc-role--assistant">咨询小助手</span></div><div class="cc-meta">行政部 · 行政专员</div></div>
<div class="cc-info"><div class="cc-name">孙丽<span class="cc-role cc-role--assistant">咨询小助手</span></div><div class="cc-meta">采油一厂 · XXX作业区</div></div>
<span class="tag tag-gray">已超时</span>
</div>
<div class="cc-bottom">
emergency-app/assistant/workbench/text-chat-done.html
+178
View File
@@ -0,0 +1,178 @@
<!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; }
.consult-card-msg { background: #fff; border: 1px solid #E8ECF1; border-radius: 12px; padding: 14px; max-width: 260px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: border-color .2s; }
.consult-card-msg:hover { border-color: #1677ff; }
.consult-card-msg__header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.consult-card-msg__avatar { width: 32px; height: 32px; border-radius: 50%; background: #EDE7F6; color: #5C3D99; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.consult-card-msg__name { font-size: 13px; font-weight: 600; color: #1a1a1a; }
.consult-card-msg__body-info { font-size: 11px; color: #999; margin-bottom: 8px; }
.consult-card-msg__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.consult-card-msg__desc { font-size: 12px; color: #722ed1; margin-bottom: 2px; }
.consult-card-msg__duration { font-size: 11px; color: #999; margin-bottom: 10px; }
.consult-card-msg__images { display: flex; gap: 8px; }
.consult-card-msg__img { width: 64px; height: 64px; border-radius: 6px; background: #F5F5F5; border: 1px solid #E8E8E8; position: relative; overflow: hidden; }
.consult-card-msg__img svg { width: 100%; height: 100%; }
.consult-card-msg__img-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.45); color: #fff; font-size: 10px; text-align: center; padding: 2px 0; line-height: 1.4; }
</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" id="nav-title">张小红 <span id="nav-tag" style="font-size:11px;font-weight:600;color:#1677ff;background:#e6f4ff;padding:2px 8px;border-radius:4px;vertical-align:middle;margin-left:4px;">咨询专家</span></span>
</div>
<!-- 咨询信息条 -->
<div id="consult-info" class="consult-info" style="background:#f0f7ff;padding:10px 16px;flex-shrink:0;border-bottom:1px solid #ddeeff;">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
<div style="display:flex;align-items:center;gap:6px;">
<!-- [交互] 点击收起/展开咨询信息详情 -->
<button id="toggle-info-btn" onclick="toggleConsultInfo()" style="background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;transition:transform .2s;">
<svg width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<span style="font-size:11px;color:#666;">2026-04-09 10:20 发起</span>
</div>
<!-- [交互] 点击跳转至: ./employee-profile.html -->
<button onclick="location.href='./employee-profile.html'" style="font-size:12px;color:#1677ff;background:none;border:1px solid #1677ff;border-radius:6px;padding:4px 10px;cursor:pointer;">咨询人档案</button>
</div>
<div id="consult-info-detail" style="display:flex;gap:12px;">
<div style="flex:1;display:flex;align-items:center;gap:8px;">
<div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;">👩</div>
<div>
<div style="font-size:12px;color:#999;">员工</div>
<div style="font-size:12px;font-weight:600;color:#1a1a1a;">张小红 · 女 · 28岁 · 采油一厂 · XXX作业区</div>
</div>
</div>
<div style="width:1px;background:#ddeeff;" id="info-divider"></div>
<div style="flex:1;display:flex;align-items:center;gap:8px;" id="expert-info">
<div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;">👨‍⚕</div>
<div>
<div style="font-size:12px;color:#999;">专家</div>
<div style="font-size:12px;font-weight:600;color:#1a1a1a;">王医生 · 主任医师 · 长庆医院 · 内科</div>
</div>
</div>
</div>
</div>
<!-- 消息区 -->
<div class="scroll-content" id="chat-scroll" style="padding:12px 16px;">
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">10:20</span></div>
<!-- 员工卡片消息（左侧） -->
<div style="display:flex;gap:8px;margin-bottom:14px;">
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
<div>
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
<!-- [交互] 点击跳转至: ./employee-profile.html -->
<div class="consult-card-msg" onclick="location.href='./employee-profile.html'">
<div class="consult-card-msg__header">
<div class="consult-card-msg__avatar">张</div>
<div class="consult-card-msg__name">张小红(本人) · 28岁 · 女</div>
</div>
<div class="consult-card-msg__body-info">165cm · 55kg · 不吸烟 · 睡眠一般</div>
<div class="consult-card-msg__title">持续性头痛咨询</div>
<div class="consult-card-msg__desc">最近总是头痛，尤其是下午工作时特别明显</div>
<div class="consult-card-msg__duration">持续时间：近1周</div>
<div class="consult-card-msg__images">
<div class="consult-card-msg__img"><svg viewBox="0 0 64 64" fill="none"><rect width="64" height="64" fill="#F5F5F5"/><rect x="12" y="16" width="40" height="32" rx="3" fill="#fff" stroke="#D9D9D9" stroke-width="1.2"/><circle cx="26" cy="28" r="5" fill="#D9D9D9"/><path d="M12 42l10-8 6 5 12-10 12 13" fill="#E8E8E8"/></svg><div class="consult-card-msg__img-label">图片</div></div>
<div class="consult-card-msg__img"><svg viewBox="0 0 64 64" fill="none"><rect width="64" height="64" fill="#F5F5F5"/><rect x="12" y="16" width="40" height="32" rx="3" fill="#fff" stroke="#D9D9D9" stroke-width="1.2"/><circle cx="26" cy="28" r="5" fill="#D9D9D9"/><path d="M12 42l10-8 6 5 12-10 12 13" fill="#E8E8E8"/></svg><div class="consult-card-msg__img-label">图片</div></div>
</div>
</div>
</div>
</div>
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">10:23</span></div>
<!-- 小助手消息（右侧） -->
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">🤖</div>
<div style="display:flex;flex-direction:column;align-items:flex-end;">
<div style="font-size:11px;color:#999;margin-bottom:4px;">小助手（我）</div>
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">您好，头痛持续一周需要重视。请问头痛的位置主要在哪里？是否伴有恶心、视力模糊等症状？</div>
</div>
</div>
<!-- 员工回复 -->
<div style="display:flex;gap:8px;margin-bottom:14px;">
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
<div>
<div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">主要是太阳穴两侧，有时候会有点恶心，但没有视力问题。</div>
</div>
</div>
<!-- 结束卡片消息 -->
<div id="end-card" style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">🤖</div>
<div style="display:flex;flex-direction:column;align-items:flex-end;">
<div style="font-size:11px;color:#999;margin-bottom:4px;">小助手（我）</div>
<div style="background:#fff;border-radius:12px 0 12px 12px;padding:20px 24px;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);border:1px solid #f0f0f0;text-align:center;">
<div style="margin:0 auto 10px;width:44px;height:44px;border-radius:10px;background:#52c41a;display:flex;align-items:center;justify-content:center;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 12.5l4 4 8-8" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div style="font-size:15px;font-weight:600;color:#1a1a1a;margin-bottom:6px;">已结束本次咨询</div>
<div style="font-size:12px;color:#999;line-height:1.5;">2026-04-15 09:35</div>
</div>
</div>
</div>
<div style="height:8px;"></div>
</div>
<!-- 底部已结束提示条 -->
<div id="end-bar" style="background:#f5f5f5;border-top:1px solid #f0f0f0;padding:14px 16px;text-align:center;flex-shrink:0;">
<span id="end-bar-text" style="font-size:13px;color:#999;">— 咨询已结束 —</span>
</div>
</div>
<script>
/* 根据URL参数判断咨询类型，调整UI */
var consultType = new URLSearchParams(location.search).get('type') || 'expert';
if (consultType === 'assistant') {
var tag = document.getElementById('nav-tag');
tag.textContent = '咨询小助手';
tag.style.color = '#722ed1';
tag.style.background = '#f9f0ff';
document.getElementById('info-divider').style.display = 'none';
document.getElementById('expert-info').style.display = 'none';
}
var infoCollapsed = false;
function toggleConsultInfo() {
infoCollapsed = !infoCollapsed;
var detail = document.getElementById('consult-info-detail');
var btn = document.getElementById('toggle-info-btn');
detail.style.display = infoCollapsed ? 'none' : 'flex';
btn.style.transform = infoCollapsed ? 'rotate(-90deg)' : '';
detail.previousElementSibling.style.marginBottom = infoCollapsed ? '0' : '8px';
}
/* 已超时状态：隐藏结束卡片，更改底部文案 */
var consultStatus = new URLSearchParams(location.search).get('status');
if (consultStatus === 'timeout') {
document.getElementById('end-card').style.display = 'none';
document.getElementById('end-bar-text').textContent = '— 长时间未回复系统已自动结束本次咨询 —';
}
</script>
</body>
</html>
emergency-app/assistant/workbench/text-chat.html
+1 -31
View File
@@ -75,7 +75,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;">👩</div>
<div>
<div style="font-size:12px;color:#999;">员工</div>
<div style="font-size:12px;font-weight:600;color:#1a1a1a;">张小红 · 女 · 28岁 · 采油一厂</div>
<div style="font-size:12px;font-weight:600;color:#1a1a1a;">张小红 · 女 · 28岁 · 采油一厂 · xxx作业区</div>
</div>
</div>
<div style="width:1px;background:#ddeeff;" id="info-divider"></div>
@@ -200,36 +200,6 @@ if (consultType === 'assistant') {
document.getElementById('expert-info').style.display = 'none';
}
/* 已结束咨询：隐藏结束按钮、替换输入区、追加结束卡片 */
var consultStatus = new URLSearchParams(location.search).get('status');
if (consultStatus === 'done') {
document.getElementById('end-consult-btn').style.display = 'none';
// 隐藏输入区、常用语面板、媒体面板
document.getElementById('input-area').style.display = 'none';
document.getElementById('quick-panel').style.display = 'none';
document.getElementById('media-panel').style.display = 'none';
// 插入底部已结束提示条
var endBar = document.createElement('div');
endBar.style.cssText = 'background:#f5f5f5;border-top:1px solid #f0f0f0;padding:14px 16px;text-align:center;flex-shrink:0;';
endBar.innerHTML = '<span style="font-size:13px;color:#999;">— 咨询已结束 —</span>';
document.getElementById('input-area').insertAdjacentElement('afterend', endBar);
// 在聊天区末尾追加结束卡片消息
var scroll = document.getElementById('chat-scroll');
var endMsg = document.createElement('div');
endMsg.style.cssText = 'display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;';
endMsg.innerHTML =
'<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">🤖</div>' +
'<div style="display:flex;flex-direction:column;align-items:flex-end;">' +
'<div style="font-size:11px;color:#999;margin-bottom:4px;">小助手（我）</div>' +
'<div style="background:#fff;border-radius:12px 0 12px 12px;padding:20px 24px;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);border:1px solid #f0f0f0;text-align:center;">' +
'<div style="margin:0 auto 10px;width:44px;height:44px;border-radius:10px;background:#52c41a;display:flex;align-items:center;justify-content:center;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 12.5l4 4 8-8" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>' +
'<div style="font-size:15px;font-weight:600;color:#1a1a1a;margin-bottom:6px;">已结束本次咨询</div>' +
'<div style="font-size:12px;color:#999;line-height:1.5;">2026-04-15 09:35</div>' +
'</div>' +
'</div>';
scroll.appendChild(endMsg);
scroll.scrollTop = scroll.scrollHeight;
}
var infoCollapsed = false;
function toggleConsultInfo() {
emergency-app/assistant/workbench/text-consult-done.html
+88
View File
@@ -0,0 +1,88 @@
<!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; }
/* 标签 */
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.tag-green { background: #f6ffed; color: #52c41a; }
</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,#e8f4ff,#bdd7ff);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;">采油一厂 · xxx作业区</div>
</div>
<span class="tag tag-green" 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 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>
</div>
<!-- [交互] 点击跳转至: ./text-chat-done.html 查看历史对话记录 -->
<div onclick="location.href='./text-chat-done.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>
<!-- [交互] 点击跳转至: ./employee-profile.html 查看咨询人健康档案 -->
<div onclick="location.href='./employee-profile.html?from=assistant-consult-done'" style="background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;padding:14px 16px;cursor:pointer;">
<span style="font-size:16px;margin-right:10px;">📋</span>
<span style="font-size:14px;font-weight:600;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 style="height:16px;"></div>
</div>
</div>
</body>
</html>
emergency-app/assistant/workbench/text-consult-timeout.html
+99
View File
@@ -0,0 +1,99 @@
<!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; }
/* 标签 */
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.tag-orange { background: #fff2e8; color: #d4380d; }
/* 超时提示卡片 */
.timeout-notice { margin-bottom: 12px; background: #fff2e8; border-radius: 14px; padding: 16px; border-left: 4px solid #d4380d; }
.timeout-notice__title { font-size: 14px; font-weight: 600; color: #d4380d; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.timeout-notice__content { font-size: 13px; color: #ad4e00; line-height: 1.6; }
</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,#e8f4ff,#bdd7ff);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;">采油一厂 · xxx作业区</div>
</div>
<span class="tag tag-orange" 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;">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>
</div>
</div>
<!-- 超时提示卡片 -->
<div class="timeout-notice">
<div class="timeout-notice__title">⏰ 咨询已超时</div>
<div class="timeout-notice__content">超过七天无回复，本次咨询已自动关闭。</div>
</div>
<!-- [交互] 点击跳转至: ./text-chat-done.html 查看历史对话记录 -->
<div onclick="location.href='./text-chat-done.html?status=timeout'" 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>
<!-- [交互] 点击跳转至: ./employee-profile.html 查看咨询人健康档案 -->
<div onclick="location.href='./employee-profile.html?from=assistant-consult-timeout'" style="background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;padding:14px 16px;cursor:pointer;">
<span style="font-size:16px;margin-right:10px;">📋</span>
<span style="font-size:14px;font-weight:600;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 style="height:16px;"></div>
</div>
</div>
</body>
</html>
emergency-app/expert/workbench/consult-person-detail.html
-156
View File
@@ -1,156 +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; }
.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 { font-size: 17px; font-weight: 600; color: #1a1a1a; margin-left: 8px; }
/* 页面内容 */
.page-content { flex: 1; overflow-y: auto; padding: 0 0 34px; background: #f7f8fa; }
.page-content::-webkit-scrollbar { display: none; }
/* 个人信息头部 */
.profile-header { background: linear-gradient(135deg, #e8f4ff, #d6e8ff); padding: 20px 16px 16px; display: flex; align-items: center; gap: 14px; }
.profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.profile-info { flex: 1; }
.profile-name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.profile-meta { font-size: 13px; color: #555; margin-top: 4px; }
/* 信息卡片 */
.info-card { background: #fff; border-radius: 14px; margin: 12px 16px 0; padding: 16px; }
.info-card__title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.info-item__label { font-size: 12px; color: #999; margin-bottom: 2px; }
.info-item__value { font-size: 14px; color: #333; font-weight: 500; }
/* 生活习惯标签 */
.habit-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.habit-tag { font-size: 13px; padding: 6px 14px; border-radius: 20px; background: #f5f5f5; color: #555; }
.habit-tag--good { background: #f6ffed; color: #389e0d; }
.habit-tag--warn { background: #fff7e6; color: #d46b08; }
/* 健康档案卡片 */
.record-card { background: #fff; border-radius: 14px; margin: 12px 16px 0; overflow: hidden; }
.record-card__header { padding: 14px 16px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f5f5f5; }
.record-card__icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #e8f4ff, #bae0ff); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.record-card__title { font-size: 15px; font-weight: 600; color: #333; }
.record-card__date { font-size: 12px; color: #999; margin-top: 2px; }
.record-card__body { padding: 12px 16px 14px; }
.record-card__section { margin-bottom: 12px; }
.record-card__section:last-child { margin-bottom: 0; }
.record-card__label { font-size: 12px; color: #999; margin-bottom: 4px; }
.record-card__text { font-size: 14px; color: #333; line-height: 1.6; }
.record-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.record-card__tag { font-size: 11px; padding: 3px 8px; border-radius: 6px; }
.record-card__tag--blue { color: #1677ff; background: #e8f4ff; }
.record-card__tag--orange { color: #d46b08; background: #fff7e6; }
.record-card__tag--red { color: #cf1322; background: #fff1f0; }
.record-card__images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.record-card__img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; border: 1px solid #f0f0f0; background: #f5f5f5; }
</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">
<!-- [交互] 点击返回: ./text-chat.html -->
<button class="back-btn" onclick="history.back()">
<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>
<!-- PLACEHOLDER_CONTENT -->
<div class="page-content">
<!-- 个人信息头部 -->
<div class="profile-header">
<div class="profile-avatar">👩</div>
<div class="profile-info">
<div class="profile-name">张小红</div>
<div class="profile-meta">女 · 28岁 · 165cm · 50kg</div>
</div>
</div>
<!-- 基本信息 -->
<div class="info-card">
<div class="info-card__title">📋 基本信息</div>
<div class="info-grid">
<div class="info-item"><div class="info-item__label">姓名</div><div class="info-item__value">张小红</div></div>
<div class="info-item"><div class="info-item__label">性别</div><div class="info-item__value">女</div></div>
<div class="info-item"><div class="info-item__label">年龄</div><div class="info-item__value">28岁</div></div>
<div class="info-item"><div class="info-item__label">身高</div><div class="info-item__value">165cm</div></div>
<div class="info-item"><div class="info-item__label">体重</div><div class="info-item__value">50kg</div></div>
<div class="info-item"><div class="info-item__label">血型</div><div class="info-item__value">A型</div></div>
</div>
</div>
<!-- 生活习惯 -->
<div class="info-card">
<div class="info-card__title">🏃 生活习惯</div>
<div class="habit-tags">
<span class="habit-tag habit-tag--good">不吸烟</span>
<span class="habit-tag habit-tag--good">不饮酒</span>
<span class="habit-tag habit-tag--good">饮食均衡</span>
<span class="habit-tag habit-tag--warn">睡眠一般</span>
</div>
</div>
<!-- 身体情况 -->
<div class="info-card">
<div class="info-card__title">🩺 身体情况</div>
<div class="info-grid">
<div class="info-item"><div class="info-item__label">过敏史</div><div class="info-item__value">青霉素过敏</div></div>
<div class="info-item"><div class="info-item__label">遗传史</div><div class="info-item__value">无</div></div>
<div class="info-item"><div class="info-item__label">既往史</div><div class="info-item__value">无</div></div>
<div class="info-item"><div class="info-item__label">其他疾病</div><div class="info-item__value">无</div></div>
</div>
</div>
<!-- 本次咨询档案 -->
<div class="record-card">
<div class="record-card__header">
<div class="record-card__icon">📋</div>
<div>
<div class="record-card__title">头痛咨询</div>
<div class="record-card__date">2026-04-13 创建</div>
</div>
</div>
<div class="record-card__body">
<div class="record-card__section">
<div class="record-card__label">问题描述</div>
<div class="record-card__text">最近总是头痛，尤其是下午工作时特别明显，主要在太阳穴两侧，有时伴有恶心，已持续一周。</div>
</div>
<div class="record-card__section">
<div class="record-card__label">持续时间</div>
<div class="record-card__tags">
<span class="record-card__tag record-card__tag--orange">1周</span>
</div>
</div>
<div class="record-card__section">
<div class="record-card__label">检查资料</div>
<div class="record-card__images">
<img class="record-card__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect fill='%23e8f4ff' width='80' height='80'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%231677ff' font-size='11'%3E检查报告%3C/text%3E%3C/svg%3E" alt="检查报告">
<img class="record-card__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect fill='%23fff7e6' width='80' height='80'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23d46b08' font-size='11'%3ECT片%3C/text%3E%3C/svg%3E" alt="CT片">
</div>
</div>
<div class="record-card__section">
<div class="record-card__label">期望帮助</div>
<div class="record-card__text">希望了解头痛的具体原因，是否需要进一步检查，以及日常缓解方案。</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
emergency-app/expert/workbench/employee-profile.html
-82
View File
@@ -1,82 +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">
<!-- [交互] 点击返回: ./text-chat.html -->
<button class="back-btn" onclick="location.href='./text-chat.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;text-align:center;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
<div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 12px;">👩</div>
<div style="font-size:18px;font-weight:700;color:#1a1a1a;">张小红</div>
<div style="font-size:13px;color:#666;margin-top:4px;">研发部 · 工程师</div>
</div>
<!-- 详细信息列表 -->
<div style="background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
<!-- 基本信息 -->
<div style="font-size:13px;font-weight:600;color:#1677ff;margin-bottom:8px;">基本信息</div>
<div style="display:flex;justify-content:space-between;padding:9px 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:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">性别 / 年龄</span><span style="font-size:13px;color:#1a1a1a;">女 / 28岁</span></div>
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">身高 / 体重</span><span style="font-size:13px;color:#1a1a1a;">163 cm / 52 kg</span></div>
<!-- 生活习惯 -->
<div style="font-size:13px;font-weight:600;color:#52c41a;margin:12px 0 8px;">生活习惯</div>
<div style="display:flex;justify-content:space-between;padding:9px 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:9px 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:9px 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:9px 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:13px;font-weight:600;color:#fa8c16;margin:12px 0 8px;">身体情况</div>
<!-- 过敏史高亮红色 -->
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">过敏史</span><span style="font-size:13px;color:#ff4d4f;font-weight:600;">青霉素过敏</span></div>
<div style="display:flex;justify-content:space-between;padding:9px 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:9px 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:9px 0;"><span style="font-size:13px;color:#999;">其他疾病</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
</div>
</div>
</div>
</body>
</html>
emergency-app/expert/workbench/index.html
+12 -10
View File
@@ -69,7 +69,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<!-- [交互] 点击切换服务状态 -->
<button id="wb-pause-btn" onclick="togglePause()" style="display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);border-radius:20px;padding:6px 14px;color:#fff;font-size:13px;cursor:pointer;">
<span id="pause-dot" style="width:8px;height:8px;border-radius:50%;background:#52c41a;display:inline-block;flex-shrink:0;"></span>
<span id="pause-label">服务中</span>
<span id="pause-label">开启咨询</span>
</button>
</div>
<!-- 统计数字 -->
@@ -77,10 +77,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">图文待回复</div></div>
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">1</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">视频待确认</div></div>
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">18</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">今日完成</div></div>
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">4.9</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">评分</div></div>
</div>
</div>
@@ -95,7 +93,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div class="seg-tabs">
<div class="seg-tab active" onclick="switchWorkTab(this,'wb-text-pending')">待回复<span class="badge">2</span></div>
<div class="seg-tab" onclick="switchWorkTab(this,'wb-text-ongoing')">进行中<span class="badge" style="background:#fa8c16;">1</span></div>
<div class="seg-tab" onclick="switchWorkTab(this,'wb-text-done')">已完成</div>
<div class="seg-tab" onclick="switchWorkTab(this,'wb-text-done')">已结束</div>
</div>
<div class="scroll-content">
<!-- 待回复列表 -->
@@ -125,10 +123,14 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div id="wb-text-done" style="display:none;">
<!-- [交互] 点击跳转至: ./text-consult-done.html -->
<div class="consult-card" onclick="location.href='./text-consult-done.html'">
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">赵磊</div><div class="cc-meta">男 · 35岁</div></div><span class="tag tag-gray">已完成</span></div>
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">赵磊</div><div class="cc-meta">男 · 35岁</div></div><span class="tag tag-green">已完成</span></div>
<div class="cc-bottom"><div class="cc-preview">感谢医生，问题已解决</div><span class="cc-time">08:40</span></div>
</div>
<div style="height:16px;"></div>
<div class="consult-card" onclick="location.href='./text-consult-timeout.html'">
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">赵磊</div><div class="cc-meta">男 · 35岁</div></div><span class="tag tag-gray">已超时</span></div>
<div class="cc-bottom"><div class="cc-preview">医生，这是什么情况？</div><span class="cc-time">08:40</span></div>
</div>
</div>
</div>
</div>
@@ -163,7 +165,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div id="wb-video-done" style="display:none;">
<!-- [交互] 点击跳转至: ./video-done.html -->
<div class="consult-card" onclick="location.href='./video-done.html'">
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div><div class="cc-info"><div class="cc-name">孙丽</div><div class="cc-meta">女 · 29岁</div></div><span class="tag tag-gray">已完成</span></div>
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div><div class="cc-info"><div class="cc-name">孙丽</div><div class="cc-meta">女 · 29岁</div></div><span class="tag tag-green">已完成</span></div>
<div class="cc-bottom"><div class="cc-preview">⭐⭐⭐⭐⭐ 非常专业，感谢！</div><span class="cc-time">昨天</span></div>
</div>
<!-- [交互] 点击跳转至: ./video-done.html -->
@@ -237,7 +239,7 @@ var isPaused = false;
function togglePause() {
isPaused = !isPaused;
var bg = isPaused ? '#ff4d4f' : '#52c41a';
var text = isPaused ? '暂停服务' : '服务中';
var text = isPaused ? '关闭咨询' : '开启咨询';
var dot = document.getElementById('pause-dot');
var label = document.getElementById('pause-label');
if (dot) dot.style.background = bg;
emergency-app/expert/workbench/text-chat-done.html
+147
View File
@@ -0,0 +1,147 @@
<!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; }
/* 咨询人档案卡片 */
.bubble-record { max-width: 260px; border-radius: 0 12px 12px 12px; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; }
.bubble-record__header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(135deg, #e8f4ff, #bae0ff); }
.bubble-record__avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.bubble-record__name { font-size: 13px; font-weight: 600; color: #333; }
.bubble-record__meta { font-size: 11px; color: #666; }
.bubble-record__body { padding: 10px 12px; }
.bubble-record__title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 4px; }
.bubble-record__desc { font-size: 12px; color: #666; line-height: 1.5; }
.bubble-record__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.bubble-record__tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.bubble-record__tag--orange { color: #d46b08; background: #fff7e6; }
</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" id="chat-scroll" style="padding:12px 16px;">
<!-- 时间标记 -->
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">10:20</span></div>
<!-- [交互] 咨询人档案卡片（首发消息）- 点击查看详情跳转咨询人档案页 -->
<div style="display:flex;gap:8px;margin-bottom:14px;">
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
<div class="bubble-record" onclick="location.href='../../assistant/workbench/employee-profile.html?from=expert-chat-done'">
<div class="bubble-record__header">
<div class="bubble-record__avatar">👩</div>
<div>
<div class="bubble-record__name">张小红 · 女 · 28岁</div>
<div class="bubble-record__meta">165cm · 50kg · 不吸烟 · 睡眠一般</div>
</div>
</div>
<div class="bubble-record__body">
<div class="bubble-record__title">头痛咨询</div>
<div class="bubble-record__desc">最近总是头痛，尤其是下午工作时特别明显，已持续一周</div>
<div class="bubble-record__tags">
<span class="bubble-record__tag bubble-record__tag--orange">持续时间：1周</span>
</div>
</div>
</div>
</div>
</div>
<!-- 员工消息（左侧） -->
<div style="display:flex;gap:8px;margin-bottom:14px;">
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">您好医生，我最近总是头痛，尤其是下午工作时特别明显，已经持续一周了。</div>
</div>
</div>
<!-- 员工发送图片消息 -->
<div style="display:flex;gap:8px;margin-bottom:14px;">
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:8px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
<div style="width:140px;height:90px;background:linear-gradient(135deg,#e8f4ff,#c5deff);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:28px;">🩺</div>
<div style="font-size:11px;color:#999;margin-top:4px;">体检报告</div>
</div>
</div>
</div>
<!-- 时间标记 -->
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">10:23</span></div>
<!-- 专家消息（右侧） -->
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨‍⚕️</div>
<div style="display:flex;flex-direction:column;align-items:flex-end;">
<div style="font-size:11px;color:#999;margin-bottom:4px;">王医生（我）</div>
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">您好，头痛持续一周需要重视。请问头痛的位置主要在哪里？是否伴有恶心、视力模糊等症状？</div>
</div>
</div>
<!-- 员工回复 -->
<div style="display:flex;gap:8px;margin-bottom:14px;">
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">主要是太阳穴两侧，有时候会有点恶心，但没有视力问题。</div>
</div>
</div>
<!-- 结束咨询卡片消息（右侧专家发出） -->
<div id="end-card" style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨‍⚕️</div>
<div style="display:flex;flex-direction:column;align-items:flex-end;">
<div style="font-size:11px;color:#999;margin-bottom:4px;">王医生（我）</div>
<div style="background:#fff;border-radius:12px 0 12px 12px;padding:20px 24px;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);border:1px solid #f0f0f0;text-align:center;">
<div style="margin:0 auto 10px;width:44px;height:44px;border-radius:10px;background:#52c41a;display:flex;align-items:center;justify-content:center;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 12.5l4 4 8-8" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div style="font-size:15px;font-weight:600;color:#1a1a1a;margin-bottom:6px;">已结束本次咨询</div>
<div style="font-size:12px;color:#999;line-height:1.5;">2026-04-15 10:35</div>
</div>
</div>
</div>
<div style="height:8px;"></div>
</div>
<!-- 底部已结束提示条 -->
<div style="background:#f5f5f5;border-top:1px solid #f0f0f0;padding:14px 16px;text-align:center;flex-shrink:0;">
<span id="end-bar-text" style="font-size:13px;color:#999;">— 本次咨询已结束 —</span>
</div>
</div>
<script>
/* 超时状态：隐藏结束卡片，更改底部文案 */
var consultStatus = new URLSearchParams(location.search).get('status');
if (consultStatus === 'timeout') {
document.getElementById('end-card').style.display = 'none';
document.getElementById('end-bar-text').textContent = '— 长时间未回复系统已自动结束本次咨询 —';
}
</script>
</body>
</html>
emergency-app/expert/workbench/text-chat.html
+19 -6
View File
@@ -18,7 +18,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
.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; }
.nav-right { margin-left: auto; color: #1677ff; font-size: 14px; cursor: pointer; background: none; border: none; }
.nav-right { margin-left: auto; color: #ff4d4f; font-size: 14px; cursor: pointer; background: none; border: none; }
/* 滚动内容区 */
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
.scroll-content::-webkit-scrollbar { display: none; }
@@ -78,7 +78,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div style="display:flex;gap:8px;margin-bottom:14px;">
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
<div class="bubble-record" onclick="location.href='./consult-person-detail.html'">
<div class="bubble-record" onclick="location.href='../../assistant/workbench/employee-profile.html?from=expert-chat'">
<div class="bubble-record__header">
<div class="bubble-record__avatar">👩</div>
<div>
@@ -152,15 +152,28 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<!-- 媒体选择面板 -->
<div id="media-panel" style="display:none;background:#f7f8fa;border-top:1px solid #f0f0f0;padding:16px 20px;flex-shrink:0;">
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:180px;">
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:180px;">
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">🖼️</div>
<span style="font-size:11px;color:#666;">相册</span>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📷</div>
<span style="font-size:11px;color:#666;">拍照</span>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">🖼️</div>
<span style="font-size:11px;color:#666;">图库</span>
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📷</div>
<span style="font-size:11px;color:#666;">文件</span>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📷</div>
<span style="font-size:11px;color:#666;">位置</span>
</div>
</div>
</div>
emergency-app/expert/workbench/text-consult-done.html
+13 -14
View File
@@ -23,7 +23,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
.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; }
.tag-green { background: #f6ffed; color: #52c41a; }
</style>
</head>
<body>
@@ -53,35 +53,34 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);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 style="font-size:13px;color:#666;margin-top:2px;">采油一厂 · xxx作业区</div>
</div>
<span class="tag tag-gray" style="margin-left:auto;">已完成</span>
<span class="tag tag-green" 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 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 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 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>
</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>
<!-- <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;">员工评价 ⭐⭐⭐⭐⭐ 5.0</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;">
<!-- [交互] 点击跳转至: ./text-chat-done.html 查看历史对话记录 -->
<div onclick="location.href='./text-chat-done.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>
<!-- [交互] 点击跳转至: ./consult-person-detail.html 查看咨询人健康档案 -->
<div onclick="location.href='./consult-person-detail.html'" style="background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;padding:14px 16px;cursor:pointer;">
<!-- [交互] 点击跳转至: ../assistant/workbench/employee-profile.html 查看咨询人健康档案 -->
<div onclick="location.href='../../assistant/workbench/employee-profile.html?from=expert-consult-done'" style="background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;padding:14px 16px;cursor:pointer;">
<span style="font-size:16px;margin-right:10px;">📋</span>
<span style="font-size:14px;font-weight:600;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>
emergency-app/expert/workbench/text-consult-timeout.html
+100
View File
@@ -0,0 +1,100 @@
<!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; }
/* 标签 */
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.tag-orange { background: #fff2e8; color: #d4380d; }
/* 超时提示卡片 */
.timeout-notice { margin-bottom: 12px; background: #fff2e8; border-radius: 14px; padding: 16px; border-left: 4px solid #d4380d; }
.timeout-notice__title { font-size: 14px; font-weight: 600; color: #d4380d; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.timeout-notice__content { font-size: 13px; color: #ad4e00; line-height: 1.6; }
</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,#e8f4ff,#bdd7ff);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;">采油一厂 · xxx作业区</div>
</div>
<span class="tag tag-orange" 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;">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>
</div>
</div>
<!-- 超时提示卡片 -->
<div class="timeout-notice">
<div class="timeout-notice__title">⏰ 咨询已超时</div>
<div class="timeout-notice__content">超过七天无回复，本次咨询已自动关闭。</div>
</div>
<!-- [交互] 点击跳转至: ./text-chat-done.html 查看历史对话记录 -->
<div onclick="location.href='./text-chat-done.html?status=timeout'" 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>
<!-- [交互] 点击跳转至: ../assistant/workbench/employee-profile.html 查看咨询人健康档案 -->
<div onclick="location.href='../../assistant/workbench/employee-profile.html?from=expert-consult-timeout'" style="background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;padding:14px 16px;cursor:pointer;">
<span style="font-size:16px;margin-right:10px;">📋</span>
<span style="font-size:14px;font-weight:600;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 style="height:16px;"></div>
</div>
</div>
</body>
</html>