商品模板功能上传

apps/admin-web/src/App.tsx

@@ -18,6 +18,7 @@ import HqAccountsPage from './pages/HqAccountsPage';
 import CitiesPage from './pages/CitiesPage';
 import StoreMediaPage from './pages/StoreMediaPage';
 import ProductsPage from './pages/ProductsPage';
+import ProductDetailTemplatesPage from './pages/ProductDetailTemplatesPage';
 import ResourcesPage from './pages/ResourcesPage';
 import StorePayoutsPage from './pages/StorePayoutsPage';
 import PartnerBillsPage from './pages/PartnerBillsPage';
@@ -45,6 +46,7 @@ export default function App() {
         <Route path="/users" element={<UsersPage />} />
         <Route path="/orders" element={<OrdersPage />} />
         <Route path="/products" element={<ProductsPage />} />
+        <Route path="/product-detail-templates" element={<ProductDetailTemplatesPage />} />
         <Route path="/stores" element={<StoresPage />} />
         <Route path="/store-accounts" element={<StoreAccountsPage />} />
         <Route path="/store-media" element={<StoreMediaPage />} />

apps/admin-web/src/components/DetailImageUrlList.tsx

@@ -0,0 +1,49 @@
+import { Button, Form, Space, Typography } from 'antd';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import OssUpload from './OssUpload';
+
+type Props = {
+  name?: string;
+  label: string;
+  bizType?: string;
+  /** 最多可添加张数；不传则不限制 */
+  maxCount?: number;
+};
+
+export default function DetailImageUrlList({
+  name = 'detailImageUrls',
+  label,
+  bizType = 'DETAIL',
+  maxCount,
+}: Props) {
+  return (
+    <>
+      {maxCount != null && (
+        <Typography.Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
+          最多 {maxCount} 张{label}
+        </Typography.Text>
+      )}
+      <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>
+            ))}
+            {(!maxCount || fields.length < maxCount) && (
+              <Button type="dashed" onClick={() => add('')} block icon={<PlusOutlined />}>
+                添加{label}
+              </Button>
+            )}
+          </>
+        )}
+      </Form.List>
+    </>
+  );
+}

apps/admin-web/src/components/ProductDetailTemplatePicker.tsx

