🎯 员工结束会话功能 · 原型图 v1.4

维度	性质	UI 形式	位置	v1.2 变化
A. 服务可用性	系统状态	标题栏徽章 🟢/⚫	顶部	沿用
B. 会话进程	用户动作	操作按钮 6 态 + 引导语	输入栏	5 态 → 6 态 + 引导语
C. 排队进度	实时反馈	底部消息胶囊	输入框上方	沿用
D. 退出兜底 🆕	AI 场景专属	标题栏红色退出按钮	顶部右侧	仅 AI 场景显示

会话场景	顶部"退出会话"	操作按钮	说明
无会话	❌ 隐藏	🔒 disabled（引导"先说问题"）	用户还没开始
AI 对话中（任何状态）	✅ 显示	🎧 active / 🔒 disabled	顶部 = AI 兜底退出
人工咨询启动后（waiting）	❌ 隐藏	⏳ waiting（取消排队）	操作按钮接管
坐席服务中（serving）	❌ 隐藏	📴 end（结束咨询）	操作按钮 end 态接管
会话已关闭（24h 内）	❌ 隐藏	🔄 reopen（重新打开）	操作按钮 reopen 接管
会话已关闭（>24h）	❌ 隐藏	🔒 disabled（引导"开新会话"）	过期失效

变更项	v1.2	v1.3（待评审 ⏳）
操作按钮状态数	6 态（移除 hidden / 恢复 end / 新增 reopen）	沿用 6 态（不动）
引导语	4 种场景分阶段引导语	迁移至整合区按钮下方
顶部按钮可见性	仅 AI 场景显示	沿用（仅 AI 场景显示）
「重新打开」按钮	新增（蓝色）	沿用（位置从 InputBar 移至整合区）
{n}/3 进度提示	移除（避免催促感）	沿用（移除）
顶部按钮文案	加 tooltip + 确认弹窗	沿用
状态机互斥保证	showHeaderExitBtn 计算逻辑	沿用（整合区状态条 v1.4 已删除）
结束会话入口	顶部（AI）+ 操作按钮 end（人工）双入口	沿用（按钮位置从 InputBar 移至整合区）
维度划分	4 维度（新增"退出兜底"独立维度）	4 维度（整合区降为三元素，状态条 v1.4 已删除）
整合区结构 🆕	4 维度分散（标题栏徽章 / 输入栏按钮 / 消息胶囊）	4 维度整合区（按钮 + 进度胶囊 + 引导语）
标题栏坐席徽章 🆕	显示 🟢/⚫	移至整合区顶部（标题栏瘦身）
InputBar 操作按钮 🆕	在工具栏内（与发送按钮并列）	移至整合区（InputBar 工具栏更简洁）
引导语位置 🆕	InputBar 按钮下方	整合区按钮下方（v1.3 待评审）

元素	位置	性质	视觉表现（沿用 v1.2 类）
状态条（v1.4 已删除）	—	v1.3 永久可见 → v1.4 删除	不再渲染坐席在线/离线（v1.3.5 决策）
操作按钮	整合区中部	核心 CTA	6 态样式（.call-btn--disabled/active/urgent/waiting/end/reopen）
进度消息胶囊	整合区下部	按需显示	.queue-capsule 4 态（含 --connected 变体）
引导语	按钮下方	4 种场景	.input-bar-mock__guide（含 --warn 变体）
（整合区边界容器）	InputBar 上方	浅色背景容器	用 inline 样式表达，不新增 CSS 类
背景色 ✅	整合区整体	浅色容器	#fafafa（浅灰，沿用 chat-mock）

位置	v1.2 现状	v1.3 方案 A	变化
标题栏	logo + 标题 + 坐席状态🟢⚫ + 主题 + 头像 + 退出	logo + 标题 + 主题 + 头像 + 退出	-1 元素（坐席状态）
整合区（永久）	无	v1.4 已移除（原状态条 3 态文案）	-1 永久元素（v1.4 移除）
整合区（按钮）	InputBar 工具栏内	整合区中部	位置迁移
整合区（按需胶囊）	消息流底部独立	整合区下部（与按钮同容器）	位置迁移
InputBar 工具栏	😊📎[输入框][🎧人工坐席][发送]	😊📎[输入框][发送]	-1 元素（按钮）

#	维度	拍板结果
1	状态条策略	❌ v1.3 永久显示 → v1.4 删除
2	状态条文案	❌ 随状态条一并删除
6	状态条反转（v1.4）	✅ 2026-08-03 反转：删除整合区状态条（v1.3.5 决策），整合区降为三元素
3	整合区背景色	✅ 浅灰 #fafafa
4	引导语位置	✅ 整合区按钮下方（方案 A 默认）
5	移动端折叠	✅ 不折叠，默认展开