wecom_it_smart_desk/docs/03-测试文档/03-功能测试用例/TC-REQ-用户-007-自助诊断面板优化.md

# 测试用例 - H5 自助诊断面板优化

> **REQ 编号**: REQ-用户-007
> **版本**: v1.0
> **日期**: 2026-07-29
> **作者**: 宋献 (Simon) + Duckula
> **状态**: 🟡 待评审（基于 PRD v1.0-Frozen + 技术方案 v1.0）
> **关联文档**:
> - **PRD（冻结）**：`docs/01-产品文档/05-用户端H5/PRD-REQ-用户-007-自助诊断面板优化-v1.0.md`
> - **技术方案**：`docs/02-技术文档/技术架构/技术方案-REQ-用户-007-自助诊断面板优化-v1.0.md`
> - **任务说明书**：`docs/07-项目管理/任务说明书/任务说明书-REQ-用户-007-自助诊断面板优化.md`
> - **原型图**：`docs/01-产品文档/05-用户端H5/原型-REQ-用户-007-自助诊断面板优化-v1.0.html`

---

## 一、基本信息

| 项目 | 内容 |
|------|------|
| **用例集名称** | TC-REQ-用户-007 H5 自助诊断面板优化 |
| **关联 PRD** | REQ-用户-007 v1.0-Frozen（7 项决策已冻结） |
| **用例总数** | 50 条（8 大类） |
| **优先级分布** | P0 14 条 / P1 22 条 / P2 14 条 |
| **关联决策** | 必须 100% 覆盖 PRD 7 项核心决策 |
| **自动化目标** | 单元测试 100% 自动化 / E2E 关键路径自动化 / 边界场景手动验证 |

## 二、测试范围

### 2.1 In-scope

- SelfDiagnosis.vue 新增 totalBadge computed（warn/fail 拆分 + 0 异常达标动画）
- 标题栏徽章 5 种状态（分级/含 fail/旧版兼容/达标动画/静态正常）
- 6 Tab 横向并排标签页（激活态 + 异常 Tab 双层下划线）
- ChatView.vue 移动端 toggle 切换（仅 isMobile=true 显示）
- QueueWaiting.vue 新增 showPosition prop
- RightPanel.vue queue-header-v3 合并位置/LV/分
- 异常 + 接入混合 M1 双角标并存
- Tab 切换只显示当前 Tab 数据（行为已天然，需 e2e 验证）

### 2.2 Out-of-scope

- 诊断数据源接入（SIEM/IDS、联软代理等 → 2026-Q4）
- 触达 0 异常时的自助解决率统计
- 移动端右栏个性化配置（折叠状态本地记忆）
- 诊断结果 NLP 摘要

## 三、测试环境

| 项 | 配置 |
|----|------|
| **前端** | Vue 3 / TypeScript / Vitest |
| **E2E** | agent-browser（Playwright） |
| **浏览器** | Chrome / Edge / Safari 最新版 |
| **设备** | 桌面端（≥500px）/ iPhone iOS Safari 14+ / Android Chrome 8+ |
| **屏宽** | 320px / 375px / 720px / 1920px |
| **环境** | dev → staging → 生产 |

## 四、用例分类规则

| 前缀 | 模块 | 用例数 |
|------|------|--------|
| TC-001 | 异常徽章 5 种状态（决策 ①） | 10 |
| TC-002 | 6 Tab 横向并排（决策 ②） | 8 |
| TC-003 | 移动端 toggle 切换（决策 ⑤） | 8 |
| TC-004 | queue 标题栏合并（决策 ⑥） | 6 |
| TC-005 | Tab 切换只显示当前项（决策 ④） | 4 |
| TC-006 | 异常 + 接入混合 M1（决策 ⑦） | 4 |
| TC-007 | 接入中角标位置（决策 ③） | 4 |
| TC-008 | 跨浏览器/跨设备兼容性 | 6 |
| **合计** | | **50** |

---

## 五、详细用例

### TC-001 异常徽章 5 种状态（决策 ①，10 条）

