chore: solidify guide P1 snapshot

2026-06-11 16:18:57 +08:00
parent a90f63cef0
commit 9790501c3b
32 changed files with 4613 additions and 865 deletions
--- a/src/components/map/ThreeMap.vue
+++ b/src/components/map/ThreeMap.vue
@@ -101,6 +101,24 @@ interface CleanPoi {
  positionGltf?: [number, number, number]
 }

+interface TargetPoiFocusRequest {
+  requestId: number | string
+  poiId: string
+  name?: string
+  floorId: string
+  floorLabel?: string
+  primaryCategoryZh?: string
+  positionGltf?: [number, number, number]
+}
+
+interface TargetPoiFocusResult {
+  requestId: number | string
+  poiId: string
+  floorId: string
+  status: 'focused' | 'missing' | 'error'
+  message?: string
+}
+
 interface FloorPoiData {
  status: string
  floorId: string
@@ -115,17 +133,20 @@ const props = withDefaults(defineProps<{
  initialView?: ViewMode
  showControls?: boolean
  showPoi?: boolean
+  targetFocus?: TargetPoiFocusRequest | null
 }>(), {
  assetBaseUrl: NAV_ASSET_BASE_URL,
  initialFloorId: 'L1',
  initialView: 'overview',
  showControls: true,
-  showPoi: false
+  showPoi: false,
+  targetFocus: null
 })

 const emit = defineEmits<{
  floorChange: [floorId: string]
  poiClick: [poi: CleanPoi]
+  targetFocus: [result: TargetPoiFocusResult]
 }>()

 const containerRef = ref<ContainerRef>(null)
@@ -136,6 +157,7 @@ const loadingMessage = ref('正在读取室内导览资源...')
 const activeView = ref<ViewMode>(props.initialView)
 const currentFloor = ref(props.initialFloorId)
 const selectedPOI = ref<CleanPoi | null>(null)
+const activeFocusPoiId = ref('')
 const floorIndex = ref<FloorIndexItem[]>([])

 const floors = computed<FloorOption[]>(() => (
@@ -146,6 +168,7 @@ const floors = computed<FloorOption[]>(() => (
      label: formatFloorLabel(floor.floorId)
    }))
 ))
+const shouldRenderPoiMarkers = computed(() => props.showPoi || props.showControls || Boolean(props.targetFocus))

 let manifest: CleanNavManifest | null = null
 let scene: THREE.Scene | null = null
@@ -158,6 +181,8 @@ let poiGroup: THREE.Group | null = null
 let animationId = 0
 let resizeObserver: ResizeObserver | null = null
 let isDisposed = false
+let pendingTargetFocus: TargetPoiFocusRequest | null = null
+let targetFocusQueue: Promise<unknown> = Promise.resolve()

 const normalizeBaseUrl = (baseUrl: string) => baseUrl.replace(/\/+$/, '')

