交付 - 工具栏统一设计 v1.9 · 开发交付清单

版本: v1.9（员工端落地版 · 2026-08-05 最终微调） REQ 编号: REQ-会话-001 负责人: Duckula 主理人状态: ✅ 已拍板，正式交付开发 基线原型: 原型-REQ-会话-001-工具栏统一设计v1.9-员工端落地版.archive.html 历史版本（已归档，仅供回溯）: v1.3 / v1.4 / v1.5 / v1.6 / v1.7 / v1.8

一、目标

把员工端会话窗口的输入区工具栏统一为：

圆角长方形 + 中央圆润拱形轨道（人工坐席按钮 60px 居中），工具栏作为唯一浮起的玻璃元素，融于「会话消息区 ↔ 消息输入区」之间。三区共享同一块连续浅色表面，无内部区隔线。

业务目标：让"转人工坐席"成为输入区里最显眼、可点、不突兀的主 CTA。

二、需要修改/创建的文件

#	文件	类型	改动	影响范围
1	`src/frontend-h5/src/components/chat/InputBar.vue`	改	工具栏容器重构为 `.gem-toolbar`；新增 SVG 轨道；坐席按钮 .agent-btn.gem（60px、居中、不探出、无光晕）；工具按钮 .glass-btn 保持 40px 在轨道内不溢出；aria-label/title/focus-visible；装饰 SVG 加 aria-hidden	仅本组件
2	`src/frontend-h5/src/components/chat/InputBar.test.ts`	改	补充两端收口 + 坐席 60px 居中结构测试	测试同步
3	`src/frontend-h5/src/assets/images/agent-avatar.jpg`	新建/替换	接入实际员工头像资源（占位图 `agent-avatar-v0.8.jpg` 替换）	资源替换
4	`src/frontend-h5/src/styles/theme.scss`（或对应 token 文件）	改	新增 gem 工具栏相关设计 token：`--gem-toolbar-height: 84px` / `--gem-btn-size: 40px` / `--gem-agent-size: 60px` / `--gem-radius: 18px`	全局可复用

不动：

IntegrationZone.vue（v1.3 已删除坐席按钮）
inputBarCallAgentState.ts / integrationZoneLogic.ts（helper 保留）
IntegrationZone.test.ts（无坐席按钮相关测试）
其余无关组件

三、SVG 轨道（必须严格按此 path 实现）

viewBox: 0 0 312 84 中心线 y: 42 关键几何（不要改）：

坐席按钮 60px，y 区间 12..72
工具按钮 40px，y 区间 22..62
轨道左右端点 x=0 / x=312，圆角端帽半径 18
顶/底两端直线段：y=18 / y=66，x 区间 [18..84] 与 [216..294]
穹顶区间：x 84..216
顶点：y=4（顶）/ y=80（底），位于 x=156

<svg class="gem-toolbar-bg" viewBox="0 0 312 84"
     preserveAspectRatio="xMidYMid meet"
     aria-hidden="true" role="presentation">
  <path d="M 18 18
           L 84 18
           C 116 18, 126 6, 156 4
           C 186 6, 196 18, 216 18
           L 294 18
           C 302 18, 312 26, 312 34
           L 312 50
           C 312 58, 302 66, 294 66
           L 216 66
           C 196 66, 186 78, 156 80
           C 126 78, 116 66, 84 66
           L 18 66
           C 0 66, 0 58, 0 50
           L 0 34
           C 0 26, 10 18, 18 18 Z"
        fill="url(#g-rail)" stroke="rgba(255,255,255,0.85)" stroke-width="1.2"/>
</svg>

SVG defs（轨道渐变 + 已有图标渐变） 全部沿用 v1.9 落地版文件中的 <defs> 块，复制即可。

四、核心 CSS（按此实现）

.gem-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  width: fit-content;
  height: 84px;
}
.gem-toolbar-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: visible;
}
.gem-row {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
}
.gem-toolbar .agent-btn.gem {
  width: 60px; height: 60px;
  margin: 0 6px; z-index: 3;
  box-shadow: none;          /* 不探出 · 无光晕 */
}
.gem-toolbar .glass-btn { z-index: 2; }

