!307 mall 商城优化完善

Merge pull request !307 from puhui999/dev-mall
2025-12-21 11:13:33 +00:00
parent 7ab917dc48 568d5aa4cf
commit a3f282cba3
45 changed files with 1670 additions and 1470 deletions
--- a/apps/web-antd/src/views/mall/product/comment/modules/form.vue
+++ b/apps/web-antd/src/views/mall/product/comment/modules/form.vue
@@ -99,16 +99,14 @@ const [Modal, modalApi] = useVbenModal({
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
+      // 关闭时重置表单状态
      selectedSku.value = undefined;
+      await formApi.setValues({ spuId: undefined, skuId: undefined });
      return;
    }
    // 加载数据
    const data = modalApi.getData<MallCommentApi.Comment>();
    if (!data || !data.id) {
-      // 新建模式：重置表单
-      // TODO @puhui999：这里的重置，可以统一到 103 行那么？
-      selectedSku.value = undefined;
-      await formApi.setValues({ spuId: undefined, skuId: undefined });
      return;
    }
    // 编辑模式：加载数据
--- a/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue
+++ b/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue
@@ -4,7 +4,7 @@ import type { MallSpuApi } from '#/api/mall/product/spu';

 import { computed, ref, watch } from 'vue';

-import { CloseCircleFilled, PlusOutlined } from '@vben/icons';
+import { IconifyIcon } from '@vben/icons';

 import { Image, Tooltip } from 'ant-design-vue';

@@ -110,9 +110,9 @@ function emitSpuChange() {
            class="h-full w-full rounded-lg object-cover"
          />
          <!-- 删除按钮 -->
-          <!-- TODO @puhui999：还是使用 IconifyIcon：使用自己的中立的图标，方便 antd 和 ele 共享 -->
-          <CloseCircleFilled
+          <IconifyIcon
            v-if="!disabled"
+            icon="lucide:circle-x"
            class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
            @click="handleRemoveSpu(index)"
          />
@@ -126,8 +126,7 @@ function emitSpuChange() {
        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors hover:border-primary hover:bg-primary/5"
        @click="handleOpenSpuSelect"
      >
-        <!-- TODO @puhui999：还是使用 IconifyIcon：使用自己的中立的图标，方便 antd 和 ele 共享 -->
-        <PlusOutlined class="text-xl text-gray-400" />
+        <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
      </div>
    </Tooltip>
  </div>
--- a/apps/web-antd/src/views/mall/product/spu/form/index.vue
+++ b/apps/web-antd/src/views/mall/product/spu/form/index.vue
@@ -32,30 +32,6 @@ const spuId = ref<number>();
 const { params, name } = useRoute();
 const { closeCurrentTab } = useTabs();
 const activeTabName = ref('info');
-// TODO @puhui999：这个要不要类似 ele 里，直接写到 html 里？
-const tabList = ref([
-  {
-    key: 'info',
-    tab: '基础设置',
-  },
-  {
-    key: 'sku',
-    tab: '价格库存',
-  },
-  {
-    key: 'delivery',
-    tab: '物流设置',
-  },
-  {
-    key: 'description',
-    tab: '商品详情',
-  },
-  {
-    key: 'other',
-    tab: '其它设置',
-  },
-]);
-
 const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const isDetail = ref(name === 'ProductSpuDetail'); // 是否查看详情
 const skuListRef = ref(); // 商品属性列表 Ref
@@ -95,22 +71,22 @@ const propertyList = ref<PropertyAndValues[]>([]); // 商品属性列表
 const ruleConfig: RuleConfig[] = [
  {
    name: 'stock',
-    rule: (arg) => arg >= 0,
+    rule: (arg: number) => arg >= 0,
    message: '商品库存必须大于等于 1 ！！！',
  },
  {
    name: 'price',
-    rule: (arg) => arg >= 0.01,
+    rule: (arg: number) => arg >= 0.01,
    message: '商品销售价格必须大于等于 0.01 元！！！',
  },
  {
    name: 'marketPrice',
-    rule: (arg) => arg >= 0.01,
+    rule: (arg: number) => arg >= 0.01,
    message: '商品市场价格必须大于等于 0.01 元！！！',
  },
  {
    name: 'costPrice',
-    rule: (arg) => arg >= 0.01,
+    rule: (arg: number) => arg >= 0.01,
    message: '商品成本价格必须大于等于 0.00 元！！！',
  },
 ]; // sku 相关属性校验规则
@@ -222,7 +198,7 @@ async function handleSubmit() {
      item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
    });
  }
-  // 处理轮播图列表 TODO @puhui999：这个是必须的哇？
+  // 处理轮播图列表：上传组件可能返回对象或字符串，统一处理成字符串数组
  const newSliderPicUrls: any[] = [];
  values.sliderPicUrls!.forEach((item: any) => {
    // 如果是前端选的图
@@ -344,7 +320,28 @@ onMounted(async () => {
      <Card
        class="h-full w-full"
        :loading="formLoading"
-        :tab-list="tabList"
+        :tab-list="[
+          {
+            key: 'info',
+            tab: '基础设置',
+          },
+          {
+            key: 'sku',
+            tab: '价格库存',
+          },
+          {
+            key: 'delivery',
+            tab: '物流设置',
+          },
+          {
+            key: 'description',
+            tab: '商品详情',
+          },
+          {
+            key: 'other',
+            tab: '其它设置',
+          },
+        ]"
        :active-key="activeTabName"
        @tab-change="handleTabChange"
      >
@@ -410,7 +407,6 @@ onMounted(async () => {
  </div>
 </template>
 <style lang="scss" scoped>
-// TODO @puhui999：这个样式是必须的哇？
 :deep(.ant-tabs-tab-btn) {
  font-size: 14px !important;
 }
--- a/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts
@@ -33,6 +33,7 @@ export function useFormSchema(): VbenFormSchema[] {
      componentProps: {
        format: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
        placeholder: '请选择开始时间',
      },
      rules: 'required',
@@ -44,51 +45,18 @@ export function useFormSchema(): VbenFormSchema[] {
      componentProps: {
        format: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
        placeholder: '请选择结束时间',
      },
      rules: 'required',
    },
-    {
-      fieldName: 'bargainFirstPrice',
-      label: '砍价起始价格(元)',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        precision: 2,
-        step: 0.01,
-        placeholder: '请输入砍价起始价格',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'bargainMinPrice',
-      label: '砍价底价(元)',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        precision: 2,
-        step: 0.01,
-        placeholder: '请输入砍价底价',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'stock',
-      label: '活动库存',
-      component: 'InputNumber',
-      componentProps: {
-        min: 1,
-        placeholder: '请输入活动库存',
-      },
-      rules: 'required',
-    },
    {
      fieldName: 'helpMaxCount',
      label: '助力人数',
      component: 'InputNumber',
      componentProps: {
        min: 1,
-        placeholder: '请输入助力人数',
+        placeholder: '达到该人数才能砍到低价',
      },
      rules: 'required',
    },
@@ -98,7 +66,7 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'InputNumber',
      componentProps: {
        min: 1,
-        placeholder: '请输入砍价次数',
+        placeholder: '最大帮砍次数',
      },
      rules: 'required',
    },
@@ -108,7 +76,7 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'InputNumber',
      componentProps: {
        min: 1,
-        placeholder: '请输入购买限制',
+        placeholder: '最大购买次数',
      },
      rules: 'required',
    },
@@ -120,7 +88,7 @@ export function useFormSchema(): VbenFormSchema[] {
        min: 0,
        precision: 2,
        step: 0.01,
-        placeholder: '请输入最小砍价金额',
+        placeholder: '用户每次砍价的最小金额',
      },
    },
    {
@@ -131,9 +99,16 @@ export function useFormSchema(): VbenFormSchema[] {
        min: 0,
        precision: 2,
        step: 0.01,
-        placeholder: '请输入最大砍价金额',
+        placeholder: '用户每次砍价的最大金额',
      },
    },
+    {
+      fieldName: 'spuId',
+      label: '砍价商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
  ];
 }

--- a/apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue
@@ -1,13 +1,20 @@
 <script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallBargainActivityApi } from '#/api/mall/promotion/bargain/bargainActivity';
+import type {
+  RuleConfig,
+  SpuProperty,
+} from '#/views/mall/product/spu/components';

-import { computed, nextTick, ref } from 'vue';
+import { computed, ref } from 'vue';

 import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';

-import { Button, message } from 'ant-design-vue';
+import { Button, InputNumber, message } from 'ant-design-vue';

 import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
 import {
  createBargainActivity,
@@ -15,7 +22,11 @@ import {
  updateBargainActivity,
 } from '#/api/mall/promotion/bargain/bargainActivity';
 import { $t } from '#/locales';
-import { SpuSkuSelect } from '#/views/mall/product/spu/components';
+import {
+  getPropertyList,
+  SpuAndSkuList,
+  SpuSkuSelect,
+} from '#/views/mall/product/spu/components';

 import { useFormSchema } from '../data';

@@ -30,47 +41,6 @@ const getTitle = computed(() => {
    : $t('ui.actionTitle.create', ['砍价活动']);
 });

-// ================= 商品选择相关 =================
-const spuId = ref<number>();
-const skuId = ref<number>();
-const spuName = ref<string>('');
-const skuInfo = ref<{
-  picUrl: string;
-  price: number;
-  skuName: string;
-}>();
-
-const spuSkuSelectRef = ref(); // 商品选择弹窗 Ref
-
-/** 打开商品选择弹窗 */
-const handleSelectProduct = () => {
-  spuSkuSelectRef.value?.open();
-};
-
-/** 选择商品后的回调 */
-async function handleSpuSelected(selectedSpuId: number, skuIds?: number[]) {
-  const spu = await getSpu(selectedSpuId);
-  if (!spu) return;
-
-  spuId.value = spu.id;
-  spuName.value = spu.name || '';
-
-  // 砍价活动只选择一个 SKU
-  if (skuIds && skuIds.length > 0) {
-    const selectedSku = spu.skus?.find((sku) => sku.id === skuIds[0]);
-    if (selectedSku) {
-      skuId.value = selectedSku.id;
-      skuInfo.value = {
-        skuName: selectedSku.name || '',
-        picUrl: selectedSku.picUrl || spu.picUrl || '',
-        price: Number(selectedSku.price) || 0,
-      };
-    }
-  }
-}
-
-// ================= end =================
-
 const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
@@ -78,46 +48,151 @@ const [Form, formApi] = useVbenForm({
    },
    labelWidth: 130,
  },
-  wrapperClass: 'grid-cols-2',
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
 });

+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.bargainFirstPrice',
+    rule: (arg) => arg > 0,
+    message: '商品砍价起始价格必须大于 0 ！！！',
+  },
+  {
+    name: 'productConfig.bargainMinPrice',
+    rule: (arg) => arg >= 0,
+    message: '商品砍价底价不能小于 0 ！！！',
+  },
+  {
+    name: 'productConfig.stock',
+    rule: (arg) => arg >= 1,
+    message: '商品活动库存必须大于等于 1 ！！！',
+  },
+];
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
+
+/** 打开商品选择器 */
+function openSpuSelect() {
+  spuSkuSelectRef.value?.open();
+}
+
+/** 选择商品后的回调 */
+async function handleSpuSelected(spuId: number, skuIds?: number[]) {
+  await formApi.setFieldValue('spuId', spuId);
+  await getSpuDetails(spuId, skuIds);
+}
+
+/** 获取 SPU 详情 */
+async function getSpuDetails(
+  spuId: number,
+  skuIds?: number[],
+  products?: MallBargainActivityApi.BargainProduct[],
+) {
+  const res = await getSpu(spuId);
+  if (!res) {
+    return;
+  }
+
+  spuList.value = [];
+
+  // 筛选指定的 SKU（砍价活动只选择一个 SKU）
+  const selectSkus =
+    skuIds === undefined
+      ? res.skus
+      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
+
+  // 为每个 SKU 配置砍价活动相关的配置
+  selectSkus?.forEach((sku) => {
+    let config: MallBargainActivityApi.BargainProduct = {
+      spuId: res.id!,
+      skuId: sku.id!,
+      bargainFirstPrice: 1,
+      bargainMinPrice: 1,
+      stock: 1,
+    };
+    // 如果是编辑模式，回填已有配置
+    if (products !== undefined) {
+      const product = products.find((item) => item.skuId === sku.id);
+      if (product) {
+        // 分转元
+        product.bargainFirstPrice = formatToFraction(
+          product.bargainFirstPrice,
+        ) as unknown as number;
+        product.bargainMinPrice = formatToFraction(
+          product.bargainMinPrice,
+        ) as unknown as number;
+      }
+      config = product || config;
+    }
+    // 动态添加 productConfig 属性到 SKU
+    (
+      sku as MallSpuApi.Sku & {
+        productConfig: MallBargainActivityApi.BargainProduct;
+      }
+    ).productConfig = config;
+  });
+  res.skus = selectSkus;
+
+  const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
+    {
+      spuId: res.id!,
+      spuDetail: res,
+      propertyList: getPropertyList(res),
+    },
+  ];
+
+  // 直接赋值，因为砍价活动只选择一个 SPU
+  spuList.value = [res];
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
 const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
