# PRD - H5 自助诊断面板优化

> **REQ 编号**: REQ-用户-007
> **版本**: v1.0-Live（前端 v2.3.6 已上线，2026-07-29）
> **日期**: 2026-07-29
> **作者**: 宋献 (Simon) + Duckula
> **状态**: ✅ 前端已上线 v2.3.6（11 项决策全部锁定：①②③ 标题栏三优化 / ④ Tab 精简版 / ⑤ 移动端 toggle A / ⑥ queue 合并 / ⑦ M1 双角标 / ⑧ 徽章外提 / ⑨ 网络系统统一 .diag-item + 检测按钮 / ⑩ 内容高度自适应 / ⑪ 排队置底 + 未排队占位）
> **关联**:
> - 原型图：`docs/01-产品文档/05-用户端H5/原型-REQ-用户-007-自助诊断面板优化-v1.0.html`（v2.3.6）
> - 技术方案：`docs/02-技术文档/技术架构/技术方案-REQ-用户-007-自助诊断面板优化-v1.0.md`（v1.0-Live）
> - 任务说明书：`docs/07-项目管理/任务说明书/任务说明书-REQ-用户-007-自助诊断面板优化.md`
> - 测试用例：`docs/03-测试文档/03-功能测试用例/TC-REQ-用户-007-自助诊断面板优化.md`（50 条）
> - 设计文档：`docs/02-技术文档/前端改造/设计-H5用户端实现概览-v1.0.md`
> **代码真相**（v2.3.6 生产部署版 hash：CSS `index-GZiNwzZW.css` 167849B / JS `index-CAygTKBS.js` 375216B）：
> - `src/frontend-h5/src/components/assistant/SelfDiagnosis.vue`：v2.3.6 —— 内部仅保留 6 Tab + 内容区；标题栏（含徽章+一键诊断按钮）已通过 `defineExpose` 暴露给 RightPanel；网络/系统 Tab 的 diagItems 与其他 Tab 的 riskItems 统一渲染为 `.diag-item` 模板（带 `检测` 按钮）
> - `src/frontend-h5/src/components/assistant/QueueWaiting.vue`：v3.0 位置卡片 + 答题区；新增 `showPosition?: boolean` prop（默认 true，向后兼容）
> - `src/frontend-h5/src/components/assistant/RightPanel.vue`：v2.3.6 —— accordion-item__header 含徽章+一键诊断 actions 区；queue-section `margin-top: auto` 始终置底；未排队时显示 `未排队` 占位
> - `src/frontend-h5/src/views/ChatView.vue`：移动端 <500px 默认 `isMobilePanelOpen=false` 显示左对话，点击 🩺 信息按钮切到右栏；`showRightPanel` 计算：`!isMobile || isMobilePanelOpen`

---

## 一、问题陈述

H5 员工端"自助诊断"面板经多轮迭代后仍存在 5 类问题：

1. **标题栏缺异常数量**：用户进右栏看不到总异常数，必须逐个 Tab 点开才能汇总
2. **6 Tab 是 3×2 网格按钮**：占用屏高，不符合移动端/桌面端扁平化设计趋势
3. **移动端右栏不可见**：ChatView.vue:80-89 移动端 <500px `showRightPanel=false`，用户无法在手机上查看诊断/推荐/排队
4. **排队区信息分散**：标题栏只显示 #5，位置/LV/分全在 queue-content 内的独立卡片，挤占答题区空间
5. **Tab 切换时数据混乱**（用户认知问题）：未明确告知"切换 Tab 只显示当前 Tab 数据"

## 二、范围

### 2.1 In-scope（本次 v1.0-Live 交付）

**v2.3 已上线（PRD v1.0-Frozen 原始 7 项决策）：**
- 自助诊断标题栏：分级显示异常徽章（5W·0F）+ 接入中提示 + 0 异常达标动画
- 6 Tab 由 3×2 网格按钮改为横向并排标签页
- 移动端 toggle 切换：左对话框 ⇄ 右栏（顶部双按钮方案）
- 排队标题栏：合并位置/LV/分信息到标题栏，queue-content 只保留答题区
- 异常 + 接入混合态：M1 双角标并存（红数字徽章 + 灰色斜体小角标）
- 离线 Browser 端可在原型图直接预览所有决策效果

