feat: allow close tab when mouse middle button click (#5347)

* 偏好设置增加鼠标中键关闭标签页的设置

packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap

@@ -80,6 +80,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "enable": true,
     "height": 38,
     "keepAlive": true,
+    "middleClickToClose": false,
     "persist": true,
     "showIcon": true,
     "showMaximize": true,

packages/@core/preferences/src/config.ts

@@ -80,6 +80,7 @@ const defaultPreferences: Preferences = {
     enable: true,
     height: 38,
     keepAlive: true,
+    middleClickToClose: false,
     persist: true,
     showIcon: true,
     showMaximize: true,

packages/@core/preferences/src/types.ts

@@ -168,6 +168,8 @@ interface TabbarPreferences {
   height: number;
   /** 开启标签页缓存功能 */
   keepAlive: boolean;
+  /** 是否点击中键时关闭标签 */
+  middleClickToClose: boolean;
   /** 是否持久化标签 */
   persist: boolean;
   /** 是否开启多标签页图标 */

packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -56,6 +56,20 @@ const tabsView = computed(() => {
     } as TabConfig;
   });
 });
+
+function onMouseDown(e: MouseEvent, tab: TabConfig) {
+  if (
+    e.button === 1 &&
+    tab.closable &&
+    !tab.affixTab &&
+    tabsView.value.length > 1 &&
+    props.middleClickToClose
+  ) {
+    e.preventDefault();
+    e.stopPropagation();
+    emit('close', tab.key);
+  }
+}
 </script>
 
 <template>
@@ -82,6 +96,7 @@ const tabsView = computed(() => {
         class="tabs-chrome__item draggable translate-all group relative -mr-3 flex h-full select-none items-center"
         data-tab-item="true"
         @click="active = tab.key"
+        @mousedown="onMouseDown($event, tab)"
       >
         <VbenContextMenu
           :handler-data="tab"

packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue

@@ -62,6 +62,20 @@ const tabsView = computed(() => {
     } as TabConfig;
   });
 });
+
+function onMouseDown(e: MouseEvent, tab: TabConfig) {
+  if (
+    e.button === 1 &&
+    tab.closable &&
+    !tab.affixTab &&
+    tabsView.value.length > 1 &&
+    props.middleClickToClose
+  ) {
+    e.preventDefault();
+    e.stopPropagation();
+    emit('close', tab.key);
+  }
+}
 </script>
 
 <template>
@@ -85,6 +99,7 @@ const tabsView = computed(() => {
         class="tab-item [&:not(.is-active)]:hover:bg-accent translate-all group relative flex cursor-pointer select-none"
         data-tab-item="true"
         @click="active = tab.key"
+        @mousedown="onMouseDown($event, tab)"
       >
         <VbenContextMenu
           :handler-data="tab"

packages/@core/ui-kit/tabs-ui/src/types.ts

@@ -33,6 +33,11 @@ export interface TabsProps {
    * 仅限 tabs-chrome
    */
   maxWidth?: number;
+  /**
+   * @zh_CN 点击中键时关闭Tab
+   */
+  middleClickToClose?: boolean;
+
   /**
    * @zh_CN tab最小宽度
    * 仅限 tabs-chrome
@@ -43,11 +48,11 @@ export interface TabsProps {
    * @zh_CN 是否显示图标
    */
   showIcon?: boolean;
-
   /**
    * @zh_CN 标签页风格
    */
   styleType?: TabsStyleType;
+
   /**
    * @zh_CN 选项卡数据
    */

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

@@ -57,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

@@ -116,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',
@@ -362,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')">

packages/locales/src/langs/en-US/preferences.json

@@ -19,6 +19,8 @@
   "twoColumnTip": "Vertical Two Column Menu Mode",
   "headerSidebarNav": "Header Vertical",
   "headerSidebarNavTip": "Header Full Width, Sidebar Navigation Mode",
+  "headerTwoColumn": "Header Two Column",
+  "headerTwoColumnTip": "Header Navigation & Sidebar Two Column co-exists",
   "mixedMenu": "Mixed Menu",
   "mixedMenuTip": "Vertical & Horizontal Menu Co-exists",
   "fullContent": "Full Content",
@@ -62,6 +64,7 @@
     "persist": "Persist Tabs",
     "draggable": "Enable Draggable Sort",
     "wheelable": "Support Mouse Wheel",
+    "middleClickClose": "Close Tab when Mouse Middle Button Click",
     "wheelableTip": "When enabled, the Tabbar area responds to vertical scrolling events of the scroll wheel.",
     "styleType": {
       "title": "Tabs Style",

packages/locales/src/langs/zh-CN/preferences.json

@@ -64,6 +64,7 @@
     "persist": "持久化标签页",
     "draggable": "启动拖拽排序",
     "wheelable": "启用纵向滚轮响应",
+    "middleClickClose": "点击鼠标中键关闭标签页",
     "wheelableTip": "开启后，标签栏区域可以响应滚轮的纵向滚动事件。\n关闭时，只能响应系统的横向滚动事件（需要按下Shift再滚动滚轮）",
     "styleType": {
       "title": "标签页风格",