refactor: (web-ele)优化移动端组件代码结构

-调整组件内元素的排列顺序
- 修复部分组件的样式问题
- 优化代码结构，提高可维护性

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';
-
 /**
  * 组件容器：目前在中间部分
  * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式

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';
 

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' });

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' });

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,

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';
 

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';
 
 /** 图片展示 */

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' });

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' });

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' });

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">
+      <div class="flex flex-1 flex-row items-center gap-2">
-        <ElImage
+        <ElImage v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
-          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>

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' });

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 }>();

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' });

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" />

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' });

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';
 

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>

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';

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

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 { ElForm, ElFormItem, ElOption, ElSelect } from 'element-plus';
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+
 import * as ArticleApi from '#/api/mall/promotion/article/index';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 
 // 营销文章属性面板
 defineOptions({ name: 'PromotionArticleProperty' });

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' });
 

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"

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' });
 // 定义属性

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';
 
 // 用户卡片属性面板

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';
 
 // 用户卡券属性面板

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';
 
 // 用户订单属性面板

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';
 
 // 用户资产属性面板

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';