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>