From 149caebaac8018e9cab9ab7d6c547c0b786244d0 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 1 Nov 2025 21:24:50 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90mall=E3=80=91diy=20editor?=
 =?UTF-8?q?=20=E7=9A=84=20tab-bar=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/tab-bar/config.ts       | 42 +++++++------------
 .../components/mobile/tab-bar/index.vue       |  2 +-
 .../promotion/components/draggable/index.vue  |  1 +
 .../vertical-button-group/index.vue           |  6 ++-
 4 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
index 0404f3647..efdb4da21 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
+++ b/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[];
-  // 主题
-  theme: string;
-  // 样式
-  style: TabBarStyle;
+  items: TabBarItemProperty[]; // 选项列表
+  theme: string; // 主题
+  style: TabBarStyle; // 样式
 }
 
-// 选项属性
+/** 选项属性 */
 export interface TabBarItemProperty {
-  // 标签文字
-  text: string;
-  // 链接
-  url: string;
-  // 默认图标链接
-  iconUrl: string;
-  // 选中的图标链接
-  activeIconUrl: string;
+  text: string; // 标签文字
+  url: string; // 链接
+  iconUrl: string; // 默认图标链接
+  activeIconUrl: string; // 选中的图标链接
 }
 
-// 样式
+/** 样式 */
 export interface TabBarStyle {
-  // 背景类型
-  bgType: 'color' | 'img';
-  // 背景颜色
-  bgColor: string;
-  // 图片链接
-  bgImg: string;
-  // 默认颜色
-  color: string;
-  // 选中的颜色
-  activeColor: string;
+  bgType: 'color' | 'img'; // 背景类型
+  bgColor: string; // 背景颜色
+  bgImg: string; // 图片链接
+  color: string; // 默认颜色
+  activeColor: string; // 选中的颜色
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'TabBar',
   name: '底部导航',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
index 9c1ddd834..aa7484d63 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
+++ b/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 }>();
diff --git a/apps/web-ele/src/views/mall/promotion/components/draggable/index.vue b/apps/web-ele/src/views/mall/promotion/components/draggable/index.vue
index d2901f395..079cf2c7e 100644
--- a/apps/web-ele/src/views/mall/promotion/components/draggable/index.vue
+++ b/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';
 
 /** 拖拽组件封装 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/vertical-button-group/index.vue b/apps/web-ele/src/views/mall/promotion/components/vertical-button-group/index.vue
index 2c076afa5..d900eab41 100644
--- a/apps/web-ele/src/views/mall/promotion/components/vertical-button-group/index.vue
+++ b/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">