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-*/

docs/02-技术文档/前端改造/前端改造建议-v1.0.md

@@ -0,0 +1,132 @@
+# IT智能服务台 — 前端改造建议
+
+> **版本**: v1.1
+> **日期**: 2026-07-10
+> **作者**: 宋献
+> **类型**: 技术 - 前端改造
+> **源自**:
+> - 方案-全套改造建议与推广-v1.0.md
+> - 方案-前端评价与推广-v1.0.md
+> **合并说明**: 本文档整合了两个方案文档中的前端改造建议内容
+
+---
+
+## 一、当前问题诊断
+
+| 端 | 技术栈 | 主要问题 |
+|----|--------|---------|
+| H5端 | Vue3 + Vant4 | 功能完善但视觉老旧，参与者列表占空间大，缺少引导动画 |
+| 坐席端 | Vue3 + Element Plus | 三栏工作台信息密度高但层次不清，组件风格不统一 |
+| 管理后台 | Vue3 + Element + Tailwind | 功能齐全但数据可视化弱，仪表盘缺乏设计感 |
+
+---
+
+## 二、改造方案：统一设计系统
+
+### 2.1 核心原则
+
+一套设计令牌，三端共享，各自适配。
+
+### 2.2 设计令牌层（Design Tokens）
+
+```
+设计令牌层（Design Tokens）
+├── 色彩系统
+│   ├── 主色 #07C160（企微绿，已在用）
+│   ├── 辅助色 #3b82f6（坐席蓝）/ #FF9800（发起人橙）
+│   ├── 语义色 success/warning/danger/info
+│   └── 中性色 9级灰阶
+├── 排版系统
+│   ├── 字体：PingFang SC / Microsoft YaHei
+│   ├── 字号：12/13/14/15/16/20/24/30
+│   └── 行高：1.4/1.5/1.6
+├── 间距系统
+│   ├── 基准 4px，刻度 4/8/12/16/20/24/32/48
+│   └── 组件内 padding：12/16，卡片 padding：16/20
+├── 圆角系统
+│   ├── sm 6px / md 8px / lg 12px / xl 16px / full 999px
+│   └── 按钮用 md，卡片用 lg，弹窗用 xl
+├── 阴影系统（克制使用）
+│   ├── sm 0 1px 2px rgba(0,0,0,0.04)
+│   ├── md 0 2px 8px rgba(0,0,0,0.06)
+│   └── lg 0 4px 16px rgba(0,0,0,0.08)
+└── 动效系统
+    ├── 快速 150ms（hover/press）
+    ├── 标准 200ms（展开/收起）
+    └── 慢速 300ms（弹窗/页面过渡）
+```
+
+---
+
+## 三、三端改造重点
+
+| 端 | 改造重点 | 预期效果 |
+|----|---------|---------|
+| H5端 | 1. 群聊双模式落地 2. 首屏加载骨架屏 3. 消息发送动画 4. 空状态插画 5. 下拉刷新体验 | 聊天区域空间释放40%，视觉年轻化 |
+| 坐席端 | 1. 三栏布局优化（可拖拽分栏） 2. 会话列表卡片重设计 3. 排查流程图可视化 4. 快捷键体系 5. 暗色模式 | 信息层次清晰，坐席效率提升 |
+| 管理后台 | 1. 仪表盘数据可视化升级 2. 图表组件统一 3. 表格密度可调 4. 筛选器重设计 | 管理层数据一目了然 |
+
+---
+
+## 四、改造执行路径
+
+```
+Phase 1: 设计系统建立（2周）
+  → 产出 design-tokens.css + 组件规范文档
+  → 由设计原型专家团执行（design-system-expert + prototype-builder）
+
+Phase 2: H5端改造（3周）
+  → 群聊双模式 + 视觉升级 + 动效
+  → 逐页面替换旧样式
+
+Phase 3: 坐席端改造（3周）
+  → 布局优化 + 组件升级 + 排查流程图
+  → 与H5端并行，互不阻塞
+
+Phase 4: 管理后台改造（2周）
+  → 仪表盘 + 图表 + 表格
+  → 最后做，依赖前两端的组件沉淀
+
+Phase 5: 联调与验收（1周）
+  → 三端视觉一致性检查
+  → 性能回归测试
+```
+
+---
+
+## 五、知识图谱可视化（配合 Slogan）
+
+为了让"7 次选择找到答案"有直观表达，建议新增：
+
+| 端 | 改造内容 | 预期效果 |
+|----|---------|---------|
+| **H5 端** | 当 AI 给出答案时，在答案顶部显示一条「知识路径」：问题 → 网络 → VPN → 零信任 → 密码 → 账户锁定 → 解锁步骤，用横向节点图表示，最多 7 个节点，当前节点高亮 | 用户直观理解AI推理过程 |
+| **坐席端** | 知识库引用面板增加「知识图谱」Tab，展示问题关联的知识点网络 | 坐席快速定位相关知识 |
+| **管理后台** | 增加「知识图谱健康度」看板，展示知识节点覆盖率、关联度、7跳可达率 | 管理层掌握知识库质量 |
+
+## 六、技术层面建议
+
+| 建议 | 理由 |
+|------|------|
+| **A/B测试框架** | AI回复策略、置信度阈值等可A/B测试，数据驱动调优 |
+| **灰度发布机制** | 前端改造分批灰度，降低全量发布风险 |
+| **性能监控** | 接入前端性能监控（首屏时间、WS连接稳定性），量化体验提升 |
+
+---
+
+## 七、改造优先级总览
+
+| 阶段 | 时间 | 内容 | 影响 |
+|------|------|------|------|
+| 近期（1-2 周） | 设计系统 v1.0 | 统一色彩、字体、圆角、图标 | 三端开始像一套产品 |
+| 近期（3-4 周） | H5 结构优化 | 底部导航、浮层、空状态 | 员工体验提升最明显 |
+| 中期（5-8 周） | 坐席端重构 | 三栏降噪、AI 面板合并、专注模式 | 坐席效率提升 |
+| 中期（9-12 周） | 管理后台精调 | 深色模式对比度、数据可视化 | 运维体验提升 |
+| 远期 | 知识图谱可视化 | H5/坐席/后台三端知识路径展示 | 支撑 Slogan 心智 |
+
+---
+
+> **关联文档**：
+> - 产品功能层面: `01-产品文档/00-产品规划/全套改造建议-产品功能层面-v1.0.md`
+> - 技术架构优化: `02-技术文档/技术架构/技术架构优化建议-v1.0.md`
+> - 前端视觉评价: `02-技术文档/前端改造/前端视觉评价-v1.0.md`

