simon/wecom_it_smart_desk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
wecom_it_smart_desk/.workbuddy/memory/2026-06-09.md
T

10 KiB
Raw Permalink Blame History

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 或换无痕窗口测试
Reference in New Issue View Git Blame Copy Permalink