修复微信内嵌返回层级

src/pages/explain/list.vue

@@ -20,11 +20,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { onLoad, onUnload } from '@dcloudio/uni-app'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
 import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
 import ExplainHallSelect, {
-  type ExplainBusinessUnitSelectItem,
   type ExplainHallSelectItem
 } from '@/components/explain/ExplainHallSelect.vue'
 import {
@@ -69,53 +68,49 @@ const buildExplainHallItems = (
 
 const shouldUseHostNavigation = computed(() => isEmbeddedInWechatMiniProgram())
 
-const explainBusinessUnitItems = computed<ExplainBusinessUnitSelectItem[]>(() => (
-  []))
-
-
-type ExplainHistoryState = {
-  museumExplainList?: boolean
+type ExplainListHistoryState = {
+  museumGuidePage?: 'explain-list'
+  [key: string]: unknown
 }
 
-let syncingExplainHistory = false
-let applyingExplainHistory = false
+let explainListHistoryPushed = false
+let returningFromExplainListHistory = false
 
-const currentExplainHistoryState = (): ExplainHistoryState => ({
-  museumExplainList: true
-})
+const isExplainListHistoryState = (state: unknown): state is ExplainListHistoryState => (
+  Boolean(
+    state
+    && typeof state === 'object'
+    && (state as ExplainListHistoryState).museumGuidePage === 'explain-list'
+  )
+)
 
-const writeExplainHistoryState = (replace = false) => {
+const pushExplainListHistory = () => {
   if (!shouldUseHostNavigation.value || typeof window === 'undefined') return
+  if (explainListHistoryPushed) return
 
-  syncingExplainHistory = true
-  const state = currentExplainHistoryState()
-  const url = window.location.href
-
-  if (replace) {
-    window.history.replaceState(state, '', url)
-  } else {
-    window.history.pushState(state, '', url)
+  if (isExplainListHistoryState(window.history.state)) {
+    explainListHistoryPushed = true
+    return
   }
 
-  window.setTimeout(() => {
-    syncingExplainHistory = false
-  }, 0)
+  window.history.pushState({
+    ...(window.history.state || {}),
+    museumGuidePage: 'explain-list'
+  } satisfies ExplainListHistoryState, '', window.location.href)
+  explainListHistoryPushed = true
 }
 
-const applyExplainHistoryState = async (state: ExplainHistoryState | null) => {
-  if (!state?.museumExplainList || applyingExplainHistory) return
+const handleExplainListHistoryPopState = (event: PopStateEvent) => {
+  if (!shouldUseHostNavigation.value || returningFromExplainListHistory) return
 
-  applyingExplainHistory = true
-  applyingExplainHistory = false
-}
+  if (isExplainListHistoryState(event.state)) {
+    explainListHistoryPushed = true
+    return
+  }
 
-const handleExplainHistoryPopState = (event: PopStateEvent) => {
-  if (syncingExplainHistory) return
-  void applyExplainHistoryState((event.state || null) as ExplainHistoryState | null)
-}
-
-const replaceExplainStageHistory = () => {
-  writeExplainHistoryState(true)
+  explainListHistoryPushed = false
+  returningFromExplainListHistory = true
+  navigateToGuideTopTab('explain')
 }
 
 const loadExplainHalls = async () => {
@@ -144,21 +139,26 @@ const loadExplainHalls = async () => {
 }
 
 onLoad(() => {
-  replaceExplainStageHistory()
+  pushExplainListHistory()
   void loadExplainHalls()
-
-  if (typeof window !== 'undefined') {
-    window.addEventListener('popstate', handleExplainHistoryPopState)
-  }
 })
 
-onUnload(() => {
-  if (typeof window !== 'undefined') {
-    window.removeEventListener('popstate', handleExplainHistoryPopState)
-  }
+onMounted(() => {
+  if (typeof window === 'undefined') return
+  window.addEventListener('popstate', handleExplainListHistoryPopState)
+})
+
+onUnmounted(() => {
+  if (typeof window === 'undefined') return
+  window.removeEventListener('popstate', handleExplainListHistoryPopState)
 })
 
 const handleBack = () => {
+  if (shouldUseHostNavigation.value) {
+    navigateToGuideTopTab('explain')
+    return
+  }
+
   uni.navigateBack({
     delta: 1,
     fail: () => {

src/pages/index/index.vue

@@ -307,6 +307,7 @@ import {
   isGuideTopTab,
   type GuideTopTab
 } from '@/utils/guideTopTabs'
+import { isEmbeddedInWechatMiniProgram } from '@/utils/hostEnvironment'
 import {
   guideUseCase
 } from '@/usecases/guideUseCase'
@@ -418,7 +419,7 @@ const guideMapShellRef = ref<{
 } | null>(null)
 const homeSearchPanelRef = ref<{
   collapseHomePanel?: () => void
-  resetSearchState?: () => void
+  resetSearchState?: () => Promise<void> | void
   returnToCollapsedAfterDetail?: () => Promise<void>
   restoreResultListScroll?: () => Promise<void>
 } | null>(null)
@@ -430,6 +431,14 @@ let searchTargetFocusRequestId = 0
 let pendingCollapseSearchAfterDetail = false
 let pendingSearchDetailFocusRequest: TargetPoiFocusRequestViewModel | null = null
 
+type PoiSearchOverlayHistoryState = {
+  museumGuideOverlay?: 'poi-search'
+  [key: string]: unknown
+}
+
+let poiSearchHistoryPushed = false
+let removingPoiSearchHistory = false
+
 let launchOverlayFallbackTimer: ReturnType<typeof setTimeout> | null = null
 let launchOverlayFadeTimer: ReturnType<typeof setTimeout> | null = null
 let launchOverlayHideDelayTimer: ReturnType<typeof setTimeout> | null = null
@@ -725,6 +734,87 @@ const syncTopTabToUrl = (tabId: GuideTopTab) => {
   }
 }
 
+const isPoiSearchOverlayHistoryState = (state: unknown): state is PoiSearchOverlayHistoryState => (
+  Boolean(
+    state
+    && typeof state === 'object'
+    && (state as PoiSearchOverlayHistoryState).museumGuideOverlay === 'poi-search'
+  )
+)
+
+const canManagePoiSearchOverlayHistory = () => (
+  typeof window !== 'undefined'
+  && isIndexHashRoute()
+  && isEmbeddedInWechatMiniProgram()
+)
+
+const removePoiSearchOverlayFromCurrentHistoryState = () => {
+  if (!canManagePoiSearchOverlayHistory()) return
+  if (!isPoiSearchOverlayHistoryState(window.history.state)) return
+
+  const nextState = { ...window.history.state }
+  delete nextState.museumGuideOverlay
+  window.history.replaceState(nextState, '', window.location.href)
+}
+
+const pushPoiSearchOverlayHistory = () => {
+  if (!canManagePoiSearchOverlayHistory() || !homeSearchExpanded.value) return
+  if (poiSearchHistoryPushed) return
+
+  if (isPoiSearchOverlayHistoryState(window.history.state)) {
+    poiSearchHistoryPushed = true
+    return
+  }
+
+  window.history.pushState({
+    ...(window.history.state || {}),
+    museumGuideOverlay: 'poi-search'
+  } satisfies PoiSearchOverlayHistoryState, '', window.location.href)
+  poiSearchHistoryPushed = true
+}
+
+const removePoiSearchOverlayHistory = () => {
+  if (!canManagePoiSearchOverlayHistory() || !poiSearchHistoryPushed) return
+
+  if (!isPoiSearchOverlayHistoryState(window.history.state)) {
+    poiSearchHistoryPushed = false
+    return
+  }
+
+  poiSearchHistoryPushed = false
+  removingPoiSearchHistory = true
+  window.history.back()
+}
+
+const collapsePoiSearchAfterHistoryBack = async () => {
+  homeSearchPanelRef.value?.collapseHomePanel?.()
+  await homeSearchPanelRef.value?.resetSearchState?.()
+  clearHomeSearchMapState()
+  selectedGuidePoi.value = null
+  isPoiCardCollapsed.value = false
+  homeSearchExpanded.value = false
+}
+
+const handlePoiSearchHistoryPopState = (event: PopStateEvent) => {
+  if (!canManagePoiSearchOverlayHistory()) return
+
+  if (removingPoiSearchHistory) {
+    removingPoiSearchHistory = false
+    poiSearchHistoryPushed = false
+    if (homeSearchExpanded.value) pushPoiSearchOverlayHistory()
+    return
+  }
+
+  if (!homeSearchExpanded.value) return
+  if (isPoiSearchOverlayHistoryState(event.state)) {
+    poiSearchHistoryPushed = true
+    return
+  }
+
+  poiSearchHistoryPushed = false
+  void collapsePoiSearchAfterHistoryBack()
+}
+
 const loadTopTabData = (tabId: GuideTopTab) => {
   if (tabId === 'explain') {
     void loadExplainHalls()
@@ -786,7 +876,9 @@ onMounted(() => {
   if (typeof window === 'undefined') return
 
   syncTopTabFromHash()
+  removePoiSearchOverlayFromCurrentHistoryState()
   window.addEventListener('hashchange', syncTopTabFromHash)
+  window.addEventListener('popstate', handlePoiSearchHistoryPopState)
 })
 
 onUnmounted(() => {
@@ -800,6 +892,7 @@ onUnmounted(() => {
   if (typeof window === 'undefined') return
 
   window.removeEventListener('hashchange', syncTopTabFromHash)
+  window.removeEventListener('popstate', handlePoiSearchHistoryPopState)
 })
 
 onLoad((options: any = {}) => {
@@ -1412,6 +1505,12 @@ const handleExplainQuickTap = () => {
 
 const handleHomeSearchExpandedChange = (expanded: boolean) => {
   homeSearchExpanded.value = expanded
+  if (expanded) {
+    pushPoiSearchOverlayHistory()
+    return
+  }
+
+  removePoiSearchOverlayHistory()
 }
 
 const clearHomeSearchMapState = () => {

src/utils/guideTopTabs.ts

@@ -1,5 +1,12 @@
 export type GuideTopTab = 'guide' | 'explain'
 export const GUIDE_LOCATION_PREVIEW_STORAGE_KEY = 'museum-guide:last-location-preview-url'
+const HOST_NAVIGATION_QUERY_KEYS = [
+  'embedded',
+  'embed',
+  'host',
+  'weapp',
+  'mini-program'
+]
 
 export const GUIDE_TOP_TABS: Array<{ id: GuideTopTab; label: string }> = [
   { id: 'guide', label: '馆内' },
@@ -10,7 +17,32 @@ export const isGuideTopTab = (value: unknown): value is GuideTopTab => {
   return value === 'guide' || value === 'explain'
 }
 
-export const guideTopTabUrl = (tab: GuideTopTab) => `/pages/index/index?tab=${tab}`
+const getHostNavigationQueryParams = () => {
+  if (typeof window === 'undefined') return new URLSearchParams()
+
+  const searchParams = new URLSearchParams(window.location.search)
+  const hash = window.location.hash || ''
+  const hashQueryStart = hash.indexOf('?')
+  if (hashQueryStart >= 0) {
+    const hashParams = new URLSearchParams(hash.slice(hashQueryStart + 1))
+    hashParams.forEach((value, key) => {
+      if (!searchParams.has(key)) searchParams.set(key, value)
+    })
+  }
+
+  const hostParams = new URLSearchParams()
+  HOST_NAVIGATION_QUERY_KEYS.forEach((key) => {
+    const value = searchParams.get(key)
+    if (value !== null) hostParams.set(key, value)
+  })
+  return hostParams
+}
+
+export const guideTopTabUrl = (tab: GuideTopTab) => {
+  const params = new URLSearchParams({ tab })
+  getHostNavigationQueryParams().forEach((value, key) => params.set(key, value))
+  return `/pages/index/index?${params.toString()}`
+}
 
 export const saveLastGuideLocationPreviewUrl = (url: string) => {
   if (typeof window === 'undefined' || !url) return