From 21d03d8bace63b26d728644ef09d997092d71b75 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 26 Oct 2025 10:11:36 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90mal?=
 =?UTF-8?q?l=E3=80=91diy-editor=20=E4=BF=AE=E5=A4=8D=20element-plus=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B9=8B=E8=B7=AF=EF=BC=9A=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3=2020%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/color-input/index.vue          |   4 +-
 .../components/mobile/hot-zone/property.vue   |  16 +-
 .../components/mobile/image-bar/property.vue  |  14 +-
 .../components/mobile/menu-grid/property.vue  |  63 +++---
 .../mobile/page-config/property.vue           |   6 +-
 .../mobile/product-list/property.vue          | 119 +++++------
 .../mobile/promotion-article/property.vue     |  27 ++-
 .../mobile/promotion-combination/property.vue | 184 +++++++++---------
 .../components/mobile/tab-bar/property.vue    |  20 +-
 .../mobile/video-player/property.vue          |   4 +-
 .../components/input-with-color/index.vue     |   4 +-
 .../components/component-container.vue        |   8 +-
 .../components/component-library.vue          |   5 +-
 .../components/mobile/Carousel/config.ts      |   5 +-
 .../components/mobile/Carousel/property.vue   |   3 +-
 .../components/mobile/coupon-card/config.ts   |   5 +-
 .../mobile/coupon-card/property.vue           |   3 +-
 .../components/hot-zone-edit-dialog/index.vue |   2 +-
 .../components/mobile/hot-zone/config.ts      |   5 +-
 .../components/mobile/hot-zone/property.vue   |   2 +-
 .../components/mobile/image-bar/config.ts     |   5 +-
 .../components/mobile/image-bar/property.vue  |   3 +-
 .../components/mobile/magic-cube/config.ts    |   5 +-
 .../components/mobile/magic-cube/property.vue |   3 +-
 .../components/mobile/menu-grid/config.ts     |   5 +-
 .../components/mobile/menu-grid/property.vue  |   2 +-
 .../components/mobile/menu-list/config.ts     |   5 +-
 .../components/mobile/menu-list/property.vue  |   2 +-
 .../components/mobile/menu-swiper/config.ts   |   5 +-
 .../mobile/menu-swiper/property.vue           |   2 +-
 .../mobile/navigation-bar/index.vue           |   4 +-
 .../components/mobile/notice-bar/config.ts    |   5 +-
 .../components/mobile/notice-bar/property.vue |   3 +-
 .../components/mobile/product-card/config.ts  |   5 +-
 .../components/mobile/product-list/config.ts  |   5 +-
 .../mobile/product-list/property.vue          |   3 +-
 .../mobile/promotion-article/config.ts        |   5 +-
 .../mobile/promotion-article/property.vue     |   1 +
 .../mobile/promotion-combination/config.ts    |   5 +-
 .../mobile/promotion-point/config.ts          |   5 +-
 .../mobile/promotion-seckill/config.ts        |   5 +-
 .../components/mobile/search-bar/config.ts    |   5 +-
 .../components/mobile/search-bar/property.vue |   3 +-
 .../components/mobile/title-bar/config.ts     |   5 +-
 .../components/mobile/title-bar/property.vue  |   3 +-
 .../components/mobile/user-card/config.ts     |   5 +-
 .../components/mobile/user-coupon/config.ts   |   5 +-
 .../components/mobile/user-order/config.ts    |   5 +-
 .../components/mobile/user-wallet/config.ts   |   5 +-
 .../components/mobile/video-player/config.ts  |   5 +-
 .../mobile/video-player/property.vue          |   3 +-
 .../promotion/components/diy-editor/index.vue |  78 +++-----
 52 files changed, 325 insertions(+), 379 deletions(-)

diff --git a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
index 192dfab15..1ce5abf52 100644
--- a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { PREDEFINE_COLORS } from '@vben/constants';
+// import { PREDEFINE_COLORS } from '@vben/constants';
 
 import { Input, InputGroup } from 'ant-design-vue';
 
@@ -29,7 +29,9 @@ const color = computed({
 
 <template>
   <InputGroup compact>
+    <!-- TODO 芋艿：后续在处理，antd 不支持该组件；
     <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
+    -->
     <Input v-model:value="color" class="flex-1" />
   </InputGroup>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
index edc7751fd..4f4702812 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -5,6 +5,8 @@ import { ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
 
+import { Button, Form, FormItem, Typography } from 'ant-design-vue';
+
 import UploadImg from '#/components/upload/image-upload.vue';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
@@ -28,8 +30,8 @@ const handleOpenEditDialog = () => {
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
-    <ElForm label-width="80px" :model="formData" class="mt-2">
-      <ElFormItem label="上传图片" prop="imgUrl">
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData" class="mt-2">
+      <FormItem label="上传图片" prop="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
           height="50px"
@@ -38,15 +40,15 @@ const handleOpenEditDialog = () => {
           :show-description="false"
         >
           <template #tip>
-            <ElText type="info" size="small"> 推荐宽度 750</ElText>
+            <Typography.Text type="secondary" class="text-xs"> 推荐宽度 750</Typography.Text>
           </template>
         </UploadImg>
-      </ElFormItem>
-    </ElForm>
+      </FormItem>
+    </Form>
 
-    <ElButton type="primary" plain class="w-full" @click="handleOpenEditDialog">
+    <Button type="primary" class="w-full" @click="handleOpenEditDialog">
       设置热区
-    </ElButton>
+    </Button>
   </ComponentContainerProperty>
   <!-- 热区编辑对话框 -->
   <HotZoneEditDialog
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
index 09e35204c..1b54f850c 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
@@ -3,6 +3,8 @@ import type { ImageBarProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
+import { Form, FormItem } from 'ant-design-vue';
+
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput } from '#/views/mall/promotion/components';
 
@@ -18,8 +20,8 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <ElForm label-width="80px" :model="formData">
-      <ElFormItem label="上传图片" prop="imgUrl">
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
+      <FormItem label="上传图片" prop="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
           draggable="false"
@@ -30,11 +32,11 @@ const formData = useVModel(props, 'modelValue', emit);
         >
           <template #tip> 建议宽度750 </template>
         </UploadImg>
-      </ElFormItem>
-      <ElFormItem label="链接" prop="url">
+      </FormItem>
+      <FormItem label="链接" prop="url">
         <AppLinkInput v-model="formData.url" />
-      </ElFormItem>
-    </ElForm>
+      </FormItem>
+    </Form>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
index 45a92daec..c1506a4ca 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
@@ -3,12 +3,13 @@ import type { MenuGridProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 import {
-  ElCard,
-  ElForm,
-  ElFormItem,
-  ElRadio,
-  ElRadioGroup,
-  ElSwitch,
+  Card,
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Switch,
+} from 'ant-design-vue';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
@@ -27,21 +28,21 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
-    <ElForm label-width="80px" :model="formData" class="mt-2">
-      <ElFormItem label="每行数量" prop="column">
-        <ElRadioGroup v-model="formData.column">
-          <ElRadio :value="3">3个</ElRadio>
-          <ElRadio :value="4">4个</ElRadio>
-        </ElRadioGroup>
-      </ElFormItem>
+    <Form label-width="80px" :model="formData" class="mt-2">
+      <FormItem label="每行数量" prop="column">
+        <RadioGroup v-model="formData.column">
+          <Radio :value="3">3个</Radio>
+          <Radio :value="4">4个</Radio>
+        </RadioGroup>
+      </FormItem>
 
-      <ElCard header="菜单设置" class="property-group" shadow="never">
+      <Card header="菜单设置" class="property-group" shadow="never">
         <Draggable
           v-model="formData.list"
           :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"
         >
           <template #default="{ element }">
-            <ElFormItem label="图标" prop="iconUrl">
+            <FormItem label="图标" prop="iconUrl">
               <UploadImg
                 v-model="element.iconUrl"
                 height="80px"
@@ -50,40 +51,40 @@ const formData = useVModel(props, 'modelValue', emit);
               >
                 <template #tip> 建议尺寸：44 * 44 </template>
               </UploadImg>
-            </ElFormItem>
-            <ElFormItem label="标题" prop="title">
+            </FormItem>
+            <FormItem label="标题" prop="title">
               <InputWithColor
                 v-model="element.title"
                 v-model:color="element.titleColor"
               />
-            </ElFormItem>
-            <ElFormItem label="副标题" prop="subtitle">
+            </FormItem>
+            <FormItem label="副标题" prop="subtitle">
               <InputWithColor
                 v-model="element.subtitle"
                 v-model:color="element.subtitleColor"
               />
-            </ElFormItem>
-            <ElFormItem label="链接" prop="url">
+            </FormItem>
+            <FormItem label="链接" prop="url">
               <AppLinkInput v-model="element.url" />
-            </ElFormItem>
-            <ElFormItem label="显示角标" prop="badge.show">
-              <ElSwitch v-model="element.badge.show" />
-            </ElFormItem>
+            </FormItem>
+            <FormItem label="显示角标" prop="badge.show">
+              <Switch v-model="element.badge.show" />
+            </FormItem>
             <template v-if="element.badge.show">
-              <ElFormItem label="角标内容" prop="badge.text">
+              <FormItem label="角标内容" prop="badge.text">
                 <InputWithColor
                   v-model="element.badge.text"
                   v-model:color="element.badge.textColor"
                 />
-              </ElFormItem>
-              <ElFormItem label="背景颜色" prop="badge.bgColor">
+              </FormItem>
+              <FormItem label="背景颜色" prop="badge.bgColor">
                 <ColorInput v-model="element.badge.bgColor" />
-              </ElFormItem>
+              </FormItem>
             </template>
           </template>
         </Draggable>
-      </ElCard>
-    </ElForm>
+      </Card>
+    </Form>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
index 7f9e8b9d7..498f334be 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
@@ -3,6 +3,8 @@ import type { PageConfigProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
+import { Form, FormItem, Textarea } from 'ant-design-vue';
+
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
 
@@ -22,8 +24,8 @@ const formData = useVModel(props, 'modelValue', emit);
   <Form
     :model="formData"
     :rules="rules"
-    label-col="{ span: 6 }"
-    wrapper-col="{ span: 18 }"
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 18 }"
   >
     <FormItem label="页面描述" name="description">
       <Textarea
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
index dfdc977bb..598f304d1 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
@@ -5,6 +5,18 @@ import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
 import UploadImg from '#/components/upload/image-upload.vue';
 import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
 
@@ -22,48 +34,48 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <ElForm label-width="80px" :model="formData">
-      <ElCard header="商品列表" class="property-group" shadow="never">
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
+      <Card title="商品列表" class="property-group" :bordered="false">
         <!-- <SpuShowcase v-model="formData.spuIds" /> -->
-      </ElCard>
-      <ElCard header="商品样式" class="property-group" shadow="never">
-        <ElFormItem label="布局" prop="type">
-          <ElRadioGroup v-model="formData.layoutType">
-            <ElTooltip class="item" content="双列" placement="bottom">
-              <ElRadioButton value="twoCol">
+      </Card>
+      <Card title="商品样式" class="property-group" :bordered="false">
+        <FormItem label="布局" prop="type">
+          <RadioGroup v-model:value="formData.layoutType">
+            <Tooltip title="双列" placement="bottom">
+              <RadioButton value="twoCol">
                 <IconifyIcon icon="fluent:text-column-two-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>
-            <ElTooltip class="item" content="三列" placement="bottom">
-              <ElRadioButton value="threeCol">
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="三列" placement="bottom">
+              <RadioButton value="threeCol">
                 <IconifyIcon icon="fluent:text-column-three-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>
-            <ElTooltip class="item" content="水平滑动" placement="bottom">
-              <ElRadioButton value="horizSwiper">
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="水平滑动" placement="bottom">
+              <RadioButton value="horizSwiper">
                 <IconifyIcon icon="system-uicons:carousel" />
-              </ElRadioButton>
-            </ElTooltip>
-          </ElRadioGroup>
-        </ElFormItem>
-        <ElFormItem label="商品名称" prop="fields.name.show">
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="商品名称" prop="fields.name.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.name.color" />
-            <ElCheckbox v-model="formData.fields.name.show" />
+            <Checkbox v-model:checked="formData.fields.name.show" />
           </div>
-        </ElFormItem>
-        <ElFormItem label="商品价格" prop="fields.price.show">
+        </FormItem>
+        <FormItem label="商品价格" prop="fields.price.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.price.color" />
-            <ElCheckbox v-model="formData.fields.price.show" />
+            <Checkbox v-model:checked="formData.fields.price.show" />
           </div>
-        </ElFormItem>
-      </ElCard>
-      <ElCard header="角标" class="property-group" shadow="never">
-        <ElFormItem label="角标" prop="badge.show">
-          <ElSwitch v-model="formData.badge.show" />
-        </ElFormItem>
-        <ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+        </FormItem>
+      </Card>
+      <Card title="角标" class="property-group" :bordered="false">
+        <FormItem label="角标" prop="badge.show">
+          <Switch v-model:checked="formData.badge.show" />
+        </FormItem>
+        <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg
             v-model="formData.badge.imgUrl"
             height="44px"
@@ -72,41 +84,32 @@ const formData = useVModel(props, 'modelValue', emit);
           >
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
-        </ElFormItem>
-      </ElCard>
-      <ElCard header="商品样式" class="property-group" shadow="never">
-        <ElFormItem label="上圆角" prop="borderRadiusTop">
-          <ElSlider
-            v-model="formData.borderRadiusTop"
+        </FormItem>
+      </Card>
+      <Card title="商品样式" class="property-group" :bordered="false">
+        <FormItem label="上圆角" prop="borderRadiusTop">
+          <Slider
+            v-model:value="formData.borderRadiusTop"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
-        </ElFormItem>
-        <ElFormItem label="下圆角" prop="borderRadiusBottom">
-          <ElSlider
-            v-model="formData.borderRadiusBottom"
+        </FormItem>
+        <FormItem label="下圆角" prop="borderRadiusBottom">
+          <Slider
+            v-model:value="formData.borderRadiusBottom"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
-        </ElFormItem>
-        <ElFormItem label="间隔" prop="space">
-          <ElSlider
-            v-model="formData.space"
+        </FormItem>
+        <FormItem label="间隔" prop="space">
+          <Slider
+            v-model:value="formData.space"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
-        </ElFormItem>
-      </ElCard>
-    </ElForm>
+        </FormItem>
+      </Card>
+    </Form>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
index 9cd1df023..fb6852fb2 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -7,6 +7,8 @@ import { onMounted, ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
 
+import { Form, FormItem, Select } from 'ant-design-vue';
+
 import * as ArticleApi from '#/api/mall/promotion/article/index';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
@@ -42,26 +44,19 @@ onMounted(() => {
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <ElForm label-width="40px" :model="formData">
-      <ElFormItem label="文章" prop="id">
-        <ElSelect
-          v-model="formData.id"
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
+      <FormItem label="文章" prop="id">
+        <Select
+          v-model:value="formData.id"
           placeholder="请选择文章"
           class="w-full"
           filterable
-          remote
-          :remote-method="queryArticleList"
           :loading="loading"
-        >
-          <ElOption
-            v-for="article in articles"
-            :key="article.id"
-            :label="article.title"
-            :value="article.id"
-          />
-        </ElSelect>
-      </ElFormItem>
-    </ElForm>
+          :options="articles.map((item) => ({ label: item.title, value: item.id }))"
+          @search="queryArticleList"
+        />
+      </FormItem>
+    </Form>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
index 37d37a9d1..3732af95a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
@@ -10,6 +10,20 @@ import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Input,
+  Radio,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
 import * as CombinationActivityApi 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';
@@ -35,102 +49,97 @@ onMounted(async () => {
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <ElForm label-width="80px" :model="formData">
-      <ElCard header="拼团活动" class="property-group" shadow="never">
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
+      <Card title="拼团活动" class="property-group" :bordered="false">
         <CombinationShowcase v-model="formData.activityIds" />
-      </ElCard>
-      <ElCard header="商品样式" class="property-group" shadow="never">
-        <ElFormItem label="布局" prop="type">
-          <ElRadioGroup v-model="formData.layoutType">
-            <ElTooltip class="item" content="单列大图" placement="bottom">
-              <ElRadioButton value="oneColBigImg">
+      </Card>
+      <Card title="商品样式" class="property-group" :bordered="false">
+        <FormItem label="布局" prop="type">
+          <RadioGroup v-model:value="formData.layoutType">
+            <Tooltip title="单列大图" placement="bottom">
+              <RadioButton value="oneColBigImg">
                 <IconifyIcon icon="fluent:text-column-one-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>
-            <ElTooltip class="item" content="单列小图" placement="bottom">
-              <ElRadioButton value="oneColSmallImg">
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="单列小图" placement="bottom">
+              <RadioButton value="oneColSmallImg">
                 <IconifyIcon icon="fluent:text-column-two-left-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>
-            <ElTooltip class="item" content="双列" placement="bottom">
-              <ElRadioButton value="twoCol">
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="双列" placement="bottom">
+              <RadioButton value="twoCol">
                 <IconifyIcon icon="fluent:text-column-two-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>
-            <!--<el-tooltip class="item" content="三列" placement="bottom">
-              <el-radio-button value="threeCol">
-                <IconifyIcon icon="fluent:text-column-three-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>-->
-          </ElRadioGroup>
-        </ElFormItem>
-        <ElFormItem label="商品名称" prop="fields.name.show">
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="商品名称" prop="fields.name.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.name.color" />
-            <ElCheckbox v-model="formData.fields.name.show" />
+            <Checkbox v-model:checked="formData.fields.name.show" />
           </div>
-        </ElFormItem>
-        <ElFormItem label="商品简介" prop="fields.introduction.show">
+        </FormItem>
+        <FormItem label="商品简介" prop="fields.introduction.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.introduction.color" />
-            <ElCheckbox v-model="formData.fields.introduction.show" />
+            <Checkbox v-model:checked="formData.fields.introduction.show" />
           </div>
-        </ElFormItem>
-        <ElFormItem label="商品价格" prop="fields.price.show">
+        </FormItem>
+        <FormItem label="商品价格" prop="fields.price.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.price.color" />
-            <ElCheckbox v-model="formData.fields.price.show" />
+            <Checkbox v-model:checked="formData.fields.price.show" />
           </div>
-        </ElFormItem>
-        <ElFormItem label="市场价" prop="fields.marketPrice.show">
+        </FormItem>
+        <FormItem label="市场价" prop="fields.marketPrice.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.marketPrice.color" />
-            <ElCheckbox v-model="formData.fields.marketPrice.show" />
+            <Checkbox v-model:checked="formData.fields.marketPrice.show" />
           </div>
-        </ElFormItem>
-        <ElFormItem label="商品销量" prop="fields.salesCount.show">
+        </FormItem>
+        <FormItem label="商品销量" prop="fields.salesCount.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.salesCount.color" />
-            <ElCheckbox v-model="formData.fields.salesCount.show" />
+            <Checkbox v-model:checked="formData.fields.salesCount.show" />
           </div>
-        </ElFormItem>
-        <ElFormItem label="商品库存" prop="fields.stock.show">
+        </FormItem>
+        <FormItem label="商品库存" prop="fields.stock.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.stock.color" />
-            <ElCheckbox v-model="formData.fields.stock.show" />
+            <Checkbox v-model:checked="formData.fields.stock.show" />
           </div>
-        </ElFormItem>
-      </ElCard>
-      <ElCard header="角标" class="property-group" shadow="never">
-        <ElFormItem label="角标" prop="badge.show">
-          <ElSwitch v-model="formData.badge.show" />
-        </ElFormItem>
-        <ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+        </FormItem>
+      </Card>
+      <Card title="角标" class="property-group" :bordered="false">
+        <FormItem label="角标" prop="badge.show">
+          <Switch v-model:checked="formData.badge.show" />
+        </FormItem>
+        <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
             <template #tip> 建议尺寸：36 * 22</template>
           </UploadImg>
-        </ElFormItem>
-      </ElCard>
-      <ElCard header="按钮" class="property-group" shadow="never">
-        <ElFormItem label="按钮类型" prop="btnBuy.type">
-          <ElRadioGroup v-model="formData.btnBuy.type">
-            <ElRadioButton value="text">文字</ElRadioButton>
-            <ElRadioButton value="img">图片</ElRadioButton>
-          </ElRadioGroup>
-        </ElFormItem>
+        </FormItem>
+      </Card>
+      <Card title="按钮" class="property-group" :bordered="false">
+        <FormItem label="按钮类型" prop="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'">
-          <ElFormItem label="按钮文字" prop="btnBuy.text">
-            <ElInput v-model="formData.btnBuy.text" />
-          </ElFormItem>
-          <ElFormItem label="左侧背景" prop="btnBuy.bgBeginColor">
+          <FormItem label="按钮文字" prop="btnBuy.text">
+            <Input v-model:value="formData.btnBuy.text" />
+          </FormItem>
+          <FormItem label="左侧背景" prop="btnBuy.bgBeginColor">
             <ColorInput v-model="formData.btnBuy.bgBeginColor" />
-          </ElFormItem>
-          <ElFormItem label="右侧背景" prop="btnBuy.bgEndColor">
+          </FormItem>
+          <FormItem label="右侧背景" prop="btnBuy.bgEndColor">
             <ColorInput v-model="formData.btnBuy.bgEndColor" />
-          </ElFormItem>
+          </FormItem>
         </template>
         <template v-else>
-          <ElFormItem label="图片" prop="btnBuy.imgUrl">
+          <FormItem label="图片" prop="btnBuy.imgUrl">
             <UploadImg
               v-model="formData.btnBuy.imgUrl"
               height="56px"
@@ -139,42 +148,33 @@ onMounted(async () => {
             >
               <template #tip> 建议尺寸：56 * 56</template>
             </UploadImg>
-          </ElFormItem>
+          </FormItem>
         </template>
-      </ElCard>
-      <ElCard header="商品样式" class="property-group" shadow="never">
-        <ElFormItem label="上圆角" prop="borderRadiusTop">
-          <ElSlider
-            v-model="formData.borderRadiusTop"
+      </Card>
+      <Card title="商品样式" class="property-group" :bordered="false">
+        <FormItem label="上圆角" prop="borderRadiusTop">
+          <Slider
+            v-model:value="formData.borderRadiusTop"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
-        </ElFormItem>
-        <ElFormItem label="下圆角" prop="borderRadiusBottom">
-          <ElSlider
-            v-model="formData.borderRadiusBottom"
+        </FormItem>
+        <FormItem label="下圆角" prop="borderRadiusBottom">
+          <Slider
+            v-model:value="formData.borderRadiusBottom"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
-        </ElFormItem>
-        <ElFormItem label="间隔" prop="space">
-          <ElSlider
-            v-model="formData.space"
+        </FormItem>
+        <FormItem label="间隔" prop="space">
+          <Slider
+            v-model:value="formData.space"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
-        </ElFormItem>
-      </ElCard>
-    </ElForm>
+        </FormItem>
+      </Card>
+    </Form>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
index c5f37404a..6eb9ac0ef 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
@@ -5,6 +5,16 @@ import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 
+import {
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
@@ -35,7 +45,7 @@ const handleThemeChange = () => {
 <template>
   <div class="tab-bar">
     <!-- 表单 -->
-    <Form :model="formData" label-col="{ span: 6 }" wrapper-col="{ span: 18 }">
+    <Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
       <FormItem label="主题" name="theme">
         <Select v-model:value="formData!.theme" @change="handleThemeChange">
           <SelectOption
@@ -109,8 +119,8 @@ const handleThemeChange = () => {
           <FormItem
             name="text"
             label="文字"
-            label-col="{ span: 4 }"
-            wrapper-col="{ span: 20 }"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
             class="mb-2"
           >
             <Input v-model:value="element.text" placeholder="请输入文字" />
@@ -118,8 +128,8 @@ const handleThemeChange = () => {
           <FormItem
             name="url"
             label="链接"
-            label-col="{ span: 4 }"
-            wrapper-col="{ span: 20 }"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
             class="mb-0"
           >
             <AppLinkInput v-model="element.url" />
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
index 762f6193c..1e96e7364 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
@@ -3,6 +3,8 @@ import type { VideoPlayerProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
+import { Form, FormItem, Slider, Switch } from 'ant-design-vue';
+
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
@@ -23,7 +25,7 @@ const formData = useVModel(props, 'modelValue', emit);
         <Slider v-model:value="formData.style.height" :max="500" :min="100" />
       </FormItem>
     </template>
-    <Form :model="formData" label-col="{ span: 6 }" wrapper-col="{ span: 18 }">
+    <Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
       <FormItem label="上传视频" name="videoUrl">
         <UploadFile
           v-model="formData.videoUrl"
diff --git a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
index 879ba756b..25b08a03e 100644
--- a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PREDEFINE_COLORS } from '@vben/constants';
+// import { PREDEFINE_COLORS } from '@vben/constants';
 
 import { useVModels } from '@vueuse/core';
 import { Input, InputGroup } from 'ant-design-vue';
@@ -26,7 +26,9 @@ const { modelValue, color } = useVModels(props, emit);
 <template>
   <InputGroup compact>
     <Input v-model:value="modelValue" v-bind="$attrs" class="flex-1" />
+    <!-- TODO 芋艿：后续在处理，antd 不支持该组件；
     <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
+    -->
   </InputGroup>
 </template>
 <style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
index 0b937b980..a3181d594 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../util';
+import type { ComponentStyle, DiyComponent } from '../util';
 
 import { computed } from 'vue';
 
@@ -10,9 +7,10 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElButton, ElTooltip } from 'element-plus';
 
-import { components } from './mobile';
 import { VerticalButtonGroup } from '#/views/mall/promotion/components';
 
+import { components } from './mobile';
+
 /**
  * 组件容器：目前在中间部分
  * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
index b4635a763..4220ad08b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
-  DiyComponent,
-  DiyComponentLibrary,
-} from '../util';
+import type { DiyComponent, DiyComponentLibrary } from '../util';
 
 import { reactive, watch } from 'vue';
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
index 514f45e89..f63a0bcb6 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 轮播图属性 */
 export interface CarouselProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
index ad75bf3c7..1e23b0e32 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
@@ -16,11 +16,12 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 轮播图属性面板
 defineOptions({ name: 'CarouselProperty' });
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
index 89cc71703..4392494d3 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品卡片属性 */
 export interface CouponCardProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
index f2ae0146e..9778fdd62 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
@@ -24,9 +24,10 @@ import {
 } from 'element-plus';
 
 import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
 // TODO: 添加组件
 // import CouponSelect from '#/views/mall/promotion/coupon/components/coupon-select.vue';
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
index b20a14b55..f59459a3f 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { HotZoneItemProperty } from '../../config';
 import type { ControlDot } from './controller';
 
-import type { HotZoneItemProperty } from '../../config';
 import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
 
 import { ref } from 'vue';
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
index fdb06b983..464881740 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 热区属性 */
 export interface HotZoneProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
index 9c16c1a14..bb3ebb667 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -6,9 +6,9 @@ import { ref } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { ElButton, ElForm, ElFormItem, ElText } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
 
 /** 热区属性面板 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
index 1d2c4ac01..0025ff4db 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 图片展示属性 */
 export interface ImageBarProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
index 14ee9ad13..a379a8613 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
@@ -4,10 +4,11 @@ import type { ImageBarProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 图片展示属性面板
 defineOptions({ name: 'ImageBarProperty' });
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
index ff9cbb8f0..ef03fc9a6 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 广告魔方属性 */
 export interface MagicCubeProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
index 7dad8a3f8..1f23095c6 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
@@ -6,13 +6,14 @@ import { ref } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElSlider, ElText } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
   MagicCubeEditor,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 /** 广告魔方属性面板 */
 defineOptions({ name: 'MagicCubeProperty' });
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
index 65bc9f4ca..db6b55264 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
index ef2df4ae7..9db7ac2ad 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
@@ -11,10 +11,10 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
 
 /** 宫格导航属性面板 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
index 389982595..6567c553d 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
index e31b02e77..c5b076936 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
@@ -4,7 +4,6 @@ import type { MenuListProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElText } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
@@ -12,6 +11,7 @@ import {
   InputWithColor,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
 
 /** 列表导航属性面板 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
index b73213ac7..27138ebee 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
index e8e1637e7..54f58eae5 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
@@ -13,7 +13,6 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
@@ -22,6 +21,7 @@ import {
   InputWithColor,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
 
 /** 菜单导航属性面板 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
index 28376f73e..9e3b17a07 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import type { StyleValue } from 'vue';
 
+import type { SearchProperty } from '../search-bar/config';
 import type {
   NavigationBarCellProperty,
   NavigationBarProperty,
 } from './config';
 
-import type { SearchProperty } from '../search-bar/config';
-
 import { computed } from 'vue';
 
 import appNavbarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
+
 import SearchBar from '../search-bar/index.vue';
 
 /** 页面顶部导航栏 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
index 9eb1ca8e1..2d4acffb2 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 公告栏属性 */
 export interface NoticeBarProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
index e6fef5313..055aa2e10 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
@@ -4,7 +4,6 @@ import type { NoticeBarProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
@@ -12,6 +11,8 @@ import {
   Draggable,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 通知栏属性面板
 defineOptions({ name: 'NoticeBarProperty' });
 const props = defineProps<{ modelValue: NoticeBarProperty }>();
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
index 1dd88d7b8..d165b01f6 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品卡片属性 */
 export interface ProductCardProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
index 069dcabdc..20b4d37af 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品栏属性 */
 export interface ProductListProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
index 55b0cf03c..8e941b599 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
@@ -15,9 +15,10 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { InputWithColor as 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';
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
index c477994aa..9a1fc4194 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 营销文章属性 */
 export interface PromotionArticleProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
index eb53a3072..7a701c54f 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -9,6 +9,7 @@ import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElOption, ElSelect } from 'element-plus';
 
 import * as ArticleApi from '#/api/mall/promotion/article/index';
+
 import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 营销文章属性面板
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
index 3860ccd56..f0497dc19 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 拼团属性 */
 export interface PromotionCombinationProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
index bdb5cacc4..738ca3b31 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 积分商城属性 */
 export interface PromotionPointProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
index 289fc4e80..a38d9455b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 秒杀属性 */
 export interface PromotionSeckillProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
index d30952a02..01d5894d1 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 搜索框属性 */
 export interface SearchProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
index 5aa4da7c1..5e1822078 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
@@ -18,9 +18,10 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import { Draggable } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 /** 搜索框属性面板 */
 defineOptions({ name: 'SearchProperty' });
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
index 71a61cef8..f442e7dc5 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 标题栏属性 */
 export interface TitleBarProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
index 97d78c16c..1fdafb90a 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
@@ -16,13 +16,14 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
   InputWithColor,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 导航栏属性面板
 defineOptions({ name: 'TitleBarProperty' });
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
index 7cb187c28..2dae34da2 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡片属性 */
 export interface UserCardProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
index 5b5728185..7e5dcd1f9 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡券属性 */
 export interface UserCouponProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
index 5cea121ac..25ca85065 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户订单属性 */
 export interface UserOrderProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
index dd9c56d31..2b10d32fb 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户资产属性 */
 export interface UserWalletProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
index ec160c0bc..bc9195575 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 视频播放属性 */
 export interface VideoPlayerProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
index cb2e8e4bd..67c355905 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
@@ -4,10 +4,11 @@ import type { VideoPlayerProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElSlider, ElSwitch } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 视频播放属性面板
 defineOptions({ name: 'VideoPlayerProperty' });
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
index f9f7d9c89..6634cd8ce 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
@@ -10,7 +10,6 @@ import { cloneDeep, isEmpty, isString } from '@vben/utils';
 import { useQRCode } from '@vueuse/integrations/useQRCode';
 import {
   ElAside,
-  ElButtonGroup,
   ElCard,
   ElContainer,
   ElDialog,
@@ -20,18 +19,14 @@ import {
   ElText,
   ElTooltip,
 } from 'element-plus';
-import draggable from 'vuedraggable';
 
 import statusBarImg from '#/assets/imgs/diy/statusBar.png';
-import {
-  componentConfigs,
-  components,
-} from './components/mobile';
-import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
 
 import ComponentContainer from './components/component-container.vue';
 import ComponentLibrary from './components/component-library.vue';
+import { componentConfigs, components } from './components/mobile';
 import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/navigation-bar/config';
+import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
 import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
 /** 页面装修详情页 */
 defineOptions({
@@ -312,35 +307,40 @@ onMounted(() => {
           <span>{{ title }}</span>
         </div>
         <!-- 右侧操作区 -->
-        <ElButtonGroup class="header-right">
-          <ElTooltip content="重置">
+        <div class="header-right">
+          <ElTooltip title="重置">
             <ElButton @click="handleReset">
               <IconifyIcon :size="24" icon="system-uicons:reset-alt" />
             </ElButton>
           </ElTooltip>
-          <ElTooltip v-if="previewUrl" content="预览">
+          <ElTooltip v-if="previewUrl" title="预览">
             <ElButton @click="handlePreview">
               <IconifyIcon :size="24" icon="ep:view" />
             </ElButton>
           </ElTooltip>
-          <ElTooltip content="保存">
+          <ElTooltip title="保存">
             <ElButton @click="handleSave">
               <IconifyIcon :size="24" icon="ep:check" />
             </ElButton>
           </ElTooltip>
-        </ElButtonGroup>
+        </div>
       </ElHeader>
 
       <!-- 中心区域 -->
       <ElContainer class="editor-container">
         <!-- 左侧：组件库（ComponentLibrary） -->
-        <ComponentLibrary
-          v-if="libs && libs.length > 0"
-          ref="componentLibrary"
-          :list="libs"
-        />
+        <ElAside width="200px" class="editor-left">
+          <ComponentLibrary
+            v-if="libs && libs.length > 0"
+            ref="componentLibrary"
+            :list="libs"
+          />
+        </ElAside>
         <!-- 中心：设计区域（ComponentContainer） -->
-        <div class="editor-center page-prop-area" @click="handlePageSelected">
+        <ElContainer
+          class="editor-center page-prop-area"
+          @click="handlePageSelected"
+        >
           <!-- 手机顶部 -->
           <div class="editor-design-top">
             <!-- 手机顶部状态栏 -->
@@ -371,15 +371,7 @@ onMounted(() => {
             />
           </div>
           <!-- 手机页面编辑区域 -->
-          <ElScrollbar
-            :view-style="{
-              backgroundColor: pageConfigComponent.property.backgroundColor,
-              backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
-            }"
-            view-class="phone-container"
-            wrap-class="editor-design-center page-prop-area"
-            style="height: calc(100vh - 135px - 120px)"
-          >
+          <ElScrollbar class="phone-container">
             <draggable
               v-model="pageComponents"
               :animation="200"
@@ -424,42 +416,36 @@ onMounted(() => {
           <div class="fixed-component-action-group gap-2">
             <ElTag
               v-if="showPageConfig"
-              :effect="
+              :color="
                 selectedComponent?.uid === pageConfigComponent.uid
-                  ? 'dark'
-                  : 'plain'
-              "
-              :type="
-                selectedComponent?.uid === pageConfigComponent.uid
-                  ? 'primary'
-                  : 'info'
+                  ? 'blue'
+                  : 'default'
               "
+              :bordered="false"
               size="large"
               @click="handleComponentSelected(pageConfigComponent)"
             >
               <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
-              <span>{{ pageConfigComponent.name }}</span>
+              <ElText>{{ pageConfigComponent.name }}</ElText>
             </ElTag>
             <template v-for="(component, index) in pageComponents" :key="index">
               <ElTag
                 v-if="component.position === 'fixed'"
-                :effect="
-                  selectedComponent?.uid === component.uid ? 'dark' : 'plain'
-                "
-                :type="
-                  selectedComponent?.uid === component.uid ? 'primary' : 'info'
+                :color="
+                  selectedComponent?.uid === component.uid ? 'blue' : 'default'
                 "
+                :bordered="false"
                 closable
                 size="large"
                 @click="handleComponentSelected(component)"
                 @close="handleDeleteComponent(index)"
               >
                 <IconifyIcon :icon="component.icon" :size="12" />
-                <span>{{ component.name }}</span>
+                <ElText>{{ component.name }}</ElText>
               </ElTag>
             </template>
           </div>
-        </div>
+        </ElContainer>
         <!-- 右侧：属性面板（ComponentContainerProperty） -->
         <ElAside
           v-if="selectedComponent?.property"
@@ -469,13 +455,13 @@ onMounted(() => {
           <ElCard
             body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
             class="h-full"
-            shadow="never"
+            :bordered="false"
           >
             <!-- 组件名称 -->
             <template #header>
               <div class="flex items-center gap-2">
                 <IconifyIcon :icon="selectedComponent?.icon" color="gray" />
-                <span>{{ selectedComponent?.name }}</span>
+                <ElText>{{ selectedComponent?.name }}</ElText>
               </div>
             </template>
             <ElScrollbar
@@ -494,7 +480,7 @@ onMounted(() => {
     </ElContainer>
 
     <!-- 预览弹框 -->
-    <ElDialog v-model="previewDialogVisible" title="预览" width="700">
+    <ElDialog v-model:open="previewDialogVisible" title="预览" width="700">
       <div class="flex justify-around">
         <IFrame
           :src="previewUrl"