-
-    // 验证商品和 SKU 选择
-    if (!spuId.value) {
-      message.error('请选择砍价商品');
-      return;
-    }
-    if (!skuId.value) {
-      message.error('请选择商品 SKU');
-      return;
-    }
-
-    // 提交表单
    modalApi.lock();
    try {
+      // 获取砍价商品配置（深拷贝避免直接修改原对象）
+      const products: MallBargainActivityApi.BargainProduct[] = cloneDeep(
+        spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
+      );
+      if (products.length === 0) {
+        message.error('请选择砍价商品');
+        return;
+      }
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.bargainFirstPrice = convertToInteger(item.bargainFirstPrice);
+        item.bargainMinPrice = convertToInteger(item.bargainMinPrice);
+      });
+
+      // 提交表单
      const values = await formApi.getValues();
      const data = {
        ...values,
-        spuId: spuId.value,
-        skuId: skuId.value,
-        bargainFirstPrice: Math.round((values.bargainFirstPrice || 0) * 100),
-        bargainMinPrice: Math.round((values.bargainMinPrice || 0) * 100),
+        // 用户每次砍价金额元转分
        randomMinPrice: values.randomMinPrice
-          ? Math.round(values.randomMinPrice * 100)
+          ? convertToInteger(values.randomMinPrice)
          : undefined,
        randomMaxPrice: values.randomMaxPrice
-          ? Math.round(values.randomMaxPrice * 100)
+          ? convertToInteger(values.randomMaxPrice)
          : undefined,
+        // 合并砍价商品配置（砍价活动只有一个商品）
+        ...products[0],
      } as MallBargainActivityApi.BargainActivity;
