mokeegateway/memory/session-20260716-1.md

name, description, metadata

name	description	metadata
session-20260716-1	2026-07-16 第1次会话 — IconPicker 增加直接上传图片功能	type date sessionNumber startTime session 2026-07-16 1 2026-07-16T00:00:00+08:00

2026-07-16 第1次会话

会话摘要

用户反馈前端图标选择器（IconPicker）缺少直接上传功能——需要先到文件管理页面上传图片，再回到表单选择。本次在 IconPicker 组件的"已上传"标签页中增加了上传按钮，支持直接在弹窗内上传图标图片，上传完成后自动选中。

关键操作

IconPicker 增加上传按钮

• 做了什么: 在 IconPicker.vue 的"已上传"标签页头部增加了「上传」按钮，点击后选择图片即自动上传到文件服务（fileType=icon），上传完成自动刷新列表并选中新图标

• 涉及文件: mokee-gateway-web/src/components/IconPicker.vue

• 具体改动:

  1. 模板：在 popup-header 中添加 <el-button> 上传按钮（仅在 tab==='upload' 时显示）+ 隐藏 <input type="file">
  2. 模板：添加 .upload-status-bar 上传进度条（el-progress + Loading 动画）
  3. 脚本：导入 Upload, Loading 图标和 ElMessage
  4. 脚本：添加 FILE_SERVICE, uploading, uploadPercent, fileInputRef 状态
  5. 脚本：实现 getFileServiceToken() — 直调文件服务获取 Token（带缓存）
  6. 脚本：实现 triggerUploadIcon() / onIconFileSelected() — 选择文件后自动上传
  7. 样式：添加 @keyframes spin 和 .upload-status-bar 样式

• 上传流程: 选择图片 → 获取文件服务 Token → FormData 上传（fileType=icon）→ file.wg.zgitm.com/api/upload → 刷新列表 → 自动选中新图标

• 结果: TypeScript 编译通过，IconPicker.vue 无类型错误

重要信息

• 文件服务 URL: VITE_FILE_SERVICE_URL 环境变量，默认 https://file.wg.zgitm.com
• 上传 API: POST {FILE_SERVICE}/api/upload，FormData 包含 file + fileType
• 上传 Token: POST {FILE_SERVICE}/api/token，body: { systemCode: 'gateway' }
• 图标列表查询: GET /zgapi/v1/admin/file/list?fileType=icon
• 文件服务直写 sys_file 表，admin 后端只做元信息查询

待处理

• 通知用户确认前端部署后功能正常