修复 H5 嵌入小程序导航栏冲突

- 识别微信小程序 web-view 宿主环境
- 宿主导航存在时隐藏 H5 自绘返回与页面标题
- 收回详情、搜索、讲解列表页面顶部预留空间

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/explain/ExplainHallSelect.vue

@@ -1,6 +1,6 @@
 <template>
-  <view class="explain-hall-select">
-    <view class="explain-page-header">
+  <view class="explain-hall-select" :class="{ 'host-navigation': shouldUseHostNavigation }">
+    <view v-if="!shouldUseHostNavigation" class="explain-page-header">
       <view class="header-back" @tap="handleBack">
         <text class="header-back-icon">‹</text>
         <text class="header-back-text">返回</text>
@@ -153,6 +153,7 @@ import { computed, ref } from 'vue'
 import {
   EXPLAIN_UNIT_PREVIEW_FALLBACK
 } from '@/utils/explainUnitPreviews'
+import { isEmbeddedInWechatMiniProgram } from '@/utils/hostEnvironment'
 
 export interface ExplainHallSelectItem {
   id: string
@@ -239,6 +240,7 @@ const hallPreviewMap: Record<string, string> = {
 }
 
 const filteredHalls = computed(() => props.halls)
+const shouldUseHostNavigation = computed(() => isEmbeddedInWechatMiniProgram())
 const headerTitle = computed(() => {
   if (props.stage === 'unit') return props.selectedHallName || '选择业务单元'
   if (props.stage === 'stop') return props.selectedBusinessUnitName || '选择讲解点'
@@ -356,6 +358,14 @@ const handleBack = () => {
   padding-bottom: 0;
 }
 
+.explain-hall-select.host-navigation .explain-scroll {
+  padding-top: 12px;
+}
+
+.explain-hall-select.host-navigation .explain-scroll.hall-stage {
+  padding-top: 12px;
+}
+
 .state-title,
 .state-desc,
 .hall-name,

src/components/navigation/GuidePageFrame.vue

@@ -1,28 +1,35 @@
 <template>
   <view
     class="guide-page-frame"
-    :class="[`variant-${variant}`, { 'no-top-tabs': !showTopTabs }]"
+    :class="[
+      `variant-${variant}`,
+      {
+        'no-top-tabs': !effectiveShowTopTabs,
+        'no-frame-header': !hasFrameHeader
+      }
+    ]"
+    :style="frameStyle"
   >
     <GuideTopTabs
-      v-if="showTopTabs"
+      v-if="effectiveShowTopTabs"
       :active-tab="activeTab"
       :variant="topTabsVariant"
       :top="topTabsTop"
       @tab-change="handleTabChange"
     />
     <view
-      v-if="showBack || showCancel"
+      v-if="effectiveShowBack || effectiveShowCancel"
       class="guide-page-frame-actions"
     >
       <view
-        v-if="showBack"
+        v-if="effectiveShowBack"
         class="frame-action frame-action-back"
         @tap.stop="handleBackTap"
       >
         <text class="frame-action-text">{{ backLabel }}</text>
       </view>
       <view
-        v-if="showCancel"
+        v-if="effectiveShowCancel"
         class="frame-action frame-action-cancel"
         @tap.stop="handleCancelTap"
       >
@@ -43,12 +50,14 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import GuideTopTabs from '@/components/navigation/GuideTopTabs.vue'
 import GlobalAudioPlayerHost from '@/components/audio/GlobalAudioPlayerHost.vue'
 import type { AudioDisplayMode } from '@/components/audio/AudioPlayer.vue'
 import type { GuideTopTab } from '@/utils/guideTopTabs'
+import { isEmbeddedInWechatMiniProgram } from '@/utils/hostEnvironment'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   activeTab?: GuideTopTab
   variant?: 'overlay' | 'static'
   topTabsVariant?: 'underline' | 'segmented'
@@ -86,6 +95,18 @@ const emit = defineEmits<{
   cancel: []
 }>()
 
+const shouldUseHostNavigation = computed(() => isEmbeddedInWechatMiniProgram())
+const effectiveShowTopTabs = computed(() => props.showTopTabs && !shouldUseHostNavigation.value)
+const effectiveShowBack = computed(() => props.showBack && !shouldUseHostNavigation.value)
+const effectiveShowCancel = computed(() => props.showCancel && !shouldUseHostNavigation.value)
+const hasFrameHeader = computed(() => (
+  effectiveShowTopTabs.value || effectiveShowBack.value || effectiveShowCancel.value
+))
+const frameStyle = computed(() => ({
+  '--guide-page-top-offset': shouldUseHostNavigation.value ? '0px' : '44px',
+  '--guide-page-detail-top-padding': shouldUseHostNavigation.value ? '24px' : '84px'
+}))
+
 const handleTabChange = (tab: GuideTopTab) => {
   emit('tabChange', tab)
 }
@@ -123,11 +144,11 @@ const handleCancelTap = () => {
 }
 
 .variant-static .guide-page-frame-body {
-  top: 44px;
+  top: var(--guide-page-top-offset, 44px);
   background: var(--museum-bg-light);
 }
 
-.variant-static.no-top-tabs .guide-page-frame-body {
+.variant-static.no-frame-header .guide-page-frame-body {
   top: 0;
 }