simon/wecom_it_smart_desk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
wecom_it_smart_desk/docs/01-产品文档/05-用户端H5/PRD-REQ-用户-007-自助诊断面板优化-v1.0.md
T
Simon facc04aa65 chore: docs 结构整改 + compose 双目录对齐（合并重建提交） 
本提交为 .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-*/
2026-08-07 22:31:32 +08:00

24 KiB
Raw Permalink Blame History

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：

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) 未排队占位（避免标题栏空荡）：

<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

十二、待办

  • 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-revalidate HTML + immutable 365d assets）
Reference in New Issue View Git Blame Copy Permalink