+
      await (formData.value?.id
        ? updateBargainActivity(data)
        : createBargainActivity(data));
@@ -132,54 +207,44 @@ const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formData.value = undefined;
-      spuId.value = undefined;
-      skuId.value = undefined;
-      spuName.value = '';
-      skuInfo.value = undefined;
+      spuList.value = [];
+      spuPropertyList.value = [];
      return;
    }
-    // 加载表单数据
+
+    // 加载数据
    const data = modalApi.getData<MallBargainActivityApi.BargainActivity>();
    if (!data || !data.id) {
      return;
    }
+    // 加载数据
    modalApi.lock();
    try {
      formData.value = await getBargainActivity(data.id);
-      await nextTick();
+      // 对齐活动商品处理结构
+      await getSpuDetails(
+        formData.value.spuId,
+        [formData.value.skuId],
+        [
+          {
+            spuId: formData.value.spuId,
+            skuId: formData.value.skuId,
+            bargainFirstPrice: formData.value.bargainFirstPrice, // 砍价起始价格，单位分
+            bargainMinPrice: formData.value.bargainMinPrice, // 砍价底价
+            stock: formData.value.stock, // 活动库存
+          },
+        ],
+      );
      // 设置表单值时，价格字段从分转换为元
      await formApi.setValues({
        ...formData.value,
-        bargainFirstPrice: (formData.value.bargainFirstPrice || 0) / 100,
-        bargainMinPrice: (formData.value.bargainMinPrice || 0) / 100,
        randomMinPrice: formData.value.randomMinPrice
-          ? formData.value.randomMinPrice / 100
+          ? formatToFraction(formData.value.randomMinPrice)
          : undefined,
        randomMaxPrice: formData.value.randomMaxPrice
-          ? formData.value.randomMaxPrice / 100
+          ? formatToFraction(formData.value.randomMaxPrice)
          : undefined,
      });
-      // 加载商品和 SKU 信息
-      if (formData.value.spuId) {
-        const spu = await getSpu(formData.value.spuId);
-        if (spu) {
-          spuId.value = spu.id;
-          spuName.value = spu.name || '';
-          if (formData.value.skuId) {
-            const selectedSku = spu.skus?.find(
-              (sku) => sku.id === formData.value?.skuId,
-            );
-            if (selectedSku) {
-              skuId.value = selectedSku.id;
-              skuInfo.value = {
-                skuName: selectedSku.name || '',
-                picUrl: selectedSku.picUrl || spu.picUrl || '',
-                price: Number(selectedSku.price) || 0,
-              };
-            }
-          }
-        }
-      }
    } finally {
      modalApi.unlock();
    }
