更新配置3

memory/MEMORY.md

@@ -1,4 +1,5 @@
 - [项目概览](project-overview.md) — 统一登录网关平台完整信息、架构、状态、已知问题
+- [2026-07-16 会话-1](session-20260716-1.md) — IconPicker 增加直接上传图片功能
 - [2026-06-28 会话-1](session-20260628-1.md) — 修复登录后 /open/token 和文件下载接口重复调用
 - [2026-06-09 会话](session-log.md) — 完整开发过程、决策、Bug修复、待办
 - [2026-06-10 会话-1](session-20260610-1.md) — 数据库地址变更、前端环境变量整理

memory/session-20260716-1.md

@@ -0,0 +1,46 @@
+---
+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 后端只做元信息查询
+
+## 待处理
+
+- [ ] 通知用户确认前端部署后功能正常

mokee-gateway-web/src/components/IconPicker.vue

@@ -18,6 +18,10 @@
               <el-radio-button value="builtin">内置图标</el-radio-button>
               <el-radio-button value="upload">已上传</el-radio-button>
             </el-radio-group>
+            <el-button v-if="tab === 'upload'" size="small" type="primary" :loading="uploading" @click="triggerUploadIcon">
+              <el-icon><Upload /></el-icon>上传
+            </el-button>
+            <input ref="fileInputRef" type="file" accept="image/*" style="display:none" @change="onIconFileSelected" />
             <el-input v-model="search" placeholder="搜索..." size="small" clearable style="width:200px" />
             <span class="count">{{ filtered.length }} 个</span>
             <el-icon class="close-btn" :size="20" @click="visible = false"><Close /></el-icon>
@@ -37,6 +41,11 @@
           </div>
 
           <!-- 已上传图标 -->
+          <div v-if="tab === 'upload' && uploading" class="upload-status-bar">
+            <el-icon class="is-loading"><Loading /></el-icon>
+            <span>正在上传图标...</span>
+            <el-progress :percentage="uploadPercent" :stroke-width="6" :show-text="true" style="flex:1;max-width:200px" />
+          </div>
           <div class="icon-grid uploaded-grid" v-if="tab === 'upload' && filteredUploads.length > 0">
             <div
               v-for="item in filteredUploads" :key="item.id"
@@ -59,7 +68,8 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { ArrowDown, Close } from '@element-plus/icons-vue'
+import { ArrowDown, Close, Upload, Loading } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
 import * as Icons from '@element-plus/icons-vue'
 import request from '@/utils/request'
 
@@ -71,6 +81,12 @@ const search = ref('')
 const tab = ref('builtin')
 const uploadedIcons = ref<{id:string, fileName:string}[]>([])
 
+// 上传相关状态
+const FILE_SERVICE = import.meta.env.VITE_FILE_SERVICE_URL || 'https://file.wg.zgitm.com'
+const uploading = ref(false)
+const uploadPercent = ref(0)
+const fileInputRef = ref<HTMLInputElement>()
+
 const gatewayUrl = import.meta.env.VITE_GATEWAY_URL || ''
 
 function isUrl(v: string) { return v && (v.startsWith('http') || v.startsWith('/zgapi')) }
@@ -101,6 +117,77 @@ async function fetchUploadedIcons() {
   } catch {}
 }
 
+/** 获取文件服务上传 Token（直调文件服务，不走网关） */
+let cachedFileToken = ''
+async function getFileServiceToken(): Promise<string> {
+  if (cachedFileToken) return cachedFileToken
+  try {
+    const axios = (await import('axios')).default
+    const res = await axios.post(`${FILE_SERVICE}/api/token`, { systemCode: 'gateway' }, { timeout: 10000 })
+    const token = res.data?.data?.token || ''
+    if (token) cachedFileToken = token
+    return token
+  } catch { return '' }
+}
+
+/** 触发文件选择器 */
+function triggerUploadIcon() {
+  fileInputRef.value?.click()
+}
+
+/** 文件选择后立即上传 */
+async function onIconFileSelected(e: Event) {
+  const files = (e.target as HTMLInputElement).files
+  if (!files || files.length === 0) return
+  const file = files[0]
+  // 重置 input 以允许重复选择同一文件
+  if (fileInputRef.value) fileInputRef.value.value = ''
+
+  uploading.value = true
+  uploadPercent.value = 0
+
+  try {
+    // 1. 获取上传 Token
+    const token = await getFileServiceToken()
+    if (!token) {
+      ElMessage.error('获取上传 Token 失败')
+      return
+    }
+
+    // 2. 上传到文件服务（指定 fileType=icon）
+    const axios = (await import('axios')).default
+    const fd = new FormData()
+    fd.append('file', file)
+    fd.append('fileType', 'icon')
+    const uploadRes = await axios.post(`${FILE_SERVICE}/api/upload`, fd, {
+      timeout: 120000,
+      headers: { Authorization: 'Bearer ' + token },
+      onUploadProgress: (e: any) => {
+        if (e.total > 0) uploadPercent.value = Math.round((e.loaded / e.total) * 100)
+      },
+    })
+
+    // Token 用完即清
+    cachedFileToken = ''
+
+    // 3. 刷新已上传图标列表
+    await fetchUploadedIcons()
+
+    // 4. 自动选中新上传的图标
+    const fileId = uploadRes.data?.data?.fileId
+    if (fileId) {
+      select(getFileUrl(fileId))
+    }
+    ElMessage.success('图标上传成功')
+  } catch {
+    cachedFileToken = ''
+    ElMessage.error('图标上传失败')
+  } finally {
+    uploading.value = false
+    uploadPercent.value = 0
+  }
+}
+
 function select(val: string) {
   emit('update:modelValue', val)
   visible.value = false
@@ -159,10 +246,21 @@ onMounted(fetchUploadedIcons)
 /* 触发器中的图片预览 */
 .trigger-img { width:20px; height:20px; object-fit:contain; border-radius:3px; }
 
+/* 上传进度条 */
+.upload-status-bar {
+  display: flex; align-items: center; gap: 10px;
+  padding: 12px 20px; margin: 0 20px;
+  background: var(--color-primary-bg, #eef2ff); border-radius: var(--radius-md);
+  font-size: 13px; color: var(--color-primary);
+}
+.upload-status-bar .is-loading { animation: spin 1s linear infinite; }
+
 /* 已上传图标 */
 .uploaded-grid { grid-template-columns: repeat(8, 1fr); }
 .upload-icon-thumb { width:48px; height:48px; object-fit:contain; border-radius:var(--radius-sm); }
 
+@keyframes spin { to { transform: rotate(360deg); } }
+
 @media (max-width:960px) {
   .icon-popup { width:98vw; max-height:90vh; }
   .icon-grid { grid-template-columns: repeat(6, 1fr); }