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

src/components/custom/BetterScroll/index.vue

@@ -41,5 +41,7 @@ watch([() => width.value, () => height.value], () => {
 onMounted(() => {
   initBetterScroll();
 });
+
+defineExpose({ bsInstance });
 </script>
 <style scoped></style>

src/components/custom/ChromeTab/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="relative flex-y-center h-34px px-24px cursor-pointer -mr-18px"
+    class="relative flex-y-center h-34px px-24px cursor-pointer"
-    :class="{ 'z-10': isActive, 'z-9': isHover }"
+    :class="{ '-mr-18px': !isLast, 'z-10': isActive, 'z-9': isHover }"
     @mouseenter="setTrue"
     @mouseleave="setFalse"
   >
@@ -39,14 +39,18 @@ interface Props {
   closable?: boolean;
   /** 暗黑模式 */
   darkMode?: boolean;
+  /** 是否是最后一个 */
+  isLast: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   isActive: false,
   primaryColor: '#409EFF',
   closable: true,
-  darkMode: false
+  darkMode: false,
+  isLast: false
 });
+
 const emit = defineEmits<{
   /** 点击关闭图标 */
   (e: 'close'): void;

src/interface/common/expose.ts

@@ -0,0 +1,7 @@
+import type { Ref } from 'vue';
+import BScroll from '@better-scroll/core';
+
+/** BetterScroll暴露出的数据的类型 */
+export interface ExposeBetterScroll {
+  bsInstance: Ref<BScroll>;
+}

src/interface/common/index.ts

@@ -1,5 +1,6 @@
 export * from './theme';
 export * from './system';
 export * from './route';
+export * from './expose';
 export * from './service';
 export * from './api';

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">
+    <div ref="bsWrapperRef" class="flex-1-hidden h-full">
-      <better-scroll :options="{ scrollX: true, scrollY: false, click: isMobile }">
+      <better-scroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: isMobile }">
-        <multi-tab />
+        <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();
 }