feat(admin): batch upload for package, store env, and product images

Allow multi-select uploads in HQ, partner, and shop for the three image galleries.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/admin-web/src/components/DetailImageUrlList.tsx

@@ -1,6 +1,5 @@
-import { Button, Form, Space, Typography } from 'antd';
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import OssUpload from './OssUpload';
+import { Typography } from 'antd';
+import MultiImageUpload from './MultiImageUpload';
 
 type Props = {
   name?: string;
@@ -8,42 +7,35 @@ type Props = {
   bizType?: string;
   /** 最多可添加张数；不传则不限制 */
   maxCount?: number;
+  /** Form.Item 注入 */
+  value?: string[];
+  onChange?: (urls: string[]) => void;
 };
 
+/**
+ * 商品详情/轮播等多图列表。
+ * 可直接包在 Form.Item 下（value/onChange），也可用 Form.List 的 name 外层再包 Form.Item。
+ */
 export default function DetailImageUrlList({
-  name = 'detailImageUrls',
   label,
   bizType = 'DETAIL',
   maxCount,
+  value,
+  onChange,
 }: Props) {
   return (
     <>
-      {maxCount != null && (
-        <Typography.Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
-          最多 {maxCount} 张{label}
-        </Typography.Text>
-      )}
-      <Form.List name={name}>
-        {(fields, { add, remove }) => (
-          <>
-            {fields.map((field) => (
-              <Space key={field.key} align="start" style={{ display: 'flex', marginBottom: 8 }}>
-                <Form.Item {...field} style={{ flex: 1, marginBottom: 0 }}>
-                  <OssUpload bizType={bizType} mediaType="IMAGE" />
-                </Form.Item>
-                {fields.length > 1 && (
-                  <MinusCircleOutlined onClick={() => remove(field.name)} style={{ marginTop: 8 }} />
-                )}
-              </Space>
-            ))}
-            {(!maxCount || fields.length < maxCount) && (
-              <Button type="dashed" onClick={() => add('')} block icon={<PlusOutlined />}>
-                添加{label}
-              </Button>
-            )}
-          </>
-        )}
-      </Form.List>
+      <Typography.Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
+        {label}：支持批量上传{maxCount != null ? `，最多 ${maxCount} 张` : ''}
+      </Typography.Text>
+      <MultiImageUpload
+        bizType={bizType}
+        mediaType="IMAGE"
+        maxCount={maxCount}
+        value={value}
+        onChange={onChange}
+        tip={`支持一次选择多张${label}`}
+      />
     </>
   );
 }

apps/admin-web/src/components/MultiImageUpload.tsx

@@ -0,0 +1,143 @@
+import { useRef, useState } from 'react';
+import { Button, Image, Space, Typography, Upload, message } from 'antd';
+import { UploadOutlined, DeleteOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
+import { uploadFileToOss, type OssMediaType } from '../lib/upload';
+
+type Props = {
+  value?: string[];
+  onChange?: (urls: string[]) => void;
+  bizType: string;
+  mediaType?: OssMediaType;
+  /** 最多张数；不传则不限制 */
+  maxCount?: number;
+  tip?: string;
+  accept?: string;
+};
+
+function normalizeUrls(value?: string[]) {
+  return (value ?? []).map((u) => String(u || '').trim()).filter(Boolean);
+}
+
+/**
+ * 多图批量上传（一次可选多张），用于套餐图 / 环境照 / 商品详情图等。
+ * Form.Item 直接绑定 string[]。
+ */
+export default function MultiImageUpload({
+  value,
+  onChange,
+  bizType,
+  mediaType = 'IMAGE',
+  maxCount,
+  tip,
+  accept = 'image/*',
+}: Props) {
+  const urls = normalizeUrls(value);
+  const [uploading, setUploading] = useState(false);
+  const batchBuf = useRef<File[]>([]);
+
+  const remaining = maxCount != null ? Math.max(0, maxCount - urls.length) : Number.POSITIVE_INFINITY;
+  const canAdd = remaining > 0;
+
+  async function uploadBatch(files: File[]) {
+    const room = maxCount != null ? Math.max(0, maxCount - urls.length) : files.length;
+    const picked = files.slice(0, room);
+    if (!picked.length) {
+      message.warning(maxCount != null ? `最多 ${maxCount} 张` : '无法上传');
+      return;
+    }
+    if (files.length > picked.length) {
+      message.warning(`已达上限，仅上传前 ${picked.length} 张`);
+    }
+
+    setUploading(true);
+    const appended: string[] = [];
+    let fail = 0;
+    try {
+      for (const file of picked) {
+        try {
+          const result = await uploadFileToOss(file, { bizType, mediaType });
+          appended.push(result.url);
+        } catch {
+          fail += 1;
+        }
+      }
+      if (appended.length) {
+        onChange?.([...urls, ...appended]);
+        message.success(`成功上传 ${appended.length} 张${fail ? `，失败 ${fail} 张` : ''}`);
+      } else if (fail) {
+        message.error('上传失败');
+      }
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  const beforeUpload: UploadProps['beforeUpload'] = (file, fileList) => {
+    batchBuf.current.push(file as File);
+    if (batchBuf.current.length >= fileList.length) {
+      const files = [...batchBuf.current];
+      batchBuf.current = [];
+      void uploadBatch(files);
+    }
+    return false;
+  };
+
+  function removeAt(index: number) {
+    onChange?.(urls.filter((_, i) => i !== index));
+  }
+
+  return (
+    <Space direction="vertical" style={{ width: '100%' }} size="middle">
+      <Typography.Text type="secondary">
+        {tip ??
+          (maxCount != null
+            ? `最多 ${maxCount} 张，支持一次选择多张批量上传`
+            : '支持一次选择多张批量上传')}
+        {maxCount != null ? `（已选 ${urls.length}/${maxCount}）` : urls.length ? `（已选 ${urls.length}）` : ''}
+      </Typography.Text>
+
+      {urls.length > 0 ? (
+        <Image.PreviewGroup>
+          <Space wrap size={12}>
+            {urls.map((url, index) => (
+              <div key={`${url}-${index}`} style={{ position: 'relative', width: 96 }}>
+                <Image
+                  src={url}
+                  width={96}
+                  height={96}
+                  style={{ objectFit: 'cover', borderRadius: 6, border: '1px solid #f0f0f0' }}
+                />
+                <Button
+                  type="text"
+                  danger
+                  size="small"
+                  icon={<DeleteOutlined />}
+                  onClick={() => removeAt(index)}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    right: 0,
+                    background: 'rgba(255,255,255,0.85)',
+                  }}
+                />
+              </div>
+            ))}
+          </Space>
+        </Image.PreviewGroup>
+      ) : null}
+
+      <Upload
+        accept={accept}
+        multiple
+        showUploadList={false}
+        beforeUpload={beforeUpload}
+        disabled={uploading || !canAdd}
+      >
+        <Button icon={<UploadOutlined />} loading={uploading} disabled={!canAdd}>
+          {canAdd ? '批量上传图片' : '已达上限'}
+        </Button>
+      </Upload>
+    </Space>
+  );
+}

apps/admin-web/src/components/PackageImagesUpload.tsx

@@ -1,75 +1,21 @@
-import { Button, Image, Space, Typography } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
 import { STORE_PACKAGE_IMAGE_MAX_COUNT } from '@dukang/shared-types';
-import OssUpload from './OssUpload';
+import MultiImageUpload from './MultiImageUpload';
 
 type Props = {
   value?: string[];
   onChange?: (urls: string[]) => void;
 };
 
-/** 套餐多图上传：最多 STORE_PACKAGE_IMAGE_MAX_COUNT 张，支持替换与删除 */
+/** 套餐多图：批量上传，最多 STORE_PACKAGE_IMAGE_MAX_COUNT 张 */
 export default function PackageImagesUpload({ value, onChange }: Props) {
-  const urls = (value ?? []).map((u) => String(u || '').trim()).filter(Boolean);
-
-  function updateAt(index: number, url: string) {
-    const next = [...urls];
-    const trimmed = url.trim();
-    if (!trimmed) {
-      next.splice(index, 1);
-    } else {
-      next[index] = trimmed;
-    }
-    onChange?.(next);
-  }
-
-  function removeAt(index: number) {
-    onChange?.(urls.filter((_, i) => i !== index));
-  }
-
-  function addSlot() {
-    if (urls.length >= STORE_PACKAGE_IMAGE_MAX_COUNT) return;
-    onChange?.([...urls, '']);
-  }
-
-  const slots = urls.length ? urls : [''];
-
   return (
-    <Space direction="vertical" style={{ width: '100%' }} size="middle">
-      <Typography.Text type="secondary">
-        最多 {STORE_PACKAGE_IMAGE_MAX_COUNT} 张，可替换或删除
-      </Typography.Text>
-      {slots.map((url, index) => (
-        <div key={`${index}-${url || 'empty'}`} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
-          <div style={{ flex: 1 }}>
-            <OssUpload
-              bizType="STORE_PACKAGE"
-              mediaType="IMAGE"
-              value={url || undefined}
-              onChange={(next) => updateAt(index, next)}
-            />
-          </div>
-          {(urls.length > 0 || url) && (
-            <Button type="link" danger onClick={() => removeAt(index)} style={{ marginTop: 8 }}>
-              删除
-            </Button>
-          )}
-        </div>
-      ))}
-      {urls.length < STORE_PACKAGE_IMAGE_MAX_COUNT ? (
-        <Button type="dashed" icon={<PlusOutlined />} onClick={addSlot} block>
-          添加图片（{urls.filter(Boolean).length}/{STORE_PACKAGE_IMAGE_MAX_COUNT}）
-        </Button>
-      ) : null}
-      {urls.length > 1 ? (
-        <Image.PreviewGroup>
-          <Space wrap size={8}>
-            {urls.map((u) => (
-              <Image key={u} src={u} width={64} height={64} style={{ objectFit: 'cover', borderRadius: 4 }} />
-            ))}
-          </Space>
-        </Image.PreviewGroup>
-      ) : null}
-    </Space>
+    <MultiImageUpload
+      bizType="STORE_PACKAGE"
+      mediaType="IMAGE"
+      maxCount={STORE_PACKAGE_IMAGE_MAX_COUNT}
+      value={value}
+      onChange={onChange}
+      tip={`套餐图片最多 ${STORE_PACKAGE_IMAGE_MAX_COUNT} 张，支持批量选择上传，可逐张删除`}
+    />
   );
 }