@idooel/components 0.0.2-beta.6 → 0.0.2-beta.7

package/dist/@idooel/components.esm.js

@@ -5800,8 +5800,7 @@ var script$t = {
     querys: {
       type: Object,
       default: () => ({
-        _csrf: localStorage.getItem('token'),
-        _t: new Date().valueOf()
+        _csrf: localStorage.getItem('token')
       })
     },
     headers: {
@@ -6217,10 +6216,26 @@ var script$t = {
       // 激活上传组件
       this.activateUploadComponent(newFile, oldFile);
     },
+    /**
+     * 生成唯一的随机数
+     */
+    generateUniqueRandom() {
+      // 使用 crypto.getRandomValues 生成更安全的随机数
+      if (window.crypto && window.crypto.getRandomValues) {
+        const array = new Uint32Array(1);
+        window.crypto.getRandomValues(array);
+        return array[0].toString();
+      }
+      // 降级方案：使用 Math.random 结合时间戳
+      return Math.random().toString(36).substr(2, 9) + Date.now().toString(36);
+    },
     /**
      * 处理文件添加
      */
     handleFileAdd(newFile) {
+      // 为每个文件生成唯一的随机数
+      const uniqueRandom = this.generateUniqueRandom();
+      newFile.postAction = newFile.postAction + '&_t=' + uniqueRandom;
       console.log('add file:', newFile);
       console.log('extensions:', this.extensions);
       console.log('accept:', this.accept);
@@ -6588,11 +6603,11 @@ __vue_render__$t._withStripped = true;
   /* style */
   const __vue_inject_styles__$t = function (inject) {
     if (!inject) return
-    inject("data-v-48a2255a_0", { source: "[data-v-48a2255a] .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n[data-v-48a2255a] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-48a2255a] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-48a2255a] {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-48a2255a] {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-48a2255a] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-48a2255a] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-48a2255a] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-48a2255a] {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-48a2255a] {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-48a2255a] {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__suffix--icon[data-v-48a2255a] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-48a2255a] {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-48a2255a] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-48a2255a] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-48a2255a] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/GanJiao/base-elearning-frontend-model/packages/components/packages/upload/src/index.vue","index.vue"],"names":[],"mappings":"AAmuBA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;ACruBA;ADkuBA;EACA,0DAAA;AChuBA;ADouBA;EACA,WAAA;ACjuBA;ADkuBA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;AChuBA;ADiuBA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;AC/tBA;ADguBA;EACA,eAAA;EACA,kCAAA;AC9tBA;ADguBA;EACA,eAAA;EACA,kCAAA;AC9tBA;ADiuBA;EACA,iBAAA;AC/tBA;ADguBA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;AC9tBA;ADguBA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;AC9tBA;ADmuBA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACjuBA;ADkuBA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;AChuBA;ADkuBA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;AChuBA;ADiuBA;EACA,gBAAA;EACA,uBAAA;AC/tBA;ADkuBA;EACA,gBAAA;AChuBA;ADiuBA;EACA,gBAAA;EACA,eAAA;AC/tBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele-upload__wrapper\">\n    <FileUpload\n      class=\"ele-upload__inner\"\n      v-show=\"isShowUploadContainer\"\n      v-model=\"files\"\n      :ref=\"uploadRef\"\n      :drop=\"drop\"\n      :chunk-enabled=\"chunkEnabled\"\n      :chunk=\"chunkConfig\"\n      :accept=\"accept\"\n      :size=\"fileSizeLimit\"\n      :post-action=\"postAction\"\n      :multiple=\"multiple\"\n      :headers=\"headers\"\n      :maximum=\"getMaximum\"\n      :data=\"uploadParams\"\n      @input-file=\"onWatchInputFiles\"\n      @input=\"onWatchFiles\"\n      style=\"width: 100%;\">\n      <section class=\"ele-upload__area\">\n        <div class=\"ele-upload__area--icon\">\n          <template v-if=\"iconIsZhWrod\">\n            {{ icon }}\n          </template>\n          <template v-else>\n            <ele-icon :type=\"icon\"></ele-icon>\n          </template>\n        </div>\n        <div class=\"ele-upload__area--text\">\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\n        </div>\n      </section>\n    </FileUpload>\n    <section class=\"ele-files__wrapper\">\n      <!-- 显示正在上传的文件（有进度条） -->\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in uploadingFiles\" :key=\"`uploading-${idx}`\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\">{{ file.name }}</div>\n          <div v-if=\"file.progress !== undefined\" class=\"ele-uplpad__progress\">\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\n          </div>\n        </div>\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n      \n      <!-- 显示已上传完成的文件 -->\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in completedFiles\" :key=\"`completed-${idx}`\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\n        </div>\n        <div class=\"ele-file__delete\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nimport FileUpload from 'vue-upload-component'\nimport { v4 as uuidv4 } from 'uuid'\nimport { route, net, type } from '@idooel/shared'\n\n// 常量定义\nconst CONSTANTS = {\n  DEFAULT_URL: 'zuul/api-file/workbench/file',\n  DEFAULT_ICON: '上传',\n  DEFAULT_SIZE: 100,\n  DEFAULT_MESSAGE: '单击或拖动文件到该区域以上传',\n  DEFAULT_MAXIMUM: 20,\n  BYTE_CONVERSION: 1024 * 1024,\n  CHUNK_MIN_SIZE: 3 * 1024 * 1024,\n  CHUNK_MAX_ACTIVE: 3,\n  CHUNK_MAX_RETRIES: 5,\n  SAVE_INTERVAL: 2000\n}\n\n// 文件后缀图标映射\nconst FILE_SUFFIX_ICONS = {\n  'doc': { name: 'icon-doc' },\n  'html': { name: 'icon-html' },\n  'mp4': { name: 'icon-mp' },\n  'pdf': { name: 'icon-pdf' },\n  'ppt': { name: 'icon-ppt' },\n  'psd': { name: 'icon-psd' },\n  'rtf': { name: 'icon-rtf' },\n  'txt': { name: 'icon-txt' },\n  'vis': { name: 'icon-vis' },\n  'xls': { name: 'icon-xls' },\n  'xml': { name: 'icon-xml' },\n  'zip': { name: 'icon-zip' },\n  'jpg': { name: 'icon-img' },\n  'mp3': { name: 'icon-mp1' }\n}\n\nexport default {\n  name: 'ele-upload',\n  components: {\n    FileUpload\n  },\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    url: {\n      type: String,\n      default: CONSTANTS.DEFAULT_URL\n    },\n    icon: {\n      type: String,\n      default: CONSTANTS.DEFAULT_ICON\n    },\n    size: {\n      type: Number,\n      default: CONSTANTS.DEFAULT_SIZE\n    },\n    message: {\n      type: String,\n      default: CONSTANTS.DEFAULT_MESSAGE\n    },\n    ext: {\n      type: String\n    },\n    extensions: {\n      type: String\n    },\n    accept: {\n      type: String\n    },\n    maximum: {\n      type: Number,\n      default: CONSTANTS.DEFAULT_MAXIMUM\n    },\n    multiple: {\n      type: Boolean,\n      default: false\n    },\n    drop: {\n      type: Boolean,\n      default: true\n    },\n    value: {\n      type: [String, Array]\n    },\n    querys: {\n      type: Object,\n      default: () => ({\n        _csrf: localStorage.getItem('token'),\n        _t: new Date().valueOf()\n      })\n    },\n    headers: {\n      type: Object,\n      default: () => ({\n        'X-XSRF-TOKEN': localStorage.getItem('token')\n      })\n    },\n    byteConversion: {\n      type: Number,\n      default: CONSTANTS.BYTE_CONVERSION\n    },\n    chunkEnabled: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      // 文件状态管理\n      files: [],              // vue-upload-component 管理的文件\n      buildedFiles: [],       // 已构建完成的文件列表\n      \n      // 上传状态管理\n      saveToServerAsyncPageTimer: null,\n      uploadRefId: null,\n      // 多选且外部无值时，预先生成 groupId，确保首次上传参数完整\n      groupId: (this.multiple && !this.value) ? uuidv4() : null\n    }\n  },\n  created() {\n    // 多文件模式下，如果没有外部 groupId，则生成一个\n    if (this.multiple && !this.value) {\n      this.groupId = uuidv4()\n      console.log('Created with new groupId:', this.groupId)\n    }\n  },\n  watch: {\n    value: {\n      async handler(value) {\n        if (type.isEmpty(value)) {\n          this.resetFiles()\n        } else if (this.multiple) {\n          this.handleMultipleFileValue(value)\n        } else {\n          this.handleSingleFileValue()\n        }\n      },\n      immediate: true\n    }\n  },\n  computed: {\n    // ==================== 基础配置 ====================\n    prefixPath() {\n      return window.prefixPath\n    },\n    \n    uploadRef() {\n      if (!this.uploadRefId) {\n        this.uploadRefId = `uploadRef_${uuidv4()}`\n      }\n      return this.uploadRefId\n    },\n    \n    iconIsZhWord() {\n      return type.isZhWord(this.icon)\n    },\n    \n    // ==================== 上传配置 ====================\n    uploadParams() {\n      return this.multiple ? { groupID: this.groupId } : {}\n    },\n    \n    fileSizeLimit() {\n      return this.size * this.byteConversion\n    },\n    \n    postAction() {\n      const queryString = route.toQueryString(this.querys)\n      return `${this.prefixPath}${this.url}?${queryString}`\n    },\n    \n    chunkConfig() {\n      return {\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\n        headers: { ...this.headers },\n        minSize: CONSTANTS.CHUNK_MIN_SIZE,\n        maxActive: CONSTANTS.CHUNK_MAX_ACTIVE,\n        maxRetries: CONSTANTS.CHUNK_MAX_RETRIES,\n        startBody: { override: true, path: '/cw' },\n        uploadBody: { override: true, path: '/cw' },\n        finishBody: { override: true, path: '/cw' }\n      }\n    },\n    \n    getMaximum() {\n      return this.multiple ? this.maximum : 1\n    },\n    \n    // ==================== 文件状态 ====================\n    uploadingFiles() {\n      return this.files.filter(file => file.progress !== undefined && !file.success)\n    },\n    \n    completedFiles() {\n      return this.buildedFiles.filter(file => file.fileID)\n    },\n    \n    totalFiles() {\n      return this.uploadingFiles.length + this.completedFiles.length\n    },\n    \n    isFileUploadSuccessed() {\n      const currentUploadingFiles = this.files.filter(file => file.response !== undefined)\n      if (currentUploadingFiles.length === 0) {\n        return this.buildedFiles.length > 0\n      }\n      return currentUploadingFiles.every(file => file.success)\n    },\n    \n    isShowUploadContainer() {\n      const maxFiles = this.multiple ? this.maximum : 1\n      return this.totalFiles < maxFiles\n    },\n    \n    // ==================== 文件信息 ====================\n    fileSuffixIcon() {\n      return FILE_SUFFIX_ICONS\n    },\n    \n    fileIds() {\n      if (this.multiple) {\n        return this.groupId\n      } else {\n        const fileIds = this.buildedFiles.map(file => file.fileID)\n        return fileIds[0]\n      }\n    },\n    \n    fileResponseData() {\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\n    }\n  },\n  methods: {\n    // ==================== 文件管理 ====================\n    \n    /**\n     * 从多个数组中移除文件\n     */\n    removeFromArrays(file, arrays, key = 'fileID') {\n      return arrays.map(arr => \n        arr.filter(item => item[key] !== file[key] && item.id !== file.id)\n      )\n    },\n    \n    /**\n     * 检查文件是否为新文件\n     */\n    isNewFile(newFile, existingFiles, key = 'fileID') {\n      return newFile[key] && !existingFiles.some(existing => existing[key] === newFile[key])\n    },\n    \n    /**\n     * 合并文件数据\n     */\n    mergeFileData(uploadFile) {\n      return {\n        ...uploadFile.response.data,\n        ...uploadFile\n      }\n    },\n    \n    /**\n     * 初始化文件列表\n     */\n    async initializeFiles() {\n      if (!this.value) return\n      \n      if (this.multiple) {\n        await this.fetchFilesWithGroupId()\n      } else {\n        await this.fetchFileWithFileId()\n      }\n    },\n    \n    /**\n     * 获取多文件组\n     */\n    async fetchFilesWithGroupId() {\n      try {\n        const response = await net.get(`/api-file/workbench/file/group/${this.value}`)\n        const data = response.data || []\n        \n        // 只有在没有现有文件时才设置初始文件列表\n        if (this.buildedFiles.length === 0) {\n          this.buildedFiles = data\n          console.log('Initial files loaded:', this.buildedFiles.length)\n        } else {\n          console.log('Keep existing files, skip initial load')\n        }\n      } catch (error) {\n        console.log('fetchFilesWithGroupId error:', error)\n        console.log('Keep current files, do not clear due to API error')\n      }\n    },\n    \n    /**\n     * 获取单文件\n     */\n    async fetchFileWithFileId() {\n      try {\n        const response = await net.get(`/api-file/file/${this.value}`)\n        const data = response.data\n        this.buildedFiles = [data]\n        this.files = [data]\n      } catch (error) {\n        console.log('fetchFileWithFileId error:', error)\n      }\n    },\n    \n    /**\n     * 处理文件删除\n     */\n    handleClickDelete(file) {\n      const { fileID } = file\n      console.log('Deleting file:', { name: file.name, fileID })\n      \n      // 从上传组件中移除文件\n      if (this.$refs[this.uploadRef]) {\n        this.$refs[this.uploadRef].remove(file)\n      }\n      \n      // 从所有数组中移除文件\n      [this.files, this.buildedFiles] = this.removeFromArrays(file, [this.files, this.buildedFiles])\n      \n      console.log('After deletion - files:', this.files.length, 'buildedFiles:', this.buildedFiles.length)\n      \n      // 多文件模式下，如果删除最后一个文件，重置 groupId\n      if (this.multiple && this.buildedFiles.length === 0) {\n        this.groupId = null\n        console.log('Reset groupId after deleting last file')\n      }\n      \n      // 触发 change 事件\n      this.$emit('change', this.fileIds)\n    },\n    \n    /**\n     * 处理文件下载\n     */\n    handleClickDownload(file) {\n      const { fileID: fileId } = file\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\n    },\n    // ==================== 上传处理 ====================\n    \n    /**\n     * 处理文件上传状态变化\n     */\n    onWatchFiles(files) {\n      console.log('onWatchFiles called with files:', files.length)\n      console.log('Current buildedFiles:', this.buildedFiles.length)\n      \n      // 更新文件状态\n      this.files = files\n      \n      // 处理已上传成功的文件\n      this.processUploadedFiles(files)\n      \n      // 检查上传是否完成\n      if (this.isFileUploadSuccessed) {\n        this.$emit('change', this.fileIds)\n        this.$emit('on-success', this.fileResponseData)\n      }\n    },\n    \n    /**\n     * 处理已上传成功的文件\n     */\n    processUploadedFiles(files) {\n      // 处理所有有响应的文件（包括正在上传和已完成的）\n      const uploadedFiles = files.filter(file => file.response)\n      const newBuildedFiles = uploadedFiles.map(file => this.mergeFileData(file))\n      \n      if (this.multiple) {\n        this.processMultipleFiles(newBuildedFiles)\n      } else {\n        // 单文件模式：只保留最新的文件\n        this.buildedFiles = newBuildedFiles\n      }\n      \n      this.logFileStatus()\n    },\n    \n    /**\n     * 处理多文件模式\n     */\n    processMultipleFiles(newBuildedFiles) {\n      // 获取已存在的文件ID集合\n      const existingFileIds = new Set(this.buildedFiles.map(f => f.fileID).filter(id => id))\n      \n      // 过滤出真正的新文件\n      const trulyNewFiles = newBuildedFiles.filter(newFile => \n        this.isNewFile(newFile, this.buildedFiles)\n      )\n      \n      console.log('Existing fileIDs:', Array.from(existingFileIds))\n      console.log('New uploaded files:', newBuildedFiles.map(f => ({ name: f.name, fileID: f.fileID })))\n      console.log('Truly new files:', trulyNewFiles.map(f => ({ name: f.name, fileID: f.fileID })))\n      \n      // 将新文件追加到现有文件列表\n      if (trulyNewFiles.length > 0) {\n        this.buildedFiles = [...this.buildedFiles, ...trulyNewFiles]\n        console.log('Added new files, total buildedFiles:', this.buildedFiles.length)\n      }\n      \n      // 更新现有文件的状态（包括新添加的文件）\n      this.updateExistingFiles(newBuildedFiles)\n    },\n    \n    /**\n     * 更新现有文件状态\n     */\n    updateExistingFiles(newBuildedFiles) {\n      this.buildedFiles = this.buildedFiles.map(existingFile => {\n        const updatedFile = newBuildedFiles.find(newFile => newFile.fileID === existingFile.fileID)\n        return updatedFile ? { ...existingFile, ...updatedFile } : existingFile\n      })\n    },\n    \n    /**\n     * 记录文件状态日志\n     */\n    logFileStatus() {\n      console.log('Final buildedFiles:', this.buildedFiles.length)\n      console.log('buildedFiles details:', this.buildedFiles.map(f => ({ name: f.name, fileID: f.fileID, success: f.success })))\n      console.log('Uploading files:', this.uploadingFiles.length)\n      console.log('Completed files:', this.completedFiles.length)\n    },\n    // ==================== 异步处理 ====================\n    \n    /**\n     * 异步保存文件到服务器\n     */\n    async saveToServerAsyncPage(payloads = {}) {\n      try {\n        const response = await net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \n          headers: {\n            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'\n          }\n        })\n        \n        const { data } = response\n        if (data !== 'saveToServerAsyncPage') {\n          clearInterval(this.saveToServerAsyncPageTimer)\n        }\n      } catch (error) {\n        console.error('saveToServerAsyncPage error:', error)\n        clearInterval(this.saveToServerAsyncPageTimer)\n      }\n    },\n    \n    // ==================== 文件验证 ====================\n    \n    /**\n     * 验证文件类型\n     */\n    validateFileType(file) {\n      if (!file || !file.name) {\n        console.log('文件或文件名不存在')\n        return false\n      }\n      \n      const fileExt = this.getFileExtension(file.name)\n      console.log('文件扩展名:', fileExt)\n      \n      if (this.extensions) {\n        const allowedExts = this.getAllowedExtensions()\n        console.log('允许的扩展名:', allowedExts)\n        \n        if (!allowedExts.includes(fileExt)) {\n          console.log('扩展名不在允许列表中')\n          this.$message.error(`不支持的文件类型 \"${fileExt}\"，请上传 ${this.extensions} 格式的文件`)\n          return false\n        }\n      }\n      \n      console.log('文件类型验证通过')\n      return true\n    },\n    \n    /**\n     * 获取文件扩展名\n     */\n    getFileExtension(fileName) {\n      return fileName.toLowerCase().substring(fileName.lastIndexOf('.'))\n    },\n    \n    /**\n     * 获取允许的扩展名列表\n     */\n    getAllowedExtensions() {\n      return this.extensions.toLowerCase()\n        .split(',')\n        .map(ext => ext.trim().startsWith('.') ? ext.trim() : `.${ext.trim()}`)\n    },\n    // ==================== 事件处理 ====================\n    \n    /**\n     * 处理文件输入事件\n     */\n    onWatchInputFiles(newFile, oldFile) {\n      if (newFile && !oldFile) {\n        this.handleFileAdd(newFile)\n      } else if (newFile && oldFile) {\n        this.handleFileUpdate(newFile)\n      } else if (!newFile && oldFile) {\n        this.handleFileDelete()\n      }\n      \n      // 激活上传组件\n      this.activateUploadComponent(newFile, oldFile)\n    },\n    \n    /**\n     * 处理文件添加\n     */\n    handleFileAdd(newFile) {\n      console.log('add file:', newFile)\n      console.log('extensions:', this.extensions)\n      console.log('accept:', this.accept)\n      \n      // 生成或使用 groupId\n      this.ensureGroupId()\n      \n      // 验证文件类型\n      if (!this.validateFileType(newFile)) {\n        this.removeInvalidFile(newFile)\n        return\n      }\n      \n      console.log('文件类型验证通过，继续上传')\n    },\n    \n    /**\n     * 处理文件更新\n     */\n    handleFileUpdate(newFile) {\n      console.log('update', newFile)\n      const { success, active, chunk, response } = newFile\n      \n      if (chunk && success && !active) {\n        console.log('chunk end')\n        this.handleChunkComplete(response)\n      }\n    },\n    \n    /**\n     * 处理文件删除\n     */\n    handleFileDelete() {\n      console.log('delete')\n    },\n    \n    /**\n     * 确保 groupId 存在\n     */\n    ensureGroupId() {\n      console.log('onWatchInputFiles - multiple:', this.multiple, 'current groupId:', this.groupId)\n      \n      if (this.multiple && !this.groupId) {\n        this.groupId = uuidv4()\n        console.log('Generated new groupId:', this.groupId)\n      } else if (this.multiple && this.groupId) {\n        console.log('Using existing groupId:', this.groupId)\n      }\n    },\n    \n    /**\n     * 移除无效文件\n     */\n    removeInvalidFile(file) {\n      console.log('文件类型验证失败，尝试移除文件')\n      console.log('uploadRef:', this.uploadRef)\n      console.log('$refs:', this.$refs)\n      \n      if (this.$refs[this.uploadRef]) {\n        this.$refs[this.uploadRef].remove(file)\n      } else {\n        console.error('无法找到 uploadRef 引用')\n      }\n    },\n    \n    /**\n     * 处理分片上传完成\n     */\n    handleChunkComplete(response) {\n      const { data: { file, type } } = response\n      const payloads = {\n        filePath: file.match(/\\/cw(.*)/) ? file.match(/\\/cw(.*)/)[0] : void 0,\n        asyncID: uuidv4(),\n        isDeleteOrigin: false,\n        toImage: type === 'pdf',\n        unzip: type === 'zip',\n        _csrf: localStorage.getItem('token')\n      }\n      \n      this.saveToServerAsyncPageTimer = setInterval(() => {\n        this.saveToServerAsyncPage(payloads)\n      }, CONSTANTS.SAVE_INTERVAL)\n    },\n    \n    /**\n     * 激活上传组件\n     */\n    activateUploadComponent(newFile, oldFile) {\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\n        if (!this.$refs[this.uploadRef].active) {\n          this.$refs[this.uploadRef].active = true\n        }\n      }\n    },\n    \n    // ==================== 值变化处理 ====================\n    \n    /**\n     * 重置文件状态\n     */\n    resetFiles() {\n      this.files = []\n      this.buildedFiles = []\n      // 多选模式下保留或生成 groupId，避免首次上传为空\n      if (this.multiple) {\n        if (!this.groupId) {\n          this.groupId = uuidv4()\n          console.log('Generated groupId in resetFiles:', this.groupId)\n        } else {\n          console.log('Preserve existing groupId in resetFiles:', this.groupId)\n        }\n      } else {\n        this.groupId = null\n        console.log('Reset groupId to null (single mode)')\n      }\n    },\n    \n    /**\n     * 处理多文件模式的值变化\n     */\n    async handleMultipleFileValue(value) {\n      // multiple - value 就是 groupId\n      // 只有当 groupId 发生变化时才重新获取文件列表（初始化回显）\n      if (this.groupId !== value) {\n        this.groupId = value\n        console.log('Set groupId from external value:', this.groupId)\n        await this.fetchFilesWithGroupId()\n      } else {\n        console.log('GroupId unchanged, skip fetchFilesWithGroupId')\n      }\n    },\n    \n    /**\n     * 处理单文件模式的值变化\n     */\n    async handleSingleFileValue() {\n      await this.fetchFileWithFileId()\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  &:hover {\n    border-color: var(--idooel-form-upload-border-hover-color);\n  }\n  border-radius: var(--idooel-form-border-radius);\n}\n.ele-upload__wrapper {\n  width: 100%;\n  .ele-upload__area {\n    padding: 16px;\n    width: 100%;\n    height: 80px;\n    display: flex;\n    flex-direction: row;\n    .ele-upload__area--icon {\n      color: var(--idooel-primary-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      font-size: 16x;\n      .anticon-cloud-upload {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n      .anticon {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n    }\n    .ele-upload__area--text {\n      margin-left: 16px;\n      .ele-upload__message {\n        font-size: 16px;\n        color: var(--idoole-black-088);\n        text-align: left;\n      }\n      .ele-upload__ext {\n        text-align: left;\n        font-size: 14px;\n        color: var(--idoole-black-06);\n      }\n    }\n  }\n  .ele-files__wrapper {\n    .ele-file__item {\n      width: 100%;\n      margin-top: 8px;\n      padding: 8px 12px;\n      border-radius: var(--idooel-form-border-radius);\n      background: var(--idooel-form-upload-bg-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      .ele-file__suffix--icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 24px;\n        height: 24px;\n      }\n      .ele-file__name {\n        flex: 1;\n        text-align: left;\n        white-space: nowrap;\n        overflow: hidden;\n        font-size: 14px;\n        margin-left: 8px;\n        cursor: pointer;\n        .ele-file__inner {\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n      .ele-file__delete {\n        margin-left: 8px;\n        .ele-file__delete--icon {\n          margin-left: 8px;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>","::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__suffix--icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-01d80c54_0", { source: "[data-v-01d80c54] .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n[data-v-01d80c54] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-01d80c54] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-01d80c54] {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-01d80c54] {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-01d80c54] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-01d80c54] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-01d80c54] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-01d80c54] {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-01d80c54] {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-01d80c54] {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__suffix--icon[data-v-01d80c54] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-01d80c54] {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-01d80c54] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-01d80c54] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-01d80c54] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/GanJiao/base-elearning-frontend-model/packages/components/packages/upload/src/index.vue","index.vue"],"names":[],"mappings":"AAkvBA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;ACpvBA;ADivBA;EACA,0DAAA;AC/uBA;ADmvBA;EACA,WAAA;AChvBA;ADivBA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;AC/uBA;ADgvBA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;AC9uBA;AD+uBA;EACA,eAAA;EACA,kCAAA;AC7uBA;AD+uBA;EACA,eAAA;EACA,kCAAA;AC7uBA;ADgvBA;EACA,iBAAA;AC9uBA;AD+uBA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;AC7uBA;AD+uBA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;AC7uBA;ADkvBA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;AChvBA;ADivBA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;AC/uBA;ADivBA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;AC/uBA;ADgvBA;EACA,gBAAA;EACA,uBAAA;AC9uBA;ADivBA;EACA,gBAAA;AC/uBA;ADgvBA;EACA,gBAAA;EACA,eAAA;AC9uBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele-upload__wrapper\">\n    <FileUpload\n      class=\"ele-upload__inner\"\n      v-show=\"isShowUploadContainer\"\n      v-model=\"files\"\n      :ref=\"uploadRef\"\n      :drop=\"drop\"\n      :chunk-enabled=\"chunkEnabled\"\n      :chunk=\"chunkConfig\"\n      :accept=\"accept\"\n      :size=\"fileSizeLimit\"\n      :post-action=\"postAction\"\n      :multiple=\"multiple\"\n      :headers=\"headers\"\n      :maximum=\"getMaximum\"\n      :data=\"uploadParams\"\n      @input-file=\"onWatchInputFiles\"\n      @input=\"onWatchFiles\"\n      style=\"width: 100%;\">\n      <section class=\"ele-upload__area\">\n        <div class=\"ele-upload__area--icon\">\n          <template v-if=\"iconIsZhWrod\">\n            {{ icon }}\n          </template>\n          <template v-else>\n            <ele-icon :type=\"icon\"></ele-icon>\n          </template>\n        </div>\n        <div class=\"ele-upload__area--text\">\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\n        </div>\n      </section>\n    </FileUpload>\n    <section class=\"ele-files__wrapper\">\n      <!-- 显示正在上传的文件（有进度条） -->\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in uploadingFiles\" :key=\"`uploading-${idx}`\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\">{{ file.name }}</div>\n          <div v-if=\"file.progress !== undefined\" class=\"ele-uplpad__progress\">\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\n          </div>\n        </div>\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n      \n      <!-- 显示已上传完成的文件 -->\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in completedFiles\" :key=\"`completed-${idx}`\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\n        </div>\n        <div class=\"ele-file__delete\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nimport FileUpload from 'vue-upload-component'\nimport { v4 as uuidv4 } from 'uuid'\nimport { route, net, type } from '@idooel/shared'\n\n// 常量定义\nconst CONSTANTS = {\n  DEFAULT_URL: 'zuul/api-file/workbench/file',\n  DEFAULT_ICON: '上传',\n  DEFAULT_SIZE: 100,\n  DEFAULT_MESSAGE: '单击或拖动文件到该区域以上传',\n  DEFAULT_MAXIMUM: 20,\n  BYTE_CONVERSION: 1024 * 1024,\n  CHUNK_MIN_SIZE: 3 * 1024 * 1024,\n  CHUNK_MAX_ACTIVE: 3,\n  CHUNK_MAX_RETRIES: 5,\n  SAVE_INTERVAL: 2000\n}\n\n// 文件后缀图标映射\nconst FILE_SUFFIX_ICONS = {\n  'doc': { name: 'icon-doc' },\n  'html': { name: 'icon-html' },\n  'mp4': { name: 'icon-mp' },\n  'pdf': { name: 'icon-pdf' },\n  'ppt': { name: 'icon-ppt' },\n  'psd': { name: 'icon-psd' },\n  'rtf': { name: 'icon-rtf' },\n  'txt': { name: 'icon-txt' },\n  'vis': { name: 'icon-vis' },\n  'xls': { name: 'icon-xls' },\n  'xml': { name: 'icon-xml' },\n  'zip': { name: 'icon-zip' },\n  'jpg': { name: 'icon-img' },\n  'mp3': { name: 'icon-mp1' }\n}\n\nexport default {\n  name: 'ele-upload',\n  components: {\n    FileUpload\n  },\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    url: {\n      type: String,\n      default: CONSTANTS.DEFAULT_URL\n    },\n    icon: {\n      type: String,\n      default: CONSTANTS.DEFAULT_ICON\n    },\n    size: {\n      type: Number,\n      default: CONSTANTS.DEFAULT_SIZE\n    },\n    message: {\n      type: String,\n      default: CONSTANTS.DEFAULT_MESSAGE\n    },\n    ext: {\n      type: String\n    },\n    extensions: {\n      type: String\n    },\n    accept: {\n      type: String\n    },\n    maximum: {\n      type: Number,\n      default: CONSTANTS.DEFAULT_MAXIMUM\n    },\n    multiple: {\n      type: Boolean,\n      default: false\n    },\n    drop: {\n      type: Boolean,\n      default: true\n    },\n    value: {\n      type: [String, Array]\n    },\n    querys: {\n      type: Object,\n      default: () => ({\n        _csrf: localStorage.getItem('token')\n      })\n    },\n    headers: {\n      type: Object,\n      default: () => ({\n        'X-XSRF-TOKEN': localStorage.getItem('token')\n      })\n    },\n    byteConversion: {\n      type: Number,\n      default: CONSTANTS.BYTE_CONVERSION\n    },\n    chunkEnabled: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      // 文件状态管理\n      files: [],              // vue-upload-component 管理的文件\n      buildedFiles: [],       // 已构建完成的文件列表\n      \n      // 上传状态管理\n      saveToServerAsyncPageTimer: null,\n      uploadRefId: null,\n      // 多选且外部无值时，预先生成 groupId，确保首次上传参数完整\n      groupId: (this.multiple && !this.value) ? uuidv4() : null\n    }\n  },\n  created() {\n    // 多文件模式下，如果没有外部 groupId，则生成一个\n    if (this.multiple && !this.value) {\n      this.groupId = uuidv4()\n      console.log('Created with new groupId:', this.groupId)\n    }\n  },\n  watch: {\n    value: {\n      async handler(value) {\n        if (type.isEmpty(value)) {\n          this.resetFiles()\n        } else if (this.multiple) {\n          this.handleMultipleFileValue(value)\n        } else {\n          this.handleSingleFileValue()\n        }\n      },\n      immediate: true\n    }\n  },\n  computed: {\n    // ==================== 基础配置 ====================\n    prefixPath() {\n      return window.prefixPath\n    },\n    \n    uploadRef() {\n      if (!this.uploadRefId) {\n        this.uploadRefId = `uploadRef_${uuidv4()}`\n      }\n      return this.uploadRefId\n    },\n    \n    iconIsZhWord() {\n      return type.isZhWord(this.icon)\n    },\n    \n    // ==================== 上传配置 ====================\n    uploadParams() {\n      return this.multiple ? { groupID: this.groupId } : {}\n    },\n    \n    fileSizeLimit() {\n      return this.size * this.byteConversion\n    },\n    \n    postAction() {\n      const queryString = route.toQueryString(this.querys)\n      return `${this.prefixPath}${this.url}?${queryString}`\n    },\n    \n    chunkConfig() {\n      return {\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\n        headers: { ...this.headers },\n        minSize: CONSTANTS.CHUNK_MIN_SIZE,\n        maxActive: CONSTANTS.CHUNK_MAX_ACTIVE,\n        maxRetries: CONSTANTS.CHUNK_MAX_RETRIES,\n        startBody: { override: true, path: '/cw' },\n        uploadBody: { override: true, path: '/cw' },\n        finishBody: { override: true, path: '/cw' }\n      }\n    },\n    \n    getMaximum() {\n      return this.multiple ? this.maximum : 1\n    },\n    \n    // ==================== 文件状态 ====================\n    uploadingFiles() {\n      return this.files.filter(file => file.progress !== undefined && !file.success)\n    },\n    \n    completedFiles() {\n      return this.buildedFiles.filter(file => file.fileID)\n    },\n    \n    totalFiles() {\n      return this.uploadingFiles.length + this.completedFiles.length\n    },\n    \n    isFileUploadSuccessed() {\n      const currentUploadingFiles = this.files.filter(file => file.response !== undefined)\n      if (currentUploadingFiles.length === 0) {\n        return this.buildedFiles.length > 0\n      }\n      return currentUploadingFiles.every(file => file.success)\n    },\n    \n    isShowUploadContainer() {\n      const maxFiles = this.multiple ? this.maximum : 1\n      return this.totalFiles < maxFiles\n    },\n    \n    // ==================== 文件信息 ====================\n    fileSuffixIcon() {\n      return FILE_SUFFIX_ICONS\n    },\n    \n    fileIds() {\n      if (this.multiple) {\n        return this.groupId\n      } else {\n        const fileIds = this.buildedFiles.map(file => file.fileID)\n        return fileIds[0]\n      }\n    },\n    \n    fileResponseData() {\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\n    }\n  },\n  methods: {\n    // ==================== 文件管理 ====================\n    \n    /**\n     * 从多个数组中移除文件\n     */\n    removeFromArrays(file, arrays, key = 'fileID') {\n      return arrays.map(arr => \n        arr.filter(item => item[key] !== file[key] && item.id !== file.id)\n      )\n    },\n    \n    /**\n     * 检查文件是否为新文件\n     */\n    isNewFile(newFile, existingFiles, key = 'fileID') {\n      return newFile[key] && !existingFiles.some(existing => existing[key] === newFile[key])\n    },\n    \n    /**\n     * 合并文件数据\n     */\n    mergeFileData(uploadFile) {\n      return {\n        ...uploadFile.response.data,\n        ...uploadFile\n      }\n    },\n    \n    /**\n     * 初始化文件列表\n     */\n    async initializeFiles() {\n      if (!this.value) return\n      \n      if (this.multiple) {\n        await this.fetchFilesWithGroupId()\n      } else {\n        await this.fetchFileWithFileId()\n      }\n    },\n    \n    /**\n     * 获取多文件组\n     */\n    async fetchFilesWithGroupId() {\n      try {\n        const response = await net.get(`/api-file/workbench/file/group/${this.value}`)\n        const data = response.data || []\n        \n        // 只有在没有现有文件时才设置初始文件列表\n        if (this.buildedFiles.length === 0) {\n          this.buildedFiles = data\n          console.log('Initial files loaded:', this.buildedFiles.length)\n        } else {\n          console.log('Keep existing files, skip initial load')\n        }\n      } catch (error) {\n        console.log('fetchFilesWithGroupId error:', error)\n        console.log('Keep current files, do not clear due to API error')\n      }\n    },\n    \n    /**\n     * 获取单文件\n     */\n    async fetchFileWithFileId() {\n      try {\n        const response = await net.get(`/api-file/file/${this.value}`)\n        const data = response.data\n        this.buildedFiles = [data]\n        this.files = [data]\n      } catch (error) {\n        console.log('fetchFileWithFileId error:', error)\n      }\n    },\n    \n    /**\n     * 处理文件删除\n     */\n    handleClickDelete(file) {\n      const { fileID } = file\n      console.log('Deleting file:', { name: file.name, fileID })\n      \n      // 从上传组件中移除文件\n      if (this.$refs[this.uploadRef]) {\n        this.$refs[this.uploadRef].remove(file)\n      }\n      \n      // 从所有数组中移除文件\n      [this.files, this.buildedFiles] = this.removeFromArrays(file, [this.files, this.buildedFiles])\n      \n      console.log('After deletion - files:', this.files.length, 'buildedFiles:', this.buildedFiles.length)\n      \n      // 多文件模式下，如果删除最后一个文件，重置 groupId\n      if (this.multiple && this.buildedFiles.length === 0) {\n        this.groupId = null\n        console.log('Reset groupId after deleting last file')\n      }\n      \n      // 触发 change 事件\n      this.$emit('change', this.fileIds)\n    },\n    \n    /**\n     * 处理文件下载\n     */\n    handleClickDownload(file) {\n      const { fileID: fileId } = file\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\n    },\n    // ==================== 上传处理 ====================\n    \n    /**\n     * 处理文件上传状态变化\n     */\n    onWatchFiles(files) {\n      console.log('onWatchFiles called with files:', files.length)\n      console.log('Current buildedFiles:', this.buildedFiles.length)\n      \n      // 更新文件状态\n      this.files = files\n      \n      // 处理已上传成功的文件\n      this.processUploadedFiles(files)\n      \n      // 检查上传是否完成\n      if (this.isFileUploadSuccessed) {\n        this.$emit('change', this.fileIds)\n        this.$emit('on-success', this.fileResponseData)\n      }\n    },\n    \n    /**\n     * 处理已上传成功的文件\n     */\n    processUploadedFiles(files) {\n      // 处理所有有响应的文件（包括正在上传和已完成的）\n      const uploadedFiles = files.filter(file => file.response)\n      const newBuildedFiles = uploadedFiles.map(file => this.mergeFileData(file))\n      \n      if (this.multiple) {\n        this.processMultipleFiles(newBuildedFiles)\n      } else {\n        // 单文件模式：只保留最新的文件\n        this.buildedFiles = newBuildedFiles\n      }\n      \n      this.logFileStatus()\n    },\n    \n    /**\n     * 处理多文件模式\n     */\n    processMultipleFiles(newBuildedFiles) {\n      // 获取已存在的文件ID集合\n      const existingFileIds = new Set(this.buildedFiles.map(f => f.fileID).filter(id => id))\n      \n      // 过滤出真正的新文件\n      const trulyNewFiles = newBuildedFiles.filter(newFile => \n        this.isNewFile(newFile, this.buildedFiles)\n      )\n      \n      console.log('Existing fileIDs:', Array.from(existingFileIds))\n      console.log('New uploaded files:', newBuildedFiles.map(f => ({ name: f.name, fileID: f.fileID })))\n      console.log('Truly new files:', trulyNewFiles.map(f => ({ name: f.name, fileID: f.fileID })))\n      \n      // 将新文件追加到现有文件列表\n      if (trulyNewFiles.length > 0) {\n        this.buildedFiles = [...this.buildedFiles, ...trulyNewFiles]\n        console.log('Added new files, total buildedFiles:', this.buildedFiles.length)\n      }\n      \n      // 更新现有文件的状态（包括新添加的文件）\n      this.updateExistingFiles(newBuildedFiles)\n    },\n    \n    /**\n     * 更新现有文件状态\n     */\n    updateExistingFiles(newBuildedFiles) {\n      this.buildedFiles = this.buildedFiles.map(existingFile => {\n        const updatedFile = newBuildedFiles.find(newFile => newFile.fileID === existingFile.fileID)\n        return updatedFile ? { ...existingFile, ...updatedFile } : existingFile\n      })\n    },\n    \n    /**\n     * 记录文件状态日志\n     */\n    logFileStatus() {\n      console.log('Final buildedFiles:', this.buildedFiles.length)\n      console.log('buildedFiles details:', this.buildedFiles.map(f => ({ name: f.name, fileID: f.fileID, success: f.success })))\n      console.log('Uploading files:', this.uploadingFiles.length)\n      console.log('Completed files:', this.completedFiles.length)\n    },\n    // ==================== 异步处理 ====================\n    \n    /**\n     * 异步保存文件到服务器\n     */\n    async saveToServerAsyncPage(payloads = {}) {\n      try {\n        const response = await net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \n          headers: {\n            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'\n          }\n        })\n        \n        const { data } = response\n        if (data !== 'saveToServerAsyncPage') {\n          clearInterval(this.saveToServerAsyncPageTimer)\n        }\n      } catch (error) {\n        console.error('saveToServerAsyncPage error:', error)\n        clearInterval(this.saveToServerAsyncPageTimer)\n      }\n    },\n    \n    // ==================== 文件验证 ====================\n    \n    /**\n     * 验证文件类型\n     */\n    validateFileType(file) {\n      if (!file || !file.name) {\n        console.log('文件或文件名不存在')\n        return false\n      }\n      \n      const fileExt = this.getFileExtension(file.name)\n      console.log('文件扩展名:', fileExt)\n      \n      if (this.extensions) {\n        const allowedExts = this.getAllowedExtensions()\n        console.log('允许的扩展名:', allowedExts)\n        \n        if (!allowedExts.includes(fileExt)) {\n          console.log('扩展名不在允许列表中')\n          this.$message.error(`不支持的文件类型 \"${fileExt}\"，请上传 ${this.extensions} 格式的文件`)\n          return false\n        }\n      }\n      \n      console.log('文件类型验证通过')\n      return true\n    },\n    \n    /**\n     * 获取文件扩展名\n     */\n    getFileExtension(fileName) {\n      return fileName.toLowerCase().substring(fileName.lastIndexOf('.'))\n    },\n    \n    /**\n     * 获取允许的扩展名列表\n     */\n    getAllowedExtensions() {\n      return this.extensions.toLowerCase()\n        .split(',')\n        .map(ext => ext.trim().startsWith('.') ? ext.trim() : `.${ext.trim()}`)\n    },\n    // ==================== 事件处理 ====================\n    \n    /**\n     * 处理文件输入事件\n     */\n    onWatchInputFiles(newFile, oldFile) {\n      if (newFile && !oldFile) {\n        this.handleFileAdd(newFile)\n      } else if (newFile && oldFile) {\n        this.handleFileUpdate(newFile)\n      } else if (!newFile && oldFile) {\n        this.handleFileDelete()\n      }\n      \n      // 激活上传组件\n      this.activateUploadComponent(newFile, oldFile)\n    },\n    \n    /**\n     * 生成唯一的随机数\n     */\n    generateUniqueRandom() {\n      // 使用 crypto.getRandomValues 生成更安全的随机数\n      if (window.crypto && window.crypto.getRandomValues) {\n        const array = new Uint32Array(1)\n        window.crypto.getRandomValues(array)\n        return array[0].toString()\n      }\n      // 降级方案：使用 Math.random 结合时间戳\n      return Math.random().toString(36).substr(2, 9) + Date.now().toString(36)\n    },\n\n    /**\n     * 处理文件添加\n     */\n    handleFileAdd(newFile) {\n      // 为每个文件生成唯一的随机数\n      const uniqueRandom = this.generateUniqueRandom()\n      newFile.postAction = newFile.postAction + '&_t=' + uniqueRandom\n      console.log('add file:', newFile)\n      console.log('extensions:', this.extensions)\n      console.log('accept:', this.accept)\n      \n      // 生成或使用 groupId\n      this.ensureGroupId()\n      \n      // 验证文件类型\n      if (!this.validateFileType(newFile)) {\n        this.removeInvalidFile(newFile)\n        return\n      }\n      console.log('文件类型验证通过，继续上传')\n    },\n    \n    /**\n     * 处理文件更新\n     */\n    handleFileUpdate(newFile) {\n      console.log('update', newFile)\n      const { success, active, chunk, response } = newFile\n      \n      if (chunk && success && !active) {\n        console.log('chunk end')\n        this.handleChunkComplete(response)\n      }\n    },\n    \n    /**\n     * 处理文件删除\n     */\n    handleFileDelete() {\n      console.log('delete')\n    },\n    \n    /**\n     * 确保 groupId 存在\n     */\n    ensureGroupId() {\n      console.log('onWatchInputFiles - multiple:', this.multiple, 'current groupId:', this.groupId)\n      \n      if (this.multiple && !this.groupId) {\n        this.groupId = uuidv4()\n        console.log('Generated new groupId:', this.groupId)\n      } else if (this.multiple && this.groupId) {\n        console.log('Using existing groupId:', this.groupId)\n      }\n    },\n    \n    /**\n     * 移除无效文件\n     */\n    removeInvalidFile(file) {\n      console.log('文件类型验证失败，尝试移除文件')\n      console.log('uploadRef:', this.uploadRef)\n      console.log('$refs:', this.$refs)\n      \n      if (this.$refs[this.uploadRef]) {\n        this.$refs[this.uploadRef].remove(file)\n      } else {\n        console.error('无法找到 uploadRef 引用')\n      }\n    },\n    \n    /**\n     * 处理分片上传完成\n     */\n    handleChunkComplete(response) {\n      const { data: { file, type } } = response\n      const payloads = {\n        filePath: file.match(/\\/cw(.*)/) ? file.match(/\\/cw(.*)/)[0] : void 0,\n        asyncID: uuidv4(),\n        isDeleteOrigin: false,\n        toImage: type === 'pdf',\n        unzip: type === 'zip',\n        _csrf: localStorage.getItem('token')\n      }\n      \n      this.saveToServerAsyncPageTimer = setInterval(() => {\n        this.saveToServerAsyncPage(payloads)\n      }, CONSTANTS.SAVE_INTERVAL)\n    },\n    \n    /**\n     * 激活上传组件\n     */\n    activateUploadComponent(newFile, oldFile) {\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\n        if (!this.$refs[this.uploadRef].active) {\n          this.$refs[this.uploadRef].active = true\n        }\n      }\n    },\n    \n    // ==================== 值变化处理 ====================\n    \n    /**\n     * 重置文件状态\n     */\n    resetFiles() {\n      this.files = []\n      this.buildedFiles = []\n      // 多选模式下保留或生成 groupId，避免首次上传为空\n      if (this.multiple) {\n        if (!this.groupId) {\n          this.groupId = uuidv4()\n          console.log('Generated groupId in resetFiles:', this.groupId)\n        } else {\n          console.log('Preserve existing groupId in resetFiles:', this.groupId)\n        }\n      } else {\n        this.groupId = null\n        console.log('Reset groupId to null (single mode)')\n      }\n    },\n    \n    /**\n     * 处理多文件模式的值变化\n     */\n    async handleMultipleFileValue(value) {\n      // multiple - value 就是 groupId\n      // 只有当 groupId 发生变化时才重新获取文件列表（初始化回显）\n      if (this.groupId !== value) {\n        this.groupId = value\n        console.log('Set groupId from external value:', this.groupId)\n        await this.fetchFilesWithGroupId()\n      } else {\n        console.log('GroupId unchanged, skip fetchFilesWithGroupId')\n      }\n    },\n    \n    /**\n     * 处理单文件模式的值变化\n     */\n    async handleSingleFileValue() {\n      await this.fetchFileWithFileId()\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  &:hover {\n    border-color: var(--idooel-form-upload-border-hover-color);\n  }\n  border-radius: var(--idooel-form-border-radius);\n}\n.ele-upload__wrapper {\n  width: 100%;\n  .ele-upload__area {\n    padding: 16px;\n    width: 100%;\n    height: 80px;\n    display: flex;\n    flex-direction: row;\n    .ele-upload__area--icon {\n      color: var(--idooel-primary-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      font-size: 16x;\n      .anticon-cloud-upload {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n      .anticon {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n    }\n    .ele-upload__area--text {\n      margin-left: 16px;\n      .ele-upload__message {\n        font-size: 16px;\n        color: var(--idoole-black-088);\n        text-align: left;\n      }\n      .ele-upload__ext {\n        text-align: left;\n        font-size: 14px;\n        color: var(--idoole-black-06);\n      }\n    }\n  }\n  .ele-files__wrapper {\n    .ele-file__item {\n      width: 100%;\n      margin-top: 8px;\n      padding: 8px 12px;\n      border-radius: var(--idooel-form-border-radius);\n      background: var(--idooel-form-upload-bg-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      .ele-file__suffix--icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 24px;\n        height: 24px;\n      }\n      .ele-file__name {\n        flex: 1;\n        text-align: left;\n        white-space: nowrap;\n        overflow: hidden;\n        font-size: 14px;\n        margin-left: 8px;\n        cursor: pointer;\n        .ele-file__inner {\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n      .ele-file__delete {\n        margin-left: 8px;\n        .ele-file__delete--icon {\n          margin-left: 8px;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>","::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__suffix--icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$t = "data-v-48a2255a";
+  const __vue_scope_id__$t = "data-v-01d80c54";
   /* module identifier */
   const __vue_module_identifier__$t = undefined;
   /* functional template */

package/dist/@idooel/components.umd.js

@@ -5807,8 +5807,7 @@
       querys: {
         type: Object,
         default: () => ({
-          _csrf: localStorage.getItem('token'),
-          _t: new Date().valueOf()
+          _csrf: localStorage.getItem('token')
         })
       },
       headers: {
@@ -6224,10 +6223,26 @@
         // 激活上传组件
         this.activateUploadComponent(newFile, oldFile);
       },
+      /**
+       * 生成唯一的随机数
+       */
+      generateUniqueRandom() {
+        // 使用 crypto.getRandomValues 生成更安全的随机数
+        if (window.crypto && window.crypto.getRandomValues) {
+          const array = new Uint32Array(1);
+          window.crypto.getRandomValues(array);
+          return array[0].toString();
+        }
+        // 降级方案：使用 Math.random 结合时间戳
+        return Math.random().toString(36).substr(2, 9) + Date.now().toString(36);
+      },
       /**
        * 处理文件添加
        */
       handleFileAdd(newFile) {
+        // 为每个文件生成唯一的随机数
+        const uniqueRandom = this.generateUniqueRandom();
+        newFile.postAction = newFile.postAction + '&_t=' + uniqueRandom;
         console.log('add file:', newFile);
         console.log('extensions:', this.extensions);
         console.log('accept:', this.accept);
@@ -6595,11 +6610,11 @@
     /* style */
     const __vue_inject_styles__$t = function (inject) {
       if (!inject) return
-      inject("data-v-48a2255a_0", { source: "[data-v-48a2255a] .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n[data-v-48a2255a] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-48a2255a] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-48a2255a] {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-48a2255a] {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-48a2255a] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-48a2255a] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-48a2255a] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-48a2255a] {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-48a2255a] {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-48a2255a] {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__suffix--icon[data-v-48a2255a] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-48a2255a] {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-48a2255a] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-48a2255a] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-48a2255a] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/GanJiao/base-elearning-frontend-model/packages/components/packages/upload/src/index.vue","index.vue"],"names":[],"mappings":"AAmuBA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;ACruBA;ADkuBA;EACA,0DAAA;AChuBA;ADouBA;EACA,WAAA;ACjuBA;ADkuBA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;AChuBA;ADiuBA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;AC/tBA;ADguBA;EACA,eAAA;EACA,kCAAA;AC9tBA;ADguBA;EACA,eAAA;EACA,kCAAA;AC9tBA;ADiuBA;EACA,iBAAA;AC/tBA;ADguBA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;AC9tBA;ADguBA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;AC9tBA;ADmuBA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACjuBA;ADkuBA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;AChuBA;ADkuBA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;AChuBA;ADiuBA;EACA,gBAAA;EACA,uBAAA;AC/tBA;ADkuBA;EACA,gBAAA;AChuBA;ADiuBA;EACA,gBAAA;EACA,eAAA;AC/tBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele-upload__wrapper\">\n    <FileUpload\n      class=\"ele-upload__inner\"\n      v-show=\"isShowUploadContainer\"\n      v-model=\"files\"\n      :ref=\"uploadRef\"\n      :drop=\"drop\"\n      :chunk-enabled=\"chunkEnabled\"\n      :chunk=\"chunkConfig\"\n      :accept=\"accept\"\n      :size=\"fileSizeLimit\"\n      :post-action=\"postAction\"\n      :multiple=\"multiple\"\n      :headers=\"headers\"\n      :maximum=\"getMaximum\"\n      :data=\"uploadParams\"\n      @input-file=\"onWatchInputFiles\"\n      @input=\"onWatchFiles\"\n      style=\"width: 100%;\">\n      <section class=\"ele-upload__area\">\n        <div class=\"ele-upload__area--icon\">\n          <template v-if=\"iconIsZhWrod\">\n            {{ icon }}\n          </template>\n          <template v-else>\n            <ele-icon :type=\"icon\"></ele-icon>\n          </template>\n        </div>\n        <div class=\"ele-upload__area--text\">\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\n        </div>\n      </section>\n    </FileUpload>\n    <section class=\"ele-files__wrapper\">\n      <!-- 显示正在上传的文件（有进度条） -->\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in uploadingFiles\" :key=\"`uploading-${idx}`\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\">{{ file.name }}</div>\n          <div v-if=\"file.progress !== undefined\" class=\"ele-uplpad__progress\">\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\n          </div>\n        </div>\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n      \n      <!-- 显示已上传完成的文件 -->\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in completedFiles\" :key=\"`completed-${idx}`\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\n        </div>\n        <div class=\"ele-file__delete\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nimport FileUpload from 'vue-upload-component'\nimport { v4 as uuidv4 } from 'uuid'\nimport { route, net, type } from '@idooel/shared'\n\n// 常量定义\nconst CONSTANTS = {\n  DEFAULT_URL: 'zuul/api-file/workbench/file',\n  DEFAULT_ICON: '上传',\n  DEFAULT_SIZE: 100,\n  DEFAULT_MESSAGE: '单击或拖动文件到该区域以上传',\n  DEFAULT_MAXIMUM: 20,\n  BYTE_CONVERSION: 1024 * 1024,\n  CHUNK_MIN_SIZE: 3 * 1024 * 1024,\n  CHUNK_MAX_ACTIVE: 3,\n  CHUNK_MAX_RETRIES: 5,\n  SAVE_INTERVAL: 2000\n}\n\n// 文件后缀图标映射\nconst FILE_SUFFIX_ICONS = {\n  'doc': { name: 'icon-doc' },\n  'html': { name: 'icon-html' },\n  'mp4': { name: 'icon-mp' },\n  'pdf': { name: 'icon-pdf' },\n  'ppt': { name: 'icon-ppt' },\n  'psd': { name: 'icon-psd' },\n  'rtf': { name: 'icon-rtf' },\n  'txt': { name: 'icon-txt' },\n  'vis': { name: 'icon-vis' },\n  'xls': { name: 'icon-xls' },\n  'xml': { name: 'icon-xml' },\n  'zip': { name: 'icon-zip' },\n  'jpg': { name: 'icon-img' },\n  'mp3': { name: 'icon-mp1' }\n}\n\nexport default {\n  name: 'ele-upload',\n  components: {\n    FileUpload\n  },\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    url: {\n      type: String,\n      default: CONSTANTS.DEFAULT_URL\n    },\n    icon: {\n      type: String,\n      default: CONSTANTS.DEFAULT_ICON\n    },\n    size: {\n      type: Number,\n      default: CONSTANTS.DEFAULT_SIZE\n    },\n    message: {\n      type: String,\n      default: CONSTANTS.DEFAULT_MESSAGE\n    },\n    ext: {\n      type: String\n    },\n    extensions: {\n      type: String\n    },\n    accept: {\n      type: String\n    },\n    maximum: {\n      type: Number,\n      default: CONSTANTS.DEFAULT_MAXIMUM\n    },\n    multiple: {\n      type: Boolean,\n      default: false\n    },\n    drop: {\n      type: Boolean,\n      default: true\n    },\n    value: {\n      type: [String, Array]\n    },\n    querys: {\n      type: Object,\n      default: () => ({\n        _csrf: localStorage.getItem('token'),\n        _t: new Date().valueOf()\n      })\n    },\n    headers: {\n      type: Object,\n      default: () => ({\n        'X-XSRF-TOKEN': localStorage.getItem('token')\n      })\n    },\n    byteConversion: {\n      type: Number,\n      default: CONSTANTS.BYTE_CONVERSION\n    },\n    chunkEnabled: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      // 文件状态管理\n      files: [],              // vue-upload-component 管理的文件\n      buildedFiles: [],       // 已构建完成的文件列表\n      \n      // 上传状态管理\n      saveToServerAsyncPageTimer: null,\n      uploadRefId: null,\n      // 多选且外部无值时，预先生成 groupId，确保首次上传参数完整\n      groupId: (this.multiple && !this.value) ? uuidv4() : null\n    }\n  },\n  created() {\n    // 多文件模式下，如果没有外部 groupId，则生成一个\n    if (this.multiple && !this.value) {\n      this.groupId = uuidv4()\n      console.log('Created with new groupId:', this.groupId)\n    }\n  },\n  watch: {\n    value: {\n      async handler(value) {\n        if (type.isEmpty(value)) {\n          this.resetFiles()\n        } else if (this.multiple) {\n          this.handleMultipleFileValue(value)\n        } else {\n          this.handleSingleFileValue()\n        }\n      },\n      immediate: true\n    }\n  },\n  computed: {\n    // ==================== 基础配置 ====================\n    prefixPath() {\n      return window.prefixPath\n    },\n    \n    uploadRef() {\n      if (!this.uploadRefId) {\n        this.uploadRefId = `uploadRef_${uuidv4()}`\n      }\n      return this.uploadRefId\n    },\n    \n    iconIsZhWord() {\n      return type.isZhWord(this.icon)\n    },\n    \n    // ==================== 上传配置 ====================\n    uploadParams() {\n      return this.multiple ? { groupID: this.groupId } : {}\n    },\n    \n    fileSizeLimit() {\n      return this.size * this.byteConversion\n    },\n    \n    postAction() {\n      const queryString = route.toQueryString(this.querys)\n      return `${this.prefixPath}${this.url}?${queryString}`\n    },\n    \n    chunkConfig() {\n      return {\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\n        headers: { ...this.headers },\n        minSize: CONSTANTS.CHUNK_MIN_SIZE,\n        maxActive: CONSTANTS.CHUNK_MAX_ACTIVE,\n        maxRetries: CONSTANTS.CHUNK_MAX_RETRIES,\n        startBody: { override: true, path: '/cw' },\n        uploadBody: { override: true, path: '/cw' },\n        finishBody: { override: true, path: '/cw' }\n      }\n    },\n    \n    getMaximum() {\n      return this.multiple ? this.maximum : 1\n    },\n    \n    // ==================== 文件状态 ====================\n    uploadingFiles() {\n      return this.files.filter(file => file.progress !== undefined && !file.success)\n    },\n    \n    completedFiles() {\n      return this.buildedFiles.filter(file => file.fileID)\n    },\n    \n    totalFiles() {\n      return this.uploadingFiles.length + this.completedFiles.length\n    },\n    \n    isFileUploadSuccessed() {\n      const currentUploadingFiles = this.files.filter(file => file.response !== undefined)\n      if (currentUploadingFiles.length === 0) {\n        return this.buildedFiles.length > 0\n      }\n      return currentUploadingFiles.every(file => file.success)\n    },\n    \n    isShowUploadContainer() {\n      const maxFiles = this.multiple ? this.maximum : 1\n      return this.totalFiles < maxFiles\n    },\n    \n    // ==================== 文件信息 ====================\n    fileSuffixIcon() {\n      return FILE_SUFFIX_ICONS\n    },\n    \n    fileIds() {\n      if (this.multiple) {\n        return this.groupId\n      } else {\n        const fileIds = this.buildedFiles.map(file => file.fileID)\n        return fileIds[0]\n      }\n    },\n    \n    fileResponseData() {\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\n    }\n  },\n  methods: {\n    // ==================== 文件管理 ====================\n    \n    /**\n     * 从多个数组中移除文件\n     */\n    removeFromArrays(file, arrays, key = 'fileID') {\n      return arrays.map(arr => \n        arr.filter(item => item[key] !== file[key] && item.id !== file.id)\n      )\n    },\n    \n    /**\n     * 检查文件是否为新文件\n     */\n    isNewFile(newFile, existingFiles, key = 'fileID') {\n      return newFile[key] && !existingFiles.some(existing => existing[key] === newFile[key])\n    },\n    \n    /**\n     * 合并文件数据\n     */\n    mergeFileData(uploadFile) {\n      return {\n        ...uploadFile.response.data,\n        ...uploadFile\n      }\n    },\n    \n    /**\n     * 初始化文件列表\n     */\n    async initializeFiles() {\n      if (!this.value) return\n      \n      if (this.multiple) {\n        await this.fetchFilesWithGroupId()\n      } else {\n        await this.fetchFileWithFileId()\n      }\n    },\n    \n    /**\n     * 获取多文件组\n     */\n    async fetchFilesWithGroupId() {\n      try {\n        const response = await net.get(`/api-file/workbench/file/group/${this.value}`)\n        const data = response.data || []\n        \n        // 只有在没有现有文件时才设置初始文件列表\n        if (this.buildedFiles.length === 0) {\n          this.buildedFiles = data\n          console.log('Initial files loaded:', this.buildedFiles.length)\n        } else {\n          console.log('Keep existing files, skip initial load')\n        }\n      } catch (error) {\n        console.log('fetchFilesWithGroupId error:', error)\n        console.log('Keep current files, do not clear due to API error')\n      }\n    },\n    \n    /**\n     * 获取单文件\n     */\n    async fetchFileWithFileId() {\n      try {\n        const response = await net.get(`/api-file/file/${this.value}`)\n        const data = response.data\n        this.buildedFiles = [data]\n        this.files = [data]\n      } catch (error) {\n        console.log('fetchFileWithFileId error:', error)\n      }\n    },\n    \n    /**\n     * 处理文件删除\n     */\n    handleClickDelete(file) {\n      const { fileID } = file\n      console.log('Deleting file:', { name: file.name, fileID })\n      \n      // 从上传组件中移除文件\n      if (this.$refs[this.uploadRef]) {\n        this.$refs[this.uploadRef].remove(file)\n      }\n      \n      // 从所有数组中移除文件\n      [this.files, this.buildedFiles] = this.removeFromArrays(file, [this.files, this.buildedFiles])\n      \n      console.log('After deletion - files:', this.files.length, 'buildedFiles:', this.buildedFiles.length)\n      \n      // 多文件模式下，如果删除最后一个文件，重置 groupId\n      if (this.multiple && this.buildedFiles.length === 0) {\n        this.groupId = null\n        console.log('Reset groupId after deleting last file')\n      }\n      \n      // 触发 change 事件\n      this.$emit('change', this.fileIds)\n    },\n    \n    /**\n     * 处理文件下载\n     */\n    handleClickDownload(file) {\n      const { fileID: fileId } = file\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\n    },\n    // ==================== 上传处理 ====================\n    \n    /**\n     * 处理文件上传状态变化\n     */\n    onWatchFiles(files) {\n      console.log('onWatchFiles called with files:', files.length)\n      console.log('Current buildedFiles:', this.buildedFiles.length)\n      \n      // 更新文件状态\n      this.files = files\n      \n      // 处理已上传成功的文件\n      this.processUploadedFiles(files)\n      \n      // 检查上传是否完成\n      if (this.isFileUploadSuccessed) {\n        this.$emit('change', this.fileIds)\n        this.$emit('on-success', this.fileResponseData)\n      }\n    },\n    \n    /**\n     * 处理已上传成功的文件\n     */\n    processUploadedFiles(files) {\n      // 处理所有有响应的文件（包括正在上传和已完成的）\n      const uploadedFiles = files.filter(file => file.response)\n      const newBuildedFiles = uploadedFiles.map(file => this.mergeFileData(file))\n      \n      if (this.multiple) {\n        this.processMultipleFiles(newBuildedFiles)\n      } else {\n        // 单文件模式：只保留最新的文件\n        this.buildedFiles = newBuildedFiles\n      }\n      \n      this.logFileStatus()\n    },\n    \n    /**\n     * 处理多文件模式\n     */\n    processMultipleFiles(newBuildedFiles) {\n      // 获取已存在的文件ID集合\n      const existingFileIds = new Set(this.buildedFiles.map(f => f.fileID).filter(id => id))\n      \n      // 过滤出真正的新文件\n      const trulyNewFiles = newBuildedFiles.filter(newFile => \n        this.isNewFile(newFile, this.buildedFiles)\n      )\n      \n      console.log('Existing fileIDs:', Array.from(existingFileIds))\n      console.log('New uploaded files:', newBuildedFiles.map(f => ({ name: f.name, fileID: f.fileID })))\n      console.log('Truly new files:', trulyNewFiles.map(f => ({ name: f.name, fileID: f.fileID })))\n      \n      // 将新文件追加到现有文件列表\n      if (trulyNewFiles.length > 0) {\n        this.buildedFiles = [...this.buildedFiles, ...trulyNewFiles]\n        console.log('Added new files, total buildedFiles:', this.buildedFiles.length)\n      }\n      \n      // 更新现有文件的状态（包括新添加的文件）\n      this.updateExistingFiles(newBuildedFiles)\n    },\n    \n    /**\n     * 更新现有文件状态\n     */\n    updateExistingFiles(newBuildedFiles) {\n      this.buildedFiles = this.buildedFiles.map(existingFile => {\n        const updatedFile = newBuildedFiles.find(newFile => newFile.fileID === existingFile.fileID)\n        return updatedFile ? { ...existingFile, ...updatedFile } : existingFile\n      })\n    },\n    \n    /**\n     * 记录文件状态日志\n     */\n    logFileStatus() {\n      console.log('Final buildedFiles:', this.buildedFiles.length)\n      console.log('buildedFiles details:', this.buildedFiles.map(f => ({ name: f.name, fileID: f.fileID, success: f.success })))\n      console.log('Uploading files:', this.uploadingFiles.length)\n      console.log('Completed files:', this.completedFiles.length)\n    },\n    // ==================== 异步处理 ====================\n    \n    /**\n     * 异步保存文件到服务器\n     */\n    async saveToServerAsyncPage(payloads = {}) {\n      try {\n        const response = await net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \n          headers: {\n            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'\n          }\n        })\n        \n        const { data } = response\n        if (data !== 'saveToServerAsyncPage') {\n          clearInterval(this.saveToServerAsyncPageTimer)\n        }\n      } catch (error) {\n        console.error('saveToServerAsyncPage error:', error)\n        clearInterval(this.saveToServerAsyncPageTimer)\n      }\n    },\n    \n    // ==================== 文件验证 ====================\n    \n    /**\n     * 验证文件类型\n     */\n    validateFileType(file) {\n      if (!file || !file.name) {\n        console.log('文件或文件名不存在')\n        return false\n      }\n      \n      const fileExt = this.getFileExtension(file.name)\n      console.log('文件扩展名:', fileExt)\n      \n      if (this.extensions) {\n        const allowedExts = this.getAllowedExtensions()\n        console.log('允许的扩展名:', allowedExts)\n        \n        if (!allowedExts.includes(fileExt)) {\n          console.log('扩展名不在允许列表中')\n          this.$message.error(`不支持的文件类型 \"${fileExt}\"，请上传 ${this.extensions} 格式的文件`)\n          return false\n        }\n      }\n      \n      console.log('文件类型验证通过')\n      return true\n    },\n    \n    /**\n     * 获取文件扩展名\n     */\n    getFileExtension(fileName) {\n      return fileName.toLowerCase().substring(fileName.lastIndexOf('.'))\n    },\n    \n    /**\n     * 获取允许的扩展名列表\n     */\n    getAllowedExtensions() {\n      return this.extensions.toLowerCase()\n        .split(',')\n        .map(ext => ext.trim().startsWith('.') ? ext.trim() : `.${ext.trim()}`)\n    },\n    // ==================== 事件处理 ====================\n    \n    /**\n     * 处理文件输入事件\n     */\n    onWatchInputFiles(newFile, oldFile) {\n      if (newFile && !oldFile) {\n        this.handleFileAdd(newFile)\n      } else if (newFile && oldFile) {\n        this.handleFileUpdate(newFile)\n      } else if (!newFile && oldFile) {\n        this.handleFileDelete()\n      }\n      \n      // 激活上传组件\n      this.activateUploadComponent(newFile, oldFile)\n    },\n    \n    /**\n     * 处理文件添加\n     */\n    handleFileAdd(newFile) {\n      console.log('add file:', newFile)\n      console.log('extensions:', this.extensions)\n      console.log('accept:', this.accept)\n      \n      // 生成或使用 groupId\n      this.ensureGroupId()\n      \n      // 验证文件类型\n      if (!this.validateFileType(newFile)) {\n        this.removeInvalidFile(newFile)\n        return\n      }\n      \n      console.log('文件类型验证通过，继续上传')\n    },\n    \n    /**\n     * 处理文件更新\n     */\n    handleFileUpdate(newFile) {\n      console.log('update', newFile)\n      const { success, active, chunk, response } = newFile\n      \n      if (chunk && success && !active) {\n        console.log('chunk end')\n        this.handleChunkComplete(response)\n      }\n    },\n    \n    /**\n     * 处理文件删除\n     */\n    handleFileDelete() {\n      console.log('delete')\n    },\n    \n    /**\n     * 确保 groupId 存在\n     */\n    ensureGroupId() {\n      console.log('onWatchInputFiles - multiple:', this.multiple, 'current groupId:', this.groupId)\n      \n      if (this.multiple && !this.groupId) {\n        this.groupId = uuidv4()\n        console.log('Generated new groupId:', this.groupId)\n      } else if (this.multiple && this.groupId) {\n        console.log('Using existing groupId:', this.groupId)\n      }\n    },\n    \n    /**\n     * 移除无效文件\n     */\n    removeInvalidFile(file) {\n      console.log('文件类型验证失败，尝试移除文件')\n      console.log('uploadRef:', this.uploadRef)\n      console.log('$refs:', this.$refs)\n      \n      if (this.$refs[this.uploadRef]) {\n        this.$refs[this.uploadRef].remove(file)\n      } else {\n        console.error('无法找到 uploadRef 引用')\n      }\n    },\n    \n    /**\n     * 处理分片上传完成\n     */\n    handleChunkComplete(response) {\n      const { data: { file, type } } = response\n      const payloads = {\n        filePath: file.match(/\\/cw(.*)/) ? file.match(/\\/cw(.*)/)[0] : void 0,\n        asyncID: uuidv4(),\n        isDeleteOrigin: false,\n        toImage: type === 'pdf',\n        unzip: type === 'zip',\n        _csrf: localStorage.getItem('token')\n      }\n      \n      this.saveToServerAsyncPageTimer = setInterval(() => {\n        this.saveToServerAsyncPage(payloads)\n      }, CONSTANTS.SAVE_INTERVAL)\n    },\n    \n    /**\n     * 激活上传组件\n     */\n    activateUploadComponent(newFile, oldFile) {\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\n        if (!this.$refs[this.uploadRef].active) {\n          this.$refs[this.uploadRef].active = true\n        }\n      }\n    },\n    \n    // ==================== 值变化处理 ====================\n    \n    /**\n     * 重置文件状态\n     */\n    resetFiles() {\n      this.files = []\n      this.buildedFiles = []\n      // 多选模式下保留或生成 groupId，避免首次上传为空\n      if (this.multiple) {\n        if (!this.groupId) {\n          this.groupId = uuidv4()\n          console.log('Generated groupId in resetFiles:', this.groupId)\n        } else {\n          console.log('Preserve existing groupId in resetFiles:', this.groupId)\n        }\n      } else {\n        this.groupId = null\n        console.log('Reset groupId to null (single mode)')\n      }\n    },\n    \n    /**\n     * 处理多文件模式的值变化\n     */\n    async handleMultipleFileValue(value) {\n      // multiple - value 就是 groupId\n      // 只有当 groupId 发生变化时才重新获取文件列表（初始化回显）\n      if (this.groupId !== value) {\n        this.groupId = value\n        console.log('Set groupId from external value:', this.groupId)\n        await this.fetchFilesWithGroupId()\n      } else {\n        console.log('GroupId unchanged, skip fetchFilesWithGroupId')\n      }\n    },\n    \n    /**\n     * 处理单文件模式的值变化\n     */\n    async handleSingleFileValue() {\n      await this.fetchFileWithFileId()\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  &:hover {\n    border-color: var(--idooel-form-upload-border-hover-color);\n  }\n  border-radius: var(--idooel-form-border-radius);\n}\n.ele-upload__wrapper {\n  width: 100%;\n  .ele-upload__area {\n    padding: 16px;\n    width: 100%;\n    height: 80px;\n    display: flex;\n    flex-direction: row;\n    .ele-upload__area--icon {\n      color: var(--idooel-primary-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      font-size: 16x;\n      .anticon-cloud-upload {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n      .anticon {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n    }\n    .ele-upload__area--text {\n      margin-left: 16px;\n      .ele-upload__message {\n        font-size: 16px;\n        color: var(--idoole-black-088);\n        text-align: left;\n      }\n      .ele-upload__ext {\n        text-align: left;\n        font-size: 14px;\n        color: var(--idoole-black-06);\n      }\n    }\n  }\n  .ele-files__wrapper {\n    .ele-file__item {\n      width: 100%;\n      margin-top: 8px;\n      padding: 8px 12px;\n      border-radius: var(--idooel-form-border-radius);\n      background: var(--idooel-form-upload-bg-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      .ele-file__suffix--icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 24px;\n        height: 24px;\n      }\n      .ele-file__name {\n        flex: 1;\n        text-align: left;\n        white-space: nowrap;\n        overflow: hidden;\n        font-size: 14px;\n        margin-left: 8px;\n        cursor: pointer;\n        .ele-file__inner {\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n      .ele-file__delete {\n        margin-left: 8px;\n        .ele-file__delete--icon {\n          margin-left: 8px;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>","::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__suffix--icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-01d80c54_0", { source: "[data-v-01d80c54] .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n[data-v-01d80c54] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-01d80c54] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-01d80c54] {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-01d80c54] {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-01d80c54] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-01d80c54] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-01d80c54] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-01d80c54] {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-01d80c54] {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-01d80c54] {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__suffix--icon[data-v-01d80c54] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-01d80c54] {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-01d80c54] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-01d80c54] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-01d80c54] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/GanJiao/base-elearning-frontend-model/packages/components/packages/upload/src/index.vue","index.vue"],"names":[],"mappings":"AAkvBA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;ACpvBA;ADivBA;EACA,0DAAA;AC/uBA;ADmvBA;EACA,WAAA;AChvBA;ADivBA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;AC/uBA;ADgvBA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;AC9uBA;AD+uBA;EACA,eAAA;EACA,kCAAA;AC7uBA;AD+uBA;EACA,eAAA;EACA,kCAAA;AC7uBA;ADgvBA;EACA,iBAAA;AC9uBA;AD+uBA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;AC7uBA;AD+uBA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;AC7uBA;ADkvBA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;AChvBA;ADivBA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;AC/uBA;ADivBA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;AC/uBA;ADgvBA;EACA,gBAAA;EACA,uBAAA;AC9uBA;ADivBA;EACA,gBAAA;AC/uBA;ADgvBA;EACA,gBAAA;EACA,eAAA;AC9uBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele-upload__wrapper\">\n    <FileUpload\n      class=\"ele-upload__inner\"\n      v-show=\"isShowUploadContainer\"\n      v-model=\"files\"\n      :ref=\"uploadRef\"\n      :drop=\"drop\"\n      :chunk-enabled=\"chunkEnabled\"\n      :chunk=\"chunkConfig\"\n      :accept=\"accept\"\n      :size=\"fileSizeLimit\"\n      :post-action=\"postAction\"\n      :multiple=\"multiple\"\n      :headers=\"headers\"\n      :maximum=\"getMaximum\"\n      :data=\"uploadParams\"\n      @input-file=\"onWatchInputFiles\"\n      @input=\"onWatchFiles\"\n      style=\"width: 100%;\">\n      <section class=\"ele-upload__area\">\n        <div class=\"ele-upload__area--icon\">\n          <template v-if=\"iconIsZhWrod\">\n            {{ icon }}\n          </template>\n          <template v-else>\n            <ele-icon :type=\"icon\"></ele-icon>\n          </template>\n        </div>\n        <div class=\"ele-upload__area--text\">\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\n        </div>\n      </section>\n    </FileUpload>\n    <section class=\"ele-files__wrapper\">\n      <!-- 显示正在上传的文件（有进度条） -->\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in uploadingFiles\" :key=\"`uploading-${idx}`\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\">{{ file.name }}</div>\n          <div v-if=\"file.progress !== undefined\" class=\"ele-uplpad__progress\">\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\n          </div>\n        </div>\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n      \n      <!-- 显示已上传完成的文件 -->\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in completedFiles\" :key=\"`completed-${idx}`\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\n        </div>\n        <div class=\"ele-file__delete\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nimport FileUpload from 'vue-upload-component'\nimport { v4 as uuidv4 } from 'uuid'\nimport { route, net, type } from '@idooel/shared'\n\n// 常量定义\nconst CONSTANTS = {\n  DEFAULT_URL: 'zuul/api-file/workbench/file',\n  DEFAULT_ICON: '上传',\n  DEFAULT_SIZE: 100,\n  DEFAULT_MESSAGE: '单击或拖动文件到该区域以上传',\n  DEFAULT_MAXIMUM: 20,\n  BYTE_CONVERSION: 1024 * 1024,\n  CHUNK_MIN_SIZE: 3 * 1024 * 1024,\n  CHUNK_MAX_ACTIVE: 3,\n  CHUNK_MAX_RETRIES: 5,\n  SAVE_INTERVAL: 2000\n}\n\n// 文件后缀图标映射\nconst FILE_SUFFIX_ICONS = {\n  'doc': { name: 'icon-doc' },\n  'html': { name: 'icon-html' },\n  'mp4': { name: 'icon-mp' },\n  'pdf': { name: 'icon-pdf' },\n  'ppt': { name: 'icon-ppt' },\n  'psd': { name: 'icon-psd' },\n  'rtf': { name: 'icon-rtf' },\n  'txt': { name: 'icon-txt' },\n  'vis': { name: 'icon-vis' },\n  'xls': { name: 'icon-xls' },\n  'xml': { name: 'icon-xml' },\n  'zip': { name: 'icon-zip' },\n  'jpg': { name: 'icon-img' },\n  'mp3': { name: 'icon-mp1' }\n}\n\nexport default {\n  name: 'ele-upload',\n  components: {\n    FileUpload\n  },\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    url: {\n      type: String,\n      default: CONSTANTS.DEFAULT_URL\n    },\n    icon: {\n      type: String,\n      default: CONSTANTS.DEFAULT_ICON\n    },\n    size: {\n      type: Number,\n      default: CONSTANTS.DEFAULT_SIZE\n    },\n    message: {\n      type: String,\n      default: CONSTANTS.DEFAULT_MESSAGE\n    },\n    ext: {\n      type: String\n    },\n    extensions: {\n      type: String\n    },\n    accept: {\n      type: String\n    },\n    maximum: {\n      type: Number,\n      default: CONSTANTS.DEFAULT_MAXIMUM\n    },\n    multiple: {\n      type: Boolean,\n      default: false\n    },\n    drop: {\n      type: Boolean,\n      default: true\n    },\n    value: {\n      type: [String, Array]\n    },\n    querys: {\n      type: Object,\n      default: () => ({\n        _csrf: localStorage.getItem('token')\n      })\n    },\n    headers: {\n      type: Object,\n      default: () => ({\n        'X-XSRF-TOKEN': localStorage.getItem('token')\n      })\n    },\n    byteConversion: {\n      type: Number,\n      default: CONSTANTS.BYTE_CONVERSION\n    },\n    chunkEnabled: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      // 文件状态管理\n      files: [],              // vue-upload-component 管理的文件\n      buildedFiles: [],       // 已构建完成的文件列表\n      \n      // 上传状态管理\n      saveToServerAsyncPageTimer: null,\n      uploadRefId: null,\n      // 多选且外部无值时，预先生成 groupId，确保首次上传参数完整\n      groupId: (this.multiple && !this.value) ? uuidv4() : null\n    }\n  },\n  created() {\n    // 多文件模式下，如果没有外部 groupId，则生成一个\n    if (this.multiple && !this.value) {\n      this.groupId = uuidv4()\n      console.log('Created with new groupId:', this.groupId)\n    }\n  },\n  watch: {\n    value: {\n      async handler(value) {\n        if (type.isEmpty(value)) {\n          this.resetFiles()\n        } else if (this.multiple) {\n          this.handleMultipleFileValue(value)\n        } else {\n          this.handleSingleFileValue()\n        }\n      },\n      immediate: true\n    }\n  },\n  computed: {\n    // ==================== 基础配置 ====================\n    prefixPath() {\n      return window.prefixPath\n    },\n    \n    uploadRef() {\n      if (!this.uploadRefId) {\n        this.uploadRefId = `uploadRef_${uuidv4()}`\n      }\n      return this.uploadRefId\n    },\n    \n    iconIsZhWord() {\n      return type.isZhWord(this.icon)\n    },\n    \n    // ==================== 上传配置 ====================\n    uploadParams() {\n      return this.multiple ? { groupID: this.groupId } : {}\n    },\n    \n    fileSizeLimit() {\n      return this.size * this.byteConversion\n    },\n    \n    postAction() {\n      const queryString = route.toQueryString(this.querys)\n      return `${this.prefixPath}${this.url}?${queryString}`\n    },\n    \n    chunkConfig() {\n      return {\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\n        headers: { ...this.headers },\n        minSize: CONSTANTS.CHUNK_MIN_SIZE,\n        maxActive: CONSTANTS.CHUNK_MAX_ACTIVE,\n        maxRetries: CONSTANTS.CHUNK_MAX_RETRIES,\n        startBody: { override: true, path: '/cw' },\n        uploadBody: { override: true, path: '/cw' },\n        finishBody: { override: true, path: '/cw' }\n      }\n    },\n    \n    getMaximum() {\n      return this.multiple ? this.maximum : 1\n    },\n    \n    // ==================== 文件状态 ====================\n    uploadingFiles() {\n      return this.files.filter(file => file.progress !== undefined && !file.success)\n    },\n    \n    completedFiles() {\n      return this.buildedFiles.filter(file => file.fileID)\n    },\n    \n    totalFiles() {\n      return this.uploadingFiles.length + this.completedFiles.length\n    },\n    \n    isFileUploadSuccessed() {\n      const currentUploadingFiles = this.files.filter(file => file.response !== undefined)\n      if (currentUploadingFiles.length === 0) {\n        return this.buildedFiles.length > 0\n      }\n      return currentUploadingFiles.every(file => file.success)\n    },\n    \n    isShowUploadContainer() {\n      const maxFiles = this.multiple ? this.maximum : 1\n      return this.totalFiles < maxFiles\n    },\n    \n    // ==================== 文件信息 ====================\n    fileSuffixIcon() {\n      return FILE_SUFFIX_ICONS\n    },\n    \n    fileIds() {\n      if (this.multiple) {\n        return this.groupId\n      } else {\n        const fileIds = this.buildedFiles.map(file => file.fileID)\n        return fileIds[0]\n      }\n    },\n    \n    fileResponseData() {\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\n    }\n  },\n  methods: {\n    // ==================== 文件管理 ====================\n    \n    /**\n     * 从多个数组中移除文件\n     */\n    removeFromArrays(file, arrays, key = 'fileID') {\n      return arrays.map(arr => \n        arr.filter(item => item[key] !== file[key] && item.id !== file.id)\n      )\n    },\n    \n    /**\n     * 检查文件是否为新文件\n     */\n    isNewFile(newFile, existingFiles, key = 'fileID') {\n      return newFile[key] && !existingFiles.some(existing => existing[key] === newFile[key])\n    },\n    \n    /**\n     * 合并文件数据\n     */\n    mergeFileData(uploadFile) {\n      return {\n        ...uploadFile.response.data,\n        ...uploadFile\n      }\n    },\n    \n    /**\n     * 初始化文件列表\n     */\n    async initializeFiles() {\n      if (!this.value) return\n      \n      if (this.multiple) {\n        await this.fetchFilesWithGroupId()\n      } else {\n        await this.fetchFileWithFileId()\n      }\n    },\n    \n    /**\n     * 获取多文件组\n     */\n    async fetchFilesWithGroupId() {\n      try {\n        const response = await net.get(`/api-file/workbench/file/group/${this.value}`)\n        const data = response.data || []\n        \n        // 只有在没有现有文件时才设置初始文件列表\n        if (this.buildedFiles.length === 0) {\n          this.buildedFiles = data\n          console.log('Initial files loaded:', this.buildedFiles.length)\n        } else {\n          console.log('Keep existing files, skip initial load')\n        }\n      } catch (error) {\n        console.log('fetchFilesWithGroupId error:', error)\n        console.log('Keep current files, do not clear due to API error')\n      }\n    },\n    \n    /**\n     * 获取单文件\n     */\n    async fetchFileWithFileId() {\n      try {\n        const response = await net.get(`/api-file/file/${this.value}`)\n        const data = response.data\n        this.buildedFiles = [data]\n        this.files = [data]\n      } catch (error) {\n        console.log('fetchFileWithFileId error:', error)\n      }\n    },\n    \n    /**\n     * 处理文件删除\n     */\n    handleClickDelete(file) {\n      const { fileID } = file\n      console.log('Deleting file:', { name: file.name, fileID })\n      \n      // 从上传组件中移除文件\n      if (this.$refs[this.uploadRef]) {\n        this.$refs[this.uploadRef].remove(file)\n      }\n      \n      // 从所有数组中移除文件\n      [this.files, this.buildedFiles] = this.removeFromArrays(file, [this.files, this.buildedFiles])\n      \n      console.log('After deletion - files:', this.files.length, 'buildedFiles:', this.buildedFiles.length)\n      \n      // 多文件模式下，如果删除最后一个文件，重置 groupId\n      if (this.multiple && this.buildedFiles.length === 0) {\n        this.groupId = null\n        console.log('Reset groupId after deleting last file')\n      }\n      \n      // 触发 change 事件\n      this.$emit('change', this.fileIds)\n    },\n    \n    /**\n     * 处理文件下载\n     */\n    handleClickDownload(file) {\n      const { fileID: fileId } = file\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\n    },\n    // ==================== 上传处理 ====================\n    \n    /**\n     * 处理文件上传状态变化\n     */\n    onWatchFiles(files) {\n      console.log('onWatchFiles called with files:', files.length)\n      console.log('Current buildedFiles:', this.buildedFiles.length)\n      \n      // 更新文件状态\n      this.files = files\n      \n      // 处理已上传成功的文件\n      this.processUploadedFiles(files)\n      \n      // 检查上传是否完成\n      if (this.isFileUploadSuccessed) {\n        this.$emit('change', this.fileIds)\n        this.$emit('on-success', this.fileResponseData)\n      }\n    },\n    \n    /**\n     * 处理已上传成功的文件\n     */\n    processUploadedFiles(files) {\n      // 处理所有有响应的文件（包括正在上传和已完成的）\n      const uploadedFiles = files.filter(file => file.response)\n      const newBuildedFiles = uploadedFiles.map(file => this.mergeFileData(file))\n      \n      if (this.multiple) {\n        this.processMultipleFiles(newBuildedFiles)\n      } else {\n        // 单文件模式：只保留最新的文件\n        this.buildedFiles = newBuildedFiles\n      }\n      \n      this.logFileStatus()\n    },\n    \n    /**\n     * 处理多文件模式\n     */\n    processMultipleFiles(newBuildedFiles) {\n      // 获取已存在的文件ID集合\n      const existingFileIds = new Set(this.buildedFiles.map(f => f.fileID).filter(id => id))\n      \n      // 过滤出真正的新文件\n      const trulyNewFiles = newBuildedFiles.filter(newFile => \n        this.isNewFile(newFile, this.buildedFiles)\n      )\n      \n      console.log('Existing fileIDs:', Array.from(existingFileIds))\n      console.log('New uploaded files:', newBuildedFiles.map(f => ({ name: f.name, fileID: f.fileID })))\n      console.log('Truly new files:', trulyNewFiles.map(f => ({ name: f.name, fileID: f.fileID })))\n      \n      // 将新文件追加到现有文件列表\n      if (trulyNewFiles.length > 0) {\n        this.buildedFiles = [...this.buildedFiles, ...trulyNewFiles]\n        console.log('Added new files, total buildedFiles:', this.buildedFiles.length)\n      }\n      \n      // 更新现有文件的状态（包括新添加的文件）\n      this.updateExistingFiles(newBuildedFiles)\n    },\n    \n    /**\n     * 更新现有文件状态\n     */\n    updateExistingFiles(newBuildedFiles) {\n      this.buildedFiles = this.buildedFiles.map(existingFile => {\n        const updatedFile = newBuildedFiles.find(newFile => newFile.fileID === existingFile.fileID)\n        return updatedFile ? { ...existingFile, ...updatedFile } : existingFile\n      })\n    },\n    \n    /**\n     * 记录文件状态日志\n     */\n    logFileStatus() {\n      console.log('Final buildedFiles:', this.buildedFiles.length)\n      console.log('buildedFiles details:', this.buildedFiles.map(f => ({ name: f.name, fileID: f.fileID, success: f.success })))\n      console.log('Uploading files:', this.uploadingFiles.length)\n      console.log('Completed files:', this.completedFiles.length)\n    },\n    // ==================== 异步处理 ====================\n    \n    /**\n     * 异步保存文件到服务器\n     */\n    async saveToServerAsyncPage(payloads = {}) {\n      try {\n        const response = await net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \n          headers: {\n            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'\n          }\n        })\n        \n        const { data } = response\n        if (data !== 'saveToServerAsyncPage') {\n          clearInterval(this.saveToServerAsyncPageTimer)\n        }\n      } catch (error) {\n        console.error('saveToServerAsyncPage error:', error)\n        clearInterval(this.saveToServerAsyncPageTimer)\n      }\n    },\n    \n    // ==================== 文件验证 ====================\n    \n    /**\n     * 验证文件类型\n     */\n    validateFileType(file) {\n      if (!file || !file.name) {\n        console.log('文件或文件名不存在')\n        return false\n      }\n      \n      const fileExt = this.getFileExtension(file.name)\n      console.log('文件扩展名:', fileExt)\n      \n      if (this.extensions) {\n        const allowedExts = this.getAllowedExtensions()\n        console.log('允许的扩展名:', allowedExts)\n        \n        if (!allowedExts.includes(fileExt)) {\n          console.log('扩展名不在允许列表中')\n          this.$message.error(`不支持的文件类型 \"${fileExt}\"，请上传 ${this.extensions} 格式的文件`)\n          return false\n        }\n      }\n      \n      console.log('文件类型验证通过')\n      return true\n    },\n    \n    /**\n     * 获取文件扩展名\n     */\n    getFileExtension(fileName) {\n      return fileName.toLowerCase().substring(fileName.lastIndexOf('.'))\n    },\n    \n    /**\n     * 获取允许的扩展名列表\n     */\n    getAllowedExtensions() {\n      return this.extensions.toLowerCase()\n        .split(',')\n        .map(ext => ext.trim().startsWith('.') ? ext.trim() : `.${ext.trim()}`)\n    },\n    // ==================== 事件处理 ====================\n    \n    /**\n     * 处理文件输入事件\n     */\n    onWatchInputFiles(newFile, oldFile) {\n      if (newFile && !oldFile) {\n        this.handleFileAdd(newFile)\n      } else if (newFile && oldFile) {\n        this.handleFileUpdate(newFile)\n      } else if (!newFile && oldFile) {\n        this.handleFileDelete()\n      }\n      \n      // 激活上传组件\n      this.activateUploadComponent(newFile, oldFile)\n    },\n    \n    /**\n     * 生成唯一的随机数\n     */\n    generateUniqueRandom() {\n      // 使用 crypto.getRandomValues 生成更安全的随机数\n      if (window.crypto && window.crypto.getRandomValues) {\n        const array = new Uint32Array(1)\n        window.crypto.getRandomValues(array)\n        return array[0].toString()\n      }\n      // 降级方案：使用 Math.random 结合时间戳\n      return Math.random().toString(36).substr(2, 9) + Date.now().toString(36)\n    },\n\n    /**\n     * 处理文件添加\n     */\n    handleFileAdd(newFile) {\n      // 为每个文件生成唯一的随机数\n      const uniqueRandom = this.generateUniqueRandom()\n      newFile.postAction = newFile.postAction + '&_t=' + uniqueRandom\n      console.log('add file:', newFile)\n      console.log('extensions:', this.extensions)\n      console.log('accept:', this.accept)\n      \n      // 生成或使用 groupId\n      this.ensureGroupId()\n      \n      // 验证文件类型\n      if (!this.validateFileType(newFile)) {\n        this.removeInvalidFile(newFile)\n        return\n      }\n      console.log('文件类型验证通过，继续上传')\n    },\n    \n    /**\n     * 处理文件更新\n     */\n    handleFileUpdate(newFile) {\n      console.log('update', newFile)\n      const { success, active, chunk, response } = newFile\n      \n      if (chunk && success && !active) {\n        console.log('chunk end')\n        this.handleChunkComplete(response)\n      }\n    },\n    \n    /**\n     * 处理文件删除\n     */\n    handleFileDelete() {\n      console.log('delete')\n    },\n    \n    /**\n     * 确保 groupId 存在\n     */\n    ensureGroupId() {\n      console.log('onWatchInputFiles - multiple:', this.multiple, 'current groupId:', this.groupId)\n      \n      if (this.multiple && !this.groupId) {\n        this.groupId = uuidv4()\n        console.log('Generated new groupId:', this.groupId)\n      } else if (this.multiple && this.groupId) {\n        console.log('Using existing groupId:', this.groupId)\n      }\n    },\n    \n    /**\n     * 移除无效文件\n     */\n    removeInvalidFile(file) {\n      console.log('文件类型验证失败，尝试移除文件')\n      console.log('uploadRef:', this.uploadRef)\n      console.log('$refs:', this.$refs)\n      \n      if (this.$refs[this.uploadRef]) {\n        this.$refs[this.uploadRef].remove(file)\n      } else {\n        console.error('无法找到 uploadRef 引用')\n      }\n    },\n    \n    /**\n     * 处理分片上传完成\n     */\n    handleChunkComplete(response) {\n      const { data: { file, type } } = response\n      const payloads = {\n        filePath: file.match(/\\/cw(.*)/) ? file.match(/\\/cw(.*)/)[0] : void 0,\n        asyncID: uuidv4(),\n        isDeleteOrigin: false,\n        toImage: type === 'pdf',\n        unzip: type === 'zip',\n        _csrf: localStorage.getItem('token')\n      }\n      \n      this.saveToServerAsyncPageTimer = setInterval(() => {\n        this.saveToServerAsyncPage(payloads)\n      }, CONSTANTS.SAVE_INTERVAL)\n    },\n    \n    /**\n     * 激活上传组件\n     */\n    activateUploadComponent(newFile, oldFile) {\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\n        if (!this.$refs[this.uploadRef].active) {\n          this.$refs[this.uploadRef].active = true\n        }\n      }\n    },\n    \n    // ==================== 值变化处理 ====================\n    \n    /**\n     * 重置文件状态\n     */\n    resetFiles() {\n      this.files = []\n      this.buildedFiles = []\n      // 多选模式下保留或生成 groupId，避免首次上传为空\n      if (this.multiple) {\n        if (!this.groupId) {\n          this.groupId = uuidv4()\n          console.log('Generated groupId in resetFiles:', this.groupId)\n        } else {\n          console.log('Preserve existing groupId in resetFiles:', this.groupId)\n        }\n      } else {\n        this.groupId = null\n        console.log('Reset groupId to null (single mode)')\n      }\n    },\n    \n    /**\n     * 处理多文件模式的值变化\n     */\n    async handleMultipleFileValue(value) {\n      // multiple - value 就是 groupId\n      // 只有当 groupId 发生变化时才重新获取文件列表（初始化回显）\n      if (this.groupId !== value) {\n        this.groupId = value\n        console.log('Set groupId from external value:', this.groupId)\n        await this.fetchFilesWithGroupId()\n      } else {\n        console.log('GroupId unchanged, skip fetchFilesWithGroupId')\n      }\n    },\n    \n    /**\n     * 处理单文件模式的值变化\n     */\n    async handleSingleFileValue() {\n      await this.fetchFileWithFileId()\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  &:hover {\n    border-color: var(--idooel-form-upload-border-hover-color);\n  }\n  border-radius: var(--idooel-form-border-radius);\n}\n.ele-upload__wrapper {\n  width: 100%;\n  .ele-upload__area {\n    padding: 16px;\n    width: 100%;\n    height: 80px;\n    display: flex;\n    flex-direction: row;\n    .ele-upload__area--icon {\n      color: var(--idooel-primary-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      font-size: 16x;\n      .anticon-cloud-upload {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n      .anticon {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n    }\n    .ele-upload__area--text {\n      margin-left: 16px;\n      .ele-upload__message {\n        font-size: 16px;\n        color: var(--idoole-black-088);\n        text-align: left;\n      }\n      .ele-upload__ext {\n        text-align: left;\n        font-size: 14px;\n        color: var(--idoole-black-06);\n      }\n    }\n  }\n  .ele-files__wrapper {\n    .ele-file__item {\n      width: 100%;\n      margin-top: 8px;\n      padding: 8px 12px;\n      border-radius: var(--idooel-form-border-radius);\n      background: var(--idooel-form-upload-bg-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      .ele-file__suffix--icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 24px;\n        height: 24px;\n      }\n      .ele-file__name {\n        flex: 1;\n        text-align: left;\n        white-space: nowrap;\n        overflow: hidden;\n        font-size: 14px;\n        margin-left: 8px;\n        cursor: pointer;\n        .ele-file__inner {\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n      .ele-file__delete {\n        margin-left: 8px;\n        .ele-file__delete--icon {\n          margin-left: 8px;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>","::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__suffix--icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$t = "data-v-48a2255a";
+    const __vue_scope_id__$t = "data-v-01d80c54";
     /* module identifier */
     const __vue_module_identifier__$t = undefined;
     /* functional template */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idooel/components",
-  "version": "0.0.2-beta.6",
+  "version": "0.0.2-beta.7",
   "description": "",
   "private": false,
   "main": "dist/@idooel/components.umd.js",

package/packages/upload/src/index.vue

@@ -164,8 +164,7 @@ export default {
     querys: {
       type: Object,
       default: () => ({
-        _csrf: localStorage.getItem('token'),
-        _t: new Date().valueOf()
+        _csrf: localStorage.getItem('token')
       })
     },
     headers: {
@@ -590,10 +589,27 @@ export default {
       this.activateUploadComponent(newFile, oldFile)
     },
     
+    /**
+     * 生成唯一的随机数
+     */
+    generateUniqueRandom() {
+      // 使用 crypto.getRandomValues 生成更安全的随机数
+      if (window.crypto && window.crypto.getRandomValues) {
+        const array = new Uint32Array(1)
+        window.crypto.getRandomValues(array)
+        return array[0].toString()
+      }
+      // 降级方案：使用 Math.random 结合时间戳
+      return Math.random().toString(36).substr(2, 9) + Date.now().toString(36)
+    },
+
     /**
      * 处理文件添加
      */
     handleFileAdd(newFile) {
+      // 为每个文件生成唯一的随机数
+      const uniqueRandom = this.generateUniqueRandom()
+      newFile.postAction = newFile.postAction + '&_t=' + uniqueRandom
       console.log('add file:', newFile)
       console.log('extensions:', this.extensions)
       console.log('accept:', this.accept)
@@ -606,7 +622,6 @@ export default {
         this.removeInvalidFile(newFile)
         return
       }
-      
       console.log('文件类型验证通过，继续上传')
     },