@@ -188,74 +253,75 @@ const [Modal, modalApi] = useVbenModal({
 </script>

 <template>
-  <Modal class="w-3/5" :title="getTitle">
-    <div class="mx-4">
-      <Form />
+  <div>
+    <Modal :title="getTitle" class="w-[70%]">
+      <Form class="mx-4">
+        <!-- 商品选择 -->
+        <template #spuId>
+          <div class="w-full">
+            <Button v-if="!formData?.id" type="primary" @click="openSpuSelect">
+              选择商品
+            </Button>

-      <!-- 商品选择区域 -->
-      <div class="mt-4">
-        <div class="mb-2 flex items-center">
-          <span class="text-sm font-medium">砍价活动商品:</span>
-          <Button class="ml-2" type="primary" @click="handleSelectProduct">
-            选择商品
-          </Button>
-          <span v-if="spuName" class="ml-4 text-sm text-gray-600">
-            已选择: {{ spuName }}
-          </span>
-        </div>
+            <!-- SPU 和 SKU 列表展示 -->
+            <SpuAndSkuList
+              ref="spuAndSkuListRef"
+              :rule-config="ruleConfig"
+              :spu-list="spuList"
+              :spu-property-list-p="spuPropertyList"
+              class="mt-4"
+            >
+              <!-- 扩展列：砍价活动特有配置 -->
+              <template #default>
+                <VxeColumn
+                  align="center"
+                  min-width="168"
+                  title="砍价起始价格(元)"
+                >
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.bargainFirstPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="砍价底价(元)">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.bargainMinPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="活动库存">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.stock"
+                      :max="sku.stock"
+                      :min="0"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Modal>

-        <!-- SKU 信息展示 -->
-        <div v-if="skuInfo" class="mt-4">
-          <table class="w-full border-collapse border border-gray-300">
-            <!-- TODO @puhui999：和 element-plus 有点差别哈；ps：是不是用 grid 组件呀？或者 vxe 组件
-             图片
-颜色
-版本
-商品条码
-销售价(元)
-市场价(元)
-成本价(元)
-库存
-砍价起始价格(元)
-砍价底价(元)
-活动库存
-             -->
-            <thead>
-              <tr class="bg-gray-100">
-                <th class="border border-gray-300 px-4 py-2">商品图片</th>
-                <th class="border border-gray-300 px-4 py-2">SKU 名称</th>
-                <th class="border border-gray-300 px-4 py-2">原价(元)</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="border border-gray-300 px-4 py-2 text-center">
-                  <img
-                    v-if="skuInfo.picUrl"
-                    :src="skuInfo.picUrl"
-                    alt="商品图片"
-                    class="h-16 w-16 object-cover"
-                  />
-                </td>
-                <td class="border border-gray-300 px-4 py-2">
-                  {{ skuInfo.skuName }}
-                </td>
-                <td class="border border-gray-300 px-4 py-2 text-center">
-                  ¥{{ (skuInfo.price / 100).toFixed(2) }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </Modal>
-
-  <!-- 商品选择器弹窗（单选模式） -->
-  <SpuSkuSelect
-    ref="spuSkuSelectRef"
-    :is-select-sku="true"
-    :radio="true"
-    @select="handleSpuSelected"
-  />
+    <!-- 商品选择器弹窗（单选模式） -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      :radio="true"
+      @select="handleSpuSelected"
+    />
+  </div>
 </template>
--- a/apps/web-antd/src/views/mall/promotion/combination/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/combination/activity/data.ts
@@ -24,16 +24,7 @@ export function useFormSchema(): VbenFormSchema[] {
        placeholder: '请输入活动名称',
      },
      rules: 'required',
-    },
-    {
-      fieldName: 'status',
-      label: '活动状态',
-      component: 'Select',
-      componentProps: {
-        placeholder: '请选择活动状态',
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-      },
-      rules: 'required',
+      formItemClass: 'col-span-2',
    },
    {
      fieldName: 'startTime',
@@ -41,9 +32,9 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择开始时间',
-        showTime: false,
+        showTime: true,
        valueFormat: 'x',
-        format: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD HH:mm:ss',
      },
      rules: 'required',
    },
@@ -53,18 +44,18 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择结束时间',
-        showTime: false,
+        showTime: true,
        valueFormat: 'x',
-        format: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD HH:mm:ss',
      },
      rules: 'required',
    },
    {
      fieldName: 'userSize',
-      label: '用户数量',
+      label: '拼团人数',
      component: 'InputNumber',
      componentProps: {
-        placeholder: '请输入用户数量',
+        placeholder: '达到该人数即成团',
        min: 2,
      },
      rules: 'required',
@@ -74,7 +65,7 @@ export function useFormSchema(): VbenFormSchema[] {
      label: '限制时长',
      component: 'InputNumber',
      componentProps: {
-        placeholder: '请输入限制时长(小时)',
+        placeholder: '限制时长(小时)',
        min: 0,
      },
      rules: 'required',
@@ -105,6 +96,13 @@ export function useFormSchema(): VbenFormSchema[] {
        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
      },
    },
+    {
+      fieldName: 'spuId',
+      label: '拼团商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
  ];
 }

--- a/apps/web-antd/src/views/mall/promotion/combination/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/combination/activity/modules/form.vue
@@ -1,13 +1,20 @@
 <script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+import type {
+  RuleConfig,
+  SpuProperty,
+} from '#/views/mall/product/spu/components';

-import { computed, nextTick, ref } from 'vue';
+import { computed, ref } from 'vue';

 import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';

-import { Button, message } from 'ant-design-vue';
+import { Button, InputNumber, message } from 'ant-design-vue';

 import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
 import {
  createCombinationActivity,
@@ -15,58 +22,25 @@ import {
  updateCombinationActivity,
 } from '#/api/mall/promotion/combination/combinationActivity';
 import { $t } from '#/locales';
-import { SpuSkuSelect } from '#/views/mall/product/spu/components';
+import {
+  getPropertyList,
+  SpuAndSkuList,
+  SpuSkuSelect,
+} from '#/views/mall/product/spu/components';

 import { useFormSchema } from '../data';

 defineOptions({ name: 'CombinationActivityForm' });

 const emit = defineEmits(['success']);
-const formData = ref<MallCombinationActivityApi.CombinationActivity>();

+const formData = ref<MallCombinationActivityApi.CombinationActivity>();
 const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['拼团活动'])
    : $t('ui.actionTitle.create', ['拼团活动']);
 });

-// ================= 商品选择相关 =================
-const spuId = ref<number>();
-const spuName = ref<string>('');
-const skuTableData = ref<any[]>([]);
-
-const spuSkuSelectRef = ref(); // 商品选择弹窗 Ref
-
-/** 打开商品选择弹窗 */
-const handleSelectProduct = () => {
-  spuSkuSelectRef.value?.open();
-};
-
-/** 选择商品后的回调 */
-async function handleSpuSelected(selectedSpuId: number, skuIds?: number[]) {
-  const spu = await getSpu(selectedSpuId);
-  if (!spu) return;
-
-  spuId.value = spu.id;
-  spuName.value = spu.name || '';
-
-  // 筛选指定的 SKU
-  const selectedSkus = skuIds
-    ? spu.skus?.filter((sku) => skuIds.includes(sku.id!))
-    : spu.skus;
-
-  skuTableData.value =
-    selectedSkus?.map((sku) => ({
-      skuId: sku.id!,
-      skuName: sku.name || '',
-      picUrl: sku.picUrl || spu.picUrl || '',
-      price: sku.price || 0,
-      combinationPrice: 0,
-    })) || [];
-}
-
-// ================= end =================
-
 const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
@@ -74,49 +48,126 @@ const [Form, formApi] = useVbenForm({
    },
    labelWidth: 100,
  },
-  wrapperClass: 'grid-cols-2',
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
 });

