wecom_it_smart_desk/.workbuddy/memory/2026-06-09.md

# 2026-06-09 工作日志

## H5用户端原型创建
- 创建 `docs/prototypes/h5-user-v1.html` — H5用户端完整原型（移动端单栏）
- 包含组件：顶部标题栏(坐席在线状态+主题切换) / 消息列表(AI+员工+坐席+系统) / 排查步骤交互卡片(决策节点+步骤节点) / 底部输入栏(敲桌子+3行输入+发送) / 呼叫坐席弹窗

## H5用户端主设备确认 + 双布局原型
- 用户确认：H5用户端~70%从企微桌面端自建应用进入，非手机端为主
- 锁定决策：H5响应式布局 — ≥500px双栏(消息+右侧排查面板)，≤480px单栏(排查步骤内嵌)
- 坐席工作台阶段一仅桌面端
- 创建 `docs/prototypes/h5-user-v1_1.html` — 双布局对比原型
  - 左：企微桌面端模拟(720×560) — 双栏布局(消息+排查面板+用户信息卡)
  - 右：企微手机端模拟(375×740) — 单栏布局(排查步骤内嵌消息流)
  - 差异标注：桌面端排查面板始终可见+用户信息卡+设备状态图标 / 手机端排查内嵌+无用户卡

## H5用户端右侧面板调整（v1.2）
- 用户需求调整：桌面端右侧面板改为三段式布局
  - 上方：AI推送区（根据排查步骤和会话内容动态推送相似问题处理指南、申请流程入口、软件下载地址等）
  - 中部：固定常用资源标签页（资源申请流程入口、常用必装软件）
  - 下方：趣味问答（答对可提高用户积分和等级）
- 手机端：隐藏右侧面板，排查步骤内嵌消息流
- 新增规则：影响显示效果的代码更新前，必须先通过原型图确认
- 创建 `docs/prototypes/h5-user-v1_2.html` — 三段式右侧面板原型
- 更新项目记忆锁定设计决策

## H5用户端排查步骤位置调整（v1.3）
- 用户需求调整：电脑端（桌面端）也需要将排查步骤卡片嵌入会话流，而非放在右侧面板
- 桌面端+手机端统一：排查步骤作为卡片出现在消息列表中（紧跟坐席消息之后）
- 右侧面板专注于三段式布局（AI推送/常用资源/趣味问答），不再包含排查步骤
- 创建 `docs/prototypes/h5-user-v1_3.html` — 排查步骤嵌入会话流原型
- 更新项目记忆：排查步骤卡片嵌入会话流确认

## H5用户端v1.4三项需求调整
- 创建 `docs/prototypes/h5-user-v1_4.html` — 三项调整原型
- 调整1：桌面端无消息发送功能，底部改为只读消息展示框（默认3行可见，高度随内容自适应）
- 调整2：敲桌子按钮取消，回归摇铃🔔呼叫人工坐席（桌面端在标题栏，手机端在输入栏）
- 调整3：桌面端消息框和侧边栏都可手动拖拽调节（左右栏拖拽手柄+底部消息框上下拖拽手柄）
- 更新项目记忆锁定设计决策

## H5用户端v1.5 排查步骤固定+输入栏优化
- 创建 `docs/prototypes/h5-user-v1_5.html` — 核心调整原型
- 调整1：排查步骤从会话流移出，固定在消息框顶部（桌面端+手机端统一），始终可见不随滚动消失，可收起/展开
- 调整2：桌面端仍无消息发送功能（确认不变）
- 调整3：手机端输入栏增加工具栏（表情😊/图片🖼️/文件📎/拍照📸）
- 调整4：摇铃🔔与发送按钮➤同侧右侧排列
- 提供3种手机端输入栏布局方案对比：
  - 方案A（推荐）：工具栏+输入行分离，摇铃与发送同侧右侧
  - 方案B：单行紧凑+展开项，+号展开更多工具
  - 方案C：摇铃在工具栏最左，发送独立右端
- 更新项目记忆锁定设计决策

