feat：【antd】【mall】diy-editor 代码风格统一 & 逐个测试 50%

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

@@ -0,0 +1,2 @@
+export { default as CombinationShowcase } from './showcase.vue';
+

apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue

@@ -0,0 +1,146 @@
+<!-- 拼团活动橱窗组件：用于展示和选择拼团活动 -->
+<script lang="ts" setup>
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { computed, ref, watch } from 'vue';
+
+import { CloseCircleFilled, PlusOutlined } from '@vben/icons';
+
+import { Image, Tooltip } from 'ant-design-vue';
+
+import { getCombinationActivityListByIds } from '#/api/mall/promotion/combination/combinationActivity';
+
+import CombinationTableSelect from './table-select.vue';
+
+interface CombinationShowcaseProps {
+  modelValue?: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<CombinationShowcaseProps>(), {
+  modelValue: undefined,
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]); // 已选择的活动列表
+const combinationTableSelectRef =
+  ref<InstanceType<typeof CombinationTableSelect>>(); // 活动选择表格组件引用
+const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
+
+/** 计算是否可以添加 */
+const canAdd = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.limit) {
+    return true;
+  }
+  return activityList.value.length < props.limit;
+});
+
+/** 监听 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) {
+      activityList.value = [];
+      return;
+    }
+    // 只有活动发生变化时才重新查询
+    if (
+      activityList.value.length === 0 ||
+      activityList.value.some((activity) => !ids.includes(activity.id!))
+    ) {
+      activityList.value = await getCombinationActivityListByIds(ids);
+    }
+  },
+  { immediate: true },
+);
+
+/** 打开活动选择对话框 */
+function handleOpenActivitySelect() {
+  combinationTableSelectRef.value?.open(activityList.value);
+}
+
+/** 选择活动后触发 */
+function handleActivitySelected(
+  activities:
+    | MallCombinationActivityApi.CombinationActivity
+    | MallCombinationActivityApi.CombinationActivity[],
+) {
+  activityList.value = Array.isArray(activities) ? activities : [activities];
+  emitActivityChange();
+}
+
+/** 删除活动 */
+function handleRemoveActivity(index: number) {
+  activityList.value.splice(index, 1);
+  emitActivityChange();
+}
+
+/** 触发变更事件 */
+function emitActivityChange() {
+  if (props.limit === 1) {
+    const activity =
+      activityList.value.length > 0 ? activityList.value[0] : null;
+    emit('update:modelValue', activity?.id || 0);
+    emit('change', activity);
+  } else {
+    emit(
+      'update:modelValue',
+      activityList.value.map((activity) => activity.id!),
+    );
+    emit('change', activityList.value);
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- 已选活动列表 -->
+    <div
+      v-for="(activity, index) in activityList"
+      :key="activity.id"
+      class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
+    >
+      <Tooltip :title="activity.name">
+        <div class="relative h-full w-full">
+          <Image
+            :src="activity.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+          />
+          <!-- 删除按钮 -->
+          <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="handleRemoveActivity(index)"
+          />
+        </div>
+      </Tooltip>
+    </div>
+
+    <!-- 添加活动按钮 -->
+    <Tooltip v-if="canAdd" title="选择活动">
+      <div
+        class="hover:border-primary hover:bg-primary/5 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
+        @click="handleOpenActivitySelect"
+      >
+        <PlusOutlined class="text-xl text-gray-400" />
+      </div>
+    </Tooltip>
+  </div>
+
+  <!-- 活动选择对话框 -->
+  <CombinationTableSelect
+    ref="combinationTableSelectRef"
+    :multiple="isMultiple"
+    @change="handleActivitySelected"
+  />
+</template>
+

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

@@ -0,0 +1,285 @@
+<!-- 拼团活动选择弹窗组件 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallCategoryApi } from '#/api/mall/product/category';
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { fenToYuan, formatDate, handleTree } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getCombinationActivityPage } from '#/api/mall/promotion/combination/combinationActivity';
+
+interface CombinationTableSelectProps {
+  multiple?: boolean; // 是否多选：true - checkbox；false - radio
+}
+
+const props = withDefaults(defineProps<CombinationTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [
+    activity:
+      | MallCombinationActivityApi.CombinationActivity
+      | MallCombinationActivityApi.CombinationActivity[],
+  ];
+}>();
+
+const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
+const categoryTreeList = ref<any[]>([]); // 分类树
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow =
+    gridApi.grid.getRadioRecord() as MallCombinationActivityApi.CombinationActivity;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+/**
+ * 格式化拼团价格
+ * @param products
+ */
+const formatCombinationPrice = (
+  products: MallCombinationActivityApi.CombinationProduct[],
+) => {
+  if (!products || products.length === 0) return '-';
+  const combinationPrice = Math.min(
+    ...products.map((item) => item.combinationPrice || 0),
+  );
+  return `￥${fenToYuan(combinationPrice)}`;
+};
+
+/** 搜索表单 Schema */
+const formSchema = computed<VbenFormSchema[]>(() => [
+  {
+    fieldName: 'name',
+    label: '活动名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入活动名称',
+      clearable: true,
+    },
+  },
+  {
+    fieldName: 'status',
+    label: '活动状态',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择活动状态',
+      clearable: true,
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+  },
+]);
+
+/** 表格列配置 */
+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: 80,
+    },
+    {
+      field: 'name',
+      title: '活动名称',
+      minWidth: 140,
+    },
+    {
+      field: 'activityTime',
+      title: '活动时间',
+      minWidth: 210,
+      formatter: ({ row }) => {
+        return `${formatDate(row.startTime, 'YYYY-MM-DD')} ~ ${formatDate(row.endTime, 'YYYY-MM-DD')}`;
+      },
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      width: 100,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 300,
+    },
+    {
+      field: 'marketPrice',
+      title: '原价',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return cellValue ? `￥${fenToYuan(cellValue)}` : '-';
+      },
+    },
+    {
+      field: 'products',
+      title: '拼团价',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return formatCombinationPrice(cellValue);
+      },
+    },
+    {
+      field: 'groupCount',
+      title: '开团组数',
+      minWidth: 100,
+    },
+    {
+      field: 'groupSuccessCount',
+      title: '成团组数',
+      minWidth: 100,
+    },
+    {
+      field: 'recordCount',
+      title: '购买次数',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+  );
+  return columns;
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+    layout: 'horizontal',
+    collapsed: false,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 500,
+    border: true,
+    checkboxConfig: {
+      reserve: true,
+    },
+    radioConfig: {
+      reserve: true,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          return await getCombinationActivityPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
+  onConfirm: () => {
+    const selectedRows =
+      gridApi.grid.getCheckboxRecords() as MallCombinationActivityApi.CombinationActivity[];
+    emit('change', selectedRows);
+    modalApi.close();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      gridApi.grid.clearCheckboxRow();
+      gridApi.grid.clearRadioRow();
+      return;
+    }
+
+    // 1. 先查询数据
+    await gridApi.query();
+    // 2. 设置已选中行
+    const data = modalApi.getData<
+      | MallCombinationActivityApi.CombinationActivity
+      | MallCombinationActivityApi.CombinationActivity[]
+    >();
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((activity) => {
+          const row = tableData.find(
+            (item: MallCombinationActivityApi.CombinationActivity) =>
+              item.id === activity.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: MallCombinationActivityApi.CombinationActivity) =>
+            item.id === data.id,
+        );
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (
+    data?:
+      | MallCombinationActivityApi.CombinationActivity
+      | MallCombinationActivityApi.CombinationActivity[],
+  ) => {
+    modalApi.setData(data).open();
+  },
+});
+
+/** 初始化分类数据 */
+onMounted(async () => {
+  categoryList.value = await getCategoryList({});
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+});
+</script>
+
+<template>
+  <Modal title="选择活动" class="w-[950px]">
+    <Grid />
+  </Modal>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue

