Explorar el Código

✨ feat(image-selector): 支持多图片选择功能

- 修改ImageSelector组件,支持单选和多选两种模式
- 扩展value和onChange属性类型,支持数组形式的多图片ID
- 优化onChange回调调用逻辑,增加空值检查
- 在商品创建和编辑页面添加轮播图上传功能
- 为商品主图和轮播图添加尺寸推荐说明

✨ feat(goods): 添加商品轮播图上传功能

- 在商品创建表单中添加轮播图上传字段
- 在商品编辑表单中添加商品主图和轮播图上传字段
- 为轮播图添加最多上传5张的限制说明
yourname hace 4 meses
padre
commit
e55c6a6e2e

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

@@ -13,8 +13,8 @@ import type { InferResponseType } from 'hono/client';
 type FileType = InferResponseType<typeof fileClient.$get, 200>['data'][0]
 
 interface ImageSelectorProps {
-  value?: number | null;
-  onChange: (fileId: number | null) => void;
+  value?: number | null | number[];
+  onChange?: (fileId: number | null | number[]) => void;
   accept?: string;
   maxSize?: number;
   uploadPath?: string;
@@ -122,6 +122,8 @@ export const ImageSelector: React.FC<ImageSelectorProps> = ({
     if (allowMultiple) {
       if (onMultipleSelect) {
         onMultipleSelect(localSelectedFiles);
+      } else if (onChange) {
+        onChange(localSelectedFiles);
       }
       setIsOpen(false);
       return;
@@ -131,7 +133,9 @@ export const ImageSelector: React.FC<ImageSelectorProps> = ({
       toast.warning('请选择一个图片');
       return;
     }
-    onChange(selectedFile.id);
+    if (onChange) {
+      onChange(selectedFile.id);
+    }
     setIsOpen(false);
     setSelectedFile(null);
   };
@@ -162,7 +166,7 @@ export const ImageSelector: React.FC<ImageSelectorProps> = ({
 
   const handleRemoveImage = (e: React.MouseEvent) => {
     e.stopPropagation();
-    onChange(null);
+    onChange?.(null);
   };
 
   const isSelected = (fileId: number) => {

+ 74 - 1
src/client/admin-shadcn/pages/Goods.tsx

@@ -465,6 +465,31 @@ export const GoodsPage = () => {
                   )}
                 />
 
+                <FormField
+                  control={createForm.control}
+                  name="slideImageIds"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>商品轮播图</FormLabel>
+                      <FormControl>
+                        <ImageSelector
+                          value={field.value || []}
+                          onChange={field.onChange}
+                          allowMultiple={true}
+                          maxSize={5}
+                          uploadPath="/goods/slide"
+                          uploadButtonText="上传轮播图"
+                          previewSize="small"
+                          placeholder="选择商品轮播图"
+                          accept="image/*"
+                        />
+                      </FormControl>
+                      <FormDescription>最多上传5张轮播图,推荐尺寸:800x800px</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
                 <FormField
                   control={createForm.control}
                   name="instructions"
@@ -560,7 +585,55 @@ export const GoodsPage = () => {
                       </FormItem>
                     )}
                   />
-
+  
+                  <FormField
+                    control={updateForm.control}
+                    name="imageFileId"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>商品主图</FormLabel>
+                        <FormControl>
+                          <ImageSelector
+                            value={field.value || undefined}
+                            onChange={field.onChange}
+                            maxSize={2}
+                            uploadPath="/goods"
+                            uploadButtonText="上传商品主图"
+                            previewSize="medium"
+                            placeholder="选择商品主图"
+                          />
+                        </FormControl>
+                        <FormDescription>推荐尺寸:800x800px</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+  
+                  <FormField
+                    control={updateForm.control}
+                    name="slideImageIds"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>商品轮播图</FormLabel>
+                        <FormControl>
+                          <ImageSelector
+                            value={field.value || []}
+                            onChange={field.onChange}
+                            allowMultiple={true}
+                            maxSize={5}
+                            uploadPath="/goods/slide"
+                            uploadButtonText="上传轮播图"
+                            previewSize="small"
+                            placeholder="选择商品轮播图"
+                            accept="image/*"
+                          />
+                        </FormControl>
+                        <FormDescription>最多上传5张轮播图,推荐尺寸:800x800px</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+  
                   <FormField
                     control={updateForm.control}
                     name="state"