+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.combinationPrice',
+    rule: (arg) => arg >= 0.01,
+    message: '商品拼团价格不能小于 0.01 ！！！',
+  },
+];
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
+
+/** 打开商品选择器 */
+function openSpuSelect() {
+  spuSkuSelectRef.value?.open();
+}
+
+/** 选择商品后的回调 */
+async function handleSpuSelected(spuId: number, skuIds?: number[]) {
+  await formApi.setFieldValue('spuId', spuId);
+  await getSpuDetails(spuId, skuIds);
+}
+
+/** 获取 SPU 详情 */
+async function getSpuDetails(
+  spuId: number,
+  skuIds?: number[],
+  products?: MallCombinationActivityApi.CombinationProduct[],
+) {
+  const res = await getSpu(spuId);
+  if (!res) {
+    return;
+  }
+
+  spuList.value = [];
+
+  // 筛选指定的 SKU
+  const selectSkus =
+    skuIds === undefined
+      ? res.skus
+      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
+
+  // 为每个 SKU 配置拼团活动相关的配置
+  selectSkus?.forEach((sku) => {
+    let config: MallCombinationActivityApi.CombinationProduct = {
+      spuId: res.id!,
+      skuId: sku.id!,
+      combinationPrice: 0,
+    };
+    // 如果是编辑模式，回填已有配置
+    if (products !== undefined) {
+      const product = products.find((item) => item.skuId === sku.id);
+      if (product) {
+        // 分转元
+        product.combinationPrice = formatToFraction(
+          product.combinationPrice,
+        ) as unknown as number;
+      }
+      config = product || config;
+    }
+    // 动态添加 productConfig 属性到 SKU
+    (
+      sku as MallSpuApi.Sku & {
+        productConfig: MallCombinationActivityApi.CombinationProduct;
+      }
+    ).productConfig = config;
+  });
+  res.skus = selectSkus;
+
+  const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
+    {
+      spuId: res.id!,
+      spuDetail: res,
+      propertyList: getPropertyList(res),
+    },
+  ];
+
+  // 直接赋值，因为拼团活动只选择一个 SPU
+  spuList.value = [res];
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
 const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
-
-    // 验证商品和 SKU 配置
-    if (!spuId.value) {
-      message.error('请选择拼团商品');
-      return;
-    }
-    if (skuTableData.value.length === 0) {
-      message.error('请至少配置一个 SKU');
-      return;
-    }
-    // 验证 SKU 配置
-    const hasInvalidSku = skuTableData.value.some(
-      (sku) => sku.combinationPrice < 0.01,
-    );
-    if (hasInvalidSku) {
-      message.error('请正确配置 SKU 的拼团价格（≥0.01）');
-      return;
-    }
-
-    // 提交表单
    modalApi.lock();
    try {
+      // 获取拼团商品配置（深拷贝避免直接修改原对象）
+      const products: MallCombinationActivityApi.CombinationProduct[] =
+        cloneDeep(spuAndSkuListRef.value?.getSkuConfigs('productConfig') || []);
+      if (products.length === 0) {
+        message.error('请选择拼团商品');
+        return;
+      }
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.combinationPrice = convertToInteger(item.combinationPrice);
+      });
+
+      // 提交表单
      const values = await formApi.getValues();
-      const data: any = {
+      const data = {
        ...values,
-        spuId: spuId.value,
-        products: skuTableData.value.map((sku) => ({
-          skuId: sku.skuId,
-          combinationPrice: Math.round(sku.combinationPrice * 100), // 转换为分
-        })),
-      };
+        products,
+      } as MallCombinationActivityApi.CombinationActivity;
+
      await (formData.value?.id
        ? updateCombinationActivity(data)
        : createCombinationActivity(data));
@@ -131,46 +182,29 @@ const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formData.value = undefined;
-      spuId.value = undefined;
-      spuName.value = '';
-      skuTableData.value = [];
+      spuList.value = [];
+      spuPropertyList.value = [];
      return;
    }
+
    // 加载数据
    const data =
      modalApi.getData<MallCombinationActivityApi.CombinationActivity>();
    if (!data || !data.id) {
      return;
    }
+    // 加载数据
    modalApi.lock();
    try {
      formData.value = await getCombinationActivity(data.id);
-      await nextTick();
+      // 对齐活动商品处理结构
+      await getSpuDetails(
+        formData.value.spuId!,
+        formData.value.products?.map((sku) => sku.skuId),
+        formData.value.products,
+      );
+      // 设置表单值
      await formApi.setValues(formData.value);
-      // 加载商品和 SKU 信息
-      // TODO @puhui999：if return，简化括号层级
-      if (formData.value.spuId) {
-        const spu = await getSpu(formData.value.spuId);
-        if (spu) {
-          spuId.value = spu.id;
-          spuName.value = spu.name || '';
-          // 回填 SKU 配置
-          const products = formData.value.products || [];
-          skuTableData.value =
-            spu.skus
-              ?.filter((sku) => products.some((p) => p.skuId === sku.id))
-              .map((sku) => {
-                const product = products.find((p) => p.skuId === sku.id);
-                return {
-                  skuId: sku.id!,
-                  skuName: sku.name || '',
-                  picUrl: sku.picUrl || spu.picUrl || '',
-                  price: sku.price || 0,
-                  combinationPrice: (product?.combinationPrice || 0) / 100, // 分转元
-                };
-              }) || [];
-        }
-      }
    } finally {
      modalApi.unlock();
    }
