jacy/dukang
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jacy
2026-08-07 19:24:07 +08:00
parent 0692bebf07
commit 76375eff83
19 changed files with 657 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/h5-shop/src/components/ShopPackagesForm.tsx
+106 -41
View File
@@ -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>
apps/h5-shop/src/lib/storePackages.ts
+34 -11
View File
@@ -1,5 +1,9 @@
import type { StorePackageItemDto } from '@dukang/shared-types';
import { STORE_PACKAGE_MAX_COUNT } from '@dukang/shared-types';
import {
STORE_PACKAGE_IMAGE_MAX_COUNT,
STORE_PACKAGE_MAX_COUNT,
normalizeStorePackageImageUrls,
} from '@dukang/shared-types';
export type PackageFormItem = StorePackageItemDto;
@@ -11,24 +15,34 @@ export function emptyPackage(index = 0): PackageFormItem {
usableTime: '',
otherNotes: '',
imageUrl: '',
imageUrls: [],
sortOrder: index,
};
}
export function normalizePackageFormItems(raw: PackageFormItem[]): PackageFormItem[] {
return raw
.map((item, index) => ({
name: item.name.trim(),
price: item.price.trim(),
dishes: item.dishes.trim(),
usableTime: item.usableTime?.trim() || '',
otherNotes: item.otherNotes?.trim() || '',
imageUrl: item.imageUrl?.trim() || '',
sortOrder: index,
}))
.map((item, index) => {
const imageUrls = normalizeStorePackageImageUrls(item);
return {
name: item.name.trim(),
price: item.price.trim(),
dishes: item.dishes.trim(),
usableTime: item.usableTime?.trim() || '',
otherNotes: item.otherNotes?.trim() || '',
imageUrl: imageUrls[0] ?? '',
imageUrls,
sortOrder: index,
};
})
.filter(
(item) =>
item.name || item.price || item.dishes || item.usableTime || item.otherNotes || item.imageUrl,
item.name ||
item.price ||
item.dishes ||
item.usableTime ||
item.otherNotes ||
item.imageUrls.length > 0,
);
}
@@ -43,6 +57,15 @@ export function validatePackageFormItems(items: PackageFormItem[]): string | nul
const price = Number(item.price);
if (!Number.isFinite(price) || price < 0) return `第 ${i + 1} 条套餐价格须为非负数字`;
if (!item.dishes) return `第 ${i + 1} 条套餐菜品不能为空`;
if ((item.imageUrls?.length ?? 0) > STORE_PACKAGE_IMAGE_MAX_COUNT) {
return `第 ${i + 1} 条套餐图片最多 ${STORE_PACKAGE_IMAGE_MAX_COUNT} 张`;
}
}
return null;
}
export function formatPackagePrice(price: string | number) {
const n = typeof price === 'number' ? price : Number(price);
if (!Number.isFinite(n)) return String(price);
return n % 1 === 0 ? String(n) : n.toFixed(2);
}
apps/h5-shop/src/pages/PackagesPage.tsx
+13 -1
View File
@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import type { StorePackagesResponse } from '@dukang/shared-types';
import { normalizeStorePackageImageUrls } from '@dukang/shared-types';
import PullToRefresh from '@dukang/shared-ui/PullToRefresh';
import ShopPackagesForm from '../components/ShopPackagesForm';
import { request } from '../lib/api';
@@ -30,7 +31,18 @@ export default function PackagesPage() {
: data.live?.length
? data.live
: [emptyPackage()];
setItems(base.map((p, i) => ({ ...p, price: String(p.price), sortOrder: i })));
setItems(
base.map((p, i) => {
const imageUrls = normalizeStorePackageImageUrls(p);
return {
...p,
price: String(p.price),
imageUrl: imageUrls[0] ?? '',
imageUrls,
sortOrder: i,
};
}),
);
setPending(data.pendingRequest ?? null);
setMsg('');
} catch (e) {