工具栏统一设计 v1.9 — 融合无边框 · 圆润顶端

v1.8 演进:① 坐席顶端圆肩水平缓出 + 顶点大半径(更圆,顶点抬至 y=4 给圆顶 8px 余量);② 隐藏消息区/工具栏/输入区之间全部区隔线,三区融为连续表面 · 2026-08-05

📐 v1.9 两处改动
坐席顶端更圆润:拱肩控制点改为水平缓出(首控制点 y 与直边齐平,切线水平,与直边 C1 连续无折角);顶点控制点外推至 (132,8)/(180,8)、顶点抬至 (156,4),曲率半径更大 → 顶端更圆;坐席按钮上下各留 8px 余量不探出
三区无边框融合:删去 gem-band 的上下边框、inputbar 的顶部边框,消息区/工具栏/输入区背景统一为同一连续浅色表面(仅窗口标题栏保留 chrome 分隔)。工具栏(gem 轨道)作为连续表面上唯一浮起的玻璃元素,自然"嵌"在消息区与输入区之间
坐席顶端再圆滑(微调):穹顶区间由 x 108..204 拓宽至 x 96..204(更宽),顶点控制点由 (132,8)/(180,8) 调为 (132,7)/(180,7)、拱肩首控制点 (120,18),使顶点切线更平、曲率半径更大 → 顶端更圆滑、与直线段衔接无折角;坐席上下仍各留 8px 余量不探出

🎯 v1.9 实战融合效果(无边框 · 连续表面)

IT 智能服务台 · 在线 · 工单 #SR-20260805-0392
你好,我的 VPN 连不上,提示 691 错误,影响今天远程办公。
智能助手
您好,VPN 691 通常是账号密码错误或账号被锁定。已为您查询:账号状态正常、未过期。
建议先自助排查:① 确认密码未过期;② 在 portal 重置密码后重试。
重置 VPN 密码查看排障指引转人工坐席
重置了还是不行,麻烦转人工。
智能助手
已为您转接人工坐席,请稍候。也可点击下方工具栏「人工坐席」按钮随时发起通话。
描述您的问题,或点击上方工具栏发起操作… 发送

🔍 顶端弧度对比(v1.8 → v1.9)

左 v1.9(穹顶 x 108..204、顶点切线略陡)、右 v1.9 微调(穹顶拓宽至 x 96..204、顶点切线更平、曲率半径更大)。更宽的穹顶 + 更平的顶点,使坐席顶端肉眼更圆滑、与直线段衔接无折角。
v1.9(穹顶较窄)
v1.9 微调(穹顶更宽 · 顶点更平)

🧭 我的专业建议(Duckula 主理人视角)

目标复述

这条工具栏的核心,是让「转人工坐席」成为输入区里最显眼、最可点、又不突兀的主 CTA(召唤按钮)。所有视觉处理都应服务这个目标,而不是反过来让形态喧宾夺主。

对当前「拱形轨道」方案的评估

优点:焦点极强、有品牌记忆点,「坐席嵌在工具栏里」的语义很贴切,比普通扁条更有设计感。

风险

三个可选方向(附优劣)

A. 扁平胶囊工具栏 生产稳妥首选
整条工具栏是一个玻璃胶囊,不做轨道变形;坐席按钮靠「更大(60px) + 渐变环 + 轻微投影抬升」形成焦点。
✅ 用户一眼认出是"输入框上方的工具栏",零歧义;响应式最省事;深色模式/窄屏无缝。
⚠️ 视觉个性弱一些,但"清晰 > 炫"的内部工具通常更划算。

B. 当前拱形(v1.9 融合版) 品牌签名
保留中央隆起,但已做到无边框融合 + 圆润顶端。
✅ 差异化识别度最高,适合产品想有独特视觉语言。
⚠️ 须把曲率锁成设计 token、给出 viewBox 还原规范,开发严格照做;后续增减按钮要重算 path。

C. 悬浮 FAB(浮球)
坐席按钮做成半透明浮球,轻轻压在工具栏/输入区交界上。
✅ App 化最强、点击欲最高、天然"破界"焦点。
⚠️ 改动布局最大,与现有 InputBar 结构冲突最多,落地成本最高。

我的推荐 (拍板前请先看这段)

如果这是面向大量员工的生产工具、以"清晰优先"为原则 → 选 A(扁平胶囊);拱形(B)只作为视觉点缀,不靠它传达层级。若产品经理想有独特识别度、且愿承担 SVG 维护成本 → 选 B(v1.9)

无论选哪个,以下可访问性底线保持不变:坐席按钮 60px(≥44px 触控区)、清晰的 title/aria-label、可见的 focus 态、轨道 SVG 标 aria-hidden(装饰性)。

下一步:你定方向后,我把已列好的 InputBar.vue 改动清单 + 这份原型一并交付开发,进入实现。

📊 版本演进一览

维度v1.8v1.9
坐席顶端顶点 y=6,控制点 138,9/174,9(中等半径)顶点 y=4,控制点 132,8/180,8(大半径更圆)
拱肩与直边衔接近水平(轻微折角)水平切线,C1 连续无折角
坐席按钮余量上下各 6px上下各 8px(更宽松不探出)
三区区隔线gem-band 有上下边框全部隐藏,融为连续表面
融合方式独立 band(仍有边界感)连续浅色表面,轨道为唯一浮起元素

⚠️ 待确认点

  1. 方向拍板:A 扁平胶囊 / B 拱形(v1.9) / C 悬浮 FAB,三者选一(见上方专业建议)
  2. 坐席 60px 口径:按「较 40px 工具图标大 50%」= 60px;若指 v1.6 的 54px 再 +50%(=81px),告知即改
  3. 顶端圆润度:若 v1.9 仍偏尖,可继续外推顶点控制点(如 128,9/184,9)或降顶点 y 更扁更圆
  4. 头像占位图./agent-avatar-v0.8.jpg 为占位路径,实际集成时替换

v1.9 融合无边框 · 圆润顶端 · 2026-08-05 · Duckula 主理人 · 等待用户拍板方向进入开发