# 在线客服 · 设计说明（customer-service.vue）

> 单元：`customer-service` ｜ group=account ｜ P 依据：P01 金刚区「在线客服」+ P13 工具区 + 需求卡通用行「客服」
> 实现：`vue/src/pages/customer-service.vue` ｜ 组状态帧 fixtures：`design/fixtures/account.states.json`

## 1. 区块与密度对照

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 会话流 | `.chat`：时间分隔（今天 14:20 示意）+ 我方右樱粉气泡 / 客服左白气泡+客服头像（角色区分=左右+头像+底色三通道，dims H） | 样例会话 ≥3 气泡 | ✓ |
| ② 系统欢迎语 | serviceMsgs[0]（工作日 10:00-19:00【占位】+安全提示合并句），蓝洗底系统条 | — | ✓ |
| ③ 常见问题快捷入口 3 | 竞拍规则/费用说明/发货时效 chips→半屏说明 Sheet（答案示意占位，「后台可配」语义明示） | 快捷入口 3 | ✓ |
| ④ 底部输入框 | confirm「发送」（回车/按钮）+发送中禁言锁（sending 帧 input disabled+按钮 spinner） | — | ✓ |
| ⑤ 安全提示条 | 常驻黄条「平台客服不会索要密码与验证码」 | — | ✓ |

## 2. 状态帧

| 帧 | 渲染 |
|---|---|
| normal | 欢迎语+FAQ+双向会话 2 气泡 |
| empty | 仅欢迎语+FAQ（=初始会话帧，na 语义「初始欢迎语即初始帧」） |
| sending | 发送中气泡（spinner+「发送中…」）+输入禁言锁 |
| error | 我方失败气泡（红底+「! 重发」）可重发 |
| guest | 可浏览欢迎语与 FAQ；输入区替换为「登录后即可咨询客服」+一键登录→login |
| extreme | N/A（na_reason：会话流无金额/计数极端位，长文本换行归 D 基线） |

## 3. 九维 A–I

- **A**：会话状态机（初始→发送中→成功/失败重发）。
- **B**：发送禁言锁；失败重发。
- **C**：文本框 confirm=发送；无其他表单字段。
- **D**：时间分隔；长文本气泡换行（max-width 74%）。
- **E**：常见问题=半屏说明 Sheet。
- **F**：按 §0.5。
- **G**：按 §0.6。
- **H**：气泡角色区分不单靠颜色（左右+头像+底色）；安全提示警示字 5.53:1。
- **I**：`GET /service/session`；`POST /service/msg`（**占位**——会话为界面示意，不证明后端客服能力）。

## 4. 决策点

| 决策触点 | 对应 |
|---|---|
| 自助常见问题优先，人工兜底 | FAQ 3 入口置前+会话流兜底+安全提示 |

## 5. 占位

- 会话内容/时间分隔/工作时间（10:00-19:00）/FAQ 答案全部为示意占位；客服会话**不接真实通道**（执行方案 §8 已声明）。

## 7. 视觉验收修复轮（2026-10-10）

| 验收问题 | 处置 | 落点 |
|---|---|---|
| [高] error 帧失败气泡红底红字未生效（`.msg.me .bub` 特异性覆盖 `.bub.failed`） | 已修：显式 `.msg.me .bub.failed` 规则（#FFE9E9+price-deep），红底红字双通道生效 | customer-service.vue 样式 |
| [中] device-393.png 底部输入区被裁 | **组内修不掉**（render.py:87 viewport 恒 375×812，P-1 已记录）；DOM 几何验证 393/852 舞台无溢出 | scripts/render.py（底座） |
| [中] 可点区域 <44pt（发送 40/一键登录 36/FAQ 30/输入框 40） | 已修：发送钮与一键登录 44 高、输入框 44、FAQ chips `::before` 热区扩展 | customer-service.vue `.go/.gologin/.ipt/.faq` |
| [低] 发送按钮启用态五帧均不可见（恒禁用 1.50:1） | 已修：按钮恒可用，空文案点击 toast「请输入问题描述」；启用态全饱和可见 | customer-service.vue `send()` |
| [低] 严格口径双向气泡仅 2 | **维持记录不改**：会话内容以 mock.js serviceMsgs 为唯一数据源，不新造会话文案；密度口径按本文档 §1（欢迎语条计入） | — |
| 状态板帧底输入条下半被裁 | 板几何组内已随 P-2 修（本页无底部锚定弹层帧，影响为板画布高度）；重出图后复核 | — |