Files
wecom_it_smart_desk/docs/01-产品文档/01-02产品设计/H5用户端原型图实现概览.md
T
Simon facc04aa65 chore: docs 结构整改 + compose 双目录对齐(合并重建提交)
本提交为 .git 对象库损坏后的重建提交,内容等价于原先三个本地提交
(5e2fd4c2 / 57a53c98 / 5d7e1873)的累积结果,未做任何额外改动。

一、docs 结构整改(整改 #14)
根因:重构时新结构为 untracked 文件,执行 git stash(未带 -u)未纳入,
随后 git reset 拉回 HEAD 旧 tracked 树,导致旧树复活、新旧两棵目录
树并存于 docs/,共 791 文件、双分类体系冲突。

修复动作:
- b2 同名异主题文件改名迁移保全 9 个
- C 类 39 个孤立文件按主题正确归类
- A/B1 类 222 个重复文件删除(新结构已有内容副本)
- 9 个旧独有空目录删除
- 270 处内部引用按 verified 映射改写
- 整改记录 #14 登记于 04-运维文档/部署运维

结果:docs 791 → 569 文件,顶层仅规范 8 类 + 治理文件,单树恢复。
残留:约 20 处指向从未存在文件的陈旧死链,归入独立文档卫生任务。

二、compose 双目录对齐(消除踩坑 A)
- docker-compose.yml:nginx 前端挂载全部由根目录 frontend-*/dist
  改为 src/frontend-*/dist(h5 / agent / admin / terminal)
- docker-compose.dev.yml:dev 服务 build context 与卷同步改 src/
- 效果:本地 docker compose up 不再把根目录 stale dist 挂回,
  与线上一致,分叉隐患消除(已 docker compose config 校验通过)

防复发铁律:
- 重构须提交;仓库修复须 git stash -u 或先 commit
- 新结构须 git add 并提交,避免再次 untracked 复活
- H5 改动只动 src/frontend-h5/,禁改根目录遗留 frontend-*/
2026-08-07 22:31:32 +08:00

44 lines
2.2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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`
- **移除摇铃按钮**:删除 🔔 摇铃按钮及相关 CSSbell-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` 构建成功,无编译错误