**v2.3.3-v2.3.6 追加 4 项决策（生产环境 v2.3.6 已部署）：**
- **⑧ 标题栏外提**：自助诊断内部不再保留 `self-diag__header` 标题栏；徽章 + 一键诊断按钮提升至外层 `RightPanel.vue` 的 accordion-item__header；SelfDiagnosis 通过 `defineExpose` 暴露 `totalBadge / totalBadgeByLevel / showCelebrate / isRunningAll / hasAnyDiagItems / runAllDiag`
- **⑨ 网络/系统 Tab 统一 .diag-item + 检测按钮**：所有诊断项（diagItems + riskItems）统一渲染 `.diag-item` 模板；每条加 `检测` 按钮，可对单条重新检测（riskItems 模拟 800ms 检测中态，diagItems 走 runSingle 流程）
- **⑩ 内容高度自适应**：删除 accordion-item--active 的 `max-height: 80%` 硬限制；右栏 `overflow-y: auto` 整体可滚动，内容自然撑开
- **⑪ 排队标签置底 + 未排队占位**：queue-section 加 `margin-top: auto` 始终推至主轴底部；标题栏不在排队时显示 `未排队` 占位（替代空荡的标题栏）

### 2.2 Out-of-scope（不在本次范围）

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

## 三、用户故事

### 3.1 员工视角（核心用户）

| 角色 | 场景 | 期望 |
|------|------|------|
| 一线员工 | 打开 H5 进右栏 | 1 秒内看到"✗ 5 个待处理异常"（分级徽章） |
| 一线员工 | 切到"设备" Tab | 看到硬盘 SMART 警告（仅设备 Tab 内容，不显示其他 Tab 数据） |
| 一线员工 | 看到"安全" Tab 显示"•2"小角标 | 知道有 2 项正在接入 SIEM（不计入异常数） |
| 一线员工 | 处理完所有异常，徽章消失 | 看到"✓ 今日安全"绿色脉冲动画（持续 3 秒） |
| 一线员工 | 手机端（<500px） | 顶部双按钮切换"💬 对话 / 🩺 信息"，单击即可 |
| 一线员工 | 查看排队位置 | 在标题栏直接看到 #5 / LV.3 / 120 分（不用展开内容区） |

### 3.2 管理员视角

| 角色 | 场景 | 期望 |
|------|------|------|
| 管理员 | 监控大盘异常分布 | 看到分级 `5W·0F` 直观知道"无 fail，全是 warning" |
| 管理员 | 排查接入中项目 | 看到 Tab "安全"挂"•2"灰色角标，知道 SIEM 还在接入 |

## 四、功能需求

### 4.1 异常徽章（标题栏，v2.3 三优化 + v2.3.3 外提）

#### 4.1.1 三优化（v2.3 已锁定）

| 优化 | 名称 | 实现 | 状态 |
|------|------|------|------|
| ① | **分级显示** | `5W · 0F` 双胶囊（warning 暖黄字 + fail 粉字）；中间 `·` 分隔 | ✅ v2.3 已落地 |
| ② | **接入中提示** | Tab 文字后挂灰色斜体小角标"•N"（不计入异常数）；行内展示"接入中"灰色 tag | ✅ v2.3 已落地 |
| ③ | **0 异常达标动画** | 绿色渐变徽章 + 脉冲光晕（2.4s 循环）+ ✓ 今日安全 文字；3 秒后渐隐 | ✅ v2.3 已落地 |

#### 4.1.2 v2.3.3 标题栏外提（已落地）

**改造前**（v2.3 内部）：SelfDiagnosis.vue 内部有 `.self-diag__header` 独立标题栏，含 🩺 + 自助诊断 + 徽章 + 一键诊断按钮。

**改造后**（v2.3.3 起）：SelfDiagnosis.vue 内部**删除** `.self-diag__header`；通过 `defineExpose` 暴露 6 个 API 给外层 RightPanel：
```typescript
defineExpose({
  totalBadge,           // 全部 Tab badge 之和
  totalBadgeByLevel,    // { w: number, f: number }
  showCelebrate,        // 0 异常达标动画触发
  isRunningAll,         // 是否正在批量诊断
  hasAnyDiagItems,      // 当前 Tab 是否有 diagItems
  runAllDiag,           // 一键诊断方法
})
```
外层 `RightPanel.vue` 的 `accordion-item__header` 通过 `selfDiagRef?.totalBadgeByLevel` 读取数据并渲染徽章 + 一键诊断按钮（在 `accordion-item__header-actions` 容器中，`@click.stop` 阻止冒泡触发折叠）。

