Simon
44e77dcb0e
**重构前**（旧编号 02-11）： - docs/02-产品需求/ → 00 产品规划/PRD - docs/03-技术架构/ → 01-05 子目录散落 - docs/04-原型设计/ → 01-02 产品设计（HTML 原型） - docs/05-原型设计/ → screens/ - docs/06-测试素材/ → 02-E2E / 03-功能 / 04-版本测试 - docs/07-项目管理/ → 任务说明书/日报/计划 - docs/08-安全审计/ → 审计报告 - docs/09-堡垒运维/ → toolbox / deploy - docs/10-项目管理/ → 任务说明书（重复） - docs/11-历史归档/ → deploy-nas-archived **重构后**（新编号 00-07，语义化）： - docs/00-产品开发流程与文档管理规范.md - docs/00-版本迭代总览.md - docs/01-产品文档/ （PRD/原型/认证/会话/AI 服务/坐席/集成） - docs/02-技术文档/ （技术方案/架构图/重构记录/前端改造/实现配置） - docs/03-测试文档/ （E2E/功能用例/版本报告/缺陷单） - docs/04-运维文档/ （部署运维/运维指南） - docs/05-运营文档/ （品牌推广/用户手册） - docs/06-安全审计/ （审计报告） - docs/07-项目管理/ （任务说明书/日报/计划/看板） **净收益**： - 目录编号与产品文档管理规范对齐（按文档阶段 01-07 编号） - 消除 02-产品需求 与 10-项目管理 的编号重叠 - 子目录按文档类型分组（如 01-产品文档/00-产品规划、01-产品文档/01-认证与登录） - 把运维/安全/项目管理从 0X 散落改为 04/06/07 合计 494 文件 + 78495 行 / - 14076 行
2.2 KiB
2.2 KiB
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 动画）
- 新增工具栏：😊表情 / 🖼️图片 / 📎文件 / 📸拍照（4个圆形按钮）
- 布局改为两行：工具栏(上) + 输入行(输入框+发送按钮)(下)
- 新增方法：handleEmoji/handleImage/handleFile/handleCamera（阶段二实现具体功能）
- 引导条文案更新："点击标题栏铃铛呼叫 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 构建成功，无编译错误