# 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` 构建成功，无编译错误