#### 4.1.3 5 种状态对照（已展示在原型图对照表）

| 状态 | 视觉 | 触发条件 |
|------|------|---------|
| ① 分级显示 | `5W · 0F` | 当前 Mock（5 warning） |
| ② 含 fail | `2W · 1F` | 假设场景（2 warning + 1 fail） |
| ③ 旧版兼容 | `!5` | 历史版本降级（可选关闭） |
| ④ 达标动画 | `✓ 今日安全` | 全部异常清零时 |
| ⑤ 静态正常 | `✓ 全部正常` | 动画停止后稳态 |

#### 4.1.4 异常计数算法（v2.3.6 最终口径）

```
warning(W) + danger/fail(F) → 计入异常徽章
normal + pending(接入中) + idle(未执行) → 不计入
```

**算法实现在 SelfDiagnosis.vue**：
- `totalBadge`：所有 Tab `badge` 之和（badge = diagItems warning/fail + riskItems warning/danger 项数）
- `totalBadgeByLevel`：分别统计 warning 数 + fail 数（跨所有 Tab）
- `showCelebrate`：`totalBadgeByLevel.w === 0 && totalBadgeByLevel.f === 0`

#### 4.1.5 Tab 文字简称（v2.3.2 锁定）

| 完整名 | 简称（2字） |
|--------|-----------|
| 网络联通 | **网络** |
| 账号权限 | **账号** |
| 设备硬件 | **设备** |
| 系统软件 | **系统** |
| 终端安全 | **安全** |
| 合规检查 | **合规** |

简称通过 `DiagTab.shortLabel` 字段单独维护（避免模板硬编码，方便日后调整）。`tabs` computed 同步返回 `shortLabel` 字段。

### 4.2 6 Tab 横向并排标签页（替代 3×2 网格按钮）

**设计约束**（v2.3 已锁定 + v2.3.2 简称统一）：
- 6 Tab 文字：精简版（**网络 / 账号 / 设备 / 系统 / 安全 / 合规**，2 字简称）
- 高度：30px（v2.3.2 由 34px 改为 30px，更紧凑）· flex 1:1:1:1:1:1 等分
- 激活态：底部 2px 蓝色下划线 + 文字加粗
- 异常 Tab：底部额外一条半透明红色 2px 线（双层指示，激活态红线在蓝线下方 1px）
- 移动端：移动端 <500px 时整 RightPanel 默认不渲染，需点击 🩺 信息按钮切到右栏后可见

### 4.3 移动端 toggle 切换（核心需求）

**仅适用于移动端（<500px）**，桌面端（≥500px）维持双栏不变。

| 决策 | 方案 | 状态 |
|------|------|------|
| 方案 A | 顶部双按钮（💬 对话 / 🩺 信息） | ✅ **锁定** |

**实现要点**：
- ChatView.vue 新增 `isMobilePanelOpen` 状态（默认 false 显示左对话框）
- 仅 `isMobile=true` 时显示切换按钮
- 点击切换：左对话 ↔ 右栏（手风琴 + 智能推荐 + 排队）
- 切换时左对话/右栏状态保留（聊天滚动位置、答题展开状态）

### 4.4 queue 标题栏合并位置/LV/分信息

**改造前**（v2.0/v2.2）：RightPanel.vue queue-header 只显示 ⏳ + "排队等待" + #5 + 答题挑战按钮；queue-content 内 QueueWaiting 组件含完整 position-card（位置 + LV + 分）。

**改造后**（v2.3）：
```
⏳ 排队等待 | #5 前面4人 | LV.3 | 120分 | 答题挑战
```
- queue-header 内联展示三件套（position-inline / lv-inline / points-inline）
- queue-content 只保留答题区，QueueWaiting 组件需新增 `show-position=false` prop
- 整体高度压缩 ~40px（≈50%）

