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>
This commit is contained in:
@@ -14,29 +14,35 @@ type Props = {
|
||||
|
||||
export default function ShopPackagesForm({ items, onChange, disabled }: Props) {
|
||||
const [collapsed, setCollapsed] = useState<Record<number, boolean>>({});
|
||||
const [uploadingKey, setUploadingKey] = useState<string | null>(null);
|
||||
const fileRefs = useRef<Record<string, HTMLInputElement | null>>({});
|
||||
const [uploadingIndex, setUploadingIndex] = useState<number | null>(null);
|
||||
const fileRefs = useRef<Record<number, HTMLInputElement | null>>({});
|
||||
|
||||
async function pickPackageImage(pkgIndex: number, imgIndex: number, file?: File | null) {
|
||||
if (!file || disabled) return;
|
||||
const key = `${pkgIndex}-${imgIndex}`;
|
||||
setUploadingKey(key);
|
||||
async function pickPackageImages(pkgIndex: number, fileList?: FileList | null) {
|
||||
if (!fileList?.length || disabled) return;
|
||||
const current = items[pkgIndex];
|
||||
const existing =
|
||||
Array.isArray(current.imageUrls) && current.imageUrls.length > 0
|
||||
? current.imageUrls.map((u) => String(u ?? '')).filter((u) => u.trim())
|
||||
: current.imageUrl
|
||||
? [String(current.imageUrl)]
|
||||
: [];
|
||||
const room = Math.max(0, STORE_PACKAGE_IMAGE_MAX_COUNT - existing.length);
|
||||
const files = Array.from(fileList).slice(0, room);
|
||||
if (!files.length) return;
|
||||
|
||||
setUploadingIndex(pkgIndex);
|
||||
try {
|
||||
const result = await uploadFileToOss(file, 'STORE_PACKAGE');
|
||||
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] ?? '' });
|
||||
const appended: string[] = [];
|
||||
for (const file of files) {
|
||||
const result = await uploadFileToOss(file, 'STORE_PACKAGE');
|
||||
appended.push(result.url);
|
||||
}
|
||||
const next = [...existing, ...appended];
|
||||
updateAt(pkgIndex, { imageUrls: next, imageUrl: next[0] ?? '' });
|
||||
} finally {
|
||||
setUploadingKey(null);
|
||||
setUploadingIndex(null);
|
||||
const input = fileRefs.current[pkgIndex];
|
||||
if (input) input.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,13 +79,12 @@ 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);
|
||||
const filled =
|
||||
Array.isArray(item.imageUrls) && item.imageUrls.length > 0
|
||||
? item.imageUrls.map((u) => String(u ?? '')).filter((u) => u.trim())
|
||||
: item.imageUrl
|
||||
? [String(item.imageUrl)]
|
||||
: [];
|
||||
return (
|
||||
<section key={index} className={`shop-packages-card${isCollapsed ? ' shop-packages-card--collapsed' : ''}`}>
|
||||
<div className="shop-packages-card-head">
|
||||
@@ -153,76 +158,57 @@ export default function ShopPackagesForm({ items, onChange, disabled }: Props) {
|
||||
</label>
|
||||
|
||||
<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 ? (
|
||||
<span className="shop-packages-label">
|
||||
套餐图片（最多 {STORE_PACKAGE_IMAGE_MAX_COUNT} 张，支持批量）
|
||||
</span>
|
||||
{filled.length > 0 ? (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 8 }}>
|
||||
{filled.map((url, imgIndex) => (
|
||||
<div key={`${url}-${imgIndex}`} style={{ position: 'relative', width: 88 }}>
|
||||
<img
|
||||
src={url}
|
||||
alt=""
|
||||
style={{
|
||||
width: '100%',
|
||||
maxHeight: 160,
|
||||
objectFit: 'cover',
|
||||
borderRadius: 8,
|
||||
marginBottom: 8,
|
||||
}}
|
||||
style={{ width: 88, height: 88, objectFit: 'cover', borderRadius: 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) ? (
|
||||
{!disabled ? (
|
||||
<button
|
||||
type="button"
|
||||
className="shop-packages-remove"
|
||||
style={{ position: 'absolute', top: 2, right: 2, margin: 0 }}
|
||||
onClick={() => {
|
||||
const next = slots.filter((_, i) => i !== imgIndex);
|
||||
const cleaned = next.map((u) => u.trim()).filter(Boolean);
|
||||
updateAt(index, { imageUrls: next, imageUrl: cleaned[0] ?? '' });
|
||||
const next = filled.filter((_, i) => i !== imgIndex);
|
||||
updateAt(index, { imageUrls: next, imageUrl: next[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>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
<input
|
||||
ref={(el) => {
|
||||
fileRefs.current[index] = el;
|
||||
}}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
hidden
|
||||
disabled={disabled || filled.length >= STORE_PACKAGE_IMAGE_MAX_COUNT}
|
||||
onChange={(e) => void pickPackageImages(index, e.target.files)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="shop-packages-add"
|
||||
style={{ marginTop: 0 }}
|
||||
disabled={disabled || uploadingIndex === index || filled.length >= STORE_PACKAGE_IMAGE_MAX_COUNT}
|
||||
onClick={() => fileRefs.current[index]?.click()}
|
||||
>
|
||||
{uploadingIndex === index
|
||||
? '上传中…'
|
||||
: `批量上传（${filled.length}/${STORE_PACKAGE_IMAGE_MAX_COUNT}）`}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label className="shop-packages-field">
|
||||
|
||||
Reference in New Issue
Block a user