工具栏统一设计 v1.5 — 宝石嵌入式工具栏
v1.4 基础（5 按钮、坐席居中）+ 工具栏重构为「两端窄、中间隆起」的镜片轨道，人工坐席头像像宝石一样镶嵌于隆起处 · 2026-08-05
💎 v1.5 改动说明（基于 v1.4）：
• 工具栏形态重构：由扁平胶囊改为「镜片/花瓣形轨道」——两端上下窄，向中间平滑隆起
• 人工坐席 = 宝石：头像按钮（46px）嵌在轨道中央隆起处，上半部微微探出轨道边缘，像镶在托座里的宝石（带白色内环 + 紫色光晕 + 左上切面高光）
• 4 个工具按钮（emoji / 文件 / 语音 / 群聊）分布在隆起两侧的纤细轨道上，左右对称
• 按钮数仍为 5（emoji / 文件 / 坐席(宝石·居中) / 语音 / 群聊），仅形态与视觉权重变化
• IntegrationZone.vue 仍保持 v1.3 已删除坐席按钮的状态
🎯 v1.5 目标对比（Before / After）
v1.4（上一版：扁平胶囊，居中）
⚠️ 现状: 均匀扁平胶囊，坐席仅为其中一枚普通按钮，缺乏视觉焦点
v1.5（目标：宝石嵌入式）
✅ 效果: 纤细轨道两端窄、中央隆起托住宝石坐席，形成明确视觉焦点，工具按钮对称分布两侧
📊 v1.4 vs v1.5 改动对比
| 维度 |
v1.4（扁平胶囊） |
v1.5（宝石嵌入式） |
| 工具栏形态 |
均匀扁平胶囊（border-radius 20px） |
镜片/花瓣形轨道：两端上下窄，中央平滑隆起 |
| 人工坐席按钮 |
普通头像按钮，居中但平铺 |
宝石：嵌于中央隆起，上半探出轨道，带白环+紫晕+切面高光 |
| 工具按钮位置 |
均匀分布在胶囊内 |
对称分布在隆起两侧的纤细轨道上 |
| 视觉焦点 |
弱（5 按钮等权） |
强（坐席=宝石，天然视觉中心） |
| 按钮数 |
5 |
5 不变 |
🛠️ 需要修改的文件清单
| 文件 |
改动 |
影响 |
src/frontend-h5/src/components/chat/InputBar.vue |
改：工具栏容器改为镜片轨道（SVG 背景 + flex 行）；坐席按钮加 .gem 样式（translateY 镶嵌 + 白环/紫晕/高光）；工具按钮改为对称分布 |
本文件工具栏局部重构 |
src/frontend-h5/src/components/chat/IntegrationZone.vue |
不动（v1.3 已删除坐席按钮） |
无 |
inputBarCallAgentState.ts / integrationZoneLogic.ts |
不动（helper 保留） |
无 |
InputBar.test.ts |
补充轨道形态 + 坐席居中镶嵌的快照/结构测试 |
测试同步更新 |
⚠️ 注意事项与待确认点
- 轨道弧度：当前为平滑镜片曲线；若想要更「尖」的叶子形或更「圆」的胶囊，可调 SVG path 控制点
- 宝石探出量：坐席按钮
translateY(-18px) 控制探出高度，可调大/调小
- 宝石光晕：白环(3px)+紫晕(5px)+外发光，若觉得过重可减小或去掉紫晕
- 工具按钮在纤细轨道上的溢出：两端轨道高约 24px、按钮 40px，按钮会略探出轨道上下边缘——这是「图标浮于细轨」的预期效果；如想完全收进轨道，可加高两端或缩小按钮
- 头像占位图：
./agent-avatar-v0.8.jpg 为占位路径，实际集成时替换
v1.5 宝石嵌入式工具栏 · 2026-08-05 · Duckula 主理人 · 等待用户拍板进入开发