工具栏统一设计 v1.7 — 两端收口 · 中央隆起

v1.6 修正版:两端图标完全收在工具栏范围内;人工坐席图标增大 50%(60px,较 40px 工具图标大 50%),将上下边框平滑撑起中央隆起 · 2026-08-05

📐 v1.7 改动说明(修正 v1.6 的 2 点 + 过渡内收平滑)
两端图标收口:工具栏轨道向左右延伸、完整包住 emoji/文件/语音/群聊,图标在水平与垂直方向均有余量,不再从左右圆角端探出
坐席按钮增大 50%:人工坐席按钮由 54px → 60px(较 40px 工具图标大 50%),其更大尺寸将上下边框从两端向中央平滑撑出弧线,按钮不探出、无光晕
两端直线、中央连续拱:除人工坐席外的两侧图标(emoji/文件/语音/群聊)上下方工具栏保持直线;仅中央坐席处为连续拱起的弧线,拱顶在坐席正中(156,6)/ 拱底(156,78),无中央直线段;坐席四周为渐升圆顶(从直线段平缓起步、均匀升起、圆润收顶),平滑无陡升折感
④ 仍保持:圆角长方形、无光晕、工具按钮不溢出

🎯 v1.7 目标对比(Before / After)

v1.6(上一版:两端图标探出 + 坐席 54px)
请输入消息...
⚠️ 问题: 两端图标从圆角端探出;坐席 54px 隆起幅度偏小
v1.7(目标:两端收口 · 中央隆起)
请输入消息...
效果: 两端图标完全在轨道内;坐席 60px 将上下边框平滑撑起中央隆起,不探出、无光晕

📊 v1.6 vs v1.7 改动对比

维度 v1.6(上一版) v1.7(目标)
两端图标是否超出轨道 是(从左右圆角端探出) (轨道向左右延伸完整包住,水平+垂直均有余量)
人工坐席按钮尺寸 54px 60px(较 40px 工具图标大 50%)
中央隆起幅度 中央高 62 / 两端 48 中央高 72 / 两端 48(隆起更明显)
坐席按钮探出 / 光晕 不探出 / 无光晕 不探出 / 无光晕(保持)
工具按钮溢出 不溢出 不溢出(保持)

🛠️ 需要修改的文件清单

文件 改动 影响
src/frontend-h5/src/components/chat/InputBar.vue :工具栏容器加左右 padding 使轨道包住两端图标;SVG path 左右延伸、中央因 60px 坐席按钮隆起;坐席按钮 60px、去除光晕、不探出;工具按钮保持 40px 在轨道内 本文件工具栏局部重构
IntegrationZone.vue 不动(v1.3 已删除坐席按钮)
inputBarCallAgentState.ts / integrationZoneLogic.ts 不动(helper 保留)
InputBar.test.ts 补充两端收口 + 坐席 60px 居中结构测试 测试同步更新

⚠️ 注意事项与待确认点

  1. 50% 口径:本次坐席按「较 40px 工具图标大 50%」= 60px。若你指 v1.6 的 54px 再 +50%(即 81px),告知我即改
  2. 两端收口:轨道现向左右各延伸 16px 包住图标;若想端帽更贴图标或更宽,调 .gem-toolbar 的 padding 与 path 的 x 端点
  3. 隆起幅度:中央 72 / 两端 48,由 path 的 y 值(6/78 与 18/66)控制
  4. 无光晕:保持干净,仅渐变描边
  5. 头像占位图./agent-avatar-v0.8.jpg 为占位路径,实际集成时替换

v1.7 两端收口 · 中央隆起 · 2026-08-05 · Duckula 主理人 · 等待用户拍板进入开发