优化详情返回首页停留

frontend/src/App.vue

@@ -8,6 +8,9 @@ import InAppBrowserPrompt from './components/InAppBrowserPrompt.vue'
 import AdminLayout from './layouts/AdminLayout.vue'
 import AppLayout from './layouts/AppLayout.vue'
 
+/** 移动端从详情返回时保留列表状态与滚动位置 */
+const mobileKeepAliveIncludes = ['MobileHomeView']
+
 const route = useRoute()
 const layout = computed(() => {
   if (route.path === '/m' || route.path.startsWith('/m/')) {
@@ -23,7 +26,11 @@ const layout = computed(() => {
     <AdminLayout v-if="layout === 'admin'">
       <RouterView />
     </AdminLayout>
-    <RouterView v-else-if="layout === 'blank'" />
+    <RouterView v-else-if="layout === 'blank'" v-slot="{ Component }">
+      <KeepAlive :include="mobileKeepAliveIncludes" :max="5">
+        <component :is="Component" />
+      </KeepAlive>
+    </RouterView>
     <AppLayout v-else>
       <RouterView />
     </AppLayout>

frontend/src/features/listings/views/MobileHomeView.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+  computed,
+  nextTick,
+  onActivated,
+  onBeforeUnmount,
+  onDeactivated,
+  onMounted,
+  ref,
+  watch,
+} from 'vue'
 import { RouterLink, useRoute, useRouter } from 'vue-router'
 import { showToast } from 'vant'
 import MobileBottomNav from '@/components/MobileBottomNav.vue'
-
 import { ensureSupportChat } from '@/features/chats/api/chats'
 import { formatCent, formatMoney } from '@/shared/utils/money'
 import {
@@ -52,6 +60,8 @@ import {
 } from '@/shared/utils/listingDisplay'
 import { useSessionStore } from '@/stores/session'
 
+defineOptions({ name: 'MobileHomeView' })
+
 const router = useRouter()
 const route = useRoute()
 const session = useSessionStore()
@@ -77,8 +87,12 @@ const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners)
 const supportLoading = ref(false)
 const showBackTop = ref(false)
 const mobilePageSize = 10
+/** KeepAlive 缓存期间为 false，避免详情页路由变化误触发首页筛选/刷新 */
+const pageActive = ref(true)
 let listingRequestSeq = 0
 let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null
+let savedScrollY = 0
+let homeConfigLoaded = false
 
 const sortOptions = [
   { key: 'recommended', label: '综合推荐' },
@@ -287,20 +301,76 @@ const visibleZoneOptions = computed(() =>
 
 applyRouteQueryToMobileState()
 
-onMounted(() => {
-  loadListings()
-  loadHomeConfig()
+function isMobileHomeRoute() {
+  return (
+    route.name === 'mobile-home' ||
+    route.name === 'mobile-listings' ||
+    route.path === '/m' ||
+    route.path === '/m/listings'
+  )
+}
+
+function bindScrollListener() {
   window.addEventListener('scroll', handleWindowScroll, { passive: true })
+}
+
+function unbindScrollListener() {
+  window.removeEventListener('scroll', handleWindowScroll)
+}
+
+function restoreScrollPosition() {
+  const top = savedScrollY
+  const apply = () => window.scrollTo({ top, left: 0, behavior: 'auto' })
+  apply()
+  // 布局/图片回流后再校正一次，避免回顶
+  nextTick(() => {
+    apply()
+    requestAnimationFrame(() => {
+      apply()
+      handleWindowScroll()
+    })
+  })
+}
+
+onMounted(() => {
+  // 首次进入加载；KeepAlive 返回时走 onActivated，不再整页重拉
+  if (!listings.value.length && !loadFailed.value) {
+    loadListings()
+  }
+  if (!homeConfigLoaded) {
+    loadHomeConfig()
+  }
+})
+
+onActivated(() => {
+  pageActive.value = true
+  bindScrollListener()
+  // 缓存实例仍持有列表数据；只把筛选写回 URL，避免整表重拉
+  if (isMobileHomeRoute()) {
+    syncMobileHomeQuery()
+  }
+  restoreScrollPosition()
+})
+
+onDeactivated(() => {
+  savedScrollY = window.scrollY || window.pageYOffset || 0
+  pageActive.value = false
+  unbindScrollListener()
+  if (searchDebounceTimer) {
+    clearTimeout(searchDebounceTimer)
+    searchDebounceTimer = null
+  }
 })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('scroll', handleWindowScroll)
+  unbindScrollListener()
   if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
 })
 
 watch(
   () => filterQuerySignature(),
   () => {
+    if (!pageActive.value || !isMobileHomeRoute()) return
     syncMobileHomeQuery()
     loadListings(true)
   }
@@ -309,14 +379,17 @@ watch(
 watch(
   () => route.query,
   () => {
+    if (!pageActive.value || !isMobileHomeRoute()) return
     applyRouteQueryToMobileState()
   }
 )
 
 watch(searchValue, () => {
+  if (!pageActive.value || !isMobileHomeRoute()) return
   syncMobileHomeQuery()
   if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
   searchDebounceTimer = setTimeout(() => {
+    if (!pageActive.value || !isMobileHomeRoute()) return
     loadListings(true)
   }, 300)
 })
@@ -362,6 +435,7 @@ async function loadHomeConfig() {
     announcements.value = config.announcements
     bannerSlides.value = config.banners
     publishOptions.value = config.publish_options
+    homeConfigLoaded = true
   } catch {
     announcements.value = defaultHomeAnnouncements
     bannerSlides.value = defaultHomeBanners
@@ -494,15 +568,32 @@ function applyRouteQueryToMobileState() {
   const query = hasHomeQueryValues(route.query, mobileHomeFilterQueryKeys)
     ? route.query
     : storedQuery
-  searchValue.value = readQueryString(query, 'keyword')
-  activeSort.value = readQueryString(query, 'sort') || 'recommended'
-  activeZone.value = readQueryString(query, 'zone') || 'all'
-  selectedFilters.value = normalizeSelectedFilters(
+  const nextSearch = readQueryString(query, 'keyword')
+  const nextSort = readQueryString(query, 'sort') || 'recommended'
+  const nextZone = readQueryString(query, 'zone') || 'all'
+  const nextFilters = normalizeSelectedFilters(
     decodeHomeQueryJson<Record<string, unknown>>(query, 'filters', {})
   )
-  rangeFilters.value = normalizeRangeFilters(
+  const nextRanges = normalizeRangeFilters(
     decodeHomeQueryJson<Record<string, unknown>>(query, 'ranges', {})
   )
+
+  // 内容未变时避免赋值，防止 KeepAlive 激活或路由回写时误触发列表刷新
+  if (
+    searchValue.value === nextSearch &&
+    activeSort.value === nextSort &&
+    activeZone.value === nextZone &&
+    JSON.stringify(selectedFilters.value) === JSON.stringify(nextFilters) &&
+    JSON.stringify(rangeFilters.value) === JSON.stringify(nextRanges)
+  ) {
+    return
+  }
+
+  searchValue.value = nextSearch
+  activeSort.value = nextSort
+  activeZone.value = nextZone
+  selectedFilters.value = nextFilters
+  rangeFilters.value = nextRanges
 }
 
 function syncMobileHomeQuery() {

frontend/src/router/index.ts

@@ -14,6 +14,15 @@ import { sellerRoutes } from './sellerRoutes'
 const router = createRouter({
   history: createWebHistory(),
   routes: [...adminRoutes, ...mobileRoutes, ...publicRoutes, ...accountRoutes, ...sellerRoutes],
+  scrollBehavior(to, _from, savedPosition) {
+    // 浏览器前进/后退优先用历史滚动位置
+    if (savedPosition) return savedPosition
+    // 移动端首页由 KeepAlive + 组件内自行恢复滚动，避免被强制拉回顶部
+    if (to.name === 'mobile-home' || to.name === 'mobile-listings') {
+      return false
+    }
+    return { left: 0, top: 0 }
+  },
 })
 
 router.beforeEach(async to => {