REQ-会话-001 · v1.3 增量优化

方案 A · 人工服务整合区设计

将"坐席状态 + 操作按钮 + 进度消息"三件套统一整合至消息流与 InputBar 之间的整合区。 标题栏去除坐席徽章（瘦身）；InputBar 移除操作按钮（释放工具栏空间）。

🆕 新增：整合区永久状态条 🔄 迁移：操作按钮从 InputBar 移至整合区 ✂️ 简化：标题栏移除坐席徽章 ⚡ 优化：InputBar 工具栏更简洁
场景 1：无会话（刚打开应用）
9:41 📶 📡 🔋
IT 智能IT服务
整合区结构
交互逻辑
💡 设计原则
  • • 三件套垂直堆叠：状态条（永久）+ 操作按钮（核心 CTA）+ 进度消息（按需）
  • • 状态条保底可见：永远告诉用户"现在能不能叫到人"，减少焦虑
  • • 按钮位置迁移：从 InputBar 工具栏搬到整合区，避免工具栏拥挤
  • • 标题栏瘦身：移除坐席徽章，主标题 + 主题 + 头像 + 退出 更简洁
  • • 不动 v1.2y 已 PASS：6 态按钮、引导语、坐席离线拦截、取消入口合并、淡出 全部保持

📱 移动端适配

≥500px（桌面/横屏）
🟢 客服在线 · 3人空闲 ●●●
🎧 呼叫人工坐席
🟠 排队中 · 前面 2 人 · 预计约 1 分钟
整合区与消息流等宽，所有元素水平居中
<500px（手机）
🟢 客服在线 · 3人空闲
🎧 呼叫人工坐席
🟠 排队中 · 前面 2 人
文字精简（"3 人空闲"→"空闲"），进度文案缩短（去预计时长）

🔄 方案 A vs v1.2y 当前状态对比

位置 v1.2y 现状 v1.3 方案 A 变化
标题栏 logo + 标题 + 🟢坐席状态 + 主题 + 头像 + 退出 logo + 标题 + 主题 + 头像 + 退出 - 1 元素（坐席状态）
整合区（永久） 无 🟢 客服在线 · 3人空闲 状态条 + 1 永久元素
整合区（按钮） 无 🎧 人工坐席 6 态按钮（从 InputBar 搬过来） + 1 按钮（迁移）
整合区（按需） QueueCapsule 4 态独立显示 QueueCapsule 4 态整合到整合区 位置迁移
InputBar 工具栏 😊📎[输入框][🎧人工坐席][发送] 😊📎[输入框][发送] - 1 元素（按钮）

⚙️ 关键交互细节

R1
状态条保底可见：无论 AI 对话进度、坐席在线状态、操作按钮态如何变化，状态条始终显示。 文案分三态：🟢 客服在线 · N 人空闲 / 🔴 客服暂休 · HH:MM 开放 / 🟡 客服繁忙 · 预计 N 分钟
R2
操作按钮 6 态保持：disabled / active / urgent / waiting / end / reopen waiting 态文案"排队取消"（v1.2y 已拍板）；end 态文案"结束咨询"；reopen 态文案"重新打开"
R3
进度消息按需显示：无排队时隐藏；queued 显示"🟠 排队中 · 前面 N 人"；serving 显示"🟢 已接入"（3 秒淡出）；resolved 显示"会话已关闭"
R4
引导语去哪了？：v1.2y 在 InputBar 显示的 4 种引导语（无会话/AI<3轮/坐席离线/会话过期） 整合到整合区底部，作为按钮下方的灰色小字（"再多说几句"、"坐席当前离线"等）
R5
InputBar 引导语移除：原 InputBar 的 `input-bar__guide` 提示改为整合区的灰色小字，避免与按钮态视觉冲突
⏳ 待你拍板的细节