!244 mall 商城vue3组件迁移

Merge pull request !244 from puhui999/dev-mall

apps/web-antd/src/views/mall/product/spu/components/index.ts

@@ -0,0 +1,3 @@
+export { default as SkuTableSelect } from './sku-table-select.vue';
+export { default as SpuShowcase } from './spu-showcase.vue';
+export { default as SpuTableSelect } from './spu-table-select.vue';

apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue

@@ -8,7 +8,7 @@ import { computed, ref } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { fenToYuan } from '@vben/utils';
 
-import { Input, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
@@ -21,18 +21,13 @@ const emit = defineEmits<{
   change: [sku: MallSpuApi.Sku];
 }>();
 
-const selectedSkuId = ref<number>();
 const spuId = ref<number>();
 
-/** 配置列 */
+/** 表格列配置 */
-// TODO @puhui999：貌似列太宽了？
 const gridColumns = computed<VxeGridProps['columns']>(() => [
   {
-    field: 'id',
+    type: 'radio',
-    title: '#',
+    width: 55,
-    width: 60,
-    align: 'center',
-    slots: { default: 'radio-column' },
   },
   {
     field: 'picUrl',
@@ -72,6 +67,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
     height: 400,
     border: true,
     showOverflow: true,
+    radioConfig: {
+      reserve: true,
+    },
     proxyConfig: {
       ajax: {
         query: async () => {
@@ -93,46 +91,42 @@ const [Grid, gridApi] = useVbenVxeGrid({
       },
     },
   },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
 });
 
 /** 处理选中 */
-function handleSelected(row: MallSpuApi.Sku) {
+function handleRadioChange() {
-  emit('change', row);
+  const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
-  modalApi.close();
+  if (selectedRow) {
-  selectedSkuId.value = undefined;
+    emit('change', selectedRow);
+    modalApi.close();
+  }
 }
 
 const [Modal, modalApi] = useVbenModal({
   destroyOnClose: true,
   onOpenChange: async (isOpen: boolean) => {
     if (!isOpen) {
-      selectedSkuId.value = undefined;
+      gridApi.grid.clearRadioRow();
       spuId.value = undefined;
       return;
     }
+
     const data = modalApi.getData<SpuData>();
-    // TODO @puhui999：这里要不 if return，让括号的层级简单点。
+    if (!data?.spuId) {
-    if (data?.spuId) {
+      return;
-      spuId.value = data.spuId;
-      // 触发数据查询
-      await gridApi.query();
     }
+
+    spuId.value = data.spuId;
+    await gridApi.query();
   },
 });
 </script>
 
 <template>
   <Modal class="w-[700px]" title="选择规格">
-    <Grid>
+    <Grid />
-      <template #radio-column="{ row }">
-        <Input
-          v-model="selectedSkuId"
-          :value="row.id"
-          class="cursor-pointer"
-          type="radio"
-          @change="handleSelected(row)"
-        />
-      </template>
-    </Grid>
   </Modal>
 </template>

apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue

@@ -0,0 +1,154 @@
+<!-- 商品橱窗组件：用于展示和选择商品 SPU -->
+<script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, ref, watch } from 'vue';
+
+import { CloseCircleFilled, PlusOutlined } from '@vben/icons';
+
+import { Image, Tooltip } from 'ant-design-vue';
+
+import { getSpuDetailList } from '#/api/mall/product/spu';
+
+import SpuTableSelect from './spu-table-select.vue';
+
+interface SpuShowcaseProps {
+  modelValue?: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<SpuShowcaseProps>(), {
+  modelValue: undefined,
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const productSpus = ref<MallSpuApi.Spu[]>([]);
+const spuTableSelectRef = ref<InstanceType<typeof SpuTableSelect>>();
+
+/** 计算是否可以添加 */
+const canAdd = computed(() => {
+  if (props.disabled) return false;
+  if (!props.limit) return true;
+  return productSpus.value.length < props.limit;
+});
+
+/** 是否为多选模式 */
+const isMultiple = computed(() => props.limit !== 1);
+
+/** 监听 modelValue 变化，加载商品详情 */
+watch(
+  () => props.modelValue,
+  async (newValue) => {
+    // eslint-disable-next-line unicorn/no-nested-ternary
+    const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
+
+    if (ids.length === 0) {
+      productSpus.value = [];
+      return;
+    }
+
+    // 只有商品发生变化时才重新查询
+    if (
+      productSpus.value.length === 0 ||
+      productSpus.value.some((spu) => !ids.includes(spu.id!))
+    ) {
+      productSpus.value = await getSpuDetailList(ids);
+    }
+  },
+  { immediate: true },
+);
+
+/** 打开商品选择对话框 */
+function handleOpenSpuSelect() {
+  spuTableSelectRef.value?.open(productSpus.value);
+}
+
+/** 选择商品后触发 */
+function handleSpuSelected(spus: MallSpuApi.Spu | MallSpuApi.Spu[]) {
+  productSpus.value = Array.isArray(spus) ? spus : [spus];
+  emitSpuChange();
+}
+
+/** 删除商品 */
+function handleRemoveSpu(index: number) {
+  productSpus.value.splice(index, 1);
+  emitSpuChange();
+}
+
+/** 触发变更事件 */
+function emitSpuChange() {
+  if (props.limit === 1) {
+    const spu = productSpus.value.length > 0 ? productSpus.value[0] : null;
+    emit('update:modelValue', spu?.id || 0);
+    emit('change', spu);
+  } else {
+    emit(
+      'update:modelValue',
+      productSpus.value.map((spu) => spu.id!),
+    );
+    emit('change', productSpus.value);
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- 已选商品列表 -->
+    <div
+      v-for="(spu, index) in productSpus"
+      :key="spu.id"
+      class="spu-item group relative"
+    >
+      <Tooltip :title="spu.name">
+        <div class="relative h-full w-full">
+          <Image
+            :src="spu.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+            :preview="false"
+          />
+          <!-- 删除按钮 -->
+          <CloseCircleFilled
+            v-if="!disabled"
+            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)"
+          />
+        </div>
+      </Tooltip>
+    </div>
+
+    <!-- 添加商品按钮 -->
+    <Tooltip v-if="canAdd" title="选择商品">
+      <div
+        class="spu-add-box hover:border-primary hover:bg-primary/5 flex cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
+        @click="handleOpenSpuSelect"
+      >
+        <PlusOutlined class="text-xl text-gray-400" />
+      </div>
+    </Tooltip>
+  </div>
+
+  <!-- 商品选择对话框 -->
+  <SpuTableSelect
+    ref="spuTableSelectRef"
+    :multiple="isMultiple"
+    @change="handleSpuSelected"
+  />
+</template>
+
+<style scoped>
+.spu-item {
+  width: 60px;
+  height: 60px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.spu-add-box {
+  width: 60px;
+  height: 60px;
+}
+</style>

apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue

@@ -0,0 +1,232 @@
+<!-- SPU 商品选择弹窗组件 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getSpuPage } from '#/api/mall/product/spu';
+import { getRangePickerDefaultProps } from '#/utils';
+
+interface SpuTableSelectProps {
+  multiple?: boolean;
+}
+
+const props = withDefaults(defineProps<SpuTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
+}>();
+
+const categoryList = ref<any[]>([]);
+const categoryTreeList = ref<any[]>([]);
+
+/** 搜索表单 Schema */
+const formSchema = computed<VbenFormSchema[]>(() => [
+  {
+    fieldName: 'name',
+    label: '商品名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入商品名称',
+      allowClear: true,
+    },
+  },
+  {
+    fieldName: 'categoryId',
+    label: '商品分类',
+    component: 'TreeSelect',
+    componentProps: {
+      treeData: categoryTreeList.value,
+      fieldNames: {
+        label: 'name',
+        value: 'id',
+      },
+      treeCheckStrictly: true,
+      placeholder: '请选择商品分类',
+      allowClear: true,
+      showSearch: true,
+      treeNodeFilterProp: 'name',
+    },
+  },
+  {
+    fieldName: 'createTime',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      ...getRangePickerDefaultProps(),
+      allowClear: true,
+    },
+  },
+]);
+
+/** 表格列配置 */
+const gridColumns = computed<VxeGridProps['columns']>(() => {
+  const columns: VxeGridProps['columns'] = [];
+
+  if (props.multiple) {
+    columns.push({ type: 'checkbox', width: 55 });
+  } else {
+    columns.push({ type: 'radio', width: 55 });
+  }
+
+  columns.push(
+    {
+      field: 'id',
+      title: '商品编号',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'picUrl',
+      title: '商品图',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'name',
+      title: '商品名称',
+      minWidth: 200,
+    },
+    {
+      field: 'categoryId',
+      title: '商品分类',
+      minWidth: 120,
+      formatter: ({ cellValue }) => {
+        const category = categoryList.value?.find((c) => c.id === cellValue);
+        return category?.name || '-';
+      },
+    },
+  );
+
+  return columns;
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+    layout: 'horizontal',
+    collapsed: false,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 500,
+    border: true,
+    showOverflow: true,
+    checkboxConfig: props.multiple
+      ? {
+          reserve: true,
+        }
+      : undefined,
+    radioConfig: !props.multiple
+      ? {
+          reserve: true,
+        }
+      : undefined,
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          const data = await getSpuPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            tabType: 0,
+            name: formValues.name || undefined,
+            categoryId: formValues.categoryId || undefined,
+            createTime: formValues.createTime || undefined,
+          });
+
+          return {
+            items: data.list || [],
+            total: data.total || 0,
+          };
+        },
+      },
+    },
+  },
+  gridEvents: props.multiple
+    ? {
+        checkboxChange: handleCheckboxChange,
+        checkboxAll: handleCheckboxChange,
+      }
+    : {
+        radioChange: handleRadioChange,
+      },
+});
+
+/** 多选：处理选中变化 */
+function handleCheckboxChange() {
+  // vxe-table 自动管理选中状态，无需手动处理
+}
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Spu;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  onConfirm: props.multiple
+    ? () => {
+        const selectedRows = gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
+        emit('change', selectedRows);
+        modalApi.close();
+      }
+    : undefined,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      gridApi.grid.clearCheckboxRow();
+      gridApi.grid.clearRadioRow();
+      return;
+    }
+
+    const data = modalApi.getData<MallSpuApi.Spu | MallSpuApi.Spu[]>();
+
+    if (props.multiple && Array.isArray(data)) {
+      // 等待数据加载完成后再设置选中状态
+      setTimeout(() => {
+        data.forEach((spu) => {
+          gridApi.grid.setCheckboxRow(spu, true);
+        });
+      }, 100);
+    } else if (!props.multiple && data && !Array.isArray(data)) {
+      setTimeout(() => {
+        gridApi.grid.setRadioRow(data);
+      }, 100);
+    }
+  },
+});
+
+/** 初始化分类数据 */
+onMounted(async () => {
+  categoryList.value = await getCategoryList({});
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (data?: MallSpuApi.Spu | MallSpuApi.Spu[]) => {
+    modalApi.setData(data).open();
+  },
+});
+</script>
+
+<template>
+  <Modal :class="props.multiple ? 'w-[900px]' : 'w-[800px]'" title="选择商品">
+    <Grid />
+  </Modal>
+</template>

