Просмотр исходного кода

♻️ refactor(admin): 优化MinioUploader组件类型和UI

- 添加UploadFile类型导入,明确类型定义
- 重构customRequest参数为options对象解构形式,提高代码可读性
- 修改renderUploadStatus参数类型为UploadFile
- 统一调整图标大小为12px,移除Tag组件的small尺寸属性,优化视觉一致性
yourname 8 месяцев назад
Родитель
Сommit
ea195aca9d
1 измененных файлов с 12 добавлено и 10 удалено
  1. 12 10
      src/client/admin/components/MinioUploader.tsx

+ 12 - 10
src/client/admin/components/MinioUploader.tsx

@@ -2,6 +2,7 @@ import React, { useState, useCallback } from 'react';
 import { Upload, Progress, message, Tag, Space, Typography } from 'antd';
 import { UploadOutlined, CloseOutlined, CheckCircleOutlined, SyncOutlined } from '@ant-design/icons';
 import { App } from 'antd';
+import type { UploadFile } from 'antd';
 import { uploadMinIOWithPolicy, MinioProgressEvent } from '@/client/utils/minio';
 
 interface MinioUploaderProps {
@@ -119,11 +120,12 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
   }, [antdMessage, onUploadError]);
 
   // 自定义上传逻辑
-  const customRequest = async ({ file, onSuccess, onError }: { 
-    file: File, 
-    onSuccess: () => void, 
-    onError: (error: Error) => void 
+  const customRequest = async (options: {
+    file: UploadFile,
+    onSuccess: () => void,
+    onError: (error: Error) => void
   }) => {
+    const { file, onSuccess, onError } = options;
     const uid = file.uid;
     
     // 添加到文件列表
@@ -177,27 +179,27 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
   };
 
   // 渲染上传状态
-  const renderUploadStatus = (item: UploadFileItem) => {
+  const renderUploadStatus = (item: UploadFile) => {
     switch (item.status) {
       case 'uploading':
         return (
           <Space>
-            <SyncOutlined spin size="small" />
+            <SyncOutlined spin size={12} />
             <span>{item.progress}%</span>
           </Space>
         );
       case 'success':
         return (
           <Space>
-            <CheckCircleOutlined style={{ color: '#52c41a' }} size="small" />
-            <Tag color="success" size="small">上传成功</Tag>
+            <CheckCircleOutlined style={{ color: '#52c41a' }} size={12} />
+            <Tag color="success">上传成功</Tag>
           </Space>
         );
       case 'error':
         return (
           <Space>
-            <CloseOutlined style={{ color: '#ff4d4f' }} size="small" />
-            <Tag color="error" size="small">{item.message || '上传失败'}</Tag>
+            <CloseOutlined style={{ color: '#ff4d4f' }} size={12} />
+            <Tag color="error">{item.message || '上传失败'}</Tag>
           </Space>
         );
       default: