Simon
a8da4da0db
REQ-会话-001 员工结束会话: - PRD/原型 v1.0/v1.1/v1.2 归档为 .archive，现行收敛至单一 v1.3 - 技术方案 v1.2 归档，v1.3 为现行版本(位于 docs/02-技术文档/) - PRD v1.3 §六 关联文档表指向 v1.3 原型与技术方案实际路径 - 三份任务说明书 + BUG-003 + TC-用户-008 引用同步至 .archive/v1.3 REQ-用户-005 头像菜单退出: - PRD/原型/技术方案文件名 v1.0 -> v1.1，追平内容版本(铁律2) - 三件套 + 任务说明书 + TC 互引版本对齐，相关 PRD 指向会话-001 v1.3 其他: - 修复 4 处 UTF-8 乱码(U+FFFD) - 新增 TR-会话-001-结束会话-v1.3.2 端到端测试报告(单测 75/75 + 生产构建通过) - 整改记录 #9 写入 00-文档规范化整改记录.md 遗留: PRD v1.3「状态条永久显示」与代码 v1.3.5「状态条已删除」存在分歧，待产品拍板
960 lines
39 KiB
HTML
960 lines
39 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>员工结束会话 - 原型图 v1.2</title>
|
||
<style>
|
||
:root {
|
||
--primary: #07C160;
|
||
--primary-light: #e8f9ed;
|
||
--info: #1989fa;
|
||
--info-light: #ecf5ff;
|
||
--text: #333;
|
||
--text-light: #666;
|
||
--text-tertiary: #999;
|
||
--border: #e5e5e5;
|
||
--bg: #f7f7f7;
|
||
--white: #fff;
|
||
--warning: #ff976a;
|
||
--danger: #ee0a24;
|
||
--danger-soft: rgba(239, 68, 68, 0.1);
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
|
||
background: var(--bg);
|
||
padding: 20px;
|
||
min-height: 100vh;
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
}
|
||
.container { max-width: 920px; margin: 0 auto; }
|
||
h1 { text-align: center; margin-bottom: 8px; font-size: 24px; }
|
||
.subtitle { text-align: center; color: var(--text-light); margin-bottom: 30px; font-size: 13px; }
|
||
|
||
.section {
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
}
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
color: var(--text);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.section-title::before {
|
||
content: '';
|
||
width: 4px;
|
||
height: 16px;
|
||
background: var(--primary);
|
||
border-radius: 2px;
|
||
}
|
||
.section-desc {
|
||
font-size: 13px;
|
||
color: var(--text-light);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* === 头部 mockup === */
|
||
.header-mock {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 14px;
|
||
background: var(--white);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.header-mock__left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.header-mock__brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
}
|
||
.header-mock__logo {
|
||
background: var(--primary);
|
||
color: var(--white);
|
||
padding: 3px 7px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
}
|
||
.header-mock__status {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 3px 10px;
|
||
border-radius: 12px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
}
|
||
.header-mock__status--online {
|
||
background: var(--primary-light);
|
||
color: var(--primary);
|
||
}
|
||
.header-mock__status--offline {
|
||
background: #f5f5f5;
|
||
color: var(--text-tertiary);
|
||
}
|
||
.header-mock__status-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: currentColor;
|
||
}
|
||
.header-mock__actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.header-mock__avatar {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
background: var(--bg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
}
|
||
.header-mock__exit {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--danger);
|
||
color: var(--danger);
|
||
background: var(--danger-soft);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
.header-mock__exit--hidden {
|
||
visibility: hidden;
|
||
}
|
||
.header-mock__theme {
|
||
color: var(--text-light);
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* === 对话区 mockup === */
|
||
.chat-mock {
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
background: var(--bg);
|
||
max-width: 460px;
|
||
margin: 0 auto;
|
||
}
|
||
.chat-mock__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 12px;
|
||
background: var(--white);
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 12px;
|
||
}
|
||
.chat-mock__messages {
|
||
padding: 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
min-height: 160px;
|
||
}
|
||
.msg {
|
||
max-width: 75%;
|
||
padding: 7px 11px;
|
||
border-radius: 10px;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
}
|
||
.msg--employee {
|
||
align-self: flex-end;
|
||
background: var(--primary);
|
||
color: var(--white);
|
||
border-bottom-right-radius: 4px;
|
||
}
|
||
.msg--ai {
|
||
align-self: flex-start;
|
||
background: var(--white);
|
||
color: var(--text);
|
||
border-bottom-left-radius: 4px;
|
||
}
|
||
.msg--system {
|
||
align-self: center;
|
||
background: rgba(0,0,0,0.05);
|
||
color: var(--text-light);
|
||
font-size: 12px;
|
||
text-align: center;
|
||
max-width: 90%;
|
||
}
|
||
|
||
/* 排队进度胶囊 */
|
||
.queue-capsule {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
margin: 10px 14px;
|
||
padding: 8px 12px;
|
||
border-radius: 18px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
background: rgba(245, 158, 11, 0.1);
|
||
color: var(--warning);
|
||
border: 1px solid var(--warning);
|
||
text-align: center;
|
||
}
|
||
.queue-capsule--connected {
|
||
background: var(--primary-light);
|
||
color: var(--primary);
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
/* 输入栏 */
|
||
.input-bar-mock {
|
||
padding: 8px 10px;
|
||
background: var(--white);
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.input-bar-mock__top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.input-bar-mock__field {
|
||
flex: 1;
|
||
padding: 5px 9px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 7px;
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
}
|
||
.input-bar-mock__send {
|
||
padding: 5px 12px;
|
||
background: var(--primary);
|
||
color: var(--white);
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
.call-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 4px 12px;
|
||
border-radius: 14px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
border: 1.5px solid;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
.call-btn--disabled {
|
||
border-color: var(--border);
|
||
background: var(--bg);
|
||
color: var(--text-tertiary);
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
.call-btn--active {
|
||
border-color: var(--primary);
|
||
background: var(--primary-light);
|
||
color: var(--primary);
|
||
}
|
||
.call-btn--urgent {
|
||
border-color: var(--danger);
|
||
background: var(--danger-soft);
|
||
color: var(--danger);
|
||
animation: pulse 1.5s ease-in-out infinite;
|
||
}
|
||
.call-btn--waiting {
|
||
border-color: var(--warning);
|
||
background: rgba(245, 158, 11, 0.1);
|
||
color: var(--warning);
|
||
}
|
||
.call-btn--end {
|
||
border-color: var(--danger);
|
||
background: var(--danger);
|
||
color: var(--white);
|
||
font-weight: 700;
|
||
}
|
||
.call-btn--reopen {
|
||
border-color: var(--info);
|
||
background: var(--info-light);
|
||
color: var(--info);
|
||
}
|
||
@keyframes pulse {
|
||
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
|
||
50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
|
||
}
|
||
.input-bar-mock__guide {
|
||
text-align: center;
|
||
font-size: 11px;
|
||
color: var(--text-placeholder, var(--text-tertiary));
|
||
margin-top: 6px;
|
||
padding: 2px 0;
|
||
}
|
||
.input-bar-mock__guide--warn {
|
||
color: var(--warning);
|
||
}
|
||
|
||
/* 6 态网格 */
|
||
.states-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
margin-top: 12px;
|
||
}
|
||
.state-card {
|
||
border: 1.5px dashed var(--border);
|
||
border-radius: 10px;
|
||
padding: 14px 10px;
|
||
text-align: center;
|
||
background: var(--white);
|
||
}
|
||
.state-card__label {
|
||
font-size: 11px;
|
||
color: var(--text-tertiary);
|
||
margin-bottom: 10px;
|
||
font-family: monospace;
|
||
}
|
||
.state-card__guide {
|
||
margin-top: 8px;
|
||
font-size: 11px;
|
||
color: var(--text-light);
|
||
line-height: 1.4;
|
||
}
|
||
.state-card__scene {
|
||
margin-top: 6px;
|
||
font-size: 10px;
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
/* 场景对比 */
|
||
.compare-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
margin-top: 16px;
|
||
}
|
||
.compare-pane {
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 14px;
|
||
background: var(--bg);
|
||
}
|
||
.compare-pane__title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
color: var(--text);
|
||
}
|
||
.compare-pane--ai { border-top: 3px solid var(--primary); }
|
||
.compare-pane--human { border-top: 3px solid var(--danger); }
|
||
|
||
/* 流程图 */
|
||
.flow {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
padding: 16px 0;
|
||
}
|
||
.flow-step {
|
||
background: var(--primary);
|
||
color: var(--white);
|
||
padding: 8px 14px;
|
||
border-radius: 16px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
.flow-step--system { background: var(--text-tertiary); }
|
||
.flow-step--warn { background: var(--warning); }
|
||
.flow-step--danger { background: var(--danger); }
|
||
.flow-step--info { background: var(--info); }
|
||
.flow-arrow { font-size: 18px; color: var(--text-light); }
|
||
|
||
/* 注释 */
|
||
.note {
|
||
background: #fff7e6;
|
||
border: 1px solid #ffd591;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
font-size: 13px;
|
||
color: #d46b08;
|
||
margin-top: 12px;
|
||
}
|
||
.note--info {
|
||
background: var(--info-light);
|
||
border-color: var(--info);
|
||
color: var(--text);
|
||
}
|
||
.note--danger {
|
||
background: #fff0f0;
|
||
border-color: #ffccc7;
|
||
color: var(--danger);
|
||
}
|
||
.note--success {
|
||
background: var(--primary-light);
|
||
border-color: var(--primary);
|
||
color: var(--text);
|
||
}
|
||
|
||
/* 表格式对比 */
|
||
.cmp-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
margin-top: 12px;
|
||
}
|
||
.cmp-table th, .cmp-table td {
|
||
text-align: left;
|
||
padding: 8px 10px;
|
||
border: 1px solid var(--border);
|
||
}
|
||
.cmp-table th {
|
||
background: var(--bg);
|
||
font-weight: 600;
|
||
}
|
||
.cmp-table td { color: var(--text-light); }
|
||
.cmp-table tr td:first-child {
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
.yes { color: var(--primary); font-weight: 600; }
|
||
.no { color: var(--danger); font-weight: 600; }
|
||
|
||
/* 流程图分支 */
|
||
.flow-branch {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
margin-top: 12px;
|
||
}
|
||
.flow-branch__col {
|
||
padding: 14px;
|
||
border-radius: 10px;
|
||
background: var(--bg);
|
||
}
|
||
.flow-branch__col--ai { border-left: 3px solid var(--primary); }
|
||
.flow-branch__col--human { border-left: 3px solid var(--danger); }
|
||
.flow-branch__title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
}
|
||
.flow-branch__steps {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
}
|
||
.flow-branch__step {
|
||
background: var(--white);
|
||
border: 1px solid var(--border);
|
||
padding: 4px 10px;
|
||
border-radius: 12px;
|
||
font-size: 11px;
|
||
color: var(--text);
|
||
}
|
||
.flow-branch__arrow { color: var(--text-tertiary); font-size: 12px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🎯 员工结束会话功能 · 原型图 v1.2</h1>
|
||
<div class="subtitle">
|
||
v1.2 调整（2026-07-30 下午）— 6 态按钮 + 4 种引导语 + 顶部按钮仅 AI 场景
|
||
</div>
|
||
|
||
<!-- ========== 章节 1：设计哲学 ========== -->
|
||
<div class="section">
|
||
<div class="section-title">设计哲学：4 维度分离（v1.2 新增"退出兜底"独立维度）</div>
|
||
<div class="section-desc">
|
||
v1.1 三维度基础上，新增"退出兜底"作为独立维度——<b>顶部按钮语义收窄到 AI 场景</b>，与操作按钮 end 态<b>场景互斥</b>。
|
||
</div>
|
||
|
||
<table class="cmp-table">
|
||
<thead>
|
||
<tr>
|
||
<th>维度</th>
|
||
<th>性质</th>
|
||
<th>UI 形式</th>
|
||
<th>位置</th>
|
||
<th>v1.2 变化</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>A. 服务可用性</td>
|
||
<td>系统状态</td>
|
||
<td>标题栏徽章 🟢/⚫</td>
|
||
<td>顶部</td>
|
||
<td>沿用</td>
|
||
</tr>
|
||
<tr>
|
||
<td>B. 会话进程</td>
|
||
<td>用户动作</td>
|
||
<td>操作按钮 6 态 + 引导语</td>
|
||
<td>输入栏</td>
|
||
<td><b>5 态 → 6 态 + 引导语</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>C. 排队进度</td>
|
||
<td>实时反馈</td>
|
||
<td>底部消息胶囊</td>
|
||
<td>输入框上方</td>
|
||
<td>沿用</td>
|
||
</tr>
|
||
<tr style="background:var(--primary-light);">
|
||
<td>D. 退出兜底 🆕</td>
|
||
<td>AI 场景专属</td>
|
||
<td>标题栏红色退出按钮</td>
|
||
<td>顶部右侧</td>
|
||
<td><b>仅 AI 场景显示</b></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="note note--success">
|
||
💡 维度 D 与维度 B 的 end 态<b>场景互斥</b>，任何时候只有一个可用，从根本上避免"双入口混乱"
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== 章节 2：操作按钮 6 态 + 引导语 ⭐核心变更⭐ ========== -->
|
||
<div class="section" style="border:2px solid var(--primary);">
|
||
<div class="section-title">⭐ 操作按钮 · 6 态 + 4 种引导语（v1.2 核心变更）</div>
|
||
<div class="section-desc">
|
||
v1.1 的 5 态调整：<span class="no">❌ 移除 hidden</span> / <span class="yes">✅ 恢复 end</span> / <span class="yes">✅ 新增 reopen</span>。<br>
|
||
新增 4 种场景引导语，按钮永远可见（仅状态变化），用户不会再"找不到入口"。
|
||
</div>
|
||
|
||
<div class="states-grid">
|
||
<!-- disabled: 无会话 -->
|
||
<div class="state-card">
|
||
<div class="state-card__label">disabled · 无会话</div>
|
||
<button class="call-btn call-btn--disabled">🔒 人工坐席</button>
|
||
<div class="state-card__guide">💡 先描述一下你遇到的问题，AI 助手会先帮你看看</div>
|
||
<div class="state-card__scene">用户刚打开应用</div>
|
||
</div>
|
||
<!-- disabled: AI <3 轮 -->
|
||
<div class="state-card">
|
||
<div class="state-card__label">disabled · AI <3 轮</div>
|
||
<button class="call-btn call-btn--disabled">🔒 人工坐席</button>
|
||
<div class="state-card__guide">请继续描述您的问题或需求</div>
|
||
<div class="state-card__scene">AI 对话早期</div>
|
||
</div>
|
||
<!-- disabled: 坐席离线 -->
|
||
<div class="state-card">
|
||
<div class="state-card__label">disabled · 坐席离线</div>
|
||
<button class="call-btn call-btn--disabled">🔒 人工坐席</button>
|
||
<div class="state-card__guide input-bar-mock__guide--warn">⚠️ 坐席当前离线，建议先用 AI 解答</div>
|
||
<div class="state-card__scene">!store.agentOnline</div>
|
||
</div>
|
||
|
||
<!-- active -->
|
||
<div class="state-card">
|
||
<div class="state-card__label">active · AI ≥3 轮</div>
|
||
<button class="call-btn call-btn--active">🎧 人工坐席</button>
|
||
<div class="state-card__scene">可呼叫</div>
|
||
</div>
|
||
<!-- urgent -->
|
||
<div class="state-card">
|
||
<div class="state-card__label">urgent · 紧急关键词</div>
|
||
<button class="call-btn call-btn--urgent">🚨 人工坐席</button>
|
||
<div class="state-card__scene">高优一键呼叫</div>
|
||
</div>
|
||
<!-- waiting -->
|
||
<div class="state-card">
|
||
<div class="state-card__label">waiting · 排队中</div>
|
||
<button class="call-btn call-btn--waiting">⏳ 排队等待</button>
|
||
<div class="state-card__scene">点击取消排队</div>
|
||
</div>
|
||
|
||
<!-- end (v1.2 恢复) -->
|
||
<div class="state-card" style="background:#fff5f5;">
|
||
<div class="state-card__label">end 🆕 · 坐席服务中</div>
|
||
<button class="call-btn call-btn--end">📴 结束咨询</button>
|
||
<div class="state-card__scene">v1.2 恢复 · 主动挂断人工</div>
|
||
</div>
|
||
<!-- reopen (v1.2 新增) -->
|
||
<div class="state-card" style="background:var(--info-light);">
|
||
<div class="state-card__label">reopen 🆕 · 24h 内重开</div>
|
||
<button class="call-btn call-btn--reopen">🔄 重新打开</button>
|
||
<div class="state-card__scene">v1.2 新增 · 蓝色填充</div>
|
||
</div>
|
||
<!-- disabled: 会话过期 -->
|
||
<div class="state-card">
|
||
<div class="state-card__label">disabled · 会话过期</div>
|
||
<button class="call-btn call-btn--disabled">🔒 人工坐席</button>
|
||
<div class="state-card__guide">⏰ 上一会话已过期，开始新对话吧</div>
|
||
<div class="state-card__scene">>24h 不可重开</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
⚠️ 优先级：<b>end > reopen > waiting > active/urgent > disabled</b>。hidden 已完全移除。
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== 章节 3：顶部按钮可见性规则 ⭐⭐关键变更⭐⭐ ========== -->
|
||
<div class="section" style="border:2px solid var(--danger);">
|
||
<div class="section-title">⭐⭐ 顶部退出按钮 · 仅 AI 场景显示（v1.2 G7 关键变更）</div>
|
||
<div class="section-desc">
|
||
产品澄清：顶部按钮的语义被收窄为<b>"AI 会话兜底退出"</b>——告诉系统"我走了，别发倒计时"。<br>
|
||
人工咨询启动后（waiting / serving），顶部按钮<b>自动隐藏</b>，由操作按钮 end 态接管"结束人工"动作。
|
||
</div>
|
||
|
||
<table class="cmp-table">
|
||
<thead>
|
||
<tr>
|
||
<th>会话场景</th>
|
||
<th>顶部"退出会话"</th>
|
||
<th>操作按钮</th>
|
||
<th>说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>无会话</td>
|
||
<td class="no">❌ 隐藏</td>
|
||
<td>🔒 disabled（引导"先说问题"）</td>
|
||
<td>用户还没开始</td>
|
||
</tr>
|
||
<tr style="background:var(--primary-light);">
|
||
<td>AI 对话中（任何状态）</td>
|
||
<td class="yes">✅ 显示</td>
|
||
<td>🎧 active / 🔒 disabled</td>
|
||
<td>顶部 = AI 兜底退出</td>
|
||
</tr>
|
||
<tr style="background:#fff5f5;">
|
||
<td><b>人工咨询启动后（waiting）</b></td>
|
||
<td class="no">❌ 隐藏</td>
|
||
<td>⏳ waiting（取消排队）</td>
|
||
<td>操作按钮接管</td>
|
||
</tr>
|
||
<tr style="background:#fff5f5;">
|
||
<td><b>坐席服务中（serving）</b></td>
|
||
<td class="no">❌ 隐藏</td>
|
||
<td>📴 end（结束咨询）</td>
|
||
<td>操作按钮 end 态接管</td>
|
||
</tr>
|
||
<tr>
|
||
<td>会话已关闭（24h 内）</td>
|
||
<td class="no">❌ 隐藏</td>
|
||
<td>🔄 reopen（重新打开）</td>
|
||
<td>操作按钮 reopen 接管</td>
|
||
</tr>
|
||
<tr>
|
||
<td>会话已关闭（>24h）</td>
|
||
<td class="no">❌ 隐藏</td>
|
||
<td>🔒 disabled（引导"开新会话"）</td>
|
||
<td>过期失效</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- ========== 章节 4：场景对比 mockup ========== -->
|
||
<div class="section">
|
||
<div class="section-title">场景对比 mockup：AI 对话 vs 坐席服务中</div>
|
||
|
||
<div class="compare-grid">
|
||
<!-- AI 对话场景 -->
|
||
<div class="compare-pane compare-pane--ai">
|
||
<div class="compare-pane__title">AI 对话中（顶部按钮可见）</div>
|
||
|
||
<div class="header-mock" style="margin-bottom:8px;">
|
||
<div class="header-mock__left">
|
||
<div class="header-mock__brand">
|
||
<span class="header-mock__logo">IT</span>
|
||
<span>智能IT服务</span>
|
||
</div>
|
||
<span class="header-mock__status header-mock__status--online">
|
||
<span class="header-mock__status-dot"></span>在线
|
||
</span>
|
||
</div>
|
||
<div class="header-mock__actions">
|
||
<span class="header-mock__theme">☀️🌙</span>
|
||
<div class="header-mock__avatar">S</div>
|
||
<div class="header-mock__exit" title="结束会话（不再发送提醒）">⏏</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chat-mock">
|
||
<div class="chat-mock__messages">
|
||
<div class="msg msg--employee">VPN 连不上</div>
|
||
<div class="msg msg--ai">请尝试重启...</div>
|
||
<div class="msg msg--employee">重启了还是不行</div>
|
||
</div>
|
||
<div class="input-bar-mock">
|
||
<div class="input-bar-mock__top">
|
||
<span style="font-size:14px;">😊</span><span style="font-size:14px;">📎</span>
|
||
<div class="input-bar-mock__field">请输入消息...</div>
|
||
<button class="call-btn call-btn--active">🎧 人工坐席</button>
|
||
<button class="input-bar-mock__send">发送</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align:center;font-size:11px;color:var(--text-tertiary);margin-top:6px;">
|
||
▲ 顶部红色按钮可用 · 用户可主动告诉系统"我走了"
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 人工服务场景 -->
|
||
<div class="compare-pane compare-pane--human">
|
||
<div class="compare-pane__title">坐席服务中（顶部按钮隐藏）</div>
|
||
|
||
<div class="header-mock" style="margin-bottom:8px;">
|
||
<div class="header-mock__left">
|
||
<div class="header-mock__brand">
|
||
<span class="header-mock__logo">IT</span>
|
||
<span>智能IT服务</span>
|
||
</div>
|
||
<span class="header-mock__status header-mock__status--online">
|
||
<span class="header-mock__status-dot"></span>在线
|
||
</span>
|
||
</div>
|
||
<div class="header-mock__actions">
|
||
<span class="header-mock__theme">☀️🌙</span>
|
||
<div class="header-mock__avatar">S</div>
|
||
<!-- 顶部按钮隐藏 -->
|
||
<div class="header-mock__exit header-mock__exit--hidden" title="">⏏</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chat-mock">
|
||
<div class="chat-mock__messages">
|
||
<div class="msg msg--employee">VPN 连不上</div>
|
||
<div class="msg msg--ai">请尝试重启...</div>
|
||
<div class="msg msg--system">客服小王已接入服务</div>
|
||
<div class="msg msg--ai" style="background:#e8f9ed;">您好，我是小王，我来帮您处理 VPN 问题</div>
|
||
</div>
|
||
<div class="input-bar-mock">
|
||
<div class="input-bar-mock__top">
|
||
<span style="font-size:14px;">😊</span><span style="font-size:14px;">📎</span>
|
||
<div class="input-bar-mock__field">请输入消息...</div>
|
||
<button class="call-btn call-btn--end">📴 结束咨询</button>
|
||
<button class="input-bar-mock__send">发送</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align:center;font-size:11px;color:var(--text-tertiary);margin-top:6px;">
|
||
▲ 顶部按钮已隐藏 · 操作按钮 end 态接管"结束人工"
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note note--success">
|
||
💡 两个按钮<b>场景互斥</b>，从根源避免"两个都能结束，点哪个"的混乱
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== 章节 5：重新打开按钮 mockup ========== -->
|
||
<div class="section">
|
||
<div class="section-title">🔄 「重新打开」按钮 mockup（v1.2 新增）</div>
|
||
<div class="section-desc">
|
||
会话已关闭 + 24h 内，按钮变 🔄 重新打开（蓝色）。不显示 24h 倒计时数字，避免紧迫感。
|
||
</div>
|
||
|
||
<div class="chat-mock" style="max-width:400px;">
|
||
<div class="chat-mock__header">
|
||
<span>💬 对话（已结束）</span>
|
||
</div>
|
||
<div class="chat-mock__messages">
|
||
<div class="msg msg--employee">好的，谢谢小王</div>
|
||
<div class="msg msg--ai">不客气，随时找我</div>
|
||
<div class="msg msg--system">✅ 会话已关闭。24 小时内可重新打开。</div>
|
||
</div>
|
||
<div class="input-bar-mock">
|
||
<div class="input-bar-mock__top">
|
||
<span style="font-size:14px;">😊</span><span style="font-size:14px;">📎</span>
|
||
<div class="input-bar-mock__field" style="opacity:0.5;">会话已关闭</div>
|
||
<button class="call-btn call-btn--reopen">🔄 重新打开</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note note--info">
|
||
💡 颜色选择：蓝色（<code>--info: #1989fa</code>），与"激活"绿色和"危险"红色明确区分，传达"中性恢复"语义
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== 章节 6：完整流程（双入口分流） ========== -->
|
||
<div class="section">
|
||
<div class="section-title">⑥ 完整流程 · 双入口场景分流（v1.2 修订）</div>
|
||
<div class="section-desc">
|
||
AI 会话走<b>顶部退出</b>路径，人工会话走<b>操作按钮 end</b>路径，两个入口<b>场景互斥</b>。
|
||
</div>
|
||
|
||
<div class="flow-branch">
|
||
<!-- AI 分支 -->
|
||
<div class="flow-branch__col flow-branch__col--ai">
|
||
<div class="flow-branch__title">🅰️ AI 会话路径（顶部退出入口）</div>
|
||
<div class="flow-branch__steps">
|
||
<span class="flow-branch__step">🎧 AI 咨询</span>
|
||
<span class="flow-branch__arrow">→</span>
|
||
<span class="flow-branch__step">⏏ 点击顶部退出</span>
|
||
<span class="flow-branch__arrow">→</span>
|
||
<span class="flow-branch__step">确认弹窗</span>
|
||
<span class="flow-branch__arrow">→</span>
|
||
<span class="flow-branch__step">😊 满意度评价</span>
|
||
<span class="flow-branch__arrow">→</span>
|
||
<span class="flow-branch__step">🚪 关闭窗口</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 人工分支 -->
|
||
<div class="flow-branch__col flow-branch__col--human">
|
||
<div class="flow-branch__title">🅱️ 人工会话路径（操作按钮 end 入口）</div>
|
||
<div class="flow-branch__steps">
|
||
<span class="flow-branch__step">🎧 呼叫人工</span>
|
||
<span class="flow-branch__arrow">→</span>
|
||
<span class="flow-branch__step">⏳ 排队</span>
|
||
<span class="flow-branch__arrow">→</span>
|
||
<span class="flow-branch__step">📴 服务中 end</span>
|
||
<span class="flow-branch__arrow">→</span>
|
||
<span class="flow-branch__step">📴 点击结束</span>
|
||
<span class="flow-branch__arrow">→</span>
|
||
<span class="flow-branch__step">😊 满意度评价</span>
|
||
<span class="flow-branch__arrow">→</span>
|
||
<span class="flow-branch__step">🚪 关闭窗口</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== 章节 7：右栏对比（v1.1 沿用） ========== -->
|
||
<div class="section">
|
||
<div class="section-title">⑦ 右栏简化（v1.1 沿用 · G6）</div>
|
||
<div class="compare-grid">
|
||
<div class="compare-pane compare-pane--v1">
|
||
<div class="compare-pane__title">v1.0 右栏（4 大区块）</div>
|
||
<div class="mini-panel">
|
||
<div class="mini-panel__title">▼ 设备信息</div>
|
||
CPU / 内存 / 硬盘
|
||
</div>
|
||
<div class="mini-panel">
|
||
<div class="mini-panel__title">▼ 自助诊断</div>
|
||
一键诊断 + 异常徽章
|
||
</div>
|
||
<div class="mini-panel">
|
||
<div class="mini-panel__title">⚡ 智能推荐</div>
|
||
操作步骤 / 联系人 / 下载
|
||
</div>
|
||
<div class="mini-panel mini-panel--removed" style="background:#fff0f0;color:var(--danger);text-decoration:line-through;padding:10px;border-radius:8px;margin-bottom:6px;font-size:12px;">
|
||
<div class="mini-panel__title" style="font-weight:600;color:inherit;margin-bottom:4px;">⏳ 排队等待</div>
|
||
位置 / 预计时长 / 答题挑战
|
||
</div>
|
||
</div>
|
||
<div class="compare-pane compare-pane--v11">
|
||
<div class="compare-pane__title">v1.2 右栏（2 大区块）✅</div>
|
||
<div class="mini-panel" style="background:var(--white);border-radius:8px;padding:10px;margin-bottom:6px;font-size:12px;">
|
||
<div class="mini-panel__title" style="font-weight:600;color:var(--text);margin-bottom:4px;">▼ 设备信息</div>
|
||
CPU / 内存 / 硬盘
|
||
</div>
|
||
<div class="mini-panel" style="background:var(--white);border-radius:8px;padding:10px;margin-bottom:6px;font-size:12px;">
|
||
<div class="mini-panel__title" style="font-weight:600;color:var(--text);margin-bottom:4px;">▼ 自助诊断</div>
|
||
一键诊断 + 异常徽章
|
||
</div>
|
||
<div class="mini-panel" style="background:var(--white);border-radius:8px;padding:10px;margin-bottom:6px;font-size:12px;">
|
||
<div class="mini-panel__title" style="font-weight:600;color:var(--text);margin-bottom:4px;">⚡ 智能推荐</div>
|
||
操作步骤 / 联系人 / 下载
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== 章节 8：变更摘要 ========== -->
|
||
<div class="section">
|
||
<div class="section-title">⑧ v1.1 → v1.2 关键变更</div>
|
||
|
||
<table class="cmp-table">
|
||
<thead>
|
||
<tr>
|
||
<th>变更项</th>
|
||
<th>v1.1</th>
|
||
<th>v1.2</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>操作按钮状态数</td>
|
||
<td>5 态（含 hidden）</td>
|
||
<td><b>6 态（移除 hidden / 恢复 end / 新增 reopen）</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>引导语</td>
|
||
<td>仅 active 态显示</td>
|
||
<td><b>4 种场景分阶段引导语</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>顶部按钮可见性</td>
|
||
<td>所有场景显示</td>
|
||
<td><b>仅 AI 场景显示</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>「重新打开」按钮</td>
|
||
<td>无</td>
|
||
<td><b>新增（蓝色）</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>{n}/3 进度提示</td>
|
||
<td>有</td>
|
||
<td><b>移除</b>（避免催促感）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>顶部按钮文案</td>
|
||
<td>无 tooltip</td>
|
||
<td><b>加 tooltip + 确认弹窗</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>状态机互斥保证</td>
|
||
<td>无</td>
|
||
<td><b>showHeaderExitBtn 计算逻辑</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>结束会话入口</td>
|
||
<td>仅顶部按钮</td>
|
||
<td><b>顶部（AI）+ 操作按钮 end（人工）双入口</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>维度划分</td>
|
||
<td>3 维度</td>
|
||
<td><b>4 维度（新增"退出兜底"独立维度）</b></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="note">
|
||
📌 对应 PRD：<code>PRD-REQ-会话-001-员工结束会话-v1.2.md</code><br>
|
||
📌 对应技术方案：<code>技术方案-REQ-会话-001-员工结束会话-v1.2.md</code>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |