fix: 冲突

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
-    v-model:open="dialogVisible"
-    title="选择链接"
-    width="65%"
-    @ok="handleSubmit"
-  >
+  <Modal title="选择链接" class="w-[65%]">
     <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,11 +133,16 @@ 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">
         <Form :model="formData">
-          <FormItem label="组件背景" name="bgType">
+          <FormItem
+            label="组件背景"
+            name="bgType"
+            :label-col="{ style: { width: '109px' } }"
+          >
             <RadioGroup v-model:value="formData.bgType">
               <Radio value="color">纯色</Radio>
               <Radio value="img">图片</Radio>
@@ -146,11 +151,17 @@ function handleSliderChange(prop: string) {
           <FormItem
             label="选择颜色"
             name="bgColor"
+            :label-col="{ style: { width: '109px' } }"
             v-if="formData.bgType === 'color'"
           >
             <ColorInput v-model="formData.bgColor" />
           </FormItem>
-          <FormItem label="上传图片" name="bgImg" v-else>
+          <FormItem
+            label="上传图片"
+            name="bgImg"
+            :label-col="{ style: { width: '109px' } }"
+            v-else
+          >
             <UploadImg
               v-model="formData.bgImg"
               :limit="1"
@@ -164,14 +175,13 @@ function handleSliderChange(prop: string) {
               <FormItem
                 :label="dataRef.label"
                 :name="dataRef.prop"
-                :label-col="
-                  dataRef.children ? { span: 6 } : { span: 5, offset: 1 }
-                "
-                :wrapper-col="dataRef.children ? { span: 18 } : { span: 18 }"
+                :label-col="{
+                  style: { width: dataRef.children ? '80px' : '58px' },
+                }"
                 class="mb-0 w-full"
               >
                 <Row>
-                  <Col :span="12">
+                  <Col :span="11">
                     <Slider
                       v-model:value="
                         formData[dataRef.prop as keyof ComponentStyle]
@@ -179,9 +189,10 @@ function handleSliderChange(prop: string) {
                       :max="100"
                       :min="0"
                       @change="handleSliderChange(dataRef.prop)"
+                      class="mr-[16px]"
                     />
                   </Col>
-                  <Col :span="4">
+                  <Col :span="2">
                     <InputNumber
                       :max="100"
                       :min="0"
@@ -200,23 +211,3 @@ function handleSliderChange(prop: string) {
     </TabPane>
   </Tabs>
 </template>
-
-<style scoped lang="scss">
-:deep(.ant-slider) {
-  margin-right: 16px;
-}
-
-:deep(.ant-input-number) {
-  width: 50px;
-}
-
-:deep(.ant-tree) {
-  .ant-tree-node-content-wrapper {
-    flex: 1;
-  }
-
-  .ant-form-item {
-    margin-bottom: 0;
-  }
-}
-</style>

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,56 @@
+<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="flex items-center justify-center bg-gray-300"
+    :style="{
+      height: property.items.length === 0 ? '250px' : `${property.height}px`,
+    }"
+    v-if="property.items.length === 0"
+  >
+    <IconifyIcon icon="tdesign:image" class="text-[120px] text-gray-800" />
+  </div>
+  <div v-else class="relative">
+    <Carousel
+      :autoplay="property.autoplay"
+      :autoplay-speed="property.interval * 1000"
+      :dots="property.indicator !== 'number'"
+      @change="handleIndexChange"
+      :style="{ height: `${property.height}px` }"
+    >
+      <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-[10px] right-[10px] rounded-xl bg-black px-[8px] py-[2px] text-[10px] 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

@@ -7,6 +7,7 @@ import { useVModel } from '@vueuse/core';
 import {
   Form,
   FormItem,
+  InputNumber,
   Radio,
   RadioButton,
   RadioGroup,
@@ -21,51 +22,61 @@ 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>
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form label-width="80px" :model="formData">
+    <Form
+      :model="formData"
+      :label-col="{ style: { width: '80px' } }"
+      label-align="right"
+    >
       <p class="text-base font-bold">样式设置：</p>
       <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
-        <FormItem label="样式" prop="type">
-          <RadioGroup v-model="formData.type">
-            <Tooltip class="item" content="默认" placement="bottom">
+        <FormItem label="样式">
+          <RadioGroup v-model:value="formData.type">
+            <Tooltip class="item" title="默认" placement="bottom">
               <RadioButton value="default">
                 <IconifyIcon icon="system-uicons:carousel" class="size-6" />
               </RadioButton>
             </Tooltip>
-            <Tooltip class="item" content="卡片" placement="bottom">
+            <Tooltip class="item" title="卡片" placement="bottom">
               <RadioButton value="card">
                 <IconifyIcon icon="ic:round-view-carousel" class="size-6" />
               </RadioButton>
             </Tooltip>
           </RadioGroup>
         </FormItem>
-        <FormItem label="指示器" prop="indicator">
-          <RadioGroup v-model="formData.indicator">
+        <FormItem label="高度">
+          <InputNumber
+            v-model:value="formData.height"
+            class="mr-[10px] !w-1/2"
+          />
+          px
+        </FormItem>
+        <FormItem label="指示器">
+          <RadioGroup v-model:value="formData.indicator">
             <Radio value="dot">小圆点</Radio>
             <Radio value="number">数字</Radio>
           </RadioGroup>
         </FormItem>
-        <FormItem label="是否轮播" prop="autoplay">
-          <Switch v-model="formData.autoplay" />
+        <FormItem label="是否轮播">
+          <Switch v-model:checked="formData.autoplay" />
         </FormItem>
-        <FormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
+        <FormItem label="播放间隔" v-if="formData.autoplay">
           <Slider
-            v-model="formData.interval"
+            v-model:value="formData.interval"
             :max="10"
             :min="0.5"
             :step="0.5"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
           <p class="text-info">单位：秒</p>
         </FormItem>
@@ -74,18 +85,13 @@ const formData = useVModel(props, 'modelValue', emit);
       <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
           <template #default="{ element }">
-            <FormItem label="类型" prop="type" class="mb-2" label-width="40px">
-              <RadioGroup v-model="element.type">
+            <FormItem label="类型" name="type">
+              <RadioGroup v-model:value="element.type">
                 <Radio value="img">图片</Radio>
                 <Radio value="video">视频</Radio>
               </RadioGroup>
             </FormItem>
-            <FormItem
-              label="图片"
-              class="mb-2"
-              label-width="40px"
-              v-if="element.type === 'img'"
-            >
+            <FormItem label="图片" v-if="element.type === 'img'">
               <UploadImg
                 v-model="element.imgUrl"
                 draggable="false"
@@ -96,7 +102,7 @@ const formData = useVModel(props, 'modelValue', emit);
               />
             </FormItem>
             <template v-else>
-              <FormItem label="封面" class="mb-2" label-width="40px">
+              <FormItem label="封面">
                 <UploadImg
                   v-model="element.imgUrl"
                   draggable="false"
@@ -106,7 +112,7 @@ const formData = useVModel(props, 'modelValue', emit);
                   class="min-w-20"
                 />
               </FormItem>
-              <FormItem label="视频" class="mb-2" label-width="40px">
+              <FormItem label="视频">
                 <UploadFile
                   v-model="element.videoUrl"
                   :file-type="['mp4']"
@@ -116,7 +122,7 @@ const formData = useVModel(props, 'modelValue', emit);
                 />
               </FormItem>
             </template>
-            <FormItem label="链接" class="mb-2" label-width="40px">
+            <FormItem label="链接">
               <AppLinkInput v-model="element.url" />
             </FormItem>
           </template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx

@@ -1,4 +1,89 @@
-// 导出所有优惠券相关组件
-export { CouponDiscount } from './coupon-discount';
-export { CouponDiscountDesc } from './coupon-discount-desc';
-export { CouponValidTerm } from './coupon-validTerm';
+/*  eslint-disable vue/one-component-per-file */
+// TODO @YunaiV eslint检测了
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { defineComponent } from 'vue';
+
+import {
+  CouponTemplateValidityTypeEnum,
+  PromotionDiscountTypeEnum,
+} from '@vben/constants';
+import { floatToFixed2, formatDate } from '@vben/utils';
+
+/** 有效期 */
+export const CouponValidTerm = defineComponent({
+  name: 'CouponValidTerm',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    const text =
+      coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
+        ? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
+            coupon.validEndTime,
+            'YYYY-MM-DD',
+          )}`
+        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`;
+    return () => <div>{text}</div>;
+  },
+});
+
+/** 优惠值 */
+export const CouponDiscount = defineComponent({
+  name: 'CouponDiscount',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 折扣
+    let value = `${(coupon.discountPercent ?? 0) / 10}`;
+    let suffix = ' 折';
+    // 满减
+    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      value = floatToFixed2(coupon.discountPrice);
+      suffix = ' 元';
+    }
+    return () => (
+      <div>
+        <span class={'text-20px font-bold'}>{value}</span>
+        <span>{suffix}</span>
+      </div>
+    );
+  },
+});
+
+/** 优惠描述 */
+export const CouponDiscountDesc = defineComponent({
+  name: 'CouponDiscountDesc',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 使用条件
+    const useCondition =
+      coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : '';
+    // 优惠描述
+    const discountDesc =
+      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+        ? `减${floatToFixed2(coupon.discountPrice)}元`
+        : `打${(coupon.discountPercent ?? 0) / 10}折`;
+    return () => (
+      <div>
+        <span>{useCondition}</span>
+        <span>{discountDesc}</span>
+      </div>
+    );
+  },
+});

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx

