feat：【antd】【mall】diy-editor 初始化（暂时不可用，保证界面先有。。。）linter

apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue

@@ -120,8 +120,9 @@ function handleGroupSelected(group: string) {
 
 /** 自动滚动分组按钮，确保分组按钮保持在可视区域内 */
 function scrollToGroupBtn(group: string) {
-  const groupBtn = groupBtnRefs.value
+  const groupBtn = groupBtnRefs.value.find(
-    .find((ref: HTMLButtonElement | undefined) => ref?.textContent === group);
+    (ref: HTMLButtonElement | undefined) => ref?.textContent === group,
+  );
   if (groupBtn && groupScrollbar.value) {
     groupScrollbar.value.scrollTop = groupBtn.offsetTop;
   }
@@ -150,14 +151,11 @@ function handleProductCategorySelected(id: number) {
   <Modal v-model:open="dialogVisible" title="选择链接" width="65%">
     <div class="flex h-[500px] gap-2">
       <!-- 左侧分组列表 -->
-      <div
+      <div class="flex h-full flex-col overflow-y-auto" ref="groupScrollbar">
-        class="h-full overflow-y-auto flex flex-col"
-        ref="groupScrollbar"
-      >
         <Button
           v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
           :key="groupIndex"
-          class="ml-0 mr-4 w-[90px] justify-start mb-1"
+          class="mb-1 ml-0 mr-4 w-[90px] justify-start"
           :class="[{ active: activeGroup === group.name }]"
           ref="groupBtnRefs"
           :type="activeGroup === group.name ? 'primary' : 'default'"

apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue

@@ -39,7 +39,11 @@ watch(
 </script>
 <template>
   <InputGroup compact>
-    <Input v-model:value="appLink" placeholder="输入或选择链接" class="flex-1" />
+    <Input
+      v-model:value="appLink"
+      placeholder="输入或选择链接"
+      class="flex-1"
+    />
     <Button @click="handleOpenDialog">选择</Button>
   </InputGroup>
 

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue

@@ -122,7 +122,11 @@ const handleSliderChange = (prop: string) => {
     <!-- 每个组件的通用内容 -->
     <TabPane tab="样式" key="style">
       <Card title="组件样式" class="property-group">
-        <Form :model="formData" labelCol="{ span: 6 }" wrapperCol="{ span: 18 }">
+        <Form
+          :model="formData"
+          label-col="{ span: 6 }"
+          wrapper-col="{ span: 18 }"
+        >
           <FormItem label="组件背景" name="bgType">
             <RadioGroup v-model:value="formData.bgType">
               <Radio value="color">纯色</Radio>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue

@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import type {
+import type { ComponentStyle, DiyComponent } from '../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../util';
 
 import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { VerticalButtonGroup } from '#/views/mall/promotion/components';
 
 import { components } from './mobile';
-import { VerticalButtonGroup } from '#/views/mall/promotion/components';
 
 /**
  * 组件容器：目前在中间部分

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
+import type { DiyComponent, DiyComponentLibrary } from '../util';
-  DiyComponent,
-  DiyComponentLibrary,
-} from '../util';
 
 import { reactive, watch } from 'vue';
 
@@ -66,7 +63,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 <template>
   <div class="editor-left w-[261px]">
     <div class="h-full overflow-y-auto">
-      <Collapse v-model:activeKey="extendGroups">
+      <Collapse v-model:active-key="extendGroups">
         <CollapsePanel
           v-for="group in groups"
           :key="group.name"

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 轮播图属性 */
 export interface CarouselProperty {

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

@@ -5,7 +5,6 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 轮播图 */
 defineOptions({ name: 'Carousel' });
 
@@ -27,13 +26,17 @@ const handleIndexChange = (index: number) => {
   <div v-else class="relative">
     <Carousel
       :autoplay="property.autoplay"
-      :autoplaySpeed="property.interval * 1000"
+      :autoplay-speed="property.interval * 1000"
       :dots="property.indicator !== 'number'"
       @change="handleIndexChange"
       class="h-[174px]"
     >
       <div v-for="(item, index) in property.items" :key="index">
-        <Image class="h-full w-full object-cover" :src="item.imgUrl" :preview="false" />
+        <Image
+          class="h-full w-full object-cover"
+          :src="item.imgUrl"
+          :preview="false"
+        />
       </div>
     </Carousel>
     <div

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

@@ -5,11 +5,12 @@ import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 轮播图属性面板
 defineOptions({ name: 'CarouselProperty' });
 

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { DividerProperty } from './config';
 
-import { IconifyIcon } from '@vben/icons';
 
-import { useVModel } from '@vueuse/core';
+
+

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

@@ -5,7 +5,6 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 弹窗广告 */
 defineOptions({ name: 'Popover' });
 // 定义属性

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

@@ -1,4 +1,3 @@
 <script setup lang="ts">
-import type { PopoverProperty } from './config';
 
-import { useVModel } from '@vueuse/core';
+

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

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 商品卡片属性 */
 export interface CouponCardProperty {

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

@@ -5,7 +5,6 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
 
 import { onMounted, ref, watch } from 'vue';
 
-
 import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
 
 import {

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

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { CouponCardProperty } from './config';
 
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 
-import { ref, watch } from 'vue';
+
 

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

@@ -1,4 +1,3 @@
 <script setup lang="ts">
-import type { FloatingActionButtonProperty } from './config';
 
-import { useVModel } from '@vueuse/core';
+

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

@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import type { ControlDot } from './controller';
+
-
+
-import type { HotZoneItemProperty } from '../../config';
+
-import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
+
-
+
-import { ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
 
 

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

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 热区属性 */
 export interface HotZoneProperty {

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { HotZoneProperty } from './config';
 
-
 /** 热区 */
 defineOptions({ name: 'HotZone' });
 const props = defineProps<{ property: HotZoneProperty }>();

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

@@ -5,9 +5,9 @@ import { ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
 
 /** 热区属性面板 */

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 图片展示属性 */
 export interface ImageBarProperty {

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

@@ -3,7 +3,6 @@ import type { ImageBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 图片展示 */
 defineOptions({ name: 'ImageBar' });
 
@@ -17,7 +16,12 @@ defineProps<{ property: ImageBarProperty }>();
   >
     <IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
   </div>
-  <Image class="min-h-8 w-full" v-else :src="property.imgUrl" :preview="false" />
+  <Image
+    class="min-h-8 w-full"
+    v-else
+    :src="property.imgUrl"
+    :preview="false"
+  />
 </template>
 
 <style scoped lang="scss">

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

@@ -3,10 +3,11 @@ import type { ImageBarProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 图片展示属性面板
 defineOptions({ name: 'ImageBarProperty' });
 

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

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 广告魔方属性 */
 export interface MagicCubeProperty {

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

@@ -5,7 +5,6 @@ import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 广告魔方 */
 defineOptions({ name: 'MagicCube' });
 const props = defineProps<{ property: MagicCubeProperty }>();

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

@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import type { MagicCubeProperty } from './config';
 
-import { ref } from 'vue';
 
-import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
+
-import UploadImg from '#/components/upload/image-upload.vue';
+

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

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { MenuGridProperty } from './config';
 
-
 /** 宫格导航 */
 defineOptions({ name: 'MenuGrid' });
 defineProps<{ property: MenuGridProperty }>();
@@ -26,7 +25,12 @@ defineProps<{ property: MenuGridProperty }>();
       >
         {{ item.badge.text }}
       </span>
-      <Image v-if="item.iconUrl" class="h-7 w-7" :src="item.iconUrl" :preview="false" />
+      <Image
+        v-if="item.iconUrl"
+        class="h-7 w-7"
+        :src="item.iconUrl"
+        :preview="false"
+      />
       <span
         class="mt-2 h-4 text-xs leading-4"
         :style="{ color: item.titleColor }"

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

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 

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

@@ -3,7 +3,6 @@ import type { MenuListProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 列表导航 */
 defineOptions({ name: 'MenuList' });
 defineProps<{ property: MenuListProperty }>();

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

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import type { MenuListProperty } from './config';
 
-import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
+
-import UploadImg from '#/components/upload/image-upload.vue';

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

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 

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

@@ -3,7 +3,6 @@ import type { MenuSwiperItemProperty, MenuSwiperProperty } from './config';
 
 import { ref, watch } from 'vue';
 
-
 /** 菜单导航 */
 defineOptions({ name: 'MenuSwiper' });
 const props = defineProps<{ property: MenuSwiperProperty }>();

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { MenuSwiperProperty } from './config';
 
-import { cloneDeep } from '@vben/utils';
 
-import { useVModel } from '@vueuse/core';
+
+

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

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import type { NavigationBarCellProperty } from '../config';
 
-import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/util';
 
-import { computed, ref } from 'vue';
 
-import { useVModel } from '@vueuse/core';
+
+

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

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import type { StyleValue } from 'vue';
 
+import type { SearchProperty } from '../search-bar/config';
 import type {
   NavigationBarCellProperty,
   NavigationBarProperty,
 } from './config';
 
-import type { SearchProperty } from '../search-bar/config';
-
 import { computed } from 'vue';
 
 import appNavbarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
+
 import SearchBar from '../search-bar/index.vue';
 
 /** 页面顶部导航栏 */

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 公告栏属性 */
 export interface NoticeBarProperty {

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

@@ -3,7 +3,6 @@ import type { NoticeBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 公告栏 */
 defineOptions({ name: 'NoticeBar' });
 

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

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import type { NoticeBarProperty } from './config';
 
-import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
+
-import UploadImg from '#/components/upload/image-upload.vue';

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

@@ -19,7 +19,12 @@ const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
-  <Form :model="formData" :rules="rules" labelCol="{ span: 6 }" wrapperCol="{ span: 18 }">
+  <Form
+    :model="formData"
+    :rules="rules"
+    label-col="{ span: 6 }"
+    wrapper-col="{ span: 18 }"
+  >
     <FormItem label="页面描述" name="description">
       <Textarea
         v-model:value="formData!.description"

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

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 商品卡片属性 */
 export interface ProductCardProperty {

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

@@ -7,7 +7,6 @@ import { ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
-
 import * as ProductSpuApi from '#/api/mall/product/spu';
 
 /** 商品卡片 */

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { ProductCardProperty } from './config';
 
-import { IconifyIcon } from '@vben/icons';
 
-import { useVModel } from '@vueuse/core';
+
+

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 商品栏属性 */
 export interface ProductListProperty {

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

@@ -7,7 +7,6 @@ import { onMounted, ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
-
 import * as ProductSpuApi from '#/api/mall/product/spu';
 
 /** 商品栏 */

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

@@ -5,9 +5,10 @@ import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
 // TODO: 添加组件
 // import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 营销文章属性 */
 export interface PromotionArticleProperty {

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

@@ -8,6 +8,7 @@ import { onMounted, ref } from 'vue';
 import { useVModel } from '@vueuse/core';
 
 import * as ArticleApi from '#/api/mall/promotion/article/index';
+
 import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 营销文章属性面板

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 拼团属性 */
 export interface PromotionCombinationProperty {

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

@@ -8,7 +8,6 @@ import { ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
-
 import * as ProductSpuApi from '#/api/mall/product/spu';
 import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
 

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 积分商城属性 */
 export interface PromotionPointProperty {

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

@@ -7,7 +7,6 @@ import { ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
-
 import * as ProductSpuApi from '#/api/mall/product/spu';
 import * as PointActivityApi from '#/api/mall/promotion/point';
 

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

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { PromotionPointProperty } from './config';
 
-import { IconifyIcon } from '@vben/icons';
 
-import { useVModel } from '@vueuse/core';
+
+

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 秒杀属性 */
 export interface PromotionSeckillProperty {

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

@@ -8,7 +8,6 @@ import { ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
-
 import * as ProductSpuApi from '#/api/mall/product/spu';
 import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
 

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

@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import type { PromotionSeckillProperty } from './config';
 
-import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
 
-import { onMounted, ref } from 'vue';
 
-import { CommonStatusEnum } from '@vben/constants';
-import { IconifyIcon } from '@vben/icons';
 
-import { useVModel } from '@vueuse/core';
+
+
+

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 搜索框属性 */
 export interface SearchProperty {

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

@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import type { SearchProperty } from './config';
 
-import { watch } from 'vue';
 
-import { IconifyIcon } from '@vben/icons';
-import { isString } from '@vben/utils';
 
-import { useVModel } from '@vueuse/core';
+
+

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

@@ -3,8 +3,6 @@ import type { TabBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
-
-
 /** 页面底部导航栏 */
 defineOptions({ name: 'TabBar' });
 

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

@@ -35,7 +35,7 @@ const handleThemeChange = () => {
 <template>
   <div class="tab-bar">
     <!-- 表单 -->
-    <Form :model="formData" labelCol="{ span: 6 }" wrapperCol="{ span: 18 }">
+    <Form :model="formData" label-col="{ span: 6 }" wrapper-col="{ span: 18 }">
       <FormItem label="主题" name="theme">
         <Select v-model:value="formData!.theme" @change="handleThemeChange">
           <SelectOption
@@ -78,8 +78,8 @@ const handleThemeChange = () => {
         </UploadImg>
       </FormItem>
 
-      <div class="text-base mb-2">图标设置</div>
+      <div class="mb-2 text-base">图标设置</div>
-      <div class="text-xs text-gray-500 mb-2">
+      <div class="mb-2 text-xs text-gray-500">
         拖动左上角的小圆点可对其排序, 图标建议尺寸 44*44
       </div>
       <Draggable v-model="formData.items" :limit="5">
@@ -106,10 +106,22 @@ const handleThemeChange = () => {
               <div class="text-xs">已选中</div>
             </div>
           </div>
-          <FormItem name="text" label="文字" labelCol="{ span: 4 }" wrapperCol="{ span: 20 }" class="mb-2">
+          <FormItem
+            name="text"
+            label="文字"
+            label-col="{ span: 4 }"
+            wrapper-col="{ span: 20 }"
+            class="mb-2"
+          >
             <Input v-model:value="element.text" placeholder="请输入文字" />
           </FormItem>
-          <FormItem name="url" label="链接" labelCol="{ span: 4 }" wrapperCol="{ span: 20 }" class="mb-0">
+          <FormItem
+            name="url"
+            label="链接"
+            label-col="{ span: 4 }"
+            wrapper-col="{ span: 20 }"
+            class="mb-0"
+          >
             <AppLinkInput v-model="element.url" />
           </FormItem>
         </template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 标题栏属性 */
 export interface TitleBarProperty {

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

@@ -3,7 +3,6 @@ import type { TitleBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 标题栏 */
 defineOptions({ name: 'TitleBar' });
 

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { TitleBarProperty } from './config';
 
-import { IconifyIcon } from '@vben/icons';
 
-import { useVModel } from '@vueuse/core';
+
+

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

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 用户卡片属性 */
 export interface UserCardProperty {

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

@@ -3,7 +3,6 @@ import type { UserCardProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 用户卡片 */
 defineOptions({ name: 'UserCard' });
 // 定义属性

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 用户卡券属性 */
 export interface UserCouponProperty {

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { UserCouponProperty } from './config';
 
-
 /** 用户卡券 */
 defineOptions({ name: 'UserCoupon' });
 // 定义属性

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

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 用户订单属性 */
 export interface UserOrderProperty {

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { UserOrderProperty } from './config';
 
-
 /** 用户订单 */
 defineOptions({ name: 'UserOrder' });
 // 定义属性

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 用户资产属性 */
 export interface UserWalletProperty {

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { UserWalletProperty } from './config';
 
-
 /** 用户资产 */
 defineOptions({ name: 'UserWallet' });
 // 定义属性

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts

@@ -1,7 +1,4 @@
-import type {
+import type { ComponentStyle, DiyComponent } from '../../../util';
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
 
 /** 视频播放属性 */
 export interface VideoPlayerProperty {

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VideoPlayerProperty } from './config';
 
-
 /** 视频播放 */
 defineOptions({ name: 'VideoPlayer' });
 
@@ -9,11 +8,7 @@ defineProps<{ property: VideoPlayerProperty }>();
 </script>
 <template>
   <div class="w-full" :style="{ height: `${property.style.height}px` }">
-    <Image
+    <Image class="w-full" :src="property.posterUrl" v-if="property.posterUrl" />
-      class="w-full"
-      :src="property.posterUrl"
-      v-if="property.posterUrl"
-    />
     <video
       v-else
       class="w-full"

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

@@ -3,10 +3,11 @@ import type { VideoPlayerProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 视频播放属性面板
 defineOptions({ name: 'VideoPlayerProperty' });
 
@@ -19,14 +20,10 @@ const formData = useVModel(props, 'modelValue', emit);
   <ComponentContainerProperty v-model="formData.style">
     <template #style>
       <FormItem label="高度" name="height">
-        <Slider
+        <Slider v-model:value="formData.style.height" :max="500" :min="100" />
-          v-model:value="formData.style.height"
-          :max="500"
-          :min="100"
-        />
       </FormItem>
     </template>
-    <Form :model="formData" labelCol="{ span: 6 }" wrapperCol="{ span: 18 }">
+    <Form :model="formData" label-col="{ span: 6 }" wrapper-col="{ span: 18 }">
       <FormItem label="上传视频" name="videoUrl">
         <UploadFile
           v-model="formData.videoUrl"

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

@@ -11,15 +11,12 @@ import { useQRCode } from '@vueuse/integrations/useQRCode';
 import draggable from 'vuedraggable';
 
 import statusBarImg from '#/assets/imgs/diy/statusBar.png';
-import {
-  componentConfigs,
-  components,
-} from './components/mobile';
-import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
 
 import ComponentContainer from './components/component-container.vue';
 import ComponentLibrary from './components/component-library.vue';
+import { componentConfigs, components } from './components/mobile';
 import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/navigation-bar/config';
+import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
 import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
 /** 页面装修详情页 */
 defineOptions({
@@ -290,7 +287,7 @@ onMounted(() => {
 </script>
 <template>
   <div>
-    <div class="editor flex flex-col h-full">
+    <div class="editor flex h-full flex-col">
       <!-- 顶部：工具栏 -->
       <div class="editor-header flex items-center">
         <!-- 左侧操作区 -->
@@ -360,11 +357,11 @@ onMounted(() => {
           </div>
           <!-- 手机页面编辑区域 -->
           <div
-            class="editor-design-center page-prop-area overflow-y-auto phone-container"
+            class="editor-design-center page-prop-area phone-container overflow-y-auto"
             :style="{
               backgroundColor: pageConfigComponent.property.backgroundColor,
               backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
-              height: 'calc(100vh - 135px - 120px)'
+              height: 'calc(100vh - 135px - 120px)',
             }"
           >
             <draggable
@@ -440,13 +437,10 @@ onMounted(() => {
           </div>
         </div>
         <!-- 右侧：属性面板（ComponentContainerProperty） -->
-        <div
+        <div v-if="selectedComponent?.property" class="editor-right w-[350px]">
-          v-if="selectedComponent?.property"
-          class="editor-right w-[350px]"
-        >
           <Card
             class="h-full"
-            :bodyStyle="{ height: 'calc(100% - 57px)', padding: 0 }"
+            :body-style="{ height: 'calc(100% - 57px)', padding: 0 }"
           >
             <!-- 组件名称 -->
             <template #title>
@@ -455,9 +449,7 @@ onMounted(() => {
                 <span>{{ selectedComponent?.name }}</span>
               </div>
             </template>
-            <div
+            <div class="property h-full overflow-y-auto p-4">
-              class="h-full overflow-y-auto p-4 property"
-            >
               <component
                 :is="`${selectedComponent?.id}Property`"
                 :key="selectedComponent?.uid || selectedComponent?.id"

apps/web-antd/src/views/mall/promotion/components/draggable/index.vue

@@ -46,7 +46,7 @@ const handleDelete = function (index: number) {
 </script>
 
 <template>
-  <div class="text-xs text-gray-500"> 拖动左上角的小圆点可对其排序 </div>
+  <div class="text-xs text-gray-500">拖动左上角的小圆点可对其排序</div>
   <VueDraggable
     :list="formData"
     :force-fallback="true"