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/h5-partner/src/components/MultiOssUploadField.tsx

@@ -0,0 +1,186 @@
+import { useEffect, useRef, useState } from 'react';
+import { uploadFileToOss, type OssMediaType } from '../lib/upload';
+import { enqueueUpload } from '../lib/upload-lock';
+import { formatChooseImageFailMessage } from '@dukang/weixin-sdk';
+import { isWechatEnv, weixinSdk } from '../lib/weixin';
+import { toastError, toastSuccess } from '../lib/toast';
+
+type Props = {
+  value?: string[];
+  onChange?: (urls: string[]) => void;
+  bizType: string;
+  mediaType?: OssMediaType;
+  maxCount?: number;
+  disabled?: boolean;
+  label?: string;
+};
+
+function isCancelError(msg: string): boolean {
+  return /cancel|取消/i.test(msg);
+}
+
+function normalizeUrls(value?: string[]) {
+  return (value ?? []).map((u) => String(u || '').trim()).filter(Boolean);
+}
+
+/** 合伙人端多图批量上传（微信相册可多选） */
+export default function MultiOssUploadField({
+  value,
+  onChange,
+  bizType,
+  mediaType = 'IMAGE',
+  maxCount = 20,
+  disabled,
+  label,
+}: Props) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const pickingRef = useRef(false);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState('');
+
+  const urls = normalizeUrls(value);
+  const remaining = Math.max(0, maxCount - urls.length);
+  const inWechat = isWechatEnv();
+
+  useEffect(() => {
+    if (!inWechat) return;
+    void weixinSdk.init().catch(() => {});
+  }, [inWechat]);
+
+  function showUploadError(text: string) {
+    setError(text);
+    toastError(text);
+  }
+
+  async function uploadFiles(files: File[]) {
+    const picked = files.slice(0, remaining);
+    if (!picked.length) {
+      showUploadError(`最多 ${maxCount} 张`);
+      return;
+    }
+    setUploading(true);
+    setError('');
+    const appended: string[] = [];
+    try {
+      for (const file of picked) {
+        if (!file.size) continue;
+        const result = await enqueueUpload(() => uploadFileToOss(file, { bizType, mediaType }));
+        appended.push(result.url);
+      }
+      if (appended.length) {
+        onChange?.([...urls, ...appended]);
+        toastSuccess(`已上传 ${appended.length} 张`);
+      }
+    } catch (e) {
+      showUploadError(e instanceof Error ? e.message : '上传失败');
+    } finally {
+      setUploading(false);
+      if (inputRef.current) inputRef.current.value = '';
+    }
+  }
+
+  async function pickWechat() {
+    if (pickingRef.current || uploading || disabled || remaining <= 0) return;
+    pickingRef.current = true;
+    setError('');
+    try {
+      await weixinSdk.init();
+      const files = await weixinSdk.chooseImages({
+        count: Math.min(remaining, 9),
+        sourceType: ['album', 'camera'],
+      });
+      if (!files?.length) return;
+      await uploadFiles(files);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : '无法打开相册';
+      if (isCancelError(msg)) return;
+      const formatted = formatChooseImageFailMessage(msg) || msg;
+      showUploadError(formatted);
+      inputRef.current?.click();
+    } finally {
+      pickingRef.current = false;
+    }
+  }
+
+  function removeAt(index: number) {
+    if (disabled) return;
+    onChange?.(urls.filter((_, i) => i !== index));
+  }
+
+  return (
+    <div className="partner-oss-upload">
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        multiple
+        className="partner-oss-upload-input"
+        disabled={disabled || uploading || remaining <= 0}
+        onChange={(e) => {
+          const list = Array.from(e.target.files ?? []);
+          if (list.length) void uploadFiles(list);
+        }}
+      />
+
+      {urls.length > 0 ? (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 8 }}>
+          {urls.map((url, index) => (
+            <div key={`${url}-${index}`} style={{ position: 'relative', width: 88, height: 88 }}>
+              <img
+                src={url}
+                alt=""
+                style={{ width: 88, height: 88, objectFit: 'cover', borderRadius: 8 }}
+              />
+              {!disabled ? (
+                <button
+                  type="button"
+                  className="partner-packages-remove"
+                  style={{
+                    position: 'absolute',
+                    top: 2,
+                    right: 2,
+                    margin: 0,
+                    padding: '2px 6px',
+                    fontSize: 12,
+                    background: 'rgba(0,0,0,0.55)',
+                    color: '#fff',
+                    borderRadius: 4,
+                  }}
+                  onClick={() => removeAt(index)}
+                >
+                  删
+                </button>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      <button
+        type="button"
+        className="partner-upload-dashed partner-upload-dashed--compact"
+        disabled={disabled || uploading || remaining <= 0}
+        onClick={() => {
+          if (inWechat) void pickWechat();
+          else inputRef.current?.click();
+        }}
+      >
+        <span className="material-symbols-outlined text-primary" style={{ fontSize: 28 }}>
+          {uploading ? 'hourglass_top' : 'add_a_photo'}
+        </span>
+        <span className="text-primary" style={{ fontWeight: 500 }}>
+          {uploading
+            ? '上传中…'
+            : remaining <= 0
+              ? `已达上限 ${maxCount}`
+              : label ?? `批量上传（${urls.length}/${maxCount}）`}
+        </span>
+      </button>
+      {error ? (
+        <p className="partner-form-error" role="alert">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

apps/h5-partner/src/components/StorePackagesForm.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import type { PackageFormItem } from '../lib/storePackages';
 import { STORE_PACKAGE_IMAGE_MAX_COUNT, STORE_PACKAGE_MAX_COUNT } from '@dukang/shared-types';
 import { emptyPackage } from '../lib/storePackages';
-import OssUploadField from './OssUploadField';
+import MultiOssUploadField from './MultiOssUploadField';
 
 type Props = {
   items: PackageFormItem[];
@@ -131,70 +131,25 @@ export default function StorePackagesForm({ items, onChange, disabled, embedded
                 </div>
 
                 <div className="partner-field">
-                  <label>套餐图片（最多 {STORE_PACKAGE_IMAGE_MAX_COUNT} 张）</label>
-                  {(() => {
-                    const slots =
+                  <label>套餐图片（最多 {STORE_PACKAGE_IMAGE_MAX_COUNT} 张，支持批量）</label>
+                  <MultiOssUploadField
+                    bizType="STORE_PACKAGE"
+                    maxCount={STORE_PACKAGE_IMAGE_MAX_COUNT}
+                    disabled={disabled}
+                    value={
                       Array.isArray(item.imageUrls) && item.imageUrls.length > 0
-                        ? item.imageUrls.map((u) => String(u ?? ''))
+                        ? item.imageUrls.map((u) => String(u ?? '')).filter((u) => u.trim())
                         : item.imageUrl
                           ? [String(item.imageUrl)]
-                          : [''];
-                    const filled = slots.map((u) => u.trim()).filter(Boolean);
-                    return (
-                      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-                        {slots.map((url, imgIndex) => (
-                          <div key={`${imgIndex}-${url || 'empty'}`}>
-                            <OssUploadField
-                              bizType="STORE_PACKAGE"
-                              value={url || ''}
-                              onChange={(nextUrl) => {
-                                const next = [...slots];
-                                next[imgIndex] = nextUrl?.trim() || '';
-                                const cleaned = next.map((u) => u.trim()).filter(Boolean);
-                                updateAt(index, {
-                                  imageUrls: next,
-                                  imageUrl: cleaned[0] ?? '',
-                                });
-                              }}
-                            />
-                            {!disabled && (filled.length > 0 || url) ? (
-                              <button
-                                type="button"
-                                className="partner-packages-remove"
-                                style={{ marginTop: 6 }}
-                                onClick={() => {
-                                  const next = slots.filter((_, i) => i !== imgIndex);
-                                  const cleaned = next.map((u) => u.trim()).filter(Boolean);
-                                  updateAt(index, {
-                                    imageUrls: next.length ? next : [],
-                                    imageUrl: cleaned[0] ?? '',
-                                  });
-                                }}
-                              >
-                                删除图片
-                              </button>
-                            ) : null}
-                          </div>
-                        ))}
-                        {!disabled && filled.length < STORE_PACKAGE_IMAGE_MAX_COUNT && slots.length < STORE_PACKAGE_IMAGE_MAX_COUNT ? (
-                          <button
-                            type="button"
-                            className="partner-packages-add"
-                            style={{ marginTop: 0 }}
-                            onClick={() =>
-                              updateAt(index, {
-                                imageUrls: [...slots, ''],
-                                imageUrl: filled[0] ?? '',
-                              })
-                            }
-                          >
-                            <span className="material-symbols-outlined">add_a_photo</span>
-                            添加图片（{filled.length}/{STORE_PACKAGE_IMAGE_MAX_COUNT}）
-                          </button>
-                        ) : null}
-                      </div>
-                    );
-                  })()}
+                          : []
+                    }
+                    onChange={(imageUrls) =>
+                      updateAt(index, {
+                        imageUrls,
+                        imageUrl: imageUrls[0] ?? '',
+                      })
+                    }
+                  />
                 </div>
 
                 <div className="partner-field">

apps/h5-partner/src/pages/StoreCreatePage.tsx

@@ -5,6 +5,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import ChinaRegionPicker from '../components/ChinaRegionPicker';
 
 import OssUploadField from '../components/OssUploadField';
+import MultiOssUploadField from '../components/MultiOssUploadField';
 
 import { request } from '../lib/api';
 import { toastError, toastSuccess } from '../lib/toast';
@@ -40,8 +41,6 @@ import {
 
   validateStoreStep3,
 
-  patchEnvPhotoAt,
-  addEnvPhotoSlot,
   MIN_ENV_PHOTO_COUNT,
 } from '../lib/storeDraft';
 import StorePackagesForm from '../components/StorePackagesForm';
@@ -250,22 +249,6 @@ export default function StoreCreatePage() {
 
 
 
-  function patchEnvPhotoUrl(index: number, url: string) {
-
-    setForm((prev) => ({
-
-      ...prev,
-
-      envPhotoUrls: patchEnvPhotoAt(prev.envPhotoUrls, index, url),
-
-    }));
-
-    setSubmitError('');
-
-  }
-
-
-
   function bindRegionSelection(codes: string[]) {
 
     const binding = resolveRegionBinding(codes, cities);
@@ -957,46 +940,15 @@ export default function StoreCreatePage() {
 
 
           <section className="partner-form-card">
-
             <h3 className="headline-md">环境照片 <span className="text-primary">*</span></h3>
-
-            <p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>至少 {MIN_ENV_PHOTO_COUNT} 张，展示店内整洁环境</p>
-
-            <div className="partner-upload-grid">
-
-              {form.envPhotoUrls.map((url, index) => (
-
-                <OssUploadField
-
-                  key={index}
-
-                  compact
-
-                  bizType="STORE_ENV"
-
-                  mediaType="IMAGE"
-
-                  value={url}
-
-                  onChange={(nextUrl) => patchEnvPhotoUrl(index, nextUrl)}
-
-                />
-
-              ))}
-
-            </div>
-
-            <button
-              type="button"
-              className="partner-btn-outline"
-              style={{ width: '100%', marginTop: 12 }}
-              onClick={() =>
-                setForm((prev) => ({ ...prev, envPhotoUrls: addEnvPhotoSlot(prev.envPhotoUrls) }))
-              }
-            >
-              添加环境照片
-            </button>
-
+            <p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>至少 {MIN_ENV_PHOTO_COUNT} 张，支持批量上传，最多 20 张</p>
+            <MultiOssUploadField
+              bizType="STORE_ENV"
+              maxCount={20}
+              value={form.envPhotoUrls.map((u) => u.trim()).filter(Boolean)}
+              onChange={(urls) => setForm((prev) => ({ ...prev, envPhotoUrls: urls.length ? urls : [''] }))}
+              label={`批量上传（${form.envPhotoUrls.map((u) => u.trim()).filter(Boolean).length}/20）`}
+            />
           </section>
 
 

apps/h5-partner/src/pages/StoreDetailPage.tsx

@@ -5,8 +5,9 @@ import { request } from '../lib/api';
 import { toastError, toastSuccess } from '../lib/toast';
 import { usePartnerSession } from '../contexts/PartnerSessionContext';
 import { canManagePartnerStore } from '../lib/partnerAccess';
-import { MIN_ENV_PHOTO_COUNT, normalizeStringArray, patchEnvPhotoAt, addEnvPhotoSlot } from '../lib/storeDraft';
+import { MIN_ENV_PHOTO_COUNT, normalizeStringArray } from '../lib/storeDraft';
 import OssUploadField from '../components/OssUploadField';
+import MultiOssUploadField from '../components/MultiOssUploadField';
 import TencentLocPickerOverlay from '../components/TencentLocPickerOverlay';
 import {
   canPartnerOpenStore,
@@ -409,26 +410,13 @@ export default function StoreDetailPage() {
           </div>
           {canMutate && !readOnly ? (
             <>
-              <div className="partner-upload-grid">
-                {envPhotoUrls.map((url, index) => (
-                  <OssUploadField
-                    key={index}
-                    compact
-                    bizType="STORE_ENV"
-                    mediaType="IMAGE"
-                    value={url}
-                    onChange={(nextUrl) => setEnvPhotoUrls((prev) => patchEnvPhotoAt(prev, index, nextUrl))}
-                  />
-                ))}
-              </div>
-              <button
-                type="button"
-                className="partner-btn-outline"
-                style={{ width: '100%', marginTop: 12 }}
-                onClick={() => setEnvPhotoUrls((prev) => addEnvPhotoSlot(prev))}
-              >
-                添加环境照片
-              </button>
+              <MultiOssUploadField
+                bizType="STORE_ENV"
+                maxCount={20}
+                value={uniqueEnvUrls(envPhotoUrls)}
+                onChange={(urls) => setEnvPhotoUrls(urls.length ? urls : [''])}
+                label={`批量上传环境照（${uniqueEnvUrls(envPhotoUrls).length}/20）`}
+              />
               <button
                 type="button"
                 className="partner-btn-outline"