🎯 员工结束会话功能 · 原型图 v1.1
v1.1 调整（2026-07-30）— 维度分离 + 排队进度消息胶囊 + 右栏简化
设计哲学：维度分离
把 v1.0 的 5 个按钮状态按"性质"拆成 3 个独立维度，每个维度用最合适的 UI 形式呈现。
| 维度 |
性质 |
UI 形式 |
位置 |
| A. 服务可用性 |
系统状态（坐席/排班） |
标题栏徽章 🟢/⚫ |
顶部，永远可见 |
| B. 会话进程 |
用户动作（点击） |
操作按钮 5 态切换 |
输入栏控件区 |
| C. 排队进度 🆕 |
实时反馈（WS 推送） |
底部消息胶囊 |
输入框上方，锚定底部 |
① 标题栏 · 服务可用性指示（v1.1 G4）
永远显示，不随页面滚动消失。后续 v1.2 可扩展为"在线/繁忙/离线"三态。
💡 结束会话入口：标题栏右侧红色退出按钮（不再用"结束咨询"按钮态）
② 操作按钮 · 5 态合并（与 InputBar.vue 实现对齐）
5 种状态合并到同一按钮位置，通过文案 + 图标 + 颜色区分。2026-07-27 变更：移除"结束咨询"按钮态，由标题栏红色按钮统一触发。
⚠️ 优先级：hidden > waiting > active/urgent > disabled
⭐ ③ 底部排队进度消息胶囊（v1.1 G5 · 核心新增）
位置：主对话流底部（输入框上方），视觉样式参照"会话已关闭"系统消息，但锚定底部不随滚动消失。
更新机制：仅在关键节点更新内容（进入排队、每跳 3 位、接听），不每次位置变化都重渲染。
设计哲学：不作为消息插入对话流，避免污染 AI 上下文与推荐系统。
▸ 未排队（不显示胶囊）
▸ 排队中（橙色胶囊 · 关键节点更新内容）
VPN 连不上
请尝试...
系统已为您接入人工队列，请稍候
⏳
排队中 · 前面 3 人 · 预计 1:32
▸ 已接入（绿色胶囊 · 3 秒后淡出）
▸ 会话已关闭（灰色提示 · 参照"会话已关闭"消息样式）
问题解决了，谢谢
不客气，需要再帮您吗？
✅ 问题已解决，会话已关闭。24 小时内可重新打开。
ℹ️
会话已结束
④ 右栏简化（v1.1 G6）
删除右栏底部"排队等待" + "答题挑战"，聚焦核心：设备诊断 + 智能推荐。移动端（<500px）不渲染右栏，无变化。
⚠️ 同步清理：api/queue、api/quiz、store.queuePositionData、WS queue_position_update 回调
⑤ 完整流程（员工视角）
🎧 人工坐席
→
系统接入队列
→
⏳ 排队胶囊出现
→
客服接听
→
🟢 已接入胶囊
→
⏏ 标题栏退出按钮
→
😊 满意度评价
→
🚪 关闭窗口
⑥ v1.0 → v1.1 关键变更
| 变更项 |
v1.0 |
v1.1 |
| 按钮状态数 |
3 态 |
5 态（与代码对齐） |
| 服务可用性 UI |
未单独呈现 |
标题栏徽章 🆕 |
| 排队进度位置 |
右栏底部卡片 |
底部消息胶囊 🆕 |
| 答题挑战 |
右栏内嵌（含插队机制） |
完全移除 |
| 结束会话入口 |
操作按钮"结束咨询" |
标题栏红色按钮（2026-07-27 变更） |
| 右栏结构 |
4 大区块 |
2 大区块 |
| API 清理 |
保留 queue + quiz |
移除 |
📌 对应 PRD：PRD-REQ-会话-001-员工结束会话-v1.1.md