工具栏统一设计 v2.0 — 员工端服务蓝扁平服务舱

按 PRD-REQ-通用-001-前端设计系统 v1.2 重定义 · 2026-08-06 · Duckula 主理人 | 基线：v1.9.2 主绿水晶玻璃版

✅ v2.0 关键决策（PRD v1.2 §4.1.3）：
① 主色迁移：企微绿 → 服务蓝 #1769E0（员工端新角色主题）；绿色回归成功/在线/已解决语义
② 工具栏定位：默认采用扁平蓝色服务舱（稳定对比度、低性能成本），蓝色水晶玻璃作为 @supports (backdrop-filter) 增强
③ 降级保证：@supports not (backdrop-filter) 时自动切换为实色浅蓝 + 蓝色描边，布局/对比度/可操作性不变
④ 阴影约束：装饰性外阴影 ≤2 层（原 v1.9.2 是 3 层 feDropShadow，现收敛为 1 层）
⑤ Token 分层：基础色板层 → 角色主题层 → 语义用途层，组件只消费语义用途层
⑥ 三端区分：员工端蓝 / 坐席端深海蓝 / 管理端海军蓝，三端共享字体/间距/圆角/图标/交互，主题色按角色变化

🎯 员工端落地效果（v2.0 最终视觉）

IT 智能服务台 · 在线 · 工单 #SR-20260805-0392

我

你好，我的 VPN 连不上，提示 691 错误，影响今天远程办公。

智能助手

您好，VPN 691 通常是账号密码错误或账号被锁定。已为您查询：账号状态正常、未过期。
建议先自助排查：① 确认密码未过期；② 在 portal 重置密码后重试。

重置 VPN 密码查看排障指引转人工坐席

我

重置了还是不行，麻烦转人工。

智能助手

已为您转接人工坐席，请稍候。也可点击下方工具栏「人工坐席」按钮随时发起通话。

描述您的问题，或点击上方工具栏发起操作… 发送

🔁 降级对照（PRD §6 技术方案）
支持 backdrop-filter: blur(1px) 时，.toolbar 启用蓝色水晶玻璃（backdrop-filter: blur(20px) saturate(160%)），背后消息内容被柔化透出。
不支持时（如低端 Android 浏览器、关闭玻璃效果的系统设置），@supports not 规则生效：--glass-bg 改为实色浅蓝 #E7F0FF、--glass-stroke 改为实色蓝 #1769E0，布局、对比度、操作性完全一致。

🎭 坐席按钮 - 头像 + 状态徽标（5 色，v2.0 服务蓝对齐）

✅ 补齐 v1.2 状态徽标 5 色体系（原 v2.0 仅保留单一在线绿，已缺失完整状态色）。
· 头像本体不变色，仅右下角徽标承载状态色（v1.2 §坐席状态决策：简洁、不喧宾夺主）
· 颜色全部取自 v2.0 语义层 Token：在线=成功绿 #15803D / 紧急=危险红 #B42318 / 等待=告警橙 #B45309 / 结束·重连=信息蓝 #1769E0 / 离线=中性灰 #9CA3AF
· 紧急状态徽标 1.5s 红色呼吸脉动；离线状态整体不透明度降至 0.5 弱化

在线 🟢

紧急 🔴（呼吸）

等待 🟠

结束·重连 🔵

离线 ⚫（弱化）

📋 v2.0 落地检查清单（PRD v1.2 强约束）

圆角长方形 + 中央圆润拱形轨道（SVG path 沿用 v1.9 交付清单 §三锁定）
🆕 主色由企微绿迁至服务蓝：#1769E0 角色主题色，员工端产品语义清晰（可信、亲和、低压力）
🆕 工具栏默认 = 扁平蓝色服务舱：实色 #E7F0FF 浅蓝 + 实色 #1769E0 描边（PRD §4.1.3 决策）
🆕 蓝色水晶玻璃 = 可选增强：仅 @supports (backdrop-filter) 时启用 blur(20px) saturate(160%)
🆕 降级方案完整：@supports not (backdrop-filter: blur(1px)) 实色回退，对比度 WCAG ≥4.5:1 维持
🆕 装饰性外阴影 ≤2 层：本版 = 1 层（卡片 + 工具栏 + 按钮各 1 层 inset/外阴影）
🆕 Token 分层落地：组件消费 --color-action-primary / --color-focus-ring / --color-status-success 等语义层，禁止直接写 #1769E0
🆕 坐席状态徽标 5 色体系补齐（v1.2 决策回归）：在线绿 #15803D / 紧急红 #B42318 / 等待橙 #B45309 / 结束·重连蓝 #1769E0 / 离线灰 #9CA3AF，颜色均取自语义层，头像本体不变色
🆕 头像加载失败降级：onerror 标记 .img-broken 隐藏破图，:has() 占位服务蓝胶囊 + 🦆，避免原型再次出现破图
🆕 人工坐席描边 = 蓝色主题：border: 2px solid var(--theme-accent)，不再是绿色描边
人工坐席头像沿用 C-3(1).png（v1.9.2 已接入）
三区无边框融合：仅保留窗口标题栏 chrome 分隔（v1.9.1 起）
键盘可达：所有按钮 title + aria-label，可见 :focus-visible 服务蓝环
开发实现：InputBar.vue 升级到 v2.0（PRD v1.2 主题层 + 降级 CSS）
回归测试：服务蓝主题在浅色/深色/低性能设备三态回归
响应式：≤480px fallback 沿用 v1.9 方案 A 扁平胶囊

