v3.5.4版本提交

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

@@ -0,0 +1,445 @@
+import { useMemo, useState } from 'react';
+import {
+  Button, Input, InputNumber, Radio, Select, Space, Switch, Table, Typography, message,
+} from 'antd';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { request } from '../lib/api';
+import { PRODUCT_STATUS_LABELS } from '../lib/constants';
+
+type SpecValue = { id?: string; name: string; sortOrder?: number };
+type SpecAttr = { id?: string; name: string; sortOrder?: number; values: SpecValue[] };
+type SkuRow = {
+  id?: string;
+  specValueIds: string[];
+  skuCode?: string;
+  barcode69: string;
+  price: number;
+  benefitAmount?: number;
+  status: string;
+  allowOnlinePurchase: boolean;
+  allowCrossCityDelivery: boolean;
+  allowOnSitePickup: boolean;
+  saleUnit: 'BOTTLE' | 'BOX';
+  bottlesPerUnit: number;
+  isDefault: boolean;
+  sortOrder?: number;
+  specText?: string;
+};
+
+function cartesian(attrs: SpecAttr[]): string[][] {
+  if (!attrs.length) return [[]];
+  return attrs.reduce<string[][]>(
+    (acc, attr) => {
+      const next: string[][] = [];
+      const values = attr.values.filter((v) => v.name?.trim());
+      for (const prev of acc) {
+        for (const v of values) {
+          const vid = v.id || `__new__:${attr.name}:${v.name}`;
+          next.push([...prev, vid]);
+        }
+      }
+      return next.length ? next : acc;
+    },
+    [[]],
+  );
+}
+
+function keyOf(ids: string[]) {
+  return [...ids].sort().join('_');
+}
+
+type Props = {
+  productId: string;
+  initialAttrs: SpecAttr[];
+  initialSkus: SkuRow[];
+  onSaved: () => void;
+};
+
+export default function ProductSpecsEditor({ productId, initialAttrs, initialSkus, onSaved }: Props) {
+  const [attrs, setAttrs] = useState<SpecAttr[]>(
+    initialAttrs.length
+      ? initialAttrs
+      : [],
+  );
+  const [skus, setSkus] = useState<SkuRow[]>(
+    initialSkus.length
+      ? initialSkus.map((s) => ({
+          ...s,
+          specValueIds: s.specValueIds ?? [],
+          status: s.status || 'ON_SALE',
+          allowOnlinePurchase: s.allowOnlinePurchase !== false,
+          allowCrossCityDelivery: s.allowCrossCityDelivery !== false,
+          allowOnSitePickup: !!s.allowOnSitePickup,
+          saleUnit: s.saleUnit === 'BOX' ? 'BOX' : 'BOTTLE',
+          bottlesPerUnit: s.bottlesPerUnit || (s.saleUnit === 'BOX' ? 6 : 1),
+          isDefault: !!s.isDefault,
+        }))
+      : [
+          {
+            specValueIds: [],
+            barcode69: '',
+            price: 0,
+            status: 'ON_SALE',
+            allowOnlinePurchase: true,
+            allowCrossCityDelivery: true,
+            allowOnSitePickup: false,
+            saleUnit: 'BOTTLE',
+            bottlesPerUnit: 1,
+            isDefault: true,
+          },
+        ],
+  );
+  const [saving, setSaving] = useState(false);
+
+  const combos = useMemo(() => cartesian(attrs.filter((a) => a.name.trim() && a.values.some((v) => v.name.trim()))), [attrs]);
+
+  function regenerateMatrix() {
+    const byKey = new Map(skus.map((s) => [keyOf(s.specValueIds ?? []), s]));
+    const next: SkuRow[] = combos.map((ids, i) => {
+      const existing = byKey.get(keyOf(ids));
+      if (existing) return { ...existing, specValueIds: ids, sortOrder: i };
+      return {
+        specValueIds: ids,
+        barcode69: '',
+        price: skus[0]?.price ?? 0,
+        benefitAmount: skus[0]?.benefitAmount,
+        status: 'DRAFT',
+        allowOnlinePurchase: true,
+        allowCrossCityDelivery: true,
+        allowOnSitePickup: false,
+        saleUnit: 'BOTTLE',
+        bottlesPerUnit: 1,
+        isDefault: i === 0,
+        sortOrder: i,
+      };
+    });
+    if (next.length && !next.some((s) => s.isDefault)) next[0].isDefault = true;
+    setSkus(next.length ? next : skus);
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      // 1) 保存规格轴（新建值尚无 id，先提交 attrs）
+      const specsRes = await request<{
+        specAttrs: SpecAttr[];
+        skus: SkuRow[];
+      }>(`/admin/products/${productId}/specs`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          attrs: attrs.map((a, i) => ({
+            id: a.id,
+            name: a.name.trim(),
+            sortOrder: i,
+            values: a.values
+              .filter((v) => v.name.trim())
+              .map((v, j) => ({ id: v.id, name: v.name.trim(), sortOrder: j })),
+          })),
+        }),
+      });
+
+      // 映射临时 id → 真实 id
+      const nameToId = new Map<string, string>();
+      for (const a of specsRes.specAttrs ?? []) {
+        for (const v of a.values ?? []) {
+          nameToId.set(`${a.name}:${v.name}`, v.id!);
+        }
+      }
+      const resolveIds = (ids: string[]) =>
+        ids.map((id) => {
+          if (!id.startsWith('__new__:')) return id;
+          const [, attrName, valueName] = id.split(':');
+          const real = nameToId.get(`${attrName}:${valueName}`);
+          if (!real) throw new Error(`规格值未创建：${attrName}/${valueName}`);
+          return real;
+        });
+
+      const payloadSkus = skus.map((s, i) => ({
+        id: s.id,
+        specValueIds: resolveIds(s.specValueIds ?? []),
+        skuCode: s.skuCode,
+        barcode69: s.barcode69,
+        price: s.price,
+        benefitAmount: s.benefitAmount,
+        status: s.status,
+        allowOnlinePurchase: s.allowOnlinePurchase,
+        allowCrossCityDelivery: s.allowCrossCityDelivery,
+        allowOnSitePickup: s.allowOnSitePickup,
+        saleUnit: s.saleUnit,
+        bottlesPerUnit: s.saleUnit === 'BOX' ? s.bottlesPerUnit || 6 : 1,
+        isDefault: !!s.isDefault,
+        sortOrder: i,
+      }));
+
+      for (const row of payloadSkus) {
+        if (!row.barcode69?.trim()) throw new Error('请填写全部 SKU 的 69 码');
+      }
+
+      await request(`/admin/products/${productId}/skus`, {
+        method: 'PUT',
+        body: JSON.stringify({ skus: payloadSkus }),
+      });
+      message.success('规格与 SKU 已保存');
+      onSaved();
+    } catch (e) {
+      message.error(e instanceof Error ? e.message : '保存失败');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div>
+      <Typography.Paragraph type="secondary">
+        先配置销售规格轴（如「包装」），再生成 SKU 矩阵。未配置规格时仅保留默认一行 SKU，与基础信息价/码同步。
+      </Typography.Paragraph>
+
+      <Typography.Title level={5}>规格轴</Typography.Title>
+      {attrs.map((attr, ai) => (
+        <div key={ai} style={{ marginBottom: 12, padding: 12, border: '1px solid #f0f0f0', borderRadius: 8 }}>
+          <Space align="start" style={{ width: '100%' }} wrap>
+            <Input
+              style={{ width: 140 }}
+              placeholder="规格名"
+              value={attr.name}
+              onChange={(e) => {
+                const next = [...attrs];
+                next[ai] = { ...attr, name: e.target.value };
+                setAttrs(next);
+              }}
+            />
+            <Button
+              type="text"
+              danger
+              icon={<MinusCircleOutlined />}
+              onClick={() => setAttrs(attrs.filter((_, i) => i !== ai))}
+            />
+          </Space>
+          <div style={{ marginTop: 8 }}>
+            {attr.values.map((val, vi) => (
+              <Space key={vi} style={{ display: 'flex', marginBottom: 6 }}>
+                <Input
+                  placeholder="规格值"
+                  value={val.name}
+                  onChange={(e) => {
+                    const next = [...attrs];
+                    const values = [...attr.values];
+                    values[vi] = { ...val, name: e.target.value };
+                    next[ai] = { ...attr, values };
+                    setAttrs(next);
+                  }}
+                />
+                <Button
+                  type="text"
+                  danger
+                  icon={<MinusCircleOutlined />}
+                  onClick={() => {
+                    const next = [...attrs];
+                    next[ai] = { ...attr, values: attr.values.filter((_, j) => j !== vi) };
+                    setAttrs(next);
+                  }}
+                />
+              </Space>
+            ))}
+            <Button
+              type="dashed"
+              size="small"
+              icon={<PlusOutlined />}
+              onClick={() => {
+                const next = [...attrs];
+                next[ai] = { ...attr, values: [...attr.values, { name: '' }] };
+                setAttrs(next);
+              }}
+            >
+              添加规格值
+            </Button>
+          </div>
+        </div>
+      ))}
+      <Space style={{ marginBottom: 16 }}>
+        <Button
+          icon={<PlusOutlined />}
+          disabled={attrs.length >= 3}
+          onClick={() => setAttrs([...attrs, { name: '', values: [{ name: '' }] }])}
+        >
+          添加规格轴
+        </Button>
+        <Button onClick={regenerateMatrix}>按规格生成 SKU 矩阵</Button>
+      </Space>
+
+      <Typography.Title level={5}>SKU 列表</Typography.Title>
+      <Table
+        size="small"
+        rowKey={(_, i) => String(i)}
+        pagination={false}
+        scroll={{ x: 1100 }}
+        dataSource={skus}
+        columns={[
+          {
+            title: '规格',
+            width: 140,
+            render: (_, row) => row.specText || (row.specValueIds?.length ? row.specValueIds.join(',') : '默认'),
+          },
+          {
+            title: '69码',
+            width: 140,
+            render: (_, row, index) => (
+              <Input
+                value={row.barcode69}
+                onChange={(e) => {
+                  const next = [...skus];
+                  next[index] = { ...row, barcode69: e.target.value };
+                  setSkus(next);
+                }}
+              />
+            ),
+          },
+          {
+            title: '售价',
+            width: 100,
+            render: (_, row, index) => (
+              <InputNumber
+                min={0}
+                style={{ width: '100%' }}
+                value={row.price}
+                onChange={(v) => {
+                  const next = [...skus];
+                  next[index] = { ...row, price: Number(v) || 0 };
+                  setSkus(next);
+                }}
+              />
+            ),
+          },
+          {
+            title: '权益',
+            width: 100,
+            render: (_, row, index) => (
+              <InputNumber
+                min={0}
+                style={{ width: '100%' }}
+                value={row.benefitAmount}
+                onChange={(v) => {
+                  const next = [...skus];
+                  next[index] = { ...row, benefitAmount: v == null ? undefined : Number(v) };
+                  setSkus(next);
+                }}
+              />
+            ),
+          },
+          {
+            title: '状态',
+            width: 110,
+            render: (_, row, index) => (
+              <Select
+                style={{ width: '100%' }}
+                value={row.status}
+                options={Object.entries(PRODUCT_STATUS_LABELS).map(([value, label]) => ({ value, label }))}
+                onChange={(status) => {
+                  const next = [...skus];
+                  next[index] = { ...row, status };
+                  setSkus(next);
+                }}
+              />
+            ),
+          },
+          {
+            title: '单位',
+            width: 160,
+            render: (_, row, index) => (
+              <Space>
+                <Select
+                  style={{ width: 80 }}
+                  value={row.saleUnit}
+                  options={[
+                    { value: 'BOTTLE', label: '瓶' },
+                    { value: 'BOX', label: '箱' },
+                  ]}
+                  onChange={(saleUnit) => {
+                    const next = [...skus];
+                    next[index] = {
+                      ...row,
+                      saleUnit,
+                      bottlesPerUnit: saleUnit === 'BOX' ? row.bottlesPerUnit || 6 : 1,
+                    };
+                    setSkus(next);
+                  }}
+                />
+                {row.saleUnit === 'BOX' ? (
+                  <InputNumber
+                    min={1}
+                    style={{ width: 70 }}
+                    value={row.bottlesPerUnit}
+                    onChange={(v) => {
+                      const next = [...skus];
+                      next[index] = { ...row, bottlesPerUnit: Number(v) || 6 };
+                      setSkus(next);
+                    }}
+                  />
+                ) : null}
+              </Space>
+            ),
+          },
+          {
+            title: '履约',
+            width: 200,
+            render: (_, row, index) => (
+              <Space direction="vertical" size={0}>
+                <Switch
+                  checkedChildren="线上"
+                  unCheckedChildren="线上"
+                  checked={row.allowOnlinePurchase}
+                  onChange={(checked) => {
+                    const next = [...skus];
+                    next[index] = {
+                      ...row,
+                      allowOnlinePurchase: checked,
+                      allowCrossCityDelivery: checked ? row.allowCrossCityDelivery : false,
+                    };
+                    setSkus(next);
+                  }}
+                />
+                <Switch
+                  checkedChildren="跨城"
+                  unCheckedChildren="跨城"
+                  disabled={!row.allowOnlinePurchase}
+                  checked={row.allowCrossCityDelivery}
+                  onChange={(checked) => {
+                    const next = [...skus];
+                    next[index] = { ...row, allowCrossCityDelivery: checked };
+                    setSkus(next);
+                  }}
+                />
+                <Switch
+                  checkedChildren="现场"
+                  unCheckedChildren="现场"
+                  checked={row.allowOnSitePickup}
+                  onChange={(checked) => {
+                    const next = [...skus];
+                    next[index] = { ...row, allowOnSitePickup: checked };
+                    setSkus(next);
+                  }}
+                />
+              </Space>
+            ),
+          },
+          {
+            title: '默认',
+            width: 70,
+            render: (_, row, index) => (
+              <Radio
+                checked={row.isDefault}
+                onChange={() => {
+                  setSkus(skus.map((s, i) => ({ ...s, isDefault: i === index })));
+                }}
+              />
+            ),
+          },
+        ]}
+      />
+
+      <Button type="primary" loading={saving} style={{ marginTop: 16 }} onClick={() => void handleSave()}>
+        保存规格与 SKU
+      </Button>
+    </div>
+  );
+}

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