### 4.5 Tab 切换只显示当前诊断项（行为已天然）

**用户需求**："选择某项标签时（网络），下方只显示网络的诊断项，不显示其他标签页诊断项"

**代码现状**：SelfDiagnosis.vue:499-501 `currentTab` 已 computed 自动过滤，切 Tab 时 Vue 自动卸载旧 DOM / 挂载新 DOM。

**结论**：**无需代码改动**，仅原型标注行为。

### 4.6 异常 + 接入混合显示：M1 双角标并存

**场景**：某 Tab 同时有异常（W/F）和接入中（pending）项时（如未来某次"安全" Tab 出现 1 异常 + 2 接入）。

**决策 M1**：Tab 文字右侧显示双角标
- 红数字徽章（`.diag-tab__badge`）= 异常项数
- 灰色斜体小角标（`.diag-tab__pending-hint`）= 接入中项数
- 视觉区隔：颜色（红 vs 灰）+ 字体（标准 vs 斜体小号）

**示例**：`安全 1•2`（红数字 1 + 灰斜体 2）

### 4.7 网络/系统 Tab 样式统一 + 检测按钮（v2.3.4 已落地）

**问题（v2.3.3 之前）**：网络/系统 Tab 的"诊断项"（点击执行诊断）和 账号/设备/安全/合规 Tab 的"风险项"（展示状态信息）使用两套独立 UI：
- 诊断项：`.diag-item`（无图标、无状态徽章）
- 风险项：`.risk-item`（有图标 + 状态徽章）

用户反馈：网络/系统 Tab 的诊断项"样式与其他条目不一致，看起来像缺了一半"。

**v2.3.4 改造方案**：所有条目（diagItems + riskItems）统一渲染为 `.diag-item` 模板。
- 统一模板：`图标 + 名称 + 状态徽章 + 检测按钮 + 折叠箭头 + (展开后)详情行`
- **检测按钮**（`.diag-item__btn`）：每条加独立"检测"按钮，点击触发该条重新检测
  - diagItems：走 `runSingle(item.key)` 流程，800ms-1.5s 后返回 Mock 结果
  - riskItems：模拟 800ms "检测中..." 状态后恢复原态（不对接实际后端）
  - pending 状态条目：禁用按钮
- 图标推断：diagItems 通过 `diagItemIcon(item)` 函数根据 label 文本推断 emoji 图标
- 状态映射：`DiagStatus` → `RiskLevel` 通过 `diagStatusLevel()` 函数映射，共用样式

**收益**：6 个 Tab 内所有条目视觉一致，用户操作路径统一（先看 → 不放心 → 点检测）。

### 4.8 内容高度自适应（v2.3.5 已落地）

**问题（v2.3.4 之前）**：`accordion-item--active` 有 `max-height: 80%` 硬限制，当自助诊断展开且 Tab 内容多时（特别是网络 Tab 6 项 + 系统 Tab 6 项 + 4 个 riskItems）会被截断，用户需手动滚动手风琴区。

**v2.3.5 改造方案**：
- 删除 `.accordion-item--active { max-height: 80% }` 限制
- 右栏 `.right-panel` 设 `overflow-y: auto`，超出视口时整个右栏整体滚动
- 手风琴展开态高度由内容自然撑开
- queue-section `margin-top: auto`（v2.3.6 追加）保证不管内容多寡，排队标签始终贴底

**收益**：自助诊断完全展开后，所有 Tab 内容完整可见，无需逐 Tab 切换查找。

### 4.9 排队标签置底 + 未排队占位（v2.3.6 已落地）

**问题（v2.3.5 之前）**：v2.3.5 去掉 max-height 后，手风琴展开时智能推荐被推上去，queue-section 不再自动贴底（v3.0 设计的"排队到底部"布局失效）。

**v2.3.6 改造方案**：

**(a) 排队标签置底**：
- `.right-panel__queue-section { margin-top: auto }`
- flex column 容器中自动推至主轴底部，**不依赖 flex:1 占满中间空间**
- 即使自助诊断展开 + 智能推荐内容多，排队标签仍贴右栏底部

