Forráskód Böngészése

♻️ refactor(files): 重构文件上传功能为组件化实现

- 移除直接上传逻辑,引入MinioUploader组件替代
- 删除uploadMinIOWithPolicy工具函数依赖
- 实现上传成功和失败的回调函数handleUploadSuccess、handleUploadError
- 添加文件上传组件配置:
  - 设置上传路径为"/files"
  - 限制单个文件大小不超过500MB
  - 禁用多文件上传
  - 添加上传提示文本和按钮文本

📝 docs(files): 更新文件上传组件使用说明

- 添加MinioUploader组件使用注释
- 移除原直接上传逻辑注释
yourname 4 hónapja
szülő
commit
8491fdd161
1 módosított fájl, 23 hozzáadás és 27 törlés
  1. 23 27
      src/client/admin-shadcn/pages/Files.tsx

+ 23 - 27
src/client/admin-shadcn/pages/Files.tsx

@@ -11,11 +11,11 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
-import { Eye, Download, Edit, Trash2, Search, Upload, FileText } from 'lucide-react';
+import { Eye, Download, Edit, Trash2, Search, FileText } from 'lucide-react';
 import { fileClient } from '@/client/api';
 import type { InferResponseType, InferRequestType } from 'hono/client';
 import dayjs from 'dayjs';
-import { uploadMinIOWithPolicy } from '@/client/utils/minio';
+import MinioUploader from '@/client/admin-shadcn/components/MinioUploader';
 import { UpdateFileDto } from '@/server/modules/files/file.schema';
 import * as z from 'zod';
 
@@ -112,27 +112,15 @@ export const FilesPage: React.FC = () => {
     return fileType.startsWith('image/') || fileType.startsWith('video/');
   };
 
-  // 处理直接上传文件
-  const handleDirectUpload = async () => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.multiple = false;
-    
-    input.onchange = async (e) => {
-      const file = (e.target as HTMLInputElement).files?.[0];
-      if (!file) return;
-      
-      try {
-        toast.loading('正在上传文件...');
-        await uploadMinIOWithPolicy('/files', file, file.name);
-        toast.success('文件上传成功');
-        queryClient.invalidateQueries({ queryKey: ['files'] });
-      } catch (error) {
-        toast.error(`上传失败: ${error instanceof Error ? error.message : '未知错误'}`);
-      }
-    };
-    
-    input.click();
+  // 处理上传成功回调
+  const handleUploadSuccess = (fileKey: string, fileUrl: string, file: File) => {
+    toast.success('文件上传成功');
+    queryClient.invalidateQueries({ queryKey: ['files'] });
+  };
+
+  // 处理上传失败回调
+  const handleUploadError = (error: Error, file: File) => {
+    toast.error(`上传失败: ${error instanceof Error ? error.message : '未知错误'}`);
   };
 
   // 显示编辑弹窗
@@ -200,11 +188,19 @@ export const FilesPage: React.FC = () => {
     <div className="p-6 space-y-6">
       <div className="flex justify-between items-center">
         <h1 className="text-3xl font-bold">文件管理</h1>
-        <Button onClick={handleDirectUpload}>
-          <Upload className="h-4 w-4 mr-2" />
-          上传文件
-        </Button>
       </div>
+
+      {/* MinioUploader 文件上传组件 */}
+      <MinioUploader
+        uploadPath="/files"
+        maxSize={500}
+        multiple={false}
+        onUploadSuccess={handleUploadSuccess}
+        onUploadError={handleUploadError}
+        buttonText="点击或拖拽上传文件"
+        tipText="支持单文件上传,单个文件大小不超过500MB"
+        size="minimal"
+      />
       
       <Card>
         <CardHeader>