| ID | 标题 | 优先级 | 前置 | 步骤 | 预期 |
|----|------|--------|------|------|------|
| TC-001-01 | 0 异常显示"✓ 全部正常"绿色 | P0 | Mock 全部正常 | 1. 打开自助诊断<br>2. 验证 6 Tab 都无异常<br>3. 不点击任何项 | 标题栏显示绿色徽章 "✓ 全部正常" |
| TC-001-02 | 5 warning 显示 `5W · 0F` 分级 | P0 | Mock 5W·0F | 同上 | 标题栏显示红色徽章 `5W · 0F`（左 5W 暖黄字 + 右 0F 粉字） |
| TC-001-03 | 2W + 1F 含 fail 样例 | P0 | Mock 2W·1F | 1. 模拟 2 warning + 1 fail | 标题栏显示 `2W · 1F` |
| TC-001-04 | 0 异常达标动画触发 | P0 | 5W 状态 → 模拟清零 | 1. 起始 5W<br>2. 模拟清除所有异常 | 触发"✓ 今日安全"绿色脉冲动画，3 秒后渐隐 |
| TC-001-05 | 达标动画渐隐后显示静态"✓ 全部正常" | P1 | TC-001-04 | 等待 3 秒 | 动画停止，显示静态绿色徽章 "✓ 全部正常" |
| TC-001-06 | 异常徽章 hover 提示 | P1 | 5W 状态 | 1. 鼠标悬停徽章 | 提示："共 5 个待处理异常:5 警告 0 失败" |
| TC-001-07 | 一键诊断按钮联动 | P1 | 5W 状态 | 1. 验证"一键诊断"按钮 | 按钮 disabled（因为有异常），hover 提示"建议先处理后再批量诊断" |
| TC-001-08 | 0 异常时一键诊断可点击 | P1 | 0 异常状态 | 1. 验证"一键诊断"按钮 | 按钮可点击，无 disable |
| TC-001-09 | 徽章实时刷新（WS 推送） | P0 | 起始 5W | 1. 模拟 1 个异常被处理 | 徽章立即从 `5W · 0F` 变为 `4W · 0F`（< 200ms） |
| TC-001-10 | 旧版单数字徽章（兼容） | P2 | config 设置 showLegacy=true | 1. 启用兼容模式 | 显示 `!5` 单数字徽章（已锁定为可选关闭） |

### TC-002 6 Tab 横向并排（决策 ②，8 条）

| ID | 标题 | 优先级 | 前置 | 步骤 | 预期 |
|----|------|--------|------|------|------|
| TC-002-01 | 6 Tab 文字精简版渲染 | P0 | 默认 Mock | 1. 打开自助诊断 | 6 Tab 显示"网络 / 账号 / 设备 / 系统软件 / 安全 / 合规" |
| TC-002-02 | 默认激活 Tab"网络" | P0 | 默认 | 1. 打开自助诊断 | "网络" Tab 文字加粗 + 底部蓝色下划线 |
| TC-002-03 | 异常 Tab 双层下划线 | P0 | Mock 5W·0F | 1. 验证 4 个异常 Tab | 账号/设备/系统软件/合规 Tab 底部红色半透明线 + 蓝色下划线（双层） |
| TC-002-04 | Tab 切换激活态变化 | P0 | 默认 | 1. 点击"账号" Tab | 账号 Tab 变蓝色下划线 + 文字加粗；网络 Tab 失去激活态 |
| TC-002-05 | 切换 Tab 内容区更新 | P0 | 默认 | 1. 点击"设备" Tab | 内容区显示设备相关诊断项/风险项 |
| TC-002-06 | 异常 Tab 数字徽章渲染 | P0 | Mock 5W·0F | 1. 验证 4 个异常 Tab | 账号 Tab 显示红色 1，设备 Tab 显示红色 1，系统软件 Tab 显示红色 2，合规 Tab 显示红色 1 |
| TC-002-07 | 桌面端 720px 6 Tab 等分布局 | P1 | 浏览器 720px | 1. 打开自助诊断 | 6 Tab flex 等分，每个约 120px 宽 |
| TC-002-08 | 桌面端 375px 6 Tab 全部放下 | P1 | 浏览器 375px | 1. 打开自助诊断 | 6 Tab 全部显示无横向滚动（每个约 62px） |

### TC-003 移动端 toggle 切换（决策 ⑤，8 条）

