Enhance PWA state management with advanced scroll, form, and modal tracking

Co-authored-by: jxxghp <jxxghp@163.com>

src/utils/pwaEnhancedUsage.md

@@ -0,0 +1,305 @@
+# PWA增强状态管理使用指南
+
+## 概述
+
+增强的PWA状态管理器提供了以下功能：
+- 🔄 **增强的滚动位置管理**：自动跟踪和恢复页面及容器的滚动位置
+- 📝 **实时表单数据保存**：实时保存用户输入的表单数据
+- 🎛️ **弹窗状态管理**：保存和恢复弹窗的打开状态和内容
+
+## 自动功能
+
+以下功能是**自动启用**的，无需额外配置：
+
+### 1. 滚动位置自动保存和恢复
+- 主窗口滚动位置
+- 常见容器滚动位置：`.v-main__wrap`、`.v-card-text`、`.perfect-scrollbar` 等
+- 自动防抖，避免过度保存
+
+### 2. 表单数据实时保存
+- 所有 `input`、`textarea`、`select` 元素的值
+- 复选框和单选按钮的选中状态
+- 下拉框的选中项
+- 500ms防抖延迟
+
+### 3. 弹窗状态跟踪
+- Vuetify弹窗组件：`.v-dialog`、`.v-menu`、`.v-overlay` 等
+- 自动检测弹窗的打开和关闭
+- 保存弹窗内的表单数据和滚动位置
+
+## 在Vue组件中使用
+
+### 基本用法
+
+```vue
+<template>
+  <v-container>
+    <!-- 滚动位置会自动保存和恢复 -->
+    <v-main class="overflow-auto">
+      <div v-for="item in items" :key="item.id">
+        {{ item.name }}
+      </div>
+    </v-main>
+
+    <!-- 表单数据会自动保存和恢复 -->
+    <v-form ref="formRef">
+      <v-text-field
+        v-model="formData.name"
+        label="姓名"
+        name="name"
+      />
+      <v-textarea
+        v-model="formData.description"
+        label="描述"
+        name="description"
+      />
+      <v-select
+        v-model="formData.type"
+        :items="typeOptions"
+        label="类型"
+        name="type"
+      />
+    </v-form>
+
+    <!-- 弹窗状态会自动保存和恢复 -->
+    <v-dialog v-model="dialog" max-width="600">
+      <v-card>
+        <v-card-title>设置</v-card-title>
+        <v-card-text class="overflow-auto">
+          <v-form>
+            <v-text-field
+              v-model="dialogFormData.setting"
+              label="设置项"
+              name="setting"
+            />
+          </v-form>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const formData = ref({
+  name: '',
+  description: '',
+  type: ''
+})
+
+const dialogFormData = ref({
+  setting: ''
+})
+
+const dialog = ref(false)
+const items = ref([])
+
+// 监听PWA状态恢复事件
+onMounted(() => {
+  window.addEventListener('pwaStateRestored', (event) => {
+    console.log('PWA状态已恢复:', event.detail.state)
+    // 可以在这里执行额外的恢复逻辑
+  })
+})
+</script>
+```
+
+### 手动保存状态
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const saveState = async () => {
+  const controller = window.pwaStateController
+  if (controller) {
+    await controller.saveCurrentState()
+    console.log('状态已保存')
+  }
+}
+
+const checkPWAController = () => {
+  return !!window.pwaStateController
+}
+</script>
+
+<template>
+  <v-btn @click="saveState" :disabled="!checkPWAController()">
+    手动保存状态
+  </v-btn>
+</template>
+```
+
+### 弹窗状态恢复监听
+
+```vue
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const dialog = ref(false)
+const modalData = ref({})
+
+const handleModalRestore = (event) => {
+  const state = event.detail
+  if (state.id === 'my-modal') {
+    dialog.value = true
+    modalData.value = state.data || {}
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('restoreModalState', handleModalRestore)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('restoreModalState', handleModalRestore)
+})
+</script>
+
+<template>
+  <v-dialog v-model="dialog" id="my-modal">
+    <v-card>
+      <v-card-text>
+        <v-form>
+          <v-text-field
+            v-model="modalData.value"
+            label="值"
+            name="modal-value"
+          />
+        </v-form>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+```
+
+## 高级配置
+
+### 自定义滚动容器
+
+如果你有自定义的滚动容器，可以添加类名让系统自动跟踪：
+
+```vue
+<template>
+  <div class="custom-scroll-container overflow-auto">
+    <!-- 内容 -->
+  </div>
+</template>
+
+<style>
+.custom-scroll-container {
+  height: 400px;
+  overflow-y: auto;
+}
+</style>
+```
+
+### 表单字段命名
+
+为了更好的状态恢复，建议为表单字段添加 `name` 属性：
+
+```vue
+<template>
+  <v-form>
+    <v-text-field
+      v-model="data.username"
+      label="用户名"
+      name="username"
+    />
+    <v-password-field
+      v-model="data.password"
+      label="密码"
+      name="password"
+    />
+  </v-form>
+</template>
+```
+
+### 弹窗标识
+
+为弹窗添加唯一标识，便于状态恢复：
+
+```vue
+<template>
+  <v-dialog v-model="dialog" id="settings-dialog">
+    <!-- 弹窗内容 -->
+  </v-dialog>
+</template>
+```
+
+## 调试和监控
+
+### 检查状态保存
+
+```javascript
+// 在浏览器控制台中查看保存的状态
+console.log('滚动位置:', sessionStorage.getItem('mp-scroll-positions'))
+console.log('弹窗状态:', sessionStorage.getItem('mp-modal-states'))
+console.log('表单字段:', sessionStorage.getItem('mp-form-fields'))
+```
+
+### 监控PWA状态
+
+```javascript
+// 监听所有PWA状态变化
+window.addEventListener('pwaStateRestored', (event) => {
+  console.log('PWA状态恢复:', event.detail.state)
+})
+
+// 检查PWA控制器状态
+if (window.pwaStateController) {
+  console.log('PWA控制器已可用')
+  console.log('正在恢复状态:', window.pwaStateController.isRestoringState)
+}
+```
+
+## 性能考虑
+
+### 防抖和节流
+- 滚动位置保存：100ms防抖
+- 表单数据保存：500ms防抖
+- 弹窗状态检测：实时响应DOM变化
+
+### 存储策略
+- **sessionStorage**：用于临时状态（滚动位置、表单数据）
+- **localStorage**：用于持久状态（应用设置）
+- **IndexedDB**：用于复杂状态数据
+- **Service Worker**：用于离线状态同步
+
+### 内存管理
+- 自动清理过期状态（24小时）
+- 组件卸载时自动移除事件监听器
+- 限制缓存大小，避免内存泄漏
+
+## 故障排除
+
+### 常见问题
+
+1. **滚动位置没有恢复**
+   - 确保元素有正确的CSS类名
+   - 检查元素是否在DOM渲染完成后才滚动
+
+2. **表单数据没有保存**
+   - 确保表单字段有 `name` 属性
+   - 检查表单是否在PWA控制器初始化后才创建
+
+3. **弹窗状态没有恢复**
+   - 确保弹窗有唯一标识
+   - 检查弹窗是否使用了支持的CSS类名
+
+### 启用调试模式
+
+```javascript
+// 在开发环境中启用详细日志
+if (import.meta.env.DEV) {
+  window.pwaDebug = true
+}
+```
+
+## 注意事项
+
+- 状态恢复只在PWA环境中工作
+- 某些敏感数据（如密码）不会被保存
+- 跨域表单数据可能无法正常恢复
+- 动态创建的元素可能需要手动处理

src/utils/pwaStateManager.ts

@@ -1,16 +1,44 @@
 /**
- * PWA状态管理器
+ * PWA状态管理器 - 增强版本
  * 用于在iOS设备上防止后台被杀时丢失状态，提供状态恢复功能
+ * 新增功能：实时表单保存、弹窗状态管理、增强滚动位置管理
  */
 
-// 应用状态接口
+// 滚动位置接口
+export interface ScrollPosition {
+  x: number
+  y: number
+  element?: string // 元素选择器
+}
+
+// 弹窗状态接口
+export interface ModalState {
+  id: string
+  isOpen: boolean
+  data?: any
+  position?: { x: number; y: number }
+}
+
+// 表单字段状态接口
+export interface FormFieldState {
+  selector: string
+  value: string | number | boolean
+  type: string
+  checked?: boolean
+  selectedIndex?: number
+}
+
+// 应用状态接口 - 增强版本
 export interface PWAState {
   url: string
   scrollPosition: number
+  scrollPositions: ScrollPosition[] // 多个滚动位置
   orientation: number
   timestamp: number
   appData?: any
   formData?: Record<string, any>
+  formFields?: FormFieldState[] // 详细的表单字段状态
+  modalStates?: ModalState[] // 弹窗状态
   userSelections?: {
     selectedItems: string[]
     activeTab?: string
@@ -24,6 +52,536 @@ export interface PWAContext {
   timestamp: number
 }
 
+/**
+ * 增强的滚动位置管理器
+ */
+export class EnhancedScrollManager {
+  private scrollPositions = new Map<string, ScrollPosition>()
+  private scrollObservers = new Map<string, MutationObserver>()
+  private debounceTimer: number | null = null
+  private saveCallback: (positions: ScrollPosition[]) => void
+
+  constructor(saveCallback: (positions: ScrollPosition[]) => void) {
+    this.saveCallback = saveCallback
+    this.initScrollTracking()
+  }
+
+  private initScrollTracking(): void {
+    // 监听主窗口滚动
+    window.addEventListener('scroll', this.debounceScrollSave.bind(this), { passive: true })
+    
+    // 监听常见的滚动容器
+    const scrollContainers = [
+      '.v-main__wrap',
+      '.v-card-text',
+      '.v-sheet',
+      '.perfect-scrollbar',
+      '[data-simplebar]',
+      '.overflow-auto',
+      '.overflow-y-auto'
+    ]
+    
+    scrollContainers.forEach(selector => {
+      this.observeScrollContainer(selector)
+    })
+  }
+
+  private observeScrollContainer(selector: string): void {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              const element = node as Element
+              if (element.matches(selector)) {
+                this.addScrollListener(element, selector)
+              }
+              // 也检查子元素
+              element.querySelectorAll(selector).forEach((child) => {
+                this.addScrollListener(child, selector)
+              })
+            }
+          })
+        }
+      })
+    })
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    })
+
+    this.scrollObservers.set(selector, observer)
+
+    // 立即处理已存在的元素
+    document.querySelectorAll(selector).forEach((element) => {
+      this.addScrollListener(element, selector)
+    })
+  }
+
+  private addScrollListener(element: Element, selector: string): void {
+    if (element.getAttribute('data-scroll-tracked')) return
+    
+    element.setAttribute('data-scroll-tracked', 'true')
+    element.addEventListener('scroll', () => {
+      this.updateScrollPosition(element, selector)
+    }, { passive: true })
+  }
+
+  private updateScrollPosition(element: Element, selector: string): void {
+    const scrollPos: ScrollPosition = {
+      x: element.scrollLeft,
+      y: element.scrollTop,
+      element: selector
+    }
+    this.scrollPositions.set(selector, scrollPos)
+    this.debounceScrollSave()
+  }
+
+  private debounceScrollSave(): void {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer)
+    }
+    this.debounceTimer = window.setTimeout(() => {
+      // 主窗口滚动
+      this.scrollPositions.set('window', {
+        x: window.scrollX,
+        y: window.scrollY,
+        element: 'window'
+      })
+      
+      this.saveCallback(Array.from(this.scrollPositions.values()))
+    }, 100)
+  }
+
+  restoreScrollPositions(positions: ScrollPosition[]): void {
+    positions.forEach(pos => {
+      if (pos.element === 'window') {
+        window.scrollTo({ top: pos.y, left: pos.x, behavior: 'auto' })
+      } else {
+        const elements = document.querySelectorAll(pos.element!)
+        elements.forEach(element => {
+          element.scrollTo({ top: pos.y, left: pos.x, behavior: 'auto' })
+        })
+      }
+    })
+  }
+
+  destroy(): void {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer)
+    }
+    this.scrollObservers.forEach(observer => observer.disconnect())
+    this.scrollObservers.clear()
+    this.scrollPositions.clear()
+  }
+}
+
+/**
+ * 弹窗状态管理器
+ */
+export class ModalStateManager {
+  private modalStates = new Map<string, ModalState>()
+  private mutationObserver: MutationObserver | null = null
+  private saveCallback: (states: ModalState[]) => void
+
+  constructor(saveCallback: (states: ModalState[]) => void) {
+    this.saveCallback = saveCallback
+    this.initModalTracking()
+  }
+
+  private initModalTracking(): void {
+    // 监听DOM变化来检测弹窗的打开和关闭
+    this.mutationObserver = new MutationObserver((mutations) => {
+      let hasModalChanges = false
+      
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          // 检查新添加的弹窗
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              const element = node as Element
+              if (this.isModalElement(element)) {
+                this.trackModal(element)
+                hasModalChanges = true
+              }
+            }
+          })
+        } else if (mutation.type === 'attributes') {
+          const element = mutation.target as Element
+          if (this.isModalElement(element)) {
+            this.updateModalState(element)
+            hasModalChanges = true
+          }
+        }
+      })
+
+      if (hasModalChanges) {
+        this.saveStates()
+      }
+    })
+
+    this.mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['class', 'style', 'aria-hidden', 'data-*']
+    })
+
+    // 立即扫描已存在的弹窗
+    this.scanExistingModals()
+  }
+
+  private isModalElement(element: Element): boolean {
+    const modalSelectors = [
+      '.v-dialog',
+      '.v-menu',
+      '.v-overlay',
+      '.v-tooltip',
+      '.v-snackbar',
+      '.modal',
+      '.popup',
+      '.drawer',
+      '.v-navigation-drawer',
+      '[role="dialog"]',
+      '[role="alertdialog"]',
+      '[role="tooltip"]'
+    ]
+    
+    return modalSelectors.some(selector => 
+      element.matches(selector) || element.querySelector(selector)
+    )
+  }
+
+  private trackModal(element: Element): void {
+    const id = this.getModalId(element)
+    const isOpen = this.isModalOpen(element)
+    
+    if (isOpen) {
+      const state: ModalState = {
+        id,
+        isOpen: true,
+        data: this.extractModalData(element)
+      }
+      
+      this.modalStates.set(id, state)
+    } else {
+      this.modalStates.delete(id)
+    }
+  }
+
+  private updateModalState(element: Element): void {
+    const id = this.getModalId(element)
+    const isOpen = this.isModalOpen(element)
+    
+    if (isOpen) {
+      const state: ModalState = {
+        id,
+        isOpen: true,
+        data: this.extractModalData(element)
+      }
+      this.modalStates.set(id, state)
+    } else {
+      this.modalStates.delete(id)
+    }
+  }
+
+  private getModalId(element: Element): string {
+    return element.id || 
+           element.getAttribute('data-modal-id') ||
+           element.className.replace(/\s+/g, '-') ||
+           `modal-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+  }
+
+  private isModalOpen(element: Element): boolean {
+    const computedStyle = window.getComputedStyle(element)
+    
+    // 检查多种可能的显示状态
+    return computedStyle.display !== 'none' &&
+           computedStyle.visibility !== 'hidden' &&
+           computedStyle.opacity !== '0' &&
+           !element.hasAttribute('hidden') &&
+           element.getAttribute('aria-hidden') !== 'true' &&
+           !element.classList.contains('v-overlay--active') === false
+  }
+
+  private extractModalData(element: Element): any {
+    const data: any = {}
+    
+    // 提取表单数据
+    const form = element.querySelector('form')
+    if (form) {
+      data.formData = this.extractFormData(form)
+    }
+    
+    // 提取输入字段
+    const inputs = element.querySelectorAll('input, select, textarea')
+    if (inputs.length > 0) {
+      data.inputData = this.extractInputData(inputs)
+    }
+    
+    // 提取滚动位置
+    const scrollableElements = element.querySelectorAll('[class*="overflow"], .v-card-text')
+    if (scrollableElements.length > 0) {
+      data.scrollPositions = Array.from(scrollableElements).map(el => ({
+        selector: this.getElementSelector(el),
+        x: el.scrollLeft,
+        y: el.scrollTop
+      }))
+    }
+    
+    return data
+  }
+
+  private extractFormData(form: Element): Record<string, any> {
+    const formData: Record<string, any> = {}
+    const inputs = form.querySelectorAll('input, select, textarea')
+    
+    inputs.forEach(input => {
+      const element = input as HTMLInputElement
+      if (element.name) {
+        formData[element.name] = element.value
+      }
+    })
+    
+    return formData
+  }
+
+  private extractInputData(inputs: NodeListOf<Element>): Record<string, any> {
+    const inputData: Record<string, any> = {}
+    
+    inputs.forEach(input => {
+      const element = input as HTMLInputElement
+      const key = element.name || element.id || this.getElementSelector(element)
+      inputData[key] = element.value
+    })
+    
+    return inputData
+  }
+
+  private getElementSelector(element: Element): string {
+    if (element.id) return `#${element.id}`
+    if (element.className) return `.${element.className.split(' ')[0]}`
+    return element.tagName.toLowerCase()
+  }
+
+  private scanExistingModals(): void {
+    const modalSelectors = [
+      '.v-dialog',
+      '.v-menu',
+      '.v-overlay',
+      '.modal',
+      '.popup',
+      '[role="dialog"]'
+    ]
+    
+    modalSelectors.forEach(selector => {
+      document.querySelectorAll(selector).forEach(element => {
+        if (this.isModalOpen(element)) {
+          this.trackModal(element)
+        }
+      })
+    })
+    
+    this.saveStates()
+  }
+
+  private saveStates(): void {
+    this.saveCallback(Array.from(this.modalStates.values()))
+  }
+
+  restoreModalStates(states: ModalState[]): void {
+    // 此方法需要与应用的具体弹窗实现配合
+    // 可以通过事件系统通知应用恢复弹窗状态
+    states.forEach(state => {
+      const event = new CustomEvent('restoreModalState', {
+        detail: state
+      })
+      window.dispatchEvent(event)
+    })
+  }
+
+  destroy(): void {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect()
+    }
+    this.modalStates.clear()
+  }
+}
+
+/**
+ * 实时表单数据管理器
+ */
+export class RealTimeFormManager {
+  private formFields = new Map<string, FormFieldState>()
+  private debounceTimer: number | null = null
+  private saveCallback: (fields: FormFieldState[]) => void
+  private observers = new Set<MutationObserver>()
+
+  constructor(saveCallback: (fields: FormFieldState[]) => void) {
+    this.saveCallback = saveCallback
+    this.initFormTracking()
+  }
+
+  private initFormTracking(): void {
+    // 监听表单输入事件
+    const inputEvents = ['input', 'change', 'blur', 'focus']
+    inputEvents.forEach(eventType => {
+      document.addEventListener(eventType, this.handleFormInput.bind(this), true)
+    })
+
+    // 监听DOM变化，跟踪新添加的表单元素
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              const element = node as Element
+              this.trackFormElements(element)
+            }
+          })
+        }
+      })
+    })
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    })
+
+    this.observers.add(observer)
+
+    // 立即扫描已存在的表单元素
+    this.scanExistingForms()
+  }
+
+  private handleFormInput(event: Event): void {
+    const target = event.target as HTMLInputElement
+    if (this.isFormElement(target)) {
+      this.updateFormField(target)
+    }
+  }
+
+  private isFormElement(element: Element): boolean {
+    const formTags = ['INPUT', 'TEXTAREA', 'SELECT']
+    return formTags.includes(element.tagName)
+  }
+
+  private updateFormField(element: HTMLInputElement): void {
+    const selector = this.getFieldSelector(element)
+    const fieldState: FormFieldState = {
+      selector,
+      value: element.value,
+      type: element.type,
+      checked: element.checked,
+      selectedIndex: element.tagName === 'SELECT' ? (element as unknown as HTMLSelectElement).selectedIndex : undefined
+    }
+
+    this.formFields.set(selector, fieldState)
+    this.debounceSave()
+  }
+
+  private getFieldSelector(element: HTMLInputElement): string {
+    if (element.id) return `#${element.id}`
+    if (element.name) return `[name="${element.name}"]`
+    
+    // 构建更复杂的选择器
+    const path = []
+    let current = element as Element
+    
+    while (current && current !== document.body) {
+      let selector = current.tagName.toLowerCase()
+      
+      if (current.id) {
+        selector += `#${current.id}`
+        path.unshift(selector)
+        break
+      }
+      
+      if (current.className) {
+        const classes = current.className.split(/\s+/).filter(c => c)
+        if (classes.length > 0) {
+          selector += `.${classes[0]}`
+        }
+      }
+      
+      const siblings = Array.from(current.parentNode?.children || [])
+        .filter(sibling => sibling.tagName === current.tagName)
+      
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(current) + 1
+        selector += `:nth-child(${index})`
+      }
+      
+      path.unshift(selector)
+      current = current.parentNode as Element
+    }
+    
+    return path.join(' > ')
+  }
+
+  private trackFormElements(element: Element): void {
+    const formElements = element.querySelectorAll('input, textarea, select')
+    formElements.forEach(formElement => {
+      this.updateFormField(formElement as HTMLInputElement)
+    })
+
+    // 如果元素本身是表单元素
+    if (this.isFormElement(element)) {
+      this.updateFormField(element as HTMLInputElement)
+    }
+  }
+
+  private scanExistingForms(): void {
+    const formElements = document.querySelectorAll('input, textarea, select')
+    formElements.forEach(element => {
+      this.updateFormField(element as HTMLInputElement)
+    })
+  }
+
+  private debounceSave(): void {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer)
+    }
+    this.debounceTimer = window.setTimeout(() => {
+      this.saveCallback(Array.from(this.formFields.values()))
+    }, 500) // 500ms防抖
+  }
+
+  restoreFormFields(fields: FormFieldState[]): void {
+    fields.forEach(field => {
+      const elements = document.querySelectorAll(field.selector)
+      elements.forEach(element => {
+        const inputElement = element as HTMLInputElement
+        
+        if (field.type === 'checkbox' || field.type === 'radio') {
+          inputElement.checked = field.checked || false
+        } else if (field.type === 'select-one' || field.type === 'select-multiple') {
+          const selectElement = inputElement as unknown as HTMLSelectElement
+          if (field.selectedIndex !== undefined) {
+            selectElement.selectedIndex = field.selectedIndex
+          }
+        } else {
+          inputElement.value = field.value as string
+        }
+        
+        // 触发事件以便Vue能够响应
+        inputElement.dispatchEvent(new Event('input', { bubbles: true }))
+        inputElement.dispatchEvent(new Event('change', { bubbles: true }))
+      })
+    })
+  }
+
+  destroy(): void {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer)
+    }
+    this.observers.forEach(observer => observer.disconnect())
+    this.observers.clear()
+    this.formFields.clear()
+  }
+}
+
 /**
  * 基础状态管理器（使用localStorage和sessionStorage）
  */
