# 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`