工具栏统一设计 v1.6 — 圆角长方形 · 中央隆起
v1.5 修正版：工具栏保持圆角长方形（两端上下矮），中央因「人工坐席」按钮更高而将上下边框撑出自然弧线；坐席按钮不探出、无光晕、工具按钮不溢出 · 2026-08-05
📐 v1.6 改动说明（修正 v1.5 的 4 点不符合预期）：
① 工具栏形态：保持圆角长方形，两端上下高度变窄（约 48px），不是镜片/花瓣形
② 坐席按钮居中隆起：人工坐席按钮（54px）大于其他图标（40px），其高度将工具栏上下边框从两端向中央平滑撑出弧线，按钮不探出轨道
③ 去除光晕：去掉 v1.5 的白环 / 紫晕 / 切面高光 / 外发光，坐席按钮仅保留渐变描边
④ 工具按钮不溢出：4 个工具按钮（40px）在两端矮轨道上各有约 4px 余量，完全收在轨道内
🎯 v1.6 目标对比（Before / After）
v1.5（上一版：宝石嵌入式，不符合预期）
⚠️ 问题: 镜片形 + 光晕 + 坐席探出，不符合预期
v1.6（目标：圆角长方形 · 中央隆起）
✅ 效果: 圆角长方形两端矮，中央因大坐席按钮自然隆起弧线；坐席不探出、无光晕；工具按钮不溢出
📊 v1.5 vs v1.6 改动对比
| 维度 |
v1.5（宝石嵌入式） |
v1.6（圆角长方形·中央隆起） |
| 工具栏整体形态 |
镜片/花瓣形（两侧曲线外鼓） |
圆角长方形（两端上下矮，整体仍是矩形轮廓） |
| 中央隆起成因 |
整体镜片造型 |
人工坐席按钮更高（54px > 40px），将上下边框撑出弧线 |
| 坐席按钮是否探出 |
是（translateY 上探） |
否（完全收在轨道内，居中） |
| 光晕/高光 |
白环 + 紫晕 + 切面高光 + 外发光 |
全部去除（仅渐变描边） |
| 工具按钮溢出 |
两端略探出轨道 |
不溢出（两端各有约 4px 余量） |
🛠️ 需要修改的文件清单
| 文件 |
改动 |
影响 |
src/frontend-h5/src/components/chat/InputBar.vue |
改：工具栏背景 SVG path 改为圆角长方形（两端矮、中央因坐席按钮隆起）；坐席按钮尺寸 54px、去除光晕样式、取消 translateY；工具按钮保持 40px 并确保在轨道内不溢出 |
本文件工具栏局部重构 |
IntegrationZone.vue |
不动（v1.3 已删除坐席按钮） |
无 |
inputBarCallAgentState.ts / integrationZoneLogic.ts |
不动（helper 保留） |
无 |
InputBar.test.ts |
补充圆角长方形轨道 + 坐席居中不溢出结构测试 |
测试同步更新 |
⚠️ 注意事项与待确认点
- 两端高度：当前两端高 48px、中央隆起高 62px（坐席 54px + 上下各 4px）。若想两端更「扁」或中央更「鼓」，调 SVG path 的 y 值
- 坐席按钮尺寸：54px（其他 40px）。放大/缩小坐席即同步调整隆起幅度
- 弧线平滑度：由 path 控制点（C 102 18,106 11,114 11 等）决定，可调曲度
- 无光晕：已去除全部 halo/glow；如后续想要极淡阴影可单独加，默认保持干净
- 头像占位图：
./agent-avatar-v0.8.jpg 为占位路径，实际集成时替换
v1.6 圆角长方形 · 中央隆起 · 2026-08-05 · Duckula 主理人 · 等待用户拍板进入开发