@@ -0,0 +1,185 @@
+import { useEffect, useState } from 'react';
+import { Alert, Button, Card, Popconfirm, Select, Space, Spin, Typography, message } from 'antd';
+import type { FormInstance } from 'antd/es/form';
+import { request, type Paginated } from '../lib/api';
+import {
+  getProductDetailTemplate,
+  mapDtoToProductDetailTemplate,
+  type ProductDetailTemplate,
+  type ProductDetailTemplateDto,
+} from '../lib/product-detail-templates';
+
+type Props = {
+  form: FormInstance;
+  /** 当前商品香型，用于推荐匹配模板 */
+  aromaType?: string;
+};
+
+function hasDetailContent(form: FormInstance) {
+  const storyTitle = form.getFieldValue('storyTitle') as string | undefined;
+  const storyText = form.getFieldValue('storyText') as string | undefined;
+  const features = form.getFieldValue('features') as Array<{ title?: string; desc?: string }> | undefined;
+  const detailImageUrls = form.getFieldValue('detailImageUrls') as string[] | undefined;
+  const hasFeatures = (features ?? []).some((f) => f?.title?.trim() || f?.desc?.trim());
+  const hasImages = (detailImageUrls ?? []).some((u) => u?.trim());
+  return Boolean(storyTitle?.trim() || storyText?.trim() || hasFeatures || hasImages);
+}
+
+function applyTemplate(form: FormInstance, template: ProductDetailTemplate) {
+  const { content } = template;
+  const detailImageUrls = content.detailImageUrls?.length
+    ? [...content.detailImageUrls]
+    : [''];
+  form.setFieldsValue({
+    storyTitle: content.storyTitle ?? '',
+    storyText: content.storyText ?? '',
+    detailImageUrls,
+    features:
+      content.features && content.features.length > 0
+        ? content.features.map((f) => ({ ...f }))
+        : [{ icon: 'star', title: '', desc: '' }],
+  });
+  const imageHint = detailImageUrls.filter(Boolean).length;
+  message.success(
+    imageHint > 0
+      ? `已应用模板「${template.label}」（含 ${imageHint} 张详情图，可逐张修改）`
+      : `已应用模板「${template.label}」`,
+  );
+}
+
+export default function ProductDetailTemplatePicker({ form, aromaType }: Props) {
+  const [templates, setTemplates] = useState<ProductDetailTemplate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedId, setSelectedId] = useState<string | undefined>();
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    request<Paginated<ProductDetailTemplateDto>>(
+      '/admin/product-detail-templates?status=ACTIVE&pageSize=100',
+    )
+      .then((res) => {
+        if (cancelled) return;
+        const mapped = res.items.map(mapDtoToProductDetailTemplate);
+        setTemplates(mapped);
+        const defaultId =
+          (aromaType && mapped.find((t) => t.aromaType === aromaType)?.id) ||
+          mapped.find((t) => t.code === 'dukang-classic')?.id ||
+          mapped[0]?.id;
+        setSelectedId(defaultId);
+      })
+      .catch(() => {
+        if (!cancelled) message.error('加载详情模板失败');
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => { cancelled = true; };
+  }, [aromaType]);
+
+  const selected = getProductDetailTemplate(templates, selectedId ?? '');
+
+  function doApply() {
+    if (!selected) return;
+    applyTemplate(form, selected);
+  }
+
+  function handleApply() {
+    if (!selected) return;
+    if (hasDetailContent(form)) {
+      return;
+    }
+    doApply();
+  }
+
+  if (loading) {
+    return (
+      <Card size="small" title="详情模板" style={{ marginBottom: 16 }}>
+        <Spin size="small" />
+      </Card>
+    );
+  }
+
+  if (templates.length === 0) {
+    return (
+      <Card size="small" title="详情模板" style={{ marginBottom: 16 }}>
+        <Typography.Text type="secondary">暂无可用模板，请先在「详情模板」菜单中创建。</Typography.Text>
+      </Card>
+    );
+  }
+
+  return (
+    <Card size="small" title="详情模板" style={{ marginBottom: 16 }}>
+      <Typography.Paragraph type="secondary" style={{ marginBottom: 12 }}>
+        选择模板可一键填充详情长图、故事与卖点；套用后可在下方逐张替换图片。
+      </Typography.Paragraph>
+      <Space direction="vertical" style={{ width: '100%' }} size="middle">
+        <Select
+          style={{ width: '100%' }}
+          placeholder="选择模板"
+          value={selectedId}
+          onChange={setSelectedId}
+          options={templates.map((t) => ({
+            value: t.id,
+            label: t.label,
+          }))}
+        />
+        {selected && (
+          <Alert
+            type="info"
+            showIcon
+            message={selected.description}
+            description={
+              <div style={{ fontSize: 12 }}>
+                {selected.content.storyTitle && (
+                  <div><strong>标题：</strong>{selected.content.storyTitle}</div>
+                )}
+                {(selected.content.detailImageUrls?.length ?? 0) > 0 && (
+                  <div style={{ marginTop: 4 }}>
+                    详情图：<strong>{selected.content.detailImageUrls?.length}</strong> 张（套用后可逐张修改）
+                  </div>
+                )}
+                {(selected.content.features?.length ?? 0) > 0 && (
+                  <div style={{ marginTop: 4 }}>
+                    卖点：{selected.content.features?.map((f) => f.title).join('、')}
+                  </div>
+                )}
+              </div>
+            }
+          />
+        )}
+        <Space>
+          {hasDetailContent(form) ? (
+            <Popconfirm
+              title="将覆盖当前详情图、故事与卖点，是否继续？"
+              onConfirm={doApply}
+              okText="覆盖应用"
+              cancelText="取消"
+            >
+              <Button type="primary">应用模板</Button>
+            </Popconfirm>
+          ) : (
+            <Button type="primary" onClick={handleApply} disabled={!selected}>
+              应用模板
+            </Button>
+          )}
+          {aromaType && (
+            <Button
+              onClick={() => {
+                const matched = templates.find((t) => t.aromaType === aromaType);
+                if (matched) {
+                  setSelectedId(matched.id);
+                  if (!hasDetailContent(form)) {
+                    applyTemplate(form, matched);
+                  }
+                }
+              }}
+            >
+              按香型推荐
+            </Button>
+          )}
+        </Space>
+      </Space>
+    </Card>
+  );
+}

apps/admin-web/src/layouts/AdminLayout.tsx

