feat(components): 添加多页签Tab点击后自动往中间滚动

src/layouts/common/GlobalTab/components/MultiTab/index.vue

@@ -1,13 +1,14 @@
 <template>
   <div v-if="theme.multiTabStyle.mode === 'chrome'" class="flex items-end h-full">
     <chrome-tab
-      v-for="item in app.multiTab.routes"
+      v-for="(item, index) in app.multiTab.routes"
       :key="item.path"
       :is-active="app.multiTab.activeRoute === item.fullPath"
       :primary-color="theme.themeColor"
       :closable="item.name !== ROUTE_HOME.name"
       :dark-mode="theme.darkMode"
-      @click="handleClickTab(item.fullPath)"
+      :is-last="index === app.multiTab.routes.length - 1"
+      @click="handleClickChromeTab($event, item.fullPath)"
       @close="removeMultiTab(item.fullPath)"
       @contextmenu="handleContextMenu($event, item.fullPath)"
     >
@@ -48,6 +49,12 @@ import { useBoolean } from '@/hooks';
 import { setTabRouteStorage } from '@/utils';
 import { ContextMenu } from './components';
 
+interface Emits {
+  (e: 'scroll', clientX: number): void;
+}
+
+const emit = defineEmits<Emits>();
+
 const theme = useThemeStore();
 const app = useAppStore();
 const { removeMultiTab, handleClickTab } = useAppStore();
@@ -62,6 +69,11 @@ function setDropdownConfig(x: number, y: number, currentPath: string) {
   Object.assign(dropdownConfig, { x, y, currentPath });
 }
 
+function handleClickChromeTab(e: MouseEvent, fullPath: string) {
+  emit('scroll', e.clientX);
+  handleClickTab(fullPath);
+}
+
 function handleContextMenu(e: MouseEvent, fullPath: string) {
   e.preventDefault();
   const { clientX, clientY } = e;

src/layouts/common/GlobalTab/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="multi-tab flex-center w-full pl-16px" :style="{ height: multiTabHeight }">
-    <div class="flex-1-hidden h-full">
-      <better-scroll :options="{ scrollX: true, scrollY: false, click: isMobile }">
-        <multi-tab />
+    <div ref="bsWrapperRef" class="flex-1-hidden h-full">
+      <better-scroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: isMobile }">
+        <multi-tab @scroll="handleScroll" />
       </better-scroll>
     </div>
     <reload-button />
@@ -10,10 +10,13 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
 import { useRoute } from 'vue-router';
+import { useElementBounding } from '@vueuse/core';
 import { useAppStore } from '@/store';
 import { useLayoutConfig, routeFullPathWatcher, useIsMobile } from '@/composables';
 import { BetterScroll } from '@/components';
+import type { ExposeBetterScroll } from '@/interface';
 import { MultiTab, ReloadButton } from './components';
 
 const route = useRoute();
@@ -21,6 +24,17 @@ const { initMultiTab, addMultiTab, setActiveMultiTab } = useAppStore();
 const { multiTabHeight } = useLayoutConfig();
 const isMobile = useIsMobile();
 
+const bsWrapperRef = ref<HTMLElement | null>(null);
+const { width: bsWrapperWidth, left: bsWrapperLeft } = useElementBounding(bsWrapperRef);
+
+const bsScroll = ref<ExposeBetterScroll | null>(null);
+
+function handleScroll(clientX: number) {
+  const currentX = clientX - bsWrapperLeft.value;
+  const deltaX = currentX - bsWrapperWidth.value / 2;
+  bsWrapperRef.value?.scrollBy({ left: deltaX, behavior: 'smooth' });
+}
+
 function init() {
   initMultiTab();
 }