**(b) 未排队占位**（避免标题栏空荡）：
```vue
<span v-if="isQueued && queuePosition > 0" class="qh-position-inline">
  #<b>{{ queuePosition }}</b><small>前面{{ aheadCount }}人</small>
</span>
<span v-else class="qh-position-inline qh-position-inline--idle">
  <small>未排队</small>
</span>
```
- 排队时：`#5 前面4人`（蓝色背景徽章）
- 未排队时：`未排队`（斜体灰色占位）
- LV/分信息始终挂在 `pointsInfo` computed 上，存在时显示

## 五、非功能需求

| 维度 | 要求 |
|------|------|
| **性能** | Tab 切换响应 < 100ms（DOM 卸载/挂载）；异常徽章实时刷新 < 200ms |
| **兼容** | 桌面端 ≥500px 双栏不变；移动端 <500px toggle 模式 |
| **无障碍** | Tab 切换支持键盘左右箭头；toggle 按钮含 aria-label |
| **动画** | 0 异常达标动画 3 秒后渐隐（避免持续吸引注意力） |
| **dark mode** | 所有徽章/角标在深色模式下对比度 ≥ 4.5:1 |

## 六、接口需求

**无新增后端 API**。本需求为前端 UI 改造，所有数据当前由 WS 推送（`/api/ws`）和 polling 拿到。

**前端组件 props/emit 变更**：

| 组件 | 改动 | 说明 |
|------|------|------|
| `ChatView.vue` | 新增 `isMobilePanelOpen` ref | 默认 false；`showRightPanel` 改为 `computed(!isMobile \|\| isMobilePanelOpen)` |
| `QueueWaiting.vue` | 新增 `showPosition?: boolean` prop | 默认 true（向后兼容） |
| `RightPanel.vue` | 传 `:show-position="false"` to QueueWaiting | queue-header 内联三件套 |
| `SelfDiagnosis.vue` | `defineExpose` 暴露 6 个 API | `totalBadge / totalBadgeByLevel / showCelebrate / isRunningAll / hasAnyDiagItems / runAllDiag`；外层 RightPanel 通过 `selfDiagRef` 读取 |
| `RightPanel.vue` | `selfDiagRef` 实例引用 | `<SelfDiagnosis ref="selfDiagRef" />`；accordion-item__header 通过 `selfDiagRef?.totalBadgeByLevel?.w` 渲染徽章 |

## 七、验收标准

### 7.1 异常徽章
- ✅ 0 异常：徽章透明或显示"✓ 全部正常"（绿色）
- ✅ 5 个 warning：徽章显示 `5W · 0F`（红色背景）
- ✅ 2 warning + 1 fail：徽章显示 `2W · 1F`
- ✅ 全部清零：触发达标动画 3 秒后渐隐

### 7.2 6 Tab 横向并排
- ✅ 桌面端：6 个 Tab flex 等分显示，激活态有蓝色下划线
- ✅ 异常 Tab：底部红色双层下划线
- ✅ 移动端：RightPanel 不渲染（不需考虑）

### 7.3 移动端 toggle
- ✅ 默认显示左对话框
- ✅ 点击 🩺 切换按钮显示右栏（手风琴 + 智能推荐 + 排队）
- ✅ 点击 💬 切回左对话框，聊天滚动位置/输入文本保留
- ✅ 桌面端不显示 toggle 按钮（维持双栏）

### 7.4 queue 标题栏合并
- ✅ 标题栏显示 ⏳ + 排队等待 + #5 + 前面4人 + LV.3 + 120分 + 答题挑战
- ✅ queue-content 内不重复显示位置卡片
- ✅ 整体高度压缩 ~40px

### 7.5 Tab 切换行为
- ✅ 切到"设备" Tab：只显示设备相关诊断项 + 风险项
- ✅ 切到"账号" Tab：账号相关项替换设备相关项
- ✅ 不显示其他 Tab 的数据

### 7.6 异常 + 接入混合
- ✅ Tab "安全" 出现 1 异常 + 2 接入时显示 `安全 1•2`（红数字 + 灰斜体）

### 7.7 标题栏外提 + 一键诊断按钮（v2.3.3）