/* 可见的键盘 focus 态（可达性） */
.glass-btn:focus-visible,
.agent-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

三区融合关键：消息区 / .gem-band / .inputbar-mock 都不要 border-top/border-bottom，且 background: transparent，让 chatpanel 自身的渐变背景透出来，仅窗口标题栏保留 chrome 分隔。

五、可访问性（必做）

每个 <button> 同时具备 title 与 aria-label
装饰性 gem 轨道 SVG：aria-hidden="true" + role="presentation"
坐席徽标：aria-label="在线"（按实际状态文案切换）
全部按钮可见 :focus-visible 蓝环（参考 #6366f1 2px outline + 2px offset）
触控目标 ≥ 44px：工具按钮 40px 仅差 4px，靠 padding 或 outline 不缩小可视区；坐席按钮 60px 满足

六、响应式预案（≤480px 窄屏 fallback）

@media (max-width: 480px) {
  /* 拱形轨道在窄屏易走样，降级为方案 A 扁平胶囊 */
  .gem-toolbar { height: 56px; padding: 0 12px; }
  .gem-toolbar-bg { display: none; }  /* 隐藏拱形 SVG */
  .gem-row {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    padding: 8px 16px;
  }
  .gem-toolbar .agent-btn.gem { width: 52px; height: 52px; }
  .gem-toolbar .glass-btn { width: 36px; height: 36px; }
}

七、深色模式预案（预留实现）

@media (prefers-color-scheme: dark) {
  .chatpanel-mock {
    background: linear-gradient(180deg, rgba(30,30,40,0.95), rgba(20,20,28,0.95));
  }
  .mock-msg.ai {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.3);
    color: #e5e7eb;
  }
  /* 轨道渐变 g-rail 在 dark 下需重新定义两端 stop-color */
  /* 输入框背景：rgba(255,255,255,0.08) */
}

八、落地检查清单（☑ 12 项 · 交付时逐项打勾）

圆角长方形 + 中央圆润拱形轨道（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 按此版结构重构
响应式：≤480px 宽度下退化方案 A 扁平胶囊（拱形在窄屏易走样，预留 fallback）
深色模式：背景渐变 / 轨道渐变 / 气泡背景三处需额外定义 prefers-color-scheme: dark 变量
回归测试：补充两端收口 + 坐席 60px 居中结构测试用例（InputBar.test.ts）

九、回归测试要点

5 个按钮均渲染，顺序：emoji / 文件 / 坐席 / 语音 / 群聊
坐席按钮 DOM 含 .gem 类，宽高严格 60×60
SVG <path> 的 d 属性与本清单 §三一致（防止误改坐标）
装饰 SVG aria-hidden="true"
@media (max-width: 480px) 下 .gem-toolbar-bg 不可见、.gem-row 有胶囊样式
键盘 Tab 顺序：emoji → 文件 → 坐席 → 语音 → 群聊 → 输入框 → 发送
焦点态可见 2px outline

十、开放项（交付后不影响主流程，按需迭代）

项	默认值	说明
坐席 60px 口径	较 40px 工具图标大 50%	若后续产品澄清指 v1.6 的 54px 再 +50%（=81px），需重算 SVG path
头像资源	占位图	接入实际员工头像后视觉验收
顶端圆润度	当前 SVG path 已推到接近几何极限	继续推会出现"拱成平顶"或圆角端帽被挤压；若有更强需求须重新设计几何
深色模式	§七提供实现骨架	需设计 token 全局对齐

十一、上线流程建议

开发还原：按 §三 §四实现 InputBar.vue，逐项打勾 §八清单
设计验收：与 Duckula 主理人对齐像素、SVG 几何、可访问性
窄屏验收：≤480px fallback 单独跑一遍
回归测试：跑 §九测试要点
预发布：灰度 1% → 10% → 100% 观察工具栏点击率 / 误触率
全量上线：归档 v1.9 原型至历史目录，更新 PRD 引用

拍板人: Simon 拍板时间: 2026-08-05 文档版本: 交付版 v1 联系人: Duckula 主理人（WorkBuddy · 团队助手）

8.6 KiB Raw Blame History Unescape Escape