From b8c66b23f9bd47cbfa6a198925194b75d289a62d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=83=E8=B4=A7?= <252048765@qq.com>
Date: Sun, 10 Aug 2025 21:17:03 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20(ele,diy-editor)=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=BA=93=E7=BB=93=E6=9E=84=E5=92=8C=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 ComponentContainer、ComponentContainerProperty、ComponentLibrary 组件
- 优化导航栏单元格属性组件，更名为 CellProperty
- 更新优惠券相关组件导出方式
- 删除旧版 ComponentContainer 组件
---
 ...y.vue => component-container-property.vue} |   2 +-
 ...tContainer.vue => component-container.vue} |  12 +-
 ...onentLibrary.vue => component-library.vue} |   4 +-
 .../components/mobile/Carousel/property.vue   |  18 +-
 .../mobile/CouponCard/component.tsx           |   4 -
 .../components/mobile/Divider/property.vue    |  78 ++++----
 .../components/mobile/MenuList/index.vue      |  40 -----
 .../components/mobile/MenuSwiper/property.vue |  88 ---------
 .../components/mobile/NoticeBar/index.vue     |  34 ----
 .../components/mobile/Popover/index.vue       |  14 +-
 .../components/mobile/Popover/property.vue    |  42 +++--
 .../mobile/ProductList/property.vue           | 110 ------------
 .../components/mobile/TitleBar/property.vue   | 150 ----------------
 .../components/mobile/UserCard/index.vue      |  31 ----
 .../mobile/coupon-card/component.tsx          |   4 +
 .../{CouponCard => coupon-card}/config.ts     |   0
 .../coupon-discount-desc.tsx}                 |   0
 .../coupon-discount.tsx}                      |   0
 .../coupon-validTerm.tsx}                     |   0
 .../{CouponCard => coupon-card}/index.vue     |   0
 .../{CouponCard => coupon-card}/property.vue  |   7 +-
 .../config.ts                                 |   0
 .../index.vue                                 |   0
 .../property.vue                              |   0
 .../hot-zone-edit-dialog}/controller.ts       |   0
 .../hot-zone-edit-dialog}/index.vue           |   0
 .../mobile/{HotZone => hot-zone}/config.ts    |   0
 .../mobile/{HotZone => hot-zone}/index.vue    |   4 +-
 .../mobile/{HotZone => hot-zone}/property.vue |  26 ++-
 .../mobile/{ImageBar => image-bar}/config.ts  |   0
 .../mobile/{ImageBar => image-bar}/index.vue  |   9 +-
 .../{ImageBar => image-bar}/property.vue      |  18 +-
 .../{MagicCube => magic-cube}/config.ts       |   4 +
 .../{MagicCube => magic-cube}/index.vue       |   9 +-
 .../{MagicCube => magic-cube}/property.vue    |  41 +++--
 .../mobile/{MenuGrid => menu-grid}/config.ts  |   0
 .../mobile/{MenuGrid => menu-grid}/index.vue  |   0
 .../{MenuGrid => menu-grid}/property.vue      |   4 +-
 .../mobile/{MenuList => menu-list}/config.ts  |   0
 .../components/mobile/menu-list/index.vue     |  44 +++++
 .../{MenuList => menu-list}/property.vue      |  30 ++--
 .../{MenuSwiper => menu-swiper}/config.ts     |   0
 .../{MenuSwiper => menu-swiper}/index.vue     |  15 +-
 .../mobile/menu-swiper/property.vue           | 103 +++++++++++
 .../components/cell-property.vue}             |   0
 .../config.ts                                 |   0
 .../index.vue                                 |   4 +-
 .../property.vue                              |   6 +-
 .../{NoticeBar => notice-bar}/config.ts       |   0
 .../components/mobile/notice-bar/index.vue    |  37 ++++
 .../{NoticeBar => notice-bar}/property.vue    |  38 ++--
 .../{PageConfig => page-config}/config.ts     |   0
 .../{PageConfig => page-config}/property.vue  |  21 ++-
 .../{ProductCard => product-card}/config.ts   |   0
 .../{ProductCard => product-card}/index.vue   |   0
 .../property.vue                              |  12 +-
 .../{ProductList => product-list}/config.ts   |   0
 .../{ProductList => product-list}/index.vue   |  19 +-
 .../mobile/product-list/property.vue          | 119 +++++++++++++
 .../config.ts                                 |   0
 .../index.vue                                 |   2 +-
 .../property.vue                              |  17 +-
 .../config.ts                                 |   0
 .../index.vue                                 |   2 +-
 .../property.vue                              |  12 +-
 .../config.ts                                 |   0
 .../index.vue                                 |   2 +-
 .../property.vue                              |  12 +-
 .../config.ts                                 |   0
 .../index.vue                                 |   0
 .../property.vue                              |  12 +-
 .../{SearchBar => search-bar}/config.ts       |   0
 .../{SearchBar => search-bar}/index.vue       |   0
 .../{SearchBar => search-bar}/property.vue    |   4 +-
 .../mobile/{TabBar => tab-bar}/config.ts      |   0
 .../mobile/{TabBar => tab-bar}/index.vue      |   0
 .../mobile/{TabBar => tab-bar}/property.vue   |   0
 .../mobile/{TitleBar => title-bar}/config.ts  |   0
 .../mobile/{TitleBar => title-bar}/index.vue  |   7 +-
 .../components/mobile/title-bar/property.vue  | 167 ++++++++++++++++++
 .../mobile/{UserCard => user-card}/config.ts  |   0
 .../components/mobile/user-card/index.vue     |  34 ++++
 .../{UserCard => user-card}/property.vue      |   1 +
 .../{UserCoupon => user-coupon}/config.ts     |   0
 .../{UserCoupon => user-coupon}/index.vue     |   4 +-
 .../{UserCoupon => user-coupon}/property.vue  |   1 +
 .../{UserOrder => user-order}/config.ts       |   0
 .../{UserOrder => user-order}/index.vue       |   4 +-
 .../{UserOrder => user-order}/property.vue    |   1 +
 .../{UserWallet => user-wallet}/config.ts     |   0
 .../{UserWallet => user-wallet}/index.vue     |   4 +-
 .../{UserWallet => user-wallet}/property.vue  |   1 +
 .../{VideoPlayer => video-player}/config.ts   |   0
 .../{VideoPlayer => video-player}/index.vue   |   4 +-
 .../property.vue                              |  32 ++--
 .../src/components/diy-editor/index.vue       |  10 +-
 .../src/components/upload/image-upload.vue    |   5 +-
 97 files changed, 838 insertions(+), 701 deletions(-)
 rename apps/web-ele/src/components/diy-editor/components/{ComponentContainerProperty.vue => component-container-property.vue} (99%)
 rename apps/web-ele/src/components/diy-editor/components/{ComponentContainer.vue => component-container.vue} (96%)
 rename apps/web-ele/src/components/diy-editor/components/{ComponentLibrary.vue => component-library.vue} (97%)
 delete mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/component.tsx
 delete mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/MenuList/index.vue
 delete mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/MenuSwiper/property.vue
 delete mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/NoticeBar/index.vue
 delete mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/ProductList/property.vue
 delete mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/TitleBar/property.vue
 delete mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/UserCard/index.vue
 create mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/component.tsx
 rename apps/web-ele/src/components/diy-editor/components/mobile/{CouponCard => coupon-card}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{CouponCard/CouponDiscountDesc.tsx => coupon-card/coupon-discount-desc.tsx} (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{CouponCard/CouponDiscount.tsx => coupon-card/coupon-discount.tsx} (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{CouponCard/CouponValidTerm.tsx => coupon-card/coupon-validTerm.tsx} (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{CouponCard => coupon-card}/index.vue (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{CouponCard => coupon-card}/property.vue (95%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{FloatingActionButton => floating-action-button}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{FloatingActionButton => floating-action-button}/index.vue (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{FloatingActionButton => floating-action-button}/property.vue (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{HotZone/components/HotZoneEditDialog => hot-zone/components/hot-zone-edit-dialog}/controller.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{HotZone/components/HotZoneEditDialog => hot-zone/components/hot-zone-edit-dialog}/index.vue (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{HotZone => hot-zone}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{HotZone => hot-zone}/index.vue (94%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{HotZone => hot-zone}/property.vue (68%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{ImageBar => image-bar}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{ImageBar => image-bar}/index.vue (58%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{ImageBar => image-bar}/property.vue (60%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{MagicCube => magic-cube}/config.ts (94%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{MagicCube => magic-cube}/index.vue (92%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{MagicCube => magic-cube}/property.vue (63%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{MenuGrid => menu-grid}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{MenuGrid => menu-grid}/index.vue (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{MenuGrid => menu-grid}/property.vue (96%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{MenuList => menu-list}/config.ts (100%)
 create mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/menu-list/index.vue
 rename apps/web-ele/src/components/diy-editor/components/mobile/{MenuList => menu-list}/property.vue (59%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{MenuSwiper => menu-swiper}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{MenuSwiper => menu-swiper}/index.vue (90%)
 create mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/property.vue
 rename apps/web-ele/src/components/diy-editor/components/mobile/{NavigationBar/components/CellProperty.vue => navigation-bar/components/cell-property.vue} (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{NavigationBar => navigation-bar}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{NavigationBar => navigation-bar}/index.vue (97%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{NavigationBar => navigation-bar}/property.vue (94%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{NoticeBar => notice-bar}/config.ts (100%)
 create mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/index.vue
 rename apps/web-ele/src/components/diy-editor/components/mobile/{NoticeBar => notice-bar}/property.vue (50%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PageConfig => page-config}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PageConfig => page-config}/property.vue (63%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{ProductCard => product-card}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{ProductCard => product-card}/index.vue (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{ProductCard => product-card}/property.vue (96%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{ProductList => product-list}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{ProductList => product-list}/index.vue (90%)
 create mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/product-list/property.vue
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PromotionArticle => promotion-article}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PromotionArticle => promotion-article}/index.vue (91%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PromotionArticle => promotion-article}/property.vue (80%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PromotionCombination => promotion-combination}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PromotionCombination => promotion-combination}/index.vue (99%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PromotionCombination => promotion-combination}/property.vue (97%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PromotionPoint => promotion-point}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PromotionPoint => promotion-point}/index.vue (99%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PromotionPoint => promotion-point}/property.vue (96%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PromotionSeckill => promotion-seckill}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PromotionSeckill => promotion-seckill}/index.vue (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{PromotionSeckill => promotion-seckill}/property.vue (97%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{SearchBar => search-bar}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{SearchBar => search-bar}/index.vue (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{SearchBar => search-bar}/property.vue (97%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{TabBar => tab-bar}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{TabBar => tab-bar}/index.vue (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{TabBar => tab-bar}/property.vue (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{TitleBar => title-bar}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{TitleBar => title-bar}/index.vue (91%)
 create mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/title-bar/property.vue
 rename apps/web-ele/src/components/diy-editor/components/mobile/{UserCard => user-card}/config.ts (100%)
 create mode 100644 apps/web-ele/src/components/diy-editor/components/mobile/user-card/index.vue
 rename apps/web-ele/src/components/diy-editor/components/mobile/{UserCard => user-card}/property.vue (81%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{UserCoupon => user-coupon}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{UserCoupon => user-coupon}/index.vue (87%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{UserCoupon => user-coupon}/property.vue (81%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{UserOrder => user-order}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{UserOrder => user-order}/index.vue (87%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{UserOrder => user-order}/property.vue (81%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{UserWallet => user-wallet}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{UserWallet => user-wallet}/index.vue (87%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{UserWallet => user-wallet}/property.vue (81%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{VideoPlayer => video-player}/config.ts (100%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{VideoPlayer => video-player}/index.vue (92%)
 rename apps/web-ele/src/components/diy-editor/components/mobile/{VideoPlayer => video-player}/property.vue (59%)

diff --git a/apps/web-ele/src/components/diy-editor/components/ComponentContainerProperty.vue b/apps/web-ele/src/components/diy-editor/components/component-container-property.vue
similarity index 99%
rename from apps/web-ele/src/components/diy-editor/components/ComponentContainerProperty.vue
rename to apps/web-ele/src/components/diy-editor/components/component-container-property.vue
index 2ebcccccf..24062a191 100644
--- a/apps/web-ele/src/components/diy-editor/components/ComponentContainerProperty.vue
+++ b/apps/web-ele/src/components/diy-editor/components/component-container-property.vue
@@ -166,7 +166,7 @@ const handleSliderChange = (prop: string) => {
                 :label="data.label"
                 :prop="data.prop"
                 :label-width="node.level === 1 ? '80px' : '62px'"
-                class="m-b-0! w-full"
+                class="mb-0 w-full"
               >
                 <ElSlider
                   v-model="
diff --git a/apps/web-ele/src/components/diy-editor/components/ComponentContainer.vue b/apps/web-ele/src/components/diy-editor/components/component-container.vue
similarity index 96%
rename from apps/web-ele/src/components/diy-editor/components/ComponentContainer.vue
rename to apps/web-ele/src/components/diy-editor/components/component-container.vue
index d573fc57e..3d2b14955 100644
--- a/apps/web-ele/src/components/diy-editor/components/ComponentContainer.vue
+++ b/apps/web-ele/src/components/diy-editor/components/component-container.vue
@@ -11,6 +11,8 @@ import { ElButton, ElTooltip } from 'element-plus';
 import { components } from '#/components/diy-editor/components/mobile';
 import VerticalButtonGroup from '#/components/vertical-button-group/index.vue';
 
+import { IconifyIcon } from '@vben/icons';
+
 /**
  * 组件容器：目前在中间部分
  * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
@@ -36,7 +38,7 @@ const props = defineProps({
   },
   showToolbar: {
     type: Boolean,
-    default: false,
+    default: true,
   },
 });
 
@@ -125,7 +127,7 @@ const handleDeleteComponent = () => {
               :disabled="!canMoveUp"
               @click.stop="handleMoveComponent(-1)"
             >
-              <Icon icon="ep:arrow-up" />
+              <IconifyIcon icon="ep:arrow-up" />
             </ElButton>
           </ElTooltip>
           <ElTooltip content="下移" placement="right">
@@ -133,17 +135,17 @@ const handleDeleteComponent = () => {
               :disabled="!canMoveDown"
               @click.stop="handleMoveComponent(1)"
             >
-              <Icon icon="ep:arrow-down" />
+              <IconifyIcon icon="ep:arrow-down" />
             </ElButton>
           </ElTooltip>
           <ElTooltip content="复制" placement="right">
             <ElButton @click.stop="handleCopyComponent()">
-              <Icon icon="ep:copy-document" />
+              <IconifyIcon icon="ep:copy-document" />
             </ElButton>
           </ElTooltip>
           <ElTooltip content="删除" placement="right">
             <ElButton @click.stop="handleDeleteComponent()">
-              <Icon icon="ep:delete" />
+              <IconifyIcon icon="ep:delete" />
             </ElButton>
           </ElTooltip>
         </VerticalButtonGroup>
diff --git a/apps/web-ele/src/components/diy-editor/components/ComponentLibrary.vue b/apps/web-ele/src/components/diy-editor/components/component-library.vue
similarity index 97%
rename from apps/web-ele/src/components/diy-editor/components/ComponentLibrary.vue
rename to apps/web-ele/src/components/diy-editor/components/component-library.vue
index fa8e41389..628c1c559 100644
--- a/apps/web-ele/src/components/diy-editor/components/ComponentLibrary.vue
+++ b/apps/web-ele/src/components/diy-editor/components/component-library.vue
@@ -12,7 +12,7 @@ import { cloneDeep } from '@vben/utils';
 import { ElAside, ElCollapse, ElCollapseItem, ElScrollbar } from 'element-plus';
 import draggable from 'vuedraggable';
 
-import { componentConfigs } from '../components/mobile/index';
+import { componentConfigs } from './mobile/index';
 
 /** 组件库：目前左侧的【基础组件】、【图文组件】部分 */
 defineOptions({ name: 'ComponentLibrary' });
@@ -90,7 +90,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
                 <div class="drag-placement">组件放置区域</div>
                 <div class="component">
                   <IconifyIcon :icon="element.icon" :size="32" />
-                  <span class="mt-4px text-12px">{{ element.name }}</span>
+                  <span class="mt-1 text-xs">{{ element.name }}</span>
                 </div>
               </div>
             </template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/property.vue
index 145230231..21da40439 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/property.vue
@@ -17,7 +17,7 @@ import {
 } from 'element-plus';
 
 import AppLinkInput from '#/components/app-link-input/index.vue';
-import ComponentContainerProperty from '#/components/diy-editor/components/ComponentContainerProperty.vue';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import Draggable from '#/components/draggable/index.vue';
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
@@ -76,7 +76,7 @@ const formData = useVModel(props, 'modelValue', emit);
             <ElFormItem
               label="类型"
               prop="type"
-              class="m-b-8px!"
+              class="mb-2"
               label-width="40px"
             >
               <ElRadioGroup v-model="element.type">
@@ -86,7 +86,7 @@ const formData = useVModel(props, 'modelValue', emit);
             </ElFormItem>
             <ElFormItem
               label="图片"
-              class="m-b-8px!"
+              class="mb-2"
               label-width="40px"
               v-if="element.type === 'img'"
             >
@@ -95,32 +95,32 @@ const formData = useVModel(props, 'modelValue', emit);
                 draggable="false"
                 height="80px"
                 width="100%"
-                class="min-w-80px"
+                class="min-w-[80px]"
                 :show-description="false"
               />
             </ElFormItem>
             <template v-else>
-              <ElFormItem label="封面" class="m-b-8px!" label-width="40px">
+              <ElFormItem label="封面" class="mb-2" label-width="40px">
                 <UploadImg
                   v-model="element.imgUrl"
                   draggable="false"
                   :show-description="false"
                   height="80px"
                   width="100%"
-                  class="min-w-80px"
+                  class="min-w-[80px]"
                 />
               </ElFormItem>
-              <ElFormItem label="视频" class="m-b-8px!" label-width="40px">
+              <ElFormItem label="视频" class="mb-2" label-width="40px">
                 <UploadFile
                   v-model="element.videoUrl"
                   :file-type="['mp4']"
                   :limit="1"
                   :file-size="100"
-                  class="min-w-80px"
+                  class="min-w-[80px]"
                 />
               </ElFormItem>
             </template>
-            <ElFormItem label="链接" class="m-b-8px!" label-width="40px">
+            <ElFormItem label="链接" class="mb-2" label-width="40px">
               <AppLinkInput v-model="element.url" />
             </ElFormItem>
           </template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/component.tsx b/apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/component.tsx
deleted file mode 100644
index 26aca2399..000000000
--- a/apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/component.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-// 导出所有优惠券相关组件
-export { CouponDiscount } from './CouponDiscount';
-export { CouponDiscountDesc } from './CouponDiscountDesc';
-export { CouponValidTerm } from './CouponValidTerm';
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Divider/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/Divider/property.vue
index 84daffae5..b3ad9f4fb 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/Divider/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/Divider/property.vue
@@ -2,6 +2,18 @@
 import type { DividerProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import {
+  ElForm,
+  ElFormItem,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSlider,
+  ElTooltip,
+} from 'element-plus';
+import { IconifyIcon } from '@vben/icons';
+
+import ColorInput from '#/components/input-with-color/index.vue';
+
 // 导航栏属性面板
 defineOptions({ name: 'DividerProperty' });
 const props = defineProps<{ modelValue: DividerProperty }>();
@@ -34,60 +46,60 @@ const BORDER_TYPES = [
 </script>
 
 <template>
-  <el-form label-width="80px" :model="formData">
-    <el-form-item label="高度" prop="height">
-      <el-slider
+  <ElForm label-width="80px" :model="formData">
+    <ElFormItem label="高度" prop="height">
+      <ElSlider
         v-model="formData.height"
         :min="1"
         :max="100"
         show-input
         input-size="small"
       />
-    </el-form-item>
-    <el-form-item label="选择样式" prop="borderType">
-      <el-radio-group v-model="formData!.borderType">
-        <el-tooltip
+    </ElFormItem>
+    <ElFormItem label="选择样式" prop="borderType">
+      <ElRadioGroup v-model="formData!.borderType">
+        <ElTooltip
           placement="top"
           v-for="(item, index) in BORDER_TYPES"
           :key="index"
           :content="item.text"
         >
-          <el-radio-button :value="item.type">
-            <Icon :icon="item.icon" />
-          </el-radio-button>
-        </el-tooltip>
-      </el-radio-group>
-    </el-form-item>
+          <ElRadioButton :value="item.type">
+            <IconifyIcon :icon="item.icon" />
+          </ElRadioButton>
+        </ElTooltip>
+      </ElRadioGroup>
+    </ElFormItem>
     <template v-if="formData.borderType !== 'none'">
-      <el-form-item label="线宽" prop="lineWidth">
-        <el-slider
+      <ElFormItem label="线宽" prop="lineWidth">
+        <ElSlider
           v-model="formData.lineWidth"
           :min="1"
           :max="30"
           show-input
           input-size="small"
         />
-      </el-form-item>
-      <el-form-item label="左右边距" prop="paddingType">
-        <el-radio-group v-model="formData!.paddingType">
-          <el-tooltip content="无边距" placement="top">
-            <el-radio-button value="none">
-              <Icon icon="tabler:box-padding" />
-            </el-radio-button>
-          </el-tooltip>
-          <el-tooltip content="左右留边" placement="top">
-            <el-radio-button value="horizontal">
-              <Icon icon="vaadin:padding" />
-            </el-radio-button>
-          </el-tooltip>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="颜色">
+      </ElFormItem>
+      <ElFormItem label="左右边距" prop="paddingType">
+        <ElRadioGroup v-model="formData!.paddingType">
+          <ElTooltip content="无边距" placement="top">
+            <ElRadioButton value="none">
+              <IconifyIcon icon="tabler:box-padding" />
+            </ElRadioButton>
+          </ElTooltip>
+          <ElTooltip content="左右留边" placement="top">
+            <ElRadioButton value="horizontal">
+              <IconifyIcon icon="vaadin:padding" />
+            </ElRadioButton>
+          </ElTooltip>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem label="颜色">
         <!-- 分割线颜色 -->
         <ColorInput v-model="formData.lineColor" />
-      </el-form-item>
+      </ElFormItem>
     </template>
-  </el-form>
+  </ElForm>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/MenuList/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/MenuList/index.vue
deleted file mode 100644
index faec56f51..000000000
--- a/apps/web-ele/src/components/diy-editor/components/mobile/MenuList/index.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import type { MenuListProperty } from './config';
-
-/** 列表导航 */
-defineOptions({ name: 'MenuList' });
-defineProps<{ property: MenuListProperty }>();
-</script>
-
-<template>
-  <div class="min-h-42px flex flex-col">
-    <div
-      v-for="(item, index) in property.list"
-      :key="index"
-      class="item h-42px gap-4px p-x-12px flex flex-row items-center justify-between"
-    >
-      <div class="gap-8px flex flex-1 flex-row items-center">
-        <el-image
-          v-if="item.iconUrl"
-          class="h-16px w-16px"
-          :src="item.iconUrl"
-        />
-        <span class="text-16px" :style="{ color: item.titleColor }">{{
-          item.title
-        }}</span>
-      </div>
-      <div class="item-center gap-4px flex flex-row justify-center">
-        <span class="text-12px" :style="{ color: item.subtitleColor }">{{
-          item.subtitle
-        }}</span>
-        <Icon icon="ep-arrow-right" color="#000" :size="16" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.item + .item {
-  border-top: 1px solid #eee;
-}
-</style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/MenuSwiper/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/MenuSwiper/property.vue
deleted file mode 100644
index 219e97e13..000000000
--- a/apps/web-ele/src/components/diy-editor/components/mobile/MenuSwiper/property.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import type { MenuSwiperProperty } from './config';
-
-import { cloneDeep } from '@vben/utils';
-
-import { useVModel } from '@vueuse/core';
-
-import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
-
-/** 菜单导航属性面板 */
-defineOptions({ name: 'MenuSwiperProperty' });
-
-const props = defineProps<{ modelValue: MenuSwiperProperty }>();
-const emit = defineEmits(['update:modelValue']);
-const formData = useVModel(props, 'modelValue', emit);
-</script>
-
-<template>
-  <ComponentContainerProperty v-model="formData.style">
-    <!-- 表单 -->
-    <el-form label-width="80px" :model="formData" class="m-t-8px">
-      <el-form-item label="布局" prop="layout">
-        <el-radio-group v-model="formData.layout">
-          <el-radio value="iconText">图标+文字</el-radio>
-          <el-radio value="icon">仅图标</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="行数" prop="row">
-        <el-radio-group v-model="formData.row">
-          <el-radio :value="1">1行</el-radio>
-          <el-radio :value="2">2行</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="列数" prop="column">
-        <el-radio-group v-model="formData.column">
-          <el-radio :value="3">3列</el-radio>
-          <el-radio :value="4">4列</el-radio>
-          <el-radio :value="5">5列</el-radio>
-        </el-radio-group>
-      </el-form-item>
-
-      <el-card header="菜单设置" class="property-group" shadow="never">
-        <Draggable
-          v-model="formData.list"
-          :empty-item="cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY)"
-        >
-          <template #default="{ element }">
-            <el-form-item label="图标" prop="iconUrl">
-              <UploadImg
-                v-model="element.iconUrl"
-                height="80px"
-                width="80px"
-                :show-description="false"
-              >
-                <template #tip> 建议尺寸：98 * 98 </template>
-              </UploadImg>
-            </el-form-item>
-            <el-form-item label="标题" prop="title">
-              <InputWithColor
-                v-model="element.title"
-                v-model:color="element.titleColor"
-              />
-            </el-form-item>
-            <el-form-item label="链接" prop="url">
-              <AppLinkInput v-model="element.url" />
-            </el-form-item>
-            <el-form-item label="显示角标" prop="badge.show">
-              <el-switch v-model="element.badge.show" />
-            </el-form-item>
-            <template v-if="element.badge.show">
-              <el-form-item label="角标内容" prop="badge.text">
-                <InputWithColor
-                  v-model="element.badge.text"
-                  v-model:color="element.badge.textColor"
-                />
-              </el-form-item>
-              <el-form-item label="背景颜色" prop="badge.bgColor">
-                <ColorInput v-model="element.badge.bgColor" />
-              </el-form-item>
-            </template>
-          </template>
-        </Draggable>
-      </el-card>
-    </el-form>
-  </ComponentContainerProperty>
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/NoticeBar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/NoticeBar/index.vue
deleted file mode 100644
index a7258056c..000000000
--- a/apps/web-ele/src/components/diy-editor/components/mobile/NoticeBar/index.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import type { NoticeBarProperty } from './config';
-
-/** 公告栏 */
-defineOptions({ name: 'NoticeBar' });
-
-defineProps<{ property: NoticeBarProperty }>();
-</script>
-
-<template>
-  <div
-    class="p-y-4px text-12px flex items-center"
-    :style="{
-      backgroundColor: property.backgroundColor,
-      color: property.textColor,
-    }"
-  >
-    <el-image :src="property.iconUrl" class="h-18px" />
-    <el-divider direction="vertical" />
-    <el-carousel
-      height="24px"
-      direction="vertical"
-      :autoplay="true"
-      class="p-r-8px flex-1"
-    >
-      <el-carousel-item v-for="(item, index) in property.contents" :key="index">
-        <div class="h-24px leading-24px truncate">{{ item.text }}</div>
-      </el-carousel-item>
-    </el-carousel>
-    <Icon icon="ep:arrow-right" />
-  </div>
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Popover/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/Popover/index.vue
index 8bcd7eeae..26031e938 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/Popover/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/Popover/index.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import type { PopoverProperty } from './config';
 
+import { ElImage } from 'element-plus';
+
+import { IconifyIcon } from '@vben/icons';
+
 import { ref } from 'vue';
 
 /** 弹窗广告 */
@@ -18,7 +22,7 @@ const handleActive = (index: number) => {
   <div
     v-for="(item, index) in property.list"
     :key="index"
-    class="bottom-50% right-50% h-454px w-292px border-1px border-gray border-rounded-4px p-1px absolute border-solid bg-white"
+    class="absolute bottom-1/2 right-1/2 h-[454px] w-[292px] rounded border border-gray-300 bg-white p-0.5"
     :style="{
       zIndex: 100 + index + (activeIndex === index ? 100 : 0),
       marginRight: `${-146 - index * 20}px`,
@@ -26,14 +30,14 @@ const handleActive = (index: number) => {
     }"
     @click="handleActive(index)"
   >
-    <el-image :src="item.imgUrl" fit="contain" class="h-full w-full">
+    <ElImage :src="item.imgUrl" fit="contain" class="h-full w-full">
       <template #error>
         <div class="flex h-full w-full items-center justify-center">
-          <Icon icon="ep:picture" />
+          <IconifyIcon icon="ep:picture" />
         </div>
       </template>
-    </el-image>
-    <div class="text-12px absolute right-1 top-1">{{ index + 1 }}</div>
+    </ElImage>
+    <div class="absolute right-1 top-1 text-xs">{{ index + 1 }}</div>
   </div>
 </template>
 
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Popover/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/Popover/property.vue
index bdd164474..b97f070f0 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/Popover/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/Popover/property.vue
@@ -2,6 +2,16 @@
 import type { PopoverProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import {
+  ElForm,
+  ElFormItem,
+  ElRadio,
+  ElRadioGroup,
+  ElTooltip,
+} from 'element-plus';
+import Draggable from '#/components/draggable/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import AppLinkInput from '#/components/app-link-input/index.vue';
 
 // 弹窗广告属性面板
 defineOptions({ name: 'PopoverProperty' });
@@ -12,36 +22,36 @@ const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
-  <el-form label-width="80px" :model="formData">
+  <ElForm label-width="80px" :model="formData">
     <Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
       <template #default="{ element, index }">
-        <el-form-item label="图片" :prop="`list[${index}].imgUrl`">
+        <ElFormItem label="图片" :prop="`list[${index}].imgUrl`">
           <UploadImg
             v-model="element.imgUrl"
             height="56px"
             width="56px"
             :show-description="false"
           />
-        </el-form-item>
-        <el-form-item label="跳转链接" :prop="`list[${index}].url`">
+        </ElFormItem>
+        <ElFormItem label="跳转链接" :prop="`list[${index}].url`">
           <AppLinkInput v-model="element.url" />
-        </el-form-item>
-        <el-form-item label="显示次数" :prop="`list[${index}].showType`">
-          <el-radio-group v-model="element.showType">
-            <el-tooltip
+        </ElFormItem>
+        <ElFormItem label="显示次数" :prop="`list[${index}].showType`">
+          <ElRadioGroup v-model="element.showType">
+            <ElTooltip
               content="只显示一次，下次打开时不显示"
               placement="bottom"
             >
-              <el-radio value="once">一次</el-radio>
-            </el-tooltip>
-            <el-tooltip content="每次打开时都会显示" placement="bottom">
-              <el-radio value="always">不限</el-radio>
-            </el-tooltip>
-          </el-radio-group>
-        </el-form-item>
+              <ElRadio value="once">一次</ElRadio>
+            </ElTooltip>
+            <ElTooltip content="每次打开时都会显示" placement="bottom">
+              <ElRadio value="always">不限</ElRadio>
+            </ElTooltip>
+          </ElRadioGroup>
+        </ElFormItem>
       </template>
     </Draggable>
-  </el-form>
+  </ElForm>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/ProductList/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/ProductList/property.vue
deleted file mode 100644
index 8b7a98595..000000000
--- a/apps/web-ele/src/components/diy-editor/components/mobile/ProductList/property.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script setup lang="ts">
-import type { ProductListProperty } from './config';
-
-import { useVModel } from '@vueuse/core';
-
-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>
-
-<template>
-  <ComponentContainerProperty v-model="formData.style">
-    <el-form label-width="80px" :model="formData">
-      <el-card header="商品列表" class="property-group" shadow="never">
-        <SpuShowcase v-model="formData.spuIds" />
-      </el-card>
-      <el-card header="商品样式" class="property-group" shadow="never">
-        <el-form-item label="布局" prop="type">
-          <el-radio-group v-model="formData.layoutType">
-            <el-tooltip class="item" content="双列" placement="bottom">
-              <el-radio-button value="twoCol">
-                <Icon icon="fluent:text-column-two-24-filled" />
-              </el-radio-button>
-            </el-tooltip>
-            <el-tooltip class="item" content="三列" placement="bottom">
-              <el-radio-button value="threeCol">
-                <Icon icon="fluent:text-column-three-24-filled" />
-              </el-radio-button>
-            </el-tooltip>
-            <el-tooltip class="item" content="水平滑动" placement="bottom">
-              <el-radio-button value="horizSwiper">
-                <Icon icon="system-uicons:carousel" />
-              </el-radio-button>
-            </el-tooltip>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="商品名称" prop="fields.name.show">
-          <div class="gap-8px flex">
-            <ColorInput v-model="formData.fields.name.color" />
-            <el-checkbox v-model="formData.fields.name.show" />
-          </div>
-        </el-form-item>
-        <el-form-item label="商品价格" prop="fields.price.show">
-          <div class="gap-8px flex">
-            <ColorInput v-model="formData.fields.price.color" />
-            <el-checkbox v-model="formData.fields.price.show" />
-          </div>
-        </el-form-item>
-      </el-card>
-      <el-card header="角标" class="property-group" shadow="never">
-        <el-form-item label="角标" prop="badge.show">
-          <el-switch v-model="formData.badge.show" />
-        </el-form-item>
-        <el-form-item
-          label="角标"
-          prop="badge.imgUrl"
-          v-if="formData.badge.show"
-        >
-          <UploadImg
-            v-model="formData.badge.imgUrl"
-            height="44px"
-            width="72px"
-            :show-description="false"
-          >
-            <template #tip> 建议尺寸：36 * 22 </template>
-          </UploadImg>
-        </el-form-item>
-      </el-card>
-      <el-card header="商品样式" class="property-group" shadow="never">
-        <el-form-item label="上圆角" prop="borderRadiusTop">
-          <el-slider
-            v-model="formData.borderRadiusTop"
-            :max="100"
-            :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
-          />
-        </el-form-item>
-        <el-form-item label="下圆角" prop="borderRadiusBottom">
-          <el-slider
-            v-model="formData.borderRadiusBottom"
-            :max="100"
-            :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
-          />
-        </el-form-item>
-        <el-form-item label="间隔" prop="space">
-          <el-slider
-            v-model="formData.space"
-            :max="100"
-            :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
-          />
-        </el-form-item>
-      </el-card>
-    </el-form>
-  </ComponentContainerProperty>
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/TitleBar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/TitleBar/property.vue
deleted file mode 100644
index 2fded6e29..000000000
--- a/apps/web-ele/src/components/diy-editor/components/mobile/TitleBar/property.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<script setup lang="ts">
-import type { TitleBarProperty } from './config';
-
-import { useVModel } from '@vueuse/core';
-
-// 导航栏属性面板
-defineOptions({ name: 'TitleBarProperty' });
-
-const props = defineProps<{ modelValue: TitleBarProperty }>();
-const emit = defineEmits(['update:modelValue']);
-const formData = useVModel(props, 'modelValue', emit);
-
-// 表单校验
-const rules = {};
-</script>
-<template>
-  <ComponentContainerProperty v-model="formData.style">
-    <el-form label-width="85px" :model="formData" :rules="rules">
-      <el-card header="风格" class="property-group" shadow="never">
-        <el-form-item label="背景图片" prop="bgImgUrl">
-          <UploadImg
-            v-model="formData.bgImgUrl"
-            width="100%"
-            height="40px"
-            :show-description="false"
-          >
-            <template #tip>建议尺寸 750*80</template>
-          </UploadImg>
-        </el-form-item>
-        <el-form-item label="标题位置" prop="textAlign">
-          <el-radio-group v-model="formData!.textAlign">
-            <el-tooltip content="居左" placement="top">
-              <el-radio-button value="left">
-                <Icon icon="ant-design:align-left-outlined" />
-              </el-radio-button>
-            </el-tooltip>
-            <el-tooltip content="居中" placement="top">
-              <el-radio-button value="center">
-                <Icon icon="ant-design:align-center-outlined" />
-              </el-radio-button>
-            </el-tooltip>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="偏移量" prop="marginLeft" label-width="70px">
-          <el-slider
-            v-model="formData.marginLeft"
-            :max="100"
-            :min="0"
-            show-input
-            input-size="small"
-          />
-        </el-form-item>
-        <el-form-item label="高度" prop="height" label-width="70px">
-          <el-slider
-            v-model="formData.height"
-            :max="200"
-            :min="20"
-            show-input
-            input-size="small"
-          />
-        </el-form-item>
-      </el-card>
-      <el-card header="主标题" class="property-group" shadow="never">
-        <el-form-item label="文字" prop="title" label-width="40px">
-          <InputWithColor
-            v-model="formData.title"
-            v-model:color="formData.titleColor"
-            show-word-limit
-            maxlength="20"
-          />
-        </el-form-item>
-        <el-form-item label="大小" prop="titleSize" label-width="40px">
-          <el-slider
-            v-model="formData.titleSize"
-            :max="60"
-            :min="10"
-            show-input
-            input-size="small"
-          />
-        </el-form-item>
-        <el-form-item label="粗细" prop="titleWeight" label-width="40px">
-          <el-slider
-            v-model="formData.titleWeight"
-            :min="100"
-            :max="900"
-            :step="100"
-            show-input
-            input-size="small"
-          />
-        </el-form-item>
-      </el-card>
-      <el-card header="副标题" class="property-group" shadow="never">
-        <el-form-item label="文字" prop="description" label-width="40px">
-          <InputWithColor
-            v-model="formData.description"
-            v-model:color="formData.descriptionColor"
-            show-word-limit
-            maxlength="50"
-          />
-        </el-form-item>
-        <el-form-item label="大小" prop="descriptionSize" label-width="40px">
-          <el-slider
-            v-model="formData.descriptionSize"
-            :max="60"
-            :min="10"
-            show-input
-            input-size="small"
-          />
-        </el-form-item>
-        <el-form-item label="粗细" prop="descriptionWeight" label-width="40px">
-          <el-slider
-            v-model="formData.descriptionWeight"
-            :min="100"
-            :max="900"
-            :step="100"
-            show-input
-            input-size="small"
-          />
-        </el-form-item>
-      </el-card>
-      <el-card header="查看更多" class="property-group" shadow="never">
-        <el-form-item label="是否显示" prop="more.show">
-          <el-checkbox v-model="formData.more.show" />
-        </el-form-item>
-        <!-- 更多按钮的 样式选择 -->
-        <template v-if="formData.more.show">
-          <el-form-item label="样式" prop="more.type">
-            <el-radio-group v-model="formData.more.type">
-              <el-radio value="text">文字</el-radio>
-              <el-radio value="icon">图标</el-radio>
-              <el-radio value="all">文字+图标</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item
-            label="更多文字"
-            prop="more.text"
-            v-show="formData.more.type !== 'icon'"
-          >
-            <el-input v-model="formData.more.text" />
-          </el-form-item>
-          <el-form-item label="跳转链接" prop="more.url">
-            <AppLinkInput v-model="formData.more.url" />
-          </el-form-item>
-        </template>
-      </el-card>
-    </el-form>
-  </ComponentContainerProperty>
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/UserCard/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/UserCard/index.vue
deleted file mode 100644
index 174d29392..000000000
--- a/apps/web-ele/src/components/diy-editor/components/mobile/UserCard/index.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { UserCardProperty } from './config';
-
-/** 用户卡片 */
-defineOptions({ name: 'UserCard' });
-// 定义属性
-defineProps<{ property: UserCardProperty }>();
-</script>
-<template>
-  <div class="flex flex-col">
-    <div class="p-x-18px p-y-24px flex items-center justify-between">
-      <div class="gap-16px flex flex-1 items-center">
-        <el-avatar :size="60">
-          <Icon icon="ep:avatar" :size="60" />
-        </el-avatar>
-        <span class="text-18px font-bold">芋道源码</span>
-      </div>
-      <Icon icon="tdesign:qrcode" :size="20" />
-    </div>
-    <div
-      class="p-x-20px p-y-8px text-12px flex items-center justify-between bg-white"
-    >
-      <span class="color-#ff690d">点击绑定手机号</span>
-      <span class="rounded-26px bg-#ff6100 p-x-8px p-y-5px color-white">
-        去绑定
-      </span>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/component.tsx b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/component.tsx
new file mode 100644
index 000000000..d4dbfee44
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/component.tsx
@@ -0,0 +1,4 @@
+// 导出所有优惠券相关组件
+export { CouponDiscount } from './coupon-discount';
+export { CouponDiscountDesc } from './coupon-discount-desc';
+export { CouponValidTerm } from './coupon-validTerm';
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/CouponDiscountDesc.tsx b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/CouponDiscountDesc.tsx
rename to apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/CouponDiscount.tsx b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/CouponDiscount.tsx
rename to apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/CouponValidTerm.tsx b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/CouponValidTerm.tsx
rename to apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue
similarity index 95%
rename from apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue
index 39dfd6b35..fc19dad7c 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/CouponCard/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue
@@ -22,6 +22,7 @@ import {
 import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
 import ColorInput from '#/components/color-input/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import {
   CouponTemplateTakeTypeEnum,
   PromotionDiscountTypeEnum,
@@ -91,9 +92,9 @@ watch(
             @click="handleAddCoupon"
             type="primary"
             plain
-            class="m-t-8px w-full"
+            class="mt-2 w-full"
           >
-            <IconifyIcon icon="ep:plus" class="mr-5px" /> 添加
+            <IconifyIcon icon="ep:plus" class="mr-1" /> 添加
           </ElButton>
         </ElFormItem>
       </ElCard>
@@ -122,7 +123,7 @@ watch(
             v-model="formData.bgImg"
             height="80px"
             width="100%"
-            class="min-w-160px"
+            class="min-w-[160px]"
             :show-description="false"
           />
         </ElFormItem>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/FloatingActionButton/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/FloatingActionButton/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/FloatingActionButton/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/FloatingActionButton/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/FloatingActionButton/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/property.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/FloatingActionButton/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/property.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/HotZone/components/HotZoneEditDialog/controller.ts b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/HotZone/components/HotZoneEditDialog/controller.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/HotZone/components/HotZoneEditDialog/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/HotZone/components/HotZoneEditDialog/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/HotZone/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/HotZone/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/HotZone/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/index.vue
similarity index 94%
rename from apps/web-ele/src/components/diy-editor/components/mobile/HotZone/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/index.vue
index abaf9f3c2..dd36b550f 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/HotZone/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { HotZoneProperty } from './config';
 
+import { ElImage } from 'element-plus';
+
 /** 热区 */
 defineOptions({ name: 'HotZone' });
 const props = defineProps<{ property: HotZoneProperty }>();
@@ -8,7 +10,7 @@ const props = defineProps<{ property: HotZoneProperty }>();
 
 <template>
   <div class="min-h-30px relative h-full w-full">
-    <el-image
+    <ElImage
       :src="props.property.imgUrl"
       class="pointer-events-none h-full w-full select-none"
     />
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/HotZone/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/property.vue
similarity index 68%
rename from apps/web-ele/src/components/diy-editor/components/mobile/HotZone/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/property.vue
index 8555f4b8e..78549637c 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/HotZone/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -4,8 +4,11 @@ import type { HotZoneProperty } from './config';
 import { ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
+import { ElForm, ElFormItem, ElText, ElButton } from 'element-plus';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
 
-import HotZoneEditDialog from './components/HotZoneEditDialog/index.vue';
+import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
 
 /** 热区属性面板 */
 defineOptions({ name: 'HotZoneProperty' });
@@ -25,30 +28,25 @@ const handleOpenEditDialog = () => {
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
-    <el-form label-width="80px" :model="formData" class="m-t-8px">
-      <el-form-item label="上传图片" prop="imgUrl">
+    <ElForm label-width="80px" :model="formData" class="mt-2">
+      <ElFormItem label="上传图片" prop="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
           height="50px"
           width="auto"
-          class="min-w-80px"
+          class="min-w-[80px]"
           :show-description="false"
         >
           <template #tip>
-            <el-text type="info" size="small"> 推荐宽度 750</el-text>
+            <ElText type="info" size="small"> 推荐宽度 750</ElText>
           </template>
         </UploadImg>
-      </el-form-item>
-    </el-form>
+      </ElFormItem>
+    </ElForm>
 
-    <el-button
-      type="primary"
-      plain
-      class="w-full"
-      @click="handleOpenEditDialog"
-    >
+    <ElButton type="primary" plain class="w-full" @click="handleOpenEditDialog">
       设置热区
-    </el-button>
+    </ElButton>
   </ComponentContainerProperty>
   <!-- 热区编辑对话框 -->
   <HotZoneEditDialog
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/ImageBar/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/ImageBar/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/image-bar/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/ImageBar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/index.vue
similarity index 58%
rename from apps/web-ele/src/components/diy-editor/components/mobile/ImageBar/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/image-bar/index.vue
index cd958df87..56971380a 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/ImageBar/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/index.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { ImageBarProperty } from './config';
 
+import { IconifyIcon } from '@vben/icons';
+import { ElImage } from 'element-plus';
+
 /** 图片展示 */
 defineOptions({ name: 'ImageBar' });
 
@@ -9,12 +12,12 @@ defineProps<{ property: ImageBarProperty }>();
 <template>
   <!-- 无图片 -->
   <div
-    class="h-50px bg-gray-3 flex items-center justify-center"
+    class="flex h-12 items-center justify-center bg-gray-300"
     v-if="!property.imgUrl"
   >
-    <Icon icon="ep:picture" class="text-gray-8 text-30px!" />
+    <IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
   </div>
-  <el-image class="min-h-30px" v-else :src="property.imgUrl" />
+  <ElImage class="min-h-8" v-else :src="property.imgUrl" />
 </template>
 
 <style scoped lang="scss">
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/ImageBar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue
similarity index 60%
rename from apps/web-ele/src/components/diy-editor/components/mobile/ImageBar/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue
index b04a5f990..4e31edcfe 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/ImageBar/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue
@@ -2,6 +2,10 @@
 import type { ImageBarProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import { ElForm, ElFormItem } from 'element-plus';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import AppLinkInput from '#/components/app-link-input/index.vue';
 
 // 图片展示属性面板
 defineOptions({ name: 'ImageBarProperty' });
@@ -13,23 +17,23 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <el-form label-width="80px" :model="formData">
-      <el-form-item label="上传图片" prop="imgUrl">
+    <ElForm label-width="80px" :model="formData">
+      <ElFormItem label="上传图片" prop="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
           draggable="false"
           height="80px"
           width="100%"
-          class="min-w-80px"
+          class="min-w-[80px]"
           :show-description="false"
         >
           <template #tip> 建议宽度750 </template>
         </UploadImg>
-      </el-form-item>
-      <el-form-item label="链接" prop="url">
+      </ElFormItem>
+      <ElFormItem label="链接" prop="url">
         <AppLinkInput v-model="formData.url" />
-      </el-form-item>
-    </el-form>
+      </ElFormItem>
+    </ElForm>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/MagicCube/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/config.ts
similarity index 94%
rename from apps/web-ele/src/components/diy-editor/components/mobile/MagicCube/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/config.ts
index 278751025..b364fbb35 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/MagicCube/config.ts
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/config.ts
@@ -31,6 +31,10 @@ export interface MagicCubeItemProperty {
   top: number;
   // 左
   left: number;
+  // 右
+  right: number;
+  // 下
+  bottom: number;
 }
 
 // 定义组件
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/MagicCube/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/index.vue
similarity index 92%
rename from apps/web-ele/src/components/diy-editor/components/mobile/MagicCube/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/index.vue
index 7127625f9..27ad9c900 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/MagicCube/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/index.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { MagicCubeProperty } from './config';
 
+import { ElImage } from 'element-plus';
+import { IconifyIcon } from '@vben/icons';
+
 import { computed } from 'vue';
 
 /** 广告魔方 */
@@ -48,7 +51,7 @@ const rowCount = computed(() => {
         left: `${item.left * CUBE_SIZE}px`,
       }"
     >
-      <el-image
+      <ElImage
         class="h-full w-full"
         fit="cover"
         :src="item.imgUrl"
@@ -68,11 +71,11 @@ const rowCount = computed(() => {
                 height: `${item.height * CUBE_SIZE}px`,
               }"
             >
-              <Icon icon="ep-picture" color="gray" :size="CUBE_SIZE" />
+              <IconifyIcon icon="ep-picture" color="gray" :size="CUBE_SIZE" />
             </div>
           </div>
         </template>
-      </el-image>
+      </ElImage>
     </div>
   </div>
 </template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/MagicCube/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue
similarity index 63%
rename from apps/web-ele/src/components/diy-editor/components/mobile/MagicCube/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue
index 4df5b0679..dfe090530 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/MagicCube/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue
@@ -4,6 +4,11 @@ import type { MagicCubeProperty } from './config';
 import { ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
+import { ElForm, ElFormItem, ElSlider, ElText } from 'element-plus';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import MagicCubeEditor from '#/components/magic-cube-editor/index.vue';
 
 /** 广告魔方属性面板 */
 defineOptions({ name: 'MagicCubeProperty' });
@@ -22,11 +27,11 @@ const handleHotAreaSelected = (_: any, index: number) => {
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
-    <el-form label-width="80px" :model="formData" class="m-t-8px">
-      <el-text tag="p"> 魔方设置 </el-text>
-      <el-text type="info" size="small"> 每格尺寸187 * 187 </el-text>
+    <ElForm label-width="80px" :model="formData" class="mt-2">
+      <ElText tag="p"> 魔方设置 </ElText>
+      <ElText type="info" size="small"> 每格尺寸187 * 187 </ElText>
       <MagicCubeEditor
-        class="m-y-16px"
+        class="my-4"
         v-model="formData.list"
         :rows="4"
         :cols="4"
@@ -34,21 +39,21 @@ const handleHotAreaSelected = (_: any, index: number) => {
       />
       <template v-for="(hotArea, index) in formData.list" :key="index">
         <template v-if="selectedHotAreaIndex === index">
-          <el-form-item label="上传图片" :prop="`list[${index}].imgUrl`">
+          <ElFormItem label="上传图片" :prop="`list[${index}].imgUrl`">
             <UploadImg
               v-model="hotArea.imgUrl"
               height="80px"
               width="80px"
               :show-description="false"
             />
-          </el-form-item>
-          <el-form-item label="链接" :prop="`list[${index}].url`">
+          </ElFormItem>
+          <ElFormItem label="链接" :prop="`list[${index}].url`">
             <AppLinkInput v-model="hotArea.url" />
-          </el-form-item>
+          </ElFormItem>
         </template>
       </template>
-      <el-form-item label="上圆角" prop="borderRadiusTop">
-        <el-slider
+      <ElFormItem label="上圆角" prop="borderRadiusTop">
+        <ElSlider
           v-model="formData.borderRadiusTop"
           :max="100"
           :min="0"
@@ -56,9 +61,9 @@ const handleHotAreaSelected = (_: any, index: number) => {
           input-size="small"
           :show-input-controls="false"
         />
-      </el-form-item>
-      <el-form-item label="下圆角" prop="borderRadiusBottom">
-        <el-slider
+      </ElFormItem>
+      <ElFormItem label="下圆角" prop="borderRadiusBottom">
+        <ElSlider
           v-model="formData.borderRadiusBottom"
           :max="100"
           :min="0"
@@ -66,9 +71,9 @@ const handleHotAreaSelected = (_: any, index: number) => {
           input-size="small"
           :show-input-controls="false"
         />
-      </el-form-item>
-      <el-form-item label="间隔" prop="space">
-        <el-slider
+      </ElFormItem>
+      <ElFormItem label="间隔" prop="space">
+        <ElSlider
           v-model="formData.space"
           :max="100"
           :min="0"
@@ -76,8 +81,8 @@ const handleHotAreaSelected = (_: any, index: number) => {
           input-size="small"
           :show-input-controls="false"
         />
-      </el-form-item>
-    </el-form>
+      </ElFormItem>
+    </ElForm>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/MenuGrid/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/MenuGrid/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/MenuGrid/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/MenuGrid/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/MenuGrid/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/property.vue
similarity index 96%
rename from apps/web-ele/src/components/diy-editor/components/mobile/MenuGrid/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/property.vue
index fea8f9436..88039d352 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/MenuGrid/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/property.vue
@@ -12,7 +12,7 @@ import {
 } from 'element-plus';
 
 import AppLinkInput from '#/components/app-link-input/index.vue';
-import ComponentContainerProperty from '#/components/diy-editor/components/ComponentContainerProperty.vue';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import Draggable from '#/components/draggable/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
@@ -29,7 +29,7 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
-    <ElForm label-width="80px" :model="formData" class="m-t-8px">
+    <ElForm label-width="80px" :model="formData" class="mt-2">
       <ElFormItem label="每行数量" prop="column">
         <ElRadioGroup v-model="formData.column">
           <ElRadio :value="3">3个</ElRadio>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/MenuList/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/MenuList/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/menu-list/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/index.vue
new file mode 100644
index 000000000..9ff533a8f
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/index.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { MenuListProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage } from 'element-plus';
+
+/** 列表导航 */
+defineOptions({ name: 'MenuList' });
+defineProps<{ property: MenuListProperty }>();
+</script>
+
+<template>
+  <div class="min-h-[42px] flex flex-col">
+    <div
+      v-for="(item, index) in property.list"
+      :key="index"
+      class="item h-[42px] gap-1 px-3 flex flex-row items-center justify-between"
+    >
+              <div class="gap-2 flex flex-1 flex-row items-center">
+        <ElImage
+          v-if="item.iconUrl"
+          class="h-4 w-4"
+          :src="item.iconUrl"
+        />
+        <span class="text-base" :style="{ color: item.titleColor }">{{
+          item.title
+        }}</span>
+      </div>
+              <div class="item-center gap-1 flex flex-row justify-center">
+        <span class="text-xs" :style="{ color: item.subtitleColor }">{{
+          item.subtitle
+        }}</span>
+        <IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.item + .item {
+  border-top: 1px solid #eee;
+}
+</style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/MenuList/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue
similarity index 59%
rename from apps/web-ele/src/components/diy-editor/components/mobile/MenuList/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue
index c2349f372..3c4dbc1dc 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/MenuList/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue
@@ -2,8 +2,14 @@
 import type { MenuListProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import { ElForm, ElFormItem, ElText } from 'element-plus';
 
 import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import Draggable from '#/components/draggable/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import InputWithColor from '#/components/input-with-color/index.vue';
+import AppLinkInput from '#/components/app-link-input/index.vue';
 
 /** 列表导航属性面板 */
 defineOptions({ name: 'MenuListProperty' });
@@ -15,17 +21,17 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <el-text tag="p"> 菜单设置 </el-text>
-    <el-text type="info" size="small"> 拖动左侧的小圆点可以调整顺序 </el-text>
+    <ElText tag="p"> 菜单设置 </ElText>
+    <ElText type="info" size="small"> 拖动左侧的小圆点可以调整顺序 </ElText>
 
     <!-- 表单 -->
-    <el-form label-width="60px" :model="formData" class="m-t-8px">
+    <ElForm label-width="60px" :model="formData" class="mt-2">
       <Draggable
         v-model="formData.list"
         :empty-item="EMPTY_MENU_LIST_ITEM_PROPERTY"
       >
         <template #default="{ element }">
-          <el-form-item label="图标" prop="iconUrl">
+          <ElFormItem label="图标" prop="iconUrl">
             <UploadImg
               v-model="element.iconUrl"
               height="80px"
@@ -34,25 +40,25 @@ const formData = useVModel(props, 'modelValue', emit);
             >
               <template #tip> 建议尺寸：44 * 44 </template>
             </UploadImg>
-          </el-form-item>
-          <el-form-item label="标题" prop="title">
+          </ElFormItem>
+          <ElFormItem label="标题" prop="title">
             <InputWithColor
               v-model="element.title"
               v-model:color="element.titleColor"
             />
-          </el-form-item>
-          <el-form-item label="副标题" prop="subtitle">
+          </ElFormItem>
+          <ElFormItem label="副标题" prop="subtitle">
             <InputWithColor
               v-model="element.subtitle"
               v-model:color="element.subtitleColor"
             />
-          </el-form-item>
-          <el-form-item label="链接" prop="url">
+          </ElFormItem>
+          <ElFormItem label="链接" prop="url">
             <AppLinkInput v-model="element.url" />
-          </el-form-item>
+          </ElFormItem>
         </template>
       </Draggable>
-    </el-form>
+    </ElForm>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/MenuSwiper/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/MenuSwiper/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/MenuSwiper/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/index.vue
similarity index 90%
rename from apps/web-ele/src/components/diy-editor/components/mobile/MenuSwiper/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/index.vue
index 0f64d0457..a6dd6f928 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/MenuSwiper/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { MenuSwiperItemProperty, MenuSwiperProperty } from './config';
 
+import { ElCarousel, ElCarouselItem, ElImage } from 'element-plus';
 import { ref, watch } from 'vue';
 
 /** 菜单导航 */
@@ -59,13 +60,13 @@ watch(
 </script>
 
 <template>
-  <el-carousel
+  <ElCarousel
     :height="`${carouselHeight}px`"
     :autoplay="false"
     arrow="hover"
     indicator-position="outside"
   >
-    <el-carousel-item v-for="(page, pageIndex) in pages" :key="pageIndex">
+    <ElCarouselItem v-for="(page, pageIndex) in pages" :key="pageIndex">
       <div class="flex flex-row flex-wrap">
         <div
           v-for="(item, index) in page"
@@ -78,7 +79,7 @@ watch(
             <!-- 右上角角标 -->
             <span
               v-if="item.badge?.show"
-              class="right--10px top--10px z-1 h-20px rounded-10px p-x-6px text-12px leading-20px absolute text-center"
+              class="absolute -right-2.5 -top-2.5 z-10 h-5 rounded-[10px] px-1.5 text-center text-xs leading-5"
               :style="{
                 color: item.badge.textColor,
                 backgroundColor: item.badge.bgColor,
@@ -86,7 +87,7 @@ watch(
             >
               {{ item.badge.text }}
             </span>
-            <el-image
+            <ElImage
               v-if="item.iconUrl"
               :src="item.iconUrl"
               class="h-full w-full"
@@ -95,7 +96,7 @@ watch(
           <!-- 标题 -->
           <span
             v-if="property.layout === 'iconText'"
-            class="text-12px"
+            class="text-xs"
             :style="{
               color: item.titleColor,
               height: `${TITLE_HEIGHT}px`,
@@ -106,8 +107,8 @@ watch(
           </span>
         </div>
       </div>
-    </el-carousel-item>
-  </el-carousel>
+    </ElCarouselItem>
+  </ElCarousel>
 </template>
 
 <style lang="scss">
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/property.vue
new file mode 100644
index 000000000..0a9413685
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/property.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { MenuSwiperProperty } from './config';
+
+import { cloneDeep } from '@vben/utils';
+
+import {
+  ElCard,
+  ElForm,
+  ElFormItem,
+  ElRadio,
+  ElRadioGroup,
+  ElSwitch,
+} from 'element-plus';
+
+import { useVModel } from '@vueuse/core';
+
+import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import Draggable from '#/components/draggable/index.vue';
+import InputWithColor from '#/components/input-with-color/index.vue';
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import ColorInput from '#/components/color-input/index.vue';
+
+/** 菜单导航属性面板 */
+defineOptions({ name: 'MenuSwiperProperty' });
+
+const props = defineProps<{ modelValue: MenuSwiperProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <!-- 表单 -->
+    <ElForm label-width="80px" :model="formData" class="mt-2">
+      <ElFormItem label="布局" prop="layout">
+        <ElRadioGroup v-model="formData.layout">
+          <ElRadio value="iconText">图标+文字</ElRadio>
+          <ElRadio value="icon">仅图标</ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem label="行数" prop="row">
+        <ElRadioGroup v-model="formData.row">
+          <ElRadio :value="1">1行</ElRadio>
+          <ElRadio :value="2">2行</ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem label="列数" prop="column">
+        <ElRadioGroup v-model="formData.column">
+          <ElRadio :value="3">3列</ElRadio>
+          <ElRadio :value="4">4列</ElRadio>
+          <ElRadio :value="5">5列</ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+
+      <ElCard header="菜单设置" class="property-group" shadow="never">
+        <Draggable
+          v-model="formData.list"
+          :empty-item="cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY)"
+        >
+          <template #default="{ element }">
+            <ElFormItem label="图标" prop="iconUrl">
+              <UploadImg
+                v-model="element.iconUrl"
+                height="80px"
+                width="80px"
+                :show-description="false"
+              >
+                <template #tip> 建议尺寸：98 * 98 </template>
+              </UploadImg>
+            </ElFormItem>
+            <ElFormItem label="标题" prop="title">
+              <InputWithColor
+                v-model="element.title"
+                v-model:color="element.titleColor"
+              />
+            </ElFormItem>
+            <ElFormItem label="链接" prop="url">
+              <AppLinkInput v-model="element.url" />
+            </ElFormItem>
+            <ElFormItem label="显示角标" prop="badge.show">
+              <ElSwitch v-model="element.badge.show" />
+            </ElFormItem>
+            <template v-if="element.badge.show">
+              <ElFormItem label="角标内容" prop="badge.text">
+                <InputWithColor
+                  v-model="element.badge.text"
+                  v-model:color="element.badge.textColor"
+                />
+              </ElFormItem>
+              <ElFormItem label="背景颜色" prop="badge.bgColor">
+                <ColorInput v-model="element.badge.bgColor" />
+              </ElFormItem>
+            </template>
+          </template>
+        </Draggable>
+      </ElCard>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/NavigationBar/components/CellProperty.vue b/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/NavigationBar/components/CellProperty.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/NavigationBar/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/NavigationBar/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/NavigationBar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/index.vue
similarity index 97%
rename from apps/web-ele/src/components/diy-editor/components/mobile/NavigationBar/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/index.vue
index f8af51800..4a32acb80 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/NavigationBar/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/index.vue
@@ -6,12 +6,12 @@ import type {
   NavigationBarProperty,
 } from './config';
 
-import type { SearchProperty } from '#/components/diy-editor/components/mobile/SearchBar/config';
+import type { SearchProperty } from '#/components/diy-editor/components/mobile/search-bar/config';
 
 import { computed } from 'vue';
 
 import appNavbarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
-import SearchBar from '#/components/diy-editor/components/mobile/SearchBar/index.vue';
+import SearchBar from '#/components/diy-editor/components/mobile/search-bar/index.vue';
 
 /** 页面顶部导航栏 */
 defineOptions({ name: 'NavigationBar' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/NavigationBar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/property.vue
similarity index 94%
rename from apps/web-ele/src/components/diy-editor/components/mobile/NavigationBar/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/property.vue
index 2e3ab5a4c..ce3e3f698 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/NavigationBar/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/property.vue
@@ -3,7 +3,7 @@ import type { NavigationBarProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
-import NavigationBarCellProperty from './components/CellProperty.vue';
+import NavigationBarCellProperty from './components/cell-property.vue';
 
 // 导航栏属性面板
 defineOptions({ name: 'NavigationBarProperty' });
@@ -79,7 +79,7 @@ if (!formData.value._local) {
       <template #header>
         <div class="flex items-center justify-between">
           <span>内容（小程序）</span>
-          <el-form-item prop="_local.previewMp" class="m-b-0!">
+          <el-form-item prop="_local.previewMp" class="mb-0">
             <el-checkbox
               v-model="formData._local.previewMp"
               @change="
@@ -97,7 +97,7 @@ if (!formData.value._local) {
       <template #header>
         <div class="flex items-center justify-between">
           <span>内容（非小程序）</span>
-          <el-form-item prop="_local.previewOther" class="m-b-0!">
+          <el-form-item prop="_local.previewOther" class="mb-0">
             <el-checkbox
               v-model="formData._local.previewOther"
               @change="
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/NoticeBar/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/NoticeBar/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/index.vue
new file mode 100644
index 000000000..106c8d31a
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/index.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { NoticeBarProperty } from './config';
+
+import { ElCarousel, ElCarouselItem, ElImage, ElDivider } from 'element-plus';
+import { IconifyIcon } from '@vben/icons';
+
+/** 公告栏 */
+defineOptions({ name: 'NoticeBar' });
+
+defineProps<{ property: NoticeBarProperty }>();
+</script>
+
+<template>
+  <div
+    class="py-1 text-xs flex items-center"
+    :style="{
+      backgroundColor: property.backgroundColor,
+      color: property.textColor,
+    }"
+  >
+    <ElImage :src="property.iconUrl" class="h-[18px]" />
+    <ElDivider direction="vertical" />
+    <ElCarousel
+      height="24px"
+      direction="vertical"
+      :autoplay="true"
+      class="pr-2 flex-1"
+    >
+      <ElCarouselItem v-for="(item, index) in property.contents" :key="index">
+        <div class="h-6 leading-6 truncate">{{ item.text }}</div>
+      </ElCarouselItem>
+    </ElCarousel>
+    <IconifyIcon icon="ep:arrow-right" />
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/NoticeBar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue
similarity index 50%
rename from apps/web-ele/src/components/diy-editor/components/mobile/NoticeBar/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue
index a50ad3517..5ab1b65f6 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/NoticeBar/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue
@@ -1,8 +1,16 @@
 <script setup lang="ts">
 import type { NoticeBarProperty } from './config';
 
+import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus';
+
 import { useVModel } from '@vueuse/core';
 
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import Draggable from '#/components/draggable/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import ColorInput from '#/components/color-input/index.vue';
+
 // 通知栏属性面板
 defineOptions({ name: 'NoticeBarProperty' });
 const props = defineProps<{ modelValue: NoticeBarProperty }>();
@@ -19,8 +27,8 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <el-form label-width="80px" :model="formData" :rules="rules">
-      <el-form-item label="公告图标" prop="iconUrl">
+    <ElForm label-width="80px" :model="formData" :rules="rules">
+      <ElFormItem label="公告图标" prop="iconUrl">
         <UploadImg
           v-model="formData.iconUrl"
           height="48px"
@@ -28,26 +36,26 @@ const formData = useVModel(props, 'modelValue', emit);
         >
           <template #tip>建议尺寸：24 * 24</template>
         </UploadImg>
-      </el-form-item>
-      <el-form-item label="背景颜色" prop="backgroundColor">
+      </ElFormItem>
+      <ElFormItem label="背景颜色" prop="backgroundColor">
         <ColorInput v-model="formData.backgroundColor" />
-      </el-form-item>
-      <el-form-item label="文字颜色" prop="文字颜色">
+      </ElFormItem>
+      <ElFormItem label="文字颜色" prop="文字颜色">
         <ColorInput v-model="formData.textColor" />
-      </el-form-item>
-      <el-card header="公告内容" class="property-group" shadow="never">
+      </ElFormItem>
+      <ElCard header="公告内容" class="property-group" shadow="never">
         <Draggable v-model="formData.contents">
           <template #default="{ element }">
-            <el-form-item label="公告" prop="text" label-width="40px">
-              <el-input v-model="element.text" placeholder="请输入公告" />
-            </el-form-item>
-            <el-form-item label="链接" prop="url" label-width="40px">
+            <ElFormItem label="公告" prop="text" label-width="40px">
+              <ElInput v-model="element.text" placeholder="请输入公告" />
+            </ElFormItem>
+            <ElFormItem label="链接" prop="url" label-width="40px">
               <AppLinkInput v-model="element.url" />
-            </el-form-item>
+            </ElFormItem>
           </template>
         </Draggable>
-      </el-card>
-    </el-form>
+      </ElCard>
+    </ElForm>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PageConfig/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/page-config/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PageConfig/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/page-config/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PageConfig/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/page-config/property.vue
similarity index 63%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PageConfig/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/page-config/property.vue
index de818bb92..e9e272a6f 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/PageConfig/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/page-config/property.vue
@@ -2,6 +2,9 @@
 import type { PageConfigProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import { ElForm, ElFormItem, ElInput } from 'element-plus';
+import ColorInput from '#/components/input-with-color/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
 
 // 导航栏属性面板
 defineOptions({ name: 'PageConfigProperty' });
@@ -16,18 +19,18 @@ const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
-  <el-form label-width="80px" :model="formData" :rules="rules">
-    <el-form-item label="页面描述" prop="description">
-      <el-input
+  <ElForm label-width="80px" :model="formData" :rules="rules">
+    <ElFormItem label="页面描述" prop="description">
+      <ElInput
         type="textarea"
         v-model="formData!.description"
         placeholder="用户通过微信分享给朋友时，会自动显示页面描述"
       />
-    </el-form-item>
-    <el-form-item label="背景颜色" prop="backgroundColor">
+    </ElFormItem>
+    <ElFormItem label="背景颜色" prop="backgroundColor">
       <ColorInput v-model="formData!.backgroundColor" />
-    </el-form-item>
-    <el-form-item label="背景图片" prop="backgroundImage">
+    </ElFormItem>
+    <ElFormItem label="背景图片" prop="backgroundImage">
       <UploadImg
         v-model="formData!.backgroundImage"
         :limit="1"
@@ -35,8 +38,8 @@ const formData = useVModel(props, 'modelValue', emit);
       >
         <template #tip>建议宽度 750px</template>
       </UploadImg>
-    </el-form-item>
-  </el-form>
+    </ElFormItem>
+  </ElForm>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/ProductCard/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/product-card/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/ProductCard/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/product-card/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/ProductCard/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/product-card/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/ProductCard/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/product-card/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/ProductCard/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/product-card/property.vue
similarity index 96%
rename from apps/web-ele/src/components/diy-editor/components/mobile/ProductCard/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/product-card/property.vue
index 2c1253db2..01aefe4ac 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/ProductCard/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/product-card/property.vue
@@ -56,37 +56,37 @@ const formData = useVModel(props, 'modelValue', emit);
           </ElRadioGroup>
         </ElFormItem>
         <ElFormItem label="商品名称" prop="fields.name.show">
-          <div class="gap-8px flex">
+          <div class="gap-2 flex">
             <ColorInput v-model="formData.fields.name.color" />
             <ElCheckbox v-model="formData.fields.name.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品简介" prop="fields.introduction.show">
-          <div class="gap-8px flex">
+          <div class="gap-2 flex">
             <ColorInput v-model="formData.fields.introduction.color" />
             <ElCheckbox v-model="formData.fields.introduction.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品价格" prop="fields.price.show">
-          <div class="gap-8px flex">
+          <div class="gap-2 flex">
             <ColorInput v-model="formData.fields.price.color" />
             <ElCheckbox v-model="formData.fields.price.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="市场价" prop="fields.marketPrice.show">
-          <div class="gap-8px flex">
+          <div class="gap-2 flex">
             <ColorInput v-model="formData.fields.marketPrice.color" />
             <ElCheckbox v-model="formData.fields.marketPrice.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品销量" prop="fields.salesCount.show">
-          <div class="gap-8px flex">
+          <div class="gap-2 flex">
             <ColorInput v-model="formData.fields.salesCount.color" />
             <ElCheckbox v-model="formData.fields.salesCount.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品库存" prop="fields.stock.show">
-          <div class="gap-8px flex">
+          <div class="gap-2 flex">
             <ColorInput v-model="formData.fields.stock.color" />
             <ElCheckbox v-model="formData.fields.stock.show" />
           </div>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/ProductList/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/product-list/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/ProductList/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/product-list/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/ProductList/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/product-list/index.vue
similarity index 90%
rename from apps/web-ele/src/components/diy-editor/components/mobile/ProductList/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/product-list/index.vue
index 9093bcbc5..f670bfbf4 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/ProductList/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/product-list/index.vue
@@ -6,6 +6,7 @@ import type { MallSpuApi } from '#/api/mall/product/spu';
 import { onMounted, ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
+import { ElImage, ElScrollbar } from 'element-plus';
 
 import * as ProductSpuApi from '#/api/mall/product/spu';
 
@@ -73,7 +74,7 @@ onMounted(() => {
 });
 </script>
 <template>
-  <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
+  <ElScrollbar class="z-10 min-h-[30px]" wrap-class="w-full" ref="containerRef">
     <!-- 商品网格 -->
     <div
       class="grid overflow-x-auto"
@@ -98,22 +99,22 @@ onMounted(() => {
         <!-- 角标 -->
         <div
           v-if="property.badge.show"
-          class="z-1 absolute left-0 top-0 items-center justify-center"
+          class="absolute left-0 top-0 z-10 items-center justify-center"
         >
-          <el-image
+          <ElImage
             fit="cover"
             :src="property.badge.imgUrl"
-            class="h-26px w-38px"
+            class="h-[26px] w-[38px]"
           />
         </div>
         <!-- 商品封面图 -->
-        <el-image
+        <ElImage
           fit="cover"
           :src="spu.picUrl"
           :style="{ width: imageSize, height: imageSize }"
         />
         <div
-          class="gap-8px p-8px box-border flex flex-col"
+          class="box-border flex flex-col gap-2 p-2"
           :class="[
             {
               'w-[calc(100%-64px)]': columns === 2,
@@ -124,7 +125,7 @@ onMounted(() => {
           <!-- 商品名称 -->
           <div
             v-if="property.fields.name.show"
-            class="text-12px truncate"
+            class="truncate text-xs"
             :style="{ color: property.fields.name.color }"
           >
             {{ spu.name }}
@@ -133,7 +134,7 @@ onMounted(() => {
             <!-- 商品价格 -->
             <span
               v-if="property.fields.price.show"
-              class="text-12px"
+              class="text-xs"
               :style="{ color: property.fields.price.color }"
             >
               ￥{{ fenToYuan(spu.price || 0) }}
@@ -142,7 +143,7 @@ onMounted(() => {
         </div>
       </div>
     </div>
-  </el-scrollbar>
+  </ElScrollbar>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/product-list/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/product-list/property.vue
new file mode 100644
index 000000000..897a341f7
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/product-list/property.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { ProductListProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElForm,
+  ElFormItem,
+  ElCard,
+  ElRadioGroup,
+  ElRadioButton,
+  ElSlider,
+  ElSwitch,
+  ElTooltip,
+} from 'element-plus';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import ColorInput from '#/components/input-with-color/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+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>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ElForm label-width="80px" :model="formData">
+      <ElCard header="商品列表" class="property-group" shadow="never">
+        <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">
+                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip class="item" content="三列" placement="bottom">
+              <ElRadioButton value="threeCol">
+                <IconifyIcon icon="fluent:text-column-three-24-filled" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip class="item" content="水平滑动" placement="bottom">
+              <ElRadioButton value="horizSwiper">
+                <IconifyIcon icon="system-uicons:carousel" />
+              </ElRadioButton>
+            </ElTooltip>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="商品名称" prop="fields.name.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.name.color" />
+            <ElCheckbox v-model="formData.fields.name.show" />
+          </div>
+        </ElFormItem>
+        <ElFormItem label="商品价格" prop="fields.price.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.price.color" />
+            <ElCheckbox v-model="formData.fields.price.show" />
+          </div>
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="角标" class="property-group" shadow="never">
+        <ElFormItem label="角标" prop="badge.show">
+          <el-switch v-model="formData.badge.show" />
+        </ElFormItem>
+        <ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+          <UploadImg
+            v-model="formData.badge.imgUrl"
+            height="44px"
+            width="72px"
+            :show-description="false"
+          >
+            <template #tip> 建议尺寸：36 * 22 </template>
+          </UploadImg>
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="商品样式" class="property-group" shadow="never">
+        <ElFormItem label="上圆角" prop="borderRadiusTop">
+          <ElSlider
+            v-model="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"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+        </ElFormItem>
+        <ElFormItem label="间隔" prop="space">
+          <ElSlider
+            v-model="formData.space"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+        </ElFormItem>
+      </ElCard>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionArticle/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PromotionArticle/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionArticle/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/index.vue
similarity index 91%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PromotionArticle/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/index.vue
index 412bd44a3..10e9f5aa3 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionArticle/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/index.vue
@@ -27,7 +27,7 @@ watch(
 );
 </script>
 <template>
-  <div class="min-h-30px" v-dompurify-html="article?.content"></div>
+  <div class="min-h-[30px]" v-dompurify-html="article?.content"></div>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionArticle/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/property.vue
similarity index 80%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PromotionArticle/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/property.vue
index b080e69ac..fd73c923a 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionArticle/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -6,7 +6,8 @@ import type { MallArticleApi } from '#/api/mall/promotion/article';
 import { onMounted, ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
-
+import { ElForm, ElFormItem, ElSelect, ElOption } from 'element-plus';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import * as ArticleApi from '#/api/mall/promotion/article/index';
 
 // 营销文章属性面板
@@ -40,9 +41,9 @@ onMounted(() => {
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <el-form label-width="40px" :model="formData">
-      <el-form-item label="文章" prop="id">
-        <el-select
+    <ElForm label-width="40px" :model="formData">
+      <ElFormItem label="文章" prop="id">
+        <ElSelect
           v-model="formData.id"
           placeholder="请选择文章"
           class="w-full"
@@ -51,15 +52,15 @@ onMounted(() => {
           :remote-method="queryArticleList"
           :loading="loading"
         >
-          <el-option
+          <ElOption
             v-for="article in articles"
             :key="article.id"
             :label="article.title"
             :value="article.id"
           />
-        </el-select>
-      </el-form-item>
-    </el-form>
+        </ElSelect>
+      </ElFormItem>
+    </ElForm>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionCombination/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PromotionCombination/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionCombination/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/index.vue
similarity index 99%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PromotionCombination/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/index.vue
index 380094094..82f1f5bd7 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionCombination/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/index.vue
@@ -139,7 +139,7 @@ const calculateWidth = () => {
         <ElImage fit="cover" class="h-full w-full" :src="spu.picUrl" />
       </div>
       <div
-        class="box-border flex flex-col gap-[8px] p-[8px]"
+        class="box-border flex flex-col gap-2 p-2"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionCombination/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/property.vue
similarity index 97%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PromotionCombination/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/property.vue
index 662b8066a..da57011de 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionCombination/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/property.vue
@@ -74,37 +74,37 @@ onMounted(async () => {
           </ElRadioGroup>
         </ElFormItem>
         <ElFormItem label="商品名称" prop="fields.name.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.name.color" />
             <ElCheckbox v-model="formData.fields.name.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品简介" prop="fields.introduction.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.introduction.color" />
             <ElCheckbox v-model="formData.fields.introduction.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品价格" prop="fields.price.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.price.color" />
             <ElCheckbox v-model="formData.fields.price.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="市场价" prop="fields.marketPrice.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.marketPrice.color" />
             <ElCheckbox v-model="formData.fields.marketPrice.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品销量" prop="fields.salesCount.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.salesCount.color" />
             <ElCheckbox v-model="formData.fields.salesCount.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品库存" prop="fields.stock.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.stock.color" />
             <ElCheckbox v-model="formData.fields.stock.show" />
           </div>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionPoint/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PromotionPoint/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionPoint/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/index.vue
similarity index 99%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PromotionPoint/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/index.vue
index b68f5824e..3ff8336dd 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionPoint/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/index.vue
@@ -135,7 +135,7 @@ const calculateWidth = () => {
         <ElImage :src="spu.picUrl" class="h-full w-full" fit="cover" />
       </div>
       <div
-        class="box-border flex flex-col gap-[8px] p-[8px]"
+        class="box-border flex flex-col gap-2 p-2"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionPoint/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/property.vue
similarity index 96%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PromotionPoint/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/property.vue
index b15920d36..c028feacd 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionPoint/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/property.vue
@@ -59,37 +59,37 @@ const formData = useVModel(props, 'modelValue', emit);
           </ElRadioGroup>
         </ElFormItem>
         <ElFormItem label="商品名称" prop="fields.name.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.name.color" />
             <ElCheckbox v-model="formData.fields.name.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品简介" prop="fields.introduction.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.introduction.color" />
             <ElCheckbox v-model="formData.fields.introduction.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品价格" prop="fields.price.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.price.color" />
             <ElCheckbox v-model="formData.fields.price.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="市场价" prop="fields.marketPrice.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.marketPrice.color" />
             <ElCheckbox v-model="formData.fields.marketPrice.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品销量" prop="fields.salesCount.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.salesCount.color" />
             <ElCheckbox v-model="formData.fields.salesCount.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品库存" prop="fields.stock.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.stock.color" />
             <ElCheckbox v-model="formData.fields.stock.show" />
           </div>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionSeckill/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PromotionSeckill/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionSeckill/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PromotionSeckill/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionSeckill/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/property.vue
similarity index 97%
rename from apps/web-ele/src/components/diy-editor/components/mobile/PromotionSeckill/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/property.vue
index 50852e62b..3dd246f02 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/PromotionSeckill/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/property.vue
@@ -76,37 +76,37 @@ onMounted(async () => {
           </ElRadioGroup>
         </ElFormItem>
         <ElFormItem label="商品名称" prop="fields.name.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.name.color" />
             <ElCheckbox v-model="formData.fields.name.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品简介" prop="fields.introduction.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.introduction.color" />
             <ElCheckbox v-model="formData.fields.introduction.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品价格" prop="fields.price.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.price.color" />
             <ElCheckbox v-model="formData.fields.price.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="市场价" prop="fields.marketPrice.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.marketPrice.color" />
             <ElCheckbox v-model="formData.fields.marketPrice.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品销量" prop="fields.salesCount.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.salesCount.color" />
             <ElCheckbox v-model="formData.fields.salesCount.show" />
           </div>
         </ElFormItem>
         <ElFormItem label="商品库存" prop="fields.stock.show">
-          <div class="gap-8px flex">
+          <div class="flex gap-2">
             <ColorInput v-model="formData.fields.stock.color" />
             <ElCheckbox v-model="formData.fields.stock.show" />
           </div>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/SearchBar/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/SearchBar/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/search-bar/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/SearchBar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/SearchBar/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/search-bar/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/SearchBar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/property.vue
similarity index 97%
rename from apps/web-ele/src/components/diy-editor/components/mobile/SearchBar/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/search-bar/property.vue
index 76a86d330..149f52fce 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/SearchBar/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/property.vue
@@ -18,7 +18,7 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '#/components/diy-editor/components/ComponentContainerProperty.vue';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import Draggable from '#/components/draggable/index.vue';
 
 /** 搜索框属性面板 */
@@ -45,7 +45,7 @@ watch(
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
-    <ElForm label-width="80px" :model="formData" class="m-t-8px">
+    <ElForm label-width="80px" :model="formData" class="mt-2">
       <ElCard header="搜索热词" class="property-group" shadow="never">
         <Draggable
           v-model="formData.hotKeywords"
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/TabBar/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/TabBar/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/TabBar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/TabBar/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/TabBar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/property.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/TabBar/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/property.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/TitleBar/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/TitleBar/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/title-bar/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/TitleBar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/index.vue
similarity index 91%
rename from apps/web-ele/src/components/diy-editor/components/mobile/TitleBar/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/title-bar/index.vue
index d1abc8131..23d12031a 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/TitleBar/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/index.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { TitleBarProperty } from './config';
 
+import { ElImage } from 'element-plus';
+import { IconifyIcon } from '@vben/icons';
+
 /** 标题栏 */
 defineOptions({ name: 'TitleBar' });
 
@@ -8,7 +11,7 @@ defineProps<{ property: TitleBarProperty }>();
 </script>
 <template>
   <div class="title-bar" :style="{ height: `${property.height}px` }">
-    <el-image
+    <ElImage
       v-if="property.bgImgUrl"
       :src="property.bgImgUrl"
       fit="cover"
@@ -56,7 +59,7 @@ defineProps<{ property: TitleBarProperty }>();
       <span v-if="property.more.type !== 'icon'">
         {{ property.more.text }}
       </span>
-      <Icon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
+      <IconifyIcon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
     </div>
   </div>
 </template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/property.vue
new file mode 100644
index 000000000..2229a9cd9
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/property.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import type { TitleBarProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElForm,
+  ElFormItem,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSlider,
+  ElTooltip,
+  ElInput,
+  ElCheckbox,
+  ElCard,
+} from 'element-plus';
+import { IconifyIcon } from '@vben/icons';
+
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import InputWithColor from '#/components/input-with-color/index.vue';
+import AppLinkInput from '#/components/app-link-input/index.vue';
+
+// 导航栏属性面板
+defineOptions({ name: 'TitleBarProperty' });
+
+const props = defineProps<{ modelValue: TitleBarProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+
+// 表单校验
+const rules = {};
+</script>
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ElForm label-width="85px" :model="formData" :rules="rules">
+      <ElCard header="风格" class="property-group" shadow="never">
+        <ElFormItem label="背景图片" prop="bgImgUrl">
+          <UploadImg
+            v-model="formData.bgImgUrl"
+            width="100%"
+            height="40px"
+            :show-description="false"
+          >
+            <template #tip>建议尺寸 750*80</template>
+          </UploadImg>
+        </ElFormItem>
+        <ElFormItem label="标题位置" prop="textAlign">
+          <ElRadioGroup v-model="formData!.textAlign">
+            <ElTooltip content="居左" placement="top">
+              <ElRadioButton value="left">
+                <IconifyIcon icon="ant-design:align-left-outlined" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip content="居中" placement="top">
+              <ElRadioButton value="center">
+                <IconifyIcon icon="ant-design:align-center-outlined" />
+              </ElRadioButton>
+            </ElTooltip>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="偏移量" prop="marginLeft" label-width="70px">
+          <el-slider
+            v-model="formData.marginLeft"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+          />
+        </ElFormItem>
+        <ElFormItem label="高度" prop="height" label-width="70px">
+          <el-slider
+            v-model="formData.height"
+            :max="200"
+            :min="20"
+            show-input
+            input-size="small"
+          />
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="主标题" class="property-group" shadow="never">
+        <ElFormItem label="文字" prop="title" label-width="40px">
+          <InputWithColor
+            v-model="formData.title"
+            v-model:color="formData.titleColor"
+            show-word-limit
+            maxlength="20"
+          />
+        </ElFormItem>
+        <ElFormItem label="大小" prop="titleSize" label-width="40px">
+          <ElSlider
+            v-model="formData.titleSize"
+            :max="60"
+            :min="10"
+            show-input
+            input-size="small"
+          />
+        </ElFormItem>
+        <ElFormItem label="粗细" prop="titleWeight" label-width="40px">
+          <ElSlider
+            v-model="formData.titleWeight"
+            :min="100"
+            :max="900"
+            :step="100"
+            show-input
+            input-size="small"
+          />
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="副标题" class="property-group" shadow="never">
+        <ElFormItem label="文字" prop="description" label-width="40px">
+          <InputWithColor
+            v-model="formData.description"
+            v-model:color="formData.descriptionColor"
+            show-word-limit
+            maxlength="50"
+          />
+        </ElFormItem>
+        <ElFormItem label="大小" prop="descriptionSize" label-width="40px">
+          <ElSlider
+            v-model="formData.descriptionSize"
+            :max="60"
+            :min="10"
+            show-input
+            input-size="small"
+          />
+        </ElFormItem>
+        <ElFormItem label="粗细" prop="descriptionWeight" label-width="40px">
+          <ElSlider
+            v-model="formData.descriptionWeight"
+            :min="100"
+            :max="900"
+            :step="100"
+            show-input
+            input-size="small"
+          />
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="查看更多" class="property-group" shadow="never">
+        <ElFormItem label="是否显示" prop="more.show">
+          <ElCheckbox v-model="formData.more.show" />
+        </ElFormItem>
+        <!-- 更多按钮的 样式选择 -->
+        <template v-if="formData.more.show">
+          <ElFormItem label="样式" prop="more.type">
+            <ElRadioGroup v-model="formData.more.type">
+              <ElRadio value="text">文字</ElRadio>
+              <ElRadio value="icon">图标</ElRadio>
+              <ElRadio value="all">文字+图标</ElRadio>
+            </ElRadioGroup>
+          </ElFormItem>
+          <ElFormItem
+            label="更多文字"
+            prop="more.text"
+            v-show="formData.more.type !== 'icon'"
+          >
+            <ElInput v-model="formData.more.text" />
+          </ElFormItem>
+          <ElFormItem label="跳转链接" prop="more.url">
+            <AppLinkInput v-model="formData.more.url" />
+          </ElFormItem>
+        </template>
+      </ElCard>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/UserCard/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/user-card/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/UserCard/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/user-card/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-card/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-card/index.vue
new file mode 100644
index 000000000..d5ab9bff6
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-card/index.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { UserCardProperty } from './config';
+
+import { ElAvatar } from 'element-plus';
+import { IconifyIcon } from '@vben/icons';
+
+/** 用户卡片 */
+defineOptions({ name: 'UserCard' });
+// 定义属性
+defineProps<{ property: UserCardProperty }>();
+</script>
+<template>
+  <div class="flex flex-col">
+    <div class="flex items-center justify-between px-[18px] py-[24px]">
+      <div class="flex flex-1 items-center gap-[16px]">
+        <ElAvatar :size="60">
+          <IconifyIcon icon="ep:avatar" :size="60" />
+        </ElAvatar>
+        <span class="text-[18px] font-bold">芋道源码</span>
+      </div>
+      <IconifyIcon icon="tdesign:qrcode" :size="20" />
+    </div>
+    <div
+      class="flex items-center justify-between bg-white px-[20px] py-[8px] text-[12px]"
+    >
+      <span class="text-[#ff690d]">点击绑定手机号</span>
+      <span class="rounded-[26px] bg-[#ff6100] px-[8px] py-[5px] text-white">
+        去绑定
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/UserCard/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-card/property.vue
similarity index 81%
rename from apps/web-ele/src/components/diy-editor/components/mobile/UserCard/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/user-card/property.vue
index c7b7de1aa..2aa964d84 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/UserCard/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-card/property.vue
@@ -2,6 +2,7 @@
 import type { UserCardProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 
 // 用户卡片属性面板
 defineOptions({ name: 'UserCardProperty' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/UserCoupon/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/UserCoupon/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/UserCoupon/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/index.vue
similarity index 87%
rename from apps/web-ele/src/components/diy-editor/components/mobile/UserCoupon/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/index.vue
index ba43a7258..2df2df328 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/UserCoupon/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/index.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import type { UserCouponProperty } from './config';
 
+import { ElImage } from 'element-plus';
+
 /** 用户卡券 */
 defineOptions({ name: 'UserCoupon' });
 // 定义属性
 defineProps<{ property: UserCouponProperty }>();
 </script>
 <template>
-  <el-image
+  <ElImage
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
   />
 </template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/UserCoupon/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/property.vue
similarity index 81%
rename from apps/web-ele/src/components/diy-editor/components/mobile/UserCoupon/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/property.vue
index 4ad4a304f..83161a3e6 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/UserCoupon/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/property.vue
@@ -2,6 +2,7 @@
 import type { UserCouponProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 
 // 用户卡券属性面板
 defineOptions({ name: 'UserCouponProperty' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/UserOrder/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/user-order/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/UserOrder/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/user-order/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/UserOrder/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-order/index.vue
similarity index 87%
rename from apps/web-ele/src/components/diy-editor/components/mobile/UserOrder/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/user-order/index.vue
index 77cb3883f..ab527acee 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/UserOrder/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-order/index.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import type { UserOrderProperty } from './config';
 
+import { ElImage } from 'element-plus';
+
 /** 用户订单 */
 defineOptions({ name: 'UserOrder' });
 // 定义属性
 defineProps<{ property: UserOrderProperty }>();
 </script>
 <template>
-  <el-image
+  <ElImage
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
   />
 </template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/UserOrder/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-order/property.vue
similarity index 81%
rename from apps/web-ele/src/components/diy-editor/components/mobile/UserOrder/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/user-order/property.vue
index 44fe906e9..34367bc80 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/UserOrder/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-order/property.vue
@@ -2,6 +2,7 @@
 import type { UserOrderProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 
 // 用户订单属性面板
 defineOptions({ name: 'UserOrderProperty' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/UserWallet/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/UserWallet/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/UserWallet/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/index.vue
similarity index 87%
rename from apps/web-ele/src/components/diy-editor/components/mobile/UserWallet/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/index.vue
index cb91df303..7581e54c9 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/UserWallet/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/index.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import type { UserWalletProperty } from './config';
 
+import { ElImage } from 'element-plus';
+
 /** 用户资产 */
 defineOptions({ name: 'UserWallet' });
 // 定义属性
 defineProps<{ property: UserWalletProperty }>();
 </script>
 <template>
-  <el-image
+  <ElImage
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
   />
 </template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/UserWallet/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/property.vue
similarity index 81%
rename from apps/web-ele/src/components/diy-editor/components/mobile/UserWallet/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/property.vue
index 776783a3a..4af0c0b47 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/UserWallet/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/property.vue
@@ -2,6 +2,7 @@
 import type { UserWalletProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 
 // 用户资产属性面板
 defineOptions({ name: 'UserWalletProperty' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/VideoPlayer/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/video-player/config.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/VideoPlayer/config.ts
rename to apps/web-ele/src/components/diy-editor/components/mobile/video-player/config.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/VideoPlayer/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/video-player/index.vue
similarity index 92%
rename from apps/web-ele/src/components/diy-editor/components/mobile/VideoPlayer/index.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/video-player/index.vue
index fe205ca05..ddd448d96 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/VideoPlayer/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/video-player/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { VideoPlayerProperty } from './config';
 
+import { ElImage } from 'element-plus';
+
 /** 视频播放 */
 defineOptions({ name: 'VideoPlayer' });
 
@@ -8,7 +10,7 @@ defineProps<{ property: VideoPlayerProperty }>();
 </script>
 <template>
   <div class="w-full" :style="{ height: `${property.style.height}px` }">
-    <el-image
+    <ElImage
       class="w-full"
       :src="property.posterUrl"
       v-if="property.posterUrl"
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/VideoPlayer/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/video-player/property.vue
similarity index 59%
rename from apps/web-ele/src/components/diy-editor/components/mobile/VideoPlayer/property.vue
rename to apps/web-ele/src/components/diy-editor/components/mobile/video-player/property.vue
index bb1ebcd9b..f65259f7e 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/VideoPlayer/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/video-player/property.vue
@@ -2,6 +2,10 @@
 import type { VideoPlayerProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import { ElForm, ElFormItem, ElSlider, ElSwitch } from 'element-plus';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import UploadFile from '#/components/upload/file-upload.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
 
 // 视频播放属性面板
 defineOptions({ name: 'VideoPlayerProperty' });
@@ -14,8 +18,8 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <template #style>
-      <el-form-item label="高度" prop="height">
-        <el-slider
+      <ElFormItem label="高度" prop="height">
+        <ElSlider
           v-model="formData.style.height"
           :max="500"
           :min="100"
@@ -23,34 +27,34 @@ const formData = useVModel(props, 'modelValue', emit);
           input-size="small"
           :show-input-controls="false"
         />
-      </el-form-item>
+      </ElFormItem>
     </template>
-    <el-form label-width="80px" :model="formData">
-      <el-form-item label="上传视频" prop="videoUrl">
+    <ElForm label-width="80px" :model="formData">
+      <ElFormItem label="上传视频" prop="videoUrl">
         <UploadFile
           v-model="formData.videoUrl"
           :file-type="['mp4']"
           :limit="1"
           :file-size="100"
-          class="min-w-80px"
+          class="min-w-[80px]"
         />
-      </el-form-item>
-      <el-form-item label="上传封面" prop="posterUrl">
+      </ElFormItem>
+      <ElFormItem label="上传封面" prop="posterUrl">
         <UploadImg
           v-model="formData.posterUrl"
           draggable="false"
           height="80px"
           width="100%"
-          class="min-w-80px"
+          class="min-w-[80px]"
           :show-description="false"
         >
           <template #tip> 建议宽度750 </template>
         </UploadImg>
-      </el-form-item>
-      <el-form-item label="自动播放" prop="autoplay">
-        <el-switch v-model="formData.autoplay" />
-      </el-form-item>
-    </el-form>
+      </ElFormItem>
+      <ElFormItem label="自动播放" prop="autoplay">
+        <ElSwitch v-model="formData.autoplay" />
+      </ElFormItem>
+    </ElForm>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-ele/src/components/diy-editor/index.vue b/apps/web-ele/src/components/diy-editor/index.vue
index e39ac2150..7f7ce0e38 100644
--- a/apps/web-ele/src/components/diy-editor/index.vue
+++ b/apps/web-ele/src/components/diy-editor/index.vue
@@ -25,12 +25,12 @@ import {
   componentConfigs,
   components,
 } from '#/components/diy-editor/components/mobile';
-import { component as PAGE_CONFIG_COMPONENT } from '#/components/diy-editor/components/mobile/PageConfig/config';
+import { component as PAGE_CONFIG_COMPONENT } from '#/components/diy-editor/components/mobile/page-config/config';
 
-import ComponentContainer from './components/ComponentContainer.vue';
-import ComponentLibrary from './components/ComponentLibrary.vue';
-import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/NavigationBar/config';
-import { component as TAB_BAR_COMPONENT } from './components/mobile/TabBar/config';
+import ComponentContainer from './components/component-container.vue';
+import ComponentLibrary from './components/component-library.vue';
+import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/navigation-bar/config';
+import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
 
 /** 页面装修详情页 */
 defineOptions({
diff --git a/apps/web-ele/src/components/upload/image-upload.vue b/apps/web-ele/src/components/upload/image-upload.vue
index 4fe8875af..f57775656 100644
--- a/apps/web-ele/src/components/upload/image-upload.vue
+++ b/apps/web-ele/src/components/upload/image-upload.vue
@@ -13,7 +13,7 @@ import type { AxiosProgressEvent } from '#/api/infra/file';
 
 import { nextTick, ref, toRefs, watch } from 'vue';
 
-import { CloudUpload } from '@vben/icons';
+import { Plus } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { isFunction, isObject, isString } from '@vben/utils';
 
@@ -313,8 +313,7 @@ const triggerEdit = () => {
         }"
       >
         <div class="upload-content flex flex-col items-center justify-center">
-          <CloudUpload />
-          <div class="mt-2">{{ $t('ui.upload.imgUpload') }}</div>
+          <Plus />
         </div>
       </ElUpload>
     </template>