@@ -179,80 +213,49 @@ const [Modal, modalApi] = useVbenModal({
 </script>

 <template>
-  <Modal class="w-4/5" :title="getTitle">
-    <div class="mx-4">
-      <Form />
+  <div>
+    <Modal :title="getTitle" class="w-[70%]">
+      <Form class="mx-4">
+        <!-- 商品选择 -->
+        <template #spuId>
+          <div class="w-full">
+            <Button v-if="!formData?.id" type="primary" @click="openSpuSelect">
+              选择商品
+            </Button>

-      <!-- 商品选择区域 -->
-      <div class="mt-4">
-        <div class="mb-2 flex items-center">
-          <span class="text-sm font-medium">拼团活动商品:</span>
-          <Button class="ml-2" type="primary" @click="handleSelectProduct">
-            选择商品
-          </Button>
-          <span v-if="spuName" class="ml-4 text-sm text-gray-600">
-            已选择: {{ spuName }}
-          </span>
-        </div>
+            <!-- SPU 和 SKU 列表展示 -->
+            <SpuAndSkuList
+              ref="spuAndSkuListRef"
+              :rule-config="ruleConfig"
+              :spu-list="spuList"
+              :spu-property-list-p="spuPropertyList"
+              class="mt-4"
+            >
+              <!-- 扩展列：拼团活动特有配置 -->
+              <template #default>
+                <VxeColumn align="center" min-width="168" title="拼团价格(元)">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.combinationPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Modal>

-        <!-- SKU 配置表格 -->
-        <div v-if="skuTableData.length > 0" class="mt-4">
-          <table class="w-full border-collapse border border-gray-300">
-            <thead>
-              <tr class="bg-gray-100">
-                <th class="border border-gray-300 px-4 py-2">商品图片</th>
-                <th class="border border-gray-300 px-4 py-2">SKU 名称</th>
-                <th class="border border-gray-300 px-4 py-2">原价(元)</th>
-                <th class="border border-gray-300 px-4 py-2">拼团价格(元)</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(sku, index) in skuTableData" :key="index">
-                <td class="border border-gray-300 px-4 py-2 text-center">
-                  <img
-                    v-if="sku.picUrl"
-                    :src="sku.picUrl"
-                    alt="商品图片"
-                    class="h-16 w-16 object-cover"
-                  />
-                </td>
-                <!-- TODO @puhui999：这里貌似和 element-plus 没对齐；；ps：是不是用 grid 组件呀？或者 vxe 组件
-                 图片
-                  商品条码
-                  销售价(元)
-                  市场价(元)
-                  成本价(元)
-                  库存
-                  拼团价格(元)
-                 -->
-                <td class="border border-gray-300 px-4 py-2">
-                  {{ sku.skuName }}
-                </td>
-                <td class="border border-gray-300 px-4 py-2 text-center">
-                  ¥{{ (sku.price / 100).toFixed(2) }}
-                </td>
-                <td class="border border-gray-300 px-4 py-2">
-                  <!-- TODO @puhui999：是不是要使用 antd 的哈？ -->
-                  <input
-                    v-model.number="sku.combinationPrice"
-                    type="number"
-                    min="0"
-                    step="0.01"
-                    class="w-full rounded border border-gray-300 px-2 py-1"
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </Modal>
-
-  <!-- 商品选择器弹窗 -->
-  <SpuSkuSelect
-    ref="spuSkuSelectRef"
-    :is-select-sku="true"
-    @select="handleSpuSelected"
-  />
+    <!-- 商品选择器弹窗 -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      @select="handleSpuSelected"
+    />
+  </div>
 </template>
--- a/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
@@ -2,7 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';

-import { ref } from 'vue';
+import { nextTick, ref } from 'vue';

 import { Modal } from 'ant-design-vue';

@@ -57,6 +57,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 /** 打开弹窗 */
 async function open() {
  visible.value = true;
+  // 等待 Modal 和 Grid 组件挂载完成后再查询
+  await nextTick();
  await gridApi.query();
 }

--- a/apps/web-antd/src/views/mall/promotion/point/components/index.ts
+++ b/apps/web-antd/src/views/mall/promotion/point/components/index.ts
@@ -1,2 +1,2 @@
-export { default as PointShowcase } from './point-showcase.vue';
-export { default as PointTableSelect } from './point-table-select.vue';
+export { default as PointShowcase } from './showcase.vue';
+export { default as PointTableSelect } from './table-select.vue';
--- a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
@@ -1,5 +1,4 @@
 <!-- 积分商城活动橱窗组件：用于展示和选择积分商城活动 -->
-<!-- TODO @puhui999：不需要 point- 前缀 --->
 <script lang="ts" setup>
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';

@@ -11,7 +10,7 @@ import { Image, Tooltip } from 'ant-design-vue';

 import { getPointActivityListByIds } from '#/api/mall/promotion/point';

-import PointTableSelect from './point-table-select.vue';
+import TableSelect from './table-select.vue';

 interface PointShowcaseProps {
  modelValue?: number | number[];
@@ -28,7 +27,7 @@ const props = withDefaults(defineProps<PointShowcaseProps>(), {
 const emit = defineEmits(['update:modelValue', 'change']);

 const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]); // 已选择的活动列表
-const pointTableSelectRef = ref<InstanceType<typeof PointTableSelect>>(); // 活动选择表格组件引用
+const pointTableSelectRef = ref<InstanceType<typeof TableSelect>>(); // 活动选择表格组件引用
 const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式

 /** 计算是否可以添加 */
@@ -141,7 +140,7 @@ function emitActivityChange() {
  </div>

  <!-- 活动选择对话框 -->
-  <PointTableSelect
+  <TableSelect
    ref="pointTableSelectRef"
    :multiple="isMultiple"
    @change="handleActivitySelected"
--- a/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
@@ -1,5 +1,4 @@
 <!-- 积分商城活动选择弹窗组件 -->
-<!-- TODO @puhui999：不需要 point- 前缀 --->
 <script lang="ts" setup>
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
@@ -10,7 +9,6 @@ import { computed } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
-import { dateFormatter, fenToYuanFormat } from '@vben/utils';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getPointActivityPage } from '#/api/mall/promotion/point';
@@ -93,7 +91,9 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
      title: '原价',
      minWidth: 100,
      align: 'center',
-      formatter: ({ cellValue }) => fenToYuanFormat(cellValue),
+      formatter: ({ cellValue }) => {
+        return `¥${(cellValue / 100).toFixed(2)}`;
+      },
    },
    {
      field: 'status',
@@ -129,7 +129,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
      title: '创建时间',
      width: 180,
      align: 'center',
-      formatter: ({ cellValue }) => dateFormatter(cellValue),
+      formatter: 'formatDateTime',
    },
  );
  return columns;
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
@@ -11,6 +11,7 @@ import {
 import { convertToInteger, formatToFraction } from '@vben/utils';

 import { message } from 'ant-design-vue';
+import dayjs from 'dayjs';

 import { useVbenForm } from '#/adapter/form';
 import {
@@ -73,23 +74,7 @@ const [Modal, modalApi] = useVbenModal({
          item.limit = convertToInteger(item.limit || 0);
        }
      });
-      // 设置 productScopeValues
-      switch (data.productScope) {
-        // TODO @puhui999：这里要不要搞成类似优惠劵的
-        case PromotionProductScopeEnum.CATEGORY.scope: {
-          const categoryIds = data.productCategoryIds;
-          data.productScopeValues = Array.isArray(categoryIds)
-            ? categoryIds
-            : categoryIds
-              ? [categoryIds]
-              : [];
-          break;
-        }
-        case PromotionProductScopeEnum.SPU.scope: {
-          data.productScopeValues = data.productSpuIds;
-          break;
-        }
-      }
+      // productScopeValues 已通过 data.ts 中的 dependencies.trigger 自动同步到表单值中
      await (data.id
        ? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
        : createRewardActivity(data as MallRewardActivityApi.RewardActivity));
@@ -114,7 +99,11 @@ const [Modal, modalApi] = useVbenModal({
    modalApi.lock();
    try {
      const result = await getReward(data.id);
-      result.startAndEndTime = [result.startTime, result.endTime] as any[];
+      // antd RangePicker 需要 dayjs 对象
+      result.startAndEndTime = [
+        result.startTime ? dayjs(result.startTime) : undefined,
+        result.endTime ? dayjs(result.endTime) : undefined,
+      ] as any[];
      result.rules?.forEach((item: any) => {
        item.discountPrice = formatToFraction(item.discountPrice || 0);
        if (result.conditionType === PromotionConditionTypeEnum.PRICE.type) {
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
@@ -59,8 +59,8 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择活动开始时间',
-        showTime: false,
-        format: 'YYYY-MM-DD',
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'x',
        class: 'w-full',
      },
@@ -72,8 +72,8 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择活动结束时间',
-        showTime: false,
-        format: 'YYYY-MM-DD',
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'x',
        class: 'w-full',
      },
@@ -137,6 +137,12 @@ export function useFormSchema(): VbenFormSchema[] {
      },
      formItemClass: 'col-span-2',
    },
+    {
+      fieldName: 'spuId',
+      label: '秒杀商品',
+      component: 'Input',
+      formItemClass: 'col-span-2',
+    },
  ];
 }

--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
@@ -1,13 +1,20 @@
 <script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+import type {
+  RuleConfig,
+  SpuProperty,
+} from '#/views/mall/product/spu/components';

-import { computed, nextTick, ref } from 'vue';
+import { computed, ref } from 'vue';

 import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';

-import { Button, message } from 'ant-design-vue';
+import { Button, InputNumber, message } from 'ant-design-vue';

 import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
 import {
  createSeckillActivity,
@@ -15,11 +22,18 @@ import {
  updateSeckillActivity,
 } from '#/api/mall/promotion/seckill/seckillActivity';
 import { $t } from '#/locales';
-import { SpuSkuSelect } from '#/views/mall/product/spu/components';
+import {
+  getPropertyList,
+  SpuAndSkuList,
+  SpuSkuSelect,
+} from '#/views/mall/product/spu/components';

 import { useFormSchema } from '../data';

+defineOptions({ name: 'PromotionSeckillActivityForm' });
+
 const emit = defineEmits(['success']);
+
 const formData = ref<MallSeckillActivityApi.SeckillActivity>();
 const getTitle = computed(() => {
  return formData.value?.id
@@ -27,94 +41,140 @@ const getTitle = computed(() => {
    : $t('ui.actionTitle.create', ['秒杀活动']);
 });

-// ================= 商品选择相关 =================
-const spuId = ref<number>();
-const spuName = ref<string>('');
-const skuTableData = ref<any[]>([]);
-
-const spuSkuSelectRef = ref(); // 商品选择弹窗 Ref
-
-/** 打开商品选择弹窗 */
-const handleSelectProduct = () => {
-  spuSkuSelectRef.value?.open();
-};
-
-/** 选择商品后的回调 */
-async function handleSpuSelected(selectedSpuId: number, skuIds?: number[]) {
-  const spu = await getSpu(selectedSpuId);
-  if (!spu) return;
-
-  spuId.value = spu.id;
-  spuName.value = spu.name || '';
-
-  // 筛选指定的 SKU
-  const selectedSkus = skuIds
-    ? spu.skus?.filter((sku) => skuIds.includes(sku.id!))
-    : spu.skus;
-
-  skuTableData.value =
-    selectedSkus?.map((sku) => ({
-      skuId: sku.id!,
-      skuName: sku.name || '',
-      picUrl: sku.picUrl || spu.picUrl || '',
-      price: sku.price || 0,
-      stock: 0,
-      seckillPrice: 0,
-    })) || [];
-}
-
-// ================= end =================
-
 const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
+    labelWidth: 120,
  },
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
 });

+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.stock',
+    rule: (arg) => arg >= 1,
+    message: '商品秒杀库存必须大于等于 1 ！！！',
+  },
+  {
+    name: 'productConfig.seckillPrice',
+    rule: (arg) => arg >= 0.01,
+    message: '商品秒杀价格必须大于等于 0.01 ！！！',
+  },
+];
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
+
+/** 打开商品选择器 */
+function openSpuSelect() {
+  spuSkuSelectRef.value?.open();
+}
+
+/** 选择商品后的回调 */
+async function handleSpuSelected(spuId: number, skuIds?: number[]) {
+  await formApi.setFieldValue('spuId', spuId);
+  await getSpuDetails(spuId, skuIds);
+}
+
+/** 获取 SPU 详情 */
+async function getSpuDetails(
+  spuId: number,
+  skuIds?: number[],
+  products?: MallSeckillActivityApi.SeckillProduct[],
+) {
+  const res = await getSpu(spuId);
+  if (!res) {
+    return;
+  }
+
+  spuList.value = [];
+
+  // 筛选指定的 SKU
+  const selectSkus =
+    skuIds === undefined
+      ? res.skus
+      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
+
+  // 为每个 SKU 配置秒杀活动相关的配置
+  selectSkus?.forEach((sku) => {
+    let config: MallSeckillActivityApi.SeckillProduct = {
+      spuId: res.id!,
+      skuId: sku.id!,
+      stock: 0,
+      seckillPrice: 0,
+    };
+    // 如果是编辑模式，回填已有配置
+    if (products !== undefined) {
+      const product = products.find((item) => item.skuId === sku.id);
+      if (product) {
+        // 分转元
+        product.seckillPrice = formatToFraction(
+          product.seckillPrice,
+        ) as unknown as number;
+      }
+      config = product || config;
+    }
+    // 动态添加 productConfig 属性到 SKU
+    (
+      sku as MallSpuApi.Sku & {
+        productConfig: MallSeckillActivityApi.SeckillProduct;
+      }
+    ).productConfig = config;
+  });
+  res.skus = selectSkus;
+
+  const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
+    {
+      spuId: res.id!,
+      spuDetail: res,
+      propertyList: getPropertyList(res),
+    },
+  ];
+
+  // 直接赋值，因为秒杀活动只选择一个 SPU
+  spuList.value = [res];
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
 const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
-
-    // 验证商品和 SKU 配置
-    if (!spuId.value) {
-      message.error('请选择秒杀商品');
-      return;
-    }
-    if (skuTableData.value.length === 0) {
-      message.error('请至少配置一个 SKU');
-      return;
-    }
-    // 验证 SKU 配置
-    const hasInvalidSku = skuTableData.value.some(
-      (sku) => sku.stock < 1 || sku.seckillPrice < 0.01,
-    );
-    if (hasInvalidSku) {
-      message.error('请正确配置 SKU 的秒杀库存（≥1）和秒杀价格（≥0.01）');
-      return;
-    }
-
-    // 提交表单
    modalApi.lock();
    try {
+      // 获取秒杀商品配置（深拷贝避免直接修改原对象）
+      const products: MallSeckillActivityApi.SeckillProduct[] = cloneDeep(
+        spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
+      );
+      if (products.length === 0) {
+        message.error('请选择秒杀商品');
+        return;
+      }
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.seckillPrice = convertToInteger(item.seckillPrice);
+      });
+
+      // 提交表单
      const values = await formApi.getValues();
