From 41f70470ec7b3f20d21a73361b3fc4f341d32668 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Mon, 7 Sep 2026 10:10:44 +0800
Subject: [PATCH] =?UTF-8?q?perf(listings):=20=E4=BC=98=E5=8C=96=E4=BB=8E?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E8=BF=94=E5=9B=9E=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E7=9A=84=E6=BB=9A=E5=8A=A8=E6=81=A2=E5=A4=8D=E4=BD=93=E9=AA=8C?=
 =?UTF-8?q?=EF=BC=8C=E6=B6=88=E9=99=A4=E9=A1=B6=E9=83=A8=E9=97=AA=E8=B7=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../listings/composables/useListingQuery.ts   |  29 ++++
 .../src/features/listings/views/HomeView.vue  | 127 +++++++++++++-----
 .../listings/views/MobileHomeView.vue         |  16 ++-
 .../views/MobileListingDetailView.vue         |   7 +-
 frontend/src/stores/pcHomeCache.ts            |  92 +++++++++++++
 5 files changed, 228 insertions(+), 43 deletions(-)
 create mode 100644 frontend/src/stores/pcHomeCache.ts

diff --git a/frontend/src/features/listings/composables/useListingQuery.ts b/frontend/src/features/listings/composables/useListingQuery.ts
index c42e6e1..5424116 100644
--- a/frontend/src/features/listings/composables/useListingQuery.ts
+++ b/frontend/src/features/listings/composables/useListingQuery.ts
@@ -122,14 +122,43 @@ export function useListingQuery(
     }
   )
 
+  function restoreSnapshot(snapshot: {
+    listings: Listing[]
+    totalListings: number
+    zoneCounts: Record<string, number>
+    currentPage: number
+    hasMoreListings: boolean
+  }) {
+    listings.value = snapshot.listings.slice()
+    totalListings.value = snapshot.totalListings
+    zoneCounts.value = { ...snapshot.zoneCounts }
+    currentPage.value = snapshot.currentPage
+    hasMoreListings.value = snapshot.hasMoreListings
+    loading.value = false
+    loadingMore.value = false
+  }
+
+  function getSnapshot() {
+    return {
+      listings: listings.value.slice(),
+      totalListings: totalListings.value,
+      zoneCounts: { ...zoneCounts.value },
+      currentPage: currentPage.value,
+      hasMoreListings: hasMoreListings.value,
+    }
+  }
+
   return {
     loading,
     loadingMore,
     listings,
     totalListings,
     zoneCounts,
+    currentPage,
     hasMoreListings,
     loadListingsPage,
     zoneCount,
+    restoreSnapshot,
+    getSnapshot,
   }
 }
