修复订单列表返回状态丢失

2026-08-28 23:03:40 +08:00
parent a53b9dc617
commit 41a5b49450
3 changed files with 153 additions and 8 deletions
@@ -0,0 +1,127 @@
+import { onActivated, onBeforeUnmount, onDeactivated, onMounted, watch, type Ref } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
+
+interface AdminListStateOptions<TFilters extends object> {
+  key: string
+  filters: TFilters
+  currentPage: Ref<number>
+  pageSize: Ref<number>
+  scrollSelector?: string
+}
+
+interface StoredAdminListState<TFilters> {
+  filters?: TFilters
+  currentPage?: number
+  pageSize?: number
+  scrollTop?: number
+}
+
+/**
+ * 在同一后台标签页内保留列表筛选、分页与滚动位置。
+ * 数据列表本身仍由页面按当前筛选重新请求，避免展示过期数据。
+ */
+export function useAdminListState<TFilters extends object>(
+  options: AdminListStateOptions<TFilters>
+) {
+  const storageKey = `hfb.admin.list-state.${options.key}`
+  const scrollSelector = options.scrollSelector || '.admin-main'
+  let stateSaveTimer: number | undefined
+  let scrollSaveTimer: number | undefined
+
+  function readState() {
+    if (typeof window === 'undefined') return null
+    try {
+      const raw = window.sessionStorage.getItem(storageKey)
+      if (!raw) return null
+      const state = JSON.parse(raw) as StoredAdminListState<TFilters>
+      return state && typeof state === 'object' ? state : null
+    } catch {
+      return null
+    }
+  }
+
+  function scrollContainer() {
+    return document.querySelector<HTMLElement>(scrollSelector)
+  }
+
+  function saveState() {
+    if (typeof window === 'undefined') return
+    try {
+      const state: StoredAdminListState<TFilters> = {
+        filters: { ...options.filters },
+        currentPage: options.currentPage.value,
+        pageSize: options.pageSize.value,
+        scrollTop: scrollContainer()?.scrollTop || 0,
+      }
+      window.sessionStorage.setItem(storageKey, JSON.stringify(state))
+    } catch {
+      // sessionStorage 不可用时仅不恢复状态，不影响列表使用。
+    }
+  }
+
+  function restoreState() {
+    const state = readState()
+    if (!state) return
+    if (state.filters && typeof state.filters === 'object') {
+      Object.assign(options.filters, state.filters)
+    }
+    if (typeof state.currentPage === 'number' && state.currentPage > 0) {
+      options.currentPage.value = state.currentPage
+    }
+    if (typeof state.pageSize === 'number' && state.pageSize > 0) {
+      options.pageSize.value = state.pageSize
+    }
+  }
+
+  function restoreScroll() {
+    const scrollTop = Number(readState()?.scrollTop || 0)
+    if (!Number.isFinite(scrollTop) || scrollTop <= 0) return
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        const container = scrollContainer()
+        if (container) container.scrollTop = scrollTop
+      })
+    })
+  }
+
+  function scheduleSave() {
+    if (stateSaveTimer !== undefined) window.clearTimeout(stateSaveTimer)
+    stateSaveTimer = window.setTimeout(saveState, 200)
+  }
+
+  function handleScroll() {
+    if (scrollSaveTimer !== undefined) window.clearTimeout(scrollSaveTimer)
+    scrollSaveTimer = window.setTimeout(saveState, 300)
+  }
+
+  // 在页面首次请求前恢复筛选和分页。
+  restoreState()
+
+  watch([options.filters, options.currentPage, options.pageSize], scheduleSave, { deep: true })
+
+  onMounted(() => {
+    scrollContainer()?.addEventListener('scroll', handleScroll, { passive: true })
+  })
+
+  onActivated(() => {
+    scrollContainer()?.addEventListener('scroll', handleScroll, { passive: true })
+  })
+
+  onDeactivated(() => {
+    saveState()
+    scrollContainer()?.removeEventListener('scroll', handleScroll)
+  })
+
+  onBeforeRouteLeave(() => {
+    saveState()
+  })
+
+  onBeforeUnmount(() => {
+    saveState()
+    scrollContainer()?.removeEventListener('scroll', handleScroll)
+    if (stateSaveTimer !== undefined) window.clearTimeout(stateSaveTimer)
+    if (scrollSaveTimer !== undefined) window.clearTimeout(scrollSaveTimer)
+  })
+
+  return { restoreScroll, saveState }
+}