@@ -334,8 +892,6 @@ export class VisibilityStateManager {
     }
   }
 
-
-
   private handlePageUnload(): void {
     const currentState = this.getCurrentAppState()
     this.stateManager.saveState(currentState)
@@ -360,6 +916,7 @@ export class VisibilityStateManager {
     return {
       url: window.location.href,
       scrollPosition: window.scrollY,
+      scrollPositions: [{ x: window.scrollX, y: window.scrollY, element: 'window' }],
       orientation: window.orientation || 0,
       timestamp: Date.now(),
       appData: this.getAppSpecificState()
@@ -453,7 +1010,7 @@ export class VisibilityStateManager {
 }
 
 /**
- * 完整的PWA状态管理器
+ * 完整的PWA状态管理器 - 增强版本
  */
 export class PWAStateController {
   private stateManager: PWAStateManager
@@ -461,6 +1018,9 @@ export class PWAStateController {
   private swStateSync: ServiceWorkerStateSync
   private visibilityManager: VisibilityStateManager
   private restoreDecision: StateRestoreDecision
+  private enhancedScrollManager: EnhancedScrollManager
+  private modalStateManager: ModalStateManager
+  private realTimeFormManager: RealTimeFormManager
   private stateRestorePromise: Promise<void> | null = null
   private stateRestoreResolve: (() => void) | null = null
   private isRestoring = false
@@ -472,6 +1032,19 @@ export class PWAStateController {
     this.visibilityManager = new VisibilityStateManager(this.stateManager)
     this.restoreDecision = new StateRestoreDecision()
     
+    // 初始化增强管理器
+    this.enhancedScrollManager = new EnhancedScrollManager((positions) => {
+      this.saveScrollPositions(positions)
+    })
+    
+    this.modalStateManager = new ModalStateManager((states) => {
+      this.saveModalStates(states)
+    })
+    
+    this.realTimeFormManager = new RealTimeFormManager((fields) => {
+      this.saveFormFields(fields)
+    })
+    
     // 创建状态恢复Promise
     this.stateRestorePromise = new Promise((resolve) => {
       this.stateRestoreResolve = resolve
@@ -545,12 +1118,20 @@ export class PWAStateController {
   }
 
   async saveCurrentState(): Promise<void> {
+    // 从sessionStorage获取实时状态
+    const scrollPositions = this.getScrollPositionsFromStorage()
+    const modalStates = this.getModalStatesFromStorage()
+    const formFields = this.getFormFieldsFromStorage()
+
     const state: PWAState = {
       url: window.location.href,
       scrollPosition: window.scrollY,
+      scrollPositions: scrollPositions.length > 0 ? scrollPositions : [{ x: window.scrollX, y: window.scrollY, element: 'window' }],
       orientation: window.orientation || 0,
       timestamp: Date.now(),
-      appData: this.getAppSpecificState()
+      appData: this.getAppSpecificState(),
+      modalStates: modalStates.length > 0 ? modalStates : undefined,
+      formFields: formFields.length > 0 ? formFields : undefined
     }
 
     // 多重保存策略
@@ -566,19 +1147,35 @@ export class PWAStateController {
     const currentUrl = window.location.href
     const urlMatches = this.isUrlExactMatch(state.url, currentUrl)
 
-    // 只有在URL完全匹配时才恢复滚动位置
-    if (state.scrollPosition && urlMatches) {
+    // 使用增强滚动管理器恢复滚动位置
+    if (state.scrollPositions && urlMatches) {
+      this.enhancedScrollManager.restoreScrollPositions(state.scrollPositions)
+    } else if (state.scrollPosition && urlMatches) {
+      // 向后兼容：如果没有新的滚动位置数据，使用旧的方式
       window.scrollTo({
         top: state.scrollPosition,
         behavior: 'auto'
       })
     }
 
+    // 恢复弹窗状态
+    if (state.modalStates) {
+      this.modalStateManager.restoreModalStates(state.modalStates)
+    }
+
+    // 恢复表单字段
+    if (state.formFields && urlMatches) {
+      this.realTimeFormManager.restoreFormFields(state.formFields)
+    }
+
     // 恢复应用特定状态 - 过滤掉不适用的状态
     if (state.appData) {
       this.restoreAppSpecificState(state.appData, urlMatches)
     }
 
+    // 从sessionStorage恢复额外的状态
+    this.restoreFromSessionStorage(urlMatches)
+
     // 触发状态恢复事件
     this.dispatchStateRestoreEvent(state)
   }
@@ -710,4 +1307,119 @@ export class PWAStateController {
     })
     window.dispatchEvent(event)
   }
+
+  /**
+   * 保存滚动位置（被增强滚动管理器调用）
+   */
+  private saveScrollPositions(positions: ScrollPosition[]): void {
+    // 实时保存滚动位置到sessionStorage
+    try {
+      sessionStorage.setItem('mp-scroll-positions', JSON.stringify(positions))
+    } catch (error) {
+      console.error('保存滚动位置失败:', error)
+    }
+  }
+
+  /**
+   * 保存弹窗状态（被弹窗状态管理器调用）
+   */
+  private saveModalStates(states: ModalState[]): void {
+    // 实时保存弹窗状态到sessionStorage
+    try {
+      sessionStorage.setItem('mp-modal-states', JSON.stringify(states))
+    } catch (error) {
+      console.error('保存弹窗状态失败:', error)
+    }
+  }
+
+  /**
+   * 保存表单字段（被实时表单管理器调用）
+   */
+  private saveFormFields(fields: FormFieldState[]): void {
+    // 实时保存表单字段到sessionStorage
+    try {
+      sessionStorage.setItem('mp-form-fields', JSON.stringify(fields))
+    } catch (error) {
+      console.error('保存表单字段失败:', error)
+    }
+  }
+
+  /**
+   * 从sessionStorage恢复额外的状态
+   */
+  private restoreFromSessionStorage(urlMatches: boolean): void {
+    try {
+      // 恢复滚动位置
+      if (urlMatches) {
+        const scrollPositions = sessionStorage.getItem('mp-scroll-positions')
+        if (scrollPositions) {
+          const positions: ScrollPosition[] = JSON.parse(scrollPositions)
+          this.enhancedScrollManager.restoreScrollPositions(positions)
+        }
+      }
+
+      // 恢复弹窗状态
+      const modalStates = sessionStorage.getItem('mp-modal-states')
+      if (modalStates) {
+        const states: ModalState[] = JSON.parse(modalStates)
+        this.modalStateManager.restoreModalStates(states)
+      }
+
+      // 恢复表单字段
+      if (urlMatches) {
+        const formFields = sessionStorage.getItem('mp-form-fields')
+        if (formFields) {
+          const fields: FormFieldState[] = JSON.parse(formFields)
+          this.realTimeFormManager.restoreFormFields(fields)
+        }
+      }
+    } catch (error) {
+      console.error('从sessionStorage恢复状态失败:', error)
+    }
+  }
+
+  /**
+   * 从sessionStorage获取滚动位置
+   */
+  private getScrollPositionsFromStorage(): ScrollPosition[] {
+    try {
+      const stored = sessionStorage.getItem('mp-scroll-positions')
+      return stored ? JSON.parse(stored) : []
+    } catch (error) {
+      return []
+    }
+  }
+
+  /**
+   * 从sessionStorage获取弹窗状态
+   */
+  private getModalStatesFromStorage(): ModalState[] {
+    try {
+      const stored = sessionStorage.getItem('mp-modal-states')
+      return stored ? JSON.parse(stored) : []
+    } catch (error) {
+      return []
+    }
+  }
+
+  /**
+   * 从sessionStorage获取表单字段
+   */
+  private getFormFieldsFromStorage(): FormFieldState[] {
+    try {
+      const stored = sessionStorage.getItem('mp-form-fields')
+      return stored ? JSON.parse(stored) : []
+    } catch (error) {
+      return []
+    }
+  }
+
+  /**
+   * 销毁管理器并清理资源
+   */
+  destroy(): void {
+    this.enhancedScrollManager.destroy()
+    this.modalStateManager.destroy()
+    this.realTimeFormManager.destroy()
+  }
 }