@@ -1,34 +0,0 @@
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
-
-import { defineComponent } from 'vue';
-
-import { PromotionDiscountTypeEnum } from '@vben/constants';
-import { floatToFixed2 } from '@vben/utils';
-
-// 优惠描述
-export const CouponDiscountDesc = defineComponent({
-  name: 'CouponDiscountDesc',
-  props: {
-    coupon: {
-      type: Object as () => MallCouponTemplateApi.CouponTemplate,
-      required: true,
-    },
-  },
-  setup(props) {
-    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
-    // 使用条件
-    const useCondition =
-      coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : '';
-    // 优惠描述
-    const discountDesc =
-      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
-        ? `减${floatToFixed2(coupon.discountPrice)}元`
-        : `打${(coupon.discountPercent ?? 0) / 10}折`;
-    return () => (
-      <div>
-        <span>{useCondition}</span>
-        <span>{discountDesc}</span>
-      </div>
-    );
-  },
-});

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx

@@ -1,34 +0,0 @@
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
-
-import { defineComponent } from 'vue';
-
-import { PromotionDiscountTypeEnum } from '@vben/constants';
-import { floatToFixed2 } from '@vben/utils';
-
-// 优惠值
-export const CouponDiscount = defineComponent({
-  name: 'CouponDiscount',
-  props: {
-    coupon: {
-      type: Object as () => MallCouponTemplateApi.CouponTemplate,
-      required: true,
-    },
-  },
-  setup(props) {
-    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
-    // 折扣
-    let value = `${(coupon.discountPercent ?? 0) / 10}`;
-    let suffix = ' 折';
-    // 满减
-    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
-      value = floatToFixed2(coupon.discountPrice);
-      suffix = ' 元';
-    }
-    return () => (
-      <div>
-        <span class={'text-20px font-bold'}>{value}</span>
-        <span>{suffix}</span>
-      </div>
-    );
-  },
-});

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx

@@ -1,28 +0,0 @@
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
-
-import { defineComponent } from 'vue';
-
-import { CouponTemplateValidityTypeEnum } from '@vben/constants';
-import { formatDate } from '@vben/utils';
-
-// 有效期
-export const CouponValidTerm = defineComponent({
-  name: 'CouponValidTerm',
-  props: {
-    coupon: {
-      type: Object as () => MallCouponTemplateApi.CouponTemplate,
-      required: true,
-    },
-  },
-  setup(props) {
-    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
-    const text =
-      coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
-        ? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
-            coupon.validEndTime,
-            'YYYY-MM-DD',
-          )}`
-        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`;
-    return () => <div>{text}</div>;
-  },
-});

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

@@ -13,12 +13,19 @@ import {
   CouponValidTerm,
 } from './component';
 
-/** 商品卡片 */
+/** 优惠劵卡片 */
 defineOptions({ name: 'CouponCard' });
-// 定义属性
+
+/** 定义属性 */
 const props = defineProps<{ property: CouponCardProperty }>();
