Browse Source

🐛 fix(ImageSelector): 修复图片选择器状态同步问题

- 添加selectedFile判断条件,避免不必要的状态更新
- 优化selectedFiles同步逻辑,防止无限循环更新

✨ feat(Advertisements): 升级广告管理页面图片选择功能

- 将AvatarSelector替换为更强大的ImageSelector组件
- 为图片选择器添加标题和描述信息,提升用户体验
yourname 4 months ago
parent
commit
9ec101f28c

+ 6 - 4
src/client/admin-shadcn/components/ImageSelector.tsx

@@ -65,15 +65,17 @@ const ImageSelector: React.FC<ImageSelectorProps> = ({
 
 
   // 当对话框打开时,设置当前选中的图片
   // 当对话框打开时,设置当前选中的图片
   useEffect(() => {
   useEffect(() => {
-    if (isOpen && value && currentFile) {
+    if (isOpen && value && currentFile && (!selectedFile || selectedFile.id !== currentFile.id)) {
       setSelectedFile(currentFile);
       setSelectedFile(currentFile);
     }
     }
-  }, [isOpen, value, currentFile]);
+  }, [isOpen, value, currentFile, selectedFile]);
 
 
   // 当allowMultiple模式下的selectedFiles变化时
   // 当allowMultiple模式下的selectedFiles变化时
   useEffect(() => {
   useEffect(() => {
-    setLocalSelectedFiles(selectedFiles);
-  }, [selectedFiles]);
+    if (JSON.stringify(localSelectedFiles) !== JSON.stringify(selectedFiles)) {
+      setLocalSelectedFiles(selectedFiles);
+    }
+  }, [selectedFiles, localSelectedFiles]);
 
 
   // 获取图片列表
   // 获取图片列表
   const { data: filesData, isLoading, refetch } = useQuery({
   const { data: filesData, isLoading, refetch } = useQuery({

+ 7 - 3
src/client/admin-shadcn/pages/Advertisements.tsx

@@ -12,7 +12,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
 import { toast } from 'sonner';
 import { DataTablePagination } from '@/client/admin-shadcn/components/DataTablePagination';
 import { DataTablePagination } from '@/client/admin-shadcn/components/DataTablePagination';
-import AvatarSelector from '@/client/admin-shadcn/components/AvatarSelector';
+import ImageSelector from '@/client/admin-shadcn/components/ImageSelector';
 import AdvertisementTypeSelector from '@/client/admin-shadcn/components/AdvertisementTypeSelector';
 import AdvertisementTypeSelector from '@/client/admin-shadcn/components/AdvertisementTypeSelector';
 import { advertisementClient } from '@/client/api';
 import { advertisementClient } from '@/client/api';
 import type { InferRequestType, InferResponseType } from 'hono/client';
 import type { InferRequestType, InferResponseType } from 'hono/client';
@@ -419,7 +419,7 @@ export const AdvertisementsPage = () => {
                     <FormItem>
                     <FormItem>
                       <FormLabel>广告图片</FormLabel>
                       <FormLabel>广告图片</FormLabel>
                       <FormControl>
                       <FormControl>
-                        <AvatarSelector
+                        <ImageSelector
                           value={field.value || undefined}
                           value={field.value || undefined}
                           onChange={field.onChange}
                           onChange={field.onChange}
                           maxSize={2}
                           maxSize={2}
@@ -427,6 +427,8 @@ export const AdvertisementsPage = () => {
                           uploadButtonText="上传广告图片"
                           uploadButtonText="上传广告图片"
                           previewSize="medium"
                           previewSize="medium"
                           placeholder="选择广告图片"
                           placeholder="选择广告图片"
+                          title="选择广告图片"
+                          description="上传新图片或从已有图片中选择"
                         />
                         />
                       </FormControl>
                       </FormControl>
                       <FormDescription>推荐尺寸:1200x400px,支持jpg、png格式</FormDescription>
                       <FormDescription>推荐尺寸:1200x400px,支持jpg、png格式</FormDescription>
@@ -591,7 +593,7 @@ export const AdvertisementsPage = () => {
                     <FormItem>
                     <FormItem>
                       <FormLabel>广告图片</FormLabel>
                       <FormLabel>广告图片</FormLabel>
                       <FormControl>
                       <FormControl>
-                        <AvatarSelector
+                        <ImageSelector
                           value={field.value || undefined}
                           value={field.value || undefined}
                           onChange={field.onChange}
                           onChange={field.onChange}
                           maxSize={2}
                           maxSize={2}
@@ -599,6 +601,8 @@ export const AdvertisementsPage = () => {
                           uploadButtonText="上传广告图片"
                           uploadButtonText="上传广告图片"
                           previewSize="medium"
                           previewSize="medium"
                           placeholder="选择广告图片"
                           placeholder="选择广告图片"
+                          title="选择广告图片"
+                          description="上传新图片或从已有图片中选择"
                         />
                         />
                       </FormControl>
                       </FormControl>
                       <FormDescription>推荐尺寸:1200x400px,支持jpg、png格式</FormDescription>
                       <FormDescription>推荐尺寸:1200x400px,支持jpg、png格式</FormDescription>