From 8ce627a397ee2605d967e7f9c8aa558b99fca22d Mon Sep 17 00:00:00 2001
From: Soybean <honghuangdc@gmail.com>
Date: Thu, 25 Nov 2021 00:50:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=B7=BB=E5=8A=A0=E5=A4=9A?=
 =?UTF-8?q?=E9=A1=B5=E7=AD=BETab=E7=82=B9=E5=87=BB=E5=90=8E=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E5=BE=80=E4=B8=AD=E9=97=B4=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/custom/BetterScroll/index.vue  |  2 ++
 src/components/custom/ChromeTab/index.vue     | 10 +++++++---
 src/interface/common/expose.ts                |  7 +++++++
 src/interface/common/index.ts                 |  1 +
 .../GlobalTab/components/MultiTab/index.vue   | 16 +++++++++++++--
 src/layouts/common/GlobalTab/index.vue        | 20 ++++++++++++++++---
 6 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 src/interface/common/expose.ts

diff --git a/src/components/custom/BetterScroll/index.vue b/src/components/custom/BetterScroll/index.vue
index cf306e58..db2ebab1 100644
--- a/src/components/custom/BetterScroll/index.vue
+++ b/src/components/custom/BetterScroll/index.vue
@@ -41,5 +41,7 @@ watch([() => width.value, () => height.value], () => {
 onMounted(() => {
   initBetterScroll();
 });
+
+defineExpose({ bsInstance });
 </script>
 <style scoped></style>
diff --git a/src/components/custom/ChromeTab/index.vue b/src/components/custom/ChromeTab/index.vue
index f377aeef..4edebb7b 100644
--- a/src/components/custom/ChromeTab/index.vue
+++ b/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="{ 'z-10': isActive, 'z-9': isHover }"
+    class="relative flex-y-center h-34px px-24px cursor-pointer"
+    :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;
diff --git a/src/interface/common/expose.ts b/src/interface/common/expose.ts
new file mode 100644
index 00000000..4c9bce76
--- /dev/null
+++ b/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>;
+}
diff --git a/src/interface/common/index.ts b/src/interface/common/index.ts
index 6edd438d..6c6a05af 100644
--- a/src/interface/common/index.ts
+++ b/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';
diff --git a/src/layouts/common/GlobalTab/components/MultiTab/index.vue b/src/layouts/common/GlobalTab/components/MultiTab/index.vue
index 33f5ebfb..7c940b72 100644
--- a/src/layouts/common/GlobalTab/components/MultiTab/index.vue
+++ b/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;
diff --git a/src/layouts/common/GlobalTab/index.vue b/src/layouts/common/GlobalTab/index.vue
index 7fafaf2e..7e9b9543 100644
--- a/src/layouts/common/GlobalTab/index.vue
+++ b/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();
 }