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. 打开自助诊断 2. 验证 6 Tab 都无异常 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 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. 滚动对话到底部 2. 切换到右栏 3. 切换回左对话	左对话滚动位置保留（仍显示原位置）
TC-003-07	切换后输入栏文本保留	P0	375px	1. 在输入栏输入"测试" 2. 切换到右栏 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 + 宋献