Simon
facc04aa65
本提交为 .git 对象库损坏后的重建提交，内容等价于原先三个本地提交 （5e2fd4c2 / 57a53c98 / 5d7e1873）的累积结果，未做任何额外改动。 一、docs 结构整改（整改 #14） 根因：重构时新结构为 untracked 文件，执行 git stash（未带 -u）未纳入， 随后 git reset 拉回 HEAD 旧 tracked 树，导致旧树复活、新旧两棵目录 树并存于 docs/，共 791 文件、双分类体系冲突。 修复动作： - b2 同名异主题文件改名迁移保全 9 个 - C 类 39 个孤立文件按主题正确归类 - A/B1 类 222 个重复文件删除（新结构已有内容副本） - 9 个旧独有空目录删除 - 270 处内部引用按 verified 映射改写 - 整改记录 #14 登记于 04-运维文档/部署运维 结果：docs 791 → 569 文件，顶层仅规范 8 类 + 治理文件，单树恢复。 残留：约 20 处指向从未存在文件的陈旧死链，归入独立文档卫生任务。 二、compose 双目录对齐（消除踩坑 A） - docker-compose.yml：nginx 前端挂载全部由根目录 frontend-*/dist 改为 src/frontend-*/dist（h5 / agent / admin / terminal） - docker-compose.dev.yml：dev 服务 build context 与卷同步改 src/ - 效果：本地 docker compose up 不再把根目录 stale dist 挂回， 与线上一致，分叉隐患消除（已 docker compose config 校验通过） 防复发铁律： - 重构须提交；仓库修复须 git stash -u 或先 commit - 新结构须 git add 并提交，避免再次 untracked 复活 - H5 改动只动 src/frontend-h5/，禁改根目录遗留 frontend-*/
24 KiB
24 KiB
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：CSSindex-GZiNwzZW.css167849B / JSindex-CAygTKBS.js375216B）：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?: booleanprop（默认 true，向后兼容）src/frontend-h5/src/components/assistant/RightPanel.vue：v2.3.6 —— accordion-item__header 含徽章+一键诊断 actions 区；queue-sectionmargin-top: auto始终置底；未排队时显示未排队占位src/frontend-h5/src/views/ChatView.vue：移动端 <500px 默认isMobilePanelOpen=false显示左对话，点击 🩺 信息按钮切到右栏；showRightPanel计算：!isMobile || isMobilePanelOpen
一、问题陈述
H5 员工端"自助诊断"面板经多轮迭代后仍存在 5 类问题：
- 标题栏缺异常数量：用户进右栏看不到总异常数，必须逐个 Tab 点开才能汇总
- 6 Tab 是 3×2 网格按钮：占用屏高，不符合移动端/桌面端扁平化设计趋势
- 移动端右栏不可见：ChatView.vue:80-89 移动端 <500px
showRightPanel=false，用户无法在手机上查看诊断/推荐/排队 - 排队区信息分散：标题栏只显示 #5，位置/LV/分全在 queue-content 内的独立卡片，挤占答题区空间
- 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：
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：所有 Tabbadge之和（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=falseprop - 整体高度压缩 ~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：走
- 图标推断：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) 未排队占位（避免标题栏空荡）：
<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/分信息始终挂在
pointsInfocomputed 上，存在时显示
五、非功能需求
| 维度 | 要求 |
|---|---|
| 性能 | 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.vuesrc/frontend-h5/src/components/assistant/QueueWaiting.vuesrc/frontend-h5/src/components/assistant/RightPanel.vuesrc/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 |
十二、待办
- PRD v1.0-Frozen 建出（本文档）
- 原型图 v2.3 升级（已含 7 项决策）
- MEMORY.md 决策沉淀
- PRD v1.0-Live 升级（追加 v2.3.3-v2.3.6 4 项决策 + 算法 + 简称 + 验收）
- 原型图 v2.3.6 升级（标题栏外提 + 检测按钮 + 排队占位 + 标注区更新）
- 技术方案 v1.0-Live 升级（v2.3.3-v2.3.6 完整实现方案）
- 任务说明书 v1.0 建出
- 测试用例 v1.0 建出（50 条）
- 设计文档 v2.3 章节追加
- 原型图重命名（v2.0.html → REQ-用户-007...v1.0.html）
- 前端改造实施（4 文件 + 8 次部署验证完成）
- 浏览器强缓存头部署（nginx 配置
Cache-Control: no-cache, no-store, must-revalidateHTML +immutable 365dassets）