@@ -51,6 +51,7 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder
   const [regionCodes, setRegionCodes] = useState<string[]>([]);
   const [addressDetail, setAddressDetail] = useState('');
   const [productId, setProductId] = useState<string>();
+  const [skuId, setSkuId] = useState<string>();
   const [quantity, setQuantity] = useState(2);
   const [promoCodeId, setPromoCodeId] = useState<string>();
   const [deliveryMode, setDeliveryMode] = useState<PartnerProxyDeliveryMode>('ADDRESS');
@@ -87,9 +88,37 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder
   }, [open]);
 
   const selectedProduct = options?.products.find((p) => p.id === productId);
-  const allowOnline = selectedProduct ? selectedProduct.allowOnlinePurchase !== false : true;
-  const allowOnSite = !!selectedProduct?.allowOnSitePickup;
-  const allowCrossCity = selectedProduct ? selectedProduct.allowCrossCityDelivery !== false : true;
+  const skuOptions = (selectedProduct?.skus ?? []).filter((s) => s.status === 'ON_SALE');
+  const selectedSku =
+    skuOptions.find((s) => s.id === skuId) ||
+    skuOptions.find((s) => s.id === selectedProduct?.defaultSkuId) ||
+    skuOptions[0];
+  const allowOnline = selectedSku
+    ? selectedSku.allowOnlinePurchase !== false
+    : selectedProduct
+      ? selectedProduct.allowOnlinePurchase !== false
+      : true;
+  const allowOnSite = selectedSku
+    ? !!selectedSku.allowOnSitePickup
+    : !!selectedProduct?.allowOnSitePickup;
+  const allowCrossCity = selectedSku
+    ? selectedSku.allowCrossCityDelivery !== false
+    : selectedProduct
+      ? selectedProduct.allowCrossCityDelivery !== false
+      : true;
+
+  useEffect(() => {
+    if (!open || !selectedProduct) return;
+    const def =
+      skuOptions.find((s) => s.id === selectedProduct.defaultSkuId) ||
+      skuOptions.find((s) => s.isDefault) ||
+      skuOptions[0];
+    if (def && skuId !== def.id && (!skuId || !skuOptions.some((s) => s.id === skuId))) {
+      setSkuId(def.id);
+      setQuantity(def.saleUnit === 'BOX' ? 1 : Math.max(quantity, 2));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, productId, selectedProduct?.id]);
 
   useEffect(() => {
     if (!open || !selectedProduct) return;
@@ -115,6 +144,7 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder
           productId,
           quantity,
           deliveryMode,
+          skuId: skuId || undefined,
           receiverCity: deliveryMode === 'ADDRESS' ? region?.city || undefined : undefined,
           receiverDistrict: deliveryMode === 'ADDRESS' ? region?.district || undefined : undefined,
         }),
@@ -124,7 +154,7 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder
         .finally(() => setPreviewLoading(false));
     }, 300);
     return () => window.clearTimeout(timer);