apps/web-antd/src/views/mall/product/spu/form/modules/sku-list.vue

@@ -7,7 +7,12 @@ import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { ref, watch } from 'vue';
 
-import { copyValueToTarget, formatToFraction, isEmpty } from '@vben/utils';
+import {
+  copyValueToTarget,
+  formatToFraction,
+  getNestedValue,
+  isEmpty,
+} from '@vben/utils';
 
 import { Button, Image, Input, InputNumber, message } from 'ant-design-vue';
 
@@ -43,9 +48,12 @@ const emit = defineEmits<{
 
 const { isBatch, isDetail, isComponent, isActivityComponent } = props;
 
-const formData: Ref<MallSpuApi.Spu | undefined> = ref<MallSpuApi.Spu>(); // 表单数据
+const formData: Ref<MallSpuApi.Spu | undefined> = ref<MallSpuApi.Spu>();
-const skuList = ref<MallSpuApi.Sku[]>([
+const tableHeaders = ref<{ label: string; prop: string }[]>([]);
-  {
+
+/** 创建空 SKU 数据 */
+function createEmptySku(): MallSpuApi.Sku {
+  return {
     price: 0,
     marketPrice: 0,
     costPrice: 0,
@@ -56,8 +64,10 @@ const skuList = ref<MallSpuApi.Sku[]>([
     volume: 0,
     firstBrokeragePrice: 0,
     secondBrokeragePrice: 0,
-  },
+  };
-]); // 批量添加时的临时数据
+}
+
+const skuList = ref<MallSpuApi.Sku[]>([createEmptySku()]);
 
 /** 批量添加 */
 function batchAdd() {
@@ -79,34 +89,33 @@ function validateProperty() {
   }
 }
 
-/** 删除 sku */
+/** 删除 SKU */
 function deleteSku(row: MallSpuApi.Sku) {
   const index = formData.value!.skus!.findIndex(
-    // 直接把列表转成字符串比较
     (sku: MallSpuApi.Sku) =>
       JSON.stringify(sku.properties) === JSON.stringify(row.properties),
   );
-  formData.value!.skus!.splice(index, 1);
+  if (index !== -1) {
+    formData.value!.skus!.splice(index, 1);
+  }
 }
 
-const tableHeaders = ref<{ label: string; prop: string }[]>([]); // 多属性表头
+/** 校验 SKU 数据：保存时，每个商品规格的表单要校验。例如：销售金额最低是 0.01 */
-
-/** 保存时，每个商品规格的表单要校验下。例如说,销售金额最低是 0.01 这种 */
 function validateSku() {
   validateProperty();
   let warningInfo = '请检查商品各行相关属性配置，';
-  let validate = true; // 默认通过
+  let validate = true;
+
   for (const sku of formData.value!.skus!) {
-    // 作为活动组件的校验
     for (const rule of props?.ruleConfig as RuleConfig[]) {
-      const arg = getValue(sku, rule.name);
+      const value = getNestedValue(sku, rule.name);
-      if (!rule.rule(arg)) {
+      if (!rule.rule(value)) {
-        validate = false; // 只要有一个不通过则直接不通过
+        validate = false;
         warningInfo += rule.message;
         break;
       }
     }
-    // 只要有一个不通过则结束后续的校验
+
     if (!validate) {
       message.warning(warningInfo);
       throw new Error(warningInfo);
@@ -114,21 +123,6 @@ function validateSku() {
   }
 }
 
-// TODO @puhui999：是不是可以通过 getNestedValue  简化？
-function getValue(obj: any, arg: string): unknown {
-  const keys = arg.split('.');
-  let value: any = obj;
-  for (const key of keys) {
-    if (value && typeof value === 'object' && key in value) {
-      value = value[key];
-    } else {
-      value = undefined;
-      break;
-    }
-  }
-  return value;
-}
-
 /**
  * 选择时触发
  *
@@ -155,7 +149,6 @@ watch(
 
 /** 生成表数据 */
 function generateTableData(propertyList: PropertyAndValues[]) {
-  // 构建数据结构
   const propertyValues = propertyList.map((item: PropertyAndValues) =>
     (item.values || []).map((v: { id: number; name: string }) => ({
       propertyId: item.id,
@@ -164,35 +157,30 @@ function generateTableData(propertyList: PropertyAndValues[]) {
       valueName: v.name,
     })),
   );
+
   const buildSkuList = build(propertyValues);
+
   // 如果回显的 sku 属性和添加的属性不一致则重置 skus 列表
   if (!validateData(propertyList)) {
-    // 如果不一致则重置表数据，默认添加新的属性重新生成 sku 列表
     formData.value!.skus = [];
   }
+
   for (const item of buildSkuList) {
+    const properties = Array.isArray(item) ? item : [item];
     const row = {
-      properties: Array.isArray(item) ? item : [item], // 如果只有一个属性的话返回的是一个 property 对象
+      ...createEmptySku(),
-      price: 0,
+      properties,
-      marketPrice: 0,
-      costPrice: 0,
-      barCode: '',
-      picUrl: '',
-      stock: 0,
-      weight: 0,
-      volume: 0,
-      firstBrokeragePrice: 0,
-      secondBrokeragePrice: 0,
     };
+
     // 如果存在属性相同的 sku 则不做处理
-    const index = formData.value!.skus!.findIndex(
+    const exists = formData.value!.skus!.some(
       (sku: MallSpuApi.Sku) =>
         JSON.stringify(sku.properties) === JSON.stringify(row.properties),
     );
-    if (index !== -1) {
+
-      continue;
+    if (!exists) {
+      formData.value!.skus!.push(row);
     }
-    formData.value!.skus!.push(row);
   }
 }
 
@@ -248,43 +236,33 @@ watch(
     if (!formData.value!.specType) {
       return;
     }
+
     // 如果当前组件作为批量添加数据使用，则重置表数据
     if (props.isBatch) {
-      skuList.value = [
+      skuList.value = [createEmptySku()];
-        {
-          price: 0,
-          marketPrice: 0,
-          costPrice: 0,
-          barCode: '',
-          picUrl: '',
-          stock: 0,
-          weight: 0,
-          volume: 0,
-          firstBrokeragePrice: 0,
-          secondBrokeragePrice: 0,
-        },
-      ];
     }
 
     // 判断代理对象是否为空
     if (JSON.stringify(propertyList) === '[]') {
       return;
     }
-    // 重置表头
+
-    tableHeaders.value = [];
+    // 重置并生成表头
-    // 生成表头
+    tableHeaders.value = propertyList.map((item, index) => ({
-    propertyList.forEach((item, index) => {
+      prop: `name${index}`,
-      // name加属性项index区分属性值
+      label: item.name,
-      tableHeaders.value.push({ prop: `name${index}`, label: item.name });
+    }));
-    });
+
     // 如果回显的 sku 属性和添加的属性一致则不处理
     if (validateData(propertyList)) {
       return;
     }
+
     // 添加新属性没有属性值也不做处理
     if (propertyList.some((item) => !item.values || isEmpty(item.values))) {
       return;
     }
+
     // 生成 table 数据，即 sku 列表
     generateTableData(propertyList);
   },
@@ -296,17 +274,23 @@ watch(
 
 const activitySkuListRef = ref();
 
+/** 获取 SKU 表格引用 */
 function getSkuTableRef() {
   return activitySkuListRef.value;
 }
 
-defineExpose({ generateTableData, validateSku, getSkuTableRef });
+defineExpose({
+  generateTableData,
+  validateSku,
+  getSkuTableRef,
+});
 </script>
 
 <template>
   <div>
     <!-- 情况一：添加/修改 -->
     <!-- TODO @puhui999：有可以通过 grid 来做么？主要考虑，这样不直接使用 vxe 标签，抽象程度更高； -->
+    <!-- TODO 还是先这样吧 🤣🤣   -->
     <VxeTable
       v-if="!isDetail && !isActivityComponent"
       :data="isBatch ? skuList : formData?.skus || []"

apps/web-antd/src/views/mall/product/spu/form/modules/spu-table-select.vue

@@ -1,346 +0,0 @@
-<!-- SPU 商品选择弹窗组件 -->
-<script lang="ts" setup>
-// TODO @puhui999：这个是不是可以放到 components 里？，和商品发布，关系不大
-import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
-
-import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
-import { computed, onMounted, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { handleTree } from '@vben/utils';
-
-import { Checkbox, Radio } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getCategoryList } from '#/api/mall/product/category';
-import { getSpuPage } from '#/api/mall/product/spu';
-import { getRangePickerDefaultProps } from '#/utils';
-
-interface SpuTableSelectProps {
-  multiple?: boolean; // 是否多选模式
-}
-
-const props = withDefaults(defineProps<SpuTableSelectProps>(), {
-  multiple: false,
-});
-
-const emit = defineEmits<{
-  change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
-}>();
-
-const selectedSpuId = ref<number>(); // 单选：选中的 SPU ID
-const checkedStatus = ref<Record<number, boolean>>({}); // 多选：选中状态 map
-const checkedSpus = ref<MallSpuApi.Spu[]>([]); // 多选：选中的 SPU 列表
-const isCheckAll = ref(false); // 多选：全选状态
-const isIndeterminate = ref(false); // 多选：半选状态
-
-const categoryList = ref<any[]>([]); // 分类列表（扁平）
-const categoryTreeList = ref<any[]>([]); // 分类树
-
-const formSchema = computed<VbenFormSchema[]>(() => {
-  return [
-    {
-      fieldName: 'name',
-      label: '商品名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入商品名称',
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'categoryId',
-      label: '商品分类',
-      component: 'TreeSelect',
-      componentProps: {
-        treeData: categoryTreeList.value,
-        fieldNames: {
-          label: 'name',
-          value: 'id',
-        },
-        treeCheckStrictly: true,
-        placeholder: '请选择商品分类',
-        allowClear: true,
-        showSearch: true,
-        treeNodeFilterProp: 'name',
-      },
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
-        allowClear: true,
-      },
-    },
-  ];
-});
-
-const gridColumns = computed<VxeGridProps['columns']>(() => {
-  const columns: VxeGridProps['columns'] = [];
-
-  // 多选模式：添加多选列
-  if (props.multiple) {
-    columns.push({
-      field: 'checkbox',
-      title: '',
-      width: 55,
-      align: 'center',
-      slots: { default: 'checkbox-column', header: 'checkbox-header' },
-    });
-  } else {
-    // 单选模式：添加单选列
-    columns.push({
-      field: 'radio',
-      title: '#',
-      width: 55,
-      align: 'center',
-      slots: { default: 'radio-column' },
-    });
-  }
-
-  // 其它列
-  columns.push(
-    {
-      field: 'id',
-      title: '商品编号',
-      minWidth: 100,
-      align: 'center',
-    },
-    {
-      field: 'picUrl',
-      title: '商品图',
-      width: 100,
-      align: 'center',
-      cellRender: {
-        name: 'CellImage',
-      },
-    },
-    {
-      field: 'name',
-      title: '商品名称',
-      minWidth: 200,
-    },
-    {
-      field: 'categoryId',
-      title: '商品分类',
-      minWidth: 120,
-      formatter: ({ cellValue }) => {
-        const category = categoryList.value?.find((c) => c.id === cellValue);
-        return category?.name || '-';
-      },
-    },
-  );
-
-  return columns;
-});
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: formSchema.value,
-    layout: 'horizontal',
-    collapsed: false,
-  },
-  gridOptions: {
-    columns: gridColumns.value,
-    height: 500,
-    border: true,
-    showOverflow: true,
-    proxyConfig: {
-      ajax: {
-        async query({ page }: any, formValues: any) {
-          // TODO @puhui999：这里是不是不 try catch？
-          try {
-            const params = {
-              pageNo: page.currentPage,
-              pageSize: page.pageSize,
-              tabType: 0, // 默认获取上架的商品
-              name: formValues.name || undefined,
-              categoryId: formValues.categoryId || undefined,
-              createTime: formValues.createTime || undefined,
-            };
-
-            // TODO @puhui999：一次性的，是不是不声明 params，直接放到 getSpuPage 里？
-            const data = await getSpuPage(params);
-
-            // 初始化多选状态
-            if (props.multiple && data.list) {
-              data.list.forEach((spu) => {
-                if (checkedStatus.value[spu.id!] === undefined) {
-                  checkedStatus.value[spu.id!] = false;
-                }
-              });
-              calculateIsCheckAll();
-            }
-
-            return {
-              items: data.list || [],
-              total: data.total || 0,
-            };
-          } catch (error) {
-            console.error('加载商品数据失败:', error);
-            return { items: [], total: 0 };
-          }
-        },
-      },
-    },
-  },
-});
-
-// TODO @puhui999：如下的选中方法，可以因为 Grid 做简化么？
-/** 单选：处理选中 */
-function handleSingleSelected(row: MallSpuApi.Spu) {
-  selectedSpuId.value = row.id;
-  emit('change', row);
-  modalApi.close();
-}
-
-/** 多选：全选/全不选 */
-function handleCheckAll(e: CheckboxChangeEvent) {
-  const checked = e.target.checked;
-  isCheckAll.value = checked;
-  isIndeterminate.value = false;
-
-  const currentList = gridApi.grid.getData();
-  currentList.forEach((spu: MallSpuApi.Spu) => {
-    handleCheckOne(checked, spu, false);
-  });
-  calculateIsCheckAll();
-}
-
-/** 多选：选中单个 */
-function handleCheckOne(
-  checked: boolean,
-  spu: MallSpuApi.Spu,
-  needCalc = true,
-) {
-  if (checked) {
-    // 避免重复添加
-    const exists = checkedSpus.value.some((item) => item.id === spu.id);
-    if (!exists) {
-      checkedSpus.value.push(spu);
-    }
-    checkedStatus.value[spu.id!] = true;
-  } else {
-    const index = checkedSpus.value.findIndex((item) => item.id === spu.id);
-    if (index !== -1) {
-      checkedSpus.value.splice(index, 1);
-    }
-    checkedStatus.value[spu.id!] = false;
-    isCheckAll.value = false;
-  }
-
-  if (needCalc) {
-    calculateIsCheckAll();
-  }
-}
-
-/** 多选：计算全选状态 */
-function calculateIsCheckAll() {
-  const currentList = gridApi.grid.getData();
-  if (currentList.length === 0) {
-    isCheckAll.value = false;
-    isIndeterminate.value = false;
-    return;
-  }
-
-  const checkedCount = currentList.filter(
-    (spu: MallSpuApi.Spu) => checkedStatus.value[spu.id!],
-  ).length;
-
-  isCheckAll.value = checkedCount === currentList.length;
-  isIndeterminate.value = checkedCount > 0 && checkedCount < currentList.length;
-}
-
-const [Modal, modalApi] = useVbenModal({
-  destroyOnClose: true,
-  // 多选模式时显示确认按钮
-  onConfirm: props.multiple
-    ? () => {
-        emit('change', [...checkedSpus.value]);
-        modalApi.close();
-      }
-    : undefined,
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      // TODO @puhui999：是不是直接清理，不要判断 selectedSpuId.value
-      if (!props.multiple) {
-        selectedSpuId.value = undefined;
-      }
-      return;
-    }
-
-    // 打开时处理初始数据
-    const data = modalApi.getData<MallSpuApi.Spu | MallSpuApi.Spu[]>();
-
-    // 重置多选状态
-    if (props.multiple) {
-      checkedSpus.value = [];
-      checkedStatus.value = {};
-      isCheckAll.value = false;
-      isIndeterminate.value = false;
-      // 恢复已选中的数据
-      if (Array.isArray(data) && data.length > 0) {
-        checkedSpus.value = [...data];
-        checkedStatus.value = Object.fromEntries(
-          data.map((spu) => [spu.id!, true]),
-        );
-      }
-    } else {
-      // 单选模式：恢复已选中的 ID
-      if (data && !Array.isArray(data)) {
-        selectedSpuId.value = data.id;
-      }
-    }
-
-    // 触发查询
-    // TODO @puhui999：貌似不用这里再查询一次，100% 会查询的，记忆中是；
-    await gridApi.query();
-  },
-});
-
-/** 初始化分类数据 */
-onMounted(async () => {
-  categoryList.value = await getCategoryList({});
-  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
-});
-</script>
-
-<template>
-  <Modal :class="props.multiple ? 'w-[900px]' : 'w-[800px]'" title="选择商品">
-    <Grid>
-      <!-- 单选列 -->
-      <template v-if="!props.multiple" #radio-column="{ row }">
-        <Radio
-          :checked="selectedSpuId === row.id"
-          :value="row.id"
-          class="cursor-pointer"
-          @click="handleSingleSelected(row)"
-        />
-      </template>
-
-      <!-- 多选表头 -->
-      <template v-if="props.multiple" #checkbox-header>
-        <Checkbox
-          v-model:checked="isCheckAll"
-          :indeterminate="isIndeterminate"
-          class="cursor-pointer"
-          @change="handleCheckAll"
-        />
-      </template>
-
-      <!-- 多选列 -->
-      <template v-if="props.multiple" #checkbox-column="{ row }">
-        <Checkbox
-          v-model:checked="checkedStatus[row.id]"
-          class="cursor-pointer"
-          @change="(e) => handleCheckOne(e.target.checked, row)"
-        />
-      </template>
-    </Grid>
-  </Modal>
-</template>

apps/web-antd/src/views/mall/promotion/coupon/components/coupon-select.vue

@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
+import { DictTag } from '#/components/dict-tag';
+
+import { discountFormat } from '../formatter';
+import { useCouponSelectFormSchema, useCouponSelectGridColumns } from './data';
+
+defineOptions({ name: 'CouponSelect' });
+
+const props = defineProps<{
+  takeType?: number; // 领取方式
+}>();
+
+const emit = defineEmits<{
+  change: [value: MallCouponTemplateApi.CouponTemplate[]];
+}>();
+
+const selectedCoupons = ref<MallCouponTemplateApi.CouponTemplate[]>([]);
+
+/** Grid 配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useCouponSelectFormSchema(),
+  },
+  gridOptions: {
+    columns: useCouponSelectGridColumns(),
+    height: '500px',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const params: any = {
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          };
+
+          // 如果有 takeType 参数，添加到查询条件
+          if (props.takeType !== undefined) {
+            params.canTakeTypes = [props.takeType];
+          }
+
+          return await getCouponTemplatePage(params);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 复选框变化处理 */
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: MallCouponTemplateApi.CouponTemplate[];
+}) {
+  selectedCoupons.value = records;
+}
+
+/** Modal 配置 */
+const [Modal, modalApi] = useVbenModal({
+  onConfirm() {
+    emit('change', selectedCoupons.value);
+    modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      selectedCoupons.value = [];
+      return;
+    }
+    gridApi.query();
+  },
+});
+
+/** 打开弹窗 */
+function open() {
+  modalApi.open();
+}
+
+defineExpose({ open });
+</script>
+
+<template>
+  <Modal title="选择优惠券" class="w-2/3">
+    <Grid table-title="优惠券列表">
+      <!-- 优惠列自定义渲染 -->
+      <template #discount="{ row }">
+        <DictTag
+          :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
+          :value="row.discountType"
+        />
+        <span class="ml-1">{{ discountFormat(row) }}</span>
+      </template>
+    </Grid>
+  </Modal>
+</template>

apps/web-antd/src/views/mall/promotion/coupon/components/data.ts

@@ -1,13 +1,42 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
 import {
   discountFormat,
   remainedCountFormat,
+  takeLimitCountFormat,
   usePriceFormat,
   validityTypeFormat,
 } from '../formatter';
 
+/** 优惠券选择弹窗的搜索表单 schema */
+export function useCouponSelectFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '优惠券名称',
+      componentProps: {
+        placeholder: '请输入优惠券名称',
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'discountType',
+      label: '优惠类型',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE, 'number'),
+        placeholder: '请选择优惠类型',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
 /** 搜索表单的 schema */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -23,6 +52,78 @@ export function useFormSchema(): VbenFormSchema[] {
   ];
 }
 