- ✅ 自助诊断展开区域**无**独立标题栏（v2.3.3 起）
- ✅ 异常徽章（5W·0F 或 ✓ 今日安全）显示在 RightPanel `accordion-item__header` 上 🩺 自助诊断 文字右侧
- ✅ 一键诊断按钮（绿色胶囊）位于徽章右侧；点击触发批量诊断，按钮文字变 "诊断中..."
- ✅ 点击徽章/按钮区域不会触发折叠（@click.stop）

### 7.8 网络/系统 Tab 统一 .diag-item + 检测按钮（v2.3.4）

- ✅ 网络 Tab 6 项 diagItems 与账号 Tab 4 项 riskItems 视觉一致（图标+名称+状态徽章+检测按钮）
- ✅ 每条诊断项右侧有 "检测" 按钮；点击触发该项重新检测
- ✅ diagItems 检测 800ms-1.5s 后显示 Mock 结果；riskItems 检测 800ms 模拟态后恢复
- ✅ pending（接入中）条目的检测按钮被禁用

### 7.9 内容高度自适应 + 排队标签置底 + 未排队占位（v2.3.5 / v2.3.6）

- ✅ 自助诊断展开后：内容高度由条目数自然撑开，无 max-height 截断
- ✅ 右栏整体可滚动（`overflow-y: auto`）；超出视口时滚动条出现
- ✅ 排队标签始终贴右栏底部（`margin-top: auto`），不依赖 flex:1
- ✅ 排队时标题栏显示 `#5 前面4人`（蓝色背景徽章）
- ✅ 未排队时标题栏显示 `未排队`（斜体灰色占位）
- ✅ LV/分信息始终按 `pointsInfo` 状态显示（存在则显示）

## 八、风险与降级

| 风险 | 等级 | 缓解措施 |
|------|------|---------|
| 移动端 toggle 切换导致左对话消息丢失 | 高 | Vue v-show 切换（不卸载 DOM），保留输入栏文本和滚动位置 |
| 异常徽章实时刷新失败（WS 断连） | 中 | 保留最后一次已知状态，15s 后重连重试 |
| 0 异常达标动画吸引注意力过度 | 低 | 3 秒后渐隐，不阻塞操作 |
| 移动端 toggle 按钮误触 | 低 | 切换后顶部按钮固定，触发区域 ≥ 44×44px（iOS HIG） |
| queue 标题栏紧凑导致小屏挤压 | 中 | 6 项信息支持换行（flex-wrap: wrap） |

## 九、决策清单（11 项全部锁定）

| # | 决策点 | 选项 | 状态 |
|---|--------|------|------|
| 1 | Tab 文字方案 | 精简版（网络/账号/设备/系统软件/安全/合规） | ✅ A 已锁定 |
| 2 | 异常徽章显示 | 分级 `5W · 0F` | ✅ v2.3 锁定 |
| 3 | 接入中角标位置 | A 文字右侧 | ✅ v2.3 锁定 |
| 4 | 桌面端 Tab 切换 | 只显示当前诊断项（已天然） | ✅ v2.3 锁定 |
| 5 | 移动端 toggle 方案 | A 顶部双按钮 | ✅ v2.3 锁定 |
| 6 | queue 标题栏合并 | 位置/LV/分 全部合并 | ✅ v2.3 锁定 |
| 7 | 异常+接入混合 | M1 双角标并存 | ✅ v2.3 锁定 |
| 8 | 标题栏位置 | 外提到 RightPanel accordion-item__header（SelfDiagnosis 通过 defineExpose 暴露） | ✅ v2.3.3 锁定 |
| 9 | 诊断项 UI 统一 | 所有条目统一 `.diag-item` 模板 + 检测按钮 | ✅ v2.3.4 锁定 |
| 10 | 内容高度策略 | 内容自然撑开 + 右栏 overflow-y: auto（删除 max-height） | ✅ v2.3.5 锁定 |
| 11 | 排队位置策略 | queue-section margin-top: auto + 未排队时显示"未排队"占位 | ✅ v2.3.6 锁定 |

## 十、关联文档

