14 KiB
14 KiB
2026-06-06 工作日志
坐席工作台原型迭代 (v5.2 → v5.3)
v5.3 调整内容
- 排查步骤重构:栏位始终显示不可收起,仅全流程图默认收起可通过按钮展开
- 去掉了整个排查步骤栏位的 collapse 功能
- 标题栏右侧改为「▶ 展开全流程图」/「▼ 收起全流程图」按钮
- 最优路径横向方块始终显示
- 流程图展开/收起带 max-height 过渡动画
- 系统名称确认:顶部栏 → "IT智能服务台 · 坐席工作台 — AI驱动 · 多系统对接 · 一站式处理"
- 系统名使用渐变色突出显示
- 新增 tagline 副标题表达平台定位
前端报错排查(17:29)
- 现象:前端报
todo.ts:66 请求失败+agent.ts:131 未授权 - 根因:后端 FastAPI 服务未运行,Vite proxy 转发请求到 localhost:8000 被拒
- 修复:启动后端
uvicorn app.main:app --host 0.0.0.0 --port 8000 --reload - 验证:
/todo-items(200,8条数据)/agents/login(200,返回token)/agents/me(200需token) 全部正常 - Redis (Docker):
it-desk-redis已确认运行中
页面与v5.3原型差异排查(17:35)
- 现象:用户截图显示页面与v5.3原型差异很大
- 分析:经逐项对比PRD和实际代码,主要差异只有2处:
- TopBar Logo方块尺寸32px→PRD要求26px
- UserInfoBar chips行缺少IT等级chip(PRD要求chips行包含😟情绪/⏱时长/💬轮次/IT等级/🔁重复)
- 修复:
TopBar.vue:.logo-blockwidth/height 32px → 26pxUserInfoBar.vue: chips行新增🖥 {{ levelName }} Lv.{{ levelNumber }}chip,样式.info-chip--accent(accent色底+边框)
- 其余组件(Workspace/ConversationList/ChatArea/AiAssistantPanel/global.css/子组件)均符合v5.3 PRD规范
- 截图中空状态(暂无会话/暂无推荐/暂无待办)是因为数据库无数据,属正常行为
用户四问题修复(17:47)
问题:1.标题栏没置顶 2.无双色切换开关 3.应急模式未取消 4.每种类型状态Mock数据不够
修复:
- 标题栏置顶:
Workspace.vue布局改为上下结构(TopBar在上,新增.workspace-bodydiv包裹三栏);global.css新增.workspace-body样式(flex:1;display:flex;overflow:hidden) - 双色切换开关:
TopBar.vue中主题按钮替换为el-switch,带Sunny/Moon图标 + 深色(#0f1923)/浅色(#f5f7fa)双色背景;添加themeSwitchValueref +watch同步 +onThemeSwitch回调 - 应急模式移除:TopBar.vue 删除应急横幅/开关按钮/
handleEmergencyToggle/checkEmergencyMode/defineExpose/相关样式;Workspace.vue 删除checkEmergencyMode()调用;ElMessageBox补回(logout还在用) - Mock数据扩充:
todo_items.py: MOCK_TODO_ITEMS 8→20条(覆盖全部类型ticket/approval/device × 状态pending/processing/resolved),日期 2025→2026seed_conversations.py(新建): 往SQLite写入15条会话Mock(覆盖queued/serving/ai_handling/resolved + VIP/情绪/阻断属性)
会话列表API 500错误 + WebSocket连接失败(18:20)
现象:
GET /api/conversations?page=1&page_size=100返回 500WebSocket connection to 'ws://localhost:5173/ws/740' failed
根因分析:
- 500错误:
session_service.py的get_conversations()用 SQL 侧case()+tags["hand_raise"].as_boolean()排序,SQLite 不支持 JSONB 操作符,SQL 执行报错 - WebSocket失败:
useWebSocket.ts用window.location.host(前端 5173),Vite/ws代理转发有兼容性问题
修复:
- 会话排序改为 Python 侧(
session_service.py第629-712行):- 移除 SQL 侧
case()+ JSON 操作符 - 数据库侧只做基础排序(置顶+紧急度+状态+时间)
- Python 侧
_sort_key()函数完整实现 PRD 排序规则(置顶→紧急度5→举手→需介入→紧急度4→情绪→紧急度3→排队→AI处理→服务中→已结单) - 支持 SQLite(开发)和 PostgreSQL(生产)
- 移除 SQL 侧
- WebSocket 直连后端(
useWebSocket.ts第96-100行):- 开发环境(
import.meta.env.DEV):ws://localhost:8000/ws/{agentId} - 生产环境:同源
wss://通过 nginx 代理 - 移除对 Vite
/ws代理的依赖
- 开发环境(
- 重启后端使代码生效
快速回复三层渐进导航重构(18:46)
用户需求:
- L1目录不用滑动条,1~2行显示完全;目录名中去掉"Alt+N",改为数字图标;搜索栏显示使用说明
- 快速回复按知识库三层结构逐步缩小范围,Alt+数字→数字→数字→Enter 填入
实现:
- CSS重构:
.qr-tabs→.qr-l1-grid(2列grid,无滚动)/.qr-l2-row(flex-wrap chip,无滚动)/.qr-l3-list(纵向滚动列表) - HTML重构:搜索栏 placeholder→"搜索快速回复 / Alt+目录数字";面包屑导航+返回按钮;L1/L2/L3三层渲染容器;选中预览条
- JS重构:
qrData88条三级结构化数据(8大类×20子类×约50条回复)- 8个L1分类:安全🛡/网络🌐/邮箱📧/系统💻/账号🔑/硬件🖥/数据💾/话术💬
- 键盘导航:Alt+1
8选L1 → 数字1N选L2 → 数字1~N选L3 → Enter填入输入框 - Esc/Backspace 返回上级;"/" 聚焦搜索框
- 文件:
agent-workspace-v5_3.html直接修改
快速回复数据源替换为真实知识库(18:57)
用户需求:按《IT支持知识库2026-4-24.docx》真实目录结构和内容替换三层快速回复
实现:
- 用 python-docx 读取
C:\Users\simon\Downloads\IT支持知识库2026-4-24.docx - 提取文档目录结构:Heading1(L1)→Heading2(L2)→Heading3(L3=问题)→正文(答案)
- 生成独立数据文件
qr_data.js(35KB,180条) - 7大L1分类:办公电脑💻(3子类12条) / 软件工具🛠(8子类47条) / 办公外设🖨(5子类27条) / 办公网络🌐(2子类28条) / 终端安全🛡(4子类13条) / 资产管理📊(3子类31条) / 其他业务📋(8子类22条)
- HTML 中移除内联数据(~230行),改为
<script src="qr_data.js"></script>外部引用 - L1网格改为3列(7项=3+3+1=3行),Alt+1~7快捷键
- 临时提取脚本
extract_qr.py已清理
原型同步至 Vue 3 开发代码(19:56~20:10)
背景:用户确认原型 v5.3,要求同步快速回复三层渐进导航至 wecom_it_smart_desk 项目。
同步内容:
- 新增
frontend-agent/src/data/qrData.ts— 7大类层级数据(电脑/软件/外设/网络/安全/资产/其他),含 TypeScript 类型定义(QrCategory/QrSubCategory/QrItem) - 重写
frontend-agent/src/components/assistant/QuickReplyPanel.vue— 三层渐进导航:- L1: 7列 grid,按钮上下排列(数字在上/名称在下),无 icon
- L2: chip 横向流式布局
- L3: 纵向列表 + 选中预览条
- 面包屑导航 + 返回按钮
- 搜索过滤(跨层级)
- 保持
emit('use-template', content)接口不变
- 更新
frontend-agent/src/composables/useKeyboardShortcuts.ts:- Alt+1~7 扩展至 7 个分类
- 新增
onQuickReplyDigit(数字键 1-9) - 新增
onQuickReplyBack(←/Backspace 返回) - 保持对输入框聚焦的智能过滤
- 清理 工作区临时 Python 修复脚本(qrData 引号修复相关)
验证:vue-tsc 编译通过,无新增 TS 错误(预存错误 5 个,与本次修改无关)
文件清单:
C:\Users\simon\wecom_it_smart_desk\frontend-agent\src\data\qrData.ts(新建)C:\Users\simon\wecom_it_smart_desk\frontend-agent\src\components\assistant\QuickReplyPanel.vue(重写)C:\Users\simon\wecom_it_smart_desk\frontend-agent\src\composables\useKeyboardShortcuts.ts(更新)
完整 Mock 数据基建 + Quick Reply 数据同步(20:14~20:35)
- 从 IT支持知识库2026-4-24.docx 重新提取完整 180 条数据(python-docx + json.dumps 安全转义)
- 名称简化为电脑/软件/外设/网络/安全/资产/其他 → 同步至原型 HTML +
src/data/qrData.ts - 新建
src/mock/data.ts— 统一 mock 数据源:- 10会话(queued/serving/ai_handling/resolved + blocking/VIP/pinned/举手/需介入/情绪标签)
- 12消息(text/image/system/ai_suggestion + employee/agent/ai/system)
- 5待办(ticket/approval/device + urgent/high/normal/done)
- 5坐席(online/busy/offline)、用户画像(张伟档案)、AI推荐(4条 + summary + tags)
- 更新 Stores mock fallback(仅 DEV 环境 + API 失败时):
conversation.ts: fetchConversations/fetchMessagestodo.ts: fetchTodoListagent.ts: login/refreshAgentInfo/loadAvailableAgents
- 修复
TodoPanel.vueagent stats 从 getAgentStats() 读取 - 原型 HTML 丰富:+3会话(不同状态) + 2待办(normal/done) + AI内联建议 + 2条AI推荐 + 新CSS类
- vue-tsc 编译通过(仅预存6错误)
原型布局调整:排查步骤栏上移(22:30)
- 用户需求:排查步骤栏从输入框下方移到人员信息栏下方、消息区域上方
- 实现:Node.js 脚本精确移除→插入,追踪嵌套 div 深度定位闭合标签
- 最终布局:user-info-bar → user-detail-panel → troubleshoot-bar → chat-messages → chat-input-area
原型调整:AI推荐归位 + 输入框自适应(22:51)
- 用户需求1:AI智能推荐从中间栏移回右边栏
- 移除
ai-recommend-inline(chat-messages 内联回复选项) - 移除
msg-ai-suggestion(AI建议横幅) - 右边栏
ai-recommend-section保持不变
- 移除
- 用户需求2:输入框随内容自动调节高度 + 支持手动拖拽
- CSS:
resize: none→resize: vertical,max-height: 100px→300px,新增overflow-y: auto - JS:
autoResize()函数(监听 input →scrollHeight自适应,上限300px) fillInput()调用autoResize()同步更新
- CSS:
Vue 3 项目修复:AI推荐回归右边栏 + 右边栏默认可见(22:55)
- 根因:
ChatArea.vue中包含<AiRecommendInline />内联组件,导致AI推荐同时出现在中间栏和右边栏 - 修复:
ChatArea.vue: 移除AiRecommendInline模板使用、import、ref声明、onAiRecommend快捷键绑定Workspace.vue:assistantVisible默认值false→true,右边栏默认可见
- 验证: vue-tsc 无新增错误(仅预存5错误)
原型HTML结构修复 + Vue 3 会话加载修复(23:04)
- 原型根因:
chat-viewdiv 缺少</div>闭合标签,导致浏览器解析将sidebar-right(AI推荐+快速回复)嵌套到center-column内部,显示在中栏 - 原型修复:在
chat-input-area关闭后补</div>闭合chat-view,使sidebar-right成为center-column的兄弟元素 - Vue 3 根因:
Workspace.vueonMounted 未调用fetchConversations(),currentConversation始终为 null,ChatArea不渲染 - Vue 3 修复:onMounted 中添加
await conversationStore.fetchConversations()+ 自动选中第一个会话 - 需重启 dev server 生效
wecom_it_smart_desk 目录清理(23:50)
执行背景:项目目录 524 MB,95% 为缓存/日志/过期产物,需要精简后迁移
清理结果:
- 删除:~499 MB(95% 精简)
- 保留:~25 MB(核心代码 + 文档 + 数据库)
- 根目录文件:102 个 → ~25 个
已删除分类:
- 缓存/构建产物(519 MB):
itdesk-images.tar(222MB)、itdesk.tar.gz、node_modules/(2个,202MB)、venv/(94MB)、dist/(2个)、__pycache__/、pytest_cache/ - 空文件(~10 个):所有 0 字节
.txt文件 - 根目录重复脚本(~50 个
.py):run_tests*.py、diagnose*.py、test_*.py、check_*.py、fix_*.py、restart_*.py等 - 后端根目录诊断脚本(
_*.py,~20 个) - 过期日志/输出文件(
*.txt,~20 个) - 遗留系统代码:
docs/existing_system_code/(2.3 MB,旧 Django 项目)
已归档:scripts/archive/(5 个有用脚本:simulate_wecom*.py、import_knowledge_base.py、start_8001.py、analyze_report.py)
保留文件:核心代码(backend/app/、frontend-agent/src/、frontend-h5/src/)、文档(PRD.md、ARCHITECTURE.md、QA_TEST_REPORT.md)、数据库(it_smart_desk.db)、配置(.env、.env.example、docker-compose.yml、nginx.conf)
迁移注意:目标机器需重新执行 npm install(2 个前端)、python -m venv venv && pip install -r requirements.txt(后端)
清理报告:C:\Users\simon\WorkBuddy\2026-05-21-16-57-26\wecom_it_smart_desk-清理报告.md
Vue 3 项目同步:排查步骤合并+展开箭头修正(23:25)
- TroubleshootBar.vue:
- 路径步骤从独立
.troubleshoot-bar__path区域合并到.troubleshoot-bar__header同一行 - 展开按钮从
el-button文字按钮简化为三角图标▶/▼(.troubleshoot-bar__toggle) - CSS 重构:紧凑行布局(
min-height: 36px),内联步骤标签.path-step-inline,内联箭头.path-arrow-inline
- 路径步骤从独立
- UserInfoBar.vue:
- 收起时
▶(向右=可展开),展开时▼(向下,rotate(90deg)) - 之前方向反了:
▼→▲(rotate(180deg))
- 收起时
- 验证:vue-tsc 无新增错误(仅预存5错误)
- 需重启 dev server 生效
- 排查步骤栏:路径图(①②③④⑤)合并到标题栏同一行,展开全流程图按钮简化为三角图标 ▶/▼
- ts-header 改为紧凑行:
[🔧 排查步骤] [①→②→③→④→⑤] [▶] - 移除独立 ts-path-view 区域,改为 ts-path-inline 内联
- 移除 ts-flowchart-btn 按钮样式,改为纯图标 ts-flowchart-toggle
- toggleFlowchart() 简化为 textContent 切换
- ts-header 改为紧凑行:
- 用户信息栏:展开箭头方向修正
- 收起时 ▶(向右,表示可展开)→ 展开时 ▼(向下,rotate(90deg))
- 之前是收起时 ▼ 展开时 ▲(方向反了)
- 原型根因:
chat-viewdiv 缺少</div>闭合标签,导致浏览器解析将sidebar-right(AI推荐+快速回复)嵌套到center-column内部,显示在中栏 - 原型修复:在
chat-input-area关闭后补</div>闭合chat-view,使sidebar-right成为center-column的兄弟元素 - Vue 3 根因:
Workspace.vueonMounted 未调用fetchConversations(),currentConversation始终为 null,ChatArea不渲染 - Vue 3 修复:onMounted 中添加
await conversationStore.fetchConversations()+ 自动选中第一个会话 - 需重启 dev server 生效