-      const data: any = {
+      const data = {
        ...values,
-        spuId: spuId.value,
-        products: skuTableData.value.map((sku) => ({
-          skuId: sku.skuId,
-          stock: sku.stock,
-          seckillPrice: Math.round(sku.seckillPrice * 100), // 转换为分
-        })),
-      };
+        products,
+      } as MallSeckillActivityApi.SeckillActivity;
+
      await (formData.value?.id
        ? updateSeckillActivity(data)
        : createSeckillActivity(data));
@@ -129,9 +189,8 @@ const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formData.value = undefined;
-      spuId.value = undefined;
-      spuName.value = '';
-      skuTableData.value = [];
+      spuList.value = [];
+      spuPropertyList.value = [];
      return;
    }

@@ -140,36 +199,18 @@ const [Modal, modalApi] = useVbenModal({
    if (!data || !data.id) {
      return;
    }
+    // 加载数据
    modalApi.lock();
    try {
      formData.value = await getSeckillActivity(data.id);
-      await nextTick();
+      // 对齐活动商品处理结构
+      await getSpuDetails(
+        formData.value.spuId!,
+        formData.value.products?.map((sku) => sku.skuId),
+        formData.value.products,
+      );
+      // 设置表单值
      await formApi.setValues(formData.value);
-      // 加载商品和 SKU 信息
-      // TODO @puhui999：if return 简化括号层级
-      if (formData.value.spuId) {
-        const spu = await getSpu(formData.value.spuId);
-        if (spu) {
-          spuId.value = spu.id;
-          spuName.value = spu.name || '';
-          // 回填 SKU 配置
-          const products = formData.value.products || [];
-          skuTableData.value =
-            spu.skus
-              ?.filter((sku) => products.some((p) => p.skuId === sku.id))
-              .map((sku) => {
-                const product = products.find((p) => p.skuId === sku.id);
-                return {
-                  skuId: sku.id!,
-                  skuName: sku.name || '',
-                  picUrl: sku.picUrl || spu.picUrl || '',
-                  price: sku.price || 0,
-                  stock: product?.stock || 0,
-                  seckillPrice: (product?.seckillPrice || 0) / 100, // 分转元
-                };
-              }) || [];
-        }
-      }
    } finally {
      modalApi.unlock();
    }
@@ -178,80 +219,59 @@ const [Modal, modalApi] = useVbenModal({
 </script>

 <template>
-  <Modal class="w-4/5" :title="getTitle">
-    <div class="mx-4">
-      <Form />
+  <div>
+    <Modal :title="getTitle" class="w-[70%]">
+      <Form class="mx-4">
+        <!-- 商品选择 -->
+        <template #spuId>
+          <div class="w-full">
+            <Button v-if="!formData?.id" type="primary" @click="openSpuSelect">
+              选择商品
+            </Button>

-      <!-- 商品选择区域 -->
-      <div class="mt-4">
-        <div class="mb-2 flex items-center">
-          <span class="text-sm font-medium">秒杀活动商品:</span>
-          <Button class="ml-2" type="primary" @click="handleSelectProduct">
-            选择商品
-          </Button>
-          <span v-if="spuName" class="ml-4 text-sm text-gray-600">
-            已选择: {{ spuName }}
-          </span>
-        </div>
+            <!-- SPU 和 SKU 列表展示 -->
+            <SpuAndSkuList
+              ref="spuAndSkuListRef"
+              :rule-config="ruleConfig"
+              :spu-list="spuList"
+              :spu-property-list-p="spuPropertyList"
+              class="mt-4"
+            >
+              <!-- 扩展列：秒杀活动特有配置 -->
+              <template #default>
+                <VxeColumn align="center" min-width="168" title="秒杀库存">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.stock"
+                      :max="sku.stock"
+                      :min="0"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="秒杀价格(元)">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.seckillPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Modal>

-        <!-- SKU 配置表格 -->
-        <div v-if="skuTableData.length > 0" class="mt-4">
-          <!-- TODO @puhui999：Grid？或者 VXETable 哇？ -->
-          <table class="w-full border-collapse border border-gray-300">
-            <thead>
-              <tr class="bg-gray-100">
-                <th class="border border-gray-300 px-4 py-2">商品图片</th>
-                <th class="border border-gray-300 px-4 py-2">SKU 名称</th>
-                <th class="border border-gray-300 px-4 py-2">原价(元)</th>
-                <th class="border border-gray-300 px-4 py-2">秒杀库存</th>
-                <th class="border border-gray-300 px-4 py-2">秒杀价格(元)</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(sku, index) in skuTableData" :key="index">
-                <td class="border border-gray-300 px-4 py-2 text-center">
-                  <img
-                    v-if="sku.picUrl"
-                    :src="sku.picUrl"
-                    alt="商品图片"
-                    class="h-16 w-16 object-cover"
-                  />
-                </td>
-                <td class="border border-gray-300 px-4 py-2">
-                  {{ sku.skuName }}
-                </td>
-                <td class="border border-gray-300 px-4 py-2 text-center">
-                  ¥{{ (sku.price / 100).toFixed(2) }}
-                </td>
-                <td class="border border-gray-300 px-4 py-2">
-                  <input
-                    v-model.number="sku.stock"
-                    type="number"
-                    min="0"
-                    class="w-full rounded border border-gray-300 px-2 py-1"
-                  />
-                </td>
-                <td class="border border-gray-300 px-4 py-2">
-                  <input
-                    v-model.number="sku.seckillPrice"
-                    type="number"
-                    min="0"
-                    step="0.01"
-                    class="w-full rounded border border-gray-300 px-2 py-1"
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </Modal>
-
-  <!-- 商品选择器弹窗 -->
-  <SpuSkuSelect
-    ref="spuSkuSelectRef"
-    :is-select-sku="true"
-    @select="handleSpuSelected"
-  />
+    <!-- 商品选择器弹窗 -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      @select="handleSpuSelected"
+    />
+  </div>
 </template>