- **原型图**：`docs/01-产品文档/05-用户端H5/原型-REQ-用户-007-自助诊断面板优化-v1.0.html`
- **技术方案**：`docs/02-技术文档/技术架构/技术方案-REQ-用户-007-自助诊断面板优化-v1.0.md`
- **任务说明书**：`docs/07-项目管理/任务说明书/任务说明书-REQ-用户-007-自助诊断面板优化.md`
- **测试用例**：`docs/03-测试文档/03-功能测试用例/TC-REQ-用户-007-自助诊断面板优化.md`
- **设计文档**：`docs/02-技术文档/前端改造/设计-H5用户端实现概览-v1.0.md`（将追加 v2.3 章节）
- **现有代码**：
  - `src/frontend-h5/src/components/assistant/SelfDiagnosis.vue`
  - `src/frontend-h5/src/components/assistant/QueueWaiting.vue`
  - `src/frontend-h5/src/components/assistant/RightPanel.vue`
  - `src/frontend-h5/src/views/ChatView.vue`

## 十一、变更日志

| 版本 | 日期 | 变更内容 | 作者 |
|------|------|---------|------|
| v1.0-Frozen | 2026-07-29 12:30 | 冻结 7 项决策（基于原型图 v2.3 累计升级）；明确 4.1.1 三优化 + 4.2 6 Tab 横向 + 4.3 移动端 toggle A + 4.4 queue 合并 + 4.5 Tab 切换天然 + 4.6 M1 双角标 | Duckula + 宋献 |
| v2.3.1 | 2026-07-29 13:51 | 修复 Tab 网格 3×2 残留；CSS hash `B5iZHaWc` / JS `DWLS0ZMb` | Duckula |
| v2.3.1 | 2026-07-29 13:56 | 修复 Tab 标签仍为 4 字未用简称；CSS hash `CL_8bZ34` / JS `DRFXN8X-` | Duckula |
| v2.3.2 | 2026-07-29 14:35 | tabs computed 补 shortLabel 字段 + 恢复独立标题栏；CSS hash `BBycvpph` / JS `CbImPO1p` | Duckula |
| v2.3.3 | 2026-07-29 15:13 | 标题栏外提：SelfDiagnosis 删除 self-diag__header，defineExpose 暴露 6 API 给 RightPanel；CSS hash `CCAA9XNU` / JS `DkUAW4Da` | Duckula |
| v2.3.4 | 2026-07-29 15:38 | 网络/系统 Tab 统一 `.diag-item` 模板 + 检测按钮 + diagItemIcon 推断；CSS hash `C8kd4YJI` / JS `DBVfD3sS` | Duckula |
| v2.3.5 | 2026-07-29 15:51 | 删除 accordion-item--active max-height: 80% 限制 + 右栏 overflow-y: auto；CSS hash `CNWqSvBk` / JS `5JtvoGYc` | Duckula |
| **v2.3.6** | **2026-07-29 16:56** | **queue-section margin-top: auto 置底 + 标题栏 v-else "未排队" 占位；CSS hash `GZiNwzZW` / JS `CAygTKBS`** | **Duckula** |
| v1.0-Live | 2026-07-29 17:11 | PRD 升级到 v1.0-Live：追加 4.1.2 标题栏外提、4.1.4 算法、4.1.5 简称、4.7-4.9 三节；§六 接口需求补 SelfDiagnosis defineExpose；§七 验收补 7.7-7.9 三节；§九 决策清单扩充到 11 项；§十一 变更日志补 v2.3.1-v2.3.6 全链路 hash | Duckula |

## 十二、待办

- [x] PRD v1.0-Frozen 建出（本文档）
- [x] 原型图 v2.3 升级（已含 7 项决策）
- [x] MEMORY.md 决策沉淀
- [x] PRD v1.0-Live 升级（追加 v2.3.3-v2.3.6 4 项决策 + 算法 + 简称 + 验收）
- [x] 原型图 v2.3.6 升级（标题栏外提 + 检测按钮 + 排队占位 + 标注区更新）
- [x] 技术方案 v1.0-Live 升级（v2.3.3-v2.3.6 完整实现方案）
- [x] 任务说明书 v1.0 建出
- [x] 测试用例 v1.0 建出（50 条）
- [x] 设计文档 v2.3 章节追加
- [x] 原型图重命名（v2.0.html → REQ-用户-007...v1.0.html）
- [x] 前端改造实施（4 文件 + 8 次部署验证完成）
- [ ] 浏览器强缓存头部署（nginx 配置 `Cache-Control: no-cache, no-store, must-revalidate` HTML + `immutable 365d` assets）