feat: add system quality improvement plan and implementation

novalon-manage-web/src/views/file/FileManagement.vue

@@ -1,51 +1,46 @@
 <template>
   <div class="file-management">
-    <a-card>
-      <template #title>
+    <el-card>
+      <template #header>
         <div class="card-title">
           <span>文件管理</span>
-          <a-upload :before-upload="handleUpload" :show-upload-list="false">
-            <a-button type="primary">
-              <upload-outlined /> 上传文件
-            </a-button>
-          </a-upload>
+          <el-upload :before-upload="handleUpload" :show-file-list="false">
+            <el-button type="primary">
+              <el-icon><Upload /></el-icon> 上传文件
+            </el-button>
+          </el-upload>
         </div>
       </template>
-      <a-table :columns="columns" :data-source="dataSource" :loading="loading">
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'fileType'">
-            <a-tag :color="getFileTypeColor(record.fileType)">
-              {{ getFileTypeName(record.fileType) }}
-            </a-tag>
+      <el-table :data="dataSource" v-loading="loading" style="width: 100%">
+        <el-table-column prop="id" label="ID" />
+        <el-table-column prop="fileName" label="文件名" />
+        <el-table-column prop="fileSize" label="文件大小" />
+        <el-table-column label="文件类型">
+          <template #default="{ row }">
+            <el-tag :type="getFileTypeTag(row.fileType)">
+              {{ getFileTypeName(row.fileType) }}
+            </el-tag>
           </template>
-          <template v-if="column.key === 'action'">
-            <a-space>
-              <a-button type="link" size="small" @click="handleDownload(record)">下载</a-button>
-              <a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
-            </a-space>
+        </el-table-column>
+        <el-table-column prop="storageType" label="存储方式" />
+        <el-table-column prop="createdAt" label="上传时间" />
+        <el-table-column label="操作" width="150">
+          <template #default="{ row }">
+            <el-button type="primary" link size="small" @click="handleDownload(row)">下载</el-button>
+            <el-button type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
           </template>
-        </template>
-      </a-table>
-    </a-card>
+        </el-table-column>
+      </el-table>
+    </el-card>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
-import { UploadOutlined } from '@ant-design/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Upload } from '@element-plus/icons-vue'
 import request from '@/utils/request'
 
-const columns = [
-  { title: 'ID', dataIndex: 'id', key: 'id' },
-  { title: '文件名', dataIndex: 'fileName', key: 'fileName' },
-  { title: '文件大小', dataIndex: 'fileSize', key: 'fileSize' },
-  { title: '文件类型', key: 'fileType' },
-  { title: '存储方式', dataIndex: 'storageType', key: 'storageType' },
-  { title: '上传时间', dataIndex: 'createdAt', key: 'createdAt' },
-  { title: '操作', key: 'action', width: 150 }
-]
-
 const loading = ref(false)
 const dataSource = ref([])
 
@@ -66,22 +61,29 @@ const handleUpload = async (file: File) => {
     await request.post('/files/upload', formData, {
       headers: { 'Content-Type': 'multipart/form-data' }
     })
-    message.success('上传成功')
+    ElMessage.success('上传成功')
     fetchData()
-  } catch { message.error('上传失败') }
+  } catch {
+    ElMessage.error('上传失败')
+  }
   return false
 }
 
-const handleDownload = (record: any) => {
-  window.open(record.filePath)
+const handleDownload = (row: any) => {
+  window.open(row.filePath)
 }
 
-const handleDelete = async (record: any) => {
+const handleDelete = async (row: any) => {
   try {
-    await request.delete(`/files/${record.id}`)
-    message.success('删除成功')
+    await ElMessageBox.confirm('确定要删除该文件吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    await request.delete(`/files/${row.id}`)
+    ElMessage.success('删除成功')
     fetchData()
-  } catch { message.error('删除失败') }
+  } catch {}
 }
 
 const getFileTypeName = (fileType: string) => {
@@ -95,15 +97,15 @@ const getFileTypeName = (fileType: string) => {
   return '其他'
 }
 
-const getFileTypeColor = (fileType: string) => {
-  if (!fileType) return 'default'
-  if (fileType.startsWith('image/')) return 'pink'
-  if (fileType.startsWith('video/')) return 'purple'
-  if (fileType.startsWith('audio/')) return 'cyan'
-  if (fileType.includes('pdf')) return 'red'
-  if (fileType.includes('word')) return 'blue'
-  if (fileType.includes('excel')) return 'green'
-  return 'orange'
+const getFileTypeTag = (fileType: string): '' | 'success' | 'warning' | 'danger' | 'info' => {
+  if (!fileType) return 'info'
+  if (fileType.startsWith('image/')) return 'success'
+  if (fileType.startsWith('video/')) return 'danger'
+  if (fileType.startsWith('audio/')) return 'warning'
+  if (fileType.includes('pdf')) return 'danger'
+  if (fileType.includes('word')) return ''
+  if (fileType.includes('excel')) return 'success'
+  return 'info'
 }
 
 onMounted(() => fetchData())