add

src/pages/admin/ui-components/index.vue

@@ -73,7 +73,7 @@
               上传文件
             </el-button>
             <el-button 
-              v-if="row.file_path && !row.is_extracted" 
+              v-if="row.file_path && !row.is_extracted && isZipFileFromPath(row.file_path)" 
               size="small" 
               type="warning" 
               @click="handleUploadExtract(row)"
@@ -162,6 +162,36 @@
         <el-form-item label="排序">
           <el-input-number v-model="form.sort_order" :min="0" />
         </el-form-item>
+        <el-form-item label="上传模式" v-if="!isEdit">
+          <el-radio-group v-model="uploadMode">
+            <el-radio label="files">文件上传</el-radio>
+            <el-radio label="folder">文件夹上传</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="组件文件" v-if="!isEdit">
+          <el-upload
+            ref="createUploadRef"
+            :auto-upload="false"
+            :multiple="uploadMode === 'files'"
+            :webkitdirectory="uploadMode === 'folder'"
+            :on-change="handleCreateFileChange"
+            :on-remove="handleCreateFileRemove"
+            drag
+          >
+            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text">
+              将文件拖到此处，或<em>点击上传</em>
+            </div>
+            <template #tip>
+              <div class="el-upload__tip" v-if="uploadMode === 'files'">
+                可以上传多个文件，每个文件不超过100MB。ZIP文件可以自动解压，其他文件类型仅保存。
+              </div>
+              <div class="el-upload__tip" v-else>
+                可以上传整个文件夹，保持原有目录结构。ZIP文件可以自动解压，每个文件不超过100MB。
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
@@ -183,7 +213,6 @@
         ref="uploadRef"
         :auto-upload="false"
         :limit="1"
-        accept=".zip"
         :on-change="handleFileChange"
         :on-remove="handleFileRemove"
         drag
@@ -194,7 +223,7 @@
         </div>
         <template #tip>
           <div class="el-upload__tip">
-            只能上传zip文件，且不超过100MB
+           文件夹使用压缩为zip格式，可以批量上传文件。
           </div>
         </template>
       </el-upload>
@@ -263,8 +292,12 @@ const uploading = ref(false)
 const isEdit = ref(false)
 const currentComponent = ref(null)
 const selectedFile = ref(null)
+const selectedCreateFile = ref(null)
+const selectedCreateFiles = ref([])
+const uploadMode = ref('files') // 'files' 或 'folder'
 const formRef = ref(null)
 const uploadRef = ref(null)
+const createUploadRef = ref(null)
 const folderTree = ref([])
 
 // 筛选表单
@@ -411,8 +444,32 @@ const handleSubmit = async () => {
       await uiComponentApi.updateUIComponent(form.id, form)
       ElMessage.success('更新成功')
     } else {
-      await uiComponentApi.createUIComponent(form)
-      ElMessage.success('创建成功')
+      // 检查是否上传了文件
+      if (selectedCreateFiles.value && selectedCreateFiles.value.length > 0) {
+        // 使用合并接口，同时创建组件和上传文件
+        const formData = new FormData()
+        formData.append('component_code', form.component_code)
+        formData.append('component_name', form.component_name)
+        formData.append('description', form.description || '')
+        formData.append('version', form.version || '')
+        formData.append('is_active', form.is_active ? 'true' : 'false')
+        formData.append('sort_order', form.sort_order.toString())
+        
+        // 添加所有文件
+        selectedCreateFiles.value.forEach(file => {
+          formData.append('files', file.raw)
+          if (uploadMode.value === 'folder') {
+            formData.append('paths', file.path)
+          }
+        })
+        
+        await uiComponentApi.createUIComponentWithFile(formData)
+        ElMessage.success('创建并上传成功')
+      } else {
+        // 只创建组件，不上传文件
+        await uiComponentApi.createUIComponent(form)
+        ElMessage.success('创建成功')
+      }
     }
     
     dialogVisible.value = false
@@ -441,9 +498,15 @@ const resetForm = () => {
     is_active: true,
     sort_order: 0
   })
+  selectedCreateFile.value = null
+  selectedCreateFiles.value = []
+  uploadMode.value = 'files' // 重置为文件上传模式
   if (formRef.value) {
     formRef.value.resetFields()
   }
+  if (createUploadRef.value) {
+    createUploadRef.value.clearFiles()
+  }
 }
 
 const handleUpload = (row) => {
@@ -472,6 +535,20 @@ const handleFileRemove = () => {
   selectedFile.value = null
 }
 
+const handleCreateFileChange = (file, fileList) => {
+  selectedCreateFiles.value = fileList.map(f => ({
+    raw: f.raw,
+    name: f.name,
+    path: uploadMode.value === 'folder' ? (f.raw.webkitRelativePath || f.name) : f.name
+  }))
+  selectedCreateFile.value = fileList.length > 0 ? fileList[0].raw : null // 保留兼容性
+}
+
+const handleCreateFileRemove = () => {
+  selectedCreateFiles.value = []
+  selectedCreateFile.value = null // 保留兼容性
+}
+
 const handleFileSubmit = async () => {
   if (!selectedFile.value) {
     ElMessage.warning('请选择要上传的文件')
@@ -512,7 +589,17 @@ const handleDownload = async (row) => {
     const url = window.URL.createObjectURL(new Blob([response.data]))
     const link = document.createElement('a')
     link.href = url
-    link.setAttribute('download', `${row.component_name}.zip`)
+    
+    // 根据文件类型确定下载文件名
+    let fileName = row.component_name
+    if (row.file_path) {
+      const fileExtension = row.file_path.substring(row.file_path.lastIndexOf('.'))
+      fileName += fileExtension
+    } else {
+      fileName += '.zip' // 默认扩展名
+    }
+    
+    link.setAttribute('download', fileName)
     document.body.appendChild(link)
     link.click()
     document.body.removeChild(link)
@@ -620,6 +707,18 @@ const formatDateTime = (dateTime) => {
   return date.toLocaleString('zh-CN')
 }
 
+// 判断文件是否为ZIP类型
+const isZipFile = (file) => {
+  if (!file) return false
+  return file.toLowerCase().endsWith('.zip')
+}
+
+// 判断文件路径是否为ZIP类型
+const isZipFileFromPath = (path) => {
+  if (!path) return false
+  return path.toLowerCase().endsWith('.zip')
+}
+
 // 生命周期
 onMounted(() => {
   fetchComponentList()