工具栏统一设计 v1.9 — 员工端落地版
把 v1.9「圆润拱形 + 三区无边框融合」效果正式落到员工端会话窗口 · 作为 输入区主 CTA 工具栏 的最终视觉方案 · 2026-08-05
✅ 本版作为员工端落地交付：圆润拱形轨道 + 三区融为连续浅色表面（无内部区隔线，仅保留窗口标题栏 chrome 分隔） + 工具栏作为唯一浮起玻璃元素嵌于「会话消息区 ↔ 消息输入区」之间。配套交付开发时请连同下方「落地检查清单」一并同步。
🔄 最终微调（更圆润）：穹顶区间由 x 96..204 拓宽至 x 84..216（更宽弧线铺开）；顶点控制点 (126,6)/(186,6)、顶点 (156,4)；底端镜像。顶点切线更平、曲率半径更大 → 顶端视觉上更接近真正的圆顶。
🎯 员工端落地效果（最终视觉）
我
你好，我的 VPN 连不上，提示 691 错误，影响今天远程办公。
智能助手
您好，VPN 691 通常是账号密码错误或账号被锁定。已为您查询：账号状态正常、未过期。
建议先自助排查：① 确认密码未过期；② 在 portal 重置密码后重试。
重置 VPN 密码查看排障指引转人工坐席
智能助手
已为您转接人工坐席，请稍候。也可点击下方工具栏「人工坐席」按钮随时发起通话。
📋 员工端落地检查清单
- 圆角长方形 + 中央圆润拱形轨道（SVG path 已固化）
- 人工坐席按钮 60px 居中、不探出、无光晕
- 两端 4 个工具按钮（emoji/文件/语音/群聊）保持 40px 圆形玻璃，在轨道内不溢出
- 消息区 / gem 工具栏 / InputBar 三区融为连续浅色表面，无内部区隔线
- 仅窗口标题栏保留 chrome 分隔（border-bottom）
- 键盘可达：所有按钮
title + aria-label，可见 :focus-visible 蓝环
- 装饰性 SVG 轨道
aria-hidden="true" role="presentation"，不进入辅助阅读
- 头像占位图
./agent-avatar-v0.8.jpg 接入实际员工头像资源
- 开发实现：
InputBar.vue 按此版结构重构（已在 v1.7 列好文件清单）
- 响应式：≤480px 宽度下退化方案 A 扁平胶囊（拱形在窄屏易走样，预留 fallback）
- 深色模式：背景渐变 / 轨道渐变 / 气泡背景三处需额外定义
prefers-color-scheme: dark 变量
- 回归测试：补充两端收口 + 坐席 60px 居中结构测试用例（
InputBar.test.ts）
🧭 方向选择记录（拍板结果）
本版按用户在 v1.9 专业建议中给出的方向确认结论：选 B（拱形 v1.9）作为员工端的差异化品牌签名。若后续在窄屏（≤480px）出现渲染问题，临时降级为 A 扁平胶囊，已在检查清单预留 fallback。
📊 版本演进一览（v1.3 → v1.9）
| 版本 | 关键变化 | 状态 |
|---|
| v1.3 | 删除 IntegrationZone 旧坐席按钮，InputBar 4 按钮 | 基线 |
| v1.4 | 新增群聊图标 + 坐席居中 | 已归档 |
| v1.5 | 宝石嵌入式（镜片轨道 + 坐席探出 + 紫晕） | 否定 |
| v1.6 | 圆角长方形中央隆起，去探出/光晕/溢出 | 已归档 |
| v1.7 | 两端收口 + 坐席 60px（较 40px 大 50%） | 已归档 |
| v1.8 | 融合会话窗口 + 顶端圆润化 | 已归档 |
| v1.9 | 三区无边框融合 + 拱肩水平切线 + 穹顶更宽 + 顶点更平 | ✅ 当前落地版 |
⚠️ 待开发确认的开放项
- 坐席 60px 口径：按「较 40px 工具图标大 50%」= 60px 实现。若指 v1.6 的 54px 再 +50%（=81px），告知即改
- 头像占位图：
./agent-avatar-v0.8.jpg，接入实际员工头像资源
- 窄屏 fallback：≤480px 退化为 A 扁平胶囊（已在检查清单）
- 深色模式：背景/轨道/气泡三处需补
prefers-color-scheme: dark 变量定义
v1.9 员工端落地版 · 2026-08-05 · Duckula 主理人 · 等待开发实现