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

♻️ refactor(admin): 优化MinioUploader组件类型和状态管理

- 完善类型定义,引入UploadProps和UploadFileStatus类型
- 统一使用percent属性替代progress表示上传进度
- 使用error属性替代message存储错误信息
- 标准化文件状态管理,明确指定UploadFileStatus类型
- 优化文件对象属性设置,确保与antd Upload组件兼容
- 更新进度显示和错误提示的UI渲染逻辑
yourname 8 месяцев назад
Родитель
Сommit
9e39829c23
1 измененных файлов с 24 добавлено и 20 удалено
  1. 24 20
      src/client/admin/components/MinioUploader.tsx

+ 24 - 20
src/client/admin/components/MinioUploader.tsx

@@ -2,7 +2,8 @@ import React, { useState, useCallback } from 'react';
 import { Upload, Progress, message, Tag, Space, Typography, Button } from 'antd';
 import { UploadOutlined, CloseOutlined, CheckCircleOutlined, SyncOutlined } from '@ant-design/icons';
 import { App } from 'antd';
-import type { UploadFile } from 'antd';
+import type { UploadFile , UploadProps} from 'antd';
+import type { UploadFileStatus } from 'antd/es/upload/interface';
 import { uploadMinIOWithPolicy, MinioProgressEvent } from '@/client/utils/minio';
 
 interface MinioUploaderProps {
@@ -46,9 +47,9 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
         if (item.uid === uid) {
           return {
             ...item,
-            status: event.stage === 'error' ? 'error' : 'uploading',
-            progress: event.progress,
-            message: event.message
+            status: event.stage === 'error' ? ('error' as UploadFileStatus) : ('uploading' as UploadFileStatus),
+            percent: event.progress,
+            error: event.stage === 'error' ? event.message : undefined
           };
         }
         return item;
@@ -63,11 +64,10 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
         if (item.uid === uid) {
           return {
             ...item,
-            status: 'success',
-            progress: 100,
-            fileKey: result.fileKey,
-            fileUrl: result.fileUrl,
-            message: '上传成功'
+            status: 'success' as UploadFileStatus,
+            percent: 100,
+            response: { fileKey: result.fileKey },
+            url: result.fileUrl,
           };
         }
         return item;
@@ -91,9 +91,9 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
         if (item.uid === uid) {
           return {
             ...item,
-            status: 'error',
-            progress: 0,
-            message: error.message || '上传失败'
+            status: 'error' as UploadFileStatus,
+            percent: 0,
+            error: error.message || '上传失败'
           };
         }
         return item;
@@ -124,10 +124,14 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
       ...prev.filter(item => item.uid !== uid),
       {
         uid,
-        file,
-        status: 'uploading',
-        progress: 0,
-        message: '准备上传...'
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        lastModified: file.lastModified,
+        lastModifiedDate: file.lastModifiedDate,
+        originFileObj: file.originFileObj,
+        status: 'uploading' as UploadFileStatus,
+        percent: 0,
       }
     ]);
     
@@ -176,7 +180,7 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
         return (
           <Space>
             <SyncOutlined spin size={12} />
-            <span>{item.progress}%</span>
+            <span>{item.percent}%</span>
           </Space>
         );
       case 'done':
@@ -190,7 +194,7 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
         return (
           <Space>
             <CloseOutlined style={{ color: '#ff4d4f' }} size={12} />
-            <Tag color="error">{item.message || '上传失败'}</Tag>
+            <Tag color="error">{item.error || '上传失败'}</Tag>
           </Space>
         );
       default:
@@ -241,9 +245,9 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
                 </div>
                 {item.status === 'uploading' && (
                   <Progress 
-                    percent={item.progress} 
+                    percent={item.percent}
                     size="small" 
-                    status={item.progress === 100 ? 'success' : undefined} 
+                    status={item.percent === 100 ? 'success' : undefined}
                   />
                 )}
               </div>