| ID | 标题 | 优先级 | 前置 | 步骤 | 预期 |
|----|------|--------|------|------|------|
| TC-003-01 | 移动端 <500px 默认显示左对话 | P0 | 浏览器 375px | 1. 打开页面 | 显示左对话（聊天窗口），右栏隐藏 |
| TC-003-02 | 移动端 toggle 按钮显示 | P0 | 375px | 1. 验证顶部 | 顶部出现"💬 对话 / 🩺 信息"双按钮（按钮高度 36px） |
| TC-003-03 | 默认激活态为"💬 对话" | P0 | 375px | 1. 验证按钮 | "💬 对话"按钮蓝底白字，"🩺 信息"灰底 |
| TC-003-04 | 点击"🩺 信息"切换到右栏 | P0 | TC-003-03 | 1. 点击"🩺 信息"按钮 | 显示右栏（手风琴 + 智能推荐 + 排队），按钮变"🩺 信息"激活态 |
| TC-003-05 | 点击"💬 对话"切回左对话 | P0 | TC-003-04 | 1. 点击"💬 对话"按钮 | 显示左对话，按钮变"💬 对话"激活态 |
| TC-003-06 | 切换后左对话滚动位置保留 | P0 | 375px | 1. 滚动对话到底部<br>2. 切换到右栏<br>3. 切换回左对话 | 左对话滚动位置保留（仍显示原位置） |
| TC-003-07 | 切换后输入栏文本保留 | P0 | 375px | 1. 在输入栏输入"测试"<br>2. 切换到右栏<br>3. 切换回左对话 | 输入栏文本"测试"保留 |
| TC-003-08 | 桌面端 ≥500px 不显示 toggle 按钮 | P0 | 浏览器 720px | 1. 打开页面 | 顶部无 toggle 按钮，双栏正常显示 |

### TC-004 queue 标题栏合并（决策 ⑥，6 条）

| ID | 标题 | 优先级 | 前置 | 步骤 | 预期 |
|----|------|--------|------|------|------|
| TC-004-01 | 标题栏显示位置 #5 | P0 | Mock 排队中 | 1. 展开排队区 | 标题栏显示 "#5 前面4人"（蓝色徽章） |
| TC-004-02 | 标题栏显示 LV.3 | P0 | Mock 积分等级 | 同上 | 标题栏显示 "LV.3"（灰色 tag） |
| TC-004-03 | 标题栏显示 120 分 | P0 | Mock 120 分 | 同上 | 标题栏显示 "120分"（粗体） |
| TC-004-04 | queue-content 不重复显示位置卡片 | P0 | TC-004-01 | 1. 验证展开内容 | 内容区只有答题区，无独立位置卡片 |
| TC-004-05 | 整体高度压缩 ~40px | P1 | 前后对比 | 1. 测量高度 | 比 v2.0 减少约 40px |
| TC-004-06 | 窄屏（<360px）标题栏换行 | P1 | 浏览器 320px | 1. 打开排队区 | 标题栏内联三件套自动换行（flex-wrap: wrap） |

### TC-005 Tab 切换只显示当前项（决策 ④，4 条）

| ID | 标题 | 优先级 | 前置 | 步骤 | 预期 |
|----|------|--------|------|------|------|
| TC-005-01 | 切到"网络" Tab 只显示网络项 | P0 | Mock 6 Tab 数据 | 1. 点击"网络" Tab | 内容区只显示网络相关诊断项（连通性/DNS/网关/代理/VPN/文件共享） |
| TC-005-02 | 切到"账号" Tab 只显示账号项 | P0 | 同上 | 1. 点击"账号" Tab | 内容区只显示账号相关风险项（域账号/零信任/云盘/邮箱） |
| TC-005-03 | 切到"系统软件" Tab 只显示系统项 | P0 | 同上 | 1. 点击"系统软件" Tab | 内容区只显示系统相关（系统补丁/高危软件/邮件客户端/打印机） |
| TC-005-04 | 切 Tab 时总徽章不变 | P0 | 5W·0F | 1. 反复切 Tab | 总徽章始终是 `5W·0F`（不会因为切 Tab 而变化） |

### TC-006 异常 + 接入混合 M1（决策 ⑦，4 条）

| ID | 标题 | 优先级 | 前置 | 步骤 | 预期 |
|----|------|--------|------|------|------|
| TC-006-01 | "安全" Tab 1 异常 + 2 接入显示 `安全 1•2` | P0 | Mock 安全 Tab: 1W + 2pending | 1. 打开自助诊断 | "安全" Tab 显示红色数字徽章 1 + 灰色斜体小角标 2 |
| TC-006-02 | 双角标视觉区隔 | P1 | TC-006-01 | 1. 视觉验证 | 红色 vs 灰色、标准字体 vs 斜体明显区分 |
| TC-006-03 | 异常 + 接入混合不影响总徽章 | P0 | Mock 安全 Tab: 1W + 2pending | 1. 验证总徽章 | 总徽章显示 `1W · 0F`（仅含 1 异常，2 接入不计入） |
| TC-006-04 | 切换到"安全" Tab 内容区 | P0 | TC-006-01 | 1. 点击"安全" Tab | 内容区显示 4 项：1 异常（红色）+ 2 接入（灰色接入中 tag）+ 1 正常 |

### TC-007 接入中角标位置（决策 ③，4 条）

| ID | 标题 | 优先级 | 前置 | 步骤 | 预期 |
|----|------|--------|------|------|------|
| TC-007-01 | 接入中角标位于 Tab 文字右侧 | P0 | Mock 0 异常 + 2 接入 | 1. 打开自助诊断 | "安全" Tab 文字后挂灰色斜体小角标 `•2` |
| TC-007-02 | 接入中行内 tag 显示"接入中" | P0 | 同上 | 1. 点击"安全" Tab | 风险项后面显示灰色"接入中" tag |
| TC-007-03 | 接入中项不计入异常数 | P0 | 同上 | 1. 验证总徽章 | 总徽章显示 `0W · 0F`（2 接入不计入） |
| TC-007-04 | 接入中角标颜色 | P1 | 同上 | 1. 视觉验证 | 灰色 + 斜体 + 小号（与红数字徽章明显区隔） |

### TC-008 跨浏览器/跨设备兼容性（6 条）

| ID | 标题 | 优先级 | 前置 | 步骤 | 预期 |
|----|------|--------|------|------|------|
| TC-008-01 | Chrome 最新版（桌面 1920px） | P0 | desktop | 1. 打开自助诊断 | 6 Tab 全部正常显示，徽章无样式错乱 |
| TC-008-02 | Safari 最新版（macOS 1920px） | P0 | macOS | 同上 | 同上 |
| TC-008-03 | iPhone iOS Safari 14+（375px） | P0 | iPhone | 1. 打开页面 | toggle 按钮正常显示 + 切换流畅 |
| TC-008-04 | Android Chrome 8+（360px） | P0 | Android | 1. 打开页面 | toggle 按钮正常显示 + 6 Tab 横向并排 |
| TC-008-05 | iPad 720px（横屏） | P1 | iPad | 1. 打开页面 | 双栏正常，6 Tab 等分布局 |
| TC-008-06 | 极窄屏 320px（旧 iPhone SE） | P1 | 旧 iPhone | 1. 打开自助诊断 | 6 Tab 横向并排无错乱（移动端不渲染右栏） |

## 六、风险与回滚

| 风险 | 等级 | 缓解措施 |
|------|------|---------|
| 移动端 toggle 切换导致左对话状态丢失 | 高 | v-show 切换（不卸载 DOM），保留输入文本 |
| 异常徽章实时刷新失败 | 中 | 保留最后一次已知状态 |
| 0 异常达标动画在低端机上卡顿 | 低 | 关闭动画降级为静态"✓ 全部正常" |
| queue 标题栏换行后样式错乱 | 低 | flex-wrap: wrap + gap 控间距 |

## 七、关联文档

- **PRD**：`docs/01-产品文档/05-用户端H5/PRD-REQ-用户-007-自助诊断面板优化-v1.0.md`
- **技术方案**：`docs/02-技术文档/技术架构/技术方案-REQ-用户-007-自助诊断面板优化-v1.0.md`
- **任务说明书**：`docs/07-项目管理/任务说明书/任务说明书-REQ-用户-007-自助诊断面板优化.md`
- **原型图**：`docs/01-产品文档/05-用户端H5/原型-REQ-用户-007-自助诊断面板优化-v1.0.html`

## 八、变更日志

| 版本 | 日期 | 变更内容 | 作者 |
|------|------|---------|------|
| v1.0 | 2026-07-29 12:45 | 初版：基于 PRD v1.0-Frozen + 技术方案 v1.0，给出 50 条用例 / 8 大类 / P0 14 + P1 22 + P2 14 | Duckula + 宋献 |