From 2f6f07dfed62784dbcbe33dcb53aff6abce6192f Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Tue, 27 May 2025 18:19:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=BF=80=E6=B4=BB=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E9=A1=B5=E5=AE=9A=E4=BD=8D=E5=8F=AF=E8=83=BD=E4=B8=8D?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/Topbar/Tabbar/index.vue | 14 ++++++++++++--
 src/store/modules/tabbar.ts                    |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/layouts/components/Topbar/Tabbar/index.vue b/src/layouts/components/Topbar/Tabbar/index.vue
index 18b9a723..9f8bd10e 100644
--- a/src/layouts/components/Topbar/Tabbar/index.vue
+++ b/src/layouts/components/Topbar/Tabbar/index.vue
@@ -30,10 +30,20 @@ const tabRef = useTemplateRef<HTMLElement[]>('tabRef')
 
 watch(() => route, (val) => {
   if (settingsStore.settings.tabbar.enable) {
-    tabbarStore.add(val).then(() => {
+    tabbarStore.add(val)
+    nextTick(() => {
       const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value)
       if (index !== -1) {
-        tabRef.value && tabsRef.value?.scrollTo(tabRef.value[index].offsetLeft - tabsRef.value.ref?.$el.clientWidth * 0.4)
+        const tabEl = tabRef.value?.find(item => Number.parseInt(item.dataset.index!) === index)
+        const containerEl = tabsRef.value?.ref?.$el
+        if (tabEl && containerEl) {
+          const tabLeft = tabEl.offsetLeft
+          const tabWidth = tabEl.offsetWidth
+          const containerWidth = containerEl.clientWidth
+          // 计算滚动位置，使标签页居中
+          const scrollLeft = tabLeft - (containerWidth - tabWidth) / 2
+          tabsRef.value?.scrollTo(scrollLeft)
+        }
         tabbarScrollTip()
       }
     })
diff --git a/src/store/modules/tabbar.ts b/src/store/modules/tabbar.ts
index fb83e2f6..8ad70fb2 100755
--- a/src/store/modules/tabbar.ts
+++ b/src/store/modules/tabbar.ts
@@ -12,7 +12,7 @@ const useTabbarStore = defineStore(
     const leaveIndex = ref(-1)
 
     // 添加标签页
-    async function add(route: RouteLocationNormalized) {
+    function add(route: RouteLocationNormalized) {
       const names: string[] = []
       route.matched.forEach((v, i) => {
         if (i > 0) {