← 文档站 · 2026-10-08 · 原型仅供审核，不含实现代码 · 亮暗双版：?theme=dark 或页内切换
参考 Crisp 的客服产品体验与交互模式（仅提炼模式，不抄代码与资产），结合设计系统方法生成器多轮对标，收敛为：
#2563eb / dark #3b82f6（暗版提档保 4.5:1 对比度），专业的信任感蓝，同行业客服 SaaS 主流色相。examples/theme.json 中的 headerBg: linear-gradient(...) 为历史遗留，实现阶段一并去除。primitive（色板）→ semantic（bg / text / border / primary / bubble…）→ component（panel / header / chip…）。亮暗切换只换 semantic 层（[data-theme="dark"]），组件样式零改动；客户品牌注入只需覆盖 5 个语义 token（见嵌入演示页）。
| token | light | dark | 用途 |
|---|---|---|---|
--color-primary | #2563eb | #3b82f6 | 主操作 / 链接 / 悬浮球 |
--color-bg / --color-card | #f8fafc / #ffffff | #0b1120 / #111a2c | 页面底 / 卡片 |
--header-bg | = primary（纯色） | #16233f（比主色沉一档） | 聊天窗 / 移动 sheet header |
--bubble-self-bg | = primary | = primary + 深字 #0b1120 | 访客气泡 |
--color-text / -2 | #0f172a / #64748b | #e2e8f0 / #94a3b8 | 主文 / 次文 |
--radius-panel / -bubble / -input | 16 / 12 / 20（控件 8，沿用 --sw-* 现值） | 圆角语言 | |
结论：8 条全部为可参考级——均为参考例验证过的成熟模式，且与竞品调研 《竞品调研》§四结论一致（聊天体验是同质化标配，差异点在 AI 首答形态与转人工顺滑度），故全部保留进原型；对应实现验收点是 todo C1-2（主题定制）与 C1-3（两风格真机验证），实现阶段按下列各项逐条对屏验收。
结论：widget 三屏覆盖访客全旅程（进线 → 聊天 → 悬浮球形态），admin 五屏取 23 项菜单里流量最高的代表面，embed 两屏演示品牌注入——10 屏即 v1 实现范围的可视化清单。
widget聊天窗 · 桌面380×620 旗舰屏：欢迎语 / AI 首答+引用 / 转人工 / typing / chips / 输入区
widget悬浮球三态收起 / 未读徽标 / 展开过渡（spring 240ms）
widget聊天窗 · 移动端375 底部 sheet：把手 / 安全区 / chips 横滚
admin登录账号密码 + OIDC 企业 SSO
admin仪表板4 指标卡 + 纯色堆叠柱图 + 最新动态流
admin接待工作台三栏：等待队列 / 会话接管 / 客户上下文 + 宏
admin工单列表状态 tab / 筛选 / 表格 / 分页（徽标六态）
admin知识库文档 / 片段命中 / 索引状态（AI 首答的来源面）
embed嵌入演示 · 浅色站青屿云 teal 注入：桌面 980 + 375 变体同页
embed嵌入演示 · 暗色站暗版品牌提档（teal-500 保对比度）
管理端信息架构对齐现有路由 23 项菜单，原型为其中 5 个代表屏；全尺寸原始截图（亮暗 × 视口矩阵共 18 张）在 screenshots/，单屏亮暗对照请点卡片进对应页面。