Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into warmflow

packages/effects/layouts/src/basic/tabbar/tabbar.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
 import { useContentMaximize, useTabs } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import { useTabbarStore } from '@vben/stores';
+
 import { TabsToolMore, TabsToolScreen, TabsView } from '@vben-core/tabs-ui';
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
 
 import { useTabbar } from './use-tabbar';
 
@@ -55,6 +57,7 @@ if (!preferences.tabbar.persist) {
     :style-type="preferences.tabbar.styleType"
     :tabs="currentTabs"
     :wheelable="preferences.tabbar.wheelable"
+    :middle-click-to-close="preferences.tabbar.middleClickToClose"
     @close="handleClose"
     @sort-tabs="tabbarStore.sortTabs"
     @unpin="unpinTab"

packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue

@@ -22,6 +22,9 @@ const tabbarWheelable = defineModel<boolean>('tabbarWheelable');
 const tabbarStyleType = defineModel<string>('tabbarStyleType');
 const tabbarShowMore = defineModel<boolean>('tabbarShowMore');
 const tabbarShowMaximize = defineModel<boolean>('tabbarShowMaximize');
+const tabbarMiddleClickToClose = defineModel<boolean>(
+  'tabbarMiddleClickToClose',
+);
 
 const styleItems = computed((): SelectOption[] => [
   {
@@ -61,6 +64,9 @@ const styleItems = computed((): SelectOption[] => [
   >
     {{ $t('preferences.tabbar.wheelable') }}
   </SwitchItem>
+  <SwitchItem v-model="tabbarMiddleClickToClose" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.middleClickClose') }}
+  </SwitchItem>
   <SwitchItem v-model="tabbarShowIcon" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.icon') }}
   </SwitchItem>

packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue

@@ -11,8 +11,11 @@ import type {
   PreferencesButtonPositionType,
   ThemeModeType,
 } from '@vben/types';
+
 import type { SegmentedItem } from '@vben-core/shadcn-ui';
 
+import { computed, ref } from 'vue';
+
 import { Copy, RotateCw } from '@vben/icons';
 import { $t, loadLocaleMessages } from '@vben/locales';
 import {
@@ -21,6 +24,7 @@ import {
   resetPreferences,
   usePreferences,
 } from '@vben/preferences';
+
 import { useVbenDrawer } from '@vben-core/popup-ui';
 import {
   VbenButton,
@@ -28,8 +32,8 @@ import {
   VbenSegmented,
 } from '@vben-core/shadcn-ui';
 import { globalShareState } from '@vben-core/shared/global-state';
+
 import { useClipboard } from '@vueuse/core';
-import { computed, ref } from 'vue';
 
 import {
   Animation,
@@ -112,6 +116,9 @@ const tabbarPersist = defineModel<boolean>('tabbarPersist');
 const tabbarDraggable = defineModel<boolean>('tabbarDraggable');
 const tabbarWheelable = defineModel<boolean>('tabbarWheelable');
 const tabbarStyleType = defineModel<string>('tabbarStyleType');
+const tabbarMiddleClickToClose = defineModel<boolean>(
+  'tabbarMiddleClickToClose',
+);
 
 const navigationStyleType = defineModel<NavigationStyleType>(
   'navigationStyleType',
@@ -358,6 +365,7 @@ async function handleReset() {
                 v-model:tabbar-show-more="tabbarShowMore"
                 v-model:tabbar-style-type="tabbarStyleType"
                 v-model:tabbar-wheelable="tabbarWheelable"
+                v-model:tabbar-middle-click-to-close="tabbarMiddleClickToClose"
               />
             </Block>
             <Block :title="$t('preferences.widget.title')">