docs/02-技术文档/前端改造/前端视觉评价-v1.0.md

@@ -0,0 +1,84 @@
+# IT智能服务台 — 现有前端视觉评价
+
+> **版本**: v1.0
+> **日期**: 2026-07-10
+> **作者**: 宋献
+> **类型**: 技术 - 前端改造
+> **源自**: 方案-前端评价与推广-v1.0.md
+
+---
+
+## 一、整体品牌一致性：60/100
+
+| 维度 | 现状 | 问题 |
+|------|------|------|
+| 色彩体系 | H5 端用「企微绿 + 浅灰」；坐席端用「绿 + 白」；管理后台用「深色卡片 + 高饱和点缀」 | 三端像三套系统，没有统一的品牌记忆点 |
+| 字体层级 | 标题/正文/辅助文字差异不够大，靠颜色而不是字号/字重区分 | 信息密度高时容易"糊成一团" |
+| 圆角与按钮 | 基本使用 Element Plus / Vant 4 默认圆角，没有定制 | 品牌感弱，像"通用后台" |
+| 图标语言 | 混用 emoji、线框图标、填充图标 | 视觉语言不统一 |
+
+---
+
+## 二、分端评价
+
+### 2.1 H5 员工端（浅色）
+
+**优点：**
+- 入口清晰：呼叫、主题切换、帮助都在顶部
+- 右侧辅助信息丰富：处理指南、申请流程、常用资源
+- 底部输入区功能完整：表情、附件、语音、发送
+
+**问题：**
+- 右侧边栏占据约 40% 宽度，导致主聊天区显得拥挤
+- "正在获取身份信息…" 这种空白状态太赤裸，像系统卡住了
+- 输入框 placeholder 文案重复：底部同时出现"请输入消息…"和"请描述你遇到的问题，AI 助手会帮你分析"
+- 头像/状态图标偏小，点击目标不够大
+- 趣味问答模块在当前场景下与主任务无关，容易干扰
+
+**建议总分：62/100**
+
+### 2.2 坐席端工作台
+
+**优点：**
+- 三栏结构符合工单类产品直觉
+- 顶部快捷操作（置顶、待办、转接、结束）便于一线操作
+- 右侧 AI 推荐提供了坐席需要的辅助能力
+
+**问题：**
+- 信息密度过高，三栏都塞满内容，坐席视觉压力大
+- 右侧三个面板（生成回复、知识库、排查流程）各占一列，但每个面板内容很少，空间利用率低
+- 聊天区绿色气泡与 AI 回答的绿底色混在一起，没有区分"用户/AI/坐席"三种消息来源
+- 标签、按钮、状态徽标太多，没有视觉降噪
+- 左侧会话列表中，用户头像、星级、消息预览、未读数、标签挤在一起
+
+**建议总分：58/100**
+
+### 2.3 管理后台（深色）
+
+**优点：**
+- 深色主题适合长时间监控场景
+- 运营总览数据卡片清晰，核心指标突出
+- 系统健康状态一目了然
+
+**问题：**
+- 深色模式对比度需要校验（部分文字可能低于 WCAG 4.5:1）
+- 卡片边框/阴影弱，层次靠颜色区分，夜间长时间观看易疲劳
+- 导航图标与文字对齐有轻微偏差（如"会话监控""坐席绩效"）
+- 顶部报错提示"提示的资源不存在"破坏整体专业感（需后端配合修复）
+
+**建议总分：70/100**
+
+---
+
+## 三、核心设计问题总结
+
+1. **三端风格割裂**：H5、坐席、后台像三个团队做的
+2. **信息密度失控**：坐席端尤其严重，一次看 5 个以上信息源
+3. **品牌感弱**：除绿色外，没有独特的视觉符号
+4. **空状态/负面状态处理差**："正在获取身份信息…"这类状态没有引导感
+5. **深色模式未深度定制**：H5 深色只是反色，绿色气泡在深色上可能刺眼
+
+---
+
+> **关联文档**：
+> - 前端改造建议: `02-技术文档/前端改造/前端改造建议-v1.0.md`

