工具栏统一设计 v1.4 — 添加群聊图标 + 居中人工坐席按钮
v1.3 基础（已删除 IntegrationZone 旧坐席按钮）+ 员工端工具栏新增「群聊」图标 + 人工坐席头像按钮移至工具栏中央位置 · 2026-08-05
📌 v1.4 改动说明（基于 v1.3）：
• 新增「群聊」图标：员工端 InputBar 工具栏新增 1 个群聊（多人）玻璃按钮
• 人工坐席按钮居中：由工具栏最右端（第 4 位）移至中央（5 按钮中的第 3 位），并用渐变描边 + 外发光强调其主操作地位
• 工具栏按钮数由 4 → 5（emoji / 文件 / 坐席头像(居中) / 语音 / 群聊）
• IntegrationZone.vue 仍保持 v1.3 已删除坐席按钮的状态，本版仅改动 InputBar 工具栏
🎯 v1.4 目标对比（Before / After）
v1.3（当前状态）
⚠️ 现状: 4 按钮，坐席头像在最右端，作为次要视觉权重；无群聊入口
v1.4（目标状态）
✅ 效果: 5 按钮，坐席头像居中且视觉突出（渐变描边 + 外发光），新增群聊入口
📊 v1.3 vs v1.4 改动对比
| 维度 |
v1.3（当前） |
v1.4（目标） |
| 工具栏按钮数 |
4（emoji / 文件 / 语音 / 坐席头像） |
5（emoji / 文件 / 坐席头像 / 语音 / 群聊） |
| 人工坐席按钮位置 |
工具栏最右端（第 4 位） |
工具栏中央（第 3 位，强调主操作） |
| 群聊图标 |
无 |
✅ 新增（工具栏最右端，第 5 位） |
| 坐席按钮视觉权重 |
普通玻璃头像 |
渐变描边 + 外发光，突出居中主入口 |
| 工具栏位置 |
InputBar 内上方居中 |
InputBar 内上方居中（不变） |
| IntegrationZone 坐席按钮 |
已删除（v1.3） |
保持删除 |
| 代码改动范围 |
仅 IntegrationZone.vue（v1.3） |
仅 InputBar.vue 工具栏（新增图标 + 调整顺序） |
🛠️ 需要修改的文件清单
| 文件 |
改动 |
影响 |
src/frontend-h5/src/components/chat/InputBar.vue |
改：工具栏新增「群聊」玻璃按钮（含 SVG 图标）；将坐席头像按钮从末位移至中央（第 3 位）；坐席按钮增加居中强调样式 |
本文件工具栏局部调整 |
src/frontend-h5/src/components/chat/IntegrationZone.vue |
不动（v1.3 已删除坐席按钮） |
无 |
src/frontend-h5/src/components/chat/inputBarCallAgentState.ts |
不动（helper 保留） |
无 |
src/frontend-h5/src/components/chat/integrationZoneLogic.ts |
不动（helper 保留） |
无 |
src/frontend-h5/src/components/chat/InputBar.test.ts |
建议补充「群聊」按钮存在性测试 + 坐席按钮居中顺序测试 |
测试同步更新 |
⚠️ 注意事项与待确认点
- 群聊图标位置：当前放在工具栏最右端（第 5 位）。若希望群聊紧邻坐席或放到最左，可调整顺序
- 坐席居中顺序：采用「emoji / 文件 / 坐席(居中) / 语音 / 群聊」对称布局，使坐席成为视觉焦点。如希望「坐席 / emoji / 文件 / 语音 / 群聊」或其他顺序请告知
- 坐席按钮强调样式：为凸显「居中主操作」，增加了渐变描边 + 白色外环 + 外发光。如觉得过度可改回普通玻璃头像样式
- 群聊交互未定义：原型仅含图标占位，点击后跳转「群聊列表 / 当前群会话」的行为需产品补充
- 头像占位图：
./agent-avatar-v0.8.jpg 为占位路径，实际集成时替换为真实客服头像资源
v1.4 添加群聊图标 + 居中人工坐席按钮 · 2026-08-05 · Duckula 主理人 · 等待用户拍板进入开发