47 lines
2.3 KiB
Markdown
47 lines
2.3 KiB
Markdown
---
|
||
name: session-20260716-1
|
||
description: 2026-07-16 第1次会话 — IconPicker 增加直接上传图片功能
|
||
metadata:
|
||
type: session
|
||
date: 2026-07-16
|
||
sessionNumber: 1
|
||
startTime: 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 后端只做元信息查询
|
||
|
||
## 待处理
|
||
|
||
- [ ] 通知用户确认前端部署后功能正常
|