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

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';