feat：【antd】【mall】diy-editor 修复 element-plus 组件之路：部分解决 20%

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

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../util';
+import type { ComponentStyle, DiyComponent } from '../util';
 
 import { computed } from 'vue';
 
@@ -10,9 +7,10 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElButton, ElTooltip } from 'element-plus';
 
-import { components } from './mobile';
 import { VerticalButtonGroup } from '#/views/mall/promotion/components';
 
+import { components } from './mobile';
+
 /**
  * 组件容器：目前在中间部分
  * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式

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

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
-  DiyComponent,
-  DiyComponentLibrary,
-} from '../util';
+import type { DiyComponent, DiyComponentLibrary } from '../util';
 
 import { reactive, watch } from 'vue';
 

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

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

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

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

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

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

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

@@ -24,9 +24,10 @@ import {
 } from 'element-plus';
 
 import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
 // TODO: 添加组件
 // import CouponSelect from '#/views/mall/promotion/coupon/components/coupon-select.vue';
 

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -6,13 +6,14 @@ import { ref } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElSlider, ElText } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
   MagicCubeEditor,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 /** 广告魔方属性面板 */
 defineOptions({ name: 'MagicCubeProperty' });
 

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

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

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

@@ -11,10 +11,10 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
 
 /** 宫格导航属性面板 */

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

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

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