@@ -410,7 +435,7 @@ const loadFloor = async (floorId: string) => {
  scene.add(activeModel)
  fitCameraToObject(activeModel)

-  if (props.showPoi || props.showControls) {
+  if (shouldRenderPoiMarkers.value) {
    await loadFloorPOIs(floor)
  }
 }
@@ -463,20 +488,90 @@ const getPoiColor = (category: string) => {
  return colorMap[category] || '#1f2329'
 }

+const getPoiMarkerSize = () => (
+  activeModel
+    ? Math.max(new THREE.Box3().setFromObject(activeModel).getSize(new THREE.Vector3()).length() * 0.012, 2.4)
+    : 3
+)
+
+const setPoiSpriteFocusStyle = (sprite: THREE.Sprite, focused: boolean) => {
+  const baseScale = typeof sprite.userData.baseScale === 'number'
+    ? sprite.userData.baseScale
+    : sprite.scale.x
+  const scale = focused ? baseScale * 1.55 : baseScale
+
+  sprite.scale.set(scale, scale, scale)
+  sprite.renderOrder = focused ? 20 : 10
+  sprite.material.opacity = focused ? 1 : 0.78
+}
+
+const updatePoiMarkerFocus = () => {
+  if (!poiGroup) return
+
+  poiGroup.children.forEach((child) => {
+    if (child instanceof THREE.Sprite) {
+      const poi = child.userData.poi as CleanPoi | undefined
+      setPoiSpriteFocusStyle(child, Boolean(poi && poi.id === activeFocusPoiId.value))
+    }
+  })
+}
+
+const findPoiSprite = (poiId: string) => (
+  poiGroup?.children.find((child): child is THREE.Sprite => (
+    child instanceof THREE.Sprite && (child.userData.poi as CleanPoi | undefined)?.id === poiId
+  ))
+)
+
+const findLoadedPoi = (poiId: string) => (
+  findPoiSprite(poiId)?.userData.poi as CleanPoi | undefined
+)
+
+const createPoiFromFocusRequest = (request: TargetPoiFocusRequest): CleanPoi | null => {
+  if (!request.positionGltf) return null
+
+  return {
+    id: request.poiId,
+    name: request.name || '目标位置',
+    floorId: request.floorId,
+    primaryCategory: 'target_preview',
+    primaryCategoryZh: request.primaryCategoryZh || '位置预览',
+    iconType: 'target_preview',
+    positionGltf: request.positionGltf
+  }
+}
+
+const addFocusMarkerFromRequest = (request: TargetPoiFocusRequest) => {
+  if (!poiGroup || findPoiSprite(request.poiId)) return findLoadedPoi(request.poiId) || null
+
+  const poi = createPoiFromFocusRequest(request)
+  if (!poi?.positionGltf) return null
+
+  const [x, y, z] = poi.positionGltf
+  const markerSize = getPoiMarkerSize()
+  const sprite = new THREE.Sprite(createPoiMaterial(poi))
+  sprite.position.set(x, y + markerSize * 0.5, z)
+  sprite.userData.baseScale = markerSize
+  sprite.userData.poi = poi
+  setPoiSpriteFocusStyle(sprite, poi.id === activeFocusPoiId.value)
+  poiGroup.add(sprite)
+
+  return poi
+}
+
 const loadFloorPOIs = async (floor: FloorIndexItem) => {
  if (!poiGroup) return

  const data = await fetchJson<FloorPoiData>(assetUrl(floor.poiDataAsset))
  const validPois = data.pois.filter((poi) => Array.isArray(poi.positionGltf) && poi.positionGltf.length === 3)
-  const markerSize = activeModel ? Math.max(new THREE.Box3().setFromObject(activeModel).getSize(new THREE.Vector3()).length() * 0.012, 2.4) : 3
+  const markerSize = getPoiMarkerSize()

  validPois.forEach((poi) => {
    const [x, y, z] = poi.positionGltf!
    const sprite = new THREE.Sprite(createPoiMaterial(poi))
    sprite.position.set(x, y + markerSize * 0.5, z)
-    sprite.scale.set(markerSize, markerSize, markerSize)
-    sprite.renderOrder = 10
+    sprite.userData.baseScale = markerSize
    sprite.userData.poi = poi
+    setPoiSpriteFocusStyle(sprite, poi.id === activeFocusPoiId.value)
    poiGroup!.add(sprite)
  })
 }
@@ -495,10 +590,134 @@ const handlePointerDown = (event: PointerEvent) => {

  if (hits[0]?.object.userData.poi) {
    selectedPOI.value = hits[0].object.userData.poi as CleanPoi
+    activeFocusPoiId.value = selectedPOI.value.id
+    updatePoiMarkerFocus()
    emit('poiClick', selectedPOI.value)
  }
 }

+const emitTargetFocus = (
+  request: TargetPoiFocusRequest,
+  status: TargetPoiFocusResult['status'],
+  message?: string
+) => {
+  emit('targetFocus', {
+    requestId: request.requestId,
+    poiId: request.poiId,
+    floorId: request.floorId,
+    status,
+    message
+  })
+}
+
+const clearTargetFocus = () => {
+  pendingTargetFocus = null
+  activeFocusPoiId.value = ''
+  selectedPOI.value = null
+  updatePoiMarkerFocus()
+}
+
+const isSceneReadyForTargetFocus = () => (
+  Boolean(scene && camera && controls && loader && floorIndex.value.length)
+  && !isLoading.value
+  && !loadError.value
+)
+
+const focusCameraOnPoi = (poi: CleanPoi) => {
+  if (!camera || !controls || !poi.positionGltf) return
+
+  const [x, y, z] = poi.positionGltf
+  const target = new THREE.Vector3(x, y, z)
+  const modelSize = activeModel
+    ? new THREE.Box3().setFromObject(activeModel).getSize(new THREE.Vector3())
+    : new THREE.Vector3(80, 80, 80)
+  const maxDim = Math.max(modelSize.x, modelSize.y, modelSize.z, 1)
+  const distance = Math.min(Math.max(maxDim * 0.22, 28), Math.max(maxDim * 0.55, 80))
+  const direction = new THREE.Vector3(0.72, 0.58, 1).normalize()
+
+  camera.position.copy(target).add(direction.multiplyScalar(distance))
+  camera.near = Math.max(0.1, maxDim / 1200)
+  camera.far = Math.max(10000, maxDim * 20)
+  camera.updateProjectionMatrix()
+
+  controls.target.copy(target)
+  controls.minDistance = Math.max(2, maxDim * 0.025)
+  controls.maxDistance = Math.max(20, maxDim * 6)
+  controls.update()
+}
+
+const focusTargetPoi = async (request: TargetPoiFocusRequest) => {
+  if (!request.poiId || !request.floorId) {
+    emitTargetFocus(request, 'missing', '目标位置数据不完整')
+    return false
+  }
+
+  const floor = floorIndex.value.find((item) => item.floorId === request.floorId)
+  if (!floor) {
+    emitTargetFocus(request, 'missing', '目标楼层不在当前三维资源中')
+    return false
+  }
+
+  activeFocusPoiId.value = request.poiId
+
+  try {
+    if (activeView.value !== 'floor' || currentFloor.value !== request.floorId) {
+      isLoading.value = true
+      loadError.value = false
+      await loadFloor(request.floorId)
+      isLoading.value = false
+      emit('floorChange', request.floorId)
+    } else if (shouldRenderPoiMarkers.value && poiGroup && poiGroup.children.length === 0) {
+      await loadFloorPOIs(floor)
+    }
+
+    const poi = findLoadedPoi(request.poiId) || addFocusMarkerFromRequest(request) || createPoiFromFocusRequest(request)
+
+    if (!poi?.positionGltf) {
+      selectedPOI.value = null
+      updatePoiMarkerFocus()
+      emitTargetFocus(request, 'missing', '目标暂无三维坐标')
+      return false
+    }
+
+    selectedPOI.value = poi
+    updatePoiMarkerFocus()
+    focusCameraOnPoi(poi)
+    emitTargetFocus(request, 'focused')
+    return true
+  } catch (error) {
+    console.error('目标 POI 聚焦失败:', error)
+    loadError.value = true
+    isLoading.value = false
+    setProgress(0, error instanceof Error ? error.message : '目标位置聚焦失败')
+    emitTargetFocus(request, 'error', error instanceof Error ? error.message : '目标位置聚焦失败')
+    return false
+  }
+}
+
+const queueTargetFocus = (request: TargetPoiFocusRequest | null) => {
+  if (!request) {
+    clearTargetFocus()
+    return
+  }
+
+  pendingTargetFocus = request
+
+  if (!isSceneReadyForTargetFocus()) return
+
+  const nextRequest = pendingTargetFocus
+  if (!nextRequest) return
+
+  pendingTargetFocus = null
+  targetFocusQueue = targetFocusQueue
+    .then(() => focusTargetPoi(nextRequest))
+    .finally(() => {
+      if (pendingTargetFocus) {
+        queueTargetFocus(pendingTargetFocus)
+      }
+    })
+}
+
 const loadCleanPackage = async () => {
  setProgress(8, '正在读取室内导览资源...')
  manifest = await fetchJson<CleanNavManifest>(assetUrl('app_nav_manifest.json'))
@@ -537,6 +756,7 @@ const init3DScene = async () => {

    setProgress(100, '室内三维模型加载完成')
    isLoading.value = false
+    queueTargetFocus(pendingTargetFocus || props.targetFocus || null)
  } catch (error) {
    console.error('室内 3D clean package 加载失败:', error)
    loadError.value = true
@@ -564,6 +784,7 @@ const showOverview = async () => {
  try {
    isLoading.value = true
    loadError.value = false
+    activeFocusPoiId.value = ''
    await loadOverview()
    isLoading.value = false
  } catch (error) {
@@ -613,8 +834,13 @@ const disposeScene = () => {
 defineExpose({
  switchFloor: handleFloorChange,
  showOverview,
+  focusTargetPoi: (request: TargetPoiFocusRequest) => {
+    queueTargetFocus(request)
+  },
  clearNavigation: () => {
+    activeFocusPoiId.value = ''
    selectedPOI.value = null
+    updatePoiMarkerFocus()
  }
 })

@@ -622,6 +848,13 @@ watch(() => props.assetBaseUrl, () => {
  init3DScene()
 })

+watch(() => props.targetFocus, (request) => {
+  queueTargetFocus(request || null)
+}, {
+  deep: true,
+  immediate: true
+})
+
 onMounted(() => {
  init3DScene()
 })
--- a/src/components/navigation/GuideMapShell.vue
+++ b/src/components/navigation/GuideMapShell.vue
@@ -7,7 +7,12 @@
          ref="threeMapRef"
          class="indoor-three-map"
          :asset-base-url="indoorAssetBaseUrl"
+          :initial-floor-id="activeFloorId"
+          :initial-view="indoorInitialView"
          :show-controls="false"
+          :show-poi="shouldShowIndoorPois"
+          :target-focus="targetFocusRequest"
+          @target-focus="handleTargetFocus"
        />
        <!-- #endif -->
        <!-- #ifndef H5 -->
@@ -77,6 +82,27 @@

    <slot name="overlay"></slot>

+    <view
+      v-if="mapType === 'indoor' && showIndoorViewToggle"
+      class="indoor-view-toggle"
+      :style="indoorViewToggleStyle"
+    >
+      <view
+        class="indoor-view-item"
+        :class="{ active: indoorView === 'overview' }"
+        @tap="handleIndoorViewChange('overview')"
+      >
+        <text class="indoor-view-label">全馆</text>
+      </view>
+      <view
+        class="indoor-view-item"
+        :class="{ active: indoorView === 'floor' }"
+        @tap="handleIndoorViewChange('floor')"
+      >
+        <text class="indoor-view-label">楼层</text>
+      </view>
+    </view>
+
    <view v-if="showFloor" class="floor-switcher" :style="floorSwitcherStyle">
      <view
        v-for="floor in floors"
@@ -116,16 +142,40 @@ import {
  navFloorIdFromLabel
 } from '@/services/navAssets'

+interface TargetPoiFocusRequest {
+  requestId: number | string
+  poiId: string
+  name?: string
+  floorId: string
+  floorLabel?: string
+  primaryCategoryZh?: string
+  positionGltf?: [number, number, number]
+}
+
+interface TargetPoiFocusResult {
+  requestId: number | string
+  poiId: string
+  floorId: string
+  status: 'focused' | 'missing' | 'error'
+  message?: string
+}
+
+type IndoorViewMode = 'overview' | 'floor'
+
 const props = withDefaults(defineProps<{
  searchText?: string
  activeMode?: '2d' | '3d'
  activeFloor?: string
+  indoorView?: IndoorViewMode
+  indoorInitialView?: IndoorViewMode
  searchTop?: string
  floorTop?: string
+  indoorViewToggleTop?: string
  toolsTop?: string
  tools?: string[]
  showSearch?: boolean
  showFloor?: boolean
+  showIndoorViewToggle?: boolean
  modeTop?: string
  modeLayout?: 'full' | 'status'
  modeStatus?: string
@@ -134,16 +184,21 @@ const props = withDefaults(defineProps<{
  outdoorVariant?: 'home' | 'entrance'
  indoorAssetBaseUrl?: string
  dimmed?: boolean
+  targetFocusRequest?: TargetPoiFocusRequest | null
 }>(), {
  searchText: '搜索设施、展厅、入口',
  activeMode: '3d',
  activeFloor: '1F',
+  indoorView: 'floor',
+  indoorInitialView: 'floor',
  searchTop: '16px',
  floorTop: '164px',
+  indoorViewToggleTop: '154px',
  toolsTop: '406px',
  tools: () => [] as string[],
  showSearch: true,
  showFloor: true,
+  showIndoorViewToggle: false,
  modeTop: '60px',
  modeLayout: 'full',
  modeStatus: '',
@@ -151,7 +206,8 @@ const props = withDefaults(defineProps<{
  mapType: 'indoor',
  outdoorVariant: 'home',
  indoorAssetBaseUrl: NAV_ASSET_BASE_URL,
-  dimmed: false
+  dimmed: false,
+  targetFocusRequest: null
 })

 const emit = defineEmits<{
@@ -159,11 +215,18 @@ const emit = defineEmits<{
  modeChange: [mode: '2d' | '3d']
  floorChange: [floor: string]
  toolClick: [tool: string]
+  indoorViewChange: [view: IndoorViewMode]
+  targetFocus: [result: TargetPoiFocusResult]
 }>()

-const threeMapRef = ref<{ switchFloor?: (floorId: string) => Promise<void> | void } | null>(null)
+const threeMapRef = ref<{
+  switchFloor?: (floorId: string) => Promise<void> | void
+  showOverview?: () => Promise<void> | void
+} | null>(null)
 const floors = NAV_FLOOR_OPTIONS.map((floor) => floor.label)

+const activeFloorId = computed(() => navFloorIdFromLabel(props.activeFloor))
+
 const searchFieldStyle = computed(() => ({
  top: props.searchTop
 }))
@@ -172,6 +235,10 @@ const floorSwitcherStyle = computed(() => ({
  top: props.floorTop
 }))

+const indoorViewToggleStyle = computed(() => ({
+  top: props.indoorViewToggleTop
+}))
+
 const modeRowStyle = computed(() => ({
  top: props.modeTop
 }))
@@ -180,6 +247,8 @@ const toolStackStyle = computed(() => ({
  top: props.toolsTop
 }))

+const shouldShowIndoorPois = computed(() => Boolean(props.targetFocusRequest))
+
 const handleSearchTap = () => {
  emit('searchTap')
 }
@@ -191,12 +260,27 @@ const handleModeChange = (mode: '2d' | '3d') => {
 const handleFloorChange = (floor: string) => {
  const floorId = navFloorIdFromLabel(floor)
  void threeMapRef.value?.switchFloor?.(floorId)
+  emit('indoorViewChange', 'floor')
  emit('floorChange', floor)
 }

+const handleIndoorViewChange = (view: IndoorViewMode) => {
+  if (view === 'overview') {
+    void threeMapRef.value?.showOverview?.()
+  } else {
+    void threeMapRef.value?.switchFloor?.(activeFloorId.value)
+  }
+
+  emit('indoorViewChange', view)
+}
+
 const handleToolClick = (tool: string) => {
  emit('toolClick', tool)
 }
+
+const handleTargetFocus = (result: TargetPoiFocusResult) => {
+  emit('targetFocus', result)
+}
 </script>

 <style scoped lang="scss">
@@ -434,6 +518,42 @@ const handleToolClick = (tool: string) => {
  z-index: 35;
 }

+.indoor-view-toggle {
+  position: absolute;
+  right: 16px;
+  width: 58px;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid #dde5df;
+  border-radius: 10px;
+  box-shadow: 0 8px 18px rgba(110, 127, 115, 0.12);
+  z-index: 36;
+}
+
+.indoor-view-item {
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  color: #59645d;
+}
+
+.indoor-view-item.active {
+  background: var(--museum-accent);
+  color: #ffffff;
+  box-shadow: 0 6px 12px rgba(82, 107, 91, 0.18);
+}
+
+.indoor-view-label {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+
 .floor-item {
  position: relative;
  height: 36px;
--- a/src/components/navigation/GuidePageFrame.vue
+++ b/src/components/navigation/GuidePageFrame.vue
@@ -0,0 +1,144 @@
+<template>
+  <view class="guide-page-frame" :class="`variant-${variant}`">
+    <GuideTopTabs
+      :active-tab="activeTab"
+      @tab-change="handleTabChange"
+    />
+    <view
+      v-if="showBack || showCancel"
+      class="guide-page-frame-actions"
+    >
+      <view
+        v-if="showBack"
+        class="frame-action frame-action-back"
+        @tap.stop="handleBackTap"
+      >
+        <text class="frame-action-text">{{ backLabel }}</text>
+      </view>
+      <view
+        v-if="showCancel"
+        class="frame-action frame-action-cancel"
+        @tap.stop="handleCancelTap"
+      >
+        <text class="frame-action-text">{{ cancelLabel }}</text>
+      </view>
+    </view>
+    <view class="guide-page-frame-body">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import GuideTopTabs from '@/components/navigation/GuideTopTabs.vue'
+import type { GuideTopTab } from '@/utils/guideTopTabs'
+
+withDefaults(defineProps<{
+  activeTab?: GuideTopTab
+  variant?: 'overlay' | 'static'
+  showBack?: boolean
+  showCancel?: boolean
+  backLabel?: string
+  cancelLabel?: string
+}>(), {
+  activeTab: 'guide',
+  variant: 'overlay',
+  showBack: false,
+  showCancel: false,
+  backLabel: '返回',
+  cancelLabel: '取消'
+})
+
+const emit = defineEmits<{
+  tabChange: [tab: GuideTopTab]
+  back: []
+  cancel: []
+}>()
+
+const handleTabChange = (tab: GuideTopTab) => {
+  emit('tabChange', tab)
+}
+
+const handleBackTap = () => {
+  emit('back')
+}
+
+const handleCancelTap = () => {
+  emit('cancel')
+}
+</script>
+
+<style scoped lang="scss">
+.guide-page-frame {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+  isolation: isolate;
+  background: var(--museum-bg-map);
+}
+
+.guide-page-frame-body {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.variant-overlay .guide-page-frame-body {
+  top: 0;
+}
+
+.variant-static .guide-page-frame-body {
+  top: 44px;
+  background: var(--museum-bg-light);
+}
+
+.guide-page-frame-actions {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 44px;
+  z-index: 2010;
+  pointer-events: none;
+}
+
+.frame-action {
+  position: absolute;
+  top: 0;
+  min-width: 54px;
+  height: 44px;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+
+.frame-action-back {
+  left: 0;
+  justify-content: flex-start;
+}
+
+.frame-action-cancel {
+  right: 0;
+  justify-content: flex-end;
+}
+
+.frame-action-text {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  color: #1f2329;
+}
+
+@media (min-width: 768px) {
+  .guide-page-frame {
+    max-width: 430px;
+    margin: 0 auto;
+  }
+}
+</style>
--- a/src/components/navigation/GuideTopTabs.vue
+++ b/src/components/navigation/GuideTopTabs.vue
@@ -0,0 +1,90 @@
+<template>
+  <view class="guide-top-tabs">
+    <view
+      v-for="tab in GUIDE_TOP_TABS"
+      :key="tab.id"
+      class="guide-top-tab"
+      :class="{ active: activeTab === tab.id }"
+      @tap="handleTabTap(tab.id)"
+    >
+      <view v-if="activeTab === tab.id" class="guide-top-tab-indicator"></view>
+      <text class="guide-top-tab-label">{{ tab.label }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import {
+  GUIDE_TOP_TABS,
+  type GuideTopTab
+} from '@/utils/guideTopTabs'
+
+withDefaults(defineProps<{
+  activeTab?: GuideTopTab
+}>(), {
+  activeTab: 'guide'
+})
+
+const emit = defineEmits<{
+  tabChange: [tab: GuideTopTab]
+}>()
+
+const handleTabTap = (tab: GuideTopTab) => {
+  emit('tabChange', tab)
+}
+</script>
+
+<style scoped lang="scss">
+.guide-top-tabs {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.96);
+  border-bottom: 1px solid #eceee8;
+  box-sizing: border-box;
+  z-index: 2000;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  will-change: transform;
+}
+
+.guide-top-tab {
+  position: relative;
+  width: 75px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.guide-top-tab-label {
+  position: relative;
+  z-index: 2;
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 400;
+  color: #6b7280;
+}
+
+.guide-top-tab.active .guide-top-tab-label {
+  font-weight: 500;
+  color: #1f2329;
+}
+
+.guide-top-tab-indicator {
+  position: absolute;
+  left: 50%;
+  top: 26px;
+  width: 39px;
+  height: 6px;
+  background: var(--museum-accent);
+  border-radius: 3px;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+</style>
--- a/src/components/navigation/LocationPreview.vue
+++ b/src/components/navigation/LocationPreview.vue
@@ -0,0 +1,212 @@
+<template>
+  <view class="location-preview">
+    <view class="preview-header">
+      <text class="preview-title">位置预览</text>
+      <text class="preview-summary">{{ summary }}</text>
+    </view>
+
+    <view class="preview-steps">
+      <view
+        v-for="(step, index) in steps"
+        :key="step.id"
+        class="preview-step"
+      >
+        <view
+          class="step-dot"
+          :class="{ target: index === steps.length - 1 }"
+        ></view>
+        <view v-if="index === 0" class="step-connector"></view>
+        <text class="step-text">{{ step.text }}</text>
+      </view>
+    </view>
+
+    <view class="action-row">
+      <view class="action-btn secondary" @tap="emit('viewOutdoorMap')">
+        <text class="action-text">查看室外地图</text>
+      </view>
+      <view class="action-btn primary" @tap="handleShowTargetLocation">
+        <text class="action-text">查看目标位置</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface PreviewStep {
+  id: string
+  text: string
+}
+
+interface PreviewTargetLocation {
+  poiId: string
+  name: string
+  floorId: string
+  floorLabel?: string
+  primaryCategoryZh?: string
+  positionGltf?: [number, number, number]
+}
+
+const props = defineProps<{
+  summary: string
+  steps: PreviewStep[]
+  targetLocation?: PreviewTargetLocation | null
+}>()
+
+const emit = defineEmits<{
+  viewOutdoorMap: []
+  showTargetLocation: [target: PreviewTargetLocation | null]
+}>()
+
+const handleShowTargetLocation = () => {
+  emit('showTargetLocation', props.targetLocation || null)
+}
+</script>
+
+<style scoped lang="scss">
+.location-preview {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(env(safe-area-inset-bottom) + 34px);
+  height: 222px;
+  padding: 22px 20px 16px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border: 0;
+  border-radius: 20px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
+  z-index: 45;
+}
+
+.preview-header {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.preview-title {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+  color: #000000;
+}
+
+.preview-summary {
+  flex: 1;
+  min-width: 0;
+  text-align: right;
+  font-size: 12px;
+  line-height: 20px;
+  color: #6b7178;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.preview-steps {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
+}
+
+.preview-step {
+  position: relative;
+  min-height: 30px;
+  display: flex;
+  align-items: center;
+  padding-left: 24px;
+}
+
+.step-dot {
+  position: absolute;
+  left: 4px;
+  top: 10px;
+  width: 10px;
+  height: 10px;
+  box-sizing: border-box;
+  background: #000000;
+  border-radius: 5px;
+  z-index: 2;
+}
+
+.step-dot.target {
+  background: var(--museum-accent);
+  border: 1px solid #000000;
+}
+
+.step-connector {
+  position: absolute;
+  left: 8px;
+  top: 18px;
+  width: 2px;
+  height: 38px;
+  background: repeating-linear-gradient(
+    to bottom,
+    #d9d9d9 0,
+    #d9d9d9 5px,
+    transparent 5px,
+    transparent 9px
+  );
+}
+
+.step-text {
+  font-size: 13px;
+  line-height: 18px;
+  color: #1f2329;
+}
+
+.action-row {
+  position: absolute;
+  left: 20px;
+  right: 20px;
+  bottom: 16px;
+  display: flex;
+  gap: 16px;
+}
+
+.action-btn {
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+
+.action-btn.secondary {
+  width: 151px;
+  background: #ffffff;
+  border: 1px solid #000000;
+}
+
+.action-btn.primary {
+  width: 168px;
+  background: #000000;
+  border: 1px solid #000000;
+}
+
+.action-text {
+  font-size: 14px;
+  line-height: 19px;
+  font-weight: 500;
+  color: #000000;
+}
+
+.action-btn.primary .action-text {
+  color: var(--museum-accent);
+}
+
+@media (max-width: 360px) {
+  .action-row {
+    gap: 10px;
+  }
+
+  .action-btn.secondary,
+  .action-btn.primary {
+    width: auto;
+    flex: 1;
+  }
+}
+</style>