🆚 v1.9.2 → v2.0 差异对比（PRD v1.2 主题重定义）

维度	v1.9.2 主绿水晶玻璃版	v2.0 服务蓝扁平版
PRD 基础	v1.0 / v1.1（企微绿主色）	v1.2（服务蓝主色）
主色（角色主题）	企微绿 `#07C160`	服务蓝 `#1769E0`
辅助色（角色主题）	成功绿 `#10B981`	青蓝 `#0E9FBA`
页面基底	主绿径向渐变（装饰性）	`#F4F8FD`（`--surface-page` 实色）
工具栏默认	水晶玻璃主导（强制 backdrop-filter）	扁平蓝色服务舱（实色 + 蓝色描边）
水晶玻璃	默认即开，`blur(28px) saturate(180%)`	可选增强，仅 `@supports` 启用 `blur(20px) saturate(160%)`
降级方案	无（不支持 backdrop-filter 时画面残缺）	`@supports not` 实色回退，对比度/布局不变
装饰性外阴影	3 层 feDropShadow + 多层 box-shadow	1 层 `--shadow-sm`（PRD 约束 ≤2 层）
坐席描边	主绿渐变 `#10B981 → #07C160 → #34D399`	实色服务蓝 `#1769E0`
坐席在线徽标	`#10B981` 成功绿	`#15803D` 语义成功绿（更深的对比度）
用户消息气泡	主绿渐变（多色发光）	实色服务蓝（无渐变，符合 PRD §4.1.2）
AI 消息气泡	浅绿 + 绿边	浅蓝 `#F3F8FF` + 蓝边 `#D8E6F7`
语音 / 群聊图标	主绿渐变（紫粉已弃）	实色服务蓝 / 青蓝（符合角色主题）
Token 架构	扁平 `--color-primary` 单层	三层架构：基础色板 → 角色主题 → 语义用途
多色发光	存在（紫粉 → 绿）	禁止（PRD §4.1.3）
头像素材	C-3(1).png	C-3(1).png（沿用，不变）
几何（SVG path）	严格按清单 §三	不变（架构稳定）

🧭 决策记录

本版按 PRD-REQ-通用-001-前端设计系统 v1.2 重定义员工端主题。关键决策：
· 员工端由「企微绿主色」迁移为「服务蓝主色」（--theme-accent: #1769E0）
· 工具栏由「水晶玻璃主导」转为「扁平蓝色服务舱主导 + 玻璃增强可降级」
· 装饰性外阴影 ≤2 层（原 v1.9.2 是 3 层 feDropShadow，现收敛为 1 层 --shadow-sm）
· Token 三层架构（基础色板 / 角色主题 / 语义用途），组件只消费语义层
· 绿色仅保留为成功/在线/已解决语义，不再作为品牌主色
· 紫色 #6366f1 完全清退（PRD §4.1.2 仅用于 AI 能力或管理端辅助）

⚠️ 已归档：v1.9.2 主绿水晶玻璃版同步归档为 原型-REQ-会话-001-工具栏统一设计v1.9.2-员工端主绿水晶玻璃版.archive.html，保留历史轨迹但不作为最终交付。

⚠️ 待开发对齐的开放项

Token 文件统一注入：在 src/frontend-h5/src/styles/tokens.css 落地三层架构，并通过根容器 [data-product="employee"] 注入
降级验证：在 Safari iOS 旧机型、Android Chrome 90 以下、关闭系统玻璃效果三种环境实测 @supports 切换
WCAG 对比度复测：#FFFFFF on #1769E0 = 5.6:1 ✓ / #172B4D on #FFFFFF = 11.7:1 ✓ / #15803D on #FFFFFF = 4.6:1 ✓
坐席 60→56px：本版扁平化后将坐席从 60px 收敛到 56px（与扁平工具栏更协调），但需用户确认
三端主题一致性：坐席端深海蓝 #155E75 / 管理端海军蓝 #4F72D8 同步切换，参考 PRD §4.1.4 / §4.1.5
头像素材保留：agent-avatar-v2.0.png（已生成于本目录，1024×974）沿用，与品牌一致；v2.0 主工具栏已修正引用路径（原误引 v1.9.2 不存在文件）

v2.0 员工端服务蓝扁平服务舱 · 2026-08-06 · Duckula 主理人 · 按 PRD-通用-001 v1.2 重定义 · 已开发实现并视觉验收