From 6922ab13fc03a578dcdfff08cb1e4b8cc770ebc6 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 08:24:30 +0800
Subject: [PATCH 01/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91bargain=20=E4=BC=98=E5=8C=96=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/product/comment/modules/form.vue     |   6 +-
 .../product/spu/components/spu-showcase.vue   |   9 +-
 .../src/views/mall/product/spu/form/index.vue |  58 ++-
 .../mall/promotion/bargain/activity/data.ts   |  53 +--
 .../bargain/activity/modules/form.vue         | 390 ++++++++++--------
 5 files changed, 275 insertions(+), 241 deletions(-)

diff --git a/apps/web-antd/src/views/mall/product/comment/modules/form.vue b/apps/web-antd/src/views/mall/product/comment/modules/form.vue
index 3ff475282..0599f5977 100644
--- 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;
     }
     // 编辑模式：加载数据
diff --git 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
index 1c508cc7e..17e405bfb 100644
--- 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>
diff --git a/apps/web-antd/src/views/mall/product/spu/form/index.vue b/apps/web-antd/src/views/mall/product/spu/form/index.vue
index c2f5e3061..0d654b318 100644
--- 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;
 }
diff --git a/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts b/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts
index 3505f1b7d..d7474eeb5 100644
--- 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',
+    },
   ];
 }
 
diff --git 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
index 5ab5309a1..38d492084 100644
--- 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>

From 348cc35aecb951c5a71f35c9013a31eb32b414df Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 08:33:40 +0800
Subject: [PATCH 02/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91combination=20=E4=BC=98=E5=8C=96=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../promotion/combination/activity/data.ts    |  32 +-
 .../combination/activity/modules/form.vue     | 345 +++++++++---------
 2 files changed, 189 insertions(+), 188 deletions(-)

diff --git a/apps/web-antd/src/views/mall/promotion/combination/activity/data.ts b/apps/web-antd/src/views/mall/promotion/combination/activity/data.ts
index c3362dab4..8891f892c 100644
--- 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',
+    },
   ];
 }
 
diff --git 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
index 234d3d73d..22c3cbb45 100644
--- 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>

From 57855eff06f1b1d686c3554d1d4024cfe0b1de9e Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 08:40:09 +0800
Subject: [PATCH 03/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91seckill=20=E4=BC=98=E5=8C=96=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/seckill/activity/data.ts   |  14 +-
 .../seckill/activity/modules/form.vue         | 366 +++++++++---------
 2 files changed, 203 insertions(+), 177 deletions(-)

diff --git a/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts b/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
index 8c1d52e23..2ebb63de5 100644
--- 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',
+    },
   ];
 }
 
diff --git 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
index 10485fca1..0a9bc4839 100644
--- 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>

From f99d708c978ae5abb05b7812576142710fc93d5b Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 08:53:47 +0800
Subject: [PATCH 04/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91rewardActivity=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../promotion/rewardActivity/modules/form.vue  | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
index 660035863..e171559b8 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
@@ -73,23 +73,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));