-  }, [open, productId, quantity, deliveryMode, region?.city, region?.district, step]);
+  }, [open, productId, skuId, quantity, deliveryMode, region?.city, region?.district, step]);
 
   useEffect(() => () => stopPoll(), []);
 
@@ -135,6 +165,8 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder
     setRegionCodes([]);
     setAddressDetail('');
     setQuantity(2);
+    setProductId(undefined);
+    setSkuId(undefined);
     setPromoCodeId(undefined);
     setDeliveryMode('ADDRESS');
     setAutoReceive(false);
@@ -202,6 +234,7 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder
       productId: productId!,
       quantity,
       promoCodeId: promoCodeId || undefined,
+      skuId: skuId || undefined,
     };
 
     setSubmitting(true);
@@ -317,7 +350,10 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder
                 loading={loadingOptions}
                 placeholder="选择商品"
                 value={productId}
-                onChange={setProductId}
+                onChange={(id) => {
+                  setProductId(id);
+                  setSkuId(undefined);
+                }}
                 options={(options?.products ?? []).map((p) => ({
                   value: p.id,
                   label: `${p.name} · ${p.spec} · ¥${fmtMoney(p.price)}`,
@@ -325,7 +361,25 @@ export default function ProxyOrderModal({ open, onClose, onSuccess }: ProxyOrder
               />
             </Form.Item>
 
-            <Form.Item label="数量" required>
+            {skuOptions.length > 1 || selectedProduct?.specEnabled ? (
+              <Form.Item label="规格" required>
+                <Select
+                  placeholder="选择规格"
+                  value={skuId}
+                  onChange={(id) => {
+                    setSkuId(id);
+                    const sku = skuOptions.find((s) => s.id === id);
+                    if (sku?.saleUnit === 'BOX') setQuantity(1);
+                  }}
+                  options={skuOptions.map((s) => ({
+                    value: s.id,
+                    label: `${s.specText || '默认'} · ¥${fmtMoney(s.price)} · ${s.saleUnit === 'BOX' ? `${s.bottlesPerUnit}瓶/箱` : '瓶'}`,
+                  }))}
+                />
+              </Form.Item>
+            ) : null}
+
+            <Form.Item label={selectedSku?.saleUnit === 'BOX' ? '数量（箱）' : '数量（瓶）'} required>
               <InputNumber
                 min={1}
                 value={quantity}

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

@@ -12,6 +12,7 @@ import OssUpload from '../components/OssUpload';
 import MultiImageUpload from '../components/MultiImageUpload';
 import DetailImageUrlList from '../components/DetailImageUrlList';
 import ProductDetailTemplatePicker from '../components/ProductDetailTemplatePicker';
+import ProductSpecsEditor from '../components/ProductSpecsEditor';
 import type { FormInstance } from 'antd/es/form';
 
 type ProductDetailContentDto = {
@@ -437,6 +438,23 @@ export default function ProductsPage() {
                     />
                   ),
                 },
+                {
+                  key: 'specs',
+                  label: '规格与 SKU',
+                  children: (
+                    <ProductSpecsEditor
+                      productId={String(detail.id)}
+                      initialAttrs={(detail.specAttrs as never) ?? []}
+                      initialSkus={(detail.skus as never) ?? []}
+                      onSaved={async () => {
+                        const d = await request<Record<string, unknown>>(`/admin/products/${detail.id}`);
+                        setDetail(d);
+                        editForm.setFieldsValue(mapDetailToForm(d));
+                        void reload();
+                      }}
+                    />
+                  ),
+                },
               ]} />
             </Form>
           </>