Explorar o código

♻️ refactor(image-selector): 优化图片选择器的值处理逻辑
- 支持数组类型的值,自动取第一个元素作为文件ID
- 优化query enabled条件,避免空数组时触发请求

♻️ refactor(minio-uploader): 移除冗余的上传状态管理
- 删除uploadingFiles状态,简化上传状态管理
- 优化文件列表更新逻辑,移除不必要的状态更新

🔧 chore: 清理未使用的导入和属性
- 移除FilePreviewDialog.tsx中未使用的cn导入
- 移除ImageSelector.tsx中未使用的uploadButtonText属性
- 移除Dashboard.tsx中未使用的React和Badge导入

yourname hai 3 meses
pai
achega
414e7dd77a

+ 0 - 1
src/client/admin/components/FilePreviewDialog.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
 import { Button } from '@/client/components/ui/button';
 import { Download, X, File as FileIcon, Image as ImageIcon } from 'lucide-react';
-import { cn } from '@/client/lib/utils';
 
 export interface FilePreviewDialogProps {
   open: boolean;

+ 5 - 4
src/client/admin/components/ImageSelector.tsx

@@ -18,7 +18,6 @@ interface ImageSelectorProps {
   accept?: string;
   maxSize?: number;
   uploadPath?: string;
-  uploadButtonText?: string;
   previewSize?: 'small' | 'medium' | 'large';
   showPreview?: boolean;
   placeholder?: string;
@@ -36,7 +35,6 @@ export const ImageSelector: React.FC<ImageSelectorProps> = ({
   accept = 'image/*',
   maxSize = 5,
   uploadPath = '/images',
-  uploadButtonText = '上传图片',
   previewSize = 'medium',
   showPreview = true,
   placeholder = '选择图片',
@@ -57,11 +55,14 @@ export const ImageSelector: React.FC<ImageSelectorProps> = ({
     queryKey: ['file-detail', value],
     queryFn: async () => {
       if (!value) return null;
-      const response = await fileClient[':id']['$get']({ param: { id: value.toString() } });
+      // 如果是数组,取第一个元素;如果是单个数字,直接使用
+      const fileId = Array.isArray(value) ? value[0] : value;
+      if (!fileId) return null;
+      const response = await fileClient[':id']['$get']({ param: { id: fileId } });
       if (response.status !== 200) throw new Error('获取文件详情失败');
       return response.json();
     },
-    enabled: !!value,
+    enabled: !!value && !(Array.isArray(value) && value.length === 0),
   });
 
   

+ 3 - 17
src/client/admin/components/MinioUploader.tsx

@@ -64,7 +64,6 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
   displayMode = 'full'
 }) => {
   const [fileList, setFileList] = useState<UploadFile[]>([]);
-  const [uploadingFiles, setUploadingFiles] = useState<Set<string>>(new Set());
   const [dragActive, setDragActive] = useState(false);
 
   // 根据尺寸模式获取样式配置
@@ -128,7 +127,7 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
 
   // 处理上传成功
   const handleComplete = useCallback((uid: string, result: { fileKey: string; fileUrl: string }, file: File) => {
-    setFileList(prev => 
+    setFileList(prev =>
       prev.map(item => {
         if (item.uid === uid) {
           return {
@@ -142,19 +141,13 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
       })
     );
     
-    setUploadingFiles(prev => {
-      const newSet = new Set(prev);
-      newSet.delete(uid);
-      return newSet;
-    });
-    
     // toast.success(`文件 "${file.name}" 上传成功`);
     onUploadSuccess?.(result.fileKey, result.fileUrl, file);
   }, [onUploadSuccess]);
 
   // 处理上传失败
   const handleError = useCallback((uid: string, error: Error, file: File) => {
-    setFileList(prev => 
+    setFileList(prev =>
       prev.map(item => {
         if (item.uid === uid) {
           return {
@@ -168,12 +161,6 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
       })
     );
     
-    setUploadingFiles(prev => {
-      const newSet = new Set(prev);
-      newSet.delete(uid);
-      return newSet;
-    });
-    
     // toast.error(`文件 "${file.name}" 上传失败: ${error.message}`);
     onUploadError?.(error, file);
   }, [onUploadError]);
@@ -195,8 +182,7 @@ const MinioUploader: React.FC<MinioUploaderProps> = ({
       }
     ]);
     
-    // 添加到上传中集合
-    setUploadingFiles(prev => new Set(prev).add(uid));
+    // 文件已添加到上传列表
     
     try {
       // 验证文件大小

+ 0 - 2
src/client/admin/pages/Dashboard.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
 import { useNavigate } from 'react-router';
 import { Users, Bell, Eye, TrendingUp, TrendingDown, Activity } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
-import { Badge } from '@/client/components/ui/badge';
 import { Progress } from '@/client/components/ui/progress';
 
 // 仪表盘页面