|
|
@@ -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>
|