商品模板功能上传

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>