fix(projects): 修复tab过多时样式坍塌，添加tab横向滚动

package.json

@@ -18,6 +18,7 @@
     "*.{vue,js,jsx,ts,tsx}": "eslint --fix"
   },
   "dependencies": {
+    "@better-scroll/core": "^2.4.2",
     "@vueuse/core": "^6.7.4",
     "axios": "^0.24.0",
     "chroma-js": "^2.1.2",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 lockfileVersion: 5.3
 
 specifiers:
+  '@better-scroll/core': ^2.4.2
   '@commitlint/cli': ^13.2.1
   '@commitlint/config-conventional': ^13.2.0
   '@iconify/json': ^1.1.417
@@ -61,6 +62,7 @@ specifiers:
   windicss: ^3.2.0
 
 dependencies:
+  '@better-scroll/core': registry.npmmirror.com/@better-scroll/core/2.4.2
   '@vueuse/core': registry.npmmirror.com/@vueuse/core/6.7.4_vue@3.2.20
   axios: registry.npmmirror.com/axios/0.24.0
   chroma-js: registry.nlark.com/chroma-js/2.1.2
@@ -4576,6 +4578,20 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  registry.npmmirror.com/@better-scroll/core/2.4.2:
+    resolution: {integrity: sha1-5pRwAS15kjoYA0w+STFyD7sG6uU=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@better-scroll/core/download/@better-scroll/core-2.4.2.tgz}
+    name: '@better-scroll/core'
+    version: 2.4.2
+    dependencies:
+      '@better-scroll/shared-utils': registry.npmmirror.com/@better-scroll/shared-utils/2.4.2
+    dev: false
+
+  registry.npmmirror.com/@better-scroll/shared-utils/2.4.2:
+    resolution: {integrity: sha1-GsXJdJVycJOiKoAJVgeV3V48GNo=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@better-scroll/shared-utils/download/@better-scroll/shared-utils-2.4.2.tgz}
+    name: '@better-scroll/shared-utils'
+    version: 2.4.2
+    dev: false
+
   registry.npmmirror.com/@commitlint/cli/13.2.1:
     resolution: {integrity: sha1-gOvUa+72zu07sMCEK82o0Co8kd4=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@commitlint/cli/download/@commitlint/cli-13.2.1.tgz}
     name: '@commitlint/cli'

src/components/custom/BetterScroll/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div ref="scrollbar" class="w-full h-full text-left">
+    <div ref="scrollbarContent" class="inline-block" :class="{ 'h-full': !options.scrollY }">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import type { PropType } from 'vue';
+import BScroll from '@better-scroll/core';
+import type { Options } from '@better-scroll/core';
+import { useElementSize } from '@vueuse/core';
+
+const props = defineProps({
+  options: {
+    type: Object as PropType<Options>,
+    required: true
+  }
+});
+
+const scrollbar = ref<HTMLElement | null>(null);
+const bsInstance = ref<BScroll | null>(null);
+const scrollbarContent = ref<HTMLElement | null>(null);
+
+function initBetterScroll() {
+  bsInstance.value = new BScroll(scrollbar.value!, props.options);
+}
+
+// 滚动元素发生变化，刷新BS
+const { width, height } = useElementSize(scrollbarContent);
+watch([() => width.value, () => height.value], () => {
+  if (bsInstance.value) {
+    bsInstance.value.refresh();
+  }
+});
+
+onMounted(() => {
+  initBetterScroll();
+});
+</script>
+<style scoped></style>

src/components/custom/ButtonTab/index.vue

@@ -16,7 +16,7 @@
     @mouseenter="setTrue"
     @mouseleave="setFalse"
   >
-    <span>
+    <span class="whitespace-nowrap">
       <slot></slot>
     </span>
     <div v-if="closable" class="pl-10px">

src/components/custom/ChromeTab/index.vue

@@ -14,7 +14,7 @@
         :primary-color="primaryColor"
       />
     </div>
-    <span class="relative z-2">
+    <span class="relative whitespace-nowrap z-2">
       <slot></slot>
     </span>
     <div v-if="closable" class="pl-18px">

src/components/custom/index.ts

@@ -3,5 +3,6 @@ import IconClose from './IconClose/index.vue';
 import ButtonTab from './ButtonTab/index.vue';
 import ChromeTab from './ChromeTab/index.vue';
 import ShadowCard from './ShadowCard/index.vue';
+import BetterScroll from './BetterScroll/index.vue';
 
-export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard };
+export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard, BetterScroll };

src/components/index.ts

@@ -1,2 +1,2 @@
 export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg, HoverContainer } from './common';
-export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard } from './custom';
+export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard, BetterScroll } from './custom';

src/layouts/BasicLayout/components/GlobalTab/index.vue

@@ -8,7 +8,11 @@
     justify="space-between"
     :item-style="{ paddingTop: '0px', paddingBottom: '0px' }"
   >
-    <multi-tab />
+    <div class="flex-1-hidden h-full">
+      <better-scroll :options="{ scrollX: true, scrollY: false }">
+        <multi-tab />
+      </better-scroll>
+    </div>
     <reload-button />
   </div>
 </template>
@@ -17,6 +21,7 @@
 import { computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useThemeStore, useAppStore } from '@/store';
+import { BetterScroll } from '@/components';
 import { MultiTab, ReloadButton } from './components';
 
 defineProps({