docs/02-技术文档/前端改造/前端设计-H5右侧栏动态推送-v1.0.md

@@ -0,0 +1,127 @@
+# H5用户端右侧栏动态推送评估
+
+评估日期：2026-06-11
+
+## 评估对象
+
+用户端右侧栏不再提供静态标签导航和资源列表，而是基于会话上下文和第三方集成数据触发阈值，动态推送相关问题答疑、流程审批、软件下载等资源卡片。
+
+本质：从"人找资源"到"资源找人"的范式转换。
+
+---
+
+## 一、正面价值
+
+### 1. 符合系统定位——"AI驱动"
+
+系统全名是"智能IT支持服务台 — AI驱动"，但当前右侧栏本质是传统信息架构（标签页+列表），AI只在左侧会话区参与。动态推送让右侧也变成AI能力的延伸，整个产品才能名副其实。
+
+### 2. 降低用户认知负荷
+
+传统模式下，用户遇到VPN问题，需要自己点"常用资源"→翻到VPN分类→找对应文档。动态推送模式下，系统识别到会话提到VPN，右侧自动出现VPN连接指南、aTrust下载链接——用户零步触达。
+
+### 3. 提升首问解决率
+
+很多IT支持请求本质是"信息差"——用户不知道流程怎么走、软件去哪下、密码怎么改。主动推送填补信息差，用户可能都不需要和坐席对话就解决了。
+
+### 4. 数据闭环价值
+
+推送了什么、用户点了什么、是否解决问题——这些行为数据反过来可以优化推送准确度和知识库质量，形成"推送→反馈→优化"的飞轮。
+
+### 5. 与第三方集成天然契合
+
+联软查到某员工终端有高危漏洞→右侧推送修复指南；aTrust检测到VPN异常→右侧推送重连步骤。这种场景下，动态推送比静态列表的体验差距是量级性的。
+
+---
+
+## 二、风险与挑战
+
+### 1. 冷启动问题——首条消息前，右侧是空的
+
+用户刚进入会话，还没说话，系统没有任何上下文。此时右侧要么空白（体验差），要么需要兜底策略（猜用户可能需要什么）。静态列表没有这个问题，任何时候都有内容可看。
+
+### 2. 准确性依赖——推错了比不推更糟
+
+用户问"VPN连不上"，系统推了aTrust下载链接，但实际是密码过期问题——错误推送不仅没帮到忙，还可能误导用户走弯路，增加后续排查成本。传统列表虽然效率低，但至少不会误导。
+
+### 3. 可发现性丧失——用户无法主动探索
+
+有些资源用户不知道存在，只有浏览列表时才会发现"原来还有这个工具"。动态推送只推系统认为相关的，存在"你不知道你不知道"的信息茧房风险。
+
+### 4. 技术实现成本高
+
+需要：意图识别引擎→规则引擎/阈值系统→第三方数据实时对接→推送排序算法→用户反馈收集。这套体系远比静态列表复杂，且需要持续调优。
+
+### 5. 用户信任建立周期长
+
+如果早期推送不准，用户会养成"忽略右侧栏"的习惯，一旦习惯形成，后续推送再准也没用了。第一印象决定成败。
+
+### 6. 多意图场景处理难
+
+"我VPN连不上，另外帮我看看电脑上有没有装火绒"——一个会话包含两个问题，右侧推什么？两套资源都推会显得杂乱，推一套又遗漏另一个。
+
+---
+
+## 三、对比分析
+
+| 维度 | 静态列表（当前方案） | 动态推送（提议方案） |
+|------|-------------------|-------------------|
+| 认知负荷 | 高（需自行查找） | 低（自动呈现） |
+| 准确性 | 无（用户自己判断） | 依赖AI准确度 |
+| 冷启动 | 有内容 | 需兜底策略 |
+| 可发现性 | 好（可浏览） | 差（只能看推的） |
+| 实现成本 | 低 | 高 |
+| 与第三方集成契合度 | 低（无法感知外部数据） | 高（实时响应） |
+| 用户信任 | 高（所见即所得） | 需积累 |
+| 个性化程度 | 无 | 高 |
+
+---
+
+## 四、专业建议：混合架构
+
+两条路线单独走都有明显短板。建议采用"动态为主、静态兜底"的混合模式。
+
+### 具体方案
+
+右侧栏分两个区域，上下排列：
+
+上方（占70%）：AI动态推送区
+- 基于会话上下文+第三方数据触发，显示资源卡片
+- 卡片类型：问题答疑卡、流程指引卡、软件下载卡、状态通知卡
+- 有推送时显示，没有推送时不占空间
+- 用户可点"不相关"反馈，用于优化推送
+
+下方（占30%）：常用资源兜底区
+- 收起式面板，默认折叠，点击展开
+- 保留最常用的3-5个入口（密码重置、软件下载、VPN指南、IT制度）
+- 满足冷启动和主动探索需求
+
+### 分阶段实施路径
+
+| 阶段 | 右侧栏形态 | 说明 |
+|------|-----------|------|
+| 阶段一（当前） | 静态列表 + 少量AI提示 | 低成本上线，右侧保留3个标签页，AI推送区仅做关键词匹配 |
+| 阶段二 | 混合模式 | 上方AI推送区基于规则引擎+第三方数据触发，下方常用资源折叠 |
+| 阶段三 | AI为主、静态兜底 | 引入意图识别，推送准确度达标后，动态推送成主体，静态降级为兜底 |
+
+### 关键验证指标
+
+动态推送是否值得扩大投入，看两个数据：
+
+1. 点击率——推送卡片的点击/曝光比，>15%说明推送有价值
+2. 自助解决率——用户点了推送资源后未发起坐席对话的比例，>10%说明推送有效减少了人工负担
+
+两个指标不达标，就别急着扩大动态推送的比例。
+
+---
+
+## 五、结论
+
+| 维度 | 判断 |
+|------|------|
+| 方向 | 正确，符合AI驱动定位和用户期望 |
+| 时机 | 阶段一不急，阶段二再实质性投入 |
+| 风险 | 全盘替代有冷启动和准确性风险 |
+| 建议 | 混合架构，数据验证后再扩大动态推送占比 |
+
+核心观点：想法是对的，但别一步到位。先让静态列表跑起来，用数据证明动态推送真的比用户自己找更高效，再逐步替代。

