From 20aa39f14ed0239f02118b62a6aa4706b1f9dd21 Mon Sep 17 00:00:00 2001
From: Soybean <honghuangdc@gmail.com>
Date: Thu, 25 Nov 2021 21:48:39 +0800
Subject: [PATCH] =?UTF-8?q?fix(components):=20=E4=BF=AE=E5=A4=8D=E5=A4=9A?=
 =?UTF-8?q?=E9=A1=B5=E7=AD=BETab=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/custom/BetterScroll/index.vue  |  2 +-
 .../GlobalTab/components/MultiTab/index.vue   | 33 +++++++++++++++----
 src/layouts/common/GlobalTab/index.vue        |  7 +++-
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/custom/BetterScroll/index.vue b/src/components/custom/BetterScroll/index.vue
index a53a5bef..85996049 100644
--- a/src/components/custom/BetterScroll/index.vue
+++ b/src/components/custom/BetterScroll/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="scrollbar" class="wh-full text-left">
+  <div ref="scrollbar" class="h-full text-left">
     <div ref="scrollbarContent" class="inline-block" :class="{ 'h-full': !isScrollY }">
       <slot></slot>
     </div>
diff --git a/src/layouts/common/GlobalTab/components/MultiTab/index.vue b/src/layouts/common/GlobalTab/components/MultiTab/index.vue
index 7c940b72..17121fdd 100644
--- a/src/layouts/common/GlobalTab/components/MultiTab/index.vue
+++ b/src/layouts/common/GlobalTab/components/MultiTab/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="theme.multiTabStyle.mode === 'chrome'" class="flex items-end h-full">
+  <div v-if="theme.multiTabStyle.mode === 'chrome'" ref="chromeTabRef" class="flex items-end h-full">
     <chrome-tab
       v-for="(item, index) in app.multiTab.routes"
       :key="item.path"
@@ -8,7 +8,7 @@
       :closable="item.name !== ROUTE_HOME.name"
       :dark-mode="theme.darkMode"
       :is-last="index === app.multiTab.routes.length - 1"
-      @click="handleClickChromeTab($event, item.fullPath)"
+      @click="handleClickTab(item.fullPath)"
       @close="removeMultiTab(item.fullPath)"
       @contextmenu="handleContextMenu($event, item.fullPath)"
     >
@@ -40,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, nextTick } from 'vue';
+import { ref, reactive, nextTick, watch } from 'vue';
 import { useEventListener } from '@vueuse/core';
 import { useThemeStore, useAppStore } from '@/store';
 import { ROUTE_HOME } from '@/router';
@@ -69,11 +69,22 @@ 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);
+// 获取当前激活的tab的clientX
+const chromeTabRef = ref<HTMLElement | null>(null);
+async function getActiveChromeTabClientX() {
+  await nextTick();
+  const index = app.activeMultiTabIndex;
+  if (chromeTabRef.value) {
+    const activeTabElement = chromeTabRef.value.children[index];
+    const { x, width } = activeTabElement.getBoundingClientRect();
+    const clientX = x + width;
+    setTimeout(() => {
+      emit('scroll', clientX);
+    }, 50);
+  }
 }
 
+// 右键菜单
 function handleContextMenu(e: MouseEvent, fullPath: string) {
   e.preventDefault();
   const { clientX, clientY } = e;
@@ -88,5 +99,15 @@ function handleContextMenu(e: MouseEvent, fullPath: string) {
 useEventListener(window, 'beforeunload', () => {
   setTabRouteStorage(app.multiTab.routes);
 });
+
+watch(
+  () => app.activeMultiTabIndex,
+  () => {
+    getActiveChromeTabClientX();
+  },
+  {
+    immediate: true
+  }
+);
 </script>
 <style scoped></style>
diff --git a/src/layouts/common/GlobalTab/index.vue b/src/layouts/common/GlobalTab/index.vue
index 7e9b9543..64c6a25d 100644
--- a/src/layouts/common/GlobalTab/index.vue
+++ b/src/layouts/common/GlobalTab/index.vue
@@ -32,7 +32,12 @@ 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' });
+  if (bsScroll.value) {
+    const { maxScrollX, x: leftX } = bsScroll.value.bsInstance;
+    const rightX = maxScrollX - leftX;
+    const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX);
+    bsScroll.value?.bsInstance.scrollBy(update, 0, 300);
+  }
 }
 
 function init() {