feat: 套餐折叠、小程序 staging API、首页去筛选、企微日志权限

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-08-03 20:17:52 +08:00
parent ac2f9f4793
commit ffa753707b
9 changed files with 558 additions and 261 deletions
@@ -1,5 +1,6 @@
import { useEffect, useState } from 'react';
import { Alert, Button, Form, Input, InputNumber, Space, Typography, message } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import type { StorePackageItemDto } from '@dukang/shared-types';
import { STORE_PACKAGE_MAX_COUNT } from '@dukang/shared-types';
import { request } from '../lib/api';
@@ -12,6 +13,7 @@ function emptyRow(index = 0): PackageRow {
export default function AdminStorePackagesSection({ storeId }: { storeId: string }) {
const [items, setItems] = useState<PackageRow[]>([emptyRow()]);
const [collapsed, setCollapsed] = useState<Record<number, boolean>>({});
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
@@ -40,6 +42,19 @@ export default function AdminStorePackagesSection({ storeId }: { storeId: string
function removeAt(index: number) {
setItems((prev) => prev.filter((_, i) => i !== index).map((item, i) => ({ ...item, sortOrder: i })));
setCollapsed((prev) => {
const next: Record<number, boolean> = {};
Object.entries(prev).forEach(([k, v]) => {
const i = Number(k);
if (i < index) next[i] = v;
else if (i > index) next[i - 1] = v;
});
return next;
});
}
function toggleCollapse(index: number) {
setCollapsed((prev) => ({ ...prev, [index]: !prev[index] }));
}
async function save() {
@@ -100,74 +115,89 @@ export default function AdminStorePackagesSection({ storeId }: { storeId: string
message={`总部直存立即生效,无需审核。同一门店最多 ${STORE_PACKAGE_MAX_COUNT} 条套餐。`}
/>
{items.map((item, index) => (
<div
key={index}
style={{
marginBottom: 16,
padding: 16,
border: '1px solid #f0f0f0',
borderRadius: 8,
background: '#fafafa',
}}
>
<Space style={{ width: '100%', justifyContent: 'space-between', marginBottom: 12 }}>
<Typography.Title level={5} style={{ margin: 0 }}>
{index + 1}
</Typography.Title>
{items.length > 1 ? (
<Button type="link" danger onClick={() => removeAt(index)}>
{items.map((item, index) => {
const isCollapsed = !!collapsed[index];
const displayName = item.name.trim() || `套餐 ${index + 1}`;
return (
<div
key={index}
style={{
marginBottom: 16,
padding: 16,
border: '1px solid #f0f0f0',
borderRadius: 8,
background: '#fafafa',
}}
>
<Space style={{ width: '100%', justifyContent: 'space-between', marginBottom: isCollapsed ? 0 : 12 }}>
<Button
type="text"
icon={isCollapsed ? <DownOutlined /> : <UpOutlined />}
onClick={() => toggleCollapse(index)}
style={{ paddingLeft: 0, height: 'auto' }}
>
<Typography.Title level={5} style={{ margin: 0 }}>
{displayName}
</Typography.Title>
</Button>
{items.length > 1 ? (
<Button type="link" danger onClick={() => removeAt(index)}>
</Button>
) : null}
</Space>
{!isCollapsed ? (
<>
<Form.Item label="套餐名称" required style={{ marginBottom: 12 }}>
<Input
placeholder="如:套餐A"
value={item.name}
onChange={(e) => updateAt(index, { name: e.target.value })}
/>
</Form.Item>
<Form.Item label="价格(元)" required style={{ marginBottom: 12 }}>
<InputNumber
min={0}
precision={2}
style={{ width: '100%' }}
addonAfter="元"
placeholder="198"
value={item.price === '' ? undefined : Number(item.price)}
onChange={(v) => updateAt(index, { price: v != null ? String(v) : '' })}
/>
</Form.Item>
<Form.Item label="菜品" required style={{ marginBottom: 12 }}>
<Input.TextArea
rows={2}
placeholder="红烧肉、红烧鱼、油焖茄子"
value={item.dishes}
onChange={(e) => updateAt(index, { dishes: e.target.value })}
/>
</Form.Item>
<Form.Item label="使用时间" style={{ marginBottom: 12 }}>
<Input
placeholder="节假日除外"
value={item.usableTime || ''}
onChange={(e) => updateAt(index, { usableTime: e.target.value })}
/>
</Form.Item>
<Form.Item label="其他说明" style={{ marginBottom: 0 }}>
<Input
placeholder="不可叠加"
value={item.otherNotes || ''}
onChange={(e) => updateAt(index, { otherNotes: e.target.value })}
/>
</Form.Item>
</>
) : null}
</Space>
<Form.Item label="套餐名称" required style={{ marginBottom: 12 }}>
<Input
placeholder="如:套餐A"
value={item.name}
onChange={(e) => updateAt(index, { name: e.target.value })}
/>
</Form.Item>
<Form.Item label="价格(元)" required style={{ marginBottom: 12 }}>
<InputNumber
min={0}
precision={2}
style={{ width: '100%' }}
addonAfter="元"
placeholder="198"
value={item.price === '' ? undefined : Number(item.price)}
onChange={(v) => updateAt(index, { price: v != null ? String(v) : '' })}
/>
</Form.Item>
<Form.Item label="菜品" required style={{ marginBottom: 12 }}>
<Input.TextArea
rows={2}
placeholder="红烧肉、红烧鱼、油焖茄子"
value={item.dishes}
onChange={(e) => updateAt(index, { dishes: e.target.value })}
/>
</Form.Item>
<Form.Item label="使用时间" style={{ marginBottom: 12 }}>
<Input
placeholder="节假日除外"
value={item.usableTime || ''}
onChange={(e) => updateAt(index, { usableTime: e.target.value })}
/>
</Form.Item>
<Form.Item label="其他说明" style={{ marginBottom: 0 }}>
<Input
placeholder="不可叠加"
value={item.otherNotes || ''}
onChange={(e) => updateAt(index, { otherNotes: e.target.value })}
/>
</Form.Item>
</div>
))}
</div>
);
})}
{items.length < STORE_PACKAGE_MAX_COUNT ? (
<Button onClick={addRow} style={{ marginBottom: 16 }}>
@@ -1,3 +1,4 @@
import { useState } from 'react';
import type { PackageFormItem } from '../lib/storePackages';
import { STORE_PACKAGE_MAX_COUNT } from '@dukang/shared-types';
import { emptyPackage } from '../lib/storePackages';
@@ -11,6 +12,8 @@ type Props = {
};
export default function StorePackagesForm({ items, onChange, disabled, embedded }: Props) {
const [collapsed, setCollapsed] = useState<Record<number, boolean>>({});
function updateAt(index: number, patch: Partial<PackageFormItem>) {
const next = items.map((item, i) => (i === index ? { ...item, ...patch } : item));
onChange(next);
@@ -23,97 +26,126 @@ export default function StorePackagesForm({ items, onChange, disabled, embedded
function removeAt(index: number) {
onChange(items.filter((_, i) => i !== index).map((item, i) => ({ ...item, sortOrder: i })));
setCollapsed((prev) => {
const next: Record<number, boolean> = {};
Object.entries(prev).forEach(([k, v]) => {
const i = Number(k);
if (i < index) next[i] = v;
else if (i > index) next[i - 1] = v;
});
return next;
});
}
function toggleCollapse(index: number) {
setCollapsed((prev) => ({ ...prev, [index]: !prev[index] }));
}
const list = items.length ? items : [emptyPackage(0)];
return (
<div className={`partner-packages-form${embedded ? ' partner-packages-form--embedded' : ''}`}>
{list.map((item, index) => (
<section
key={index}
className="partner-form-card partner-packages-item"
style={embedded ? { marginLeft: 0, marginRight: 0 } : undefined}
>
<div className="partner-packages-item-head">
<div className="partner-section-title" style={{ marginBottom: 0 }}>
<div className="partner-section-bar" />
<h2 className="headline-md"> {index + 1}</h2>
</div>
{!disabled && list.length > 1 ? (
<button type="button" className="partner-packages-remove" onClick={() => removeAt(index)}>
{list.map((item, index) => {
const isCollapsed = !!collapsed[index];
const displayName = item.name.trim() || `套餐 ${index + 1}`;
return (
<section
key={index}
className={`partner-form-card partner-packages-item${isCollapsed ? ' partner-packages-item--collapsed' : ''}`}
style={embedded ? { marginLeft: 0, marginRight: 0 } : undefined}
>
<div className="partner-packages-item-head">
<button
type="button"
className="partner-packages-toggle"
onClick={() => toggleCollapse(index)}
aria-expanded={!isCollapsed}
aria-label={isCollapsed ? '展开套餐' : '收起套餐'}
>
<span className="material-symbols-outlined">
{isCollapsed ? 'expand_more' : 'expand_less'}
</span>
<span className="headline-md">{displayName}</span>
</button>
{!disabled && list.length > 1 ? (
<button type="button" className="partner-packages-remove" onClick={() => removeAt(index)}>
</button>
) : null}
</div>
{!isCollapsed ? (
<>
<div className="partner-field">
<label> <span className="text-primary">*</span></label>
<div className="partner-field-input">
<span className="material-symbols-outlined">restaurant</span>
<input
placeholder="如:套餐A"
value={item.name}
disabled={disabled}
onChange={(e) => updateAt(index, { name: e.target.value })}
/>
</div>
</div>
<div className="partner-field">
<label> <span className="text-primary">*</span></label>
<div className="partner-field-input">
<span className="material-symbols-outlined">payments</span>
<input
type="number"
min={0}
step={0.01}
placeholder="198"
value={item.price}
disabled={disabled}
onChange={(e) => updateAt(index, { price: e.target.value })}
/>
</div>
</div>
<div className="partner-field">
<label> <span className="text-primary">*</span></label>
<textarea
rows={3}
placeholder="红烧肉、红烧鱼、油焖茄子"
value={item.dishes}
disabled={disabled}
onChange={(e) => updateAt(index, { dishes: e.target.value })}
/>
</div>
<div className="partner-field">
<label>使</label>
<div className="partner-field-input">
<span className="material-symbols-outlined">schedule</span>
<input
placeholder="节假日除外"
value={item.usableTime || ''}
disabled={disabled}
onChange={(e) => updateAt(index, { usableTime: e.target.value })}
/>
</div>
</div>
<div className="partner-field">
<label></label>
<div className="partner-field-input">
<span className="material-symbols-outlined">info</span>
<input
placeholder="不可叠加"
value={item.otherNotes || ''}
disabled={disabled}
onChange={(e) => updateAt(index, { otherNotes: e.target.value })}
/>
</div>
</div>
</>
) : null}
</div>
<div className="partner-field">
<label> <span className="text-primary">*</span></label>
<div className="partner-field-input">
<span className="material-symbols-outlined">restaurant</span>
<input
placeholder="如:套餐A"
value={item.name}
disabled={disabled}
onChange={(e) => updateAt(index, { name: e.target.value })}
/>
</div>
</div>
<div className="partner-field">
<label> <span className="text-primary">*</span></label>
<div className="partner-field-input">
<span className="material-symbols-outlined">payments</span>
<input
type="number"
min={0}
step={0.01}
placeholder="198"
value={item.price}
disabled={disabled}
onChange={(e) => updateAt(index, { price: e.target.value })}
/>
</div>
</div>
<div className="partner-field">
<label> <span className="text-primary">*</span></label>
<textarea
rows={3}
placeholder="红烧肉、红烧鱼、油焖茄子"
value={item.dishes}
disabled={disabled}
onChange={(e) => updateAt(index, { dishes: e.target.value })}
/>
</div>
<div className="partner-field">
<label>使</label>
<div className="partner-field-input">
<span className="material-symbols-outlined">schedule</span>
<input
placeholder="节假日除外"
value={item.usableTime || ''}
disabled={disabled}
onChange={(e) => updateAt(index, { usableTime: e.target.value })}
/>
</div>
</div>
<div className="partner-field">
<label></label>
<div className="partner-field-input">
<span className="material-symbols-outlined">info</span>
<input
placeholder="不可叠加"
value={item.otherNotes || ''}
disabled={disabled}
onChange={(e) => updateAt(index, { otherNotes: e.target.value })}
/>
</div>
</div>
</section>
))}
</section>
);
})}
{!disabled && list.length < STORE_PACKAGE_MAX_COUNT ? (
<button type="button" className="partner-packages-add" onClick={addItem}>
+28
View File
@@ -3678,6 +3678,34 @@ header:has(> .app-page-title:only-child),
margin-bottom: var(--space-md);
}
.partner-packages-item--collapsed .partner-packages-item-head {
margin-bottom: 0;
}
.partner-packages-toggle {
display: flex;
align-items: center;
gap: 4px;
border: none;
background: transparent;
padding: 0;
color: inherit;
cursor: pointer;
text-align: left;
flex: 1;
min-width: 0;
}
.partner-packages-toggle .material-symbols-outlined {
font-size: 20px;
color: var(--color-on-surface-variant, #666);
flex-shrink: 0;
}
.partner-packages-toggle .headline-md {
margin: 0;
}
.partner-packages-remove {
border: none;
background: transparent;
+104 -69
View File
@@ -1,3 +1,4 @@
import { useState } from 'react';
import { STORE_PACKAGE_MAX_COUNT } from '@dukang/shared-types';
import { emptyPackage, type PackageFormItem } from '../lib/storePackages';
@@ -8,6 +9,8 @@ type Props = {
};
export default function ShopPackagesForm({ items, onChange, disabled }: Props) {
const [collapsed, setCollapsed] = useState<Record<number, boolean>>({});
function updateAt(index: number, patch: Partial<PackageFormItem>) {
onChange(items.map((item, i) => (i === index ? { ...item, ...patch } : item)));
}
@@ -19,83 +22,115 @@ export default function ShopPackagesForm({ items, onChange, disabled }: Props) {
function removeAt(index: number) {
onChange(items.filter((_, i) => i !== index).map((item, i) => ({ ...item, sortOrder: i })));
setCollapsed((prev) => {
const next: Record<number, boolean> = {};
Object.entries(prev).forEach(([k, v]) => {
const i = Number(k);
if (i < index) next[i] = v;
else if (i > index) next[i - 1] = v;
});
return next;
});
}
function toggleCollapse(index: number) {
setCollapsed((prev) => ({ ...prev, [index]: !prev[index] }));
}
const list = items.length ? items : [emptyPackage(0)];
return (
<div className="shop-packages-form">
{list.map((item, index) => (
<section key={index} className="shop-packages-card">
<div className="shop-packages-card-head">
<h3 className="shop-packages-card-title"> {index + 1}</h3>
{!disabled && list.length > 1 ? (
<button type="button" className="shop-packages-remove" onClick={() => removeAt(index)}>
{list.map((item, index) => {
const isCollapsed = !!collapsed[index];
const displayName = item.name.trim() || `套餐 ${index + 1}`;
return (
<section key={index} className={`shop-packages-card${isCollapsed ? ' shop-packages-card--collapsed' : ''}`}>
<div className="shop-packages-card-head">
<button
type="button"
className="shop-packages-toggle"
onClick={() => toggleCollapse(index)}
aria-expanded={!isCollapsed}
aria-label={isCollapsed ? '展开套餐' : '收起套餐'}
>
<span className="material-symbols-outlined">
{isCollapsed ? 'expand_more' : 'expand_less'}
</span>
<span className="shop-packages-card-title">{displayName}</span>
</button>
{!disabled && list.length > 1 ? (
<button type="button" className="shop-packages-remove" onClick={() => removeAt(index)}>
</button>
) : null}
</div>
{!isCollapsed ? (
<>
<label className="shop-packages-field">
<span className="shop-packages-label"> *</span>
<input
className="shop-packages-input"
placeholder="如:套餐A"
value={item.name}
disabled={disabled}
onChange={(e) => updateAt(index, { name: e.target.value })}
/>
</label>
<label className="shop-packages-field">
<span className="shop-packages-label"> *</span>
<input
className="shop-packages-input"
type="number"
min={0}
step={0.01}
placeholder="198"
value={item.price}
disabled={disabled}
onChange={(e) => updateAt(index, { price: e.target.value })}
/>
</label>
<label className="shop-packages-field">
<span className="shop-packages-label"> *</span>
<textarea
className="shop-packages-textarea"
rows={3}
placeholder="红烧肉、红烧鱼、油焖茄子"
value={item.dishes}
disabled={disabled}
onChange={(e) => updateAt(index, { dishes: e.target.value })}
/>
</label>
<label className="shop-packages-field">
<span className="shop-packages-label">使</span>
<input
className="shop-packages-input"
placeholder="节假日除外"
value={item.usableTime || ''}
disabled={disabled}
onChange={(e) => updateAt(index, { usableTime: e.target.value })}
/>
</label>
<label className="shop-packages-field">
<span className="shop-packages-label"></span>
<input
className="shop-packages-input"
placeholder="不可叠加"
value={item.otherNotes || ''}
disabled={disabled}
onChange={(e) => updateAt(index, { otherNotes: e.target.value })}
/>
</label>
</>
) : null}
</div>
<label className="shop-packages-field">
<span className="shop-packages-label"> *</span>
<input
className="shop-packages-input"
placeholder="如:套餐A"
value={item.name}
disabled={disabled}
onChange={(e) => updateAt(index, { name: e.target.value })}
/>
</label>
<label className="shop-packages-field">
<span className="shop-packages-label"> *</span>
<input
className="shop-packages-input"
type="number"
min={0}
step={0.01}
placeholder="198"
value={item.price}
disabled={disabled}
onChange={(e) => updateAt(index, { price: e.target.value })}
/>
</label>
<label className="shop-packages-field">
<span className="shop-packages-label"> *</span>
<textarea
className="shop-packages-textarea"
rows={3}
placeholder="红烧肉、红烧鱼、油焖茄子"
value={item.dishes}
disabled={disabled}
onChange={(e) => updateAt(index, { dishes: e.target.value })}
/>
</label>
<label className="shop-packages-field">
<span className="shop-packages-label">使</span>
<input
className="shop-packages-input"
placeholder="节假日除外"
value={item.usableTime || ''}
disabled={disabled}
onChange={(e) => updateAt(index, { usableTime: e.target.value })}
/>
</label>
<label className="shop-packages-field">
<span className="shop-packages-label"></span>
<input
className="shop-packages-input"
placeholder="不可叠加"
value={item.otherNotes || ''}
disabled={disabled}
onChange={(e) => updateAt(index, { otherNotes: e.target.value })}
/>
</label>
</section>
))}
</section>
);
})}
{!disabled && list.length < STORE_PACKAGE_MAX_COUNT ? (
<button type="button" className="shop-packages-add" onClick={addItem}>
+24
View File
@@ -1976,6 +1976,30 @@
margin-bottom: 12px;
}
.shop-packages-card--collapsed .shop-packages-card-head {
margin-bottom: 0;
}
.shop-packages-toggle {
display: flex;
align-items: center;
gap: 4px;
border: none;
background: transparent;
padding: 0;
color: inherit;
cursor: pointer;
text-align: left;
flex: 1;
min-width: 0;
}
.shop-packages-toggle .material-symbols-outlined {
font-size: 20px;
color: var(--color-on-surface-variant, #666);
flex-shrink: 0;
}
.shop-packages-card-title {
margin: 0;
font-size: 16px;
+2 -1
View File
@@ -9,9 +9,10 @@ const isDevMode =
process.argv.includes('development');
/** 小程序/H5 请求的后端 origin(不含 /api);本地默认本机,生产构建默认远程 */
// TODO(prod-release): 发生产前改回 https://api.dukanghaoke.com
const API_ORIGIN =
process.env.VITE_API_TARGET ??
(isDevMode ? 'http://localhost:3000' : 'https://api.dukanghaoke.com');
(isDevMode ? 'http://localhost:3000' : 'https://api-test.dukanghaoke.com');
const requireFromApp = createRequire(path.resolve(__dirname, '../package.json'));
+3 -41
View File
@@ -24,7 +24,6 @@ import { capturePromoSceneAndTouchScan } from '../../lib/promo';
import { getProductMainImage } from '../../lib/product-images';
import {
canBuyOnline,
canCrossCity,
canPickupOnSite,
normalizeFulfillmentFlags,
} from '../../lib/product-fulfillment';
@@ -49,22 +48,6 @@ type Product = {
allowCrossCityDelivery?: boolean;
};
type FulfillmentFilter = 'ALL' | 'ONLINE' | 'CROSS_CITY' | 'ON_SITE';
const FULFILLMENT_FILTERS: Array<{ key: FulfillmentFilter; label: string }> = [
{ key: 'ALL', label: '全部' },
{ key: 'ONLINE', label: '线上' },
{ key: 'CROSS_CITY', label: '跨城' },
{ key: 'ON_SITE', label: '现场' },
];
function matchFulfillmentFilter(p: Product, filter: FulfillmentFilter): boolean {
if (filter === 'ALL') return true;
if (filter === 'ONLINE') return canBuyOnline(p);
if (filter === 'CROSS_CITY') return canCrossCity(p);
return canPickupOnSite(p);
}
type MiniHomeConfig = {
banners: string[];
footerUrl: string | null;
@@ -87,7 +70,6 @@ function aromaSectionId(key: AromaKey) {
export default function HomePage() {
const [activeAroma, setActiveAroma] = useState<AromaKey>('QINGXIANG');
const [fulfillmentFilter, setFulfillmentFilter] = useState<FulfillmentFilter>('ALL');
const [products, setProducts] = useState<Product[]>([]);
const [loading, setLoading] = useState(true);
const [displayCity, setDisplayCity] = useState('郑州市');
@@ -205,23 +187,18 @@ export default function HomePage() {
Taro.navigateTo({ url: returnPath });
}
const filteredProducts = useMemo(
() => products.filter((p) => matchFulfillmentFilter(p, fulfillmentFilter)),
[products, fulfillmentFilter],
);
const productsByAroma = useMemo(() => {
const map: Record<AromaKey, Product[]> = {
QINGXIANG: [],
JIANGXIANG: [],
NONGXIANG: [],
};
for (const p of filteredProducts) {
for (const p of products) {
const key = p.aromaType as AromaKey;
if (key in map) map[key].push(p);
}
return map;
}, [filteredProducts]);
}, [products]);
const banners = miniHome.banners;
const footerUrl = miniHome.footerUrl;
@@ -377,28 +354,13 @@ export default function HomePage() {
<Text className="home-aroma-city">{displayCity}</Text>
</View>
<View className="home-fulfillment-filters">
{FULFILLMENT_FILTERS.map((f) => (
<Text
key={f.key}
className={`home-fulfillment-chip${fulfillmentFilter === f.key ? ' home-fulfillment-chip--active' : ''}`}
onClick={() => setFulfillmentFilter(f.key)}
>
{f.label}
</Text>
))}
</View>
<View className="home-product-list">
{loading ? <View className="home-empty"></View> : null}
{!loading && products.length === 0 ? (
<View className="home-empty"></View>
) : null}
{!loading && products.length > 0 && filteredProducts.length === 0 ? (
<View className="home-empty"></View>
) : null}
{!loading &&
filteredProducts.length > 0 &&
products.length > 0 &&
AROMA_TABS.map((t) => {
const list = productsByAroma[t.key];
return (