feat(system): 优化文件和图片管理页面

- 改进文件管理界面布局和交互逻辑
- 优化图片管理功能和用户体验
- 统一页面组件样式和规范
- 完善数据处理和错误处理机制

src/views/system/file/index.vue

@@ -196,6 +196,7 @@
       height="auto"
       confirm-text="确定"
       cancel-text="取消"
+      :confirm-disabled="isConfirmDisabled"
       @coi-confirm="handleUploadConfirm"
       @coi-cancel="handleUploadCancel"
     >
@@ -276,7 +277,7 @@
 </template>
 
 <script setup lang="ts">
-import { h, onMounted, ref } from 'vue'
+import { computed, h, onMounted, ref } from 'vue'
 import { NButton, NIcon, NP, NPopconfirm, NSpace, NTag, NText, NUpload, NUploadDragger } from 'naive-ui'
 import type { DataTableColumns, DataTableInst, FormInst, UploadFileInfo, UploadInst } from 'naive-ui'
 import CoiEmpty from '@/components/common/CoiEmpty.vue'
@@ -345,6 +346,34 @@ const searchForm = ref<SysFileSearchForm>({
 const uploadFileList = ref<UploadFileInfo[]>([])
 const uploading = ref(false)
 
+// 计算属性：判断确定按钮是否应该禁用
+const isConfirmDisabled = computed(() => {
+  const fileList = uploadFileList.value
+
+  // 没有文件时禁用
+  if (fileList.length === 0) {
+    return true
+  }
+
+  // 有文件正在上传时禁用（pending 或 uploading 状态）
+  const uploadingFiles = fileList.filter(file =>
+    file.status === 'pending' || file.status === 'uploading',
+  )
+  if (uploadingFiles.length > 0) {
+    return true
+  }
+
+  // 有文件上传失败时禁用（error 状态）
+  const errorFiles = fileList.filter(file => file.status === 'error')
+  if (errorFiles.length > 0) {
+    return true
+  }
+
+  // 只有所有文件都上传成功时才启用
+  const finishedFiles = fileList.filter(file => file.status === 'finished')
+  return finishedFiles.length === 0
+})
+
 // 上传表单数据
 const uploadForm = ref({
   fileService: 'LOCAL',
@@ -749,7 +778,20 @@ async function customUpload({ file, onProgress, onFinish, onError }: any) {
     onProgress({ percent: 10 })
 
     // 调用上传API，传递选择的存储类型
-    await uploadFile(fileObj, folderName, 2, '-1', uploadForm.value.fileService)
+    const result = await uploadFile(fileObj, folderName, 2, '-1', uploadForm.value.fileService)
+
+    // 检查业务逻辑是否成功
+    if (result.isSuccess === false) {
+      // 业务错误：HTTP状态码200但业务逻辑失败
+      // 注意：HTTP拦截器已经显示了错误信息，这里只需要标记为失败
+      onError()
+      // 从文件列表中移除失败的文件
+      const index = uploadFileList.value.findIndex(item => item.id === file.id)
+      if (index !== -1) {
+        uploadFileList.value.splice(index, 1)
+      }
+      return
+    }
 
     // 设置完成进度
     onProgress({ percent: 100 })
@@ -762,6 +804,12 @@ async function customUpload({ file, onProgress, onFinish, onError }: any) {
   catch (error: any) {
     onError()
 
+    // 从文件列表中移除失败的文件
+    const index = uploadFileList.value.findIndex(item => item.id === file.id)
+    if (index !== -1) {
+      uploadFileList.value.splice(index, 1)
+    }
+
     // 解析后端错误信息
     let errorMessage = `文件 ${file.file.name} 上传失败`
 

src/views/system/picture/index.vue

@@ -317,6 +317,7 @@
       height="auto"
       confirm-text="确定"
       cancel-text="取消"
+      :confirm-disabled="isConfirmDisabled"
       @coi-confirm="handleUploadConfirm"
       @coi-cancel="handleUploadCancel"
     >
@@ -405,7 +406,7 @@
 </template>
 
 <script setup lang="ts">
-import { h, onMounted, ref } from 'vue'
+import { computed, h, onMounted, ref } from 'vue'
 import { NButton, NIcon, NP, NPopconfirm, NSpace, NSpin, NTag, NText, NTooltip, NUpload, NUploadDragger } from 'naive-ui'
 import type { DataTableColumns, DataTableInst, FormInst, UploadFileInfo, UploadInst } from 'naive-ui'
 import CoiEmpty from '@/components/common/CoiEmpty.vue'
@@ -480,6 +481,34 @@ const searchForm = ref<SysPictureSearchForm>({
 const uploadFileList = ref<UploadFileInfo[]>([])
 const uploading = ref(false)
 
+// 计算属性：判断确定按钮是否应该禁用
+const isConfirmDisabled = computed(() => {
+  const fileList = uploadFileList.value
+
+  // 没有文件时禁用
+  if (fileList.length === 0) {
+    return true
+  }
+
+  // 有文件正在上传时禁用（pending 或 uploading 状态）
+  const uploadingFiles = fileList.filter(file =>
+    file.status === 'pending' || file.status === 'uploading',
+  )
+  if (uploadingFiles.length > 0) {
+    return true
+  }
+
+  // 有文件上传失败时禁用（error 状态）
+  const errorFiles = fileList.filter(file => file.status === 'error')
+  if (errorFiles.length > 0) {
+    return true
+  }
+
+  // 只有所有文件都上传成功时才启用
+  const finishedFiles = fileList.filter(file => file.status === 'finished')
+  return finishedFiles.length === 0
+})
+
 // 上传表单数据
 const uploadForm = ref({
   pictureService: 'LOCAL',
@@ -883,19 +912,24 @@ async function customUpload({ file, onProgress, onFinish, onError }: any) {
   try {
     const fileObj = file.file as File
 
-    // 添加上传开始日志
-    // console.log('customUpload 开始上传:', {
-    //   fileName: fileObj.name,
-    //   fileSize: fileObj.size,
-    //   fileSizeMB: (fileObj.size / 1024 / 1024).toFixed(2),
-    // })
-
     // 设置进度
     onProgress({ percent: 10 })
 
     // 调用上传API - 使用选择的分类和存储类型
-    // console.log('调用上传API:', { pictureType: uploadForm.value.pictureType, pictureService: uploadForm.value.pictureService, fileSize: 2 })
+    const result = await uploadPicture(fileObj, uploadForm.value.pictureType, 2, uploadForm.value.pictureService)
-    await uploadPicture(fileObj, uploadForm.value.pictureType, 2, uploadForm.value.pictureService)
+
+    // 检查业务逻辑是否成功
+    if (result.isSuccess === false) {
+      // 业务错误：HTTP状态码200但业务逻辑失败
+      // 注意：HTTP拦截器已经显示了错误信息，这里只需要标记为失败
+      onError()
+      // 从文件列表中移除失败的文件
+      const index = uploadFileList.value.findIndex(item => item.id === file.id)
+      if (index !== -1) {
+        uploadFileList.value.splice(index, 1)
+      }
+      return
+    }
 
     // 设置完成进度
     onProgress({ percent: 100 })
@@ -910,6 +944,12 @@ async function customUpload({ file, onProgress, onFinish, onError }: any) {
 
     console.error('图片上传失败:', error)
 
+    // 从文件列表中移除失败的文件
+    const index = uploadFileList.value.findIndex(item => item.id === file.id)
+    if (index !== -1) {
+      uploadFileList.value.splice(index, 1)
+    }
+
     // 解析后端返回的错误信息
     let errorMessage = `图片 ${file.file.name} 上传失败`