## H5用户端v1.6 排查步骤置顶+桌面端输入框
- 创建 `docs/prototypes/h5-user-v1_6.html` — 核心调整原型
- 调整1：排查步骤从消息框顶部上移至消息区顶部（标题栏下方、所有消息之上），固定不随滚动消失，桌面端+手机端统一
- 调整2：桌面端添加完整消息输入框（含表情😊/图片🖼️/文件📎/拍照📸工具栏 + 🔔摇铃 + ➤发送），修正v1.4的"无发送功能"决策
- 调整3：手机端确认方案A（工具栏+输入行分离，摇铃与发送同侧右侧），移除方案对比卡片
- 桌面端与手机端输入栏布局完全统一（方案A）
- 更新项目记忆锁定设计决策

## H5用户端v1.7 桌面端拉长+手机端摇铃上移
- 创建 `docs/prototypes/h5-user-v1_7.html` — 两项修复
- 修复1：桌面端原型从560px拉长至820px，确保输入框（工具栏+输入+🔔+➤）完整可见
- 修复2：手机端摇铃按钮从输入栏移至标题栏坐席状态右侧（🔔呼叫 胶囊按钮），与桌面端一致
- 手机端输入栏简化：仅工具栏+输入框+➤发送（无摇铃）
- 更新项目记忆锁定设计决策

## H5用户端v1.8 修复桌面端截断
- 创建 `docs/prototypes/h5-user-v1_8.html` — 修复v1.7显示问题
- 根因：`.desktop-shell` 固定高度820px + `overflow:hidden`，但内部内容实际总高约853px（企微顶栏36+标题栏42+排查步骤165+消息区部分+输入栏95+右侧面板510），导致输入框和趣味问答被裁掉不可见
- 修复：桌面端壳体高度从820px→940px，确保所有内容完整可见
- 更新项目记忆：原型版本锁定为v1.8

## H5用户端原型拆分为独立页面
- 根因：v1.8仍无法完整显示桌面端输入框和趣味问答（固定壳体高度+overflow:hidden反复导致底部截断）
- 解决方案：桌面端和手机端原型拆分为独立HTML文件，各自撑满视口，彻底消除高度截断问题
- 创建 `docs/prototypes/h5-user-desktop-v1.html` — 桌面端独立原型
  - 使用 100vh 全视口高度，无固定壳体高度限制
  - 企微顶栏模拟 → 标题栏 → 排查步骤(固定顶部) → 消息流 → 输入栏(工具栏+输入+🔔+➤) | 拖拽 | 右侧三段式面板(AI推送/资源/趣味问答)
  - 输入框、趣味问答完整可见
- 创建 `docs/prototypes/h5-user-mobile-v1.html` — 手机端独立原型
  - 375×812 手机壳居中展示
  - 标题栏(坐席在线+🔔呼叫+主题) → 排查步骤(固定顶部) → 消息流 → 输入栏(工具栏+输入+➤)
  - 摇铃在标题栏（与桌面端一致），输入栏仅工具栏+输入框+发送
- 更新项目记忆：原型版本锁定为v1（独立页面版）

## H5用户端v1.1 修复（桌面端输入栏+拖拽）
- 修复 `docs/prototypes/h5-user-desktop-v1.html`
- 修复1：输入栏摇铃按钮移除 — 只保留标题栏的 🔔呼叫 胶囊按钮，输入栏仅保留工具栏+输入框+➤发送
- 修复2：拖拽逻辑重写 — 根因：原逻辑同时固定左右两侧宽度，计算偏差导致右侧留白；修复：只固定左侧宽度，右侧 `flex:1` 自动填满剩余空间，彻底消除拖拽后右侧空白
- 手机端 `h5-user-mobile-v1.html` 无需修改（输入栏原本就无摇铃）
- 更新项目记忆：原型版本更新为 v1.1（修复版）