@@ -4,7 +4,6 @@ import type { MenuListProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElText } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
@@ -12,6 +11,7 @@ import {
   InputWithColor,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
 
 /** 列表导航属性面板 */

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

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

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

@@ -13,7 +13,6 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
@@ -22,6 +21,7 @@ import {
   InputWithColor,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
 
 /** 菜单导航属性面板 */

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

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

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

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

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

@@ -4,7 +4,6 @@ import type { NoticeBarProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
@@ -12,6 +11,8 @@ import {
   Draggable,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 通知栏属性面板
 defineOptions({ name: 'NoticeBarProperty' });
 const props = defineProps<{ modelValue: NoticeBarProperty }>();

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

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

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

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

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

@@ -15,9 +15,10 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
 // TODO: 添加组件
 // import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 

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

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

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

@@ -9,6 +9,7 @@ import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElOption, ElSelect } from 'element-plus';
 
 import * as ArticleApi from '#/api/mall/promotion/article/index';
+
 import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 营销文章属性面板

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

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

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

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

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

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

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

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

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

@@ -18,9 +18,10 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import { Draggable } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 /** 搜索框属性面板 */
 defineOptions({ name: 'SearchProperty' });
 

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

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

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

@@ -16,13 +16,14 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
   InputWithColor,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 导航栏属性面板
 defineOptions({ name: 'TitleBarProperty' });
 

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

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

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

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

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

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

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

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

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

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

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

@@ -4,10 +4,11 @@ import type { VideoPlayerProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElSlider, ElSwitch } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 视频播放属性面板
 defineOptions({ name: 'VideoPlayerProperty' });
 

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

@@ -10,7 +10,6 @@ import { cloneDeep, isEmpty, isString } from '@vben/utils';
 import { useQRCode } from '@vueuse/integrations/useQRCode';
 import {
   ElAside,
-  ElButtonGroup,
   ElCard,
   ElContainer,
   ElDialog,
@@ -20,18 +19,14 @@ import {
   ElText,
   ElTooltip,
 } from 'element-plus';
-import draggable from 'vuedraggable';
 
 import statusBarImg from '#/assets/imgs/diy/statusBar.png';
-import {
-  componentConfigs,
-  components,
-} from './components/mobile';
-import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
 
 import ComponentContainer from './components/component-container.vue';
 import ComponentLibrary from './components/component-library.vue';
+import { componentConfigs, components } from './components/mobile';
 import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/navigation-bar/config';
+import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
 import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
 /** 页面装修详情页 */
 defineOptions({
@@ -312,35 +307,40 @@ onMounted(() => {
           <span>{{ title }}</span>
         </div>
         <!-- 右侧操作区 -->
-        <ElButtonGroup class="header-right">
-          <ElTooltip content="重置">
+        <div class="header-right">
+          <ElTooltip title="重置">
             <ElButton @click="handleReset">
               <IconifyIcon :size="24" icon="system-uicons:reset-alt" />
             </ElButton>
           </ElTooltip>
-          <ElTooltip v-if="previewUrl" content="预览">
+          <ElTooltip v-if="previewUrl" title="预览">
             <ElButton @click="handlePreview">
               <IconifyIcon :size="24" icon="ep:view" />
             </ElButton>
           </ElTooltip>
-          <ElTooltip content="保存">
+          <ElTooltip title="保存">
             <ElButton @click="handleSave">
               <IconifyIcon :size="24" icon="ep:check" />
             </ElButton>
           </ElTooltip>
-        </ElButtonGroup>
+        </div>
       </ElHeader>
 
       <!-- 中心区域 -->
       <ElContainer class="editor-container">
         <!-- 左侧：组件库（ComponentLibrary） -->
-        <ComponentLibrary
-          v-if="libs && libs.length > 0"
-          ref="componentLibrary"
-          :list="libs"
-        />
+        <ElAside width="200px" class="editor-left">
+          <ComponentLibrary
+            v-if="libs && libs.length > 0"
+            ref="componentLibrary"
+            :list="libs"
+          />
+        </ElAside>
         <!-- 中心：设计区域（ComponentContainer） -->
-        <div class="editor-center page-prop-area" @click="handlePageSelected">
+        <ElContainer
+          class="editor-center page-prop-area"
+          @click="handlePageSelected"
+        >
           <!-- 手机顶部 -->
           <div class="editor-design-top">
             <!-- 手机顶部状态栏 -->
@@ -371,15 +371,7 @@ onMounted(() => {
             />
           </div>
           <!-- 手机页面编辑区域 -->
-          <ElScrollbar
-            :view-style="{
-              backgroundColor: pageConfigComponent.property.backgroundColor,
-              backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
-            }"
-            view-class="phone-container"
-            wrap-class="editor-design-center page-prop-area"
-            style="height: calc(100vh - 135px - 120px)"
-          >
+          <ElScrollbar class="phone-container">
             <draggable
               v-model="pageComponents"
               :animation="200"
@@ -424,42 +416,36 @@ onMounted(() => {
           <div class="fixed-component-action-group gap-2">
             <ElTag
               v-if="showPageConfig"
-              :effect="
+              :color="
                 selectedComponent?.uid === pageConfigComponent.uid
-                  ? 'dark'
-                  : 'plain'
-              "
-              :type="
-                selectedComponent?.uid === pageConfigComponent.uid
-                  ? 'primary'
-                  : 'info'
+                  ? 'blue'
+                  : 'default'
               "
+              :bordered="false"
               size="large"
               @click="handleComponentSelected(pageConfigComponent)"
             >
               <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
-              <span>{{ pageConfigComponent.name }}</span>
+              <ElText>{{ pageConfigComponent.name }}</ElText>
             </ElTag>
             <template v-for="(component, index) in pageComponents" :key="index">
               <ElTag
                 v-if="component.position === 'fixed'"
-                :effect="
-                  selectedComponent?.uid === component.uid ? 'dark' : 'plain'
-                "
-                :type="
-                  selectedComponent?.uid === component.uid ? 'primary' : 'info'
+                :color="
+                  selectedComponent?.uid === component.uid ? 'blue' : 'default'
                 "
+                :bordered="false"
                 closable
                 size="large"
                 @click="handleComponentSelected(component)"
                 @close="handleDeleteComponent(index)"
               >
                 <IconifyIcon :icon="component.icon" :size="12" />
-                <span>{{ component.name }}</span>
+                <ElText>{{ component.name }}</ElText>
               </ElTag>
             </template>
           </div>
-        </div>
+        </ElContainer>
         <!-- 右侧：属性面板（ComponentContainerProperty） -->
         <ElAside
           v-if="selectedComponent?.property"
@@ -469,13 +455,13 @@ onMounted(() => {
           <ElCard
             body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
             class="h-full"
-            shadow="never"
+            :bordered="false"
           >
             <!-- 组件名称 -->
             <template #header>
               <div class="flex items-center gap-2">
                 <IconifyIcon :icon="selectedComponent?.icon" color="gray" />
-                <span>{{ selectedComponent?.name }}</span>
+                <ElText>{{ selectedComponent?.name }}</ElText>
               </div>
             </template>
             <ElScrollbar
@@ -494,7 +480,7 @@ onMounted(() => {
     </ElContainer>
 
     <!-- 预览弹框 -->
-    <ElDialog v-model="previewDialogVisible" title="预览" width="700">
+    <ElDialog v-model:open="previewDialogVisible" title="预览" width="700">
       <div class="flex justify-around">
         <IFrame
           :src="previewUrl"