+/** 优惠券选择弹窗的表格列配置 */
+export function useCouponSelectGridColumns(): VxeGridProps['columns'] {
+  return [
+    { type: 'checkbox', width: 55 },
+    {
+      title: '优惠券名称',
+      field: 'name',
+      minWidth: 140,
+    },
+    {
+      title: '类型',
+      field: 'productScope',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_PRODUCT_SCOPE },
+      },
+    },
+    {
+      title: '优惠',
+      field: 'discount',
+      minWidth: 100,
+      slots: { default: 'discount' },
+    },
+    {
+      title: '领取方式',
+      field: 'takeType',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE },
+      },
+    },
+    {
+      title: '使用时间',
+      field: 'validityType',
+      minWidth: 185,
+      align: 'center',
+      formatter: ({ row }) => validityTypeFormat(row),
+    },
+    {
+      title: '发放数量',
+      field: 'totalCount',
+      align: 'center',
+      minWidth: 100,
+    },
+    {
+      title: '剩余数量',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ row }) => remainedCountFormat(row),
+    },
+    {
+      title: '领取上限',
+      field: 'takeLimitCount',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ row }) => takeLimitCountFormat(row),
+    },
+    {
+      title: '状态',
+      field: 'status',
+      align: 'center',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+  ];
+}
+
 /** 表格列配置 */
 export function useGridColumns(): VxeGridProps['columns'] {
   return [

apps/web-antd/src/views/mall/promotion/coupon/components/index.ts

@@ -1,2 +1,3 @@
+export { default as CouponSelect } from './coupon-select.vue';
 export * from './data';
 export { default as CouponSendForm } from './send-form.vue';

apps/web-antd/src/views/mall/promotion/rewardActivity/components/index.ts

@@ -1,2 +0,0 @@
-export { default as RewardRuleCouponSelect } from './reward-rule-coupon-select.vue';
-export { default as RewardRule } from './reward-rule.vue';

apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts

@@ -1,10 +1,15 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE } from '@vben/constants';
+import {
+  DICT_TYPE,
+  PromotionConditionTypeEnum,
+  PromotionProductScopeEnum,
+} from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { $t } from '@vben/locales';
 
+import { z } from '#/adapter/form';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -97,35 +102,40 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
+    // 隐藏 ID 字段
     {
-      component: 'Input',
       fieldName: 'id',
+      component: 'Input',
       dependencies: {
         triggerFields: [''],
         show: () => false,
       },
     },
+    // 活动名称
     {
       fieldName: 'name',
       label: '活动名称',
       component: 'Input',
+      rules: 'required',
       componentProps: {
         placeholder: '请输入活动名称',
+        allowClear: true,
       },
-      rules: 'required',
     },
+    // 活动时间
     {
       fieldName: 'startAndEndTime',
       label: '活动时间',
       component: 'RangePicker',
+      rules: 'required',
       componentProps: {
         showTime: true,
         format: 'YYYY-MM-DD HH:mm:ss',
         placeholder: [$t('common.startTimeText'), $t('common.endTimeText')],
+        allowClear: true,
       },
-      rules: 'required',
     },
-    // TODO @puhui999：增加一个 defaultValue
+    // 条件类型
     {
       fieldName: 'conditionType',
       label: '条件类型',
@@ -135,9 +145,9 @@ export function useFormSchema(): VbenFormSchema[] {
         buttonStyle: 'solid',
         optionType: 'button',
       },
-      defaultValue: PromotionConditionTypeEnum.PRICE.type,
+      rules: z.number().default(PromotionConditionTypeEnum.PRICE.type),
-      rules: 'required',
     },
+    // 活动范围
     {
       fieldName: 'productScope',
       label: '活动范围',
@@ -147,8 +157,9 @@ export function useFormSchema(): VbenFormSchema[] {
         buttonStyle: 'solid',
         optionType: 'button',
       },
-      rules: 'required',
+      rules: z.number().default(PromotionProductScopeEnum.ALL.scope),
     },
+    // 备注
     {
       fieldName: 'remark',
       label: '备注',
@@ -156,6 +167,26 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入备注',
         rows: 4,
+        allowClear: true,
+      },
+    },
+    // 优惠规则（自定义组件插槽）
+    {
+      fieldName: 'rules',
+      label: '优惠设置',
+      component: 'Input',
+      formItemClass: 'items-start',
+    },
+    // 商品范围选择（自定义组件插槽）
+    {
+      fieldName: 'productSpuIds',
+      label: '选择商品',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope'],
+        show: (values) => {
+          return values.productScope === PromotionProductScopeEnum.SPU.scope;
+        },
       },
     },
   ];

apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue

@@ -42,12 +42,12 @@ function handleEdit(row: MallRewardActivityApi.RewardActivity) {
 /** 关闭满减送活动 */
 async function handleClose(row: MallRewardActivityApi.RewardActivity) {
   const hideLoading = message.loading({
-    content: '正在关闭中...',
+    content: $t('ui.actionMessage.closing', [row.name]),
     duration: 0,
   });
   try {
     await closeRewardActivity(row.id!);
-    message.success('关闭成功');
+    message.success($t('ui.actionMessage.closeSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -96,7 +96,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions,
+  } as VxeTableGridOptions<MallRewardActivityApi.RewardActivity>,
 });
 </script>
 
@@ -104,6 +104,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   <Page auto-content-height>
     <FormModal @success="handleRefresh" />
     <Grid table-title="满减送活动">
+      <!-- 工具栏按钮 -->
       <template #toolbar-tools>
         <TableAction
           :actions="[
@@ -111,19 +112,22 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('ui.actionTitle.create', ['活动']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
+              auth: ['promotion:reward-activity:create'],
               onClick: handleCreate,
             },
           ]"
         />
       </template>
+
+      <!-- 行操作按钮 -->
       <template #actions="{ row }">
-        <!-- TODO @AI：table action 的权限标识；参考 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/promotion/rewardActivity/index.vue -->
         <TableAction
           :actions="[
             {
               label: $t('common.edit'),
               type: 'link',
               icon: ACTION_ICON.EDIT,
+              auth: ['promotion:reward-activity:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
@@ -131,9 +135,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               danger: true,
               icon: ACTION_ICON.CLOSE,
+              auth: ['promotion:reward-activity:close'],
               ifShow: row.status === 0,
               popConfirm: {
-                title: '确认关闭该满减活动吗？',
+                title: '确认关闭该满减送活动吗？',
                 confirm: handleClose.bind(null, row),
               },
             },
@@ -142,6 +147,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
+              auth: ['promotion:reward-activity:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),

apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue

@@ -11,7 +11,7 @@ import {
 } from '@vben/constants';
 import { convertToInteger, formatToFraction } from '@vben/utils';
 
-import { Alert, FormItem, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import {
@@ -20,19 +20,19 @@ import {
   updateRewardActivity,
 } from '#/api/mall/promotion/reward/rewardActivity';
 import { $t } from '#/locales';
-// TODO @puhui999：有问题
+import { SpuShowcase } from '#/views/mall/product/spu/components';
-// import { SpuAndSkuList } from '#/views/mall/promotion/components';
 
-import RewardRule from '../components/reward-rule.vue';
 import { useFormSchema } from '../data';
+import RewardRule from './reward-rule.vue';
 
 const emit = defineEmits(['success']);
-// TODO @puhui999：代码风格，和别的 form 保持一致；
+
 const formData = ref<MallRewardActivityApi.RewardActivity>({
   conditionType: PromotionConditionTypeEnum.PRICE.type,
   productScope: PromotionProductScopeEnum.ALL.scope,
   rules: [],
 });
+
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['满减送'])
@@ -44,7 +44,9 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
+    labelWidth: 100,
   } as VbenFormProps['commonConfig'],
+  layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
@@ -60,29 +62,28 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       const data = await formApi.getValues();
-      // 设置活动规则优惠券
+
       rewardRuleRef.value?.setRuleCoupon();
-      // 时间段转换
+
       if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
         data.startTime = data.startAndEndTime[0];
         data.endTime = data.startAndEndTime[1];
         delete data.startAndEndTime;
       }
-      // 规则元转分
+
       data.rules?.forEach((item: any) => {
         item.discountPrice = convertToInteger(item.discountPrice || 0);
         if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
           item.limit = convertToInteger(item.limit || 0);
         }
       });
-      // 设置商品范围
+
       setProductScopeValues(data);
 
-      // 提交表单
       await (formData.value?.id
-        ? updateRewardActivity(<MallRewardActivityApi.RewardActivity>data)
+        ? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
-        : createRewardActivity(<MallRewardActivityApi.RewardActivity>data));
+        : createRewardActivity(data as MallRewardActivityApi.RewardActivity));
-      // 关闭并提示
+
       await modalApi.close();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
