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>
2026-08-07 19:40:59 +08:00
parent 76375eff83
commit fe1c6c8158
11 changed files with 518 additions and 415 deletions
@@ -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>
+  );
+}