From 218f28f35c04fc861b8391e748f2af7c2af67e27 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:18:00 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20(web-ele)=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-调整组件内元素的排列顺序
- 修复部分组件的样式问题
- 优化代码结构，提高可维护性
---
 .../components/component-container.vue        |  4 ++--
 .../components/mobile/Divider/property.vue    |  3 ++-
 .../components/mobile/Popover/index.vue       |  4 ++--
 .../components/mobile/Popover/property.vue    |  3 ++-
 .../mobile/coupon-card/property.vue           |  2 +-
 .../components/mobile/hot-zone/property.vue   |  3 ++-
 .../components/mobile/image-bar/index.vue     |  1 +
 .../components/mobile/image-bar/property.vue  |  3 ++-
 .../components/mobile/magic-cube/index.vue    |  5 +++--
 .../components/mobile/magic-cube/property.vue |  5 +++--
 .../components/mobile/menu-list/index.vue     | 14 +++++---------
 .../components/mobile/menu-list/property.vue  |  7 ++++---
 .../components/mobile/menu-swiper/index.vue   |  3 ++-
 .../mobile/menu-swiper/property.vue           | 14 +++++++-------
 .../components/mobile/notice-bar/index.vue    |  9 +++++----
 .../components/mobile/notice-bar/property.vue |  7 +++----
 .../mobile/page-config/property.vue           |  1 +
 .../mobile/product-card/property.vue          | 12 ++++++------
 .../components/mobile/product-list/index.vue  |  1 +
 .../mobile/product-list/property.vue          |  8 ++++----
 .../mobile/promotion-article/property.vue     |  5 +++--
 .../components/mobile/title-bar/index.vue     |  3 ++-
 .../components/mobile/title-bar/property.vue  | 19 ++++++++++---------
 .../components/mobile/user-card/index.vue     |  3 ++-
 .../components/mobile/user-card/property.vue  |  1 +
 .../mobile/user-coupon/property.vue           |  1 +
 .../components/mobile/user-order/property.vue |  1 +
 .../mobile/user-wallet/property.vue           |  1 +
 .../mobile/video-player/property.vue          |  1 +
 29 files changed, 80 insertions(+), 64 deletions(-)