@@ -99,17 +100,18 @@ const [Modal, modalApi] = useVbenModal({
       };
       return;
     }
-    // 加载数据
+
     const data = modalApi.getData<MallRewardActivityApi.RewardActivity>();
     if (!data || !data.id) {
       return;
     }
+
     modalApi.lock();
     try {
       const result = await getReward(data.id);
-      // 转区段时间
+
-      result.startAndEndTime = [result.startTime, result.endTime];
+      result.startAndEndTime = [result.startTime, result.endTime] as any[];
-      // 规则分转元
+
       result.rules?.forEach((item: any) => {
         item.discountPrice = formatToFraction(item.discountPrice || 0);
         if (result.conditionType === PromotionConditionTypeEnum.PRICE.type) {
@@ -118,10 +120,8 @@ const [Modal, modalApi] = useVbenModal({
       });
 
       formData.value = result;
-      // 设置到 values
       await formApi.setValues(result);
 
-      // 获得商品范围
       await getProductScope();
     } finally {
       modalApi.unlock();
@@ -129,8 +129,6 @@ const [Modal, modalApi] = useVbenModal({
   },
 });
 
-/** 获得商品范围 */
-// TODO @puhui999：可以参考下优惠劵模版的做法；可见 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 的 295 行；
 async function getProductScope() {
   switch (formData.value.productScope) {
     case PromotionProductScopeEnum.CATEGORY.scope: {
@@ -140,15 +138,12 @@ async function getProductScope() {
         Array.isArray(productCategoryIds) &&
         productCategoryIds.length === 1
       ) {
-        // 单选时使用数组不能反显
         productCategoryIds = productCategoryIds[0];
       }
-      // 设置品类编号
       formData.value.productCategoryIds = productCategoryIds;
       break;
     }
     case PromotionProductScopeEnum.SPU.scope: {
-      // 设置商品编号
       formData.value.productSpuIds = formData.value.productScopeValues;
       break;
     }
@@ -158,7 +153,6 @@ async function getProductScope() {
   }
 }
 
-/** 设置商品范围 */
 function setProductScopeValues(data: any) {
   switch (formData.value.productScope) {
     case PromotionProductScopeEnum.CATEGORY.scope: {
@@ -179,33 +173,17 @@ function setProductScopeValues(data: any) {
 </script>
 
 <template>
-  <Modal :title="getTitle" class="!w-[65%]">
+  <Modal :title="getTitle" class="w-2/3">
-    <!-- TODO @puhui999：貌似可以不要？ -->
+    <Form class="mx-6">
-    <Alert
+      <!-- 自定义插槽：优惠规则 -->
-      description="【营销】满减送"
+      <template #rules>
-      message="提示"
+        <RewardRule ref="rewardRuleRef" v-model="formData" />
-      show-icon
+      </template>
-      type="info"
-      class="mb-4"
-    />
-    <Form class="mx-4" />
 
-    <!-- 优惠设置 -->
+      <!-- 自定义插槽：商品选择 -->
-    <FormItem label="优惠设置">
+      <template #productSpuIds>
-      <RewardRule ref="rewardRuleRef" v-model="formData" />
+        <SpuShowcase v-model="formData.productSpuIds" />
-    </FormItem>
+      </template>
-    <!-- 商品范围选择 -->
+    </Form>
-    <FormItem
-      v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
-      label="选择商品"
-    >
-      <SpuAndSkuList
-        v-model:spu-ids="formData.productSpuIds"
-        :rule-config="[]"
-        :spu-property-list="[]"
-        :deletable="true"
-        :spu-list="[]"
-      />
-    </FormItem>
   </Modal>
 </template>

apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue

@@ -1,16 +1,19 @@
 <script lang="ts" setup>
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
 import { nextTick, onMounted, ref } from 'vue';
 
+import { DICT_TYPE } from '@vben/constants';
+
 import { useVModel } from '@vueuse/core';
 import { Button, Input } from 'ant-design-vue';
 
-// import { CouponSelect } from '@/views/mall/promotion/coupon/components'; // TODO: 根据实际路径调整
+import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
-// import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate'; // TODO: API
+import { DictTag } from '#/components/dict-tag';
-// import { discountFormat } from '@/views/mall/promotion/coupon/formatter'; // TODO: 根据实际路径调整
+import { CouponSelect } from '#/views/mall/promotion/coupon/components';
+import { discountFormat } from '#/views/mall/promotion/coupon/formatter';
 
-// TODO @puhui999：这里报错了。
 defineOptions({ name: 'RewardRuleCouponSelect' });
 
 const props = defineProps<{
@@ -21,17 +24,22 @@ const emits = defineEmits<{
   (e: 'update:modelValue', v: any): void;
 }>();
 
+/** 选择赠送的优惠类型拓展 */
+interface GiveCoupon extends MallCouponTemplateApi.CouponTemplate {
+  giveCount?: number;
+}
+
 const rewardRule = useVModel(props, 'modelValue', emits);
-const list = ref<any[]>([]); // TODO: 改为 GiveCouponVO[] 类型
+const list = ref<GiveCoupon[]>([]);
 
 const CouponTemplateTakeTypeEnum = {
   ADMIN: { type: 2 },
 };
 
 /** 选择优惠券 */
-// const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
+const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
 function selectCoupon() {
-  // couponSelectRef.value?.open();
+  couponSelectRef.value?.open();
 }
 
 /** 选择优惠券后的回调 */
@@ -51,20 +59,22 @@ function deleteCoupon(index: number) {
 
 /** 初始化赠送的优惠券列表 */
 async function initGiveCouponList() {
-  // if (!rewardRule.value || !rewardRule.value.giveCouponTemplateCounts) {
+  if (!rewardRule.value || !rewardRule.value.giveCouponTemplateCounts) {
-  //   return;
+    return;
-  // }
+  }
-  // const tempLateIds = Object.keys(rewardRule.value.giveCouponTemplateCounts);
+  const tempLateIds = Object.keys(
-  // const data = await getCouponTemplateList(tempLateIds);
+    rewardRule.value.giveCouponTemplateCounts,
-  // if (!data) {
+  ) as unknown as number[];
-  //   return;
+  const data = await getCouponTemplateList(tempLateIds);
-  // }
+  if (!data) {
-  // data.forEach((coupon) => {
+    return;
-  //   list.value.push({
+  }
-  //     ...coupon,
+  data.forEach((coupon) => {
-  //     giveCount: rewardRule.value.giveCouponTemplateCounts![coupon.id],
+    list.value.push({
-  //   });
+      ...coupon,
-  // });
+      giveCount: rewardRule.value.giveCouponTemplateCounts![coupon.id],
+    });
+  });
 }
 
 /** 设置赠送的优惠券 */
@@ -99,14 +109,18 @@ onMounted(async () => {
         <div>优惠券名称：{{ item.name }}</div>
         <div>
           范围：
-          <!-- <DictTag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="item.productScope" /> -->
+          <DictTag
-          {{ item.productScope }}
+            :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE"
+            :value="item.productScope"
+          />
         </div>
         <div class="flex items-center">
           优惠：
-          <!-- <DictTag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="item.discountType" /> -->
+          <DictTag
-          <!-- {{ discountFormat(item) }} -->
+            :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
-          {{ item.discountType }}
+            :value="item.discountType"
+          />
+          {{ discountFormat(item) }}
         </div>
       </div>
       <div class="coupon-list-item-right flex items-center gap-2">
@@ -123,10 +137,10 @@ onMounted(async () => {
     </div>
 
     <!-- 优惠券选择 -->
-    <!-- <CouponSelect
+    <CouponSelect
       ref="couponSelectRef"
       :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
       @change="handleCouponChange"
-    /> -->
+    />
   </div>
 </template>

apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-// TODO @puhui999：在优化下代码；
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
 import { computed, ref } from 'vue';
 
+import { PromotionConditionTypeEnum } from '@vben/constants';
+
 import { useVModel } from '@vueuse/core';
 import {
   Button,
@@ -33,23 +34,12 @@ const formData = useVModel(props, 'modelValue', emits);
 const rewardRuleCouponSelectRef =
   ref<InstanceType<typeof RewardRuleCouponSelect>[]>();
 
-const PromotionConditionTypeEnum = {
-  PRICE: { type: 10 },
-  COUNT: { type: 20 },
-};
-
 const isPriceCondition = computed(() => {
   return (
     formData.value?.conditionType === PromotionConditionTypeEnum.PRICE.type
   );
 });
 
-/** 删除优惠规则 */
-function deleteRule(ruleIndex: number) {
-  formData.value.rules.splice(ruleIndex, 1);
-}
-
-/** 添加优惠规则 */
 function addRule() {
   if (!formData.value.rules) {
     formData.value.rules = [];
@@ -62,7 +52,10 @@ function addRule() {
   });
 }
 
-/** 设置规则优惠券-提交时 */
+function deleteRule(ruleIndex: number) {
+  formData.value.rules.splice(ruleIndex, 1);
+}
+
 function setRuleCoupon() {
   if (!rewardRuleCouponSelectRef.value) {
     return;
@@ -76,11 +69,12 @@ defineExpose({ setRuleCoupon });
 </script>
 
 <template>
-  <Row>
+  <Row :gutter="[16, 16]">
     <template v-if="formData.rules">
       <Col v-for="(rule, index) in formData.rules" :key="index" :span="24">
-        <div class="mb-4">
+        <!-- 规则标题 -->
-          <span class="font-bold">活动层级{{ index + 1 }}</span>
+        <div class="mb-4 flex items-center">
+          <span class="text-base font-bold">活动层级 {{ index + 1 }}</span>
           <Button
             v-if="index !== 0"
             type="link"
@@ -92,8 +86,9 @@ defineExpose({ setRuleCoupon });
           </Button>
         </div>
 
-        <Form :model="rule">
+        <Form :model="rule" layout="horizontal">
-          <FormItem label="优惠门槛:" :label-col="{ span: 4 }">
+          <!-- 优惠门槛 -->
+          <FormItem label="优惠门槛" :label-col="{ span: 4 }">
             <div class="flex items-center gap-2">
               <span>满</span>
               <InputNumber
@@ -102,44 +97,46 @@ defineExpose({ setRuleCoupon });
                 :min="0"
                 :precision="2"
                 :step="0.1"
-                class="!w-150px"
+                :controls="false"
-                placeholder=""
+                class="!w-40"
-                controls-position="right"
+                placeholder="请输入金额"
               />
               <Input
                 v-else
                 v-model:value="rule.limit"
                 :min="0"
-                class="!w-150px"
+                class="!w-40"
-                placeholder=""
+                placeholder="请输入数量"
                 type="number"
               />
               <span>{{ isPriceCondition ? '元' : '件' }}</span>
             </div>
           </FormItem>
 
-          <FormItem label="优惠内容:" :label-col="{ span: 4 }">
+          <!-- 优惠内容 -->
+          <FormItem label="优惠内容" :label-col="{ span: 4 }">
             <div class="flex flex-col gap-4">
               <!-- 订单金额优惠 -->
-              <div class="flex items-center gap-2">
+              <div class="flex flex-col gap-2">
-                <span>订单金额优惠</span>
+                <div class="font-medium">订单金额优惠</div>
-              </div>
+                <div class="ml-4 flex items-center gap-2">
-              <div class="ml-4 flex items-center gap-2">
+                  <span>减</span>
-                <span>减</span>
+                  <InputNumber
-                <InputNumber
+                    v-model:value="rule.discountPrice"
-                  v-model:value="rule.discountPrice"
+                    :min="0"
-                  :min="0"
+                    :precision="2"
-                  :precision="2"
+                    :step="0.1"
-                  :step="0.1"
+                    :controls="false"
-                  class="!w-150px"
+                    class="!w-40"
-                  controls-position="right"
+                    placeholder="请输入金额"
-                />
+                  />
-                <span>元</span>
+                  <span>元</span>
+                </div>
               </div>
 
               <!-- 包邮 -->
               <div class="flex items-center gap-2">
-                <span>包邮：</span>
+                <span class="font-medium">包邮：</span>
                 <Switch
                   v-model:checked="rule.freeDelivery"
                   checked-children="是"
@@ -149,20 +146,21 @@ defineExpose({ setRuleCoupon });
 
               <!-- 送积分 -->
               <div class="flex items-center gap-2">
-                <span>送积分：</span>
+                <span class="font-medium">送积分：</span>
                 <span>送</span>
-                <Input
+                <InputNumber
                   v-model:value="rule.point"
-                  class="!w-150px"
+                  :min="0"
-                  placeholder=""
+                  :controls="false"
-                  type="number"
+                  class="!w-40"
+                  placeholder="请输入积分"
                 />
                 <span>积分</span>
               </div>
 
               <!-- 送优惠券 -->
-              <div class="flex items-center gap-2">
+              <div class="flex items-start gap-2">
-                <span>送优惠券：</span>
+                <span class="font-medium">送优惠券：</span>
                 <RewardRuleCouponSelect
                   ref="rewardRuleCouponSelectRef"
                   :model-value="rule"
@@ -174,12 +172,16 @@ defineExpose({ setRuleCoupon });
       </Col>
     </template>
 
-    <Col :span="24" class="mt-4">
+    <!-- 添加规则按钮 -->
-      <Button type="primary" @click="addRule">添加优惠规则</Button>
+    <Col :span="24" class="mt-2">
+      <Button type="primary" @click="addRule">+ 添加优惠规则</Button>
     </Col>
 
-    <Col :span="24" class="mt-4">
+    <!-- 提示信息 -->
-      <Tag color="warning">赠送积分为 0 时不赠送。未选优惠券时不赠送。</Tag>
+    <Col :span="24" class="mt-2">
+      <Tag color="warning">
+        提示：赠送积分为 0 时不赠送；未选择优惠券时不赠送。
+      </Tag>
     </Col>
   </Row>
 </template>

apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts

@@ -4,6 +4,9 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { z } from '#/adapter/form';
+import { getSimpleSeckillConfigList } from '#/api/mall/promotion/seckill/seckillConfig';
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -29,6 +32,115 @@ export function useGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
+/** 新增/编辑的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    // 隐藏的 ID 字段
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '秒杀活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+      },
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'startTime',
+      label: '活动开始时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择活动开始时间',
+        showTime: false,
+        format: 'YYYY-MM-DD',
+        valueFormat: 'x',
+        class: 'w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'endTime',
+      label: '活动结束时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择活动结束时间',
+        showTime: false,
+        format: 'YYYY-MM-DD',
+        valueFormat: 'x',
+        class: 'w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'configIds',
+      label: '秒杀时段',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择秒杀时段',
+        mode: 'multiple',
+        api: getSimpleSeckillConfigList,
+        labelField: 'name',
+        valueField: 'id',
+        class: 'w-full',
+      },
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'totalLimitCount',
+      label: '总限购数量',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入总限购数量',
+        min: 0,
+        class: 'w-full',
+      },
+      rules: z.number().min(0).default(0),
+    },
+    {
+      fieldName: 'singleLimitCount',
+      label: '单次限购数量',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入单次限购数量',
+        min: 0,
+        class: 'w-full',
+      },
+      rules: z.number().min(0).default(0),
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+        min: 0,
+        class: 'w-full',
+      },
+      rules: z.number().min(0).default(0),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+      formItemClass: 'col-span-2',
+    },
+  ];
+}
+
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [

apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue

@@ -5,7 +5,6 @@ import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckil
 import { onMounted } from 'vue';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
 
 import { message, Tag } from 'ant-design-vue';
 
@@ -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';

apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
 
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import {
@@ -15,59 +15,53 @@ import {
 } from '#/api/mall/promotion/seckill/seckillActivity';
 import { $t } from '#/locales';
 
+import { useFormSchema } from '../data';
+
 const emit = defineEmits(['success']);
 const formData = ref<MallSeckillActivityApi.SeckillActivity>();
+
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['秒杀活动'])
     : $t('ui.actionTitle.create', ['秒杀活动']);
 });
 
-// 简化的表单配置，实际项目中应该有完整的字段配置
+// ================= 商品选择相关 =================
-const formSchema = [
+const spuId = ref<number>();
-  {
+const spuName = ref<string>('');
-    fieldName: 'id',
+const skuTableData = ref<any[]>([]);
-    component: 'Input',
+
-    dependencies: {
+// 选择商品（占位函数，实际需要对接商品选择组件）
-      triggerFields: [''],
+const handleSelectProduct = () => {
-      show: () => false,
+  message.info('商品选择功能需要对接商品选择组件');
-    },
+  // TODO: 打开商品选择弹窗
-  },
+  // 实际使用时需要：
-  {
+  // 1. 打开商品选择弹窗
-    fieldName: 'name',
+  // 2. 选择商品后调用以下逻辑设置数据：
-    label: '活动名称',
+  //    spuId.value = selectedSpu.id;
-    component: 'Input',
+  //    spuName.value = selectedSpu.name;
-    componentProps: {
+  //    skuTableData.value = selectedSkus.map(sku => ({
-      placeholder: '请输入活动名称',
+  //      skuId: sku.id,
-    },
+  //      skuName: sku.name || '',
-    rules: 'required',
+  //      picUrl: sku.picUrl || selectedSpu.picUrl || '',
-  },
+  //      price: sku.price || 0,
-  {
+  //      stock: 0,
-    fieldName: 'status',
+  //      seckillPrice: 0,
-    label: '活动状态',
+  //    }));
-    component: 'Select',
+};
-    componentProps: {
+
-      placeholder: '请选择活动状态',
+// ================= end =================
-      options: [
-        { label: '开启', value: 0 },
-        { label: '关闭', value: 1 },
-      ],
-    },
-    rules: 'required',
-  },
-];
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
       class: 'w-full',
     },
-    formItemClass: 'col-span-2',
-    labelWidth: 80,
   },
   layout: 'horizontal',
-  schema: formSchema,
+  schema: useFormSchema(),
   showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
 });
 
 const [Modal, modalApi] = useVbenModal({
@@ -76,15 +70,46 @@ const [Modal, modalApi] = useVbenModal({
     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();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallSeckillActivityApi.SeckillActivity;
     try {
+      const values = await formApi.getValues();
+
+      // 构建提交数据
+      const data: any = {
+        ...values,
+        spuId: spuId.value,
+        products: skuTableData.value.map((sku) => ({
+          skuId: sku.skuId,
+          stock: sku.stock,
+          seckillPrice: Math.round(sku.seckillPrice * 100), // 转换为分
+        })),
+      };
+
       await (formData.value?.id
         ? updateSeckillActivity(data)
         : createSeckillActivity(data));
-      // 关闭并提示
+
       await modalApi.close();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
@@ -95,18 +120,27 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      spuId.value = undefined;
+      spuName.value = '';
+      skuTableData.value = [];
       return;
     }
-    // 加载数据
+
     const data = modalApi.getData<MallSeckillActivityApi.SeckillActivity>();
     if (!data || !data.id) {
       return;
     }
+
     modalApi.lock();
     try {
       formData.value = await getSeckillActivity(data.id);
-      // 设置到 values
+      await nextTick();
       await formApi.setValues(formData.value);
+
+      // TODO: 加载商品和 SKU 信息
+      // 需要调用商品 API 获取 SPU 详情
+      // spuId.value = formData.value.spuId;
+      // await loadProductDetails(formData.value.spuId, formData.value.products);
     } finally {
       modalApi.unlock();
     }
@@ -115,7 +149,72 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal class="w-4/5" :title="getTitle">
-    <Form class="mx-4" />
+    <div class="mx-4">
+      <Form />
+
+      <!-- 商品选择区域 -->
+      <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>
+
+        <!-- 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>
+                <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>
 </template>

packages/icons/src/iconify/index.ts

@@ -60,4 +60,8 @@ export const MenuOutlined = createIconifyIcon('ant-design:menu-outlined');
 
 export const PlusOutlined = createIconifyIcon('ant-design:plus-outlined');
 
+export const CloseCircleFilled = createIconifyIcon(
+  'ant-design:close-circle-filled',
+);
+
 export const SelectOutlined = createIconifyIcon('ant-design:select-outlined');