更新配置3

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); }