package.json

@@ -1,7 +1,7 @@
 {
   "name": "nova-admin",
   "type": "module",
-  "version": "0.9.14",
+  "version": "0.9.13",
   "private": true,
   "description": "a clean and concise back-end management template based on Vue3, Vite5, Typescript, and Naive UI.",
   "author": {

src/hooks/useTabScroll.ts

@@ -1,64 +0,0 @@
-import type { NScrollbar } from 'naive-ui'
-import { ref, watchEffect, type Ref } from 'vue'
-import { throttle } from 'radash'
-
-export function useTabScroll(currentTabPath: Ref<string>) {
-  const scrollbar = ref<InstanceType<typeof NScrollbar>>()
-  const safeArea = ref(150)
-
-  const handleTabSwitch = (distance: number) => {
-    scrollbar.value?.scrollTo({
-      left: distance,
-      behavior: 'smooth'
-    })
-  }
-
-  const scrollToCurrentTab = () => {
-    nextTick(() => {
-      const currentTabElement = document.querySelector(`[data-tab-path="${currentTabPath.value}"]`) as HTMLElement
-      const tabBarScrollWrapper = document.querySelector('.tab-bar-scroller-wrapper .n-scrollbar-container')
-      const tabBarScrollContent = document.querySelector('.tab-bar-scroller-content')
-      
-      if (currentTabElement && tabBarScrollContent && tabBarScrollWrapper) {
-        const tabLeft = currentTabElement.offsetLeft
-        const tabBarLeft = tabBarScrollWrapper.scrollLeft
-        const wrapperWidth = tabBarScrollWrapper.getBoundingClientRect().width
-        const tabWidth = currentTabElement.getBoundingClientRect().width
-        const containerPR = Number.parseFloat(window.getComputedStyle(tabBarScrollContent).paddingRight)
-
-        if (tabLeft + tabWidth + safeArea.value + containerPR > wrapperWidth + tabBarLeft) {
-          handleTabSwitch(tabLeft + tabWidth + containerPR - wrapperWidth + safeArea.value)
-        } else if (tabLeft - safeArea.value < tabBarLeft) {
-          handleTabSwitch(tabLeft - safeArea.value)
-        }
-      }
-    })
-  }
-
-  const handleScroll = throttle({ interval: 120 }, (step: number) => {
-    scrollbar.value?.scrollBy({
-      left: step * 400,
-      behavior: 'smooth'
-    })
-  })
-
-  const onWheel = (e: WheelEvent) => {
-    e.preventDefault()
-    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
-      handleScroll(e.deltaY > 0 ? 1 : -1)
-    }
-  }
-
-  watchEffect(() => {
-    if (currentTabPath.value) {
-      scrollToCurrentTab()
-    }
-  })
-
-  return {
-    scrollbar,
-    onWheel,
-    safeArea,
-    handleTabSwitch
-  }
-}

src/layouts/components/tab/TabBar.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { RouteLocationNormalized } from 'vue-router'
 import { useAppStore, useTabStore } from '@/store'
-import { useTabScroll } from '@/hooks/useTabScroll'
 import { useDraggable } from 'vue-draggable-plus'
 import IconClose from '~icons/icon-park-outline/close'
 import IconDelete from '~icons/icon-park-outline/delete-four'
@@ -18,8 +17,6 @@ const tabStore = useTabStore()
 const { tabs } = storeToRefs(useTabStore())
 const appStore = useAppStore()
 
-const { scrollbar, onWheel } = useTabScroll(computed(() => tabStore.currentTabPath))
-
 const router = useRouter()
 function handleTab(route: RouteLocationNormalized) {
   router.push(route.fullPath)
@@ -114,38 +111,32 @@ useDraggable(el, tabs, {
 </script>
 
 <template>
-  <n-scrollbar ref="scrollbar" class="relative flex h-full tab-bar-scroller-wrapper" content-class="pr-34 tab-bar-scroller-content" :x-scrollable="true" @wheel="onWheel">
-    <div class="p-l-2 flex wh-full relative">
-      <div class="flex items-end">
-        <TabBarItem
-          v-for="item in tabStore.pinTabs" :key="item.fullPath" :value="tabStore.currentTabPath" :route="item"
-          @click="handleTab(item)"
-        />
-      </div>
-      <div ref="el" class="flex items-end flex-1">
-        <TabBarItem
-          v-for="item in tabStore.tabs"
-          :key="item.fullPath"
-          :value="tabStore.currentTabPath"
-          :route="item"
-          closable
-          :data-tab-path="item.fullPath"
-          @close="tabStore.closeTab"
-          @click="handleTab(item)"
-          @contextmenu="handleContextMenu($event, item)"
-        />
-        <n-dropdown
-          placement="bottom-start" trigger="manual" :x="x" :y="y" :options="options" :show="showDropdown"
-          :on-clickoutside="onClickoutside" @select="handleSelect"
-        />
-      </div>
+  <div class="p-l-2 flex w-full relative">
+    <div class="flex items-end">
+      <TabBarItem
+        v-for="item in tabStore.pinTabs" :key="item.fullPath" :value="tabStore.currentTabPath" :route="item"
+        @click="handleTab(item)"
+      />
     </div>
-    <n-el class="absolute right-0 top-0 flex items-center gap-1 bg-[var(--card-color)] h-full">
+    <div ref="el" class="flex items-end flex-1">
+      <TabBarItem
+        v-for="item in tabStore.tabs" :key="item.fullPath" :value="tabStore.currentTabPath" :route="item" closable
+        @close="tabStore.closeTab"
+        @click="handleTab(item)"
+        @contextmenu="handleContextMenu($event, item)"
+      />
+      <n-dropdown
+        placement="bottom-start" trigger="manual" :x="x" :y="y" :options="options" :show="showDropdown"
+        :on-clickoutside="onClickoutside" @select="handleSelect"
+      />
+    </div>
+    <!-- <span class="m-l-auto" /> -->
+    <n-el class="absolute right-0 flex items-center gap-1 bg-[var(--base-color)] h-full">
       <Reload />
       <ContentFullScreen />
       <DropTabs />
     </n-el>
-  </n-scrollbar>
+  </div>
 </template>
 
 <style scoped>