优化 PWA 状态恢复逻辑

src/composables/useDynamicHeaderTab.ts

@@ -45,9 +45,13 @@ export function useDynamicHeaderTab() {
     const enablePWARestore = config.enableStateRestore !== false // 默认启用
     const pwaTabState = enablePWARestore ? useTabStateRestore(config.modelValue.value) : null
 
-    // 如果启用了PWA状态恢复，先尝试恢复状态
-    if (pwaTabState && pwaTabState.activeTab.value) {
+    // 标记是否已经初始化过，避免重复恢复状态
+    let isInitialized = false
+
+    // 如果启用了PWA状态恢复，先尝试恢复状态（仅在首次初始化时）
+    if (pwaTabState && pwaTabState.activeTab.value && !isInitialized) {
       config.modelValue.value = pwaTabState.activeTab.value
+      isInitialized = true
     }
 
     const tabConfig: DynamicHeaderTabConfig = {
@@ -65,6 +69,7 @@ export function useDynamicHeaderTab() {
     }
 
     // 如果启用了PWA状态恢复，监听PWA状态变化并同步到modelValue
+    // 但只在非激活状态下响应，避免干扰页面激活时的状态
     if (pwaTabState) {
       watch(pwaTabState.activeTab, newTab => {
         if (newTab && newTab !== config.modelValue.value) {
@@ -152,7 +157,15 @@ export function useDynamicHeaderTab() {
 
     // 处理页面激活时重新注册（支持keep-alive缓存的页面）
     onActivated(() => {
+      // 页面激活时，优先使用当前页面的实际状态，而不是恢复的PWA状态
+      // 这样可以避免从后台切换回来时显示错误的标签页
       nextTick(() => {
+        // 确保使用当前页面的实际modelValue，不受PWA状态恢复影响
+        tabConfig.modelValue = config.modelValue.value
+        // 同步当前状态到PWA存储，确保状态一致性
+        if (pwaTabState && config.modelValue.value) {
+          pwaTabState.activeTab.value = config.modelValue.value
+        }
         doRegister()
       })
     })

src/composables/useStateRestore.ts

@@ -48,7 +48,7 @@ export function useTabStateRestore(defaultTab?: string) {
     }
   })
 
-  // 组件挂载时恢复状态
+  // 组件挂载时恢复状态（仅在首次加载时）
   onMounted(() => {
     // 先尝试恢复，如果没有保存的状态则使用默认值
     if (!restoreTabState() && defaultTab) {
@@ -56,19 +56,6 @@ export function useTabStateRestore(defaultTab?: string) {
     }
   })
 
-  // 监听全局恢复事件
-  const handleRestore = () => {
-    restoreTabState()
-  }
-
-  onMounted(() => {
-    window.addEventListener('pwa-state-restore', handleRestore)
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('pwa-state-restore', handleRestore)
-  })
-
   return {
     activeTab,
     saveTabState,

src/plugins/stateRestore.ts

@@ -149,23 +149,25 @@ class StateRestore {
     // 页面显示时检查是否需要恢复状态
     document.addEventListener('visibilitychange', () => {
       if (!document.hidden) {
-        this.checkAndRestore()
+        // 只恢复路由状态，不自动恢复标签页状态
+        // 标签页状态由组件自己控制，避免干扰当前页面状态
+        this.checkAndRestoreRoute()
       }
     })
 
     // 页面加载完成后恢复状态
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', () => {
-        setTimeout(() => this.checkAndRestore(), 100)
+        setTimeout(() => this.checkAndRestoreRoute(), 100)
       })
     } else {
-      setTimeout(() => this.checkAndRestore(), 100)
+      setTimeout(() => this.checkAndRestoreRoute(), 100)
     }
   }
 
-  // 检查并恢复状态
-  private checkAndRestore() {
-    // 1. 恢复路由（如果当前路径与保存的不同）
+  // 检查并恢复路由状态（不恢复标签页状态）
+  private checkAndRestoreRoute() {
+    // 只恢复路由（如果当前路径与保存的不同）
     const savedRoute = this.route.restoreRoute()
     if (savedRoute && savedRoute.path !== window.location.pathname) {
       const fullPath = savedRoute.path + savedRoute.search + savedRoute.hash
@@ -173,7 +175,7 @@ class StateRestore {
       window.history.replaceState(null, '', fullPath)
     }
 
-    // 2. 发送恢复事件，让组件自行处理标签页恢复
+    // 发送恢复事件，但标签页恢复由组件自己决定
     window.dispatchEvent(
       new CustomEvent('pwa-state-restore', {
         detail: {