diff --git a/apps/web-ele/src/components/diy-editor/components/component-container.vue b/apps/web-ele/src/components/diy-editor/components/component-container.vue
index 3d2b14955..5a9b803d1 100644
--- a/apps/web-ele/src/components/diy-editor/components/component-container.vue
+++ b/apps/web-ele/src/components/diy-editor/components/component-container.vue
@@ -6,13 +6,13 @@ import type {
 
 import { computed } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+
 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';
-
 /**
  * 组件容器：目前在中间部分
  * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
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 b3ad9f4fb..7746b73bd 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
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { DividerProperty } from './config';
 
+import { IconifyIcon } from '@vben/icons';
+
 import { useVModel } from '@vueuse/core';
 import {
   ElForm,
@@ -10,7 +12,6 @@ import {
   ElSlider,
   ElTooltip,
 } from 'element-plus';
-import { IconifyIcon } from '@vben/icons';
 
 import ColorInput from '#/components/input-with-color/index.vue';
 
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 26031e938..bc724eca9 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,11 +1,11 @@
 <script setup lang="ts">
 import type { PopoverProperty } from './config';
 
-import { ElImage } from 'element-plus';
+import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { ref } from 'vue';
+import { ElImage } from 'element-plus';
 
 /** 弹窗广告 */
 defineOptions({ name: 'Popover' });
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 b97f070f0..0d69fd9db 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
@@ -9,9 +9,10 @@ import {
   ElRadioGroup,
   ElTooltip,
 } from 'element-plus';
+
+import AppLinkInput from '#/components/app-link-input/index.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';
 
 // 弹窗广告属性面板
 defineOptions({ name: 'PopoverProperty' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue
index fc19dad7c..55332dede 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue
@@ -21,8 +21,8 @@ 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 UploadImg from '#/components/upload/image-upload.vue';
 import {
   CouponTemplateTakeTypeEnum,
   PromotionDiscountTypeEnum,
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/property.vue
index 78549637c..e3c602f65 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -4,7 +4,8 @@ import type { HotZoneProperty } from './config';
 import { ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
-import { ElForm, ElFormItem, ElText, ElButton } from 'element-plus';
+import { ElButton, ElForm, ElFormItem, ElText } from 'element-plus';
+
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/index.vue
index 56971380a..4562f7b32 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/index.vue
@@ -2,6 +2,7 @@
 import type { ImageBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
+
 import { ElImage } from 'element-plus';
 
 /** 图片展示 */
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue
index 4e31edcfe..ce1b3ad5b 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue
@@ -3,9 +3,10 @@ import type { ImageBarProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem } from 'element-plus';
+
+import AppLinkInput from '#/components/app-link-input/index.vue';
 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' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/index.vue
index 27ad9c900..5a3aa7e57 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { MagicCubeProperty } from './config';
 
-import { ElImage } from 'element-plus';
+import { computed } from 'vue';
+
 import { IconifyIcon } from '@vben/icons';
 
-import { computed } from 'vue';
+import { ElImage } from 'element-plus';
 
 /** 广告魔方 */
 defineOptions({ name: 'MagicCube' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue
index dfe090530..80efbae66 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue
@@ -5,10 +5,11 @@ 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 ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import MagicCubeEditor from '#/components/magic-cube-editor/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
 
 /** 广告魔方属性面板 */
 defineOptions({ name: 'MagicCubeProperty' });
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
index 9ff533a8f..12670dcb0 100644
--- 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
@@ -11,23 +11,19 @@ defineProps<{ property: MenuListProperty }>();
 </script>
 
 <template>
-  <div class="min-h-[42px] flex flex-col">
+  <div class="flex min-h-[42px] 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"
+      class="item flex h-[42px] flex-row items-center justify-between gap-1 px-3"
     >
-              <div class="gap-2 flex flex-1 flex-row items-center">
-        <ElImage
-          v-if="item.iconUrl"
-          class="h-4 w-4"
-          :src="item.iconUrl"
-        />
+      <div class="flex flex-1 flex-row items-center gap-2">
+        <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">
+      <div class="item-center flex flex-row justify-center gap-1">
         <span class="text-xs" :style="{ color: item.subtitleColor }">{{
           item.subtitle
         }}</span>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue
index 3c4dbc1dc..a98edc254 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue
@@ -4,12 +4,13 @@ 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 AppLinkInput from '#/components/app-link-input/index.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';
 import InputWithColor from '#/components/input-with-color/index.vue';
-import AppLinkInput from '#/components/app-link-input/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
 
 /** 列表导航属性面板 */
 defineOptions({ name: 'MenuListProperty' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/index.vue
index a6dd6f928..0d69c7c86 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { MenuSwiperItemProperty, MenuSwiperProperty } from './config';
 
-import { ElCarousel, ElCarouselItem, ElImage } from 'element-plus';
 import { ref, watch } from 'vue';
 
+import { ElCarousel, ElCarouselItem, ElImage } from 'element-plus';
+
 /** 菜单导航 */
 defineOptions({ name: 'MenuSwiper' });
 const props = defineProps<{ property: MenuSwiperProperty }>();
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
index 0a9413685..62dd6e92d 100644
--- 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
@@ -3,6 +3,7 @@ import type { MenuSwiperProperty } from './config';
 
 import { cloneDeep } from '@vben/utils';
 
+import { useVModel } from '@vueuse/core';
 import {
   ElCard,
   ElForm,
@@ -12,15 +13,14 @@ import {
   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';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import Draggable from '#/components/draggable/index.vue';
+import InputWithColor from '#/components/input-with-color/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
 
 /** 菜单导航属性面板 */
 defineOptions({ name: 'MenuSwiperProperty' });
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
index 106c8d31a..589e89373 100644
--- 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
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { NoticeBarProperty } from './config';
 
-import { ElCarousel, ElCarouselItem, ElImage, ElDivider } from 'element-plus';
 import { IconifyIcon } from '@vben/icons';
 
+import { ElCarousel, ElCarouselItem, ElDivider, ElImage } from 'element-plus';
+
 /** 公告栏 */
 defineOptions({ name: 'NoticeBar' });
 
@@ -12,7 +13,7 @@ defineProps<{ property: NoticeBarProperty }>();
 
 <template>
   <div
-    class="py-1 text-xs flex items-center"
+    class="flex items-center py-1 text-xs"
     :style="{
       backgroundColor: property.backgroundColor,
       color: property.textColor,
@@ -24,10 +25,10 @@ defineProps<{ property: NoticeBarProperty }>();
       height="24px"
       direction="vertical"
       :autoplay="true"
-      class="pr-2 flex-1"
+      class="flex-1 pr-2"
     >
       <ElCarouselItem v-for="(item, index) in property.contents" :key="index">
-        <div class="h-6 leading-6 truncate">{{ item.text }}</div>
+        <div class="h-6 truncate leading-6">{{ item.text }}</div>
       </ElCarouselItem>
     </ElCarousel>
     <IconifyIcon icon="ep:arrow-right" />
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue
index 5ab1b65f6..935e5ec4d 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import type { NoticeBarProperty } from './config';
 
+import { useVModel } from '@vueuse/core';
 import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus';
 
-import { useVModel } from '@vueuse/core';
-
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import ColorInput from '#/components/color-input/index.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';
-import AppLinkInput from '#/components/app-link-input/index.vue';
-import ColorInput from '#/components/color-input/index.vue';
 
 // 通知栏属性面板
 defineOptions({ name: 'NoticeBarProperty' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/page-config/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/page-config/property.vue
index e9e272a6f..4dca2797e 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/page-config/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/page-config/property.vue
@@ -3,6 +3,7 @@ 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';
 
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/product-card/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/product-card/property.vue
index 01aefe4ac..e0b3dfb77 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/product-card/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-2 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-2 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-2 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-2 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-2 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-2 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/product-list/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/product-list/index.vue
index f670bfbf4..0e7ec6e1b 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/product-list/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';
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
index 897a341f7..f4e6d9686 100644
--- 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
@@ -3,19 +3,19 @@ import type { ProductListProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 import {
+  ElCard,
   ElForm,
   ElFormItem,
-  ElCard,
-  ElRadioGroup,
   ElRadioButton,
+  ElRadioGroup,
   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';
 
 // 商品栏属性面板
@@ -67,7 +67,7 @@ const formData = useVModel(props, 'modelValue', emit);
       </ElCard>
       <ElCard header="角标" class="property-group" shadow="never">
         <ElFormItem label="角标" prop="badge.show">
-          <el-switch v-model="formData.badge.show" />
+          <ElSwitch v-model="formData.badge.show" />
         </ElFormItem>
         <ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/property.vue
index fd73c923a..82d3f35b4 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -6,9 +6,10 @@ 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 { ElForm, ElFormItem, ElOption, ElSelect } from 'element-plus';
+
 import * as ArticleApi from '#/api/mall/promotion/article/index';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 
 // 营销文章属性面板
 defineOptions({ name: 'PromotionArticleProperty' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/index.vue
index 23d12031a..8ee389d88 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/index.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { TitleBarProperty } from './config';
 
-import { ElImage } from 'element-plus';
 import { IconifyIcon } from '@vben/icons';
 
+import { ElImage } from 'element-plus';
+
 /** 标题栏 */
 defineOptions({ name: 'TitleBar' });
 
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
index 2229a9cd9..45a4147c0 100644
--- 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
@@ -1,24 +1,25 @@
 <script setup lang="ts">
 import type { TitleBarProperty } from './config';
 
+import { IconifyIcon } from '@vben/icons';
+
 import { useVModel } from '@vueuse/core';
 import {
+  ElCard,
+  ElCheckbox,
   ElForm,
   ElFormItem,
+  ElInput,
   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';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import InputWithColor from '#/components/input-with-color/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
 
 // 导航栏属性面板
 defineOptions({ name: 'TitleBarProperty' });
@@ -59,7 +60,7 @@ const rules = {};
           </ElRadioGroup>
         </ElFormItem>
         <ElFormItem label="偏移量" prop="marginLeft" label-width="70px">
-          <el-slider
+          <ElSlider
             v-model="formData.marginLeft"
             :max="100"
             :min="0"
@@ -68,7 +69,7 @@ const rules = {};
           />
         </ElFormItem>
         <ElFormItem label="高度" prop="height" label-width="70px">
-          <el-slider
+          <ElSlider
             v-model="formData.height"
             :max="200"
             :min="20"
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
index d5ab9bff6..9cb312f37 100644
--- 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
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { UserCardProperty } from './config';
 
-import { ElAvatar } from 'element-plus';
 import { IconifyIcon } from '@vben/icons';
 
+import { ElAvatar } from 'element-plus';
+
 /** 用户卡片 */
 defineOptions({ name: 'UserCard' });
 // 定义属性
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-card/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-card/property.vue
index 2aa964d84..38f5d2b5d 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/user-card/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';
 
 // 用户卡片属性面板
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/property.vue
index 83161a3e6..c9fb1fbfb 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/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';
 
 // 用户卡券属性面板
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-order/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-order/property.vue
index 34367bc80..d403c325b 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/user-order/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';
 
 // 用户订单属性面板
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/property.vue
index 4af0c0b47..851e7f2f1 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/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';
 
 // 用户资产属性面板
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/video-player/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/video-player/property.vue
index f65259f7e..d07835f25 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/video-player/property.vue
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/video-player/property.vue
@@ -3,6 +3,7 @@ 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';