feat：【mall】diy editor 的 tab-bar 优化

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

@@ -2,41 +2,29 @@ import type { DiyComponent } from '../../../util';
 
 /** 底部导航菜单属性 */
 export interface TabBarProperty {
-  // 选项列表
+  items: TabBarItemProperty[]; // 选项列表
-  items: TabBarItemProperty[];
+  theme: string; // 主题
-  // 主题
+  style: TabBarStyle; // 样式
-  theme: string;
-  // 样式
-  style: TabBarStyle;
 }
 
-// 选项属性
+/** 选项属性 */
 export interface TabBarItemProperty {
-  // 标签文字
+  text: string; // 标签文字
-  text: string;
+  url: string; // 链接
-  // 链接
+  iconUrl: string; // 默认图标链接
-  url: string;
+  activeIconUrl: string; // 选中的图标链接
-  // 默认图标链接
-  iconUrl: string;
-  // 选中的图标链接
-  activeIconUrl: string;
 }
 
-// 样式
+/** 样式 */
 export interface TabBarStyle {
-  // 背景类型
+  bgType: 'color' | 'img'; // 背景类型
-  bgType: 'color' | 'img';
+  bgColor: string; // 背景颜色
-  // 背景颜色
+  bgImg: string; // 图片链接
-  bgColor: string;
+  color: string; // 默认颜色
-  // 图片链接
+  activeColor: string; // 选中的颜色
-  bgImg: string;
-  // 默认颜色
-  color: string;
-  // 选中的颜色
-  activeColor: string;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'TabBar',
   name: '底部导航',

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

@@ -5,7 +5,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElImage } from 'element-plus';
 
-/** 页面底部导航栏 */
+/** 底部导航 */
 defineOptions({ name: 'TabBar' });
 
 defineProps<{ property: TabBarProperty }>();

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

@@ -3,6 +3,7 @@ import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
+import { ElButton, ElText, ElTooltip } from 'element-plus';
 import VueDraggable from 'vuedraggable';
 
 /** 拖拽组件封装 */

apps/web-ele/src/views/mall/promotion/components/vertical-button-group/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ElButtonGroup } from 'element-plus';
+
 /**
  * 垂直按钮组
  * Element 官方的按钮组只支持水平显示，通过重写样式实现垂直布局
@@ -7,9 +9,9 @@ defineOptions({ name: 'VerticalButtonGroup' });
 </script>
 
 <template>
-  <el-button-group v-bind="$attrs">
+  <ElButtonGroup v-bind="$attrs">
     <slot></slot>
-  </el-button-group>
+  </ElButtonGroup>
 </template>
 
 <style scoped lang="scss">