addcss

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

@@ -364,12 +364,52 @@
         <el-form-item label="排序">
           <el-input-number v-model="form.sort_order" :min="0" />
         </el-form-item>
+        <!-- 编辑时显示当前文件状态 -->
+        <el-form-item label="当前文件状态" v-if="isEdit && currentComponent">
+          <div class="file-status-display">
+            <el-tag v-if="currentComponent.is_extracted" type="success" size="small">已解压</el-tag>
+            <el-tag v-else-if="currentComponent.file_path" type="warning" size="small">已上传</el-tag>
+            <el-tag v-else type="info" size="small">未上传</el-tag>
+            <div v-if="currentComponent.file_path" class="file-path">
+              <span class="file-label">文件路径:</span>
+              <span class="file-value">{{ currentComponent.file_path }}</span>
+            </div>
+            <div v-if="currentComponent.is_extracted && currentComponent.folder_path" class="folder-path">
+              <span class="file-label">文件夹路径:</span>
+              <span class="file-value">{{ currentComponent.folder_path }}</span>
+            </div>
+          </div>
+        </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="editUploadRef"
+            :auto-upload="false"
+            :multiple="true"
+            :on-change="handleEditFileChange"
+            :on-remove="handleEditFileRemove"
+            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">
+                可以上传多个文件替换当前文件。ZIP文件可以自动解压，其他文件类型仅保存。
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
+        
         <el-form-item label="组件文件" v-if="!isEdit">
           <el-upload
             ref="createUploadRef"
@@ -640,7 +680,7 @@ const handleEdit = (row) => {
 
 const handleDelete = (row) => {
   ElMessageBox.confirm(
-    `确定要删除UI组件"${row.component_name}"吗？`,
+    `确定要删除UI组件"${row.component_name}"吗？这将同时删除组件记录和所有相关文件。`,
     '删除确认',
     {
       confirmButtonText: '确定',
@@ -649,12 +689,24 @@ const handleDelete = (row) => {
     }
   ).then(async () => {
     try {
+      // 记录删除操作的详细信息
+      console.log('正在删除UI组件:', {
+        id: row.id,
+        name: row.component_name,
+        code: row.component_code,
+        file_path: row.file_path,
+        is_extracted: row.is_extracted,
+        folder_path: row.folder_path
+      })
+      
       await uiComponentApi.deleteUIComponent(row.id)
       ElMessage.success('删除成功')
       fetchComponentList()
     } catch (error) {
-      ElMessage.error('删除失败')
       console.error('删除UI组件失败:', error)
+      // 显示更详细的错误信息
+      const errorMsg = error.response?.data?.message || error.message || '删除失败'
+      ElMessage.error(`删除失败: ${errorMsg}`)
     }
   }).catch(() => {
     // 用户取消删除
@@ -852,7 +904,7 @@ const handleViewFolder = async (row) => {
 
 const handleDeleteFolder = (row) => {
   ElMessageBox.confirm(
-    `确定要删除UI组件"${row.component_name}"的文件夹吗？`,
+    `确定要删除UI组件"${row.component_name}"的文件夹吗？这将只删除文件夹，保留组件记录。`,
     '删除确认',
     {
       confirmButtonText: '确定',
@@ -861,12 +913,24 @@ const handleDeleteFolder = (row) => {
     }
   ).then(async () => {
     try {
+      // 记录删除操作的详细信息
+      console.log('正在删除UI组件文件夹:', {
+        id: row.id,
+        name: row.component_name,
+        code: row.component_code,
+        file_path: row.file_path,
+        is_extracted: row.is_extracted,
+        folder_path: row.folder_path
+      })
+      
       await uiComponentApi.deleteUIComponentFolder(row.id)
       ElMessage.success('文件夹删除成功')
       fetchComponentList()
     } catch (error) {
-      ElMessage.error('文件夹删除失败')
       console.error('删除UI组件文件夹失败:', error)
+      // 显示更详细的错误信息
+      const errorMsg = error.response?.data?.message || error.message || '文件夹删除失败'
+      ElMessage.error(`文件夹删除失败: ${errorMsg}`)
     }
   }).catch(() => {
     // 用户取消删除