# 任务说明书：H5右侧栏布局调整

> **版本**: v1.0 | **日期**: 2026-07-17

---

## 📋 基本信息

| 项目 | 内容 |
|------|------|
| **任务名称** | H5右侧栏布局调整 |
| **任务ID** | #82 |
| **优先级** | 🟡 P2 |
| **类型** | 功能开发 |
| **状态** | ✅ 已完成 |
| **负责人** | 宋献 |
| **创建日期** | 2026-07-17 |
| **计划完成日期** | 2026-07-17 |

---

## 📥 输入项来源

### 产品需求
| 来源文档 | 相关章节 | 说明 |
|----------|----------|------|
| `01-产品文档/01-02产品设计/H5用户端原型图实现概览.md` | §右侧面板 | 现有右侧栏设计 |
| 本需求 | 原型图v3 | 调整后的布局要求 |

### 原型设计
| 来源文档 | 页面 | 说明 |
|----------|------|------|
| 会话页面右侧面板 | 右侧栏 | 新布局原型图 |
| `01-产品文档/05-用户端H5/原型-REQ-用户-000-H5用户端-v2.0.html` | 完整页面 | **v2.0 更新**：输入栏重构(人工坐席+语音输入)、右边栏布局(排队到底部) |

---

## 📤 输出成果要求

### 交付物清单

| # | 交付物 | 类型 | 说明 |
|---|--------|------|------|
| 1 | `frontend-h5/src/components/assistant/RightPanel.vue` | 代码 | 调整布局结构 |
| 2 | `frontend-h5/src/components/assistant/DynamicRecommend.vue` | 代码 | 移除分类标签，仅用颜色区分 |
| 3 | `frontend-h5/src/components/assistant/QueueWaiting.vue` | 代码 | 压缩高度，新增答题开关 |
| 4 | 部署验证 | 部署测试 | H5构建并部署到测试环境 |

### 代码要求
- 遵循项目代码规范
- 所有新增代码通过 ESLint 检查

---

## 🔧 验证方式

### 功能验证
| 验证项 | 验证方法 | 预期结果 |
|--------|----------|-----------|
| 智能推荐区域显示正常 | 浏览器访问H5 | 3张推荐卡片显示，颜色边框正确 |
| 自助诊断标题样式统一 | 浏览器访问H5 | 与设备信息、智能推荐标题样式一致 |
| 排队卡片高度压缩 | 浏览器访问H5 | 高度约为原来50% |
| 答题开关功能 | 点击答题挑战按钮 | 答题区域展开/折叠 |
| 答题默认不显示 | 刷新H5页面 | 答题区域默认折叠，不显示 |
| 无重复答题内容 | 点击答题挑战按钮 | 答题区域只显示一次，无重复 |
| 平台统计已移除 | 浏览器访问H5 | 四宫格统计不显示 |

---

## ✅ 完成标准

### 验收条件
- [x] 代码已提交
- [x] H5构建成功
- [x] 部署到测试环境
- [x] 功能验证通过
- [x] Bug修复验证通过（答题默认不显示、无重复内容）

---

## 📊 工作分解

### 子任务

| 子任务 | 负责人 | 预估工时 | 状态 |
|--------|--------|----------|------|
| 调整RightPanel.vue布局结构 | 宋献 | 1h | ✅ 已完成 |
| 修改DynamicRecommend.vue移除分类标签 | 宋献 | 0.5h | ✅ 已完成 |
| 修改QueueWaiting.vue压缩高度+答题开关 | 宋献 | 1h | ✅ 已完成 |
| 构建并部署H5 | 宋献 | 0.5h | ✅ 已完成 |
| 功能验证 | 宋献 | 0.5h | ✅ 已完成 |
| Bug修复：答题默认显示+重复内容 | 宋献 | 0.5h | ✅ 已完成 |

---

## 📞 依赖与阻塞

### 前置依赖
| 依赖任务 | 依赖说明 | 状态 |
|----------|----------|------|
| 无 | 独立任务 | - |

### 阻塞因素
| 阻塞项 | 影响范围 | 解决方案 |
|--------|----------|-----------|
| 无 | - | - |

---

## 📈 变更记录

| 日期 | 变更内容 | 变更人 | 说明 |
|------|----------|--------|------|
| 2026-07-17 | 创建任务 | 宋献 | 初始版本 |
| 2026-07-17 | Bug修复 | 宋献 | 修复答题默认显示、重复内容问题；按钮改名"答题挑战" |
| 2026-07-17 | 任务完成 | 宋献 | 功能开发 + Bug修复已完成并部署 |
| 2026-07-24 | 原型图更新 | 宋献 | H5用户端原型图更新至 v2.0：输入栏重构(人工坐席+语音输入)、右边栏布局(排队到底部) |
| 2026-07-24 | 部署修复 | 宋献 | 修复排队等待位置：使用 flex:1 让智能推荐占据主空间，排队固定底部；部署后企微内用 Ctrl+Shift+R 强制刷新 |

---

## 📎 调整需求说明

### 需求概述
调整 H5 员工端右侧栏布局和功能：

1. **智能推荐位置调整**
   - 标题位于自助诊断下方
   - 保持一直显示状态
   - 预留2-3张卡片高度

2. **推荐内容分区调整**
   - 取消 L1/L2/L3 分区标题显示（相关推荐/运维提醒/常用资源）
   - 颜色边框保留（绿/橙/灰）
   - 无分类标签

3. **排队卡片压缩**
   - 高度压缩50%
   - 取消平台实时统计（四宫格）
   - 保留：排队位置、前面人数、预计等待时间、积分等级

4. **答题功能**
   - 答题开关放在排队卡片标题栏右侧
   - 点击才展开答题区域，默认折叠