386 lines
15 KiB
TypeScript
386 lines
15 KiB
TypeScript
import { useState } from 'react';
|
||
import {
|
||
Button, Descriptions, Divider, Drawer, Form, Input, InputNumber, Modal, Popconfirm, Select, Space,
|
||
Table, Tabs, Tag, Typography, message,
|
||
} from 'antd';
|
||
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
|
||
import type { ColumnsType } from 'antd/es/table';
|
||
import { request } from '../lib/api';
|
||
import { AROMA_TYPE_LABELS, PRODUCT_STATUS_LABELS, fmtTime } from '../lib/constants';
|
||
import { useAdminList } from '../lib/useAdminList';
|
||
import OssUpload from '../components/OssUpload';
|
||
import DetailImageUrlList from '../components/DetailImageUrlList';
|
||
import ProductDetailTemplatePicker from '../components/ProductDetailTemplatePicker';
|
||
import type { FormInstance } from 'antd/es/form';
|
||
|
||
type ProductDetailContentDto = {
|
||
storyTitle?: string;
|
||
storyText?: string;
|
||
features?: Array<{ icon: string; title: string; desc: string }>;
|
||
};
|
||
|
||
type Row = {
|
||
id: string;
|
||
skuCode: string;
|
||
barcode69: string;
|
||
name: string;
|
||
subtitle?: string;
|
||
aromaType: string;
|
||
spec: string;
|
||
price: number;
|
||
benefitAmount: number;
|
||
status: string;
|
||
sortOrder: number;
|
||
mainImageUrl?: string | null;
|
||
carouselUrls?: string[];
|
||
detailImageUrls?: string[];
|
||
detailContent?: ProductDetailContentDto | null;
|
||
createdAt: string;
|
||
};
|
||
|
||
type ProductFormValues = {
|
||
skuCode?: string;
|
||
barcode69?: string;
|
||
name: string;
|
||
subtitle?: string;
|
||
aromaType?: string;
|
||
spec: string;
|
||
price: number;
|
||
benefitAmount?: number;
|
||
status?: string;
|
||
sortOrder?: number;
|
||
coverUrl?: string;
|
||
carouselUrls?: string[];
|
||
detailImageUrls?: string[];
|
||
storyTitle?: string;
|
||
storyText?: string;
|
||
features?: Array<{ icon?: string; title?: string; desc?: string }>;
|
||
};
|
||
|
||
function mapDetailToForm(d: Record<string, unknown>) {
|
||
const detail = (d.detailContent ?? {}) as ProductDetailContentDto;
|
||
return {
|
||
...d,
|
||
coverUrl: (d as { mainImageUrl?: string }).mainImageUrl,
|
||
carouselUrls: ((d as Row).carouselUrls?.length ? (d as Row).carouselUrls : ['']) as string[],
|
||
detailImageUrls: ((d as Row).detailImageUrls?.length ? (d as Row).detailImageUrls : ['']) as string[],
|
||
storyTitle: detail.storyTitle ?? '',
|
||
storyText: detail.storyText ?? '',
|
||
features: detail.features?.length
|
||
? detail.features
|
||
: [{ icon: 'water_drop', title: '', desc: '' }],
|
||
};
|
||
}
|
||
|
||
function buildProductPayload(v: ProductFormValues) {
|
||
const carouselUrls = (v.carouselUrls ?? []).map((u) => u?.trim()).filter(Boolean);
|
||
const detailImageUrls = (v.detailImageUrls ?? []).map((u) => u?.trim()).filter(Boolean);
|
||
const features = (v.features ?? [])
|
||
.filter((f) => f?.title?.trim() || f?.desc?.trim())
|
||
.map((f) => ({
|
||
icon: f.icon?.trim() || 'star',
|
||
title: f.title?.trim() || '',
|
||
desc: f.desc?.trim() || '',
|
||
}));
|
||
|
||
const detailContent: ProductDetailContentDto = {
|
||
storyTitle: v.storyTitle?.trim() || undefined,
|
||
storyText: v.storyText?.trim() || undefined,
|
||
features: features.length ? features : undefined,
|
||
};
|
||
|
||
return {
|
||
skuCode: v.skuCode,
|
||
barcode69: v.barcode69,
|
||
name: v.name,
|
||
subtitle: v.subtitle,
|
||
aromaType: v.aromaType,
|
||
spec: v.spec,
|
||
price: v.price,
|
||
benefitAmount: v.benefitAmount,
|
||
status: v.status,
|
||
sortOrder: v.sortOrder,
|
||
coverUrl: v.coverUrl,
|
||
carouselUrls,
|
||
detailImageUrls,
|
||
detailContent,
|
||
};
|
||
}
|
||
|
||
function ImageUrlList({ name, label, bizType }: { name: string; label: string; bizType: string }) {
|
||
return (
|
||
<Form.List name={name}>
|
||
{(fields, { add, remove }) => (
|
||
<>
|
||
{fields.map((field) => (
|
||
<Space key={field.key} align="start" style={{ display: 'flex', marginBottom: 8 }}>
|
||
<Form.Item {...field} style={{ flex: 1, marginBottom: 0 }}>
|
||
<OssUpload bizType={bizType} mediaType="IMAGE" />
|
||
</Form.Item>
|
||
{fields.length > 1 && (
|
||
<MinusCircleOutlined onClick={() => remove(field.name)} style={{ marginTop: 8 }} />
|
||
)}
|
||
</Space>
|
||
))}
|
||
<Button type="dashed" onClick={() => add('')} block icon={<PlusOutlined />}>
|
||
添加{label}
|
||
</Button>
|
||
</>
|
||
)}
|
||
</Form.List>
|
||
);
|
||
}
|
||
|
||
function ProductDetailFields({ form, aromaType }: { form: FormInstance; aromaType?: string }) {
|
||
return (
|
||
<>
|
||
<ProductDetailTemplatePicker form={form} aromaType={aromaType} />
|
||
<Divider />
|
||
<Typography.Text type="secondary">详情页轮播（CAROUSEL）</Typography.Text>
|
||
<ImageUrlList name="carouselUrls" label="轮播图" bizType="CAROUSEL" />
|
||
<Divider />
|
||
<Typography.Text type="secondary">详情长图（DETAIL，可逐张修改）</Typography.Text>
|
||
<DetailImageUrlList label="详情图" bizType="DETAIL" />
|
||
<Divider />
|
||
<Form.Item name="storyTitle" label="故事标题">
|
||
<Input placeholder="如：千年杜康 · 唯有此处" />
|
||
</Form.Item>
|
||
<Form.Item name="storyText" label="故事正文">
|
||
<Input.TextArea rows={4} placeholder="商品故事描述" />
|
||
</Form.Item>
|
||
<Typography.Text type="secondary">卖点特色</Typography.Text>
|
||
<Form.List name="features">
|
||
{(fields, { add, remove }) => (
|
||
<>
|
||
{fields.map((field) => (
|
||
<Space key={field.key} direction="vertical" style={{ display: 'flex', marginBottom: 12, width: '100%' }}>
|
||
<Space align="start">
|
||
<Form.Item {...field} name={[field.name, 'icon']} label="图标" style={{ marginBottom: 0 }}>
|
||
<Input placeholder="material icon 名" style={{ width: 140 }} />
|
||
</Form.Item>
|
||
<Form.Item {...field} name={[field.name, 'title']} label="标题" style={{ marginBottom: 0, flex: 1 }}>
|
||
<Input placeholder="标题" />
|
||
</Form.Item>
|
||
{fields.length > 1 && (
|
||
<MinusCircleOutlined onClick={() => remove(field.name)} style={{ marginTop: 30 }} />
|
||
)}
|
||
</Space>
|
||
<Form.Item {...field} name={[field.name, 'desc']} label="描述" style={{ marginBottom: 0 }}>
|
||
<Input placeholder="简短描述" />
|
||
</Form.Item>
|
||
</Space>
|
||
))}
|
||
<Button type="dashed" onClick={() => add({ icon: 'star', title: '', desc: '' })} block icon={<PlusOutlined />}>
|
||
添加卖点
|
||
</Button>
|
||
</>
|
||
)}
|
||
</Form.List>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function BaseInfoFields({ mode }: { mode: 'create' | 'edit' }) {
|
||
return (
|
||
<>
|
||
{mode === 'create' && (
|
||
<>
|
||
<Form.Item name="skuCode" label="SKU" rules={[{ required: true }]}>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="barcode69" label="69码" rules={[{ required: true }]}>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="aromaType" label="香型" rules={[{ required: true }]}>
|
||
<Select options={Object.entries(AROMA_TYPE_LABELS).map(([value, label]) => ({ value, label }))} />
|
||
</Form.Item>
|
||
</>
|
||
)}
|
||
<Form.Item name="name" label="商品名" rules={[{ required: true }]}>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="subtitle" label="副标题">
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="spec" label="规格" rules={[{ required: true }]}>
|
||
<Input placeholder="500ml | 52度" />
|
||
</Form.Item>
|
||
<Form.Item name="price" label="售价" rules={[{ required: true }]}>
|
||
<InputNumber min={0} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
<Form.Item name="benefitAmount" label="权益额">
|
||
<InputNumber min={0} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
<Form.Item name="status" label="状态">
|
||
<Select options={Object.entries(PRODUCT_STATUS_LABELS).map(([value, label]) => ({ value, label }))} />
|
||
</Form.Item>
|
||
<Form.Item name="sortOrder" label="排序">
|
||
<InputNumber min={0} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
<Form.Item name="coverUrl" label="封面">
|
||
<OssUpload bizType="COVER" mediaType="IMAGE" />
|
||
</Form.Item>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default function ProductsPage() {
|
||
const [form] = Form.useForm();
|
||
const [editForm] = Form.useForm();
|
||
const [createForm] = Form.useForm();
|
||
const [filters, setFilters] = useState<Record<string, string>>({});
|
||
const { data, loading, page, pageSize, setPage, setPageSize, reload } = useAdminList<Row>(
|
||
'/admin/products',
|
||
() => {
|
||
const qs = new URLSearchParams();
|
||
if (filters.name) qs.set('name', filters.name);
|
||
if (filters.status) qs.set('status', filters.status);
|
||
if (filters.aromaType) qs.set('aromaType', filters.aromaType);
|
||
return qs;
|
||
},
|
||
[filters],
|
||
);
|
||
const [detail, setDetail] = useState<Record<string, unknown> | null>(null);
|
||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||
const [createOpen, setCreateOpen] = useState(false);
|
||
|
||
async function handleDelete(row: Row) {
|
||
try {
|
||
await request(`/admin/products/${row.id}`, { method: 'DELETE' });
|
||
message.success('已删除');
|
||
if (detail?.id === row.id) {
|
||
setDrawerOpen(false);
|
||
setDetail(null);
|
||
}
|
||
void reload();
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '删除失败');
|
||
}
|
||
}
|
||
|
||
const columns: ColumnsType<Row> = [
|
||
{ title: 'SKU', dataIndex: 'skuCode', width: 90 },
|
||
{ title: '商品名', dataIndex: 'name', width: 180, ellipsis: true },
|
||
{ title: '香型', dataIndex: 'aromaType', width: 80, render: (v) => AROMA_TYPE_LABELS[v] || v },
|
||
{ title: '规格', dataIndex: 'spec', width: 120, ellipsis: true },
|
||
{ title: '售价', dataIndex: 'price', width: 80, render: (v) => `¥${v}` },
|
||
{ title: '权益额', dataIndex: 'benefitAmount', width: 80, render: (v) => `¥${v}` },
|
||
{ title: '状态', dataIndex: 'status', width: 80, render: (s) => <Tag>{PRODUCT_STATUS_LABELS[s] || s}</Tag> },
|
||
{ title: '排序', dataIndex: 'sortOrder', width: 60 },
|
||
{ title: '创建', dataIndex: 'createdAt', width: 160, render: fmtTime },
|
||
{
|
||
title: '操作', width: 120,
|
||
render: (_, row) => (
|
||
<Space size={0}>
|
||
<Button type="link" size="small" onClick={async () => {
|
||
const d = await request<Record<string, unknown>>(`/admin/products/${row.id}`);
|
||
setDetail(d);
|
||
editForm.setFieldsValue(mapDetailToForm(d));
|
||
setDrawerOpen(true);
|
||
}}>编辑</Button>
|
||
<Popconfirm
|
||
title="确认删除该商品？"
|
||
description={`将永久删除「${row.name}」（${row.skuCode}），此操作不可恢复。`}
|
||
okText="确认删除"
|
||
cancelText="取消"
|
||
okButtonProps={{ danger: true }}
|
||
onConfirm={() => handleDelete(row)}
|
||
>
|
||
<Button type="link" size="small" danger>删除</Button>
|
||
</Popconfirm>
|
||
</Space>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div>
|
||
<Space style={{ marginBottom: 16, width: '100%', justifyContent: 'space-between' }}>
|
||
<Typography.Title level={4} style={{ margin: 0 }}>商品管理</Typography.Title>
|
||
<Button type="primary" onClick={() => setCreateOpen(true)}>新建商品</Button>
|
||
</Space>
|
||
<Form form={form} layout="inline" style={{ marginBottom: 16 }} onFinish={(v) => { setFilters(v); setPage(1); }}>
|
||
<Form.Item name="name" label="名称"><Input allowClear /></Form.Item>
|
||
<Form.Item name="status" label="状态">
|
||
<Select allowClear style={{ width: 110 }} options={Object.entries(PRODUCT_STATUS_LABELS).map(([value, label]) => ({ value, label }))} />
|
||
</Form.Item>
|
||
<Form.Item name="aromaType" label="香型">
|
||
<Select allowClear style={{ width: 110 }} options={Object.entries(AROMA_TYPE_LABELS).map(([value, label]) => ({ value, label }))} />
|
||
</Form.Item>
|
||
<Form.Item><Button type="primary" htmlType="submit">查询</Button></Form.Item>
|
||
</Form>
|
||
<Table rowKey="id" className="admin-table-nowrap" loading={loading} columns={columns} dataSource={data?.items ?? []} scroll={{ x: 1140 }}
|
||
pagination={{ current: page, pageSize, total: data?.total ?? 0, showSizeChanger: true, onChange: (p, ps) => { setPage(p); setPageSize(ps); } }} />
|
||
<Drawer title="编辑商品" width={720} open={drawerOpen} onClose={() => setDrawerOpen(false)}
|
||
extra={detail && (
|
||
<Button type="primary" onClick={async () => {
|
||
const v = await editForm.validateFields();
|
||
const payload = buildProductPayload(v);
|
||
await request(`/admin/products/${detail.id}`, { method: 'PUT', body: JSON.stringify(payload) });
|
||
message.success('已保存');
|
||
setDrawerOpen(false);
|
||
void reload();
|
||
}}>保存</Button>
|
||
)}>
|
||
{detail && (
|
||
<>
|
||
<Descriptions column={1} bordered size="small" style={{ marginBottom: 16 }}>
|
||
<Descriptions.Item label="SKU">{String(detail.skuCode)}</Descriptions.Item>
|
||
<Descriptions.Item label="69码">{String(detail.barcode69)}</Descriptions.Item>
|
||
<Descriptions.Item label="香型">{AROMA_TYPE_LABELS[String(detail.aromaType)] || String(detail.aromaType)}</Descriptions.Item>
|
||
</Descriptions>
|
||
<Form form={editForm} layout="vertical">
|
||
<Tabs items={[
|
||
{ key: 'base', label: '基础信息', children: <BaseInfoFields mode="edit" /> },
|
||
{
|
||
key: 'detail',
|
||
label: '详情页',
|
||
children: (
|
||
<ProductDetailFields
|
||
form={editForm}
|
||
aromaType={String(detail.aromaType ?? '')}
|
||
/>
|
||
),
|
||
},
|
||
]} />
|
||
</Form>
|
||
</>
|
||
)}
|
||
</Drawer>
|
||
<Modal title="新建商品" open={createOpen} onCancel={() => setCreateOpen(false)} onOk={async () => {
|
||
const v = await createForm.validateFields();
|
||
const payload = buildProductPayload(v);
|
||
await request('/admin/products', { method: 'POST', body: JSON.stringify(payload) });
|
||
message.success('已创建');
|
||
setCreateOpen(false);
|
||
createForm.resetFields();
|
||
void reload();
|
||
}} width={720}>
|
||
<Form form={createForm} layout="vertical" initialValues={{
|
||
aromaType: 'QINGXIANG', status: 'DRAFT', sortOrder: 0,
|
||
carouselUrls: [''], detailImageUrls: [''],
|
||
features: [{ icon: 'water_drop', title: '', desc: '' }],
|
||
}}>
|
||
<Tabs items={[
|
||
{ key: 'base', label: '基础信息', children: <BaseInfoFields mode="create" /> },
|
||
{
|
||
key: 'detail',
|
||
label: '详情页',
|
||
children: (
|
||
<Form.Item noStyle shouldUpdate={(prev, cur) => prev.aromaType !== cur.aromaType}>
|
||
{() => (
|
||
<ProductDetailFields
|
||
form={createForm}
|
||
aromaType={createForm.getFieldValue('aromaType') as string | undefined}
|
||
/>
|
||
)}
|
||
</Form.Item>
|
||
),
|
||
},
|
||
]} />
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
}
|