128 lines
3.8 KiB
TypeScript
128 lines
3.8 KiB
TypeScript
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 }
|
|
}
|