docs/02-技术文档/前端改造/设计-H5用户端实现概览-v1.0.md

@@ -0,0 +1,319 @@
+# H5用户端原型图 → Vue3代码实现概览
+
+## 完成时间
+2026-06-09
+
+## 变更摘要
+根据已锁定的原型图 v1.1 修复版，将 H5 用户端设计实现为 Vue3 代码。
+
+## 修改文件清单
+
+### 1. `frontend-h5/src/components/chat/ChatPanel.vue`
+- **标题栏重构**：左侧(标题 + 坐席在线/离线状态胶囊) + 右侧(🔔呼叫按钮 + 主题切换)
+- **🔔摇铃按钮**：从输入栏移至标题栏（桌面端+手机端统一）
+- **排查步骤固定顶部**：从消息列表内移出，固定在标题栏下方、所有消息之上，不随滚动消失
+- **移除 InputBar 事件**：不再需要 @call-agent 事件（摇铃直接在 ChatPanel 内控制）
+
+### 2. `frontend-h5/src/components/chat/InputBar.vue`
+- **移除摇铃按钮**：删除 🔔 摇铃按钮及相关 CSS（bell-btn/bell-icon/bell-idle/bell-ring 动画）
+- **工具栏**：😊表情 / 📎文件 / ✂️截图 / 📝快捷申请（2026-07-05移除🖼️图片和📸拍照功能）
+- **布局改为两行**：工具栏(上) + 输入行(输入框+发送按钮)(下)
+- **方法**：handleEmoji/handleFile/handleScreenshot/handleQuickApply
+- **引导条文案更新**："点击标题栏铃铛呼叫 IT 坐席"
+
+### 3. `frontend-h5/src/components/assistant/RightPanel.vue`（新建）
+- **三段式面板**：AI推送区 / 常用资源标签页 / 趣味问答
+- **AI推送区**：3种卡片类型(guide/process/download) + 动态图标+颜色
+- **常用资源**：2个Tab(申请流程/必装软件) + 资源列表
+- **趣味问答**：题目+4选项+积分+答题结果反馈
+- **阶段一静态数据**，阶段二接入 Dify 动态推送
+
+### 4. `frontend-h5/src/views/ChatView.vue`
+- **替换右侧面板**：AiHelperPanel → RightPanel（三段式面板）
+- **响应式断点**：从768px改为500px（与原型图对齐）
+- **移动端**：<500px 不显示右侧面板
+- **拖拽逻辑修复**：只固定左侧宽度，右侧 flex:1 自动填满（消除拖拽后空白）
+- **移除浮动按钮**：不再需要移动端AI助手浮动按钮
+
+### 5. `frontend-h5/src/stores/conversation.ts`
+- **新增 agentOnline 状态**：默认true，阶段一简化处理
+- **暴露到 return 语句**：使组件可以访问
+
+## 构建验证
+✅ `npx vite build` 构建成功，无编译错误
+
+---
+
+## H5用户端 v2.0 更新（2026-07-24）
+
+### v1.x → v2.0 变更
+
+#### 输入栏重构
+- **移除标题栏呼叫按钮**：原标题栏的"呼叫"按钮已移除
+- **人工坐席按钮移至输入栏**：位于输入框右侧第一层，三态（disabled/active/urgent）
+- **新增语音输入按钮**：位于输入框右侧第二层，支持语音转文字
+- **按钮状态**：
+  - disabled（🔒 灰色）：AI回复<3次，不可点击
+  - active（🎧 蓝色边框）：可点击呼叫人工
+  - urgent（🚨 红色+脉冲动画）：检测到紧急问题
+
+#### 右边栏布局调整
+- **设备信息/自助诊断**：保持在顶部，手风琴结构
+- **智能推荐**：占据主区域（flex:1），展示更多推荐内容
+- **排队等待**：移至底部固定显示，包含位置+积分+答题挑战按钮
+
+#### 原型图
+- 新版原型图：`01-产品文档/05-用户端H5/原型-REQ-用户-000-H5用户端-v2.0.html`
+- 旧版 v1.0 已删除
+
+---
+
+## 右侧栏布局调整（2026-07-17）
+
+### v2.1 → v3.0 变更
+
+#### 布局调整
+- **智能推荐位置**：移至自助诊断下方，保持一直显示
+- **标题样式统一**：智能推荐使用与设备信息、自助诊断相同的标题样式（图标+文字+箭头）
+
+#### 智能推荐调整
+- **取消分类标签**：移除"相关推荐"、"运维提醒"、"常用资源"分区标题
+- **保留颜色区分**：仅用边框颜色区分类型
+  - 🟢 绿色边框：相关推荐
+  - 🟠 橙色边框：运维提醒
+  - ⚪ 灰色边框：常用资源
+
+#### 排队卡片调整
+- **高度压缩**：压缩至原来50%
+- **移除平台统计**：取消四宫格（总活跃/排队/服务/AI）
+- **保留内容**：排队位置、前面人数、预计等待时间、积分等级
+
+#### 答题功能
+- **答题开关**：位于排队卡片标题栏右侧（绿色胶囊按钮）
+- **默认折叠**：点击答题挑战按钮展开答题区域
+- **功能**：答对题目可获得积分并靠前排队
+- **按钮名称**：答题挑战（原"答题插队"，2026-07-17修复）
+
+### 调整后原型图
+
+```
+┌──────────────────────────────────────────┐
+│ 💻 设备信息                        ▾   │ ← 手风琴
+├──────────────────────────────────────────┤
+│ 🩺 自助诊断                          ▸   │ ← 手风琴
+├──────────────────────────────────────────┤
+│ ⚡ 智能推荐                          ▾   │ ← 统一标题样式
+│   ┌──────────────────────────────┐    │
+│   │ 绿色边框：相关推荐内容        │    │
+│   └──────────────────────────────┘    │
+│   ┌──────────────────────────────┐    │
+│   │ 橙色边框：运维提醒内容        │    │
+│   └──────────────────────────────┘    │
+│   ┌──────────────────────────────┐    │
+│   │ 灰色边框：常用资源内容        │    │
+│   └──────────────────────────────┘    │
+├──────────────────────────────────────────┤
+│ ⏳ 排队位置  #5 前面4人 LV.3 [答题挑战]│ ← 压缩50%
+│ ─────────────────────────────────────   │
+│ [答题区域 - 默认折叠]                   │
+└──────────────────────────────────────────┘
+```
+
+### 相关组件
+- `RightPanel.vue` - 调整布局结构
+- `DynamicRecommend.vue` - 移除分类标签
+- `QueueWaiting.vue` - 压缩高度、新增答题开关
+
+---
+
+## 自助诊断标题栏异常徽章（2026-07-29）
+
+### v2.0 → v2.1 变更
+
+> 与代码 `frontend-h5/src/components/assistant/SelfDiagnosis.vue` 已实现的计数逻辑对齐。
+
+#### 标题栏异常徽章（核心需求）
+- **位置**：🩺 图标 + "自助诊断"文字右侧；"一键诊断"按钮左侧
+- **样式**：高度 18px 圆角胶囊徽章
+- **状态规则**：
+  | 全局异常数 | 显示 | 颜色 | 文案 |
+  |---|------|------|------|
+  | 0 个 | 绿色徽章 ✓ 全部正常 | rgba(34,197,94,0.15) + #16a34a | "✓ 全部正常" |
+  | N≥1 个 | 红色徽章 ⚠ N | var(--color-danger) | hover tooltip "共 N 个待处理异常" |
+- **触发**：SelfDiagnosis.vue 顶部 header__title 旁新增徽章元素
+
+#### 6 Tab 3×2 网格（替换原简化 2 项列表）
+| Tab | 图标 | Mock 异常数 | 状态 |
+|---|---|---|---|
+| 网络联通 | 🌐 | 0 | 无徽章（diagItems idle 未执行） |
+| 账号权限 | 🔑 | 1 | 域账号 5 天到期 |
+| 设备硬件 | 🔧 | 1 | 硬盘 SMART 警告 |
+| 系统软件 | 💻 | 2 | 系统补丁 2 高危 / 邮件客户端异常 |
+| 终端安全 | 🛡️ | 0 | 2 项 pending（接入中）不计入 |
+| 合规检查 | 📋 | 1 | 未审批商业软件 |
+| **合计** | — | **5** | — |
+
+#### Tab 单徽章（右上角）
+- **样式**：右上角 16×16 圆角红色徽章，白色数字 + 红边 2px
+- **激活态**：白底红字 + 蓝边（与激活 Tab 颜色协调）
+- **无异常**：不显示徽章
+
+#### 一键诊断按钮
+- 移动到标题栏右侧
+- 检测到异常时 disabled + tooltip 提示"建议先处理后再批量诊断"
+
+#### 异常计数规则（前后端口径统一）
+```javascript
+// 自助诊断每个 Tab 的异常数
+const diagAbnormal = diagItems.filter(
+  d => d.status === 'warning' || d.status === 'fail'
+).length
+const riskAbnormal = riskItems.filter(
+  r => r.level === 'warning' || r.level === 'danger'
+).length
+const tabBadge = diagAbnormal + riskAbnormal
+
+// 全局总异常数（新增）= 所有 Tab 徽章之和
+const totalAbnormal = tabs.reduce((sum, t) => sum + t.badge, 0)
+```
+
+#### 不计入异常的口径（避免误报）
+- `normal` — 状态正常
+- `pending` — 数据接入中（如 SIEM/IDS、联软代理，2026-Q4 完成）
+- `idle` — 诊断项未执行（运行后可降级为 warning / fail）
+
+### 更新文件
+- `docs/01-产品文档/05-用户端H5/原型-REQ-用户-007-自助诊断面板优化-v1.0.html`（已就地升级为 v2.1，含全部交互示例、Tab 徽章、风险项示例、异常口径注解）
+- `docs/02-技术文档/前端改造/设计-H5用户端实现概览-v1.0.md`（本文档，追加本节）
+
+### 待前端实现（与原型对齐）
+- [ ] SelfDiagnosis.vue 标题栏新增 `totalBadge` 计算属性 + 徽章模板
+- [ ] 一键诊断按钮 disabled 条件联动 `totalBadge > 0`
+- [ ] 单 Tab 徽章已实现；确认右上角样式与原型一致
+- [ ] e2e 验证：异常数变化时徽章颜色/数字刷新
+
+---
+
+## 自助诊断面板 v2.2 → v2.3 升级（2026-07-29，7 项决策锁定）
+
+> **关联需求**：REQ-用户-007 自助诊断面板优化 v1.0-Frozen
+> **关联文档**：PRD v1.0-Frozen + 技术方案 v1.0 + 任务说明书 v1.0 + 测试用例 v1.0（50 条 / 8 大类）
+> **原型图**：`docs/01-产品文档/05-用户端H5/原型-REQ-用户-007-自助诊断面板优化-v1.0.html`（已就地升级 v2.3）
+
+### 7 项决策（一句话摘要）
+
+| # | 决策 | 状态 |
+|---|------|------|
+| 1 | Tab 文字精简版（网络/账号/设备/系统软件/安全/合规） | ✅ |
+| 2 | 异常徽章分级 `5W · 0F` | ✅ |
+| 3 | 接入中角标位置 A 文字右侧 | ✅ |
+| 4 | Tab 切换只显示当前诊断项（已天然） | ✅ |
+| 5 | 移动端 toggle A 顶部双按钮 | ✅ |
+| 6 | queue 标题栏合并位置/LV/分 | ✅ |
+| 7 | 异常+接入混合 M1 双角标并存 | ✅ |
+
+### 异常徽章 3 优化（标题栏，从 v2.1 升级）
+
+| 优化 | 名称 | 视觉 | 实现位置 |
+|------|------|------|---------|
+| ① | 分级显示 | `5W · 0F` 双胶囊（warning 暖黄字 + fail 粉字） | `.diag-header__badge--graded` |
+| ② | 接入中提示 | Tab 文字右侧灰色斜体 `•N` | `.diag-tab__pending-hint` |
+| ③ | 0 异常达标动画 | 绿色脉冲 + `✓ 今日安全` 文字，3 秒渐隐 | `.diag-header__badge--celebrate` |
+
+**5 状态对照表**（原型图自带的对照面板）：
+1. 分级 `5W · 0F`（当前 Mock）
+2. 含 fail `2W · 1F`
+3. 旧版兼容 `!5`（可选关闭）
+4. 达标动画 `✓ 今日安全`
+5. 静态正常 `✓ 全部正常`
+
+### 6 Tab 横向并排标签页（替代 3×2 网格按钮）
+
+- **高度**：34px（不变）
+- **布局**：flex 1:1:1:1:1:1 等分
+- **激活态**：底部 2px 蓝色下划线 + 文字加粗
+- **异常 Tab**：底部额外一条 2px 红色半透明线（双层指示）
+- **移动端约束**（关键事实）：ChatView.vue:80-89 移动端 <500px 直接 `return false`，RightPanel 整个不渲染 → **无需考虑横向滚动/换行**
+
+### 移动端 toggle 切换（核心需求，仅移动端 <500px）
+
+- **方案 A**：顶部双按钮 `💬 对话 / 🩺 信息`
+- **桌面端 ≥500px**：维持双栏，不显示 toggle
+- **Vue v-show 切换**（不卸载 DOM）保留左对话滚动位置 + 输入栏文本
+- **3 方案对比**：
+  - A 顶部双按钮 ⭐ 推荐（直观/单击/状态高亮）
+  - B 右下 FAB（备选，覆盖对话丢上下文）
+  - C 底部 Tab Bar（备选，跨端控件位置不一致）
+
+### queue 标题栏合并（决策 ⑥）
+
+**改造前**（v2.0）：queue-header 只显示 `#5`，queue-content 内 QueueWaiting 组件含完整 position-card。
+
+**改造后**（v2.3）：
+```
+⏳ 排队等待 | #5 前面4人 | LV.3 | 120分 | 答题挑战
+```
+- queue-header 内联三件套（`qh-position-inline / qh-lv-inline / qh-points-inline`）
+- queue-content 只保留答题区，QueueWaiting 组件传 `:show-position="false"` 隐藏 position-card
+- 整体高度压缩 ~40px
+
+### 异常 + 接入混合 M1 双角标并存（决策 ⑦）
+
+- 场景：某 Tab 同时有异常（W/F）和接入中（pending）项
+- 显示：`安全 1•2`（红数字徽章 + 灰斜体小角标）
+- 视觉区隔：颜色（红 vs 灰）+ 字体（标准 vs 斜体小号）
+- 计数规则：红数字徽章 = 异常项数；灰斜体小角标 = 接入中项数（不计入异常）
+
+### 涉及文件改动（4 项）
+
+| 文件 | 改动 |
+|------|------|
+| `src/frontend-h5/src/components/assistant/SelfDiagnosis.vue` | 新增 totalBadge / totalBadgeByLevel / showCelebrate computed + 标题栏模板 |
+| `src/frontend-h5/src/components/assistant/QueueWaiting.vue` | 新增 `showPosition?: boolean` prop |
+| `src/frontend-h5/src/components/assistant/RightPanel.vue` | queue-header-v3 内联三件套 + 传 `:show-position="false"` |
+| `src/frontend-h5/src/views/ChatView.vue` | 移动端 toggle 按钮 + `isMobilePanelOpen` state |
+
+### 验收 e2e（5 类场景）
+
+- [ ] 桌面端 ≥500px 双栏正常，异常徽章 `5W · 0F`
+- [ ] 移动端 <500px 默认显示左对话，点击 🩺 切换到右栏
+- [ ] queue 标题栏显示位置/LV/分；queue-content 内不重复显示
+- [ ] 切到"系统软件" Tab 只显示系统相关项
+- [ ] Tab "安全" 1 异常 + 2 接入时显示 `安全 1•2`
+- [ ] 0 异常时触发"✓ 今日安全"动画 3 秒后渐隐
+
+### 关键代码片段
+
+```typescript
+// SelfDiagnosis.vue 新增 computed
+const totalBadgeByLevel = computed(() => {
+  let w = 0, f = 0
+  tabsData.value.forEach(tab => {
+    w += tab.diagItems.filter(d => d.status === 'warning').length
+    w += tab.riskItems.filter(r => r.level === 'warning').length
+    f += tab.diagItems.filter(d => d.status === 'fail').length
+    f += tab.riskItems.filter(r => r.level === 'danger').length
+  })
+  return { w, f }
+})
+
+// QueueWaiting.vue 新增 prop
+const props = defineProps<{
+  showQuiz?: boolean
+  showPosition?: boolean  // 默认 true
+}>()
+
+// ChatView.vue toggle
+const isMobilePanelOpen = ref(false)
+const showRightPanel = computed(() => {
+  if (!isMobile.value) return true
+  return isMobilePanelOpen.value
+})
+```
+
+### 关联文档（REQ-用户-007 完整 4 件套）
+
+- **PRD**：`docs/01-产品文档/05-用户端H5/PRD-REQ-用户-007-自助诊断面板优化-v1.0.md`
+- **技术方案**：`docs/02-技术文档/技术架构/技术方案-REQ-用户-007-自助诊断面板优化-v1.0.md`
+- **任务说明书**：`docs/07-项目管理/任务说明书/任务说明书-REQ-用户-007-自助诊断面板优化.md`
+- **测试用例**：`docs/03-测试文档/03-功能测试用例/TC-REQ-用户-007-自助诊断面板优化.md`