feat(v3.4.15): HQ store media edit and package images up to 20

Allow HQ to replace/delete store photos; support multi-image packages with a 20-image cap.

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

apps/h5-shop/src/components/ShopPackagesForm.tsx

@@ -1,5 +1,8 @@
 import { useRef, useState } from 'react';
-import { STORE_PACKAGE_MAX_COUNT } from '@dukang/shared-types';
+import {
+  STORE_PACKAGE_IMAGE_MAX_COUNT,
+  STORE_PACKAGE_MAX_COUNT,
+} from '@dukang/shared-types';
 import { emptyPackage, type PackageFormItem } from '../lib/storePackages';
 import { uploadFileToOss } from '../lib/upload';
 
@@ -11,17 +14,29 @@ type Props = {
 
 export default function ShopPackagesForm({ items, onChange, disabled }: Props) {
   const [collapsed, setCollapsed] = useState<Record<number, boolean>>({});
-  const [uploadingIndex, setUploadingIndex] = useState<number | null>(null);
-  const fileRefs = useRef<Record<number, HTMLInputElement | null>>({});
+  const [uploadingKey, setUploadingKey] = useState<string | null>(null);
+  const fileRefs = useRef<Record<string, HTMLInputElement | null>>({});
 
-  async function pickPackageImage(index: number, file?: File | null) {
+  async function pickPackageImage(pkgIndex: number, imgIndex: number, file?: File | null) {
     if (!file || disabled) return;
-    setUploadingIndex(index);
+    const key = `${pkgIndex}-${imgIndex}`;
+    setUploadingKey(key);
     try {
       const result = await uploadFileToOss(file, 'STORE_PACKAGE');
-      updateAt(index, { imageUrl: result.url });
+      const current = items[pkgIndex];
+      const imageUrls =
+        Array.isArray(current.imageUrls) && current.imageUrls.length > 0
+          ? current.imageUrls.map((u) => String(u ?? ''))
+          : current.imageUrl
+            ? [String(current.imageUrl)]
+            : [];
+      const next = [...imageUrls];
+      if (imgIndex < next.length) next[imgIndex] = result.url;
+      else next.push(result.url);
+      const cleaned = next.map((u) => u.trim()).filter(Boolean);
+      updateAt(pkgIndex, { imageUrls: next, imageUrl: cleaned[0] ?? '' });
     } finally {
-      setUploadingIndex(null);
+      setUploadingKey(null);
     }
   }
 
@@ -58,6 +73,13 @@ export default function ShopPackagesForm({ items, onChange, disabled }: Props) {
       {list.map((item, index) => {
         const isCollapsed = !!collapsed[index];
         const displayName = item.name.trim() || `套餐 ${index + 1}`;
+        const imageUrls = Array.isArray(item.imageUrls) && item.imageUrls.length > 0
+          ? item.imageUrls.map((u) => String(u ?? ''))
+          : item.imageUrl
+            ? [String(item.imageUrl)]
+            : [''];
+        const slots = imageUrls;
+        const filled = slots.map((u) => u.trim()).filter(Boolean);
         return (
           <section key={index} className={`shop-packages-card${isCollapsed ? ' shop-packages-card--collapsed' : ''}`}>
             <div className="shop-packages-card-head">
@@ -83,7 +105,7 @@ export default function ShopPackagesForm({ items, onChange, disabled }: Props) {
             {!isCollapsed ? (
               <>
                 <label className="shop-packages-field">
-                  <span className="shop-packages-label">套餐名称 *</span>
+                  <span className="shop-packages-label">套餐名称</span>
                   <input
                     className="shop-packages-input"
                     placeholder="如：套餐A"
@@ -94,12 +116,12 @@ export default function ShopPackagesForm({ items, onChange, disabled }: Props) {
                 </label>
 
                 <label className="shop-packages-field">
-                  <span className="shop-packages-label">价格（元） *</span>
+                  <span className="shop-packages-label">价格（元）</span>
                   <input
                     className="shop-packages-input"
                     type="number"
                     min={0}
-                    step={0.01}
+                    step="0.01"
                     placeholder="198"
                     value={item.price}
                     disabled={disabled}
@@ -108,10 +130,10 @@ export default function ShopPackagesForm({ items, onChange, disabled }: Props) {
                 </label>
 
                 <label className="shop-packages-field">
-                  <span className="shop-packages-label">菜品 *</span>
+                  <span className="shop-packages-label">菜品</span>
                   <textarea
-                    className="shop-packages-textarea"
-                    rows={3}
+                    className="shop-packages-input"
+                    rows={2}
                     placeholder="红烧肉、红烧鱼、油焖茄子"
                     value={item.dishes}
                     disabled={disabled}
@@ -130,35 +152,78 @@ export default function ShopPackagesForm({ items, onChange, disabled }: Props) {
                   />
                 </label>
 
-                <label className="shop-packages-field">
-                  <span className="shop-packages-label">套餐图片</span>
-                  {item.imageUrl ? (
-                    <img
-                      src={item.imageUrl}
-                      alt=""
-                      style={{ width: '100%', maxHeight: 160, objectFit: 'cover', borderRadius: 8, marginBottom: 8 }}
-                    />
+                <div className="shop-packages-field">
+                  <span className="shop-packages-label">套餐图片（最多 {STORE_PACKAGE_IMAGE_MAX_COUNT} 张）</span>
+                  {slots.map((url, imgIndex) => {
+                    const key = `${index}-${imgIndex}`;
+                    return (
+                      <div key={key} style={{ marginBottom: 12 }}>
+                        {url ? (
+                          <img
+                            src={url}
+                            alt=""
+                            style={{
+                              width: '100%',
+                              maxHeight: 160,
+                              objectFit: 'cover',
+                              borderRadius: 8,
+                              marginBottom: 8,
+                            }}
+                          />
+                        ) : null}
+                        <input
+                          ref={(el) => {
+                            fileRefs.current[key] = el;
+                          }}
+                          type="file"
+                          accept="image/*"
+                          hidden
+                          disabled={disabled}
+                          onChange={(e) => void pickPackageImage(index, imgIndex, e.target.files?.[0])}
+                        />
+                        <div style={{ display: 'flex', gap: 8 }}>
+                          <button
+                            type="button"
+                            className="shop-packages-add"
+                            style={{ marginTop: 0, flex: 1 }}
+                            disabled={disabled || uploadingKey === key}
+                            onClick={() => fileRefs.current[key]?.click()}
+                          >
+                            {uploadingKey === key ? '上传中…' : url ? '更换图片' : '上传图片'}
+                          </button>
+                          {!disabled && (filled.length > 0 || url) ? (
+                            <button
+                              type="button"
+                              className="shop-packages-remove"
+                              onClick={() => {
+                                const next = slots.filter((_, i) => i !== imgIndex);
+                                const cleaned = next.map((u) => u.trim()).filter(Boolean);
+                                updateAt(index, { imageUrls: next, imageUrl: cleaned[0] ?? '' });
+                              }}
+                            >
+                              删除
+                            </button>
+                          ) : null}
+                        </div>
+                      </div>
+                    );
+                  })}
+                  {!disabled && filled.length < STORE_PACKAGE_IMAGE_MAX_COUNT && slots.length < STORE_PACKAGE_IMAGE_MAX_COUNT ? (
+                    <button
+                      type="button"
+                      className="shop-packages-add"
+                      style={{ marginTop: 0 }}
+                      onClick={() =>
+                        updateAt(index, {
+                          imageUrls: [...slots, ''],
+                          imageUrl: filled[0] ?? '',
+                        })
+                      }
+                    >
+                      添加图片（{filled.length}/{STORE_PACKAGE_IMAGE_MAX_COUNT}）
+                    </button>
                   ) : null}
-                  <input
-                    ref={(el) => {
-                      fileRefs.current[index] = el;
-                    }}
-                    type="file"
-                    accept="image/*"
-                    hidden
-                    disabled={disabled}
-                    onChange={(e) => void pickPackageImage(index, e.target.files?.[0])}
-                  />
-                  <button
-                    type="button"
-                    className="shop-packages-add"
-                    style={{ marginTop: 0 }}
-                    disabled={disabled || uploadingIndex === index}
-                    onClick={() => fileRefs.current[index]?.click()}
-                  >
-                    {uploadingIndex === index ? '上传中…' : item.imageUrl ? '更换图片' : '上传图片'}
-                  </button>
-                </label>
+                </div>
 
                 <label className="shop-packages-field">
                   <span className="shop-packages-label">其他说明</span>