## H5用户端原型图 → Vue3代码实现
- 根据已锁定的原型图 v1.1 修复版，开始将设计实现为 Vue3 代码
- 修改 `frontend-h5/src/components/chat/ChatPanel.vue`：
  - 标题栏重构：左侧(标题+坐席在线/离线状态胶囊) + 右侧(🔔呼叫按钮+主题切换)
  - 🔔摇铃按钮从输入栏移至标题栏（桌面端+手机端统一）
  - 排查步骤固定在消息区顶部（不随滚动消失），从消息列表内移出
  - 移除 InputBar 的 @call-agent 事件（摇铃已在标题栏直接控制 CallAgentModal）
- 修改 `frontend-h5/src/components/chat/InputBar.vue`：
  - 移除摇铃按钮及相关 CSS（bell-btn/bell-icon/bell-idle/bell-ring 动画）
  - 新增工具栏：😊表情/🖼️图片/📎文件/📸拍照（4个圆形按钮）
  - 布局改为两行：工具栏(上) + 输入行(输入框+发送按钮)(下)
  - 新增 handleEmoji/handleImage/handleFile/handleCamera 方法（阶段二实现具体功能）
  - 引导条文案更新："点击标题栏铃铛呼叫 IT 坐席"
- 创建 `frontend-h5/src/components/assistant/RightPanel.vue`：
  - 三段式面板：AI推送区 / 常用资源标签页(申请流程/必装软件) / 趣味问答
  - AI推送区：3种卡片类型(guide/process/download) + 动态图标+颜色
  - 常用资源：2个Tab(申请流程/必装软件) + 资源列表(4项)
  - 趣味问答：题目+4选项+积分+答题结果反馈
  - 阶段一使用静态数据，阶段二接入Dify动态推送
- 修改 `frontend-h5/src/views/ChatView.vue`：
  - 替换 AiHelperPanel → RightPanel（三段式面板）
  - 响应式断点从768px改为500px（与原型图对齐）
  - 移动端（<500px）不显示右侧面板
  - 拖拽逻辑修复：只固定左侧宽度，右侧 flex:1 自动填满（消除拖拽后空白）
  - 移除移动端浮动AI助手按钮（已不需要）
- 修改 `frontend-h5/src/stores/conversation.ts`：
  - 新增 agentOnline 状态（默认true，阶段一简化处理）
  - 在 return 语句中暴露 agentOnline

## H5原型→代码实现 收尾
- CSS变量修复：global.css 补充 `--color-success-soft`/`--color-warning-soft`/`--color-danger-soft` 变量（浅色+深色双主题），ChatPanel.vue 坐席状态胶囊引用了 `--color-success-soft` 但 global.css 中只有 `--success-soft`
- TS错误修复：
  - RightPanel.vue：注释掉未使用的 `store` 和 `useConversationStore` import（阶段二启用）
  - InputBar.vue：`const emit = defineEmits` → `defineEmits`（消除 TS6133 未使用变量警告）
- 构建验证：`vue-tsc --noEmit` 类型检查通过 + `vite build` 构建成功（1.44s）
- 旧组件 AiHelperPanel.vue 保留但不再被引用（ChatView 已改用 RightPanel）

## NAS 部署准备
- 创建部署目录 `deploy-nas/`，整理后端代码+前端dist+Docker/Nginx配置+deploy.sh一键脚本
- 生成部署包 `it-smart-desk-nas-deploy.zip`（0.78MB），通过 File Station 上传到 NAS `/volume1/docker/wecom-it-desk/`

## 资源申请清单重命名+扩充
- `docs/反向代理开通申请清单.md` → `docs/资源申请清单.md`
- 扩充内容：新增服务器资源（预生产G端+生产NAS两套环境）、域名资源（内网域名+CF Tunnel域名）、生产环境Nginx路由表、NAS网络连通性要求、双环境验证地址

## H5 端认证逻辑修复（2026-06-09 晚）
- 根因：isAuthenticated 只检查 employee_id 不检查 h5_token，导致路由守卫错误放行
- 修复：employee.ts 的 isAuthenticated 改为只检查 token.value
- 修复：api/index.ts 的 401 拦截器在 mock 模式下跳转 /itdesk/login
- 修复包：frontend-h5-dist-fix-v2.zip（127KB），待上传 NAS
- 部署后需清除浏览器 LocalStorage 或换无痕窗口测试