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

frontend/src/features/admin/composables/useAdminListState.ts

@@ -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 }
+}

frontend/src/features/admin/views/AdminOrderDetailView.vue

@@ -2,7 +2,7 @@
 import { readError } from '@/shared/utils/error'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed, onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 import {
   adminCloseOrder,
@@ -33,7 +33,7 @@ import {
   readSnapshot,
   readSnapshotResources,
 } from '@/features/orders/composables/useOrderSnapshot'
-import { adminPath } from '@/shared/utils/adminPath'
+import { adminPath, isAdminPath } from '@/shared/utils/adminPath'
 import { centToYuan, formatCentWithSymbol } from '@/shared/utils/money'
 import {
   disputeStatusLabel,
@@ -46,6 +46,7 @@ import { formatDateTime } from '@/shared/utils/time'
 import { formatGameName, formatListingNo } from '@/shared/utils/listingDisplay'
 
 const route = useRoute()
+const router = useRouter()
 const loading = ref(false)
 const submitting = ref(false)
 const order = ref<Order | null>(null)
@@ -122,6 +123,15 @@ const returnLabel = computed(() =>
     ? '返回会话'
     : '返回列表'
 )
+
+function goBackToList() {
+  const back = (window.history.state as { back?: string | null } | null)?.back
+  if (back && isAdminPath(back)) {
+    router.back()
+    return
+  }
+  void router.push(returnTarget.value)
+}
 const refunding = ref(false)
 
 const snapshotText = computed(() => JSON.stringify(order.value?.account_snapshot || {}, null, 2))
@@ -910,9 +920,7 @@ function paymentPaidAt(record: AdminPayment) {
         </p>
       </div>
       <div class="toolbar-actions">
-        <RouterLink :to="returnTarget">
+        <el-button @click="goBackToList">{{ returnLabel }}</el-button>
-          <el-button>{{ returnLabel }}</el-button>
-        </RouterLink>
         <el-button v-if="canResetHandoff" type="success" @click="openAction('reset')">
           {{ resetActionLabel }}
         </el-button>

frontend/src/features/admin/views/AdminOrdersView.vue

@@ -13,6 +13,7 @@ import { formatDateTime } from '@/shared/utils/time'
 import { centToYuan, formatMoney } from '@/shared/utils/money'
 import { formatListingNo } from '@/shared/utils/listingDisplay'
 import { adminPath } from '@/shared/utils/adminPath'
+import { useAdminListState } from '@/features/admin/composables/useAdminListState'
 import AdminTablePagination from '../components/AdminTablePagination.vue'
 
 const filters = reactive<AdminOrderQuery>({
@@ -31,6 +32,12 @@ const currentPageSize = ref(20)
 const route = useRoute()
 const router = useRouter()
 const canReturnToWithdrawals = computed(() => route.query.from === 'withdrawals')
+const { restoreScroll } = useAdminListState({
+  key: 'orders',
+  filters,
+  currentPage,
+  pageSize: currentPageSize,
+})
 
 const orderStatusOptions = [
   { label: '待支付', value: 'pending_payment' },
@@ -77,13 +84,14 @@ const settlementStatusOptions = [
   { label: '已仲裁', value: 'arbitrated' },
 ] as const
 
-onMounted(() => {
+onMounted(async () => {
   // 支持从提现审核等页面跳转预填号主/租客搜索
   const keyword = route.query.keyword
   if (typeof keyword === 'string' && keyword.trim()) {
     filters.keyword = keyword.trim()
   }
-  void loadOrders()
+  await loadOrders()
+  restoreScroll()
 })
 
 async function loadOrders() {
@@ -325,7 +333,9 @@ function isPlatformManaged(row: Order) {
       </el-table-column>
       <el-table-column label="号主收入" width="120" align="right">
         <template #default="{ row }">
-          <strong class="owner-income-cell">¥{{ money(amountYuan(row.owner_rent_amount_cent)) }}</strong>
+          <strong class="owner-income-cell"
+            >¥{{ money(amountYuan(row.owner_rent_amount_cent)) }}</strong
+          >
         </template>
       </el-table-column>
       <el-table-column label="创建时间" width="170">