-// 商品列表
-const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]);
+
+const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 优惠劵列表
+const phoneWidth = ref(375); // 手机宽度
+const containerRef = ref(); // 容器引用
+const scrollbarWidth = ref('100%'); // 滚动条宽度
+const couponWidth = ref(375); // 优惠券宽度
+
+/** 监听优惠券 ID 变化，加载优惠券列表 */
 watch(
   () => props.property.couponIds,
   async () => {
@@ -32,15 +39,7 @@ watch(
   },
 );
 
-// 手机宽度
-const phoneWidth = ref(384);
-// 容器
-const containerRef = ref();
-// 滚动条宽度
-const scrollbarWidth = ref('100%');
-// 优惠券的宽度
-const couponWidth = ref(384);
-// 计算布局参数
+/** 计算布局参数 */
 watch(
   () => [props.property, phoneWidth, couponList.value.length],
   () => {
@@ -56,13 +55,14 @@ watch(
   },
   { immediate: true, deep: true },
 );
+
+/** 初始化 */
 onMounted(() => {
-  // 提取手机宽度
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
+  phoneWidth.value = containerRef.value?.offsetWidth || 375;
 });
 </script>
 <template>
-  <div class="z-10 min-h-8" wrap-class="w-full" ref="containerRef">
+  <div class="z-10 min-h-8 overflow-x-auto" ref="containerRef">
     <div
       class="flex flex-row text-xs"
       :style="{
@@ -82,17 +82,14 @@ onMounted(() => {
         v-for="(coupon, index) in couponList"
         :key="index"
       >
-        <!-- 布局1：1列-->
+        <!-- 布局 1：1 列-->
         <div
           v-if="property.columns === 1"
           class="ml-4 flex flex-row justify-between p-2"
         >
           <div class="flex flex-col justify-evenly gap-1">
-            <!-- 优惠值 -->
             <CouponDiscount :coupon="coupon" />
-            <!-- 优惠描述 -->
             <CouponDiscountDesc :coupon="coupon" />
-            <!-- 有效期 -->
             <CouponValidTerm :coupon="coupon" />
           </div>
           <div class="flex flex-col justify-evenly">
@@ -107,17 +104,14 @@ onMounted(() => {
             </div>
           </div>
         </div>
-        <!-- 布局2：2列-->
+        <!-- 布局 2：2 列-->
         <div
           v-else-if="property.columns === 2"
           class="ml-4 flex flex-row justify-between p-2"
         >
           <div class="flex flex-col justify-evenly gap-1">
-            <!-- 优惠值 -->
             <CouponDiscount :coupon="coupon" />
-            <!-- 优惠描述 -->
             <CouponDiscountDesc :coupon="coupon" />
-            <!-- 领取说明 -->
             <div v-if="coupon.totalCount >= 0">
               仅剩：{{ coupon.totalCount - coupon.takeCount }}张
             </div>
@@ -135,11 +129,9 @@ onMounted(() => {
             </div>
           </div>
         </div>
-        <!-- 布局3：3列-->
+        <!-- 布局 3：3 列-->
         <div v-else class="flex flex-col items-center justify-around gap-1 p-1">
-          <!-- 优惠值 -->
           <CouponDiscount :coupon="coupon" />
-          <!-- 优惠描述 -->
           <CouponDiscountDesc :coupon="coupon" />
           <div
             class="rounded-full px-2 py-0.5"

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

@@ -25,7 +25,7 @@ import {
   Typography,
 } from 'ant-design-vue';
 
-import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
+import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
 import CouponSelect from '#/views/mall/promotion/coupon/components/select.vue';
@@ -66,9 +66,7 @@ watch(
   () => formData.value.couponIds,
   async () => {
     if (formData.value.couponIds?.length > 0) {
-      couponList.value = await CouponTemplateApi.getCouponTemplateList(
-        formData.value.couponIds,
-      );
+      couponList.value = await getCouponTemplateList(formData.value.couponIds);
     }
   },
   {
@@ -103,7 +101,7 @@ watch(
               >
                 减{{ floatToFixed2(coupon.discountPrice) }}元
               </span>
-              <span v-else> 打{{ (coupon.discountPercent ?? 0) / 10 }}折 </span>
+              <span v-else> 打{{ coupon.discountPercent }}折 </span>
             </Typography.Text>
           </Typography>
         </div>

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

@@ -5,23 +5,20 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { Button, Image, message } from 'ant-design-vue';
+import { Button, Image } from 'ant-design-vue';
 
 /** 悬浮按钮 */
 defineOptions({ name: 'FloatingActionButton' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: FloatingActionButtonProperty }>();
 
-// 是否展开
-const expanded = ref(false);
-// 处理展开/折叠
-const handleToggleFab = () => {
-  expanded.value = !expanded.value;
-};
+const expanded = ref(false); // 是否展开
 
-const handleActive = (index: number) => {
-  message.success(`点击了${index}`);
-};
+/** 处理展开/折叠 */
+function handleToggleFab() {
+  expanded.value = !expanded.value;
+}
 </script>
 <template>
   <div
@@ -38,9 +35,8 @@ const handleActive = (index: number) => {
         v-for="(item, index) in property.list"
         :key="index"
         class="flex flex-col items-center"
-        @click="handleActive(index)"
       >
-        <Image :src="item.imgUrl" fit="contain" class="h-7 w-7">
+        <Image :src="item.imgUrl" :width="28" :height="28" :preview="false">
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
               <IconifyIcon
@@ -61,36 +57,18 @@ const handleActive = (index: number) => {
       </div>
     </template>
     <!-- todo: @owen 使用APP主题色 -->
-    <Button type="primary" size="large" circle @click="handleToggleFab">
+    <Button type="primary" size="large" shape="circle" @click="handleToggleFab">
       <IconifyIcon
         icon="lucide:plus"
-        class="fab-icon"
-        :class="[{ active: expanded }]"
+        class="transition-transform duration-300"
+        :class="expanded ? 'rotate-[135deg]' : 'rotate-0'"
       />
     </Button>
   </div>
   <!-- 模态背景：展开时显示，点击后折叠 -->
-  <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
+  <div
+    v-if="expanded"
+    class="absolute left-[calc(50%-375px/2)] top-0 z-[11] h-full w-[375px] bg-black/40"
+    @click="handleToggleFab"
+  ></div>
 </template>
-
-<style scoped lang="scss">
-/* 模态背景 */
-.modal-bg {
-  position: absolute;
-  top: 0;
-  left: calc(50% - 384px / 2);
-  z-index: 11;
-  width: 384px;
-  height: 100%;
-  background-color: rgb(0 0 0 / 40%);
-}
-
-.fab-icon {
-  transform: rotate(0deg);
-  transition: transform 0.3s;
-
-  &.active {
-    transform: rotate(135deg);
-  }
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts

@@ -2,10 +2,9 @@ import type { StyleValue } from 'vue';
 
 import type { HotZoneItemProperty } from '../../config';
 
-// 热区的最小宽高
-export const HOT_ZONE_MIN_SIZE = 100;
+export const HOT_ZONE_MIN_SIZE = 100; // 热区的最小宽高
 
-// 控制的类型
+/** 控制的类型 */
 export enum CONTROL_TYPE_ENUM {
   LEFT,
   TOP,
@@ -13,14 +12,14 @@ export enum CONTROL_TYPE_ENUM {
   HEIGHT,
 }
 
-// 定义热区的控制点
+/** 定义热区的控制点 */
 export interface ControlDot {
   position: string;
   types: CONTROL_TYPE_ENUM[];
   style: StyleValue;
 }
 
-// 热区的8个控制点
+/** 热区的 8 个控制点 */
 export const CONTROL_DOT_LIST = [
   {
     position: '左上角',
@@ -98,10 +97,10 @@ export const CONTROL_DOT_LIST = [
 ] as ControlDot[];
 
 // region 热区的缩放
-// 热区的缩放比例
-export const HOT_ZONE_SCALE_RATE = 2;
-// 缩小：缩回适合手机屏幕的大小
-export const zoomOut = (list?: HotZoneItemProperty[]) => {
+export const HOT_ZONE_SCALE_RATE = 2; // 热区的缩放比例
+
+/** 缩小：缩回适合手机屏幕的大小 */
+export function zoomOut(list?: HotZoneItemProperty[]) {
   return (
     list?.map((hotZone) => ({
       ...hotZone,
@@ -111,9 +110,10 @@ export const zoomOut = (list?: HotZoneItemProperty[]) => {
       height: (hotZone.height /= HOT_ZONE_SCALE_RATE),
     })) || []
   );
-};
-// 放大：作用是为了方便在电脑屏幕上编辑
-export const zoomIn = (list?: HotZoneItemProperty[]) => {
+}
+
+/** 放大：作用是为了方便在电脑屏幕上编辑 */
+export function zoomIn(list?: HotZoneItemProperty[]) {
   return (
     list?.map((hotZone) => ({
       ...hotZone,
@@ -123,7 +123,8 @@ export const zoomIn = (list?: HotZoneItemProperty[]) => {
       height: (hotZone.height *= HOT_ZONE_SCALE_RATE),
     })) || []
   );
-};
+}
+
 // endregion
 
 /**

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue

@@ -11,7 +11,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Button, Image } from 'ant-design-vue';
 
-import AppLinkSelectDialog from '#/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue';
+import { AppLinkSelectDialog } from '#/views/mall/promotion/components';
 
 import {
   CONTROL_DOT_LIST,
@@ -213,8 +213,9 @@ const handleAppLinkChange = (appLink: AppLink) => {
         </span>
         <IconifyIcon
           icon="lucide:x"
-          class="absolute inset-0 right-0 top-0 hidden size-6 cursor-pointer items-center rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
+          class="absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
           :style="{ backgroundColor: 'hsl(var(--primary))' }"
+          :size="14"
           @click="handleRemove(item)"
         />
 
@@ -230,9 +231,7 @@ const handleAppLinkChange = (appLink: AppLink) => {
     </div>
     <template #prepend-footer>
       <Button @click="handleAdd" type="primary" ghost>
-        <template #icon>
-          <IconifyIcon icon="lucide:plus" />
-        </template>
+        <IconifyIcon icon="lucide:plus" class="mr-5px" />
         添加热区
       </Button>
     </template>

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

@@ -2,8 +2,10 @@
 import type { HotZoneProperty } from './config';
 
 import { Image } from 'ant-design-vue';
+
 /** 热区 */
 defineOptions({ name: 'HotZone' });
+
 const props = defineProps<{ property: HotZoneProperty }>();
 </script>
 
@@ -12,21 +14,23 @@ const props = defineProps<{ property: HotZoneProperty }>();
     <Image
       :src="props.property.imgUrl"
       class="pointer-events-none h-full w-full select-none"
+      :preview="false"
     />
     <div
       v-for="(item, index) in props.property.list"
       :key="index"
-      class="bg-primary-700 absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
+      class="absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
       :style="{
         width: `${item.width}px`,
         height: `${item.height}px`,
         top: `${item.top}px`,
         left: `${item.left}px`,
+        color: 'hsl(var(--primary))',
+        background: 'color-mix(in srgb, hsl(var(--primary)) 30%, transparent)',
+        borderColor: 'hsl(var(--primary))',
       }"
     >
-      <p class="text-primary">
-        {{ item.name }}
-      </p>
+      {{ item.name }}
     </div>
   </div>
 </template>

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

@@ -15,42 +15,46 @@ import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
 defineOptions({ name: 'HotZoneProperty' });
 
 const props = defineProps<{ modelValue: HotZoneProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 
-// 热区编辑对话框
-const editDialogRef = ref();
-// 打开热区编辑对话框
-const handleOpenEditDialog = () => {
+const editDialogRef = ref(); // 热区编辑对话框
+
+/** 打开热区编辑对话框 */
+function handleOpenEditDialog() {
   editDialogRef.value.open();
-};
+}
 </script>
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
     <Form
-      :label-col="{ span: 6 }"
-      :wrapper-col="{ span: 18 }"
+      :label-col="{ style: { width: '80px' } }"
       :model="formData"
       class="mt-2"
     >
-      <FormItem label="上传图片" prop="imgUrl">
+      <FormItem label="上传图片" name="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
           height="50px"
           width="auto"
-          class="min-w-20"
+          class="min-w-[80px]"
           :show-description="false"
-        />
+        >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
+          <template #tip> 推荐宽度 750 </template>
+        </UploadImg>
       </FormItem>
-      <p class="text-center text-sm text-gray-500">推荐宽度 750</p>
     </Form>
 
-    <Button type="primary" class="mt-4 w-full" @click="handleOpenEditDialog">
+    <Button type="primary" ghost class="w-full" @click="handleOpenEditDialog">
       设置热区
     </Button>
   </ComponentContainerProperty>
+
   <!-- 热区编辑对话框 -->
   <HotZoneEditDialog
     ref="editDialogRef"
@@ -58,26 +62,3 @@ const handleOpenEditDialog = () => {
     :img-url="formData.imgUrl"
   />
 </template>
-
-<style scoped lang="scss">
-.hot-zone {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  color: hsl(var(--text-color));
-  cursor: move;
-  background: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
-  border: 1px solid hsl(var(--primary));
-
-  /* 控制点 */
-  .ctrl-dot {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    background-color: #fff;
-    border-radius: 50%;
-  }
-}
-</style>

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>
 
@@ -24,7 +26,7 @@ const formData = useVModel(props, 'modelValue', emit);
       :wrapper-col="{ span: 18 }"
       :model="formData"
     >
-      <FormItem label="上传图片" prop="imgUrl">
+      <FormItem label="上传图片" name="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
           draggable="false"
@@ -32,9 +34,12 @@ const formData = useVModel(props, 'modelValue', emit);
           width="100%"
           class="min-w-20"
           :show-description="false"
-        />
+        >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
+          <template #tip> 建议宽度750 </template>
+        </UploadImg>
       </FormItem>
-      <FormItem label="链接" prop="url">
+      <FormItem label="链接" name="url">
         <AppLinkInput v-model="formData.url" />
       </FormItem>
     </Form>

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

@@ -9,9 +9,11 @@ import { Image } from 'ant-design-vue';
 
 /** 广告魔方 */
 defineOptions({ name: 'MagicCube' });
+
 const props = defineProps<{ property: MagicCubeProperty }>();
-// 一个方块的大小
-const CUBE_SIZE = 93.75;
+
+const CUBE_SIZE = 93.75; // 一个方块的大小
+
 /**
  * 计算方块的行数
  * 行数用于计算魔方的总体高度，存在以下情况：
@@ -53,9 +55,9 @@ const rowCount = computed(() => {
       }"
     >
       <Image
-        class="h-full w-full"
-        fit="cover"
+        class="h-full w-full object-cover"
         :src="item.imgUrl"
+        :preview="false"
         :style="{
           borderTopLeftRadius: `${property.borderRadiusTop}px`,
           borderTopRightRadius: `${property.borderRadiusTop}px`,

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

@@ -33,30 +33,36 @@ const handleHotAreaSelected = (_: any, index: number) => {
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :model="formData" class="mt-2">
+    <Form
+      :model="formData"
+      :label-col="{ style: { width: '80px' } }"
+      label-align="right"
+    >
       <p class="text-base font-bold">魔方设置：</p>
-      <MagicCubeEditor
-        class="my-4"
-        v-model="formData.list"
-        :rows="4"
-        :cols="4"
-        @hot-area-selected="handleHotAreaSelected"
-      />
-      <template v-for="(hotArea, index) in formData.list" :key="index">
-        <template v-if="selectedHotAreaIndex === index">
-          <FormItem label="上传图片" :name="`list[${index}].imgUrl`">
-            <UploadImg
-              v-model="hotArea.imgUrl"
-              height="80px"
-              width="80px"
-              :show-description="false"
-            />
-          </FormItem>
-          <FormItem label="链接" :name="`list[${index}].url`">
-            <AppLinkInput v-model="hotArea.url" />
-          </FormItem>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+        <p class="text-xs text-gray-500">每格尺寸 187 * 187</p>
+        <MagicCubeEditor
+          v-model="formData.list"
+          :rows="4"
+          :cols="4"
+          @hot-area-selected="handleHotAreaSelected"
+        />
+        <template v-for="(hotArea, index) in formData.list" :key="index">
+          <template v-if="selectedHotAreaIndex === index">
+            <FormItem label="上传图片" :name="`list[${index}].imgUrl`">
+              <UploadImg
+                v-model="hotArea.imgUrl"
+                height="80px"
+                width="80px"
+                :show-description="false"
+              />
+            </FormItem>
+            <FormItem label="链接" :name="`list[${index}].url`">
+              <AppLinkInput v-model="hotArea.url" />
+            </FormItem>
+          </template>
         </template>
-      </template>
+      </div>
       <FormItem label="上圆角" name="borderRadiusTop">
         <Slider v-model:value="formData.borderRadiusTop" :max="100" :min="0" />
       </FormItem>

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

@@ -5,6 +5,7 @@ import { Image } from 'ant-design-vue';
 
 /** 宫格导航 */
 defineOptions({ name: 'MenuGrid' });
+
 defineProps<{ property: MenuGridProperty }>();
 </script>
 

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

@@ -9,6 +9,7 @@ import {
   AppLinkInput,
   ColorInput,
   Draggable,
+  InputWithColor,
 } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
@@ -18,21 +19,26 @@ import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
 defineOptions({ name: 'MenuGridProperty' });
 
 const props = defineProps<{ modelValue: MenuGridProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
-    <Form label-width="80px" :model="formData" class="mt-2">
-      <FormItem label="每行数量" prop="column">
-        <RadioGroup v-model="formData.column">
+    <Form
+      :label-col="{ style: { width: '80px' } }"
+      :model="formData"
+      class="mt-2"
+    >
+      <FormItem label="每行数量" name="column">
+        <RadioGroup v-model:value="formData.column">
           <Radio :value="3">3个</Radio>
           <Radio :value="4">4个</Radio>
         </RadioGroup>
       </FormItem>
-
       <p class="text-base font-bold">菜单设置</p>
       <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <Draggable
@@ -40,42 +46,43 @@ const formData = useVModel(props, 'modelValue', emit);
           :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"
         >
           <template #default="{ element }">
-            <FormItem label="图标" prop="iconUrl">
+            <FormItem label="图标" name="iconUrl">
               <UploadImg
                 v-model="element.iconUrl"
                 height="80px"
                 width="80px"
                 :show-description="false"
               >
-                <template #tip> 建议尺寸：44 * 44 </template>
+                <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
+                <template #tip> 建议尺寸：44 * 44</template>
               </UploadImg>
             </FormItem>
-            <FormItem label="标题" prop="title">
-              <ColorInput
+            <FormItem label="标题" name="title">
+              <InputWithColor
                 v-model="element.title"
                 v-model:color="element.titleColor"
               />
             </FormItem>
-            <FormItem label="副标题" prop="subtitle">
-              <ColorInput
+            <FormItem label="副标题" name="subtitle">
+              <InputWithColor
                 v-model="element.subtitle"
                 v-model:color="element.subtitleColor"
               />
             </FormItem>
-            <FormItem label="链接" prop="url">
+            <FormItem label="链接" name="url">
               <AppLinkInput v-model="element.url" />
             </FormItem>
-            <FormItem label="显示角标" prop="badge.show">
-              <Switch v-model="element.badge.show" />
+            <FormItem label="显示角标" name="badge.show">
+              <Switch v-model:checked="element.badge.show" />
             </FormItem>
             <template v-if="element.badge.show">
-              <FormItem label="角标内容" prop="badge.text">
-                <ColorInput
+              <FormItem label="角标内容" name="badge.text">
+                <InputWithColor
                   v-model="element.badge.text"
                   v-model:color="element.badge.textColor"
                 />
               </FormItem>
-              <FormItem label="背景颜色" prop="badge.bgColor">
+              <FormItem label="背景颜色" name="badge.bgColor">
                 <ColorInput v-model="element.badge.bgColor" />
               </FormItem>
             </template>

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

@@ -7,6 +7,7 @@ import { Image } from 'ant-design-vue';
 
 /** 列表导航 */
 defineOptions({ name: 'MenuList' });
+
 defineProps<{ property: MenuListProperty }>();
 </script>
 
@@ -18,7 +19,12 @@ defineProps<{ property: MenuListProperty }>();
       class="flex h-10 flex-row items-center justify-between gap-1 border-t border-gray-200 px-3 first:border-t-0"
     >
       <div class="flex flex-1 flex-row items-center gap-2">
-        <Image v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
+        <Image
+          v-if="item.iconUrl"
+          class="h-4 w-4"
+          :src="item.iconUrl"
+          :preview="false"
+        />
         <span class="text-base" :style="{ color: item.titleColor }">
           {{ item.title }}
         </span>
@@ -27,7 +33,7 @@ defineProps<{ property: MenuListProperty }>();
         <span class="text-xs" :style="{ color: item.subtitleColor }">
           {{ item.subtitle }}
         </span>
-        <IconifyIcon icon="lucide:arrow-right" class="size-4" />
+        <IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
       </div>
     </div>
   </div>

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

@@ -27,7 +27,12 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <p class="text-base font-bold">菜单设置</p>
-    <Form :model="formData" class="mt-2">
+    <p class="text-xs text-gray-500">拖动左侧的小圆点可以调整顺序</p>
+    <Form
+      :label-col="{ style: { width: '60px' } }"
+      :model="formData"
+      class="mt-2"
+    >
       <Draggable
         v-model="formData.list"
         :empty-item="EMPTY_MENU_LIST_ITEM_PROPERTY"
@@ -39,8 +44,10 @@ const formData = useVModel(props, 'modelValue', emit);
               height="80px"
               width="80px"
               :show-description="false"
-            />
-            <p class="text-sm text-gray-500">建议尺寸：44 * 44</p>
+            >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
+              <template #tip> 建议尺寸：44 * 44 </template>
+            </UploadImg>
           </FormItem>
           <FormItem label="标题" name="title">
             <InputWithColor

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

@@ -3,26 +3,23 @@ import type { MenuSwiperItemProperty, MenuSwiperProperty } from './config';
 
 import { ref, watch } from 'vue';
 
-import { Image } from 'ant-design-vue';
+import { Carousel, 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 pages = ref<MenuSwiperItemProperty[][]>([]);
-// 轮播图高度
-const carouselHeight = ref(0);
-// 行高
-const rowHeight = ref(0);
-// 列宽
-const columnWidth = ref('');
+const props = defineProps<{ property: MenuSwiperProperty }>();
+
+const TITLE_HEIGHT = 20; // 标题的高度
+const ICON_SIZE = 32; // 图标的高度
+const SPACE_Y = 16; // 垂直间距：一行上下的间距
+
+const pages = ref<MenuSwiperItemProperty[][]>([]); // 分页
+const carouselHeight = ref(0); // 轮播图高度
+
+const rowHeight = ref(0); // 行高
+const columnWidth = ref(''); // 列宽
+
 watch(
   () => props.property,
   () => {
@@ -75,9 +72,7 @@ watch(
           class="relative flex flex-col items-center justify-center"
           :style="{ width: columnWidth, height: `${rowHeight}px` }"
         >
-          <!-- 图标 + 角标 -->
           <div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`">
-            <!-- 右上角角标 -->
             <span
               v-if="item.badge?.show"
               class="absolute -right-2.5 -top-2.5 z-10 h-5 rounded-[10px] px-1.5 text-center text-xs leading-5"
@@ -95,7 +90,6 @@ watch(
               :preview="false"
             />
           </div>
-          <!-- 标题 -->
           <span
             v-if="property.layout === 'iconText'"
             class="text-xs"

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

@@ -69,6 +69,7 @@ const formData = useVModel(props, 'modelValue', emit);
                 width="80px"
                 :show-description="false"
               >
+                <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
                 <template #tip> 建议尺寸：98 * 98 </template>
               </UploadImg>
             </FormItem>

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

@@ -1,18 +1,20 @@
 <script lang="ts" setup>
 import type { NavigationBarCellProperty } from '../config';
 
-import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/util';
-
 import { computed, ref } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+
 import { useVModel } from '@vueuse/core';
 import {
   FormItem,
-  Image,
   Input,
   Radio,
+  RadioButton,
   RadioGroup,
   Slider,
+  Switch,
+  Tooltip,
 } from 'ant-design-vue';
 
 import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
@@ -23,7 +25,7 @@ import {
   MagicCubeEditor,
 } from '#/views/mall/promotion/components';
 
-// 导航栏属性面板
+/** 导航栏单元格属性面板 */
 defineOptions({ name: 'NavigationBarCellProperty' });
 
 const props = defineProps({
@@ -36,54 +38,64 @@ const props = defineProps({
     default: () => [],
   },
 });
+
 const emit = defineEmits(['update:modelValue']);
+
 const cellList = useVModel(props, 'modelValue', emit);
 
-// 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
+/**
+ * 计算单元格数量
+ * 1. 小程序：6 个（因为右侧有胶囊按钮占据 2 个格子的空间）
+ * 2. 其它平台：8 个（全部空间可用）
+ */
 const cellCount = computed(() => (props.isMp ? 6 : 8));
 
-// 转换为Rect格式的数据
-const rectList = computed<Rect[]>(() => {
-  return cellList.value.map((cell) => ({
-    left: cell.left,
-    top: cell.top,
-    width: cell.width,
-    height: cell.height,
-    right: cell.left + cell.width,
-    bottom: cell.top + cell.height,
-  }));
-});
+const selectedHotAreaIndex = ref(0); // 选中的热区
 
-// 选中的热区
-const selectedHotAreaIndex = ref(0);
-const handleHotAreaSelected = (
+/** 处理热区被选中事件 */
+function handleHotAreaSelected(
   cellValue: NavigationBarCellProperty,
   index: number,
-) => {
+) {
   selectedHotAreaIndex.value = index;
+  // 默认设置为选中文字，并设置属性
   if (!cellValue.type) {
     cellValue.type = 'text';
     cellValue.textColor = '#111111';
   }
-};
+  // 如果点击的是搜索框，则初始化搜索框的属性
+  if (cellValue.type === 'search') {
+    cellValue.placeholderPosition = 'left';
+    cellValue.backgroundColor = '#EEEEEE';
+    cellValue.textColor = '#969799';
+  }
+}
 </script>
 
 <template>
   <div class="h-40px flex items-center justify-center">
     <MagicCubeEditor
-      v-model="rectList"
+      v-model="cellList as any"
       :cols="cellCount"
       :cube-size="38"
       :rows="1"
       class="m-b-16px"
       @hot-area-selected="handleHotAreaSelected"
     />
-    <Image v-if="isMp" alt="" class="w-19 h-8" :src="appNavBarMp" />
+    <img
+      v-if="isMp"
+      alt=""
+      style="width: 76px; height: 30px"
+      :src="appNavBarMp"
+    />
   </div>
   <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
     <template v-if="selectedHotAreaIndex === Number(cellIndex)">
-      <FormItem label="类型">
-        <RadioGroup v-model:value="cell.type">
+      <FormItem :name="`cell[${cellIndex}].type`" label="类型">
+        <RadioGroup
+          v-model:value="cell.type"
+          @change="handleHotAreaSelected(cell, cellIndex)"
+        >
           <Radio value="text">文字</Radio>
           <Radio value="image">图片</Radio>
           <Radio value="search">搜索框</Radio>
@@ -91,37 +103,61 @@ const handleHotAreaSelected = (
       </FormItem>
       <!-- 1. 文字 -->
       <template v-if="cell.type === 'text'">
-        <FormItem label="内容">
+        <FormItem :name="`cell[${cellIndex}].text`" label="内容">
           <Input v-model:value="cell!.text" :maxlength="10" show-count />
         </FormItem>
-        <FormItem label="颜色">
+        <FormItem :name="`cell[${cellIndex}].text`" label="颜色">
           <ColorInput v-model="cell!.textColor" />
         </FormItem>
-        <FormItem label="链接">
+        <FormItem :name="`cell[${cellIndex}].url`" label="链接">
           <AppLinkInput v-model="cell.url" />
         </FormItem>
       </template>
       <!-- 2. 图片 -->
       <template v-else-if="cell.type === 'image'">
-        <FormItem label="图片">
+        <FormItem :name="`cell[${cellIndex}].imgUrl`" label="图片">
           <UploadImg
             v-model="cell.imgUrl"
             :limit="1"
+            height="56px"
+            width="56px"
             :show-description="false"
-            class="size-14"
           />
           <span class="text-xs text-gray-500">建议尺寸 56*56</span>
         </FormItem>
-        <FormItem label="链接">
+        <FormItem :name="`cell[${cellIndex}].url`" label="链接">
           <AppLinkInput v-model="cell.url" />
         </FormItem>
       </template>
       <!-- 3. 搜索框 -->
       <template v-else>
-        <FormItem label="提示文字">
+        <FormItem label="框体颜色" name="backgroundColor">
+          <ColorInput v-model="cell.backgroundColor" />
+        </FormItem>
+        <FormItem class="lef" label="文本颜色" name="textColor">
+          <ColorInput v-model="cell.textColor" />
+        </FormItem>
+        <FormItem :name="`cell[${cellIndex}].placeholder`" label="提示文字">
           <Input v-model:value="cell.placeholder" :maxlength="10" show-count />
         </FormItem>
-        <FormItem label="圆角">
+        <FormItem label="文本位置" name="placeholderPosition">
+          <RadioGroup v-model:value="cell!.placeholderPosition">
+            <Tooltip title="居左" placement="top">
+              <RadioButton value="left">
+                <IconifyIcon icon="ant-design:align-left-outlined" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="居中" placement="top">
+              <RadioButton value="center">
+                <IconifyIcon icon="ant-design:align-center-outlined" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="扫一扫" name="showScan">
+          <Switch v-model:checked="cell!.showScan" />
+        </FormItem>
+        <FormItem :name="`cell[${cellIndex}].borderRadius`" label="圆角">
           <Slider v-model:value="cell.borderRadius" :max="100" :min="0" />
         </FormItem>
       </template>

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

@@ -18,7 +18,7 @@ defineOptions({ name: 'NavigationBar' });
 
 const props = defineProps<{ property: NavigationBarProperty }>();
 
-// 背景
+/** 计算背景样式 */
 const bgStyle = computed(() => {
   const background =
     props.property.bgType === 'img' && props.property.bgImg
@@ -26,27 +26,31 @@ const bgStyle = computed(() => {
       : props.property.bgColor;
   return { background };
 });
-// 单元格列表
+
+/** 获取当前预览的单元格列表 */
 const cellList = computed(() =>
   props.property._local?.previewMp
     ? props.property.mpCells
     : props.property.otherCells,
 );
-// 单元格宽度
+
+/** 计算单元格宽度 */
 const cellWidth = computed(() => {
   return props.property._local?.previewMp
-    ? (384 - 80 - 86) / 6
-    : (384 - 90) / 8;
+    ? (375 - 80 - 86) / 6
+    : (375 - 90) / 8;
 });
-// 获得单元格样式
-const getCellStyle = (cell: NavigationBarCellProperty) => {
+
+/** 获取单元格样式 */
+function getCellStyle(cell: NavigationBarCellProperty) {
   return {
     width: `${cell.width * cellWidth.value + (cell.width - 1) * 10}px`,
     left: `${cell.left * cellWidth.value + (cell.left + 1) * 10}px`,
     position: 'absolute',
   } as StyleValue;
-};
-// 获得搜索框属性
+}
+
+/** 获取搜索框属性配置 */
 const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
   return {
     height: 30,
@@ -57,7 +61,10 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
 });
 </script>
 <template>
-  <div class="navigation-bar" :style="bgStyle">
+  <div
+    class="flex h-[50px] items-center justify-between bg-white px-[6px]"
+    :style="bgStyle"
+  >
     <div class="flex h-full w-full items-center">
       <div
         v-for="(cell, cellIndex) in cellList"
@@ -78,35 +85,7 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
       v-if="property._local?.previewMp"
       :src="appNavbarMp"
       alt=""
-      class="w-22 h-8"
+      style="width: 86px; height: 30px"
     />
   </div>
 </template>
-<style lang="scss" scoped>
-.navigation-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 50px;
-  padding: 0 6px;
-  background: #fff;
-
-  /* 左边 */
-  .left {
-    margin-left: 8px;
-  }
-
-  .center {
-    flex: 1;
-    font-size: 14px;
-    line-height: 35px;
-    color: #333;
-    text-align: center;
-  }
-
-  /* 右边 */
-  .right {
-    margin-right: 8px;
-  }
-}
-</style>

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

@@ -17,16 +17,16 @@ import { ColorInput } from '#/views/mall/promotion/components';
 
 import NavigationBarCellProperty from './components/cell-property.vue';
 
-// 导航栏属性面板
+/** 导航栏属性面板 */
 defineOptions({ name: 'NavigationBarProperty' });
+
 const props = defineProps<{ modelValue: NavigationBarProperty }>();
 
 const emit = defineEmits(['update:modelValue']);
 
-// 表单校验
 const rules: Record<string, any> = {
   name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
-};
+}; // 表单校验
 
 const formData = useVModel(props, 'modelValue', emit);
 if (!formData.value._local) {

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 }>();
-
-// 自动轮播
-const activeIndex = ref(0);
-setInterval(() => {
-  const contents = props.property.contents || [];
-  activeIndex.value = (activeIndex.value + 1) % (contents.length || 1);
-}, 3000);
+defineProps<{ property: NoticeBarProperty }>();
 </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">
-      {{ property.contents?.[activeIndex]?.text }}
-    </div>
+    <Carousel
+      :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/notice-bar/property.vue

@@ -35,6 +35,7 @@ const rules = {
           height="48px"
           :show-description="false"
         >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
           <template #tip>建议尺寸：24 * 24</template>
         </UploadImg>
       </FormItem>

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
-    :model="formData"
-    :rules="rules"
-    :label-col="{ span: 6 }"
-    :wrapper-col="{ span: 18 }"
-  >
+  <Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
     <FormItem label="页面描述" name="description">
       <Textarea
         v-model:value="formData!.description"
@@ -42,10 +35,9 @@ const formData = useVModel(props, 'modelValue', emit);
         :limit="1"
         :show-description="false"
       >
+        <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
         <template #tip>建议宽度 750px</template>
       </UploadImg>
     </FormItem>
   </Form>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -9,18 +9,19 @@ import { Image } from 'ant-design-vue';
 
 /** 弹窗广告 */
 defineOptions({ name: 'Popover' });
-// 定义属性
-defineProps<{ property: PopoverProperty }>();
 
-// 处理选中
-const activeIndex = ref(0);
-const handleActive = (index: number) => {
+const props = defineProps<{ property: PopoverProperty }>();
+
+const activeIndex = ref(0); // 选中 index
+
+/** 处理选中 */
+function handleActive(index: number) {
   activeIndex.value = index;
-};
+}
 </script>
 <template>
   <div
-    v-for="(item, index) in property.list"
+    v-for="(item, index) in props.property.list"
     :key="index"
     class="absolute bottom-1/2 right-1/2 h-[454px] w-[292px] rounded border border-gray-300 bg-white p-0.5"
     :style="{
@@ -30,7 +31,11 @@ const handleActive = (index: number) => {
     }"
     @click="handleActive(index)"
   >
-    <Image :src="item.imgUrl" fit="contain" class="h-full w-full">
+    <Image
+      :src="item.imgUrl"
+      :preview="false"
+      class="h-full w-full object-contain"
+    >
       <template #error>
         <div class="flex h-full w-full items-center justify-center">
           <IconifyIcon icon="lucide:image" />
@@ -40,5 +45,3 @@ const handleActive = (index: number) => {
     <div class="absolute right-1 top-1 text-xs">{{ index + 1 }}</div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -18,7 +18,7 @@ const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
-  <Form :model="formData">
+  <Form :label-col="{ style: { width: '80px' } }" :model="formData">
     <Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
       <template #default="{ element, index }">
         <FormItem label="图片" :name="`list[${index}].imgUrl`">

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 marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  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(); // 容器
+
+/** 计算商品的宽度 */
 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(),
@@ -78,7 +72,11 @@ function calculateWidth() {
         v-if="property.badge.show && property.badge.imgUrl"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
+        <Image
+          :src="property.badge.imgUrl"
+          :preview="false"
+          class="h-6 w-8 object-cover"
+        />
       </div>
       <!-- 商品封面图 -->
       <div
@@ -90,7 +88,11 @@ function calculateWidth() {
           },
         ]"
       >
-        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+        <Image
+          class="h-full w-full object-cover"
+          :src="spu.picUrl"
+          :preview="false"
+        />
       </div>
       <div
         class="box-border flex flex-col gap-2 p-2"
@@ -174,9 +176,9 @@ function calculateWidth() {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="size-7 rounded-full"
-          fit="cover"
+          class="size-7 rounded-full object-cover"
           :src="property.btnBuy.imgUrl"
+          :preview="false"
         />
       </div>
     </div>

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

@@ -116,6 +116,7 @@ const formData = useVModel(props, 'modelValue', emit);
             width="72px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </FormItem>
@@ -146,6 +147,7 @@ const formData = useVModel(props, 'modelValue', emit);
               width="56px"
               :show-description="false"
             >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
               <template #tip> 建议尺寸：56 * 56 </template>
             </UploadImg>
           </FormItem>

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 containerRef = ref();
-// 商品的列数
-const columns = ref(2);
-// 滚动条宽度
-const scrollbarWidth = ref('100%');
-// 商品图大小
-const imageSize = ref('0');
-// 商品网络列数
-const gridTemplateColumns = ref('');
-// 计算布局参数
+
+const phoneWidth = ref(375); // 手机宽度
+const containerRef = ref(); // 容器
+const columns = ref(2); // 商品的列数
+const scrollbarWidth = ref('100%'); // 滚动条宽度
+const imageSize = ref('0'); // 商品图大小
+const gridTemplateColumns = ref(''); // 商品网络列数
+
+/** 计算布局参数 */
 watch(
   () => [props.property, phoneWidth, spuList.value.length],
   () => {
@@ -69,13 +66,14 @@ watch(
   },
   { immediate: true, deep: true },
 );
+
+/** 初始化 */
 onMounted(() => {
-  // 提取手机宽度
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
+  phoneWidth.value = containerRef.value?.offsetWidth || 375;
 });
 </script>
 <template>
-  <div class="z-10 min-h-[30px]" wrap-class="w-full" ref="containerRef">
+  <div class="z-10 min-h-[30px] w-full" ref="containerRef">
     <!-- 商品网格 -->
     <div
       class="grid overflow-x-auto"
@@ -103,16 +101,16 @@ onMounted(() => {
           class="absolute left-0 top-0 z-10 items-center justify-center"
         >
           <Image
-            fit="cover"
             :src="property.badge.imgUrl"
-            class="h-[26px] w-[38px]"
+            :preview="false"
+            class="h-[26px] w-[38px] object-cover"
           />
         </div>
         <!-- 商品封面图 -->
         <Image
-          fit="cover"
           :src="spu.picUrl"
-          :style="{ width: imageSize, height: imageSize }"
+          :style="{ width: imageSize, height: imageSize, objectFit: 'cover' }"
+          :preview="false"
         />
         <div
           class="box-border flex flex-col gap-2 p-2"
@@ -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,10 +40,10 @@ 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">
+        <FormItem label="布局" name="type">
           <RadioGroup v-model:value="formData.layoutType">
             <Tooltip title="双列" placement="bottom">
               <RadioButton value="twoCol">
@@ -67,13 +68,13 @@ const formData = useVModel(props, 'modelValue', emit);
             </Tooltip>
           </RadioGroup>
         </FormItem>
-        <FormItem label="商品名称" prop="fields.name.show">
+        <FormItem label="商品名称" name="fields.name.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.name.color" />
             <Checkbox v-model:checked="formData.fields.name.show" />
           </div>
         </FormItem>
-        <FormItem label="商品价格" prop="fields.price.show">
+        <FormItem label="商品价格" name="fields.price.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.price.color" />
             <Checkbox v-model:checked="formData.fields.price.show" />
@@ -81,41 +82,40 @@ const formData = useVModel(props, 'modelValue', emit);
         </FormItem>
       </Card>
       <Card title="角标" class="property-group" :bordered="false">
-        <FormItem label="角标" prop="badge.show">
+        <FormItem label="角标" name="badge.show">
           <Switch v-model:checked="formData.badge.show" />
         </FormItem>
-        <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+        <FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg
             v-model="formData.badge.imgUrl"
             height="44px"
             width="72px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </FormItem>
       </Card>
       <Card title="商品样式" class="property-group" :bordered="false">
-        <FormItem label="上圆角" prop="borderRadiusTop">
+        <FormItem label="上圆角" name="borderRadiusTop">
           <Slider
             v-model:value="formData.borderRadiusTop"
             :max="100"
             :min="0"
           />
         </FormItem>
-        <FormItem label="下圆角" prop="borderRadiusBottom">
+        <FormItem label="下圆角" name="borderRadiusBottom">
           <Slider
             v-model:value="formData.borderRadiusBottom"
             :max="100"
             :min="0"
           />
         </FormItem>
-        <FormItem label="间隔" prop="space">
+        <FormItem label="间隔" name="space">
           <Slider v-model:value="formData.space" :max="100" :min="0" />
         </FormItem>
       </Card>
     </Form>
   </ComponentContainerProperty>
 </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 article = ref<MallArticleApi.Article>();
+
+const props = defineProps<{ property: PromotionArticleProperty }>(); // 定义属性
+
+const article = ref<MallArticleApi.Article>(); // 商品列表
 
 watch(
   () => props.property.id,
@@ -27,5 +27,5 @@ watch(
 );
 </script>
 <template>
-  <div class="min-h-8" v-dompurify-html="article?.content"></div>
+  <div class="min-h-[30px]" v-dompurify-html="article?.content"></div>
 </template>

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 loading = ref(false);
-// 查询文章列表
+const articles = ref<MallArticleApi.Article[]>([]); // 文章列表
+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();
 });
@@ -48,12 +48,12 @@ onMounted(() => {
       :wrapper-col="{ span: 18 }"
       :model="formData"
     >
-      <FormItem label="文章" prop="id">
+      <FormItem label="文章" name="id">
         <Select
           v-model:value="formData.id"
           placeholder="请选择文章"
           class="w-full"
-          filterable
+          :show-search="true"
           :loading="loading"
           :options="
             articles.map((item: any) => ({ label: item.title, value: item.id }))

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(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
-const calculateSpace = (index: number) => {
-  // 商品的列数
-  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`;
-
+/** 计算商品的间距 */
+function calculateSpace(index: number) {
+  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 calculateWidth = () => {
+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 };
-};
+}
 </script>
 <template>
   <div
@@ -118,26 +111,34 @@ const calculateWidth = () => {
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
+        <Image
+          :src="property.badge.imgUrl"
+          class="h-6 w-8 object-cover"
+          :preview="false"
+        />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-36"
+        class="h-[140px]"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-36': property.layoutType === 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
-        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+        <Image
+          class="h-full w-full object-cover"
+          :src="spu.picUrl"
+          :preview="false"
+        />
       </div>
       <div
         class="box-border flex flex-col gap-2 p-2"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[calc(100vw-36px-16px)]':
+            'w-[calc(100%-140px-16px)]':
               property.layoutType === 'oneColSmallImg',
           },
         ]"
@@ -215,9 +216,9 @@ const calculateWidth = () => {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="size-7 rounded-full"
-          fit="cover"
+          class="size-7 rounded-full object-cover"
           :src="property.btnBuy.imgUrl"
+          :preview="false"
         />
       </div>
     </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>
@@ -56,7 +44,7 @@ onMounted(async () => {
         <CombinationShowcase v-model="formData.activityIds" />
       </Card>
       <Card title="商品样式" class="property-group" :bordered="false">
-        <FormItem label="布局" prop="type">
+        <FormItem label="布局" name="type">
           <RadioGroup v-model:value="formData.layoutType">
             <Tooltip title="单列大图" placement="bottom">
               <RadioButton value="oneColBigImg">
@@ -84,37 +72,37 @@ onMounted(async () => {
             </Tooltip>
           </RadioGroup>
         </FormItem>
-        <FormItem label="商品名称" prop="fields.name.show">
+        <FormItem label="商品名称" name="fields.name.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.name.color" />
             <Checkbox v-model:checked="formData.fields.name.show" />
           </div>
         </FormItem>
-        <FormItem label="商品简介" prop="fields.introduction.show">
+        <FormItem label="商品简介" name="fields.introduction.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.introduction.color" />
             <Checkbox v-model:checked="formData.fields.introduction.show" />
           </div>
         </FormItem>
-        <FormItem label="商品价格" prop="fields.price.show">
+        <FormItem label="商品价格" name="fields.price.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.price.color" />
             <Checkbox v-model:checked="formData.fields.price.show" />
           </div>
         </FormItem>
-        <FormItem label="市场价" prop="fields.marketPrice.show">
+        <FormItem label="市场价" name="fields.marketPrice.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.marketPrice.color" />
             <Checkbox v-model:checked="formData.fields.marketPrice.show" />
           </div>
         </FormItem>
-        <FormItem label="商品销量" prop="fields.salesCount.show">
+        <FormItem label="商品销量" name="fields.salesCount.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.salesCount.color" />
             <Checkbox v-model:checked="formData.fields.salesCount.show" />
           </div>
         </FormItem>
-        <FormItem label="商品库存" prop="fields.stock.show">
+        <FormItem label="商品库存" name="fields.stock.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.stock.color" />
             <Checkbox v-model:checked="formData.fields.stock.show" />
@@ -122,67 +110,67 @@ onMounted(async () => {
         </FormItem>
       </Card>
       <Card title="角标" class="property-group" :bordered="false">
-        <FormItem label="角标" prop="badge.show">
+        <FormItem label="角标" name="badge.show">
           <Switch v-model:checked="formData.badge.show" />
         </FormItem>
-        <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+        <FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22</template>
           </UploadImg>
         </FormItem>
       </Card>
       <Card title="按钮" class="property-group" :bordered="false">
-        <FormItem label="按钮类型" prop="btnBuy.type">
+        <FormItem label="按钮类型" name="btnBuy.type">
           <RadioGroup v-model:value="formData.btnBuy.type">
             <RadioButton value="text">文字</RadioButton>
             <RadioButton value="img">图片</RadioButton>
           </RadioGroup>
         </FormItem>
         <template v-if="formData.btnBuy.type === 'text'">
-          <FormItem label="按钮文字" prop="btnBuy.text">
+          <FormItem label="按钮文字" name="btnBuy.text">
             <Input v-model:value="formData.btnBuy.text" />
           </FormItem>
-          <FormItem label="左侧背景" prop="btnBuy.bgBeginColor">
+          <FormItem label="左侧背景" name="btnBuy.bgBeginColor">
             <ColorInput v-model="formData.btnBuy.bgBeginColor" />
           </FormItem>
-          <FormItem label="右侧背景" prop="btnBuy.bgEndColor">
+          <FormItem label="右侧背景" name="btnBuy.bgEndColor">
             <ColorInput v-model="formData.btnBuy.bgEndColor" />
           </FormItem>
         </template>
         <template v-else>
-          <FormItem label="图片" prop="btnBuy.imgUrl">
+          <FormItem label="图片" name="btnBuy.imgUrl">
             <UploadImg
               v-model="formData.btnBuy.imgUrl"
               height="56px"
               width="56px"
               :show-description="false"
             >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
               <template #tip> 建议尺寸：56 * 56</template>
             </UploadImg>
           </FormItem>
         </template>
       </Card>
       <Card title="商品样式" class="property-group" :bordered="false">
-        <FormItem label="上圆角" prop="borderRadiusTop">
+        <FormItem label="上圆角" name="borderRadiusTop">
           <Slider
             v-model:value="formData.borderRadiusTop"
             :max="100"
             :min="0"
           />
         </FormItem>
-        <FormItem label="下圆角" prop="borderRadiusBottom">
+        <FormItem label="下圆角" name="borderRadiusBottom">
           <Slider
             v-model:value="formData.borderRadiusBottom"
             :max="100"
             :min="0"
           />
         </FormItem>
-        <FormItem label="间隔" prop="space">
+        <FormItem label="间隔" name="space">
           <Slider v-model:value="formData.space" :max="100" :min="0" />
         </FormItem>
       </Card>
     </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,37 +65,30 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
-const calculateSpace = (index: number) => {
-  // 商品的列数
-  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`;
-
+/** 计算商品的间距 */
+function calculateSpace(index: number) {
+  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 calculateWidth = () => {
+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 };
-};
+}
 </script>
 <template>
   <div
     ref="containerRef"
-    class="box-content flex min-h-9 w-full flex-row flex-wrap"
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
   >
     <div
       v-for="(spu, index) in spuList"
@@ -115,19 +108,27 @@ const calculateWidth = () => {
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image :src="property.badge.imgUrl" class="h-6 w-10" fit="cover" />
+        <Image
+          :src="property.badge.imgUrl"
+          class="h-6 w-10 object-cover"
+          :preview="false"
+        />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-36"
+        class="h-[140px]"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-36': property.layoutType === 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
-        <Image :src="spu.picUrl" class="h-full w-full" fit="cover" />
+        <Image
+          :src="spu.picUrl"
+          class="h-full w-full object-cover"
+          :preview="false"
+        />
       </div>
       <div
         class="box-border flex flex-col gap-2 p-2"
@@ -218,8 +219,8 @@ const calculateWidth = () => {
         <Image
           v-else
           :src="property.btnBuy.imgUrl"
-          class="size-7 rounded-full"
-          fit="cover"
+          class="size-7 rounded-full object-cover"
+          :preview="false"
         />
       </div>
     </div>

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

@@ -33,7 +33,11 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :model="formData">
+    <Form
+      :model="formData"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
       <Card title="积分商城活动" class="property-group">
         <PointShowcase v-model="formData.activityIds" />
       </Card>
@@ -114,6 +118,7 @@ const formData = useVModel(props, 'modelValue', emit);
             width="72px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </FormItem>
@@ -144,6 +149,7 @@ const formData = useVModel(props, 'modelValue', emit);
               width="56px"
               :show-description="false"
             >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
               <template #tip> 建议尺寸：56 * 56 </template>
             </UploadImg>
           </FormItem>

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[]>([]);
 
@@ -28,7 +27,7 @@ watch(
     try {
       // 新添加的秒杀组件，是没有活动ID的
       const activityIds = props.property.activityIds;
-      // 检查活动ID的有效性
+      // 检查活动 ID 的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取秒杀活动详情列表
         seckillActivityList.value =
@@ -66,36 +65,29 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
-const calculateSpace = (index: number) => {
-  // 商品的列数
-  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`;
-
+/** 计算商品的间距 */
+function calculateSpace(index: number) {
+  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 calculateWidth = () => {
+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 };
-};
+}
 </script>
 <template>
   <div
-    class="box-content flex min-h-9 w-full flex-row flex-wrap"
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
     ref="containerRef"
   >
     <div
@@ -116,26 +108,34 @@ const calculateWidth = () => {
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
+        <Image
+          :src="property.badge.imgUrl"
+          class="h-6 w-8 object-cover"
+          :preview="false"
+        />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-36"
+        class="h-[140px]"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-36': property.layoutType === 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
-        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+        <Image
+          class="h-full w-full object-cover"
+          :src="spu.picUrl"
+          :preview="false"
+        />
       </div>
       <div
         class="box-border flex flex-col gap-2 p-2"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[calc(100vw-140px-16px)]':
+            'w-[calc(100%-140px-16px)]':
               property.layoutType === 'oneColSmallImg',
           },
         ]"
@@ -213,9 +213,9 @@ const calculateWidth = () => {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="size-7 rounded-full"
-          fit="cover"
+          class="size-7 rounded-full object-cover"
           :src="property.btnBuy.imgUrl"
+          :preview="false"
         />
       </div>
     </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';
 
@@ -36,7 +35,11 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :model="formData">
+    <Form
+      :model="formData"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
       <Card title="秒杀活动" class="property-group">
         <SeckillShowcase v-model="formData.activityIds" />
       </Card>
@@ -117,6 +120,7 @@ const formData = useVModel(props, 'modelValue', emit);
             width="72px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </FormItem>
@@ -147,6 +151,7 @@ const formData = useVModel(props, 'modelValue', emit);
               width="56px"
               :show-description="false"
             >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
               <template #tip> 建议尺寸：56 * 56</template>
             </UploadImg>
           </FormItem>

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/search-bar/property.vue

@@ -48,7 +48,7 @@ watch(
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :model="formData">
+    <Form :model="formData" :label-col="{ style: { width: '80px' } }">
       <Card title="搜索热词" class="property-group">
         <Draggable
           v-model="formData.hotKeywords"

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,19 @@ 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">
+        <Image
+          :src="index === 0 ? item.activeIconUrl : item.iconUrl"
+          class="!h-[26px] w-[26px] rounded"
+          :preview="false"
+        >
           <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 +54,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"
@@ -87,6 +88,7 @@ const handleThemeChange = () => {
           class="min-w-[200px]"
           :show-description="false"
         >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
           <template #tip> 建议尺寸 375 * 50 </template>
         </UploadImg>
       </FormItem>
@@ -142,5 +144,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,12 +11,15 @@ 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"
-      fit="cover"
-      class="w-full"
+      :preview="false"
+      class="w-full object-cover"
     />
     <div
       class="absolute left-0 top-0 flex h-full w-full flex-col justify-center"
@@ -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/title-bar/property.vue

@@ -47,6 +47,7 @@ const rules = {}; // 表单校验
             height="40px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip>建议尺寸 750*80</template>
           </UploadImg>
         </FormItem>

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

@@ -14,12 +14,12 @@ defineProps<{ property: UserCardProperty }>();
   <div class="flex flex-col">
     <div class="flex items-center justify-between px-4 py-6">
       <div class="flex flex-1 items-center gap-4">
-        <Avatar class="size-14">
-          <IconifyIcon icon="lucide:user" class="size-14" />
+        <Avatar :size="60">
+          <IconifyIcon icon="ep:avatar" :size="60" />
         </Avatar>
-        <span class="text-lg font-bold">芋道源码</span>
+        <span class="text-[18px] font-bold">芋道源码</span>
       </div>
-      <IconifyIcon icon="lucide:qr-code" class="size-5" />
+      <IconifyIcon icon="tdesign:qrcode" :size="20" />
     </div>
     <div class="bg-card flex items-center justify-between px-5 py-2 text-xs">
       <span class="text-orange-500">点击绑定手机号</span>

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-coupon/index.vue

@@ -11,5 +11,6 @@ defineProps<{ property: UserCouponProperty }>();
 <template>
   <Image
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
+    :preview="false"
   />
 </template>

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

@@ -5,11 +5,13 @@ import { Image } from 'ant-design-vue';
 
 /** 用户订单 */
 defineOptions({ name: 'UserOrder' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserOrderProperty }>();
 </script>
 <template>
   <Image
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
+    :preview="false"
   />
 </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,11 +5,13 @@ import { Image } from 'ant-design-vue';
 
 /** 用户资产 */
 defineOptions({ name: 'UserWallet' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserWalletProperty }>();
 </script>
 <template>
   <Image
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
+    :preview="false"
   />
 </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/index.vue

@@ -14,6 +14,7 @@ defineProps<{ property: VideoPlayerProperty }>();
       class="h-full w-full"
       :src="property.posterUrl"
       v-if="property.posterUrl"
+      :preview="false"
     />
     <video
       v-else

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>
 
@@ -47,6 +49,7 @@ const formData = useVModel(props, 'modelValue', emit);
           class="min-w-[80px]"
           :show-description="false"
         >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
           <template #tip> 建议宽度750 </template>
         </UploadImg>
       </FormItem>

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;
 }
@@ -308,17 +315,17 @@ onMounted(() => {
         >
           <Tooltip title="重置">
             <Button @click="handleReset">
-              <IconifyIcon class="size-6" icon="lucide:refresh-cw" />
+              <IconifyIcon class="size-5" icon="lucide:refresh-cw" />
             </Button>
           </Tooltip>
           <Tooltip v-if="previewUrl" title="预览">
             <Button @click="handlePreview">
-              <IconifyIcon class="size-6" icon="lucide:eye" />
+              <IconifyIcon class="size-5" icon="lucide:eye" />
             </Button>
           </Tooltip>
           <Tooltip title="保存">
             <Button @click="handleSave">
-              <IconifyIcon class="size-6" icon="lucide:check" />
+              <IconifyIcon class="size-5" icon="lucide:check" />
             </Button>
           </Tooltip>
         </Button.Group>
@@ -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';
-  // 背景颜色
-  bgColor: string;
-  // 背景图片
-  bgImg: string;
+  bgType: 'color' | 'img'; // 背景类型
+  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"
-              class="cursor-pointer text-red-500 hover:text-red-600"
+              icon="ep:delete"
+              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
-    :title="
-      limit > 0 && limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined
-    "
-  >
+  <Tooltip :title="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/index.ts

@@ -1,4 +1,5 @@
 export { default as AppLinkInput } from './app-link-input/index.vue';
+export { default as AppLinkSelectDialog } from './app-link-input/select-dialog.vue';
 export { default as ColorInput } from './color-input/index.vue';
 export { default as DiyEditor } from './diy-editor/index.vue';
 export { type DiyComponentLibrary, PAGE_LIBS } from './diy-editor/util';

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>