diff --git a/frontend/src/features/listings/views/HomeView.vue b/frontend/src/features/listings/views/HomeView.vue
index 7db1d46..88b3c85 100644
--- a/frontend/src/features/listings/views/HomeView.vue
+++ b/frontend/src/features/listings/views/HomeView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { RouterLink, onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
+import { usePcHomeCacheStore } from '@/stores/pcHomeCache'
 import {
   defaultAWRecycleConfig,
   defaultCooperationFeedbackConfig,
@@ -83,6 +84,8 @@ const {
   hasMoreListings,
   loadListingsPage,
   zoneCount,
+  restoreSnapshot,
+  getSnapshot,
 } = useListingQuery(filters, sortBy, activeZone)
 
 watch(
@@ -169,6 +172,7 @@ async function loadHome() {
     publishOptions.value = emptyListingPublishOptions
   } finally {
     loading.value = false
+    saveToCache()
     restorePcHomeScroll()
   }
 }
@@ -290,65 +294,118 @@ function buildDesktopHomeQueryValues(): Record<string, HomeQueryValue> {
   }
 }
 
-// ========== PC 首页滚动位置持久化 ==========
-// 详情页返回/浏览器后退时，首页列表异步加载导致页面高度不足，
-// vue-router 的 savedPosition 恢复会被浏览器钳制到错误位置，
-// 因此按「筛选签名」显式保存/恢复滚动位置，确保回到上次筛选的位置。
+// ========== PC 首页状态与滚动持久化 ==========
+// 详情页返回/浏览器后退时，利用 Pinia 缓存同步恢复全部已加载列表与高度，
+// 使首帧渲染即可完成完整布局，结合 instant 滚动定位彻底解决「从顶部闪跳」问题。
 const pcHomeScrollStorageKey = 'hfb.home.scroll.desktop'
+const pcHomeCache = usePcHomeCacheStore()
+
+function restoreFromCache(): boolean {
+  const signature = desktopHomeStateSignature()
+  if (!pcHomeCache.matchList(signature)) return false
+
+  restoreSnapshot({
+    listings: pcHomeCache.listings,
+    totalListings: pcHomeCache.totalListings,
+    zoneCounts: pcHomeCache.zoneCounts,
+    currentPage: pcHomeCache.currentPage,
+    hasMoreListings: pcHomeCache.hasMoreListings,
+  })
+  if (pcHomeCache.homeConfigLoaded) {
+    announcements.value = pcHomeCache.announcements.slice()
+    banners.value = pcHomeCache.banners.map(slide => ({ ...slide }))
+    awRecycle.value = { ...pcHomeCache.awRecycle }
+    cooperationFeedback.value = { ...pcHomeCache.cooperationFeedback }
+    publishOptions.value = pcHomeCache.publishOptions
+  }
+  return true
+}
+
+function saveToCache() {
+  const snapshot = getSnapshot()
+  if (snapshot.listings.length === 0) return
+  pcHomeCache.saveList({
+    signature: desktopHomeStateSignature(),
+    listings: snapshot.listings,
+    totalListings: snapshot.totalListings,
+    zoneCounts: snapshot.zoneCounts,
+    currentPage: snapshot.currentPage,
+    hasMoreListings: snapshot.hasMoreListings,
+  })
+  pcHomeCache.saveHomeConfig({
+    announcements: announcements.value,
+    banners: banners.value,
+    awRecycle: awRecycle.value,
+    cooperationFeedback: cooperationFeedback.value,
+    publishOptions: publishOptions.value,
+  })
+  pcHomeCache.saveScrollTop(window.scrollY)
+}
 
 function savePcHomeScroll() {
+  saveToCache()
   try {
     window.sessionStorage.setItem(
       pcHomeScrollStorageKey,
       JSON.stringify({ signature: desktopHomeStateSignature(), top: window.scrollY })
     )
   } catch {
-    // sessionStorage 不可用时忽略，仅损失滚动恢复
+    // sessionStorage 不可用时忽略
   }
 }
 
 function restorePcHomeScroll() {
-  let savedTop = 0
-  let savedSignature = ''
-  try {
-    const raw = window.sessionStorage.getItem(pcHomeScrollStorageKey)
-    if (raw) {
-      const parsed = JSON.parse(raw) as { signature?: string; top?: number }
-      if (typeof parsed.signature === 'string' && typeof parsed.top === 'number') {
-        savedSignature = parsed.signature
-        savedTop = parsed.top
+  let savedTop = pcHomeCache.scrollTop
+  let savedSignature = pcHomeCache.listSignature
+  if (savedTop <= 0) {
+    try {
+      const raw = window.sessionStorage.getItem(pcHomeScrollStorageKey)
+      if (raw) {
+        const parsed = JSON.parse(raw) as { signature?: string; top?: number }
+        if (typeof parsed.signature === 'string' && typeof parsed.top === 'number') {
+          savedSignature = parsed.signature
+          savedTop = parsed.top
+        }
       }
-    }
-  } catch {
-    return
-  }
-  // 仅当返回时的筛选条件与离开时一致才恢复，避免把滚动带到别的筛选结果上
-  if (savedTop <= 0 || savedSignature !== desktopHomeStateSignature()) return
-
-  let attempts = 0
-  const apply = () => {
-    const maxTop = Math.max(0, document.documentElement.scrollHeight - window.innerHeight)
-    if (savedTop <= maxTop) {
-      window.scrollTo({ top: savedTop })
+    } catch {
       return
     }
-    // 首页无限滚动分页：已渲染高度不足时继续加载一页后重试，尽量恢复到位
-    if (attempts < 5 && hasMoreListings.value && !loadingMore.value) {
-      attempts += 1
-      void loadListingsPage(false).then(() => requestAnimationFrame(apply))
-    } else {
-      window.scrollTo({ top: maxTop })
-    }
   }
+  if (savedTop <= 0 || savedSignature !== desktopHomeStateSignature()) return
+
+  const apply = () => {
+    window.scrollTo({ top: savedTop, behavior: 'instant' })
+  }
+  apply()
   requestAnimationFrame(apply)
 }
 
+function handleScroll() {
+  if (window.scrollY > 0) {
+    pcHomeCache.saveScrollTop(window.scrollY)
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll, { passive: true })
+  if (restored) {
+    restorePcHomeScroll()
+  }
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+
 onBeforeRouteLeave(() => {
   savePcHomeScroll()
 })
 
 syncHomeQuery()
-loadHome()
+const restored = restoreFromCache()
+if (!restored) {
+  loadHome()
+}
 </script>
 
 <template>
diff --git a/frontend/src/features/listings/views/MobileHomeView.vue b/frontend/src/features/listings/views/MobileHomeView.vue
index 7579491..7020f08 100644
--- a/frontend/src/features/listings/views/MobileHomeView.vue
+++ b/frontend/src/features/listings/views/MobileHomeView.vue
@@ -368,13 +368,6 @@ function restoreScrollPosition() {
 }
 
 onMounted(() => {
-  const restoredList = restoreFromCache()
-  if (!restoredList) {
-    loadListings()
-  }
-  if (!restoreHomeConfigFromCache()) {
-    loadHomeConfig()
-  }
   if (restoredList) {
     restoreScrollPosition()
   }
@@ -811,6 +804,15 @@ function getItemResourcePreview(item: Listing) {
 }
 
 syncMobileHomeQuery()
+
+// 同步恢复列表和配置快照，确保首帧 DOM 即包含完整卡片列表，避免高度塌陷和滚动闪跳
+const restoredList = restoreFromCache()
+if (!restoredList) {
+  loadListings()
+}
+if (!restoreHomeConfigFromCache()) {
+  loadHomeConfig()
+}
 </script>
 
 <template>
diff --git a/frontend/src/features/listings/views/MobileListingDetailView.vue b/frontend/src/features/listings/views/MobileListingDetailView.vue
index 07b9f77..901630b 100644
--- a/frontend/src/features/listings/views/MobileListingDetailView.vue
+++ b/frontend/src/features/listings/views/MobileListingDetailView.vue
@@ -3,6 +3,7 @@ import { readError } from '@/shared/utils/error'
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { showToast, showDialog } from 'vant'
+import { goBackOrHome } from '@/shared/utils/routerBack'
 
 import { fetchListing, type Listing } from '@/features/listings/api/listings'
 import { useListingCollections } from '@/features/listings/composables/useListingCollections'
@@ -387,13 +388,17 @@ function handleToggleFavorite() {
   const added = toggleFavorite(listing.value)
   showToast({ message: added ? '已收藏账号' : '已取消收藏', icon: added ? 'star' : 'success' })
 }
+
+function goBack() {
+  goBackOrHome(router)
+}
 </script>
 
 <template>
   <main class="mobile-detail">
     <!-- 顶部导航 -->
     <header class="page-header">
-      <button class="back-btn" @click="router.back()">
+      <button class="back-btn" @click="goBack">
         <van-icon name="arrow-left" :size="20" />
       </button>
       <h1>账号详情</h1>
diff --git a/frontend/src/stores/pcHomeCache.ts b/frontend/src/stores/pcHomeCache.ts
new file mode 100644
index 0000000..cddfe79
--- /dev/null
+++ b/frontend/src/stores/pcHomeCache.ts
@@ -0,0 +1,92 @@
+import { defineStore } from 'pinia'
+
+import {
+  defaultAWRecycleConfig,
+  defaultCooperationFeedbackConfig,
+  defaultHomeAnnouncements,
+  defaultHomeBanners,
+  type AWRecycleConfig,
+  type CooperationFeedbackConfig,
+  type HomeBannerSlide,
+} from '@/features/listings/api/homeConfig'
+import {
+  emptyListingPublishOptions,
+  type ListingPublishOptions,
+} from '@/features/listings/api/listingOptions'
+import type { Listing } from '@/features/listings/api/listings'
+
+export interface PcHomeListSnapshot {
+  signature: string
+  listings: Listing[]
+  totalListings: number
+  zoneCounts: Record<string, number>
+  currentPage: number
+  hasMoreListings: boolean
+}
+
+export interface PcHomeConfigSnapshot {
+  announcements: string[]
+  banners: HomeBannerSlide[]
+  awRecycle: AWRecycleConfig
+  cooperationFeedback: CooperationFeedbackConfig
+  publishOptions: ListingPublishOptions
+}
+
+/** PC端首页列表/配置/滚动缓存：与页面实例解耦，从详情页返回时可无缝秒级恢复，避免回顶闪烁 */
+export const usePcHomeCacheStore = defineStore('pcHomeCache', {
+  state: () => ({
+    listSignature: '',
+    listings: [] as Listing[],
+    totalListings: 0,
+    zoneCounts: {} as Record<string, number>,
+    currentPage: 1,
+    hasMoreListings: true,
+    scrollTop: 0,
+    announcements: [...defaultHomeAnnouncements] as string[],
+    banners: defaultHomeBanners.map(slide => ({ ...slide })) as HomeBannerSlide[],
+    awRecycle: { ...defaultAWRecycleConfig } as AWRecycleConfig,
+    cooperationFeedback: { ...defaultCooperationFeedbackConfig } as CooperationFeedbackConfig,
+    publishOptions: { ...emptyListingPublishOptions } as ListingPublishOptions,
+    homeConfigLoaded: false,
+  }),
+  getters: {
+    hasListSnapshot(state): boolean {
+      return state.listSignature !== '' && state.listings.length > 0
+    },
+  },
+  actions: {
+    matchList(signature: string): boolean {
+      return (
+        this.listSignature !== '' && this.listSignature === signature && this.listings.length > 0
+      )
+    },
+    saveList(payload: PcHomeListSnapshot) {
+      this.listSignature = payload.signature
+      this.listings = payload.listings
+      this.totalListings = payload.totalListings
+      this.zoneCounts = payload.zoneCounts
+      this.currentPage = payload.currentPage
+      this.hasMoreListings = payload.hasMoreListings
+    },
+    saveScrollTop(top: number) {
+      this.scrollTop = Math.max(0, top)
+    },
+    saveHomeConfig(payload: PcHomeConfigSnapshot) {
+      this.announcements = payload.announcements
+      this.banners = payload.banners
+      this.awRecycle = payload.awRecycle
+      this.cooperationFeedback = payload.cooperationFeedback
+      this.publishOptions = payload.publishOptions
+      this.homeConfigLoaded = true
+    },
+    clearList() {
+      this.listSignature = ''
+      this.listings = []
+      this.totalListings = 0
+      this.zoneCounts = {}
+      this.currentPage = 1
+      this.hasMoreListings = true
+      this.scrollTop = 0
+    },
+  },
+})