@@ -22,7 +22,15 @@ const { Header, Sider, Content } = Layout;
 const MENU_ITEMS: MenuProps['items'] = [
   { key: '/', icon: <DashboardOutlined />, label: '概览' },
   { key: '/users', icon: <UserOutlined />, label: '用户' },
-  { key: '/products', icon: <ShoppingOutlined />, label: '商品' },
+  {
+    key: 'products-group',
+    icon: <ShoppingOutlined />,
+    label: '商品',
+    children: [
+      { key: '/products', label: '商品列表' },
+      { key: '/product-detail-templates', label: '详情模板' },
+    ],
+  },
   { key: '/orders', icon: <ShoppingOutlined />, label: '订单' },
   { key: '/resources', icon: <CloudUploadOutlined />, label: 'OSS 资源库' },
   {
@@ -103,7 +111,7 @@ export default function AdminLayout() {
           theme="dark"
           mode="inline"
           selectedKeys={[selectedKey]}
-          defaultOpenKeys={['stores-group', 'partners-group', 'benefit-group', 'logs-group', 'deliveries-group']}
+          defaultOpenKeys={['products-group', 'stores-group', 'partners-group', 'benefit-group', 'logs-group', 'deliveries-group']}
           items={MENU_ITEMS}
           onClick={({ key }) => {
             if (key.startsWith('/')) navigate(key);

apps/admin-web/src/lib/constants.ts

@@ -86,6 +86,11 @@ export const AROMA_TYPE_LABELS: Record<string, string> = {
   NONGXIANG: '浓香型',
 };
 
+export const DETAIL_TEMPLATE_STATUS_LABELS: Record<string, string> = {
+  ACTIVE: '启用',
+  DISABLED: '停用',
+};
+
 export const LEDGER_TYPE_LABELS: Record<string, string> = {
   GRANT: '发放',
   REDEEM: '核销',

apps/admin-web/src/lib/product-detail-templates.ts

@@ -0,0 +1,64 @@
+/** 商品详情页文案模板（Admin 一键套用） */
+export const TEMPLATE_MAX_DETAIL_IMAGES = 20;
+
+export type ProductDetailTemplateContent = {
+  storyTitle?: string;
+  storyText?: string;
+  features?: Array<{ icon: string; title: string; desc: string }>;
+  /** 模板内置详情长图 URL 列表 */
+  detailImageUrls?: string[];
+  /** 建议详情长图张数（与 detailImageUrls 数量同步，供展示） */
+  suggestedDetailImageCount?: number;
+};
+
+export type ProductDetailTemplate = {
+  id: string;
+  code: string;
+  label: string;
+  description: string;
+  aromaType?: string;
+  content: ProductDetailTemplateContent;
+};
+
+/** API 返回的详情模板 DTO（与 shared-types ProductDetailTemplateDto 对齐） */
+export type ProductDetailTemplateDto = {
+  id: string;
+  code: string;
+  name: string;
+  description?: string | null;
+  aromaType?: string | null;
+  storyTitle?: string | null;
+  storyText?: string | null;
+  features?: Array<{ icon: string; title: string; desc: string }>;
+  detailImageUrls?: string[];
+  suggestedDetailImageCount: number;
+  sortOrder: number;
+  status: 'ACTIVE' | 'DISABLED';
+  createdAt: string;
+  updatedAt: string;
+};
+
+export function mapDtoToProductDetailTemplate(dto: ProductDetailTemplateDto): ProductDetailTemplate {
+  const detailImageUrls = (dto.detailImageUrls ?? []).filter(Boolean);
+  return {
+    id: dto.code,
+    code: dto.code,
+    label: dto.name,
+    description: dto.description ?? '',
+    aromaType: dto.aromaType ?? undefined,
+    content: {
+      storyTitle: dto.storyTitle ?? undefined,
+      storyText: dto.storyText ?? undefined,
+      features: dto.features ?? [],
+      detailImageUrls,
+      suggestedDetailImageCount: detailImageUrls.length || dto.suggestedDetailImageCount,
+    },
+  };
+}
+
+export function getProductDetailTemplate(
+  templates: ProductDetailTemplate[],
+  code: string,
+) {
+  return templates.find((t) => t.code === code || t.id === code);
+}

apps/admin-web/src/pages/ProductDetailTemplatesPage.tsx

@@ -0,0 +1,258 @@
+import { useState } from 'react';
+import {
+  Button, Descriptions, Divider, Drawer, Form, Input, InputNumber, Modal, Select, Space,
+  Table, 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, DETAIL_TEMPLATE_STATUS_LABELS, fmtTime,
+} from '../lib/constants';
+import { useAdminList } from '../lib/useAdminList';
+import DetailImageUrlList from '../components/DetailImageUrlList';
+import type { ProductDetailTemplateDto } from '../lib/product-detail-templates';
+import { TEMPLATE_MAX_DETAIL_IMAGES } from '../lib/product-detail-templates';
+
+type Row = ProductDetailTemplateDto;
+
+type TemplateFormValues = {
+  code: string;
+  name: string;
+  description?: string;
+  aromaType?: string | null;
+  storyTitle?: string;
+  storyText?: string;
+  features?: Array<{ icon?: string; title?: string; desc?: string }>;
+  detailImageUrls?: string[];
+  suggestedDetailImageCount?: number;
+  sortOrder?: number;
+  status?: string;
+};
+
+function mapToForm(d: Record<string, unknown>) {
+  const row = d as Row;
+  return {
+    ...row,
+    detailImageUrls: row.detailImageUrls?.length ? row.detailImageUrls : [''],
+    features: row.features?.length
+      ? row.features
+      : [{ icon: 'star', title: '', desc: '' }],
+  };
+}
+
+function buildPayload(v: TemplateFormValues) {
+  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() ?? '',
+    }));
+  return {
+    code: v.code.trim(),
+    name: v.name.trim(),
+    description: v.description?.trim() || undefined,
+    aromaType: v.aromaType || null,
+    storyTitle: v.storyTitle?.trim() || undefined,
+    storyText: v.storyText?.trim() || undefined,
+    features,
+    detailImageUrls,
+    suggestedDetailImageCount: detailImageUrls.length || (v.suggestedDetailImageCount ?? 1),
+    sortOrder: v.sortOrder ?? 0,
+    status: v.status ?? 'ACTIVE',
+  };
+}
+
+function TemplateContentFields() {
+  return (
+    <>
+      <Typography.Text type="secondary">模板详情长图（套用商品时可逐张修改）</Typography.Text>
+      <DetailImageUrlList
+        label="详情图"
+        bizType="DETAIL_TEMPLATE"
+        maxCount={TEMPLATE_MAX_DETAIL_IMAGES}
+      />
+      <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>
+    </>
+  );
+}
+
+export default function ProductDetailTemplatesPage() {
+  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/product-detail-templates',
+    () => {
+      const qs = new URLSearchParams();
+      if (filters.name) qs.set('name', filters.name);
+      if (filters.code) qs.set('code', filters.code);
+      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);
+
+  const columns: ColumnsType<Row> = [
+    { title: '编码', dataIndex: 'code', width: 120 },
+    { title: '名称', dataIndex: 'name', width: 120 },
+    { title: '说明', dataIndex: 'description', width: 200, ellipsis: true },
+    { title: '香型', dataIndex: 'aromaType', width: 90, render: (v) => (v ? AROMA_TYPE_LABELS[v] || v : '—') },
+    { title: '详情图', dataIndex: 'detailImageUrls', width: 80, render: (v: string[] | undefined) => v?.length ?? 0 },
+    { title: '排序', dataIndex: 'sortOrder', width: 60 },
+    { title: '状态', dataIndex: 'status', width: 80, render: (s) => <Tag>{DETAIL_TEMPLATE_STATUS_LABELS[s] || s}</Tag> },
+    { title: '更新', dataIndex: 'updatedAt', width: 160, render: fmtTime },
+    {
+      title: '操作', width: 80,
+      render: (_, row) => (
+        <Button type="link" size="small" onClick={async () => {
+          const d = await request<Record<string, unknown>>(`/admin/product-detail-templates/${row.id}`);
+          setDetail(d);
+          editForm.setFieldsValue(mapToForm(d));
+          setDrawerOpen(true);
+        }}>编辑</Button>
+      ),
+    },
+  ];
+
+  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="code" label="编码"><Input allowClear /></Form.Item>
+        <Form.Item name="status" label="状态">
+          <Select allowClear style={{ width: 110 }} options={Object.entries(DETAIL_TEMPLATE_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: 1100 }}
+        pagination={{ current: page, pageSize, total: data?.total ?? 0, showSizeChanger: true, onChange: (p, ps) => { setPage(p); setPageSize(ps); } }} />
+      <Drawer title="编辑详情模板" width={640} open={drawerOpen} onClose={() => setDrawerOpen(false)}
+        extra={detail && (
+          <Button type="primary" onClick={async () => {
+            const v = await editForm.validateFields();
+            const payload = buildPayload(v);
+            await request(`/admin/product-detail-templates/${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="ID">{String(detail.id)}</Descriptions.Item>
+              <Descriptions.Item label="创建">{fmtTime(String(detail.createdAt))}</Descriptions.Item>
+            </Descriptions>
+            <Form form={editForm} layout="vertical">
+              <Form.Item name="code" label="编码" rules={[{ required: true }]}>
+                <Input />
+              </Form.Item>
+              <Form.Item name="name" label="名称" rules={[{ required: true }]}>
+                <Input />
+              </Form.Item>
+              <Form.Item name="description" label="说明">
+                <Input.TextArea rows={2} />
+              </Form.Item>
+              <Form.Item name="aromaType" label="推荐香型">
+                <Select allowClear placeholder="不限香型" options={Object.entries(AROMA_TYPE_LABELS).map(([value, label]) => ({ value, label }))} />
+              </Form.Item>
+              <Form.Item name="sortOrder" label="排序">
+                <InputNumber min={0} style={{ width: '100%' }} />
+              </Form.Item>
+              <Form.Item name="status" label="状态">
+                <Select options={Object.entries(DETAIL_TEMPLATE_STATUS_LABELS).map(([value, label]) => ({ value, label }))} />
+              </Form.Item>
+              <Divider />
+              <TemplateContentFields />
+            </Form>
+          </>
+        )}
+      </Drawer>
+      <Modal title="新建详情模板" open={createOpen} onCancel={() => setCreateOpen(false)} onOk={async () => {
+        const v = await createForm.validateFields();
+        const payload = buildPayload(v);
+        await request('/admin/product-detail-templates', { method: 'POST', body: JSON.stringify(payload) });
+        message.success('已创建');
+        setCreateOpen(false);
+        createForm.resetFields();
+        void reload();
+      }} width={640}>
+        <Form form={createForm} layout="vertical" initialValues={{
+          status: 'ACTIVE', sortOrder: 0,
+          detailImageUrls: [''],
+          features: [{ icon: 'water_drop', title: '', desc: '' }],
+        }}>
+          <Form.Item name="code" label="编码" rules={[{ required: true }]} extra="唯一标识，如 dukang-classic">
+            <Input />
+          </Form.Item>
+          <Form.Item name="name" label="名称" rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item name="description" label="说明">
+            <Input.TextArea rows={2} />
+          </Form.Item>
+          <Form.Item name="aromaType" label="推荐香型">
+            <Select allowClear placeholder="不限香型" options={Object.entries(AROMA_TYPE_LABELS).map(([value, label]) => ({ value, label }))} />
+          </Form.Item>
+          <Form.Item name="sortOrder" label="排序">
+            <InputNumber min={0} style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item name="status" label="状态">
+            <Select options={Object.entries(DETAIL_TEMPLATE_STATUS_LABELS).map(([value, label]) => ({ value, label }))} />
+          </Form.Item>
+          <Divider />
+          <TemplateContentFields />
+        </Form>
+      </Modal>
+    </div>
+  );
+}

apps/admin-web/src/pages/ProductsPage.tsx

@@ -9,6 +9,9 @@ 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;
@@ -128,14 +131,16 @@ function ImageUrlList({ name, label, bizType }: { name: string; label: string; b
   );
 }
 
-function ProductDetailFields() {
+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>
-      <ImageUrlList name="detailImageUrls" label="详情图" bizType="DETAIL" />
+      <Typography.Text type="secondary">详情长图（DETAIL，可逐张修改）</Typography.Text>
+      <DetailImageUrlList label="详情图" bizType="DETAIL" />
       <Divider />
       <Form.Item name="storyTitle" label="故事标题">
         <Input placeholder="如：千年杜康 · 唯有此处" />
@@ -301,7 +306,16 @@ export default function ProductsPage() {
             <Form form={editForm} layout="vertical">
               <Tabs items={[
                 { key: 'base', label: '基础信息', children: <BaseInfoFields mode="edit" /> },
-                { key: 'detail', label: '详情页', children: <ProductDetailFields /> },
+                {
+                  key: 'detail',
+                  label: '详情页',
+                  children: (
+                    <ProductDetailFields
+                      form={editForm}
+                      aromaType={String(detail.aromaType ?? '')}
+                    />
+                  ),
+                },
               ]} />
             </Form>
           </>
@@ -323,7 +337,20 @@ export default function ProductsPage() {
         }}>
           <Tabs items={[
             { key: 'base', label: '基础信息', children: <BaseInfoFields mode="create" /> },
-            { key: 'detail', label: '详情页', children: <ProductDetailFields /> },
+            {
+              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>