任务说明书：H5右侧栏布局调整
版本: v1.0 | 日期: 2026-07-17
📋 基本信息
| 项目 |
内容 |
| 任务名称 |
H5右侧栏布局调整 |
| 任务ID |
#82 |
| 优先级 |
🟡 P2 |
| 类型 |
功能开发 |
| 状态 |
✅ 已完成 |
| 负责人 |
宋献 |
| 创建日期 |
2026-07-17 |
| 计划完成日期 |
2026-07-17 |
📥 输入项来源
产品需求
| 来源文档 |
相关章节 |
说明 |
04-原型设计/prototypes-原型图/H5用户端原型图实现概览.md |
§右侧面板 |
现有右侧栏设计 |
| 本需求 |
原型图v3 |
调整后的布局要求 |
原型设计
| 来源文档 |
页面 |
说明 |
| 会话页面右侧面板 |
右侧栏 |
新布局原型图 |
📤 输出成果要求
交付物清单
| # |
交付物 |
类型 |
说明 |
| 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 |
四宫格统计不显示 |
✅ 完成标准
验收条件
📊 工作分解
子任务
| 子任务 |
负责人 |
预估工时 |
状态 |
| 调整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修复已完成并部署 |
📎 调整需求说明
需求概述
调整 H5 员工端右侧栏布局和功能：
-
智能推荐位置调整
- 标题位于自助诊断下方
- 保持一直显示状态
- 预留2-3张卡片高度
-
推荐内容分区调整
- 取消 L1/L2/L3 分区标题显示（相关推荐/运维提醒/常用资源）
- 颜色边框保留（绿/橙/灰）
- 无分类标签
-
排队卡片压缩
- 高度压缩50%
- 取消平台实时统计（四宫格）
- 保留：排队位置、前面人数、预计等待时间、积分等级
-
答题功能
- 答题开关放在排队卡片标题栏右侧
- 点击才展开答题区域，默认折叠
Simon