@idooel/components 0.0.2-beta.12 → 0.0.2-beta.14

package/packages/upload/src/index.vue

@@ -1,997 +1,999 @@
-<template>
-  <div class="ele-upload__wrapper">
-    <FileUpload
-      class="ele-upload__inner"
-      v-show="isShowUploadContainer"
-      v-model="files"
-      :ref="uploadRef"
-      :drop="drop"
-      :chunk-enabled="chunkEnabled"
-      :chunk="chunkConfig"
-      :accept="accept"
-      :size="fileSizeLimit"
-      :post-action="postAction"
-      :multiple="multiple"
-      :headers="headers"
-      :maximum="getMaximum"
-      :data="uploadParams"
-      @input-file="onWatchInputFiles"
-      @input="onWatchFiles"
-      style="width: 100%;">
-      <section class="ele-upload__area">
-        <div class="ele-upload__area--icon">
-          <template v-if="iconIsZhWrod">
-            {{ icon }}
-          </template>
-          <template v-else>
-            <ele-icon :type="icon"></ele-icon>
-          </template>
-        </div>
-        <div class="ele-upload__area--text">
-          <div class="ele-upload__message" v-if="message" v-html="message"></div>
-          <div class="ele-upload__message" v-else>单击或拖动文件到该区域以上传</div>
-          <div class="ele-upload__ext" v-if="ext" v-html="ext"></div>
-          <div class="ele-upload__ext" v-else>文件小于{{ size }}M</div>
-        </div>
-      </section>
-    </FileUpload>
-    <section class="ele-files__wrapper">
-      <!-- 显示正在上传的文件（有进度条） -->
-      <div class="ele-file__item" v-for="(file, idx) in uploadingFiles" :key="`uploading-${idx}`">
-        <div class="ele-file__suffix--icon">
-          <ele-icon :type="fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'"></ele-icon>
-        </div>
-        <div class="ele-file__name">
-          <div class="ele-file__inner">{{ file.name }}</div>
-          <div v-if="file.progress !== undefined" class="ele-uplpad__progress">
-            <a-progress :strokeWidth="2" :percent="Number(file.progress)" size="small" />
-          </div>
-        </div>
-        <div class="ele-file__delete" v-if="file.success || file.error">
-          <span class="ele-file__size">{{ (file.size / byteConversion).toFixed(2) }}M</span>
-          <span class="ele-file__delete--icon" @click="handleClickDelete(file)">
-            <ele-icon type="delete"></ele-icon>
-          </span>
-        </div>
-      </div>
-      
-      <!-- 显示已上传完成的文件 -->
-      <div class="ele-file__item" v-for="(file, idx) in completedFiles" :key="`completed-${idx}`">
-        <div class="ele-file__suffix--icon">
-          <ele-icon :type="fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'"></ele-icon>
-        </div>
-        <div class="ele-file__name">
-          <div class="ele-file__inner" @click="handleClickDownload(file)">{{ file.name }}</div>
-        </div>
-        <div class="ele-file__delete">
-          <span class="ele-file__size">{{ (file.size / byteConversion).toFixed(2) }}M</span>
-          <span class="ele-file__delete--icon" @click="handleClickDelete(file)">
-            <ele-icon type="delete"></ele-icon>
-          </span>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import FileUpload from 'vue-upload-component'
-import { v4 as uuidv4 } from 'uuid'
-import { route, net, type } from '@idooel/shared'
-
-// 常量定义
-const CONSTANTS = {
-  DEFAULT_URL: 'zuul/api-file/workbench/file',
-  DEFAULT_ICON: '上传',
-  DEFAULT_SIZE: 100,
-  DEFAULT_MESSAGE: '单击或拖动文件到该区域以上传',
-  DEFAULT_MAXIMUM: 20,
-  BYTE_CONVERSION: 1024 * 1024,
-  CHUNK_MIN_SIZE: 3 * 1024 * 1024,
-  CHUNK_MAX_ACTIVE: 3,
-  CHUNK_MAX_RETRIES: 5,
-  SAVE_INTERVAL: 2000
-}
-
-// 文件后缀图标映射
-const FILE_SUFFIX_ICONS = {
-  'doc': { name: 'icon-doc' },
-  'html': { name: 'icon-html' },
-  'mp4': { name: 'icon-mp' },
-  'pdf': { name: 'icon-pdf' },
-  'ppt': { name: 'icon-ppt' },
-  'psd': { name: 'icon-psd' },
-  'rtf': { name: 'icon-rtf' },
-  'txt': { name: 'icon-txt' },
-  'vis': { name: 'icon-vis' },
-  'xls': { name: 'icon-xls' },
-  'xml': { name: 'icon-xml' },
-  'zip': { name: 'icon-zip' },
-  'jpg': { name: 'icon-img' },
-  'mp3': { name: 'icon-mp1' }
-}
-
-export default {
-  name: 'ele-upload',
-  components: {
-    FileUpload
-  },
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    url: {
-      type: String,
-      default: CONSTANTS.DEFAULT_URL
-    },
-    icon: {
-      type: String,
-      default: CONSTANTS.DEFAULT_ICON
-    },
-    size: {
-      type: Number,
-      default: CONSTANTS.DEFAULT_SIZE
-    },
-    message: {
-      type: String,
-      default: CONSTANTS.DEFAULT_MESSAGE
-    },
-    ext: {
-      type: String
-    },
-    extensions: {
-      type: String
-    },
-    accept: {
-      type: String
-    },
-    maximum: {
-      type: Number,
-      default: CONSTANTS.DEFAULT_MAXIMUM
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    drop: {
-      type: Boolean,
-      default: true
-    },
-    value: {
-      type: [String, Array]
-    },
-    querys: {
-      type: Object,
-      default: () => ({
-        _csrf: localStorage.getItem('token')
-      })
-    },
-    headers: {
-      type: Object,
-      default: () => ({
-        'X-XSRF-TOKEN': localStorage.getItem('token')
-      })
-    },
-    byteConversion: {
-      type: Number,
-      default: CONSTANTS.BYTE_CONVERSION
-    },
-    chunkEnabled: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      // 文件状态管理
-      files: [],              // vue-upload-component 管理的文件
-      buildedFiles: [],       // 已构建完成的文件列表
-      
-      // 上传状态管理
-      saveToServerAsyncPageTimer: null,
-      uploadRefId: null,
-      // 多选且外部无值时，预先生成 groupId，确保首次上传参数完整
-      groupId: (this.multiple && !this.value) ? uuidv4() : null
-    }
-  },
-  created() {
-    // 多文件模式下，如果没有外部 groupId，则生成一个
-    if (this.multiple && !this.value) {
-      this.groupId = uuidv4()
-      console.log('Created with new groupId:', this.groupId)
-    }
-  },
-  watch: {
-    value: {
-      async handler(value) {
-        if (type.isEmpty(value)) {
-          this.resetFiles()
-        } else if (this.multiple) {
-          this.handleMultipleFileValue(value)
-        } else {
-          this.handleSingleFileValue()
-        }
-      },
-      immediate: true
-    }
-  },
-  computed: {
-    // ==================== 基础配置 ====================
-    prefixPath() {
-      return window.prefixPath
-    },
-    
-    uploadRef() {
-      if (!this.uploadRefId) {
-        this.uploadRefId = `uploadRef_${uuidv4()}`
-      }
-      return this.uploadRefId
-    },
-    
-    iconIsZhWord() {
-      return type.isZhWord(this.icon)
-    },
-    
-    // ==================== 上传配置 ====================
-    uploadParams() {
-      return this.multiple ? { groupID: this.groupId } : {}
-    },
-    
-    fileSizeLimit() {
-      return this.size * this.byteConversion
-    },
-    
-    postAction() {
-      const queryString = route.toQueryString(this.querys)
-      return `${this.prefixPath}${this.url}?${queryString}`
-    },
-    
-    chunkConfig() {
-      return {
-        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,
-        headers: { ...this.headers },
-        minSize: CONSTANTS.CHUNK_MIN_SIZE,
-        maxActive: CONSTANTS.CHUNK_MAX_ACTIVE,
-        maxRetries: CONSTANTS.CHUNK_MAX_RETRIES,
-        startBody: { override: true, path: '/cw' },
-        uploadBody: { override: true, path: '/cw' },
-        finishBody: { override: true, path: '/cw' }
-      }
-    },
-    
-    getMaximum() {
-      return this.multiple ? this.maximum : 1
-    },
-    
-    // ==================== 文件状态 ====================
-    uploadingFiles() {
-      // 筛选条件：有进度信息 且 (未成功 或 成功但还没有fileID的切片上传文件)
-      // 这样可以确保切片上传完成但异步保存未完成的文件继续显示，避免闪烁
-      return this.files.filter(file => {
-        if (file.progress === undefined) return false
-        if (!file.success) return true
-        
-        // 检查文件是否已经有 fileID（可能在 file.fileID 或 file.response.data.fileID）
-        const hasFileID = file.fileID || (file.response && file.response.data && file.response.data.fileID)
-        
-        // 切片上传成功但还没有完成异步保存（没有fileID）的文件继续显示
-        // 普通上传成功且已有 fileID 的文件不显示（会在 completedFiles 中显示）
-        return file.success && !hasFileID
-      })
-    },
-    
-    completedFiles() {
-      return this.buildedFiles.filter(file => file.fileID)
-    },
-    
-    totalFiles() {
-      return this.uploadingFiles.length + this.completedFiles.length
-    },
-    
-    isFileUploadSuccessed() {
-      const currentUploadingFiles = this.files.filter(file => file.response !== undefined)
-      if (currentUploadingFiles.length === 0) {
-        return this.buildedFiles.length > 0
-      }
-      return currentUploadingFiles.every(file => file.success)
-    },
-    
-    isShowUploadContainer() {
-      const maxFiles = this.multiple ? this.maximum : 1
-      return this.totalFiles < maxFiles
-    },
-    
-    // ==================== 文件信息 ====================
-    fileSuffixIcon() {
-      return FILE_SUFFIX_ICONS
-    },
-    
-    fileIds() {
-      if (this.multiple) {
-        return this.groupId
-      } else {
-        const fileIds = this.buildedFiles.map(file => file.fileID)
-        return fileIds[0]
-      }
-    },
-    
-    fileResponseData() {
-      return this.multiple ? this.buildedFiles : this.buildedFiles[0]
-    }
-  },
-  methods: {
-    // ==================== 文件管理 ====================
-    
-    /**
-     * 从多个数组中移除文件
-     */
-    removeFromArrays(file, arrays, key = 'fileID') {
-      return arrays.map(arr => 
-        arr.filter(item => {
-          // 如果 fileID 都存在且相等，则移除
-          if (item[key] && file[key] && item[key] === file[key]) {
-            return false
-          }
-          // 如果 id 都存在且相等，则移除
-          if (item.id && file.id && item.id === file.id) {
-            return false
-          }
-          // 如果文件名相同，也考虑移除（额外的安全检查）
-          if (item.name && file.name && item.name === file.name && item[key] === file[key]) {
-            return false
-          }
-          // 否则保留
-          return true
-        })
-      )
-    },
-    
-    /**
-     * 检查文件是否为新文件
-     */
-    isNewFile(newFile, existingFiles, key = 'fileID') {
-      return newFile[key] && !existingFiles.some(existing => existing[key] === newFile[key])
-    },
-    
-    /**
-     * 合并文件数据
-     */
-    mergeFileData(uploadFile) {
-      return {
-        ...uploadFile.response.data,
-        ...uploadFile
-      }
-    },
-    
-    /**
-     * 初始化文件列表
-     */
-    async initializeFiles() {
-      if (!this.value) return
-      
-      if (this.multiple) {
-        await this.fetchFilesWithGroupId()
-      } else {
-        await this.fetchFileWithFileId()
-      }
-    },
-    
-    /**
-     * 获取多文件组
-     */
-    async fetchFilesWithGroupId() {
-      try {
-        const response = await net.get(`/api-file/workbench/file/group/${this.value}`)
-        const data = response.data || []
-        
-        // 只有在没有现有文件时才设置初始文件列表
-        if (this.buildedFiles.length === 0) {
-          this.buildedFiles = data
-          console.log('Initial files loaded:', this.buildedFiles.length)
-        } else {
-          console.log('Keep existing files, skip initial load')
-        }
-      } catch (error) {
-        console.log('fetchFilesWithGroupId error:', error)
-        console.log('Keep current files, do not clear due to API error')
-      }
-    },
-    
-    /**
-     * 获取单文件
-     */
-    async fetchFileWithFileId() {
-      try {
-        const response = await net.get(`/api-file/file/${this.value}`)
-        const data = response.data
-        this.buildedFiles = [data]
-        this.files = [data]
-      } catch (error) {
-        console.log('fetchFileWithFileId error:', error)
-      }
-    },
-
-    /**
-     * 调用服务器删除文件 API
-     */
-    async deleteFiles (ids) {
-      if (!ids) {
-        console.warn('No fileID provided for deletion')
-        return
-      }
-      
-      if (type.isArray(ids)) {
-        ids = ids.join(',')
-      }
-      
-      try {
-        await net.remove(`/api-file/workbench/file?ids=${ids}`)
-        console.log('File deleted from server:', ids)
-      } catch (error) {
-        console.error('Failed to delete file from server:', error)
-        throw error // 重新抛出错误，让调用方处理
-      }
-    },
-    
-    /**
-     * 处理文件删除
-     */
-    async handleClickDelete(file) {
-      const { fileID, name } = file
-      console.log('Deleting file:', { name, fileID })
-      
-      // 先从上传组件中移除文件
-      if (this.$refs[this.uploadRef]) {
-        this.$refs[this.uploadRef].remove(file)
-      }
-      
-      // 从所有数组中移除文件
-      [this.files, this.buildedFiles] = this.removeFromArrays(file, [this.files, this.buildedFiles])
-      
-      console.log('After deletion - files:', this.files.length, 'buildedFiles:', this.buildedFiles.length)
-      
-      // 如果有 fileID，调用服务器删除 API
-      if (fileID) {
-        try {
-          await this.deleteFiles(fileID)
-        } catch (error) {
-          console.error('Failed to delete file from server:', error)
-          // 可以选择提示用户或回滚操作
-          // 这里仅记录错误，不影响前端显示
-        }
-      }
-      
-      // 多文件模式下，如果删除最后一个文件，重置 groupId
-      if (this.multiple && this.buildedFiles.length === 0) {
-        this.groupId = null
-        console.log('Reset groupId after deleting last file')
-      }
-      
-      // 触发 change 事件
-      this.$emit('change', this.fileIds)
-    },
-    
-    /**
-     * 处理文件下载
-     */
-    handleClickDownload(file) {
-      const { fileID: fileId } = file
-      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)
-    },
-    // ==================== 上传处理 ====================
-    
-    /**
-     * 处理文件上传状态变化
-     */
-    onWatchFiles(files) {
-      console.log('onWatchFiles called with files:', files.length)
-      console.log('Current buildedFiles:', this.buildedFiles.length)
-      
-      // 更新文件状态
-      this.files = files
-      
-      // 处理已上传成功的文件
-      this.processUploadedFiles(files)
-      
-      // 检查上传是否完成
-      if (this.isFileUploadSuccessed) {
-        this.$emit('change', this.fileIds)
-        this.$emit('on-success', this.fileResponseData)
-      }
-    },
-    
-    /**
-     * 处理已上传成功的文件
-     */
-    processUploadedFiles(files) {
-      // 处理所有有响应的文件（包括正在上传和已完成的）
-      const uploadedFiles = files.filter(file => file.response)
-      const newBuildedFiles = uploadedFiles.map(file => this.mergeFileData(file))
-      
-      if (this.multiple) {
-        this.processMultipleFiles(newBuildedFiles)
-      } else {
-        // 单文件模式：只保留最新的文件
-        this.buildedFiles = newBuildedFiles
-        
-        // 从 files 数组中移除已完成的文件（普通上传），避免重复显示
-        if (newBuildedFiles.length > 0 && newBuildedFiles[0].fileID) {
-          this.$nextTick(() => {
-            this.files = this.files.filter(file => {
-              const fileID = file.fileID || (file.response && file.response.data && file.response.data.fileID)
-              return fileID !== newBuildedFiles[0].fileID
-            })
-            console.log('Removed completed file from upload list (single mode)')
-          })
-        }
-      }
-      
-      this.logFileStatus()
-    },
-    
-    /**
-     * 处理多文件模式
-     */
-    processMultipleFiles(newBuildedFiles) {
-      // 获取已存在的文件ID集合
-      const existingFileIds = new Set(this.buildedFiles.map(f => f.fileID).filter(id => id))
-      
-      // 过滤出真正的新文件
-      const trulyNewFiles = newBuildedFiles.filter(newFile => 
-        this.isNewFile(newFile, this.buildedFiles)
-      )
-      
-      console.log('Existing fileIDs:', Array.from(existingFileIds))
-      console.log('New uploaded files:', newBuildedFiles.map(f => ({ name: f.name, fileID: f.fileID })))
-      console.log('Truly new files:', trulyNewFiles.map(f => ({ name: f.name, fileID: f.fileID })))
-      
-      // 将新文件追加到现有文件列表
-      if (trulyNewFiles.length > 0) {
-        this.buildedFiles = [...this.buildedFiles, ...trulyNewFiles]
-        console.log('Added new files, total buildedFiles:', this.buildedFiles.length)
-        
-        // 从 files 数组中移除已完成的文件（普通上传），避免重复显示
-        this.$nextTick(() => {
-          const completedFileIDs = new Set(trulyNewFiles.map(f => f.fileID))
-          this.files = this.files.filter(file => {
-            const fileID = file.fileID || (file.response && file.response.data && file.response.data.fileID)
-            return !completedFileIDs.has(fileID)
-          })
-          console.log('Removed completed files from upload list')
-        })
-      }
-      
-      // 更新现有文件的状态（包括新添加的文件）
-      this.updateExistingFiles(newBuildedFiles)
-    },
-    
-    /**
-     * 更新现有文件状态
-     */
-    updateExistingFiles(newBuildedFiles) {
-      this.buildedFiles = this.buildedFiles.map(existingFile => {
-        const updatedFile = newBuildedFiles.find(newFile => newFile.fileID === existingFile.fileID)
-        return updatedFile ? { ...existingFile, ...updatedFile } : existingFile
-      })
-    },
-    
-    /**
-     * 记录文件状态日志
-     */
-    logFileStatus() {
-      console.log('Final buildedFiles:', this.buildedFiles.length)
-      console.log('buildedFiles details:', this.buildedFiles.map(f => ({ name: f.name, fileID: f.fileID, success: f.success })))
-      console.log('Uploading files:', this.uploadingFiles.length)
-      console.log('Completed files:', this.completedFiles.length)
-    },
-    // ==================== 异步处理 ====================
-    
-    /**
-     * 异步保存文件到服务器
-     * @param {FormData} payloads - 上传参数
-     * @param {Object} uploadingFile - 正在上传的文件对象（可选）
-     */
-    async saveToServerAsyncPage(payloads = {}, uploadingFile = null) {
-      try {
-        const response = await net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { 
-          headers: {
-            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
-          }
-        })
-        
-        const { data } = response
-        if (data !== 'saveToServerAsyncPage') {
-          clearInterval(this.saveToServerAsyncPageTimer)
-          console.log('Chunk upload async save completed, file data:', data)
-          
-          const { fileID, groupID, name } = data
-          
-          // 根据上传模式处理文件信息
-          if (this.multiple) {
-            // 多文件模式：更新 groupID 并追加文件到列表
-            if (groupID) {
-              this.groupId = groupID
-              console.log('Updated groupId from server:', groupID)
-            }
-            
-            // 检查文件是否已存在，避免重复添加
-            const fileExists = this.buildedFiles.some(file => file.fileID === fileID)
-            if (!fileExists && fileID) {
-              // 将服务器返回的完整文件信息追加到文件列表
-              // 添加必要的显示属性
-              const fileData = {
-                ...data,
-                success: true  // 标记为上传成功
-              }
-              
-              // 先添加到已完成列表
-              this.buildedFiles.push(fileData)
-              console.log('File added to list:', name, 'Total files:', this.buildedFiles.length)
-              
-              // 使用 nextTick 确保视图更新后再移除上传列表中的文件，避免闪烁
-              this.$nextTick(() => {
-                // 从上传列表中精确移除对应的文件
-                if (uploadingFile) {
-                  // 如果有文件对象引用，直接移除该文件
-                  this.files = this.files.filter(file => file.id !== uploadingFile.id)
-                  console.log('Removed uploading file by id:', uploadingFile.id)
-                } else {
-                  // 否则根据文件名移除
-                  this.files = this.files.filter(file => file.name !== name)
-                  console.log('Removed uploading file by name:', name)
-                }
-              })
-              
-              // 触发 change 事件通知父组件
-              this.$emit('change', this.fileIds)
-              this.$emit('on-success', this.fileResponseData)
-            } else {
-              console.log('File already exists or invalid fileID, skip adding')
-            }
-          } else {
-            // 单文件模式：替换文件列表
-            if (fileID) {
-              const fileData = {
-                ...data,
-                success: true  // 标记为上传成功
-              }
-              this.buildedFiles = [fileData]
-              this.files = []  // 清空上传列表
-              console.log('Single file updated:', name)
-              
-              // 触发 change 事件通知父组件更新 value
-              this.$emit('change', fileID)
-              this.$emit('on-success', data)
-            }
-          }
-        }
-      } catch (error) {
-        console.error('saveToServerAsyncPage error:', error)
-        clearInterval(this.saveToServerAsyncPageTimer)
-      }
-    },
-    
-    // ==================== 文件验证 ====================
-    
-    /**
-     * 验证文件类型
-     */
-    validateFileType(file) {
-      if (!file || !file.name) {
-        console.log('文件或文件名不存在')
-        return false
-      }
-      
-      const fileExt = this.getFileExtension(file.name)
-      console.log('文件扩展名:', fileExt)
-      
-      if (this.extensions) {
-        const allowedExts = this.getAllowedExtensions()
-        console.log('允许的扩展名:', allowedExts)
-        
-        if (!allowedExts.includes(fileExt)) {
-          console.log('扩展名不在允许列表中')
-          this.$message.error(`不支持的文件类型 "${fileExt}"，请上传 ${this.extensions} 格式的文件`)
-          return false
-        }
-      }
-      
-      console.log('文件类型验证通过')
-      return true
-    },
-    
-    /**
-     * 获取文件扩展名
-     */
-    getFileExtension(fileName) {
-      return fileName.toLowerCase().substring(fileName.lastIndexOf('.'))
-    },
-    
-    /**
-     * 获取允许的扩展名列表
-     */
-    getAllowedExtensions() {
-      return this.extensions.toLowerCase()
-        .split(',')
-        .map(ext => ext.trim().startsWith('.') ? ext.trim() : `.${ext.trim()}`)
-    },
-    // ==================== 事件处理 ====================
-    
-    /**
-     * 处理文件输入事件
-     */
-    onWatchInputFiles(newFile, oldFile) {
-      if (newFile && !oldFile) {
-        this.handleFileAdd(newFile)
-      } else if (newFile && oldFile) {
-        this.handleFileUpdate(newFile)
-      } else if (!newFile && oldFile) {
-        this.handleFileDelete()
-      }
-      
-      // 激活上传组件
-      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)
-      
-      // 生成或使用 groupId
-      this.ensureGroupId()
-      
-      // 验证文件类型
-      if (!this.validateFileType(newFile)) {
-        this.removeInvalidFile(newFile)
-        return
-      }
-      console.log('文件类型验证通过，继续上传')
-    },
-    
-    /**
-     * 处理文件更新
-     */
-    handleFileUpdate(newFile) {
-      console.log('update', newFile)
-      const { success, active, chunk, response } = newFile
-      
-      if (chunk && success && !active) {
-        console.log('chunk end')
-        this.handleChunkComplete(response, newFile)
-      }
-    },
-    
-    /**
-     * 处理文件删除
-     */
-    handleFileDelete() {
-      console.log('delete')
-    },
-    
-    /**
-     * 确保 groupId 存在
-     */
-    ensureGroupId() {
-      console.log('onWatchInputFiles - multiple:', this.multiple, 'current groupId:', this.groupId)
-      
-      if (this.multiple && !this.groupId) {
-        this.groupId = uuidv4()
-        console.log('Generated new groupId:', this.groupId)
-      } else if (this.multiple && this.groupId) {
-        console.log('Using existing groupId:', this.groupId)
-      }
-    },
-    
-    /**
-     * 移除无效文件
-     */
-    removeInvalidFile(file) {
-      console.log('文件类型验证失败，尝试移除文件')
-      console.log('uploadRef:', this.uploadRef)
-      console.log('$refs:', this.$refs)
-      
-      if (this.$refs[this.uploadRef]) {
-        this.$refs[this.uploadRef].remove(file)
-      } else {
-        console.error('无法找到 uploadRef 引用')
-      }
-    },
-    
-    /**
-     * 处理分片上传完成
-     * @param {Object} response - 上传响应
-     * @param {Object} uploadingFile - 正在上传的文件对象（可选）
-     */
-    handleChunkComplete(response, uploadingFile = null) {
-      const { data: { file, type } } = response
-      const payloads = {
-        filePath: file.match(/\/cw(.*)/) ? file.match(/\/cw(.*)/)[0] : void 0,
-        asyncID: uuidv4(),
-        groupID: this.groupId,
-        isDeleteOrigin: false,
-        toImage: type === 'pdf',
-        unzip: type === 'zip',
-        _csrf: localStorage.getItem('token')
-      }
-
-      const formData = new FormData()
-
-      Object.keys(payloads).forEach(key => {
-        formData.append(key, payloads[key])
-      })
-      
-      // 将上传文件对象传递给异步保存方法
-      this.saveToServerAsyncPageTimer = setInterval(() => {
-        this.saveToServerAsyncPage(formData, uploadingFile)
-      }, CONSTANTS.SAVE_INTERVAL)
-    },
-    
-    /**
-     * 激活上传组件
-     */
-    activateUploadComponent(newFile, oldFile) {
-      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
-        if (!this.$refs[this.uploadRef].active) {
-          this.$refs[this.uploadRef].active = true
-        }
-      }
-    },
-    
-    // ==================== 值变化处理 ====================
-    
-    /**
-     * 重置文件状态
-     */
-    resetFiles() {
-      this.files = []
-      this.buildedFiles = []
-      // 多选模式下保留或生成 groupId，避免首次上传为空
-      if (this.multiple) {
-        if (!this.groupId) {
-          this.groupId = uuidv4()
-          console.log('Generated groupId in resetFiles:', this.groupId)
-        } else {
-          console.log('Preserve existing groupId in resetFiles:', this.groupId)
-        }
-      } else {
-        this.groupId = null
-        console.log('Reset groupId to null (single mode)')
-      }
-    },
-    
-    /**
-     * 处理多文件模式的值变化
-     */
-    async handleMultipleFileValue(value) {
-      // multiple - value 就是 groupId
-      // 只有当 groupId 发生变化时才重新获取文件列表（初始化回显）
-      if (this.groupId !== value) {
-        this.groupId = value
-        console.log('Set groupId from external value:', this.groupId)
-        await this.fetchFilesWithGroupId()
-      } else {
-        console.log('GroupId unchanged, skip fetchFilesWithGroupId')
-      }
-    },
-    
-    /**
-     * 处理单文件模式的值变化
-     */
-    async handleSingleFileValue() {
-      await this.fetchFileWithFileId()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep .ele-upload__inner {
-  opacity: 1 !important;
-  cursor: pointer;
-  border: 1px dashed var(--idooel-form-title-border-color);
-  background: var(--idooel-form-upload-bg-color) !important;
-  &:hover {
-    border-color: var(--idooel-form-upload-border-hover-color);
-  }
-  border-radius: var(--idooel-form-border-radius);
-}
-.ele-upload__wrapper {
-  width: 100%;
-  .ele-upload__area {
-    padding: 16px;
-    width: 100%;
-    height: 80px;
-    display: flex;
-    flex-direction: row;
-    .ele-upload__area--icon {
-      color: var(--idooel-primary-color);
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      font-size: 16x;
-      .anticon-cloud-upload {
-        font-size: 48px;
-        color: var(--idooel-primary-color);
-      }
-      .anticon {
-        font-size: 48px;
-        color: var(--idooel-primary-color);
-      }
-    }
-    .ele-upload__area--text {
-      margin-left: 16px;
-      .ele-upload__message {
-        font-size: 16px;
-        color: var(--idoole-black-088);
-        text-align: left;
-      }
-      .ele-upload__ext {
-        text-align: left;
-        font-size: 14px;
-        color: var(--idoole-black-06);
-      }
-    }
-  }
-  .ele-files__wrapper {
-    .ele-file__item {
-      width: 100%;
-      margin-top: 8px;
-      padding: 8px 12px;
-      border-radius: var(--idooel-form-border-radius);
-      background: var(--idooel-form-upload-bg-color);
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      .ele-file__suffix--icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-      }
-      .ele-file__name {
-        flex: 1;
-        text-align: left;
-        white-space: nowrap;
-        overflow: hidden;
-        font-size: 14px;
-        margin-left: 8px;
-        cursor: pointer;
-        .ele-file__inner {
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-      .ele-file__delete {
-        margin-left: 8px;
-        .ele-file__delete--icon {
-          margin-left: 8px;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
+<template>
+  <div class="ele-upload__wrapper">
+    <FileUpload
+      class="ele-upload__inner"
+      v-show="isShowUploadContainer"
+      v-model="files"
+      :ref="uploadRef"
+      :drop="drop"
+      :chunk-enabled="chunkEnabled"
+      :chunk="chunkConfig"
+      :accept="accept"
+      :size="fileSizeLimit"
+      :post-action="postAction"
+      :multiple="multiple"
+      :headers="headers"
+      :maximum="getMaximum"
+      :data="uploadParams"
+      @input-file="onWatchInputFiles"
+      @input="onWatchFiles"
+      style="width: 100%;">
+      <section class="ele-upload__area">
+        <div class="ele-upload__area--icon">
+          <template v-if="iconIsZhWrod">
+            {{ icon }}
+          </template>
+          <template v-else>
+            <ele-icon :type="icon"></ele-icon>
+          </template>
+        </div>
+        <div class="ele-upload__area--text">
+          <div class="ele-upload__message" v-if="message" v-html="message"></div>
+          <div class="ele-upload__message" v-else>单击或拖动文件到该区域以上传</div>
+          <div class="ele-upload__ext" v-if="ext" v-html="ext"></div>
+          <div class="ele-upload__ext" v-else>文件小于{{ size }}M</div>
+        </div>
+      </section>
+    </FileUpload>
+    <section class="ele-files__wrapper">
+      <!-- 显示正在上传的文件（有进度条） -->
+      <div class="ele-file__item" v-for="(file, idx) in uploadingFiles" :key="`uploading-${idx}`">
+        <div class="ele-file__suffix--icon">
+          <ele-icon :type="fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'"></ele-icon>
+        </div>
+        <div class="ele-file__name">
+          <div class="ele-file__inner">{{ file.name }}</div>
+          <div v-if="file.progress !== undefined" class="ele-uplpad__progress">
+            <a-progress :strokeWidth="2" :percent="Number(file.progress)" size="small" />
+          </div>
+        </div>
+        <div class="ele-file__delete" v-if="file.success || file.error">
+          <span class="ele-file__size">{{ (file.size / byteConversion).toFixed(2) }}M</span>
+          <span class="ele-file__delete--icon" @click="handleClickDelete(file)">
+            <ele-icon type="delete"></ele-icon>
+          </span>
+        </div>
+      </div>
+      
+      <!-- 显示已上传完成的文件 -->
+      <div class="ele-file__item" v-for="(file, idx) in completedFiles" :key="`completed-${idx}`">
+        <div class="ele-file__suffix--icon">
+          <ele-icon :type="fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'"></ele-icon>
+        </div>
+        <div class="ele-file__name">
+          <div class="ele-file__inner" @click="handleClickDownload(file)">{{ file.name }}</div>
+        </div>
+        <div class="ele-file__delete">
+          <span class="ele-file__size">{{ (file.size / byteConversion).toFixed(2) }}M</span>
+          <span class="ele-file__delete--icon" @click="handleClickDelete(file)">
+            <ele-icon type="delete"></ele-icon>
+          </span>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import FileUpload from 'vue-upload-component'
+import { v4 as uuidv4 } from 'uuid'
+import { route, net, type } from '@idooel/shared'
+
+// 常量定义
+const CONSTANTS = {
+  DEFAULT_URL: 'zuul/api-file/workbench/file',
+  DEFAULT_ICON: '上传',
+  DEFAULT_SIZE: 100,
+  DEFAULT_MESSAGE: '单击或拖动文件到该区域以上传',
+  DEFAULT_MAXIMUM: 20,
+  BYTE_CONVERSION: 1024 * 1024,
+  CHUNK_MIN_SIZE: 3 * 1024 * 1024,
+  CHUNK_MAX_ACTIVE: 3,
+  CHUNK_MAX_RETRIES: 5,
+  SAVE_INTERVAL: 2000
+}
+
+// 文件后缀图标映射
+const FILE_SUFFIX_ICONS = {
+  'doc': { name: 'icon-doc' },
+  'html': { name: 'icon-html' },
+  'mp4': { name: 'icon-mp' },
+  'pdf': { name: 'icon-pdf' },
+  'ppt': { name: 'icon-ppt' },
+  'psd': { name: 'icon-psd' },
+  'rtf': { name: 'icon-rtf' },
+  'txt': { name: 'icon-txt' },
+  'vis': { name: 'icon-vis' },
+  'xls': { name: 'icon-xls' },
+  'xml': { name: 'icon-xml' },
+  'zip': { name: 'icon-zip' },
+  'jpg': { name: 'icon-img' },
+  'mp3': { name: 'icon-mp1' }
+}
+
+export default {
+  name: 'ele-upload',
+  components: {
+    FileUpload
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    url: {
+      type: String,
+      default: CONSTANTS.DEFAULT_URL
+    },
+    icon: {
+      type: String,
+      default: CONSTANTS.DEFAULT_ICON
+    },
+    size: {
+      type: Number,
+      default: CONSTANTS.DEFAULT_SIZE
+    },
+    message: {
+      type: String,
+      default: CONSTANTS.DEFAULT_MESSAGE
+    },
+    ext: {
+      type: String
+    },
+    extensions: {
+      type: String
+    },
+    accept: {
+      type: String
+    },
+    maximum: {
+      type: Number,
+      default: CONSTANTS.DEFAULT_MAXIMUM
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    drop: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: [String, Array]
+    },
+    querys: {
+      type: Object,
+      default: () => ({
+        _csrf: localStorage.getItem('token')
+      })
+    },
+    headers: {
+      type: Object,
+      default: () => ({
+        'X-XSRF-TOKEN': localStorage.getItem('token')
+      })
+    },
+    byteConversion: {
+      type: Number,
+      default: CONSTANTS.BYTE_CONVERSION
+    },
+    chunkEnabled: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      // 文件状态管理
+      files: [],              // vue-upload-component 管理的文件
+      buildedFiles: [],       // 已构建完成的文件列表
+      
+      // 上传状态管理
+      saveToServerAsyncPageTimer: null,
+      uploadRefId: null,
+      // 多选且外部无值时，预先生成 groupId，确保首次上传参数完整
+      groupId: (this.multiple && !this.value) ? uuidv4() : null,
+      //TODO
+      iconIsZhWrod: false
+    }
+  },
+  created() {
+    // 多文件模式下，如果没有外部 groupId，则生成一个
+    if (this.multiple && !this.value) {
+      this.groupId = uuidv4()
+      console.log('Created with new groupId:', this.groupId)
+    }
+  },
+  watch: {
+    value: {
+      async handler(value) {
+        if (type.isEmpty(value)) {
+          this.resetFiles()
+        } else if (this.multiple) {
+          this.handleMultipleFileValue(value)
+        } else {
+          this.handleSingleFileValue()
+        }
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    // ==================== 基础配置 ====================
+    prefixPath() {
+      return window.prefixPath
+    },
+    
+    uploadRef() {
+      if (!this.uploadRefId) {
+        this.uploadRefId = `uploadRef_${uuidv4()}`
+      }
+      return this.uploadRefId
+    },
+    
+    iconIsZhWord() {
+      return type.isZhWord(this.icon)
+    },
+    
+    // ==================== 上传配置 ====================
+    uploadParams() {
+      return this.multiple ? { groupID: this.groupId } : {}
+    },
+    
+    fileSizeLimit() {
+      return this.size * this.byteConversion
+    },
+    
+    postAction() {
+      const queryString = route.toQueryString(this.querys)
+      return `${this.prefixPath}${this.url}?${queryString}`
+    },
+    
+    chunkConfig() {
+      return {
+        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,
+        headers: { ...this.headers },
+        minSize: CONSTANTS.CHUNK_MIN_SIZE,
+        maxActive: CONSTANTS.CHUNK_MAX_ACTIVE,
+        maxRetries: CONSTANTS.CHUNK_MAX_RETRIES,
+        startBody: { override: true, path: '/cw' },
+        uploadBody: { override: true, path: '/cw' },
+        finishBody: { override: true, path: '/cw' }
+      }
+    },
+    
+    getMaximum() {
+      return this.multiple ? this.maximum : 1
+    },
+    
+    // ==================== 文件状态 ====================
+    uploadingFiles() {
+      // 筛选条件：有进度信息 且 (未成功 或 成功但还没有fileID的切片上传文件)
+      // 这样可以确保切片上传完成但异步保存未完成的文件继续显示，避免闪烁
+      return this.files.filter(file => {
+        if (file.progress === undefined) return false
+        if (!file.success) return true
+        
+        // 检查文件是否已经有 fileID（可能在 file.fileID 或 file.response.data.fileID）
+        const hasFileID = file.fileID || (file.response && file.response.data && file.response.data.fileID)
+        
+        // 切片上传成功但还没有完成异步保存（没有fileID）的文件继续显示
+        // 普通上传成功且已有 fileID 的文件不显示（会在 completedFiles 中显示）
+        return file.success && !hasFileID
+      })
+    },
+    
+    completedFiles() {
+      return this.buildedFiles.filter(file => file.fileID)
+    },
+    
+    totalFiles() {
+      return this.uploadingFiles.length + this.completedFiles.length
+    },
+    
+    isFileUploadSuccessed() {
+      const currentUploadingFiles = this.files.filter(file => file.response !== undefined)
+      if (currentUploadingFiles.length === 0) {
+        return this.buildedFiles.length > 0
+      }
+      return currentUploadingFiles.every(file => file.success)
+    },
+    
+    isShowUploadContainer() {
+      const maxFiles = this.multiple ? this.maximum : 1
+      return this.totalFiles < maxFiles
+    },
+    
+    // ==================== 文件信息 ====================
+    fileSuffixIcon() {
+      return FILE_SUFFIX_ICONS
+    },
+    
+    fileIds() {
+      if (this.multiple) {
+        return this.groupId
+      } else {
+        const fileIds = this.buildedFiles.map(file => file.fileID)
+        return fileIds[0]
+      }
+    },
+    
+    fileResponseData() {
+      return this.multiple ? this.buildedFiles : this.buildedFiles[0]
+    }
+  },
+  methods: {
+    // ==================== 文件管理 ====================
+    
+    /**
+     * 从多个数组中移除文件
+     */
+    removeFromArrays(file, arrays, key = 'fileID') {
+      return arrays.map(arr => 
+        arr.filter(item => {
+          // 如果 fileID 都存在且相等，则移除
+          if (item[key] && file[key] && item[key] === file[key]) {
+            return false
+          }
+          // 如果 id 都存在且相等，则移除
+          if (item.id && file.id && item.id === file.id) {
+            return false
+          }
+          // 如果文件名相同，也考虑移除（额外的安全检查）
+          if (item.name && file.name && item.name === file.name && item[key] === file[key]) {
+            return false
+          }
+          // 否则保留
+          return true
+        })
+      )
+    },
+    
+    /**
+     * 检查文件是否为新文件
+     */
+    isNewFile(newFile, existingFiles, key = 'fileID') {
+      return newFile[key] && !existingFiles.some(existing => existing[key] === newFile[key])
+    },
+    
+    /**
+     * 合并文件数据
+     */
+    mergeFileData(uploadFile) {
+      return {
+        ...uploadFile.response.data,
+        ...uploadFile
+      }
+    },
+    
+    /**
+     * 初始化文件列表
+     */
+    async initializeFiles() {
+      if (!this.value) return
+      
+      if (this.multiple) {
+        await this.fetchFilesWithGroupId()
+      } else {
+        await this.fetchFileWithFileId()
+      }
+    },
+    
+    /**
+     * 获取多文件组
+     */
+    async fetchFilesWithGroupId() {
+      try {
+        const response = await net.get(`/api-file/workbench/file/group/${this.value}`)
+        const data = response.data || []
+        
+        // 只有在没有现有文件时才设置初始文件列表
+        if (this.buildedFiles.length === 0) {
+          this.buildedFiles = data
+          console.log('Initial files loaded:', this.buildedFiles.length)
+        } else {
+          console.log('Keep existing files, skip initial load')
+        }
+      } catch (error) {
+        console.log('fetchFilesWithGroupId error:', error)
+        console.log('Keep current files, do not clear due to API error')
+      }
+    },
+    
+    /**
+     * 获取单文件
+     */
+    async fetchFileWithFileId() {
+      try {
+        const response = await net.get(`/api-file/file/${this.value}`)
+        const data = response.data
+        this.buildedFiles = [data]
+        this.files = [data]
+      } catch (error) {
+        console.log('fetchFileWithFileId error:', error)
+      }
+    },
+
+    /**
+     * 调用服务器删除文件 API
+     */
+    async deleteFiles (ids) {
+      if (!ids) {
+        console.warn('No fileID provided for deletion')
+        return
+      }
+      
+      if (type.isArray(ids)) {
+        ids = ids.join(',')
+      }
+      
+      try {
+        await net.remove(`/api-file/workbench/file?ids=${ids}`)
+        console.log('File deleted from server:', ids)
+      } catch (error) {
+        console.error('Failed to delete file from server:', error)
+        throw error // 重新抛出错误，让调用方处理
+      }
+    },
+    
+    /**
+     * 处理文件删除
+     */
+    async handleClickDelete(file) {
+      const { fileID, name } = file
+      console.log('Deleting file:', { name, fileID })
+      
+      // 先从上传组件中移除文件
+      if (this.$refs[this.uploadRef]) {
+        this.$refs[this.uploadRef].remove(file)
+      }
+      
+      // 从所有数组中移除文件
+      [this.files, this.buildedFiles] = this.removeFromArrays(file, [this.files, this.buildedFiles])
+      
+      console.log('After deletion - files:', this.files.length, 'buildedFiles:', this.buildedFiles.length)
+      
+      // 如果有 fileID，调用服务器删除 API
+      if (fileID) {
+        try {
+          await this.deleteFiles(fileID)
+        } catch (error) {
+          console.error('Failed to delete file from server:', error)
+          // 可以选择提示用户或回滚操作
+          // 这里仅记录错误，不影响前端显示
+        }
+      }
+      
+      // 多文件模式下，如果删除最后一个文件，重置 groupId
+      if (this.multiple && this.buildedFiles.length === 0) {
+        this.groupId = null
+        console.log('Reset groupId after deleting last file')
+      }
+      
+      // 触发 change 事件
+      this.$emit('change', this.fileIds)
+    },
+    
+    /**
+     * 处理文件下载
+     */
+    handleClickDownload(file) {
+      const { fileID: fileId } = file
+      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)
+    },
+    // ==================== 上传处理 ====================
+    
+    /**
+     * 处理文件上传状态变化
+     */
+    onWatchFiles(files) {
+      console.log('onWatchFiles called with files:', files.length)
+      console.log('Current buildedFiles:', this.buildedFiles.length)
+      
+      // 更新文件状态
+      this.files = files
+      
+      // 处理已上传成功的文件
+      this.processUploadedFiles(files)
+      
+      // 检查上传是否完成
+      if (this.isFileUploadSuccessed) {
+        this.$emit('change', this.fileIds)
+        this.$emit('on-success', this.fileResponseData)
+      }
+    },
+    
+    /**
+     * 处理已上传成功的文件
+     */
+    processUploadedFiles(files) {
+      // 处理所有有响应的文件（包括正在上传和已完成的）
+      const uploadedFiles = files.filter(file => file.response)
+      const newBuildedFiles = uploadedFiles.map(file => this.mergeFileData(file))
+      
+      if (this.multiple) {
+        this.processMultipleFiles(newBuildedFiles)
+      } else {
+        // 单文件模式：只保留最新的文件
+        this.buildedFiles = newBuildedFiles
+        
+        // 从 files 数组中移除已完成的文件（普通上传），避免重复显示
+        if (newBuildedFiles.length > 0 && newBuildedFiles[0].fileID) {
+          this.$nextTick(() => {
+            this.files = this.files.filter(file => {
+              const fileID = file.fileID || (file.response && file.response.data && file.response.data.fileID)
+              return fileID !== newBuildedFiles[0].fileID
+            })
+            console.log('Removed completed file from upload list (single mode)')
+          })
+        }
+      }
+      
+      this.logFileStatus()
+    },
+    
+    /**
+     * 处理多文件模式
+     */
+    processMultipleFiles(newBuildedFiles) {
+      // 获取已存在的文件ID集合
+      const existingFileIds = new Set(this.buildedFiles.map(f => f.fileID).filter(id => id))
+      
+      // 过滤出真正的新文件
+      const trulyNewFiles = newBuildedFiles.filter(newFile => 
+        this.isNewFile(newFile, this.buildedFiles)
+      )
+      
+      console.log('Existing fileIDs:', Array.from(existingFileIds))
+      console.log('New uploaded files:', newBuildedFiles.map(f => ({ name: f.name, fileID: f.fileID })))
+      console.log('Truly new files:', trulyNewFiles.map(f => ({ name: f.name, fileID: f.fileID })))
+      
+      // 将新文件追加到现有文件列表
+      if (trulyNewFiles.length > 0) {
+        this.buildedFiles = [...this.buildedFiles, ...trulyNewFiles]
+        console.log('Added new files, total buildedFiles:', this.buildedFiles.length)
+        
+        // 从 files 数组中移除已完成的文件（普通上传），避免重复显示
+        this.$nextTick(() => {
+          const completedFileIDs = new Set(trulyNewFiles.map(f => f.fileID))
+          this.files = this.files.filter(file => {
+            const fileID = file.fileID || (file.response && file.response.data && file.response.data.fileID)
+            return !completedFileIDs.has(fileID)
+          })
+          console.log('Removed completed files from upload list')
+        })
+      }
+      
+      // 更新现有文件的状态（包括新添加的文件）
+      this.updateExistingFiles(newBuildedFiles)
+    },
+    
+    /**
+     * 更新现有文件状态
+     */
+    updateExistingFiles(newBuildedFiles) {
+      this.buildedFiles = this.buildedFiles.map(existingFile => {
+        const updatedFile = newBuildedFiles.find(newFile => newFile.fileID === existingFile.fileID)
+        return updatedFile ? { ...existingFile, ...updatedFile } : existingFile
+      })
+    },
+    
+    /**
+     * 记录文件状态日志
+     */
+    logFileStatus() {
+      console.log('Final buildedFiles:', this.buildedFiles.length)
+      console.log('buildedFiles details:', this.buildedFiles.map(f => ({ name: f.name, fileID: f.fileID, success: f.success })))
+      console.log('Uploading files:', this.uploadingFiles.length)
+      console.log('Completed files:', this.completedFiles.length)
+    },
+    // ==================== 异步处理 ====================
+    
+    /**
+     * 异步保存文件到服务器
+     * @param {FormData} payloads - 上传参数
+     * @param {Object} uploadingFile - 正在上传的文件对象（可选）
+     */
+    async saveToServerAsyncPage(payloads = {}, uploadingFile = null) {
+      try {
+        const response = await net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { 
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+          }
+        })
+        
+        const { data } = response
+        if (data !== 'saveToServerAsyncPage') {
+          clearInterval(this.saveToServerAsyncPageTimer)
+          console.log('Chunk upload async save completed, file data:', data)
+          
+          const { fileID, groupID, name } = data
+          
+          // 根据上传模式处理文件信息
+          if (this.multiple) {
+            // 多文件模式：更新 groupID 并追加文件到列表
+            if (groupID) {
+              this.groupId = groupID
+              console.log('Updated groupId from server:', groupID)
+            }
+            
+            // 检查文件是否已存在，避免重复添加
+            const fileExists = this.buildedFiles.some(file => file.fileID === fileID)
+            if (!fileExists && fileID) {
+              // 将服务器返回的完整文件信息追加到文件列表
+              // 添加必要的显示属性
+              const fileData = {
+                ...data,
+                success: true  // 标记为上传成功
+              }
+              
+              // 先添加到已完成列表
+              this.buildedFiles.push(fileData)
+              console.log('File added to list:', name, 'Total files:', this.buildedFiles.length)
+              
+              // 使用 nextTick 确保视图更新后再移除上传列表中的文件，避免闪烁
+              this.$nextTick(() => {
+                // 从上传列表中精确移除对应的文件
+                if (uploadingFile) {
+                  // 如果有文件对象引用，直接移除该文件
+                  this.files = this.files.filter(file => file.id !== uploadingFile.id)
+                  console.log('Removed uploading file by id:', uploadingFile.id)
+                } else {
+                  // 否则根据文件名移除
+                  this.files = this.files.filter(file => file.name !== name)
+                  console.log('Removed uploading file by name:', name)
+                }
+              })
+              
+              // 触发 change 事件通知父组件
+              this.$emit('change', this.fileIds)
+              this.$emit('on-success', this.fileResponseData)
+            } else {
+              console.log('File already exists or invalid fileID, skip adding')
+            }
+          } else {
+            // 单文件模式：替换文件列表
+            if (fileID) {
+              const fileData = {
+                ...data,
+                success: true  // 标记为上传成功
+              }
+              this.buildedFiles = [fileData]
+              this.files = []  // 清空上传列表
+              console.log('Single file updated:', name)
+              
+              // 触发 change 事件通知父组件更新 value
+              this.$emit('change', fileID)
+              this.$emit('on-success', data)
+            }
+          }
+        }
+      } catch (error) {
+        console.error('saveToServerAsyncPage error:', error)
+        clearInterval(this.saveToServerAsyncPageTimer)
+      }
+    },
+    
+    // ==================== 文件验证 ====================
+    
+    /**
+     * 验证文件类型
+     */
+    validateFileType(file) {
+      if (!file || !file.name) {
+        console.log('文件或文件名不存在')
+        return false
+      }
+      
+      const fileExt = this.getFileExtension(file.name)
+      console.log('文件扩展名:', fileExt)
+      
+      if (this.extensions) {
+        const allowedExts = this.getAllowedExtensions()
+        console.log('允许的扩展名:', allowedExts)
+        
+        if (!allowedExts.includes(fileExt)) {
+          console.log('扩展名不在允许列表中')
+          this.$message.error(`不支持的文件类型 "${fileExt}"，请上传 ${this.extensions} 格式的文件`)
+          return false
+        }
+      }
+      
+      console.log('文件类型验证通过')
+      return true
+    },
+    
+    /**
+     * 获取文件扩展名
+     */
+    getFileExtension(fileName) {
+      return fileName.toLowerCase().substring(fileName.lastIndexOf('.'))
+    },
+    
+    /**
+     * 获取允许的扩展名列表
+     */
+    getAllowedExtensions() {
+      return this.extensions.toLowerCase()
+        .split(',')
+        .map(ext => ext.trim().startsWith('.') ? ext.trim() : `.${ext.trim()}`)
+    },
+    // ==================== 事件处理 ====================
+    
+    /**
+     * 处理文件输入事件
+     */
+    onWatchInputFiles(newFile, oldFile) {
+      if (newFile && !oldFile) {
+        this.handleFileAdd(newFile)
+      } else if (newFile && oldFile) {
+        this.handleFileUpdate(newFile)
+      } else if (!newFile && oldFile) {
+        this.handleFileDelete()
+      }
+      
+      // 激活上传组件
+      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)
+      
+      // 生成或使用 groupId
+      this.ensureGroupId()
+      
+      // 验证文件类型
+      if (!this.validateFileType(newFile)) {
+        this.removeInvalidFile(newFile)
+        return
+      }
+      console.log('文件类型验证通过，继续上传')
+    },
+    
+    /**
+     * 处理文件更新
+     */
+    handleFileUpdate(newFile) {
+      console.log('update', newFile)
+      const { success, active, chunk, response } = newFile
+      
+      if (chunk && success && !active) {
+        console.log('chunk end')
+        this.handleChunkComplete(response, newFile)
+      }
+    },
+    
+    /**
+     * 处理文件删除
+     */
+    handleFileDelete() {
+      console.log('delete')
+    },
+    
+    /**
+     * 确保 groupId 存在
+     */
+    ensureGroupId() {
+      console.log('onWatchInputFiles - multiple:', this.multiple, 'current groupId:', this.groupId)
+      
+      if (this.multiple && !this.groupId) {
+        this.groupId = uuidv4()
+        console.log('Generated new groupId:', this.groupId)
+      } else if (this.multiple && this.groupId) {
+        console.log('Using existing groupId:', this.groupId)
+      }
+    },
+    
+    /**
+     * 移除无效文件
+     */
+    removeInvalidFile(file) {
+      console.log('文件类型验证失败，尝试移除文件')
+      console.log('uploadRef:', this.uploadRef)
+      console.log('$refs:', this.$refs)
+      
+      if (this.$refs[this.uploadRef]) {
+        this.$refs[this.uploadRef].remove(file)
+      } else {
+        console.error('无法找到 uploadRef 引用')
+      }
+    },
+    
+    /**
+     * 处理分片上传完成
+     * @param {Object} response - 上传响应
+     * @param {Object} uploadingFile - 正在上传的文件对象（可选）
+     */
+    handleChunkComplete(response, uploadingFile = null) {
+      const { data: { file, type } } = response
+      const payloads = {
+        filePath: file.match(/\/cw(.*)/) ? file.match(/\/cw(.*)/)[0] : void 0,
+        asyncID: uuidv4(),
+        groupID: this.groupId,
+        isDeleteOrigin: false,
+        toImage: type === 'pdf',
+        unzip: type === 'zip',
+        _csrf: localStorage.getItem('token')
+      }
+
+      const formData = new FormData()
+
+      Object.keys(payloads).forEach(key => {
+        formData.append(key, payloads[key])
+      })
+      
+      // 将上传文件对象传递给异步保存方法
+      this.saveToServerAsyncPageTimer = setInterval(() => {
+        this.saveToServerAsyncPage(formData, uploadingFile)
+      }, CONSTANTS.SAVE_INTERVAL)
+    },
+    
+    /**
+     * 激活上传组件
+     */
+    activateUploadComponent(newFile, oldFile) {
+      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
+        if (!this.$refs[this.uploadRef].active) {
+          this.$refs[this.uploadRef].active = true
+        }
+      }
+    },
+    
+    // ==================== 值变化处理 ====================
+    
+    /**
+     * 重置文件状态
+     */
+    resetFiles() {
+      this.files = []
+      this.buildedFiles = []
+      // 多选模式下保留或生成 groupId，避免首次上传为空
+      if (this.multiple) {
+        if (!this.groupId) {
+          this.groupId = uuidv4()
+          console.log('Generated groupId in resetFiles:', this.groupId)
+        } else {
+          console.log('Preserve existing groupId in resetFiles:', this.groupId)
+        }
+      } else {
+        this.groupId = null
+        console.log('Reset groupId to null (single mode)')
+      }
+    },
+    
+    /**
+     * 处理多文件模式的值变化
+     */
+    async handleMultipleFileValue(value) {
+      // multiple - value 就是 groupId
+      // 只有当 groupId 发生变化时才重新获取文件列表（初始化回显）
+      if (this.groupId !== value) {
+        this.groupId = value
+        console.log('Set groupId from external value:', this.groupId)
+        await this.fetchFilesWithGroupId()
+      } else {
+        console.log('GroupId unchanged, skip fetchFilesWithGroupId')
+      }
+    },
+    
+    /**
+     * 处理单文件模式的值变化
+     */
+    async handleSingleFileValue() {
+      await this.fetchFileWithFileId()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .ele-upload__inner {
+  opacity: 1 !important;
+  cursor: pointer;
+  border: 1px dashed var(--idooel-form-title-border-color);
+  background: var(--idooel-form-upload-bg-color) !important;
+  &:hover {
+    border-color: var(--idooel-form-upload-border-hover-color);
+  }
+  border-radius: var(--idooel-form-border-radius);
+}
+.ele-upload__wrapper {
+  width: 100%;
+  .ele-upload__area {
+    padding: 16px;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    flex-direction: row;
+    .ele-upload__area--icon {
+      color: var(--idooel-primary-color);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 16x;
+      .anticon-cloud-upload {
+        font-size: 48px;
+        color: var(--idooel-primary-color);
+      }
+      .anticon {
+        font-size: 48px;
+        color: var(--idooel-primary-color);
+      }
+    }
+    .ele-upload__area--text {
+      margin-left: 16px;
+      .ele-upload__message {
+        font-size: 16px;
+        color: var(--idoole-black-088);
+        text-align: left;
+      }
+      .ele-upload__ext {
+        text-align: left;
+        font-size: 14px;
+        color: var(--idoole-black-06);
+      }
+    }
+  }
+  .ele-files__wrapper {
+    .ele-file__item {
+      width: 100%;
+      margin-top: 8px;
+      padding: 8px 12px;
+      border-radius: var(--idooel-form-border-radius);
+      background: var(--idooel-form-upload-bg-color);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .ele-file__suffix--icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+      }
+      .ele-file__name {
+        flex: 1;
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 14px;
+        margin-left: 8px;
+        cursor: pointer;
+        .ele-file__inner {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+      .ele-file__delete {
+        margin-left: 8px;
+        .ele-file__delete--icon {
+          margin-left: 8px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
 </style>