Merge branch 'dev' of https://gitee.com/yudaocode/yudao-ui-admin-vben into dev

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

@@ -0,0 +1 @@
+export { default as ProductCategorySelect } from './select.vue';

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

@@ -11,26 +11,25 @@ import { getCategoryList } from '#/api/mall/product/category';
 defineOptions({ name: 'ProductCategorySelect' });
 
 const props = defineProps({
-  // 选中的ID
   modelValue: {
     type: [Number, Array<Number>],
     default: undefined,
-  },
+  }, // 选中的 ID
-  // 是否多选
   multiple: {
     type: Boolean,
     default: false,
-  },
+  }, // 是否多选
-  // 上级品类的编号
   parentId: {
     type: Number,
     default: undefined,
-  },
+  }, // 上级品类的编号
 });
 
 /** 分类选择 */
 const emit = defineEmits(['update:modelValue']);
 
+const categoryList = ref<any[]>([]); // 分类树
+
 /** 选中的分类 ID */
 const selectCategoryId = computed({
   get: () => {
@@ -42,7 +41,6 @@ const selectCategoryId = computed({
 });
 
 /** 初始化 */
-const categoryList = ref<any[]>([]); // 分类树
 onMounted(async () => {
   const data = await getCategoryList({
     parentId: props.parentId,

apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue

@@ -3,7 +3,7 @@ import { ref, watch } from 'vue';
 
 import { Button, Input } from 'ant-design-vue';
 
-import AppLinkSelectDialog from './app-link-select-dialog.vue';
+import AppLinkSelectDialog from './select-dialog.vue';
 
 /** APP 链接输入框 */
 defineOptions({ name: 'AppLinkInput' });
@@ -56,5 +56,6 @@ watch(
       </Button>
     </template>
   </Input>
+
   <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
 </template>

apps/web-antd/src/views/mall/promotion/components/app-link-input/select-dialog.vue

@@ -3,11 +3,12 @@ import type { AppLink } from './data';
 
 import { nextTick, ref } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { getUrlNumberValue } from '@vben/utils';
 
-import { Button, Form, FormItem, Modal, Tooltip } from 'ant-design-vue';
+import { Button, Form, FormItem, Tooltip } from 'ant-design-vue';
 
-import ProductCategorySelect from '#/views/mall/product/category/components/product-category-select.vue';
+import { ProductCategorySelect } from '#/views/mall/product/category/components/';
 
 import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM } from './data';
 
@@ -30,21 +31,31 @@ const groupBtnRefs = ref<HTMLButtonElement[]>([]); // 分组引用列表
 const detailSelectDialog = ref<{
   id?: number;
   type?: APP_LINK_TYPE_ENUM;
-  visible: boolean;
 }>({
-  visible: false,
   id: undefined,
   type: undefined,
 }); // 详情选择对话框
 
-const dialogVisible = ref(false);
+const [Modal, modalApi] = useVbenModal({
+  onConfirm() {
+    emit('change', activeAppLink.value.path);
+    emit('appLinkChange', activeAppLink.value);
+    modalApi.close();
+  },
+});
+
+const [DetailSelectModal, detailSelectModalApi] = useVbenModal({
+  onConfirm() {
+    detailSelectModalApi.close();
+  },
+});
 
 defineExpose({ open });
 
 /** 打开弹窗 */
 async function open(link: string) {
   activeAppLink.value.path = link;
-  dialogVisible.value = true;
+  modalApi.open();
   // 滚动到当前的链接
   const group = APP_LINK_GROUP_LIST.find((group) =>
     group.links.some((linkItem) => {
@@ -76,7 +87,7 @@ function handleAppLinkSelected(appLink: AppLink) {
           'id',
           `http://127.0.0.1${activeAppLink.value.path}`,
         ) || undefined;
-      detailSelectDialog.value.visible = true;
+      detailSelectModalApi.open();
       break;
     }
     default: {
@@ -85,13 +96,6 @@ function handleAppLinkSelected(appLink: AppLink) {
   }
 }
 
-/** 处理确认提交 */
-function handleSubmit() {
-  emit('change', activeAppLink.value.path);
-  emit('appLinkChange', activeAppLink.value);
-  dialogVisible.value = false;
-}
-
 /**
  * 处理右侧链接列表滚动
  *
@@ -138,7 +142,7 @@ function scrollToGroupBtn(group: string) {
 
 /** 是否为相同的链接（不比较参数，只比较链接） */
 function isSameLink(link1: string, link2: string) {
-  return link2 ? link1.split('?')[0] === link2.split('?')[0] : false;
+  return link2 ? link1?.split('?')[0] === link2.split('?')[0] : false;
 }
 
 /** 处理详情选择 */
@@ -149,17 +153,12 @@ function handleProductCategorySelected(id: number) {
   activeAppLink.value.path = `${url.pathname}${url.search}`;
 
   // 关闭对话框，并重置 id
-  detailSelectDialog.value.visible = false;
+  detailSelectModalApi.close();
   detailSelectDialog.value.id = undefined;
 }
 </script>
 <template>
-  <Modal
+  <Modal title="选择链接" class="w-[65%]">
-    v-model:open="dialogVisible"
-    title="选择链接"
-    width="65%"
-    @ok="handleSubmit"
-  >
     <div class="flex h-[500px] gap-2">
       <!-- 左侧分组列表 -->
       <div
@@ -218,7 +217,7 @@ function handleProductCategorySelected(id: number) {
     </div>
   </Modal>
 
-  <Modal v-model:open="detailSelectDialog.visible" title="选择分类" width="65%">
+  <DetailSelectModal title="选择分类" class="w-[65%]">
     <Form class="min-h-[200px]">
       <FormItem
         label="选择分类"
@@ -233,11 +232,5 @@ function handleProductCategorySelected(id: number) {
         />
       </FormItem>
     </Form>
-  </Modal>
+  </DetailSelectModal>
 </template>
-
-<style lang="scss" scoped>
-:deep(.ant-btn + .ant-btn) {
-  margin-left: 0 !important;
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue

@@ -133,6 +133,7 @@ function handleSliderChange(prop: string) {
     </TabPane>
 
     <!-- 每个组件的通用内容 -->
+    <!-- TODO @xingyu：这里的样式，貌似没 ele 版本的好看。 -->
     <TabPane tab="样式" key="style" force-render>
       <p class="text-lg font-bold">组件样式：</p>
       <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
@@ -159,6 +160,7 @@ function handleSliderChange(prop: string) {
               <template #tip>建议宽度 750px</template>
             </UploadImg>
           </FormItem>
+          <!-- TODO @xingyu：没完全对齐 -->
           <Tree :tree-data="treeData" default-expand-all :block-node="true">
             <template #title="{ dataRef }">
               <FormItem

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue

@@ -49,6 +49,7 @@ const emits = defineEmits<{
 type DiyComponentWithStyle = DiyComponent<any> & {
   property: { style?: ComponentStyle };
 };
+
 /** 组件样式 */
 const style = computed(() => {
   const componentStyle = props.component.property.style;
@@ -108,6 +109,8 @@ const handleDeleteComponent = () => {
         class="component-toolbar"
         v-if="showToolbar && component.name && active"
       >
+        <!-- TODO @xingyu：按钮少的时候，会存在遮住的情况； -->
+        <!-- TODO @xingyu：貌似中间的选中框框，没全部框柱。上面多了点，下面少了点。 -->
         <VerticalButtonGroup size="small">
           <Button
             :disabled="!canMoveUp"

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue

@@ -19,6 +19,7 @@ const props = defineProps<{
   list: DiyComponentLibrary[];
 }>();
 
+// TODO @xingyu：要不要换成 reactive，和 ele 一致
 const groups = ref<any[]>([]); // 组件分组
 const extendGroups = ref<string[]>([]); // 展开的折叠面板
 
@@ -99,4 +100,5 @@ function handleCloneComponent(component: DiyComponent<any>) {
       </Collapse.Panel>
     </Collapse>
   </div>
+  <!-- TODO @xingyu：ele 里面有一些 style，看看是不是都迁移完了；特别是 drag-area 是全局样式； -->
 </template>

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

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { CarouselProperty } from './config';
-
-import { ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { Carousel, Image } from 'ant-design-vue';
-
-/** 轮播图 */
-defineOptions({ name: 'Carousel' });
-
-defineProps<{ property: CarouselProperty }>();
-
-const currentIndex = ref(0);
-const handleIndexChange = (index: number) => {
-  currentIndex.value = index + 1;
-};
-</script>
-<template>
-  <div>
-    <!-- 无图片 -->
-    <div
-      class="bg-card flex h-64 items-center justify-center"
-      v-if="property.items.length === 0"
-    >
-      <IconifyIcon icon="tdesign:image" class="size-6 text-gray-800" />
-    </div>
-    <div v-else class="relative">
-      <Carousel
-        :autoplay="property.autoplay"
-        :autoplay-speed="property.interval * 1000"
-        :dots="property.indicator !== 'number'"
-        @change="handleIndexChange"
-        class="h-44"
-      >
-        <div v-for="(item, index) in property.items" :key="index">
-          <Image
-            class="h-full w-full object-cover"
-            :src="item.imgUrl"
-            :preview="false"
-          />
-        </div>
-      </Carousel>
-      <div
-        v-if="property.indicator === 'number'"
-        class="absolute bottom-2.5 right-2.5 rounded-xl bg-black px-2 py-1 text-xs text-white opacity-40"
-      >
-        {{ currentIndex }} / {{ property.items.length }}
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { CarouselProperty } from './config';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Carousel, Image } from 'ant-design-vue';
+
+/** 轮播图 */
+defineOptions({ name: 'Carousel' });
+
+defineProps<{ property: CarouselProperty }>();
+
+const currentIndex = ref(0); // 当前索引
+
+/** 处理索引变化 */
+const handleIndexChange = (index: number) => {
+  currentIndex.value = index + 1;
+};
+</script>
+<template>
+  <!-- 无图片 -->
+  <div
+    class="bg-card flex h-64 items-center justify-center"
+    v-if="property.items.length === 0"
+  >
+    <IconifyIcon icon="tdesign:image" class="size-6 text-gray-800" />
+  </div>
+  <div v-else class="relative">
+    <Carousel
+      :autoplay="property.autoplay"
+      :autoplay-speed="property.interval * 1000"
+      :dots="property.indicator !== 'number'"
+      @change="handleIndexChange"
+      class="h-44"
+    >
+      <div v-for="(item, index) in property.items" :key="index">
+        <Image
+          class="h-full w-full object-cover"
+          :src="item.imgUrl"
+          :preview="false"
+        />
+      </div>
+    </Carousel>
+    <div
+      v-if="property.indicator === 'number'"
+      class="absolute bottom-2.5 right-2.5 rounded-xl bg-black px-2 py-1 text-xs text-white opacity-40"
+    >
+      {{ currentIndex }} / {{ property.items.length }}
+    </div>
+  </div>
+</template>

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

@@ -21,11 +21,13 @@ import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 轮播图属性面板
+/** 轮播图属性面板 */
 defineOptions({ name: 'CarouselProperty' });
 
 const props = defineProps<{ modelValue: CarouselProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 

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

@@ -11,7 +11,6 @@ defineOptions({ name: 'ImageBar' });
 defineProps<{ property: ImageBarProperty }>();
 </script>
 <template>
-  <!-- 无图片 -->
   <div
     class="bg-card flex h-12 items-center justify-center"
     v-if="!property.imgUrl"

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

@@ -9,11 +9,13 @@ import { AppLinkInput } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 图片展示属性面板
+/** 图片展示属性面板 */
 defineOptions({ name: 'ImageBarProperty' });
 
 const props = defineProps<{ modelValue: ImageBarProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 

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

@@ -8,21 +8,17 @@ import { Image } from 'ant-design-vue';
 /** 菜单导航 */
 defineOptions({ name: 'MenuSwiper' });
 const props = defineProps<{ property: MenuSwiperProperty }>();
-// 标题的高度
-const TITLE_HEIGHT = 20;
-// 图标的高度
-const ICON_SIZE = 32;
-// 垂直间距：一行上下的间距
-const SPACE_Y = 16;
 
-// 分页
+const TITLE_HEIGHT = 20; // 标题的高度
-const pages = ref<MenuSwiperItemProperty[][]>([]);
+const ICON_SIZE = 32; // 图标的高度
-// 轮播图高度
+const SPACE_Y = 16; // 垂直间距：一行上下的间距
-const carouselHeight = ref(0);
+
-// 行高
+const pages = ref<MenuSwiperItemProperty[][]>([]); // 分页
-const rowHeight = ref(0);
+const carouselHeight = ref(0); // 轮播图高度
-// 列宽
+
-const columnWidth = ref('');
+const rowHeight = ref(0); // 行高
+const columnWidth = ref(''); // 列宽
+
 watch(
   () => props.property,
   () => {

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

@@ -13,10 +13,11 @@ import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品卡片 */
 defineOptions({ name: 'ProductCard' });
-// 定义属性
+
 const props = defineProps<{ property: ProductCardProperty }>();
-// 商品列表
+
-const spuList = ref<MallSpuApi.Spu[]>([]);
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
+
 watch(
   () => props.property.spuIds,
   async () => {
@@ -28,28 +29,21 @@ watch(
   },
 );
 
-/**
+/** 计算商品的间距 */
- * 计算商品的间距
- * @param index 商品索引
- */
 function calculateSpace(index: number) {
-  // 商品的列数
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
-  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`; // 第一行没有上边距
-  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();
+
-// 计算商品的宽度
+/** 计算商品的宽度 */
 function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
@@ -61,7 +55,7 @@ function calculateWidth() {
     ref="containerRef"
   >
     <div
-      class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
+      class="relative box-content flex flex-row flex-wrap overflow-hidden"
       :style="{
         ...calculateSpace(index),
         ...calculateWidth(),

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

@@ -13,10 +13,11 @@ import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品栏 */
 defineOptions({ name: 'ProductList' });
-// 定义属性
+
 const props = defineProps<{ property: ProductListProperty }>();
-// 商品列表
+
 const spuList = ref<MallSpuApi.Spu[]>([]);
+
 watch(
   () => props.property.spuIds,
   async () => {
@@ -27,19 +28,15 @@ watch(
     deep: true,
   },
 );
-// 手机宽度
+
-const phoneWidth = ref(384);
+const phoneWidth = ref(375); // 手机宽度
-// 容器
+const containerRef = ref(); // 容器
-const containerRef = ref();
+const columns = ref(2); // 商品的列数
-// 商品的列数
+const scrollbarWidth = ref('100%'); // 滚动条宽度
-const columns = ref(2);
+const imageSize = ref('0'); // 商品图大小
-// 滚动条宽度
+const gridTemplateColumns = ref(''); // 商品网络列数
-const scrollbarWidth = ref('100%');
+
-// 商品图大小
+/** 计算布局参数 */
-const imageSize = ref('0');
-// 商品网络列数
-const gridTemplateColumns = ref('');
-// 计算布局参数
 watch(
   () => [props.property, phoneWidth, spuList.value.length],
   () => {
@@ -69,9 +66,10 @@ watch(
   },
   { immediate: true, deep: true },
 );
+
+/** 初始化 */
 onMounted(() => {
-  // 提取手机宽度
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
 });
 </script>
 <template>
@@ -146,5 +144,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -17,17 +17,18 @@ import {
 } from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
-import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
+import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
-// TODO: 添加组件
-// import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 
-// 商品栏属性面板
+/** 商品栏属性面板 */
 defineOptions({ name: 'ProductListProperty' });
 
 const props = defineProps<{ modelValue: ProductListProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -39,7 +40,7 @@ const formData = useVModel(props, 'modelValue', emit);
       :model="formData"
     >
       <Card title="商品列表" class="property-group" :bordered="false">
-        <!-- <SpuShowcase v-model="formData.spuIds" /> -->
+        <SpuShowcase v-model="formData.spuIds" />
       </Card>
       <Card title="商品样式" class="property-group" :bordered="false">
         <FormItem label="布局" prop="type">
@@ -117,5 +118,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -15,10 +15,9 @@ import { getSeckillActivityListByIds } from '#/api/mall/promotion/seckill/seckil
 
 /** 秒杀卡片 */
 defineOptions({ name: 'PromotionSeckill' });
-// 定义属性
 const props = defineProps<{ property: PromotionSeckillProperty }>();
-// 商品列表
+
-const spuList = ref<MallSpuApi.Spu[]>([]);
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const seckillActivityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
 
@@ -66,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/components/diy-editor/components/mobile/promotion-seckill/property.vue

@@ -19,8 +19,7 @@ import {
 
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
-// TODO: 添加组件
+import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
-// import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 

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

@@ -5,19 +5,19 @@ import { IconifyIcon } from '@vben/icons';
 
 /** 搜索框 */
 defineOptions({ name: 'SearchBar' });
+
 defineProps<{ property: SearchProperty }>();
 </script>
 
 <template>
   <div
-    class="search-bar"
     :style="{
       color: property.textColor,
     }"
   >
     <!-- 搜索框 -->
     <div
-      class="inner"
+      class="relative flex min-h-7 items-center text-sm"
       :style="{
         height: `${property.height}px`,
         background: property.backgroundColor,
@@ -25,7 +25,7 @@ defineProps<{ property: SearchProperty }>();
       }"
     >
       <div
-        class="placeholder"
+        class="flex w-full items-center gap-0.5 overflow-hidden text-ellipsis whitespace-nowrap break-all px-2"
         :style="{
           justifyContent: property.placeholderPosition,
         }"
@@ -33,7 +33,7 @@ defineProps<{ property: SearchProperty }>();
         <IconifyIcon icon="lucide:search" />
         <span>{{ property.placeholder || '搜索商品' }}</span>
       </div>
-      <div class="right">
+      <div class="absolute right-2 flex items-center justify-center gap-2">
         <!-- 搜索热词 -->
         <span v-for="(keyword, index) in property.hotKeywords" :key="index">
           {{ keyword }}
@@ -44,37 +44,3 @@ defineProps<{ property: SearchProperty }>();
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.search-bar {
-  /* 搜索框 */
-  .inner {
-    position: relative;
-    display: flex;
-    align-items: center;
-    min-height: 28px;
-    font-size: 14px;
-
-    .placeholder {
-      display: flex;
-      gap: 2px;
-      align-items: center;
-      width: 100%;
-      padding: 0 8px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: break-all;
-      white-space: nowrap;
-    }
-
-    .right {
-      position: absolute;
-      right: 8px;
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-</style>

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

@@ -11,9 +11,9 @@ defineOptions({ name: 'TabBar' });
 defineProps<{ property: TabBarProperty }>();
 </script>
 <template>
-  <div class="tab-bar">
+  <div class="z-[2] w-full">
     <div
-      class="tab-bar-bg"
+      class="flex flex-row items-center justify-around py-2"
       :style="{
         background:
           property.style.bgType === 'color'
@@ -26,12 +26,18 @@ defineProps<{ property: TabBarProperty }>();
       <div
         v-for="(item, index) in property.items"
         :key="index"
-        class="tab-bar-item"
+        class="flex w-full flex-col items-center justify-center text-xs"
+      >
+        <Image
+          :src="index === 0 ? item.activeIconUrl : item.iconUrl"
+          class="!h-[26px] w-[26px] rounded"
         >
-        <Image :src="index === 0 ? item.activeIconUrl : item.iconUrl">
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
-              <IconifyIcon icon="lucide:image" />
+              <IconifyIcon
+                icon="lucide:image"
+                class="h-[26px] w-[26px] rounded"
+              />
             </div>
           </template>
         </Image>
@@ -47,33 +53,3 @@ defineProps<{ property: TabBarProperty }>();
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-.tab-bar {
-  z-index: 2;
-  width: 100%;
-
-  .tab-bar-bg {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    padding: 8px 0;
-
-    .tab-bar-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      font-size: 12px;
-
-      :deep(img),
-      .el-icon {
-        width: 26px;
-        height: 26px;
-        border-radius: 4px;
-      }
-    }
-  }
-}
-</style>

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

@@ -22,7 +22,8 @@ import {
 } from '#/views/mall/promotion/components';
 
 import { component, THEME_LIST } from './config';
-// 底部导航栏
+
+/** 底部导航栏 */
 defineOptions({ name: 'TabBarProperty' });
 
 const props = defineProps<{ modelValue: TabBarProperty }>();
@@ -32,7 +33,7 @@ const formData = useVModel(props, 'modelValue', emit);
 // 将数据库的值更新到右侧属性栏
 component.property.items = formData.value.items;
 
-// 要的主题
+/** 处理主题变更 */
 const handleThemeChange = () => {
   const theme = THEME_LIST.find((theme) => theme.id === formData.value.theme);
   if (theme?.color) {
@@ -42,7 +43,7 @@ const handleThemeChange = () => {
 </script>
 
 <template>
-  <div class="tab-bar">
+  <div>
     <!-- 表单 -->
     <Form
       :model="formData"
@@ -142,5 +143,3 @@ const handleThemeChange = () => {
     </Form>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

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

@@ -11,7 +11,10 @@ defineOptions({ name: 'TitleBar' });
 defineProps<{ property: TitleBarProperty }>();
 </script>
 <template>
-  <div class="title-bar" :style="{ height: `${property.height}px` }">
+  <div
+    class="relative box-border min-h-[20px] w-full"
+    :style="{ height: `${property.height}px` }"
+  >
     <Image
       v-if="property.bgImgUrl"
       :src="property.bgImgUrl"
@@ -51,7 +54,7 @@ defineProps<{ property: TitleBarProperty }>();
     </div>
     <!-- 更多 -->
     <div
-      class="more"
+      class="absolute bottom-0 right-2 top-0 m-auto flex items-center justify-center text-[10px] text-[#969799]"
       v-show="property.more.show"
       :style="{
         color: property.descriptionColor,
@@ -67,25 +70,3 @@ defineProps<{ property: TitleBarProperty }>();
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-.title-bar {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 20px;
-
-  /* 更多 */
-  .more {
-    position: absolute;
-    top: 0;
-    right: 8px;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: auto;
-    font-size: 10px;
-    color: #969799;
-  }
-}
-</style>

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

@@ -5,11 +5,13 @@ import { useVModel } from '@vueuse/core';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 用户卡片属性面板
+/** 用户卡片属性面板 */
 defineOptions({ name: 'UserCardProperty' });
 
 const props = defineProps<{ modelValue: UserCardProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts

@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡券属性 */
 export interface UserCouponProperty {
-  // 组件样式
+  style: ComponentStyle; // 组件样式
-  style: ComponentStyle;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserCoupon',
   name: '用户卡券',

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

@@ -5,7 +5,8 @@ import { Image } from 'ant-design-vue';
 
 /** 用户订单 */
 defineOptions({ name: 'UserOrder' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserOrderProperty }>();
 </script>
 <template>

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

@@ -5,11 +5,13 @@ import { useVModel } from '@vueuse/core';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 用户订单属性面板
+/** 用户订单属性面板 */
 defineOptions({ name: 'UserOrderProperty' });
 
 const props = defineProps<{ modelValue: UserOrderProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 

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

@@ -5,7 +5,8 @@ import { Image } from 'ant-design-vue';
 
 /** 用户资产 */
 defineOptions({ name: 'UserWallet' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserWalletProperty }>();
 </script>
 <template>

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

@@ -5,11 +5,13 @@ import { useVModel } from '@vueuse/core';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 用户资产属性面板
+/** 用户资产属性面板 */
 defineOptions({ name: 'UserWalletProperty' });
 
 const props = defineProps<{ modelValue: UserWalletProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 

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

@@ -9,11 +9,13 @@ import UploadImg from '#/components/upload/image-upload.vue';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 视频播放属性面板
+/** 视频播放属性面板 */
 defineOptions({ name: 'VideoPlayerProperty' });
 
 const props = defineProps<{ modelValue: VideoPlayerProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 

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

@@ -38,6 +38,12 @@ const props = defineProps({
 
 const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏操作
 
+// TODO @xingyu：要不要加这个？
+// const qrcode = useQRCode(props.previewUrl, {
+//   errorCorrectionLevel: 'H',
+//   margin: 4,
+// }); // 预览二维码
+
 const componentLibrary = ref(); // 左侧组件库
 const pageConfigComponent = ref<DiyComponent<any>>(
   cloneDeep(PAGE_CONFIG_COMPONENT),
@@ -169,6 +175,7 @@ function handleComponentSelected(
   index: number = -1,
 ) {
   // 使用深拷贝避免响应式追踪循环警告
+  // TODO @xingyu：这个是必须的么？ele 没有哈。
   selectedComponent.value = cloneDeep(component);
   selectedComponentIndex.value = index;
 }
@@ -501,4 +508,5 @@ onMounted(() => {
       </div>
     </PreviewModal>
   </Page>
+  <!-- TODO @xingyu：这里改造完后，类似 web-ele/src/views/mall/promotion/components/diy-editor/index.vue 里的全局样式（递推到子组件）里的就没没了，类似 property-group -->
 </template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts

@@ -27,14 +27,11 @@ export interface DiyComponentLibrary {
   components: string[]; // 组件列表
 }
 
-// 组件样式
+/** 组件样式 */
 export interface ComponentStyle {
-  // 背景类型
+  bgType: 'color' | 'img'; // 背景类型
-  bgType: 'color' | 'img';
+  bgColor: string; // 背景颜色
-  // 背景颜色
+  bgImg: string; // 背景图片
-  bgColor: string;
-  // 背景图片
-  bgImg: string;
   // 外边距
   margin: number;
   marginTop: number;

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

@@ -66,10 +66,11 @@ const handleDelete = function (index: number) {
               class="drag-icon cursor-move text-gray-500"
             />
           </Tooltip>
-          <Tooltip v-if="formData.length > min" title="删除">
+          <Tooltip title="删除">
             <IconifyIcon
-              icon="lucide:trash-2"
+              icon="ep:delete"
-              class="cursor-pointer text-red-500 hover:text-red-600"
+              class="cursor-pointer text-red-500"
+              v-if="formData.length > min"
               @click="handleDelete(index)"
             />
           </Tooltip>
@@ -79,11 +80,7 @@ const handleDelete = function (index: number) {
       </div>
     </template>
   </VueDraggable>
-  <Tooltip
+  <Tooltip :title="limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined">
-    :title="
-      limit > 0 && limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined
-    "
-  >
     <Button
       type="primary"
       ghost
@@ -98,5 +95,3 @@ const handleDelete = function (index: number) {
     </Button>
   </Tooltip>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue

@@ -29,7 +29,6 @@ const props = defineProps({
     type: Number,
     default: 4,
   }, // 行数，默认 4 行
-
   cols: {
     type: Number,
     default: 4,
@@ -167,9 +166,7 @@ function handleHotAreaSelected(hotArea: Rect, index: number) {
   emit('hotAreaSelected', hotArea, index);
 }
 
-/**
+/** 结束热区选择模式 */
- * 结束热区选择模式
- */
 function exitHotAreaSelectMode() {
   // 移除方块激活标记
   eachCube((_, __, cube) => {

apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { Space } from 'ant-design-vue';
+
+// TODO @芋艿、@xingyu：貌似上下移动的按钮，被遮住了！
 /**
  * 垂直按钮组
- * Ant Design Vue 的按钮组只支持水平显示，通过重写样式实现垂直布局
+ * Ant Design Vue 的按钮组，通过 Space 实现垂直布局
  */
 defineOptions({ name: 'VerticalButtonGroup' });
 </script>

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

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

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

@@ -0,0 +1,148 @@
+<!-- 秒杀活动橱窗组件：用于展示和选择秒杀活动 -->
+<script lang="ts" setup>
+import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Image, Tooltip } from 'ant-design-vue';
+
+import { getSeckillActivityListByIds } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import SeckillTableSelect from './table-select.vue';
+
+interface SeckillShowcaseProps {
+  modelValue?: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<SeckillShowcaseProps>(), {
+  modelValue: undefined,
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const activityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]); // 已选择的活动列表
+const seckillTableSelectRef = ref<InstanceType<typeof SeckillTableSelect>>(); // 活动选择表格组件引用
+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 getSeckillActivityListByIds(ids as number[]);
+    }
+  },
+  { immediate: true },
+);
+
+/** 打开活动选择对话框 */
+function handleOpenActivitySelect() {
+  seckillTableSelectRef.value?.open(activityList.value);
+}
+
+/** 选择活动后触发 */
+function handleActivitySelected(
+  activities:
+    | MallSeckillActivityApi.SeckillActivity
+    | MallSeckillActivityApi.SeckillActivity[],
+) {
+  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="relative h-[60px] w-[60px] overflow-hidden rounded-lg border border-dashed border-gray-300"
+    >
+      <Tooltip :title="activity.name">
+        <div class="relative h-full w-full">
+          <Image
+            :preview="true"
+            :src="activity.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+          />
+          <!-- 删除按钮 -->
+          <!-- TODO @芋艿：等待和 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue 进一步统一 -->
+          <IconifyIcon
+            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)"
+          />
+        </div>
+      </Tooltip>
+    </div>
+
+    <!-- 添加活动按钮 -->
+    <Tooltip v-if="canAdd" title="选择活动">
+      <div
+        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
+        @click="handleOpenActivitySelect"
+      >
+        <!-- TODO @芋艿：等待和 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue 进一步统一 -->
+        <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
+      </div>
+    </Tooltip>
+  </div>
+
+  <!-- 活动选择对话框 -->
+  <SeckillTableSelect
+    ref="seckillTableSelectRef"
+    :multiple="isMultiple"
+    @change="handleActivitySelected"
+  />
+</template>

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

@@ -0,0 +1,277 @@
+<!-- 秒杀活动选择弹窗组件 -->
+<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 { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+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 { getSeckillActivityPage } from '#/api/mall/promotion/seckill/seckillActivity';
+
+interface SeckillTableSelectProps {
+  multiple?: boolean; // 是否多选：true - checkbox；false - radio
+}
+
+const props = withDefaults(defineProps<SeckillTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [
+    activity:
+      | MallSeckillActivityApi.SeckillActivity
+      | MallSeckillActivityApi.SeckillActivity[],
+  ];
+}>();
+
+const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
+const categoryTreeList = ref<any[]>([]); // 分类树
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow =
+    gridApi.grid.getRadioRecord() as MallSeckillActivityApi.SeckillActivity;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+/**
+ * 格式化秒杀价格
+ * @param products
+ */
+const formatSeckillPrice = (
+  products: MallSeckillActivityApi.SeckillProduct[],
+) => {
+  if (!products || products.length === 0) return '-';
+  const seckillPrice = Math.min(
+    ...products.map((item) => item.seckillPrice || 0),
+  );
+  return `￥${fenToYuan(seckillPrice)}`;
+};
+
+/** 搜索表单 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,
+      align: 'center',
+    },
+    {
+      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,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 300,
+    },
+    {
+      field: 'marketPrice',
+      title: '原价',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return cellValue ? `￥${fenToYuan(cellValue)}` : '-';
+      },
+    },
+    {
+      field: 'products',
+      title: '秒杀价',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return formatSeckillPrice(cellValue);
+      },
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      align: 'center',
+      cellRender: {
+        name: 'CellDatetime',
+      },
+    },
+  );
+  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 getSeckillActivityPage({
+            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 MallSeckillActivityApi.SeckillActivity[];
+    emit('change', selectedRows);
+    modalApi.close();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      await gridApi.grid.clearCheckboxRow();
+      await gridApi.grid.clearRadioRow();
+      return;
+    }
+
+    // 1. 先查询数据
+    await gridApi.query();
+    // 2. 设置已选中行
+    const data = modalApi.getData<
+      | MallSeckillActivityApi.SeckillActivity
+      | MallSeckillActivityApi.SeckillActivity[]
+    >();
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((activity) => {
+          const row = tableData.find(
+            (item: MallSeckillActivityApi.SeckillActivity) =>
+              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: MallSeckillActivityApi.SeckillActivity) => item.id === data.id,
+        );
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (
+    data?:
+      | MallSeckillActivityApi.SeckillActivity
+      | MallSeckillActivityApi.SeckillActivity[],
+  ) => {
+    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-ele/src/views/mall/product/category/components/index.ts

@@ -1 +1 @@
-export { default as ProductCategorySelect } from './category-select.vue';
+export { default as ProductCategorySelect } from './select.vue';

apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// TODO @AI：一些 modal 是否使用 Modal 组件，而不是 el-modal？
 import { ref, watch } from 'vue';
 
 import { ElButton, ElInput } from 'element-plus';

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue

@@ -27,7 +27,7 @@ const props = defineProps<{ modelValue: ComponentStyle }>();
 const emit = defineEmits(['update:modelValue']);
 const formData = useVModel(props, 'modelValue', emit);
 
-const treeData = [
+const treeData: any[] = [
   {
     label: '外部边距',
     prop: 'margin',
@@ -96,7 +96,7 @@ const treeData = [
   },
 ];
 
-const handleSliderChange = (prop: string) => {
+function handleSliderChange(prop: string) {
   switch (prop) {
     case 'borderRadius': {
       formData.value.borderTopLeftRadius = formData.value.borderRadius;
@@ -120,7 +120,7 @@ const handleSliderChange = (prop: string) => {
       break;
     }
   }
-};
+}
 </script>
 
 <template>

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue

@@ -53,11 +53,11 @@ watch(
 );
 
 /** 克隆组件 */
-const handleCloneComponent = (component: DiyComponent<any>) => {
+function handleCloneComponent(component: DiyComponent<any>) {
   const instance = cloneDeep(component);
   instance.uid = Date.now();
   return instance;
-};
+}
 </script>
 
 <template>

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

@@ -24,7 +24,7 @@ import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 轮播图属性面板
+/** 轮播图属性面板 */
 defineOptions({ name: 'CarouselProperty' });
 
 const props = defineProps<{ modelValue: CarouselProperty }>();

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

@@ -11,7 +11,7 @@ export interface ImageBarProperty {
 export const component = {
   id: 'ImageBar',
   name: '图片展示',
-  icon: 'ep:picture',
+  icon: 'lucide:image',
   property: {
     imgUrl: '',
     url: '',

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

@@ -13,7 +13,9 @@ import ComponentContainerProperty from '../../component-container-property.vue';
 defineOptions({ name: 'ImageBarProperty' });
 
 const props = defineProps<{ modelValue: ImageBarProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 

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

@@ -1,32 +1,25 @@
-import { defineAsyncComponent } from 'vue';
+/**
-
-/*
  * 组件注册
  *
- * 组件规范：
+ * 组件规范：每个子目录就是一个独立的组件，每个目录包括以下三个文件：
- * 1. 每个子目录就是一个独立的组件，每个目录包括以下三个文件：
+ *  1. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型
- * 2. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型
+ *  2. index.vue：组件展示，用于展示组件的渲染效果。可以不提供，如 Page（页面设置），只需要属性配置表单即可
- * 3. index.vue：组件展示，用于展示组件的渲染效果。可以不提供，如 Page（页面设置），只需要属性配置表单即可
+ *  3. property.vue：组件属性表单，用于配置组件，必选，
- * 4. property.vue：组件属性表单，用于配置组件，必选，
  *
  * 注：
  * 组件 ID 以 config.ts 中配置的 id 为准，与组件目录的名称无关，但还是建议组件目录的名称与组件 ID 保持一致
  */
+import { defineAsyncComponent } from 'vue';
 
-// 导入组件界面模块
+const viewModules: Record<string, any> = import.meta.glob('./*/*.vue'); // 导入组件界面模块
-const viewModules: Record<string, any> = import.meta.glob('./*/*.vue');
-// 导入配置模块
 const configModules: Record<string, any> = import.meta.glob('./*/config.ts', {
   eager: true,
-});
+}); // 导入配置模块
 
-// 界面模块
+const components: Record<string, any> = {}; // 界面模块
-const components: Record<string, any> = {};
+const componentConfigs: Record<string, any> = {}; // 组件配置模块
-// 组件配置模块
-const componentConfigs: Record<string, any> = {};
 
-// 组件界面的类型
+type ViewType = 'index' | 'property'; // 组件界面的类型
-type ViewType = 'index' | 'property';
 
 /**
  * 注册组件的界面模块

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

@@ -11,7 +11,7 @@ export interface PageConfigProperty {
 export const component = {
   id: 'PageConfig',
   name: '页面设置',
-  icon: 'ep:document',
+  icon: 'lucide:file-text',
   property: {
     description: '',
     backgroundColor: '#f5f5f5',

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

@@ -39,7 +39,7 @@ export interface ProductCardFieldProperty {
 export const component = {
   id: 'ProductCard',
   name: '商品卡片',
-  icon: 'fluent:text-column-two-left-24-filled',
+  icon: 'lucide:grid-3x3',
   property: {
     layoutType: 'oneColBigImg',
     fields: {

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

@@ -9,19 +9,19 @@ 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';
 
 /** 商品卡片 */
 defineOptions({ name: 'ProductCard' });
 
 const props = defineProps<{ property: ProductCardProperty }>();
 
-const spuList = ref<MallSpuApi.Spu[]>([]);
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
 
 watch(
   () => props.property.spuIds,
   async () => {
-    spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds);
+    spuList.value = await getSpuDetailList(props.property.spuIds);
   },
   {
     immediate: true,
@@ -37,17 +37,17 @@ function calculateSpace(index: number) {
   return { marginLeft, marginTop };
 }
 
-const containerRef = ref();
+const containerRef = ref(); // 容器
 
 /** 计算商品的宽度 */
-const calculateWidth = () => {
+function calculateWidth() {
   let width = '100%';
   if (props.property.layoutType === 'twoCol') {
     // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div

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

@@ -9,7 +9,7 @@ import { fenToYuan } from '@vben/utils';
 
 import { ElImage, ElScrollbar } from 'element-plus';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
+import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品栏 */
 defineOptions({ name: 'ProductList' });
@@ -21,7 +21,7 @@ const spuList = ref<MallSpuApi.Spu[]>([]);
 watch(
   () => props.property.spuIds,
   async () => {
-    spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds);
+    spuList.value = await getSpuDetailList(props.property.spuIds);
   },
   {
     immediate: true,

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/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 SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
+import { getSeckillActivityListByIds } from '#/api/mall/promotion/seckill/seckillActivity';
 
 /** 秒杀卡片 */
 defineOptions({ name: 'PromotionSeckill' });
@@ -31,7 +31,7 @@ watch(
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取秒杀活动详情列表
         seckillActivityList.value =
-          await SeckillActivityApi.getSeckillActivityListByIds(activityIds);
+          await getSeckillActivityListByIds(activityIds);
 
         // 获取秒杀活动的 SPU 详情列表
         spuList.value = [];
@@ -39,7 +39,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 的最低价格
@@ -73,7 +73,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/search-bar/config.ts

@@ -20,7 +20,7 @@ export type PlaceholderPosition = 'center' | 'left';
 export const component = {
   id: 'SearchBar',
   name: '搜索框',
-  icon: 'ep:search',
+  icon: 'lucide:search',
   property: {
     height: 28,
     showScan: false,

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

@@ -30,7 +30,7 @@ defineProps<{ property: SearchProperty }>();
           justifyContent: property.placeholderPosition,
         }"
       >
-        <IconifyIcon icon="ep:search" />
+        <IconifyIcon icon="lucide:search" />
         <span>{{ property.placeholder || '搜索商品' }}</span>
       </div>
       <div class="absolute right-2 flex items-center justify-center gap-2">
@@ -39,10 +39,7 @@ defineProps<{ property: SearchProperty }>();
           {{ keyword }}
         </span>
         <!-- 扫一扫 -->
-        <IconifyIcon
+        <IconifyIcon icon="lucide:scan-barcode" v-show="property.showScan" />
-          icon="ant-design:scan-outlined"
-          v-show="property.showScan"
-        />
       </div>
     </div>
   </div>

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

@@ -5,7 +5,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElImage } from 'element-plus';
 
-/** 底部导航 */
+/** 页面底部导航栏 */
 defineOptions({ name: 'TabBar' });
 
 defineProps<{ property: TabBarProperty }>();
@@ -26,7 +26,7 @@ defineProps<{ property: TabBarProperty }>();
       <div
         v-for="(item, index) in property.items"
         :key="index"
-        class="tab-bar-item flex w-full flex-col items-center justify-center text-xs"
+        class="flex w-full flex-col items-center justify-center text-xs"
       >
         <ElImage
           :src="index === 0 ? item.activeIconUrl : item.iconUrl"
@@ -35,7 +35,7 @@ defineProps<{ property: TabBarProperty }>();
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
               <IconifyIcon
-                icon="ep:picture"
+                icon="lucide:image"
                 class="h-[26px] w-[26px] rounded"
               />
             </div>

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

@@ -44,7 +44,7 @@ const handleThemeChange = () => {
 </script>
 
 <template>
-  <div class="tab-bar">
+  <div>
     <ElForm :model="formData" label-width="80px">
       <ElFormItem label="主题" prop="theme">
         <ElSelect v-model="formData!.theme" @change="handleThemeChange">

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

@@ -63,7 +63,10 @@ defineProps<{ property: TitleBarProperty }>();
       <span v-if="property.more.type !== 'icon'">
         {{ property.more.text }}
       </span>
-      <IconifyIcon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
+      <IconifyIcon
+        icon="lucide:arrow-right"
+        v-if="property.more.type !== 'text'"
+      />
     </div>
   </div>
 </template>

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

@@ -2,15 +2,14 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡券属性 */
 export interface UserCouponProperty {
-  // 组件样式
+  style: ComponentStyle; // 组件样式
-  style: ComponentStyle;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserCoupon',
   name: '用户卡券',
-  icon: 'ep:ticket',
+  icon: 'lucide:ticket',
   property: {
     style: {
       bgType: 'color',

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

@@ -9,7 +9,7 @@ export interface UserOrderProperty {
 export const component = {
   id: 'UserOrder',
   name: '用户订单',
-  icon: 'ep:list',
+  icon: 'lucide:clipboard-list',
   property: {
     style: {
       bgType: 'color',

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

@@ -9,7 +9,7 @@ export interface UserWalletProperty {
 export const component = {
   id: 'UserWallet',
   name: '用户资产',
-  icon: 'ep:wallet-filled',
+  icon: 'lucide:wallet',
   property: {
     style: {
       bgType: 'color',

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

@@ -17,7 +17,7 @@ export interface VideoPlayerStyle extends ComponentStyle {
 export const component = {
   id: 'VideoPlayer',
   name: '视频播放',
-  icon: 'ep:video-play',
+  icon: 'lucide:video',
   property: {
     videoUrl: '',
     posterUrl: '',

apps/web-ele/src/views/mall/promotion/components/diy-editor/util.ts

@@ -27,14 +27,11 @@ export interface DiyComponentLibrary {
   components: string[]; // 组件列表
 }
 
-// 组件样式
+/** 组件样式 */
 export interface ComponentStyle {
-  // 背景类型
+  bgType: 'color' | 'img'; // 背景类型
-  bgType: 'color' | 'img';
+  bgColor: string; // 背景颜色
-  // 背景颜色
+  bgImg: string; // 背景图片
-  bgColor: string;
-  // 背景图片
-  bgImg: string;
   // 外边距
   margin: number;
   marginTop: number;

apps/web-ele/src/views/mall/promotion/components/draggable/index.vue

@@ -63,9 +63,8 @@ const handleDelete = function (index: number) {
         >
           <ElTooltip content="拖动排序">
             <IconifyIcon
-              icon="ic:round-drag-indicator"
+              icon="lucide:move"
-              class="drag-icon cursor-move"
+              class="drag-icon cursor-move text-gray-500"
-              style="color: #8a909c"
             />
           </ElTooltip>
           <ElTooltip content="删除">
@@ -90,7 +89,7 @@ const handleDelete = function (index: number) {
       :disabled="limit > 0 && formData.length >= limit"
       @click="handleAdd"
     >
-      <IconifyIcon icon="ep:plus" /><span>添加</span>
+      <IconifyIcon icon="lucide:plus" /><span>添加</span>
     </ElButton>
   </ElTooltip>
 </template>

apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue

@@ -183,7 +183,7 @@ function exitHotAreaSelectMode() {
  * 迭代魔方矩阵
  * @param callback 回调
  */
-const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
+function eachCube(callback: (x: number, y: number, cube: Cube) => void) {
   for (const [x, row] of cubes.value.entries()) {
     if (!row) continue;
     for (const [y, cube] of row.entries()) {
@@ -192,7 +192,7 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
       }
     }
   }
-};
+}
 </script>
 <template>
   <div class="relative">

apps/web-ele/src/views/mall/promotion/seckill/components/showcase.vue

@@ -133,7 +133,7 @@ function emitActivityChange() {
         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"
       >
-        <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
+        <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
       </div>
     </ElTooltip>
   </div>