From f429e74e7963b8ed93b3ecc3d21545826f744997 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 08:56:32 +0800
Subject: [PATCH 05/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91point=20=E4=BC=98=E5=8C=96=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/mall/promotion/point/components/index.ts     | 4 ++--
 .../point/components/{point-showcase.vue => showcase.vue}  | 7 +++----
 .../{point-table-select.vue => table-select.vue}           | 1 -
 3 files changed, 5 insertions(+), 7 deletions(-)
 rename apps/web-antd/src/views/mall/promotion/point/components/{point-showcase.vue => showcase.vue} (94%)
 rename apps/web-antd/src/views/mall/promotion/point/components/{point-table-select.vue => table-select.vue} (99%)

diff --git a/apps/web-antd/src/views/mall/promotion/point/components/index.ts b/apps/web-antd/src/views/mall/promotion/point/components/index.ts
index 6dfdb2999..4271f4e17 100644
--- 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';
diff --git a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue b/apps/web-antd/src/views/mall/promotion/point/components/showcase.vue
similarity index 94%
rename from apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
rename to apps/web-antd/src/views/mall/promotion/point/components/showcase.vue
index 3c479780a..9f16ac9d0 100644
--- a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/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"
diff --git a/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue b/apps/web-antd/src/views/mall/promotion/point/components/table-select.vue
similarity index 99%
rename from apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
rename to apps/web-antd/src/views/mall/promotion/point/components/table-select.vue
index aaae369e4..eff545cba 100644
--- a/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/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';

From e1e0554aca0fc626987fe33cf48e53d8e0b56c65 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 09:13:38 +0800
Subject: [PATCH 06/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91spu=20=E4=BB=A3=E7=A0=81=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=20antd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../spu/components/sku-table-select.vue       |  29 +++--
 .../product/spu/components/spu-select.vue     |   6 +-
 .../product/spu/components/spu-showcase.vue   |   7 +-
 .../spu/components/spu-table-select.vue       |  81 ++++++------
 .../src/views/mall/product/spu/form/index.vue | 119 ++++++++----------
 .../spu/form/modules/product-attributes.vue   |   7 +-
 .../modules/product-property-add-form.vue     |   2 +-
 7 files changed, 119 insertions(+), 132 deletions(-)

diff --git a/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue b/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue
index 015345392..c4e23a314 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue
@@ -22,16 +22,6 @@ const emit = defineEmits<{
 const visible = ref(false);
 const spuId = ref<number>();
 
-/** 处理选中 */
-function handleRadioChange() {
-  const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
-  if (selectedRow) {
-    emit('change', selectedRow);
-    closeModal();
-  }
-}
-
-// TODO @puhui999：这里的代码风格，对齐 antd 的；可以使用 idea 对比两个文件哈；
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useSkuGridColumns(),
@@ -39,20 +29,33 @@ const [Grid, gridApi] = useVbenVxeGrid({
     border: true,
     radioConfig: {
       reserve: true,
+      highlight: true,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
     },
     pagerConfig: {
       enabled: false,
     },
   },
   gridEvents: {
-    radioChange: handleRadioChange,
+    radioChange: () => {
+      const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
+      if (selectedRow) {
+        emit('change', selectedRow);
+        // 关闭弹窗
+        visible.value = false;
+        gridApi.grid.clearRadioRow();
+        spuId.value = undefined;
+      }
+    },
   },
 });
 
 /** 关闭弹窗 */
 function closeModal() {
   visible.value = false;
-  gridApi.grid.clearRadioRow();
   spuId.value = undefined;
 }
 
@@ -63,6 +66,8 @@ async function openModal(data?: SpuData) {
   }
   spuId.value = data.spuId;
   visible.value = true;
+  // 注意：useVbenVxeGrid 关闭分页(pagerConfig.enabled=false)后，proxyConfig.ajax.query 的结果不会传递到 vxe-table
+  // 需要手动调用 reloadData 设置表格数据
   if (!spuId.value) {
     gridApi.grid?.reloadData([]);
     return;
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-select.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-select.vue
index e49b31cfd..0b32a9639 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/spu-select.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-select.vue
@@ -312,8 +312,10 @@ onMounted(async () => {
       </template>
     </Grid>
     <template #footer>
-      <el-button @click="closeModal">取消</el-button>
-      <el-button type="primary" @click="handleConfirm">确定</el-button>
+      <span class="dialog-footer">
+        <el-button @click="closeModal">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确定</el-button>
+      </span>
     </template>
   </ElDialog>
 </template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
index 468d763de..940ad3d81 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
@@ -108,14 +108,12 @@ function emitSpuChange() {
           <ElImage
             :src="spu.picUrl"
             class="h-full w-full rounded-lg object-cover"
-            :preview-src-list="[spu.picUrl!]"
             fit="cover"
           />
           <!-- 删除按钮 -->
-          <!-- TODO @puhui999：还是使用 IconifyIcon：使用自己的中立的图标，方便 antd 和 ele 共享 -->
           <IconifyIcon
             v-if="!disabled"
-            icon="ep:circle-close-filled"
+            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)"
           />
@@ -129,8 +127,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 共享 -->
-        <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
+        <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
       </div>
     </ElTooltip>
   </div>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
index d2d165562..2d337b47d 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
@@ -52,19 +52,23 @@ const formSchema = computed<VbenFormSchema[]>(() => [
     component: 'Input',
     componentProps: {
       placeholder: '请输入商品名称',
-      clearable: true,
+      allowClear: true,
     },
   },
   {
     fieldName: 'categoryId',
     label: '商品分类',
-    component: 'ApiTreeSelect',
+    component: 'TreeSelect',
     componentProps: {
-      options: categoryTreeList,
-      props: { label: 'name', children: 'children' },
-      nodeKey: 'id',
+      data: categoryTreeList,
+      props: {
+        label: 'name',
+        value: 'id',
+      },
+      checkStrictly: true,
       placeholder: '请选择商品分类',
       clearable: true,
+      filterable: true,
     },
   },
   {
@@ -73,7 +77,7 @@ const formSchema = computed<VbenFormSchema[]>(() => [
     component: 'RangePicker',
     componentProps: {
       ...getRangePickerDefaultProps(),
-      clearable: true,
+      allowClear: true,
     },
   },
 ]);
@@ -162,40 +166,35 @@ const [Grid, gridApi] = useVbenVxeGrid({
 async function openModal(data?: MallSpuApi.Spu | MallSpuApi.Spu[]) {
   initData.value = data;
   visible.value = true;
+  // 等待 Grid 组件完全初始化后再查询数据
   await nextTick();
-  // 1. 查询数据
-  await gridApi.query();
-  // 2. 设置已选中行
-  const tableData = gridApi.grid.getTableData().fullData;
-  if (
-    props.multiple &&
-    Array.isArray(initData.value) &&
-    initData.value.length > 0
-  ) {
-    setTimeout(() => {
-      (initData.value as unknown as MallSpuApi.Spu[])!.forEach((spu) => {
+  if (gridApi.grid) {
+    // 1. 先查询数据
+    await gridApi.query();
+    // 2. 设置已选中行
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((spu) => {
+          const row = tableData.find(
+            (item: MallSpuApi.Spu) => item.id === spu.id,
+          );
+          if (row) {
+            gridApi.grid.setCheckboxRow(row, true);
+          }
+        });
+      }, 300);
+    } else if (!props.multiple && data && !Array.isArray(data)) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
         const row = tableData.find(
-          (item: MallSpuApi.Spu) => item.id === spu.id,
+          (item: MallSpuApi.Spu) => item.id === data.id,
         );
         if (row) {
-          gridApi.grid.setCheckboxRow(row, true);
+          gridApi.grid.setRadioRow(row);
         }
-      });
-    }, 300);
-  } else if (
-    !props.multiple &&
-    initData.value &&
-    !Array.isArray(initData.value)
-  ) {
-    setTimeout(() => {
-      const row = tableData.find(
-        (item: MallSpuApi.Spu) =>
-          item.id === (initData.value as MallSpuApi.Spu).id,
-      );
-      if (row) {
-        gridApi.grid.setRadioRow(row);
-      }
-    }, 300);
+      }, 300);
+    }
   }
 }
 
@@ -214,10 +213,9 @@ function handleConfirm() {
   closeModal();
 }
 
-/** 对外暴露的方法 */
 defineExpose({
   open: openModal,
-});
+}); // 对外暴露的方法
 
 /** 初始化分类数据 */
 onMounted(async () => {
@@ -232,13 +230,14 @@ onMounted(async () => {
     title="选择商品"
     width="950px"
     :destroy-on-close="true"
-    :append-to-body="true"
     @close="closeModal"
   >
     <Grid />
-    <template v-if="props.multiple" #footer>
-      <el-button @click="closeModal">取消</el-button>
-      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    <template #footer>
+      <span v-if="props.multiple" class="dialog-footer">
+        <el-button @click="closeModal">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确定</el-button>
+      </span>
     </template>
   </ElDialog>
 </template>
diff --git a/apps/web-ele/src/views/mall/product/spu/form/index.vue b/apps/web-ele/src/views/mall/product/spu/form/index.vue
index 4b2fe8088..5f584c9a8 100644
--- a/apps/web-ele/src/views/mall/product/spu/form/index.vue
+++ b/apps/web-ele/src/views/mall/product/spu/form/index.vue
@@ -32,7 +32,6 @@ const spuId = ref<number>();
 const { params, name } = useRoute();
 const { closeCurrentTab } = useTabs();
 const activeTabName = ref('info');
-
 const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const isDetail = ref(name === 'ProductSpuDetail'); // 是否查看详情
 const skuListRef = ref(); // 商品属性列表 Ref
@@ -70,7 +69,6 @@ const formData = ref<MallSpuApi.Spu>({
 }); // spu 表单数据
 const propertyList = ref<PropertyAndValues[]>([]); // 商品属性列表
 const ruleConfig: RuleConfig[] = [
-  // TODO @puhui999：ele 这里都有 :number，antd 要不要加？
   {
     name: 'stock',
     rule: (arg: number) => arg >= 0,
@@ -200,7 +198,7 @@ async function handleSubmit() {
       item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
     });
   }
-  // 处理轮播图列表 TODO @puhui999：这个是必须的哇？
+  // 处理轮播图列表：上传组件可能返回对象或字符串，统一处理成字符串数组
   const newSliderPicUrls: any[] = [];
   values.sliderPicUrls!.forEach((item: any) => {
     // 如果是前端选的图
@@ -319,13 +317,10 @@ onMounted(async () => {
     <ProductPropertyAddFormModal :property-list="propertyList" />
 
     <Page auto-content-height>
-      <ElCard class="spu-form-card h-full w-full" v-loading="formLoading">
+      <ElCard class="h-full w-full" v-loading="formLoading">
         <template #header>
           <div class="flex items-center justify-between">
-            <ElTabs
-              v-model="activeTabName"
-              @tab-click="(tab: any) => handleTabChange(tab.paneName)"
-            >
+            <ElTabs v-model="activeTabName" @tab-change="handleTabChange">
               <ElTabPane label="基础设置" name="info" />
               <ElTabPane label="价格库存" name="sku" />
               <ElTabPane label="物流设置" name="delivery" />
@@ -333,7 +328,7 @@ onMounted(async () => {
               <ElTabPane label="其它设置" name="other" />
             </ElTabs>
             <div>
-              <ElButton v-if="!isDetail" type="primary" @click="handleSubmit">
+              <ElButton type="primary" v-if="!isDetail" @click="handleSubmit">
                 保存
               </ElButton>
               <ElButton v-else @click="() => closeCurrentTab()">
@@ -343,71 +338,61 @@ onMounted(async () => {
           </div>
         </template>
 
-        <div class="flex-1 overflow-auto">
-          <InfoForm class="w-3/5" v-show="activeTabName === 'info'" />
-          <SkuForm class="w-full" v-show="activeTabName === 'sku'">
-            <template #singleSkuList>
-              <SkuList
-                ref="skuListRef"
-                class="w-full"
+        <InfoForm class="w-3/5" v-show="activeTabName === 'info'" />
+        <SkuForm class="w-full" v-show="activeTabName === 'sku'">
+          <template #singleSkuList>
+            <SkuList
+              ref="skuListRef"
+              class="w-full"
+              :is-detail="isDetail"
+              :prop-form-data="formData"
+              :property-list="propertyList"
+              :rule-config="ruleConfig"
+            />
+          </template>
+          <template #productAttributes>
+            <div>
+              <ElButton class="mb-10px mr-15px" @click="openPropertyAddForm">
+                添加属性
+              </ElButton>
+              <ProductAttributes
                 :is-detail="isDetail"
-                :prop-form-data="formData"
                 :property-list="propertyList"
-                :rule-config="ruleConfig"
+                @success="generateSkus"
               />
-            </template>
-            <template #productAttributes>
-              <div>
-                <ElButton class="mb-10px mr-15px" @click="openPropertyAddForm">
-                  添加属性
-                </ElButton>
-                <ProductAttributes
-                  :is-detail="isDetail"
-                  :property-list="propertyList"
-                  @success="generateSkus"
-                />
-              </div>
-            </template>
-            <template #batchSkuList>
-              <SkuList
-                :is-batch="true"
-                :is-detail="isDetail"
-                :prop-form-data="formData"
-                :property-list="propertyList"
-              />
-            </template>
-            <template #multiSkuList>
-              <SkuList
-                ref="skuListRef"
-                :is-detail="isDetail"
-                :prop-form-data="formData"
-                :property-list="propertyList"
-                :rule-config="ruleConfig"
-              />
-            </template>
-          </SkuForm>
-          <DeliveryForm class="w-3/5" v-show="activeTabName === 'delivery'" />
-          <DescriptionForm
-            class="w-3/5"
-            v-show="activeTabName === 'description'"
-          />
-          <OtherForm class="w-3/5" v-show="activeTabName === 'other'" />
-        </div>
+            </div>
+          </template>
+          <template #batchSkuList>
+            <SkuList
+              :is-batch="true"
+              :is-detail="isDetail"
+              :prop-form-data="formData"
+              :property-list="propertyList"
+            />
+          </template>
+          <template #multiSkuList>
+            <SkuList
+              ref="skuListRef"
+              :is-detail="isDetail"
+              :prop-form-data="formData"
+              :property-list="propertyList"
+              :rule-config="ruleConfig"
+            />
+          </template>
+        </SkuForm>
+        <DeliveryForm class="w-3/5" v-show="activeTabName === 'delivery'" />
+        <DescriptionForm
+          class="w-3/5"
+          v-show="activeTabName === 'description'"
+        />
+        <OtherForm class="w-3/5" v-show="activeTabName === 'other'" />
       </ElCard>
     </Page>
   </div>
 </template>
 
-<style scoped>
-.spu-form-card {
-  display: flex;
-  flex-direction: column;
-}
-
-.spu-form-card :deep(.el-card__body) {
-  flex: 1;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
+<style lang="scss" scoped>
+:deep(.el-tabs__nav-wrap::after) {
+  display: none;
 }
 </style>
diff --git a/apps/web-ele/src/views/mall/product/spu/form/modules/product-attributes.vue b/apps/web-ele/src/views/mall/product/spu/form/modules/product-attributes.vue
index a81137fd0..e92e00237 100644
--- a/apps/web-ele/src/views/mall/product/spu/form/modules/product-attributes.vue
+++ b/apps/web-ele/src/views/mall/product/spu/form/modules/product-attributes.vue
@@ -215,18 +215,17 @@ async function getAttributeOptions(propertyId: number) {
         <ElOption
           v-for="item2 in attributeOptions"
           :key="item2.id"
-          :value="item2.name"
           :label="item2.name"
+          :value="item2.name"
         />
       </ElSelect>
       <ElTag
         v-show="!inputVisible(index)"
         @click="showInput(index)"
-        class="mx-1 cursor-pointer"
-        effect="plain"
+        class="mx-1 cursor-pointer border-dashed bg-gray-100"
       >
         <div class="flex items-center">
-          <IconifyIcon class="mr-2" icon="ep:plus" />
+          <IconifyIcon class="mr-2" icon="lucide:plus" />
           添加
         </div>
       </ElTag>
diff --git a/apps/web-ele/src/views/mall/product/spu/form/modules/product-property-add-form.vue b/apps/web-ele/src/views/mall/product/spu/form/modules/product-property-add-form.vue
index b45bd92c9..789ecd139 100644
--- a/apps/web-ele/src/views/mall/product/spu/form/modules/product-property-add-form.vue
+++ b/apps/web-ele/src/views/mall/product/spu/form/modules/product-property-add-form.vue
@@ -61,9 +61,9 @@ const formSchema: VbenFormSchema[] = [
         }));
       },
       filterable: true,
+      allowCreate: true,
       placeholder: '请选择属性名称。如果不存在，可手动输入选择',
       multiple: true,
-      allowCreate: true,
       clearable: true,
     },
     rules: 'required',

From d3a7a874a6d0c0e328e224b71891e4ee9f3f0df3 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 10:04:24 +0800
Subject: [PATCH 07/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91comment=20=E4=BB=A3=E7=A0=81=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=20antd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/mall/product/comment/data.ts    | 22 +++--
 .../src/views/mall/product/comment/index.vue  | 21 ++--
 .../mall/product/comment/modules/form.vue     | 96 ++++++++++++++++++-
 3 files changed, 115 insertions(+), 24 deletions(-)

diff --git a/apps/web-ele/src/views/mall/product/comment/data.ts b/apps/web-ele/src/views/mall/product/comment/data.ts
index 7a3641ef2..e3f895801 100644
--- a/apps/web-ele/src/views/mall/product/comment/data.ts
+++ b/apps/web-ele/src/views/mall/product/comment/data.ts
@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCommentApi } from '#/api/mall/product/comment';
 
 import { z } from '#/adapter/form';
-import { getSpuSimpleList } from '#/api/mall/product/spu';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 新增/修改的表单 */
@@ -17,19 +16,28 @@ export function useFormSchema(): VbenFormSchema[] {
         show: () => false,
       },
     },
-    // TODO @puhui999：商品的选择
     {
       fieldName: 'spuId',
       label: '商品',
-      component: 'ApiSelect',
+      component: 'Input',
       componentProps: {
-        api: getSpuSimpleList,
-        labelField: 'name',
-        valueField: 'id',
         placeholder: '请选择商品',
       },
       rules: 'required',
     },
+    {
+      fieldName: 'skuId',
+      label: '商品规格',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请选择商品规格',
+      },
+      dependencies: {
+        triggerFields: ['spuId'],
+        show: (values) => !!values.spuId,
+      },
+      rules: 'required',
+    },
     {
       fieldName: 'userAvatar',
       label: '用户头像',
@@ -88,7 +96,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'replyStatus',
       label: '回复状态',
-      component: 'Select',
+      component: 'RadioGroup',
       componentProps: {
         options: [
           { label: '已回复', value: true },
diff --git a/apps/web-ele/src/views/mall/product/comment/index.vue b/apps/web-ele/src/views/mall/product/comment/index.vue
index 373dbe7c0..3c39a767c 100644
--- a/apps/web-ele/src/views/mall/product/comment/index.vue
+++ b/apps/web-ele/src/views/mall/product/comment/index.vue
@@ -2,8 +2,6 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCommentApi } from '#/api/mall/product/comment';
 
-import { h } from 'vue';
-
 import { confirm, DocAlert, Page, prompt, useVbenModal } from '@vben/common-ui';
 
 import { ElInput, ElMessage, ElRate } from 'element-plus';
@@ -37,17 +35,17 @@ function handleCreate() {
 /** 回复评价 */
 function handleReply(row: MallCommentApi.Comment) {
   prompt({
-    component: () => {
-      return h(ElInput, {
-        type: 'textarea',
-        placeholder: '请输入回复内容',
-      });
+    component: ElInput,
+    componentProps: {
+      type: 'textarea',
+      placeholder: '请输入回复内容',
+      rows: 4,
     },
     content: row.content
       ? `用户评论：${row.content}\n请输入回复内容：`
       : '请输入回复内容：',
     title: '回复评论',
-    modelPropName: 'value',
+    modelPropName: 'modelValue',
   }).then(async (val) => {
     if (val) {
       await replyComment({
@@ -127,10 +125,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="handleRefresh" />
     <Grid table-title="评论列表">
       <template #descriptionScores="{ row }">
-        <ElRate v-model="row.descriptionScores" :disabled="true" />
+        <ElRate :model-value="row.descriptionScores" disabled />
       </template>
       <template #benefitScores="{ row }">
-        <ElRate v-model="row.benefitScores" :disabled="true" />
+        <ElRate :model-value="row.benefitScores" disabled />
       </template>
       <template #toolbar-tools>
         <TableAction
@@ -150,8 +148,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               label: '回复',
-              type: 'primary',
-              link: true,
+              type: 'text',
               auth: ['product:comment:update'],
               onClick: handleReply.bind(null, row),
             },
diff --git a/apps/web-ele/src/views/mall/product/comment/modules/form.vue b/apps/web-ele/src/views/mall/product/comment/modules/form.vue
index 24473ecce..6509e9e57 100644
--- a/apps/web-ele/src/views/mall/product/comment/modules/form.vue
+++ b/apps/web-ele/src/views/mall/product/comment/modules/form.vue
@@ -1,22 +1,30 @@
 <script lang="ts" setup>
 import type { MallCommentApi } from '#/api/mall/product/comment';
+import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { ElMessage } from 'element-plus';
+import { ElButton, ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
 import { createComment, getComment } from '#/api/mall/product/comment';
+import { getSpu } from '#/api/mall/product/spu';
 import { $t } from '#/locales';
+import {
+  SkuTableSelect,
+  SpuShowcase,
+} from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
-// TODO @puhui999：这里和 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/product/comment/modules/form.vue 存在差异，是不是还没迁移到呀。
-const formData = ref<MallCommentApi.Comment>();
+const formData = ref<Partial<MallCommentApi.Comment>>({
+  descriptionScores: 5,
+  benefitScores: 5,
+});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['虚拟评论'])
@@ -36,6 +44,40 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
+const skuTableSelectRef = ref<InstanceType<typeof SkuTableSelect>>();
+const selectedSku = ref<MallSpuApi.Sku>();
+
+/** 处理商品的选择变化 */
+async function handleSpuChange(spu?: MallSpuApi.Spu | null) {
+  // 处理商品选择：如果 spu 为 null 或 id 为 0，表示清空选择
+  const spuId = spu?.id && spu.id ? spu.id : undefined;
+  formData.value.spuId = spuId;
+  await formApi.setFieldValue('spuId', spuId);
+  // 清空已选规格
+  selectedSku.value = undefined;
+  formData.value.skuId = undefined;
+  await formApi.setFieldValue('skuId', undefined);
+}
+
+/** 打开商品规格的选择弹框 */
+async function openSkuSelect() {
+  const currentValues =
+    (await formApi.getValues()) as Partial<MallCommentApi.Comment>;
+  const currentSpuId = currentValues.spuId ?? formData.value?.spuId;
+  if (!currentSpuId) {
+    ElMessage.warning('请先选择商品');
+    return;
+  }
+  skuTableSelectRef.value?.open({ spuId: currentSpuId });
+}
+
+/** 处理商品规格的选择 */
+async function handleSkuSelected(sku: MallSpuApi.Sku) {
+  selectedSku.value = sku;
+  formData.value.skuId = sku.id;
+  await formApi.setFieldValue('skuId', sku.id);
+}
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -57,7 +99,9 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      // 关闭时重置表单状态
+      selectedSku.value = undefined;
+      await formApi.setValues({ spuId: undefined, skuId: undefined });
       return;
     }
     // 加载数据
@@ -65,11 +109,22 @@ const [Modal, modalApi] = useVbenModal({
     if (!data || !data.id) {
       return;
     }
+    // 编辑模式：加载数据
     modalApi.lock();
     try {
       formData.value = await getComment(data.id);
       // 设置到 values
       await formApi.setValues(formData.value);
+      // 回显已选的商品规格
+      if (formData.value?.spuId && formData.value?.skuId) {
+        const spu = await getSpu(formData.value.spuId);
+        const sku = spu.skus?.find((item) => item.id === formData.value!.skuId);
+        if (sku) {
+          selectedSku.value = sku;
+        }
+      } else {
+        selectedSku.value = undefined;
+      }
     } finally {
       modalApi.unlock();
     }
@@ -79,6 +134,37 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal class="w-2/5" :title="getTitle">
-    <Form class="mx-4" />
+    <Form class="mx-4">
+      <template #spuId>
+        <SpuShowcase
+          v-model="(formData as any).spuId"
+          :limit="1"
+          @change="handleSpuChange"
+        />
+      </template>
+      <template #skuId>
+        <div class="flex items-center gap-2">
+          <ElButton
+            type="primary"
+            :disabled="!formData?.spuId"
+            @click="openSkuSelect"
+          >
+            选择规格
+          </ElButton>
+          <span
+            v-if="
+              selectedSku &&
+              selectedSku.properties &&
+              selectedSku.properties.length > 0
+            "
+          >
+            已选：
+            {{ selectedSku.properties.map((p: any) => p.valueName).join('/') }}
+          </span>
+          <span v-else-if="selectedSku">已选：{{ selectedSku.id }}</span>
+        </div>
+      </template>
+    </Form>
+    <SkuTableSelect ref="skuTableSelectRef" @change="handleSkuSelected" />
   </Modal>
 </template>

From b9466282fc52ba23083991a575b9145eaed3c364 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 10:10:19 +0800
Subject: [PATCH 08/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91bargain=20=E4=BB=A3=E7=A0=81=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=20antd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/bargain/activity/data.ts   |  74 +---
 .../bargain/activity/modules/form.vue         | 397 +++++++++++-------
 .../mall/promotion/bargain/record/data.ts     |   9 +-
 3 files changed, 255 insertions(+), 225 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts b/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts
index 86e0af7da..06762a868 100644
--- a/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts
@@ -24,7 +24,7 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入活动名称',
       },
       rules: 'required',
-      // TODO @puhui999：这里和 antd 里的不太一样，可以看看。
+      formItemClass: 'col-span-2',
     },
     {
       fieldName: 'startTime',
@@ -33,8 +33,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'datetime',
         placeholder: '请选择开始时间',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -45,48 +45,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'datetime',
         placeholder: '请选择结束时间',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'bargainFirstPrice',
-      label: '砍价起始价格(元)',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        precision: 2,
-        step: 0.01,
-        placeholder: '请输入砍价起始价格',
-        controlsPosition: 'right',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'bargainMinPrice',
-      label: '砍价底价(元)',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        precision: 2,
-        step: 0.01,
-        placeholder: '请输入砍价底价',
-        controlsPosition: 'right',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'stock',
-      label: '活动库存',
-      component: 'InputNumber',
-      componentProps: {
-        min: 1,
-        placeholder: '请输入活动库存',
-        controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -96,9 +56,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 1,
-        placeholder: '请输入助力人数',
+        placeholder: '达到该人数才能砍到低价',
         controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -108,9 +67,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 1,
-        placeholder: '请输入砍价次数',
+        placeholder: '最大帮砍次数',
         controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -120,9 +78,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 1,
-        placeholder: '请输入购买限制',
+        placeholder: '最大购买次数',
         controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -134,9 +91,8 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         precision: 2,
         step: 0.01,
-        placeholder: '请输入最小砍价金额',
+        placeholder: '用户每次砍价的最小金额',
         controlsPosition: 'right',
-        class: '!w-full',
       },
     },
     {
@@ -147,11 +103,17 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         precision: 2,
         step: 0.01,
-        placeholder: '请输入最大砍价金额',
+        placeholder: '用户每次砍价的最大金额',
         controlsPosition: 'right',
-        class: '!w-full',
       },
     },
+    {
+      fieldName: 'spuId',
+      label: '砍价商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
   ];
 }
 
@@ -223,15 +185,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'bargainFirstPrice',
       title: '起始价格',
       minWidth: 100,
-      // TODO @puhui999：这里和 antd 不太一样，得看看
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'bargainMinPrice',
       title: '砍价底价',
       minWidth: 100,
-      // TODO @puhui999：这里和 antd 不太一样，得看看
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'recordUserCount',
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue
index bd4d82975..56a6e0061 100644
--- a/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue
+++ b/apps/web-ele/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 { ElMessage } from 'element-plus';
+import { ElButton, ElInputNumber, ElMessage } from 'element-plus';
 
 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) {
-      ElMessage.error('请选择砍价商品');
-      return;
-    }
-    if (!skuId.value) {
-      ElMessage.error('请选择商品 SKU');
-      return;
-    }
-
-    // 提交表单
     modalApi.lock();
     try {
+      // 获取砍价商品配置（深拷贝避免直接修改原对象）
+      const products: MallBargainActivityApi.BargainProduct[] = cloneDeep(
+        spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
+      );
+      if (products.length === 0) {
+        ElMessage.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,82 @@ 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">
+            <ElButton
+              v-if="!formData?.id"
+              type="primary"
+              @click="openSpuSelect"
+            >
+              选择商品
+            </ElButton>
 
-      <!-- 商品选择区域 -->
-      <div class="mt-4">
-        <div class="mb-2 flex items-center">
-          <span class="text-sm font-medium">砍价活动商品:</span>
-          <el-button class="ml-2" type="primary" @click="handleSelectProduct">
-            选择商品
-          </el-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 }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.bargainFirstPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="砍价底价(元)">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.bargainMinPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="活动库存">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.stock"
+                      :max="sku.stock"
+                      :min="0"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </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>
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts b/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts
index a584e1146..47480820e 100644
--- a/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts
@@ -75,15 +75,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'activity.bargainMinPrice',
       title: '最低价',
       minWidth: 100,
-      // TODO @puhui999：这里和 antd 不同
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'bargainPrice',
       title: '当前价',
       minWidth: 100,
-      // TODO @puhui999：这里和 antd 不同
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'activity.helpMaxCount',
@@ -154,8 +152,7 @@ export function useHelpGridColumns(): VxeTableGridOptions['columns'] {
       field: 'reducePrice',
       title: '砍价金额',
       minWidth: 100,
-      // TODO @puhui999：这里和 antd 不同
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'createTime',

From 503ed01c570714b7dde4369a56f779be78f94aaa Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 10:32:38 +0800
Subject: [PATCH 09/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91combination=20=E4=BB=A3=E7=A0=81=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=20antd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../promotion/combination/activity/data.ts    |  42 +--
 .../combination/activity/modules/form.vue     | 354 +++++++++---------
 .../mall/promotion/combination/record/data.ts |   6 +-
 3 files changed, 200 insertions(+), 202 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/combination/activity/data.ts b/apps/web-ele/src/views/mall/promotion/combination/activity/data.ts
index c3b88118d..900af00e9 100644
--- a/apps/web-ele/src/views/mall/promotion/combination/activity/data.ts
+++ b/apps/web-ele/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,10 +32,9 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'DatePicker',
       componentProps: {
         placeholder: '请选择开始时间',
-        showTime: false,
+        type: 'datetime',
         valueFormat: 'x',
-        format: 'YYYY-MM-DD',
-        class: '!w-full',
+        format: 'YYYY-MM-DD HH:mm:ss',
       },
       rules: 'required',
     },
@@ -54,22 +44,19 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'DatePicker',
       componentProps: {
         placeholder: '请选择结束时间',
-        showTime: false,
+        type: 'datetime',
         valueFormat: 'x',
-        format: 'YYYY-MM-DD',
-        class: '!w-full',
+        format: 'YYYY-MM-DD HH:mm:ss',
       },
       rules: 'required',
     },
     {
       fieldName: 'userSize',
-      label: '用户数量',
+      label: '拼团人数',
       component: 'InputNumber',
       componentProps: {
-        placeholder: '请输入用户数量',
+        placeholder: '达到该人数即成团',
         min: 2,
-        controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -78,10 +65,8 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '限制时长',
       component: 'InputNumber',
       componentProps: {
-        placeholder: '请输入限制时长(小时)',
+        placeholder: '限制时长(小时)',
         min: 0,
-        controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -92,8 +77,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入总限购数量',
         min: 0,
-        controlsPosition: 'right',
-        class: '!w-full',
       },
     },
     {
@@ -103,8 +86,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入单次限购数量',
         min: 0,
-        controlsPosition: 'right',
-        class: '!w-full',
       },
     },
     {
@@ -115,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',
+    },
   ];
 }
 
diff --git a/apps/web-ele/src/views/mall/promotion/combination/activity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/combination/activity/modules/form.vue
index f54d05308..6f97d797d 100644
--- a/apps/web-ele/src/views/mall/promotion/combination/activity/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/combination/activity/modules/form.vue
@@ -1,12 +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 { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import { ElButton, ElInputNumber, ElMessage } from 'element-plus';
 
+import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
 import {
   createCombinationActivity,
@@ -14,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: {
@@ -73,49 +48,126 @@ const [Form, formApi] = useVbenForm({
     },
     labelWidth: 100,
   },
-  wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
 
-const [Modal, modalApi] = useVbenModal({
+// ================= 商品选择相关 =================
+
+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 [Dialog, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-
-    // 验证商品和 SKU 配置
-    if (!spuId.value) {
-      ElMessage.error('请选择拼团商品');
-      return;
-    }
-    if (skuTableData.value.length === 0) {
-      ElMessage.error('请至少配置一个 SKU');
-      return;
-    }
-    // 验证 SKU 配置
-    const hasInvalidSku = skuTableData.value.some(
-      (sku) => sku.combinationPrice < 0.01,
-    );
-    if (hasInvalidSku) {
-      ElMessage.error('请正确配置 SKU 的拼团价格（≥0.01）');
-      return;
-    }
-
-    // 提交表单
     modalApi.lock();
     try {
+      // 获取拼团商品配置（深拷贝避免直接修改原对象）
+      const products: MallCombinationActivityApi.CombinationProduct[] =
+        cloneDeep(spuAndSkuListRef.value?.getSkuConfigs('productConfig') || []);
+      if (products.length === 0) {
+        ElMessage.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));
@@ -130,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();
     }
@@ -178,80 +213,53 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-4/5" :title="getTitle">
-    <div class="mx-4">
-      <Form />
+  <div>
+    <Dialog :title="getTitle" class="w-[70%]">
+      <Form class="mx-4">
+        <!-- 商品选择 -->
+        <template #spuId>
+          <div class="w-full">
+            <ElButton
+              v-if="!formData?.id"
+              type="primary"
+              @click="openSpuSelect"
+            >
+              选择商品
+            </ElButton>
 
-      <!-- 商品选择区域 -->
-      <div class="mt-4">
-        <div class="mb-2 flex items-center">
-          <span class="text-sm font-medium">拼团活动商品:</span>
-          <ElButton class="ml-2" type="primary" @click="handleSelectProduct">
-            选择商品
-          </ElButton>
-          <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 }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.combinationPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Dialog>
 
-        <!-- 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>
diff --git a/apps/web-ele/src/views/mall/promotion/combination/record/data.ts b/apps/web-ele/src/views/mall/promotion/combination/record/data.ts
index 82b63c49a..7669be635 100644
--- a/apps/web-ele/src/views/mall/promotion/combination/record/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/combination/record/data.ts
@@ -20,9 +20,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'createTime',
       label: '创建时间',
-      component: 'RangePicker',
+      component: 'DatePicker',
       componentProps: {
-        placeholder: ['开始时间', '结束时间'],
+        type: 'daterange',
+        startPlaceholder: '开始时间',
+        endPlaceholder: '结束时间',
         clearable: true,
         valueFormat: 'YYYY-MM-DD HH:mm:ss',
       },

From fad560db520fbd7c88679c83e9844198addffba8 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 10:36:50 +0800
Subject: [PATCH 10/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91discountActivity=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=20antd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/discountActivity/data.ts   |  9 ++++++++-
 .../mall/promotion/discountActivity/index.vue |  5 +++--
 .../discountActivity/modules/form.vue         | 19 +++++++++++++------
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/discountActivity/data.ts b/apps/web-ele/src/views/mall/promotion/discountActivity/data.ts
index 395192522..9e6368fd2 100644
--- a/apps/web-ele/src/views/mall/promotion/discountActivity/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/discountActivity/data.ts
@@ -69,8 +69,15 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入备注',
         rows: 4,
       },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'spuIds',
+      label: '活动商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
     },
-    // TODO @puhui999：这里和 antd 对应的不太一样；
   ];
 }
 
diff --git a/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue b/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue
index 771695cc3..b9a5e725a 100644
--- a/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue
@@ -46,12 +46,13 @@ async function handleClose(row: MallDiscountActivityApi.DiscountActivity) {
     text: '正在关闭中...',
   });
   try {
-    await closeDiscountActivity(row.id as number);
+    await closeDiscountActivity(row.id!);
     ElMessage.success('关闭成功');
     handleRefresh();
   } finally {
     loadingInstance.close();
   }
+}
 
 /** 删除满减活动 */
 async function handleDelete(row: MallDiscountActivityApi.DiscountActivity) {
@@ -59,7 +60,7 @@ async function handleDelete(row: MallDiscountActivityApi.DiscountActivity) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteDiscountActivity(row.id as number);
+    await deleteDiscountActivity(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue
index 93a4b1356..5918b0ea2 100644
--- a/apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue
@@ -13,14 +13,18 @@ import {
   updateDiscountActivity,
 } from '#/api/mall/promotion/discount/discountActivity';
 import { $t } from '#/locales';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 defineOptions({ name: 'DiscountActivityForm' });
 
-// TODO @puhui999：这里和 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/discountActivity/modules/form.vue 不太一样
 const emit = defineEmits(['success']);
-const formData = ref<MallDiscountActivityApi.DiscountActivity>();
+const formData = ref<
+  Partial<MallDiscountActivityApi.DiscountActivity> & {
+    spuIds?: number[];
+  }
+>({});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['限时折扣活动'])
@@ -70,8 +74,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      // TODO @puhui999：这里和 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/discountActivity/modules/form.vue 不太一样
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -93,7 +96,11 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal class="w-3/5" :title="getTitle">
-    <!-- TODO @puhui999：这里和 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/discountActivity/modules/form.vue 不太一样 -->
-    <Form />
+    <Form>
+      <!-- 自定义插槽：商品选择 -->
+      <template #spuIds>
+        <SpuShowcase v-model="formData.spuIds" />
+      </template>
+    </Form>
   </Modal>
 </template>

From ebf7221fd2bdb453fe12884b1f87b5aab9f17eea Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 10:40:27 +0800
Subject: [PATCH 11/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91ElDialog=20:append-to-body=3D"true"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-ele/src/views/mall/product/spu/components/spu-select.vue | 1 +
 .../src/views/mall/product/spu/components/spu-table-select.vue   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-select.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-select.vue
index 0b32a9639..5f51bc24b 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/spu-select.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-select.vue
@@ -295,6 +295,7 @@ onMounted(async () => {
     title="商品选择"
     width="70%"
     :destroy-on-close="true"
+    :append-to-body="true"
     @close="closeModal"
   >
     <Grid>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
index 2d337b47d..f60cc6d34 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
@@ -230,6 +230,7 @@ onMounted(async () => {
     title="选择商品"
     width="950px"
     :destroy-on-close="true"
+    :append-to-body="true"
     @close="closeModal"
   >
     <Grid />

From a7054ec09c329e00a507004fe1605802e7f12ae2 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 10:46:59 +0800
Subject: [PATCH 12/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91coupon=20=E4=BB=A3=E7=A0=81=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=20antd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/coupon/template/data.ts    |  2 --
 .../coupon/template/modules/form.vue          | 25 +++++++++++++++----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/coupon/template/data.ts b/apps/web-ele/src/views/mall/promotion/coupon/template/data.ts
index 035259be5..0b00c1427 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/template/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/coupon/template/data.ts
@@ -60,7 +60,6 @@ export function useFormSchema(): VbenFormSchema[] {
       rules: 'required',
       defaultValue: PromotionProductScopeEnum.ALL.scope,
     },
-    // TODO @puhui999： 商品选择器优化
     {
       fieldName: 'productSpuIds',
       label: '商品',
@@ -84,7 +83,6 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: 'required',
     },
-    // TODO @puhui999： 商品分类选择器优化
     {
       fieldName: 'productCategoryIds',
       label: '商品分类',
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/template/modules/form.vue b/apps/web-ele/src/views/mall/promotion/coupon/template/modules/form.vue
index 69e5d8f1a..13e4c7535 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/template/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/template/modules/form.vue
@@ -16,11 +16,18 @@ import {
   updateCouponTemplate,
 } from '#/api/mall/promotion/coupon/couponTemplate';
 import { $t } from '#/locales';
+import { ProductCategorySelect } from '#/views/mall/product/category/components';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<MallCouponTemplateApi.CouponTemplate>();
+const formData = ref<
+  Partial<MallCouponTemplateApi.CouponTemplate> & {
+    productCategoryIds?: number | number[];
+    productSpuIds?: number[];
+  }
+>({});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['优惠券模板'])
@@ -64,7 +71,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -75,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = await getCouponTemplate(data.id);
-      const processedData = await processLoadData(formData.value);
+      const processedData = await processLoadData(formData.value as any);
       // 设置到表单
       await formApi.setValues(processedData);
     } finally {
@@ -144,7 +151,15 @@ async function processLoadData(
 
 <template>
   <Modal :title="getTitle" class="w-2/5">
-    <Form class="mx-4" />
-    <!-- TODO @puhui999：这里需要同步下 -->
+    <Form class="mx-4">
+      <!-- 自定义插槽：商品选择 -->
+      <template #productSpuIds>
+        <SpuShowcase v-model="formData.productSpuIds" />
+      </template>
+      <!-- 自定义插槽：分类选择 -->
+      <template #productCategoryIds>
+        <ProductCategorySelect v-model="formData.productCategoryIds" />
+      </template>
+    </Form>
   </Modal>
 </template>

From 41f0a9465d8bbd62f4f59e042676e09f17a86146 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 10:59:40 +0800
Subject: [PATCH 13/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91point=20=E4=BB=A3=E7=A0=81=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=20antd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../point/components/table-select.vue         |  7 ++++---
 .../promotion/point/activity/modules/form.vue |  7 ++-----
 .../promotion/point/components/showcase.vue   | 19 +++++++++----------
 .../point/components/table-select.vue         |  8 ++++----
 4 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/apps/web-antd/src/views/mall/promotion/point/components/table-select.vue b/apps/web-antd/src/views/mall/promotion/point/components/table-select.vue
index eff545cba..d4c1a2a27 100644
--- a/apps/web-antd/src/views/mall/promotion/point/components/table-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/table-select.vue
@@ -9,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';
@@ -92,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',
@@ -128,7 +129,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
       title: '创建时间',
       width: 180,
       align: 'center',
-      formatter: ({ cellValue }) => dateFormatter(cellValue),
+      formatter: 'formatDateTime',
     },
   );
   return columns;
diff --git a/apps/web-ele/src/views/mall/promotion/point/activity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/point/activity/modules/form.vue
index b2fb8b9ef..bf21ae078 100644
--- a/apps/web-ele/src/views/mall/promotion/point/activity/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/point/activity/modules/form.vue
@@ -4,7 +4,7 @@ import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 import type {
   RuleConfig,
   SpuProperty,
-} from '#/views/mall/product/spu/components/type';
+} from '#/views/mall/product/spu/components';
 
 import { computed, ref } from 'vue';
 
@@ -23,11 +23,10 @@ import {
 } from '#/api/mall/promotion/point';
 import { $t } from '#/locales';
 import {
+  getPropertyList,
   SpuAndSkuList,
   SpuSkuSelect,
 } from '#/views/mall/product/spu/components';
-// TODO @puhui999：getPropertyList 在 antd 和 el 导入的路径不同；是不是要统一下哈；
-import { getPropertyList } from '#/views/mall/product/spu/components/property-util';
 
 import { useFormSchema } from '../data';
 
@@ -100,7 +99,6 @@ async function getSpuDetails(
     return;
   }
 
-  // TODO @puhui999：这里的 spuList，是不是直接放到 145 行就 ok 啦；（尾部）；
   spuList.value = [];
 
   // 筛选指定的 SKU
@@ -134,7 +132,6 @@ async function getSpuDetails(
   });
   res.skus = selectSkus;
 
-  // TODO @puhui999：这里的逻辑，是不是放到 147 行（尾部）；
   const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
     {
       spuId: res.id!,
diff --git a/apps/web-ele/src/views/mall/promotion/point/components/showcase.vue b/apps/web-ele/src/views/mall/promotion/point/components/showcase.vue
index 5aedbba54..597395ea3 100644
--- a/apps/web-ele/src/views/mall/promotion/point/components/showcase.vue
+++ b/apps/web-ele/src/views/mall/promotion/point/components/showcase.vue
@@ -1,5 +1,4 @@
 <!-- 积分商城活动橱窗组件：用于展示和选择积分商城活动 -->
-<!-- TODO @puhui999：antd 多了一个，看着 ele 要迁移下？ --->
 <script lang="ts" setup>
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 
@@ -11,7 +10,7 @@ import { ElImage, ElTooltip } from 'element-plus';
 
 import { getPointActivityListByIds } from '#/api/mall/promotion/point';
 
-import PointTableSelect from './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); // 是否为多选模式
 
 /** 计算是否可以添加 */
@@ -109,21 +108,21 @@ function emitActivityChange() {
     <div
       v-for="(activity, index) in pointActivityList"
       :key="activity.id"
-      class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
+      class="relative h-[60px] w-[60px] overflow-hidden rounded-lg border border-dashed border-gray-300"
     >
       <ElTooltip :content="activity.spuName">
         <div class="relative h-full w-full">
           <ElImage
+            :preview-src-list="[activity.picUrl!]"
             :src="activity.picUrl"
             class="h-full w-full rounded-lg object-cover"
-            :preview-src-list="[activity.picUrl!]"
             fit="cover"
           />
           <!-- 删除按钮 -->
           <IconifyIcon
             v-if="!disabled"
-            icon="ep:circle-close-filled"
-            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"
+            icon="lucide:x"
+            class="absolute -right-2 -top-2 z-10 h-5 w-5 cursor-pointer text-red-500 hover:text-red-600"
             @click="handleRemoveActivity(index)"
           />
         </div>
@@ -133,16 +132,16 @@ function emitActivityChange() {
     <!-- 添加活动按钮 -->
     <ElTooltip v-if="canAdd" content="选择活动">
       <div
-        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"
+        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
         @click="handleOpenActivitySelect"
       >
-        <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
+        <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
       </div>
     </ElTooltip>
   </div>
 
   <!-- 活动选择对话框 -->
-  <PointTableSelect
+  <TableSelect
     ref="pointTableSelectRef"
     :multiple="isMultiple"
     @change="handleActivitySelected"
diff --git a/apps/web-ele/src/views/mall/promotion/point/components/table-select.vue b/apps/web-ele/src/views/mall/promotion/point/components/table-select.vue
index 6182b82e5..d4c1a2a27 100644
--- a/apps/web-ele/src/views/mall/promotion/point/components/table-select.vue
+++ b/apps/web-ele/src/views/mall/promotion/point/components/table-select.vue
@@ -1,5 +1,4 @@
 <!-- 积分商城活动选择弹窗组件 -->
-<!-- TODO @puhui999：antd 多了一个，看着 ele 要迁移下？ --->
 <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;

From c1b1343794cb3437d06603f849c40f4283962743 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 11:11:00 +0800
Subject: [PATCH 14/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91rewardActivity=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=20antd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/rewardActivity/index.vue     | 13 +++++++------
 .../promotion/rewardActivity/modules/form.vue   | 17 +----------------
 .../modules/reward-rule-coupon-select.vue       |  2 +-
 .../rewardActivity/modules/reward-rule.vue      |  9 ++++-----
 4 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue b/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
index 084f538b0..1b5d52a8e 100644
--- a/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
@@ -54,6 +54,7 @@ async function handleClose(row: MallRewardActivityApi.RewardActivity) {
   }
 }
 
+/** 删除满减送活动 */
 async function handleDelete(row: MallRewardActivityApi.RewardActivity) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.name]),
@@ -120,16 +121,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               label: $t('common.edit'),
-              type: 'link',
+              type: 'primary',
+              link: true,
               icon: ACTION_ICON.EDIT,
               auth: ['promotion:reward-activity:update'],
               onClick: handleEdit.bind(null, row),
             },
-            // TODO @puhui999：下面两个按钮，type、danger 属性无效，应该是 el 不是这个哈。
             {
               label: '关闭',
-              type: 'link',
-              danger: true,
+              type: 'danger',
+              link: true,
               icon: ACTION_ICON.CLOSE,
               auth: ['promotion:reward-activity:close'],
               ifShow: row.status === CommonStatusEnum.ENABLE,
@@ -140,8 +141,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
             },
             {
               label: $t('common.delete'),
-              type: 'link',
-              danger: true,
+              type: 'danger',
+              link: true,
               icon: ACTION_ICON.DELETE,
               auth: ['promotion:reward-activity:delete'],
               popConfirm: {
diff --git a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue
index f3cdb9ee8..4db34f085 100644
--- a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue
@@ -72,22 +72,7 @@ const [Modal, modalApi] = useVbenModal({
           item.limit = convertToInteger(item.limit || 0);
         }
       });
-      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));
diff --git a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
index 94a7a9781..ae400c2a8 100644
--- a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
@@ -130,7 +130,7 @@ onMounted(async () => {
           <span class="text-gray-500">送</span>
           <ElInputNumber
             v-model="item.giveCount"
-            class="!w-20"
+            class="!w-32"
             :min="0"
             :step="1"
           />
diff --git a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
index 294a648c3..b039d0719 100644
--- a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
@@ -58,8 +58,7 @@ function handleDelete(ruleIndex: number) {
 </script>
 
 <template>
-  <!-- TODO @puhui999：这里报错了；idea -->
-  <ElRow :gutter="[16, 16]">
+  <ElRow :gutter="16">
     <template v-if="formData.rules">
       <ElCol v-for="(rule, index) in formData.rules" :key="index" :span="24">
         <ElCard size="small" class="rounded-lg">
@@ -174,9 +173,9 @@ function handleDelete(ruleIndex: number) {
     </template>
 
     <!-- 添加规则按钮 -->
-    <Col :span="24" class="mt-2">
-      <Button type="primary" @click="handleAdd">+ 添加优惠规则</Button>
-    </Col>
+    <ElCol :span="24" class="mt-2">
+      <ElButton type="primary" @click="handleAdd">+ 添加优惠规则</ElButton>
+    </ElCol>
 
     <!-- 提示信息 -->
     <ElCol :span="24" class="mt-2">

From 535c82c844aa38f5a7d80566da9125e6152bfff1 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 11:20:34 +0800
Subject: [PATCH 15/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91seckill=20=E4=BB=A3=E7=A0=81=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=20antd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/seckill/activity/data.ts   |  16 +-
 .../mall/promotion/seckill/activity/index.vue |  28 +-
 .../seckill/activity/modules/form.vue         | 369 ++++++++++--------
 3 files changed, 223 insertions(+), 190 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/seckill/activity/data.ts b/apps/web-ele/src/views/mall/promotion/seckill/activity/data.ts
index a572eb4cb..b9e3a1d5d 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/activity/data.ts
+++ b/apps/web-ele/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',
+        type: 'datetime',
+        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',
+        type: 'datetime',
+        format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'x',
         class: 'w-full',
       },
@@ -85,7 +85,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择秒杀时段',
-        mode: 'multiple',
+        multiple: true,
         api: getSimpleSeckillConfigList,
         labelField: 'name',
         valueField: 'id',
@@ -137,6 +137,12 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       formItemClass: 'col-span-2',
     },
+    {
+      fieldName: 'spuId',
+      label: '秒杀商品',
+      component: 'Input',
+      formItemClass: 'col-span-2',
+    },
   ];
 }
 
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue b/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue
index d2c387912..8ac8f397d 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue
@@ -4,8 +4,7 @@ import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckil
 
 import { onMounted } from 'vue';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
 import { ElLoading, ElMessage, ElTag } from 'element-plus';
 
@@ -16,6 +15,7 @@ import {
   getSeckillActivityPage,
 } from '#/api/mall/promotion/seckill/seckillActivity';
 import { getSimpleSeckillConfigList } from '#/api/mall/promotion/seckill/seckillConfig';
+import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import { formatConfigNames, formatTimeRange, setConfigList } from './formatter';
@@ -45,10 +45,16 @@ function handleCreate() {
 
 /** 关闭活动 */
 async function handleClose(row: MallSeckillActivityApi.SeckillActivity) {
-  await confirm('确认关闭该秒杀活动吗？');
-  await closeSeckillActivity(row.id as number);
-  ElMessage.success('关闭成功');
-  handleRefresh();
+  const loadingInstance = ElLoading.service({
+    text: '活动关闭中...',
+  });
+  try {
+    await closeSeckillActivity(row.id as number);
+    ElMessage.success('关闭成功');
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 删除活动 */
@@ -84,10 +90,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
         },
       },
     },
-    // TODO @puhui999：antd 没有，是不是要统一哈。
-    cellConfig: {
-      height: 250,
-    },
     rowConfig: {
       keyField: 'id',
       isHover: true,
@@ -165,8 +167,10 @@ onMounted(async () => {
               link: true,
               auth: ['promotion:seckill-activity:close'],
               ifShow: row.status === 0,
-              // TODO @puhui999：antd 这里是 popConfirm，看看要不要统一
-              onClick: handleClose.bind(null, row),
+              popConfirm: {
+                title: '确认关闭该秒杀活动吗？',
+                confirm: handleClose.bind(null, row),
+              },
             },
             {
               label: $t('common.delete'),
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/activity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/seckill/activity/modules/form.vue
index 1ca3ec4a0..6575f396a 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/activity/modules/form.vue
+++ b/apps/web-ele/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, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import { ElButton, ElInputNumber, ElMessage } from 'element-plus';
 
 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) {
-      ElMessage.error('请选择秒杀商品');
-      return;
-    }
-    if (skuTableData.value.length === 0) {
-      ElMessage.error('请至少配置一个 SKU');
-      return;
-    }
-    // 验证 SKU 配置
-    const hasInvalidSku = skuTableData.value.some(
-      (sku) => sku.stock < 1 || sku.seckillPrice < 0.01,
-    );
-    if (hasInvalidSku) {
-      ElMessage.error('请正确配置 SKU 的秒杀库存（≥1）和秒杀价格（≥0.01）');
-      return;
-    }
-
-    // 提交表单
     modalApi.lock();
     try {
+      // 获取秒杀商品配置（深拷贝避免直接修改原对象）
+      const products: MallSeckillActivityApi.SeckillProduct[] = cloneDeep(
+        spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
+      );
+      if (products.length === 0) {
+        ElMessage.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);
-      // TODO @puhui999：这里需要 nextTick 么？因为 antd 有
+      // 对齐活动商品处理结构
+      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,81 +219,63 @@ 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">
+            <ElButton
+              v-if="!formData?.id"
+              type="primary"
+              @click="openSpuSelect"
+            >
+              选择商品
+            </ElButton>
 
-      <!-- 商品选择区域 -->
-      <div class="mt-4">
-        <div class="mb-2 flex items-center">
-          <span class="text-sm font-medium">秒杀活动商品:</span>
-          <!-- TODO @puhui999：使用 ElButton 这种哈 -->
-          <el-button class="ml-2" type="primary" @click="handleSelectProduct">
-            选择商品
-          </el-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 }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.stock"
+                      :max="sku.stock"
+                      :min="0"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="秒杀价格(元)">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="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>

From 568d5aa4cfb3b9943036aa0b1f297111120dd2d8 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 11:35:01 +0800
Subject: [PATCH 16/16] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91=E4=BF=AE=E5=A4=8D=E6=BB=A1=E5=87=8F?=
 =?UTF-8?q?=E9=80=81=E7=BC=96=E8=BE=91=E6=97=B6=E8=A1=A8=E5=8D=95=E6=89=93?=
 =?UTF-8?q?=E5=BC=80=E5=BC=82=E5=B8=B8=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C?=
 =?UTF-8?q?=E5=8E=9F=E5=9B=A0=EF=BC=9Aantd=20RangePicker=20=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=20dayjs=20=E5=AF=B9=E8=B1=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/mall/promotion/coupon/components/select.vue  | 4 +++-
 .../views/mall/promotion/rewardActivity/modules/form.vue   | 7 ++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue b/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
index e1420315a..94d79a0bb 100644
--- 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();
 }
 
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
index e171559b8..fda9fc9f9 100644
--- 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 {
@@ -98,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) {