@@ -1,23 +1,14 @@
 <script setup lang="ts">
 import type { NoticeBarProperty } from './config';
 
-import { ref } from 'vue';
-
 import { IconifyIcon } from '@vben/icons';
 
-import { Divider, Image } from 'ant-design-vue';
+import { Carousel, Divider, Image } from 'ant-design-vue';
 
 /** 公告栏 */
 defineOptions({ name: 'NoticeBar' });
 
-const props = defineProps<{ property: NoticeBarProperty }>();
+defineProps<{ property: NoticeBarProperty }>();
-
-// 自动轮播
-const activeIndex = ref(0);
-setInterval(() => {
-  const contents = props.property.contents || [];
-  activeIndex.value = (activeIndex.value + 1) % (contents.length || 1);
-}, 3000);
 </script>
 
 <template>
@@ -30,11 +21,17 @@ setInterval(() => {
   >
     <Image :src="property.iconUrl" class="h-[18px]" :preview="false" />
     <Divider type="vertical" />
-    <div class="h-6 flex-1 truncate pr-2 leading-6">
+    <Carousel
-      {{ property.contents?.[activeIndex]?.text }}
+      :autoplay="true"
+      :dots="false"
+      vertical
+      class="flex-1 pr-2"
+      style="height: 24px"
+    >
+      <div v-for="(item, index) in property.contents" :key="index">
+        <div class="h-6 truncate leading-6">{{ item.text }}</div>
       </div>
+    </Carousel>
     <IconifyIcon icon="lucide:arrow-right" />
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue

@@ -7,25 +7,18 @@ import { Form, FormItem, Textarea } from 'ant-design-vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
 
-// 导航栏属性面板
+/** 导航栏属性面板 */
 defineOptions({ name: 'PageConfigProperty' });
+
 const props = defineProps<{ modelValue: PageConfigProperty }>();
 
 const emit = defineEmits(['update:modelValue']);
 
-// 表单校验
-const rules = {};
-
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
-  <Form
+  <Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
-    :model="formData"
-    :rules="rules"
-    :label-col="{ span: 6 }"
-    :wrapper-col="{ span: 18 }"
-  >
     <FormItem label="页面描述" name="description">
       <Textarea
         v-model:value="formData!.description"
@@ -47,5 +40,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </FormItem>
   </Form>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue

@@ -9,10 +9,10 @@ import { getArticle } from '#/api/mall/promotion/article';
 
 /** 营销文章 */
 defineOptions({ name: 'PromotionArticle' });
-// 定义属性
+
-const props = defineProps<{ property: PromotionArticleProperty }>();
+const props = defineProps<{ property: PromotionArticleProperty }>(); // 定义属性
-// 商品列表
+
-const article = ref<MallArticleApi.Article>();
+const article = ref<MallArticleApi.Article>(); // 商品列表
 
 watch(
   () => props.property.id,

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue

@@ -12,18 +12,18 @@ import { getArticlePage } from '#/api/mall/promotion/article';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 营销文章属性面板
+/** 营销文章属性面板 */
 defineOptions({ name: 'PromotionArticleProperty' });
 
 const props = defineProps<{ modelValue: PromotionArticleProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
 const formData = useVModel(props, 'modelValue', emit);
-// 文章列表
-const articles = ref<MallArticleApi.Article[]>([]);
 
-// 加载中
+const articles = ref<MallArticleApi.Article[]>([]); // 文章列表
-const loading = ref(false);
+const loading = ref(false); // 加载中
-// 查询文章列表
+
+/** 查询文章列表 */
 const queryArticleList = async (title?: string) => {
   loading.value = true;
   const { list } = await getArticlePage({
@@ -35,7 +35,7 @@ const queryArticleList = async (title?: string) => {
   loading.value = false;
 };
 
-// 初始化
+/** 初始化 */
 onMounted(() => {
   queryArticleList();
 });

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue

@@ -15,10 +15,10 @@ import { getCombinationActivityListByIds } from '#/api/mall/promotion/combinatio
 
 /** 拼团卡片 */
 defineOptions({ name: 'PromotionCombination' });
-// 定义属性
+
 const props = defineProps<{ property: PromotionCombinationProperty }>();
-// 商品列表
+
-const spuList = ref<MallSpuApi.Spu[]>([]);
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const combinationActivityList = ref<
   MallCombinationActivityApi.CombinationActivity[]
@@ -30,7 +30,7 @@ watch(
     try {
       // 新添加的拼团组件，是没有活动ID的
       const activityIds = props.property.activityIds;
-      // 检查活动ID的有效性
+      // 检查活动 ID 的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取拼团活动详情列表
         combinationActivityList.value =
@@ -68,32 +68,25 @@ watch(
   },
 );
 
-/**
+/** 计算商品的间距 */
- * 计算商品的间距
+function calculateSpace(index: number) {
- * @param index 商品索引
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
- */
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
-const calculateSpace = (index: number) => {
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
   return { marginLeft, marginTop };
-};
+}
 
-// 容器
+const containerRef = ref(); // 容器
-const containerRef = ref();
+
-// 计算商品的宽度
+/** 计算商品的宽度 */
-const calculateWidth = () => {
+function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import type { PromotionCombinationProperty } from './config';
 
-import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
-
-import { onMounted, ref } from 'vue';
-
-import { CommonStatusEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
@@ -22,27 +17,20 @@ import {
   Tooltip,
 } from 'ant-design-vue';
 
-import { getCombinationActivityPage } from '#/api/mall/promotion/combination/combinationActivity';
 import UploadImg from '#/components/upload/image-upload.vue';
-// import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
+import { CombinationShowcase } from '#/views/mall/promotion/combination/components';
 import { ColorInput } from '#/views/mall/promotion/components';
 
-// 拼团属性面板
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 拼团属性面板 */
 defineOptions({ name: 'PromotionCombinationProperty' });
 
 const props = defineProps<{ modelValue: PromotionCombinationProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
-// 活动列表
-const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
-onMounted(async () => {
-  const { list } = await getCombinationActivityPage({
-    pageNo: 1,
-    pageSize: 10,
-    status: CommonStatusEnum.ENABLE,
-  });
-  activityList.value = list;
-});
 </script>
 
 <template>
@@ -184,5 +172,3 @@ onMounted(async () => {
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue

@@ -14,10 +14,10 @@ import { getPointActivityListByIds } from '#/api/mall/promotion/point';
 
 /** 积分商城卡片 */
 defineOptions({ name: 'PromotionPoint' });
-// 定义属性
+
 const props = defineProps<{ property: PromotionPointProperty }>();
-// 商品列表
+
-const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]);
+const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
 
@@ -27,7 +27,7 @@ watch(
     try {
       // 新添加的积分商城组件，是没有活动ID的
       const activityIds = props.property.activityIds;
-      // 检查活动ID的有效性
+      // 检查活动 ID 的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取积分商城活动详情列表
         pointActivityList.value = await getPointActivityListByIds(activityIds);
@@ -65,32 +65,25 @@ watch(
   },
 );
 
-/**
+/** 计算商品的间距 */
- * 计算商品的间距
+function calculateSpace(index: number) {
- * @param index 商品索引
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
- */
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
-const calculateSpace = (index: number) => {
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
   return { marginLeft, marginTop };
-};
+}
 
-// 容器
+const containerRef = ref(); // 容器
-const containerRef = ref();
+
-// 计算商品的宽度
+/** 计算商品的宽度 */
-const calculateWidth = () => {
+function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div

apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue

@@ -1,7 +1,5 @@
-<!-- eslint-disable unicorn/no-nested-ternary -->
+<!-- 积分商城活动橱窗组件：用于展示和选择积分商城活动 -->
-<!-- 积分活动橱窗组件 - 用于装修时展示和选择积分活动 -->
 <script lang="ts" setup>
-// TODO @puhui999：看看是不是整体优化下代码风格，参考别的模块
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 
 import { computed, ref, watch } from 'vue';
@@ -15,128 +13,113 @@ import { getPointActivityListByIds } from '#/api/mall/promotion/point';
 import PointTableSelect from './point-table-select.vue';
 
 interface PointShowcaseProps {
-  modelValue: number | number[];
+  modelValue?: number | number[];
   limit?: number;
   disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<PointShowcaseProps>(), {
+  modelValue: undefined,
   limit: Number.MAX_VALUE,
   disabled: false,
 });
 
-const emit = defineEmits<{
+const emit = defineEmits(['update:modelValue', 'change']);
-  change: [value: any];
-  'update:modelValue': [value: number | number[]];
-}>();
 
-// 积分活动列表
+const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]); // 已选择的活动列表
-const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
+const pointTableSelectRef = ref<InstanceType<typeof PointTableSelect>>(); // 活动选择表格组件引用
+const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
 
-// 计算是否可以添加
+/** 计算是否可以添加 */
 const canAdd = computed(() => {
-  if (props.disabled) return false;
+  if (props.disabled) {
-  if (!props.limit) return true;
+    return false;
+  }
+  if (!props.limit) {
+    return true;
+  }
   return pointActivityList.value.length < props.limit;
 });
 
-// 积分活动选择器引用
+/** 监听 modelValue 变化，加载活动详情 */
-const pointActivityTableSelectRef = ref();
-
-/**
- * 打开积分活动选择器
- */
-function openPointActivityTableSelect() {
-  pointActivityTableSelectRef.value.open(pointActivityList.value);
-}
-
-/**
- * 选择活动后触发
- */
-function handleActivitySelected(
-  activityList:
-    | MallPointActivityApi.PointActivity
-    | MallPointActivityApi.PointActivity[],
-) {
-  pointActivityList.value = Array.isArray(activityList)
-    ? activityList
-    : [activityList];
-  emitActivityChange();
-}
-
-/**
- * 删除活动
- */
-function handleRemoveActivity(index: number) {
-  pointActivityList.value.splice(index, 1);
-  emitActivityChange();
-}
-
-/**
- * 发送变更事件
- */
-function emitActivityChange() {
-  if (props.limit === 1) {
-    const pointActivity =
-      pointActivityList.value.length > 0 ? pointActivityList.value[0] : null;
-    emit('update:modelValue', pointActivity?.id || 0);
-    emit('change', pointActivity);
-  } else {
-    emit(
-      'update:modelValue',
-      pointActivityList.value.map((pointActivity) => pointActivity.id),
-    );
-    emit('change', pointActivityList.value);
-  }
-}
-
-// 监听 modelValue 变化
 watch(
   () => props.modelValue,
-  async () => {
+  async (newValue) => {
-    const ids = Array.isArray(props.modelValue)
+    // eslint-disable-next-line unicorn/no-nested-ternary
-      ? props.modelValue
+    const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
-      : props.modelValue
-        ? [props.modelValue]
-        : [];
-
-    // 不需要返显
     if (ids.length === 0) {
       pointActivityList.value = [];
       return;
     }
-
+    // 只有活动发生变化时才重新查询
-    // 只有活动发生变化之后，才会查询活动
     if (
       pointActivityList.value.length === 0 ||
-      pointActivityList.value.some(
+      pointActivityList.value.some((activity) => !ids.includes(activity.id!))
-        (pointActivity) => !ids.includes(pointActivity.id!),
-      )
     ) {
       pointActivityList.value = await getPointActivityListByIds(ids);
     }
   },
   { immediate: true },
 );
+
+/** 打开活动选择对话框 */
+function handleOpenActivitySelect() {
+  pointTableSelectRef.value?.open(pointActivityList.value);
+}
+
+/** 选择活动后触发 */
+function handleActivitySelected(
+  activities:
+    | MallPointActivityApi.PointActivity
+    | MallPointActivityApi.PointActivity[],
+) {
+  pointActivityList.value = Array.isArray(activities)
+    ? activities
+    : [activities];
+  emitActivityChange();
+}
+
+/** 删除活动 */
+function handleRemoveActivity(index: number) {
+  pointActivityList.value.splice(index, 1);
+  emitActivityChange();
+}
+
+/** 触发变更事件 */
+function emitActivityChange() {
+  if (props.limit === 1) {
+    const activity =
+      pointActivityList.value.length > 0 ? pointActivityList.value[0] : null;
+    emit('update:modelValue', activity?.id || 0);
+    emit('change', activity);
+  } else {
+    emit(
+      'update:modelValue',
+      pointActivityList.value.map((activity) => activity.id!),
+    );
+    emit('change', pointActivityList.value);
+  }
+}
 </script>
 
 <template>
   <div class="flex flex-wrap items-center gap-2">
-    <!-- 活动图片列表 -->
+    <!-- 已选活动列表 -->
     <div
-      v-for="(pointActivity, index) in pointActivityList"
+      v-for="(activity, index) in pointActivityList"
-      :key="pointActivity.id"
+      :key="activity.id"
-      class="relative flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300"
+      class="relative h-[60px] w-[60px] overflow-hidden rounded-lg border border-dashed border-gray-300"
     >
-      <Tooltip :title="pointActivity.spuName">
+      <Tooltip :title="activity.spuName">
         <div class="relative h-full w-full">
           <Image
             :preview="true"
-            :src="pointActivity.picUrl"
+            :src="activity.picUrl"
             class="h-full w-full rounded-lg object-cover"
           />
+          <!-- 删除按钮 -->
           <IconifyIcon
-            v-show="!disabled"
+            v-if="!disabled"
             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)"
@@ -145,21 +128,21 @@ watch(
       </Tooltip>
     </div>
 
-    <!-- 添加按钮 -->
+    <!-- 添加活动按钮 -->
     <Tooltip v-if="canAdd" title="选择活动">
       <div
-        class="flex h-14 w-14 cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
+        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="openPointActivityTableSelect"
+        @click="handleOpenActivitySelect"
       >
-        <IconifyIcon icon="lucide:plus" class="text-lg text-gray-400" />
+        <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
       </div>
     </Tooltip>
   </div>
 
-  <!-- 积分活动选择对话框 -->
+  <!-- 活动选择对话框 -->
   <PointTableSelect
-    ref="pointActivityTableSelectRef"
+    ref="pointTableSelectRef"
-    :multiple="limit !== 1"
+    :multiple="isMultiple"
     @change="handleActivitySelected"
   />
 </template>

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

@@ -1,23 +1,21 @@
-<!-- 积分活动表格选择器 -->
+<!-- 积分商城活动选择弹窗组件 -->
 <script lang="ts" setup>
-// TODO @puhui999：看看是不是整体优化下代码风格，参考别的模块
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 
-import { computed, ref } from 'vue';
+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 { Checkbox, Radio } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getPointActivityPage } from '#/api/mall/promotion/point';
 
 interface PointTableSelectProps {
-  multiple?: boolean;
+  multiple?: boolean; // 是否单选：true - checkbox；false - radio
 }
 
 const props = withDefaults(defineProps<PointTableSelectProps>(), {
@@ -26,26 +24,28 @@ const props = withDefaults(defineProps<PointTableSelectProps>(), {
 
 const emit = defineEmits<{
   change: [
-    value:
+    activity:
       | MallPointActivityApi.PointActivity
       | MallPointActivityApi.PointActivity[],
   ];
 }>();
 
-// 单选：选中的活动 ID
+/** 单选：处理选中变化 */
-const selectedActivityId = ref<number>();
+function handleRadioChange() {
-// 多选：选中状态映射
+  const selectedRow =
-const checkedStatus = ref<Record<number, boolean>>({});
+    gridApi.grid.getRadioRecord() as MallPointActivityApi.PointActivity;
-// 多选：选中的活动列表
+  if (selectedRow) {
-const checkedActivities = ref<MallPointActivityApi.PointActivity[]>([]);
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
 
-// 全选状态
+/** 计算已兑换数量 */
-const isCheckAll = ref(false);
+const getRedeemedQuantity = (row: MallPointActivityApi.PointActivity) =>
-const isIndeterminate = ref(false);
+  (row.totalStock || 0) - (row.stock || 0);
 
-// 搜索表单配置
+/** 搜索表单 Schema */
-const formSchema = computed<VbenFormSchema[]>(() => {
+const formSchema = computed<VbenFormSchema[]>(() => [
-  return [
   {
     fieldName: 'status',
     label: '活动状态',
@@ -53,63 +53,46 @@ const formSchema = computed<VbenFormSchema[]>(() => {
     componentProps: {
       options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
       placeholder: '请选择活动状态',
-        allowClear: true,
+      clearable: true,
     },
   },
-  ];
+]);
-});
 
-// 列配置
+/** 表格列配置 */
 const gridColumns = computed<VxeGridProps['columns']>(() => {
   const columns: VxeGridProps['columns'] = [];
-
-  // 多选模式
   if (props.multiple) {
-    columns.push({
+    columns.push({ type: 'checkbox', width: 55 });
-      field: 'checkbox',
-      title: '',
-      width: 55,
-      align: 'center',
-      slots: { default: 'checkbox-column', header: 'checkbox-header' },
-    });
   } else {
-    // 单选模式
+    columns.push({ type: 'radio', width: 55 });
-    columns.push({
-      field: 'radio',
-      title: '#',
-      width: 55,
-      align: 'center',
-      slots: { default: 'radio-column' },
-    });
   }
-
   columns.push(
     {
       field: 'id',
       title: '活动编号',
-      minWidth: 80,
+      minWidth: 100,
+      align: 'center',
     },
     {
       field: 'picUrl',
       title: '商品图片',
-      minWidth: 80,
+      width: 100,
+      align: 'center',
       cellRender: {
         name: 'CellImage',
-        props: {
-          height: 40,
-        },
       },
     },
     {
       field: 'spuName',
       title: '商品标题',
-      minWidth: 300,
+      minWidth: 200,
     },
     {
       field: 'marketPrice',
       title: '原价',
       minWidth: 100,
-      formatter: 'formatAmount2',
+      align: 'center',
+      formatter: ({ cellValue }) => fenToYuanFormat(cellValue),
     },
     {
       field: 'status',
@@ -118,9 +101,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
       align: 'center',
       cellRender: {
         name: 'CellDict',
-        props: {
+        props: { type: DICT_TYPE.COMMON_STATUS },
-          type: DICT_TYPE.COMMON_STATUS,
-        },
       },
     },
     {
@@ -140,216 +121,119 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
       title: '已兑换数量',
       minWidth: 100,
       align: 'center',
-      formatter: ({ row }) => (row.totalStock || 0) - (row.stock || 0),
+      formatter: ({ row }) => getRedeemedQuantity(row),
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
+      width: 180,
       align: 'center',
-      formatter: 'formatDateTime',
+      formatter: ({ cellValue }) => dateFormatter(cellValue),
     },
   );
-
   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: {
+      reserve: true,
+    },
+    radioConfig: {
+      reserve: true,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
     proxyConfig: {
       ajax: {
         async query({ page }: any, formValues: any) {
-          try {
+          return await getPointActivityPage({
-            const params: any = {
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            };
+            ...formValues,
-            if (formValues.status !== undefined) {
+          });
-              params.status = formValues.status;
-            }
-            const data = await getPointActivityPage(params);
-            const list = data.list || [];
-
-            // 初始化 checkbox 绑定
-            list.forEach(
-              (activityVO) =>
-                (checkedStatus.value[activityVO.id] =
-                  checkedStatus.value[activityVO.id] || false),
-            );
-
-            // 计算全选框状态
-            calculateIsCheckAll(list);
-
-            return {
-              items: list,
-              total: data.total || 0,
-            };
-          } catch (error) {
-            console.error('加载积分活动数据失败:', error);
-            return { items: [], total: 0 };
-          }
         },
       },
     },
   },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
 });
 
-/**
- * 单选：处理选中
- */
-function handleSingleSelected(row: MallPointActivityApi.PointActivity) {
-  selectedActivityId.value = row.id;
-  emit('change', row);
-  modalApi.close();
-}
-
-/**
- * 多选：全选/全不选
- */
-function handleCheckAll(e: any) {
-  const checked = e.target.checked;
-  isCheckAll.value = checked;
-  isIndeterminate.value = false;
-
-  const list = gridApi.grid.getData();
-  list.forEach((pointActivity) =>
-    handleCheckOne(checked, pointActivity, false),
-  );
-}
-
-/**
- * 多选：选中一行
- */
-function handleCheckOne(
-  checked: boolean,
-  pointActivity: MallPointActivityApi.PointActivity,
-  isCalcCheckAll: boolean,
-) {
-  if (checked) {
-    checkedActivities.value.push(pointActivity);
-    checkedStatus.value[pointActivity.id] = true;
-  } else {
-    const index = findCheckedIndex(pointActivity);
-    if (index > -1) {
-      checkedActivities.value.splice(index, 1);
-      checkedStatus.value[pointActivity.id] = false;
-      isCheckAll.value = false;
-    }
-  }
-
-  // 计算全选框状态
-  if (isCalcCheckAll) {
-    const list = gridApi.grid.getData();
-    calculateIsCheckAll(list);
-  }
-}
-
-/**
- * 查找活动在已选中列表中的索引
- */
-function findCheckedIndex(activityVO: MallPointActivityApi.PointActivity) {
-  return checkedActivities.value.findIndex((item) => item.id === activityVO.id);
-}
-
-/**
- * 计算全选框状态
- */
-function calculateIsCheckAll(list: MallPointActivityApi.PointActivity[]) {
-  isCheckAll.value = list.every(
-    (activityVO) => checkedStatus.value[activityVO.id],
-  );
-  isIndeterminate.value =
-    !isCheckAll.value &&
-    list.some((activityVO) => checkedStatus.value[activityVO.id]);
-}
-
-/**
- * 多选：确认选择
- */
-function handleConfirm() {
-  emit('change', [...checkedActivities.value]);
-  modalApi.close();
-}
-
-/**
- * 打开对话框
- */
-function open(pointList?: MallPointActivityApi.PointActivity[]) {
-  // 重置
-  checkedActivities.value = [];
-  checkedStatus.value = {};
-  isCheckAll.value = false;
-  isIndeterminate.value = false;
-
-  // 处理已选中
-  if (pointList && pointList.length > 0) {
-    checkedActivities.value = [...pointList];
-    checkedStatus.value = Object.fromEntries(
-      pointList.map((activityVO) => [activityVO.id, true]),
-    );
-  }
-
-  modalApi.open();
-}
-
-// 暴露 open 方法
-defineExpose({ open });
-
-// 初始化弹窗
 const [Modal, modalApi] = useVbenModal({
-  onConfirm: props.multiple ? handleConfirm : undefined,
+  destroyOnClose: true,
+  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
+  onConfirm: () => {
+    const selectedRows =
+      gridApi.grid.getCheckboxRecords() as MallPointActivityApi.PointActivity[];
+    emit('change', selectedRows);
+    modalApi.close();
+  },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      // 关闭时清理状态
+      await gridApi.grid.clearCheckboxRow();
-      if (!props.multiple) {
+      await gridApi.grid.clearRadioRow();
-        selectedActivityId.value = undefined;
-      }
       return;
     }
 
-    // 打开时触发查询
+    // 1. 先查询数据
     await gridApi.query();
+    // 2. 设置已选中行
+    const data = modalApi.getData<
+      MallPointActivityApi.PointActivity | MallPointActivityApi.PointActivity[]
+    >();
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((activity) => {
+          const row = tableData.find(
+            (item: MallPointActivityApi.PointActivity) =>
+              item.id === activity.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: MallPointActivityApi.PointActivity) => item.id === data.id,
+        );
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (
+    data?:
+      | MallPointActivityApi.PointActivity
+      | MallPointActivityApi.PointActivity[],
+  ) => {
+    modalApi.setData(data).open();
   },
 });
 </script>
 
 <template>
-  <Modal class="w-[70%]" title="选择活动">
+  <Modal title="选择活动" class="w-[950px]">
-    <Grid>
+    <Grid />
-      <!-- 多选：表头 checkbox -->
-      <template v-if="props.multiple" #checkbox-header>
-        <Checkbox
-          v-model:checked="isCheckAll"
-          :indeterminate="isIndeterminate"
-          @change="handleCheckAll"
-        />
-      </template>
-
-      <!-- 多选：行 checkbox -->
-      <template v-if="props.multiple" #checkbox-column="{ row }">
-        <Checkbox
-          v-model:checked="checkedStatus[row.id]"
-          @change="(e: any) => handleCheckOne(e.target.checked, row, true)"
-        />
-      </template>
-
-      <!-- 单选：行 radio -->
-      <template v-if="!props.multiple" #radio-column="{ row }">
-        <Radio
-          :checked="selectedActivityId === row.id"
-          :value="row.id"
-          class="cursor-pointer"
-          @click="handleSingleSelected(row)"
-        />
-      </template>
-    </Grid>
   </Modal>
 </template>

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts

@@ -19,7 +19,7 @@ export interface NoticeContentProperty {
 export const component = {
   id: 'NoticeBar',
   name: '公告栏',
-  icon: 'ep:bell',
+  icon: 'lucide:bell',
   property: {
     iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
     contents: [

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue

@@ -5,7 +5,7 @@ import type { MallArticleApi } from '#/api/mall/promotion/article';
 
 import { ref, watch } from 'vue';
 
-import * as ArticleApi from '#/api/mall/promotion/article/index';
+import { getArticle } from '#/api/mall/promotion/article';
 
 /** 营销文章 */
 defineOptions({ name: 'PromotionArticle' });
@@ -18,7 +18,7 @@ watch(
   () => props.property.id,
   async () => {
     if (props.property.id) {
-      article.value = await ArticleApi.getArticle(props.property.id);
+      article.value = await getArticle(props.property.id);
     }
   },
   {

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue

@@ -10,8 +10,8 @@ import { fenToYuan } from '@vben/utils';
 
 import { ElImage } from 'element-plus';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
+import { getSpuDetailList } from '#/api/mall/product/spu';
-import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
+import { getCombinationActivityListByIds } from '#/api/mall/promotion/combination/combinationActivity';
 
 /** 拼团卡片 */
 defineOptions({ name: 'PromotionCombination' });
@@ -34,9 +34,7 @@ watch(
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取拼团活动详情列表
         combinationActivityList.value =
-          await CombinationActivityApi.getCombinationActivityListByIds(
+          await getCombinationActivityListByIds(activityIds);
-            activityIds,
-          );
 
         // 获取拼团活动的 SPU 详情列表
         spuList.value = [];
@@ -44,7 +42,7 @@ watch(
           .map((activity) => activity.spuId)
           .filter((spuId): spuId is number => typeof spuId === 'number');
         if (spuIdList.value.length > 0) {
-          spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value);
+          spuList.value = await getSpuDetailList(spuIdList.value);
         }
 
         // 更新 SPU 的最低价格
@@ -78,7 +76,7 @@ function calculateSpace(index: number) {
   return { marginLeft, marginTop };
 }
 
-const containerRef = ref();
+const containerRef = ref(); // 容器
 
 /** 计算商品的宽度 */
 function calculateWidth() {

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue

@@ -74,7 +74,7 @@ function calculateSpace(index: number) {
   return { marginLeft, marginTop };
 }
 
-const containerRef = ref();
+const containerRef = ref(); // 容器
 
 /** 计算商品的宽度 */
 function calculateWidth() {

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue

@@ -54,11 +54,6 @@ const formData = useVModel(props, 'modelValue', emit);
                 <IconifyIcon icon="fluent:text-column-two-24-filled" />
               </ElRadioButton>
             </ElTooltip>
-            <!--<ElTooltip class="item" content="三列" placement="bottom">
-              <ElRadioButton value="threeCol">
-                <IconifyIcon icon="fluent:text-column-three-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>-->
           </ElRadioGroup>
         </ElFormItem>
         <ElFormItem label="商品名称" prop="fields.name.show">