lyf/frontend-miniapp
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: solidify guide P1 snapshot

Browse Source
This commit is contained in:
lyf
2026-06-11 16:18:57 +08:00
parent a90f63cef0
commit 9790501c3b
32 changed files with 4613 additions and 865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
src/components/map/ThreeMap.vue
View File

@@ -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()
})

124
src/components/navigation/GuideMapShell.vue
View File

@@ -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;

144
src/components/navigation/GuidePageFrame.vue Normal file
View File

@@ -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>

90
src/components/navigation/GuideTopTabs.vue Normal file
View File

@@ -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>

212
src/components/navigation/LocationPreview.vue Normal file
View File

@@ -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>

126
src/pages/exhibit/detail.vue
View File

@@ -1,68 +1,80 @@
<template>
<view class="detail-page">
<scroll-view class="content" scroll-y>
<!-- 展品图片 -->
<view class="exhibit-hero">
<image class="hero-image" :src="exhibit.image" mode="aspectFill" />
<view class="audio-control" @tap="handlePlayAudio">
<text class="audio-icon">{{ isPlaying ? '⏸' : '▶' }}</text>
</view>
</view>
<!-- 展品信息 -->
<view class="exhibit-info">
<text class="exhibit-title">{{ exhibit.name }}</text>
<text v-if="exhibit.artist" class="exhibit-artist">{{ exhibit.artist }}</text>
<view class="info-grid">
<view v-if="exhibit.year" class="info-item">
<text class="info-label">创作年代</text>
<text class="info-value">{{ exhibit.year }}</text>
</view>
<view v-if="exhibit.material" class="info-item">
<text class="info-label">材质</text>
<text class="info-value">{{ exhibit.material }}</text>
</view>
<view v-if="exhibit.size" class="info-item">
<text class="info-label">尺寸</text>
<text class="info-value">{{ exhibit.size }}</text>
</view>
<view v-if="exhibit.hall" class="info-item">
<text class="info-label">展厅位置</text>
<text class="info-value">{{ exhibit.hall }}</text>
<GuidePageFrame
:active-tab="activeTopTab"
variant="static"
@tab-change="handleTopTabChange"
>
<view class="detail-page">
<scroll-view class="content" scroll-y>
<!-- 展品图片 -->
<view class="exhibit-hero">
<image class="hero-image" :src="exhibit.image" mode="aspectFill" />
<view class="audio-control" @tap="handlePlayAudio">
<text class="audio-icon">{{ isPlaying ? '⏸' : '▶' }}</text>
</view>
</view>
<view class="description-section">
<text class="section-title">作品介绍</text>
<text class="description-text">{{ exhibit.description }}</text>
</view>
</view>
</scroll-view>
<!-- 展品信息 -->
<view class="exhibit-info">
<text class="exhibit-title">{{ exhibit.name }}</text>
<text v-if="exhibit.artist" class="exhibit-artist">{{ exhibit.artist }}</text>
<!-- 底部操作栏 -->
<view class="action-bar">
<view class="action-btn-group">
<view class="action-btn" @tap="handleNavigate">
<text class="btn-icon">🗺️</text>
<text class="btn-text">导航</text>
<view class="info-grid">
<view v-if="exhibit.year" class="info-item">
<text class="info-label">创作年代</text>
<text class="info-value">{{ exhibit.year }}</text>
</view>
<view v-if="exhibit.material" class="info-item">
<text class="info-label">材质</text>
<text class="info-value">{{ exhibit.material }}</text>
</view>
<view v-if="exhibit.size" class="info-item">
<text class="info-label">尺寸</text>
<text class="info-value">{{ exhibit.size }}</text>
</view>
<view v-if="exhibit.hall" class="info-item">
<text class="info-label">展厅位置</text>
<text class="info-value">{{ exhibit.hall }}</text>
</view>
</view>
<view class="description-section">
<text class="section-title">作品介绍</text>
<text class="description-text">{{ exhibit.description }}</text>
</view>
</view>
<view class="action-btn" @tap="handleCollect">
<text class="btn-icon">{{ isCollected ? '❤️' : '🤍' }}</text>
<text class="btn-text">收藏</text>
</view>
<view class="action-btn" @tap="handleShare">
<text class="btn-icon">📤</text>
<text class="btn-text">分享</text>
</scroll-view>
<!-- 底部操作栏 -->
<view class="action-bar">
<view class="action-btn-group">
<view class="action-btn" @tap="handleNavigate">
<text class="btn-icon">🗺️</text>
<text class="btn-text">导航</text>
</view>
<view class="action-btn" @tap="handleCollect">
<text class="btn-icon">{{ isCollected ? '❤️' : '🤍' }}</text>
<text class="btn-text">收藏</text>
</view>
<view class="action-btn" @tap="handleShare">
<text class="btn-icon">📤</text>
<text class="btn-text">分享</text>
</view>
</view>
</view>
</view>
</view>
</GuidePageFrame>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
import {
isGuideTopTab,
navigateToGuideTopTab,
type GuideTopTab
} from '@/utils/guideTopTabs'
const exhibit = ref({
id: '1',
@@ -78,12 +90,18 @@ const exhibit = ref({
const isPlaying = ref(false)
const isCollected = ref(false)
const activeTopTab = ref<GuideTopTab>('guide')
onLoad((options: any) => {
if (options.id) {
// 根据 ID 加载展品数据
console.log('加载展品:', options.id)
}
const tab = Array.isArray(options.tab) ? options.tab[0] : options.tab
if (isGuideTopTab(tab)) {
activeTopTab.value = tab
}
})
const handlePlayAudio = () => {
@@ -108,12 +126,16 @@ const handleShare = () => {
uni.showShareMenu()
}
const handleTopTabChange = (tab: GuideTopTab) => {
navigateToGuideTopTab(tab)
}
</script>
<style scoped lang="scss">
.detail-page {
width: 100%;
height: 100vh;
height: 100%;
background-color: var(--museum-bg-light);
display: flex;
flex-direction: column;

378
src/pages/facility/detail.vue
View File

@@ -1,58 +1,136 @@
<template>
<GuideMapShell
:search-text="facility.name"
floor-top="164px"
tools-top="406px"
:tools="['回正', '2D']"
@search-tap="handleSearchTap"
@mode-change="handleModeChange"
@floor-change="handleFloorChange"
@tool-click="handleToolClick"
<GuidePageFrame
active-tab="guide"
variant="overlay"
show-back
:show-cancel="isStartPanelOpen"
@tab-change="handleTopTabChange"
@back="handlePageBack"
@cancel="handleCancelStartSelection"
>
<view class="detail-sheet">
<view class="detail-title-row">
<text class="detail-title">{{ facility.name }}</text>
<text class="open-status">{{ facility.status }}</text>
</view>
<GuideMapShell
:search-text="facility.name"
search-top="60px"
mode-top="104px"
floor-top="208px"
tools-top="450px"
:tools="['回正', '2D']"
@search-tap="handleSearchTap"
@mode-change="handleModeChange"
@floor-change="handleFloorChange"
@tool-click="handleToolClick"
>
<view class="detail-sheet">
<view class="detail-title-row">
<text class="detail-title">{{ facility.name }}</text>
<text class="open-status">{{ facility.status }}</text>
</view>
<view class="detail-lines">
<text class="detail-line">所在区域：{{ facility.location }}</text>
<text class="detail-line">最近垂直交通：{{ facility.traffic }}</text>
</view>
<view class="detail-lines">
<text class="detail-line">所在区域：{{ facility.location }}</text>
<text class="detail-line">最近垂直交通：{{ facility.traffic }}</text>
<text v-if="confirmedStart" class="detail-line">预览起点：{{ confirmedStart.label }}</text>
</view>
<view class="tag-row">
<view
v-for="(tag, index) in facility.tags"
:key="tag"
class="detail-tag"
:class="{ active: index === 0 }"
>
<text class="detail-tag-text">{{ tag }}</text>
<view class="tag-row">
<view
v-for="(tag, index) in facility.tags"
:key="tag"
class="detail-tag"
:class="{ active: index === 0 }"
>
<text class="detail-tag-text">{{ tag }}</text>
</view>
</view>
<view class="action-row">
<view class="action-btn secondary" @tap="handleChooseStart">
<text class="action-text">{{ startButtonLabel }}</text>
</view>
<view class="action-btn primary" @tap="handleStartNavigation">
<text class="action-text">查看位置</text>
</view>
</view>
</view>
<view class="action-row">
<view class="action-btn secondary" @tap="handleChooseStart">
<text class="action-text">选择起点</text>
<view
v-if="isStartPanelOpen"
class="start-panel-mask"
@tap="handleCancelStartSelection"
></view>
<view
v-if="isStartPanelOpen"
class="start-select-sheet"
@tap.stop=""
>
<text class="start-select-title">选择预览起点</text>
<text class="start-select-desc">当前仅用于位置预览，不生成真实馆内路线。</text>
<view class="start-chip-section">
<text class="start-chip-label">楼层</text>
<view class="start-chip-row">
<view
v-for="floor in startFloors"
:key="floor"
class="start-chip"
:class="{ active: floor === selectedStartFloor }"
@tap="handleStartFloorChange(floor)"
>
<text class="start-chip-text">{{ floor }}</text>
</view>
</view>
</view>
<view class="action-btn primary" @tap="handleStartNavigation">
<text class="action-text">查看位置</text>
<view class="start-chip-section area">
<text class="start-chip-label">区域</text>
<view class="start-chip-row">
<view
v-for="area in startAreas"
:key="area"
class="start-chip area"
:class="{ active: area === selectedStartArea }"
@tap="handleStartAreaChange(area)"
>
<text class="start-chip-text">{{ area }}</text>
</view>
</view>
</view>
<view class="start-panel-actions">
<view class="start-panel-btn secondary" @tap="handleCancelStartSelection">
<text class="start-panel-btn-text">取消</text>
</view>
<view class="start-panel-btn primary" @tap="handleConfirmStartSelection">
<text class="start-panel-btn-text">确认起点</text>
</view>
</view>
</view>
</view>
</GuideMapShell>
</GuideMapShell>
</GuidePageFrame>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
import GuideMapShell from '@/components/navigation/GuideMapShell.vue'
import {
NAV_FLOOR_OPTIONS,
NAV_ROUTE_UNAVAILABLE_MESSAGE,
formatNavFloorLabel,
isPoiAccessible,
loadCleanNavPoiById
} from '@/services/navAssets'
import {
navigateToGuideTopTab,
type GuideTopTab
} from '@/utils/guideTopTabs'
interface ConfirmedStart {
label: string
floor: string
source: 'facility-detail'
}
const facility = ref({
id: '',
@@ -62,6 +140,30 @@ const facility = ref({
traffic: NAV_ROUTE_UNAVAILABLE_MESSAGE,
tags: ['三维位置', 'clean 数据']
})
const isStartPanelOpen = ref(false)
const selectedStartFloor = ref('1F')
const selectedStartArea = ref('服务台附近')
const confirmedStart = ref<ConfirmedStart | null>(null)
const startFloors = NAV_FLOOR_OPTIONS.map((floor) => floor.label)
const startAreas = ['主入口', '服务台附近', '停车场入口']
const pendingStartLabel = computed(() => `${selectedStartFloor.value} ${selectedStartArea.value}`)
const startButtonLabel = computed(() => confirmedStart.value ? '更换起点' : '选择起点')
const resolveConfirmedStartArea = () => {
if (!confirmedStart.value) return '服务台附近'
const area = confirmedStart.value.floor
? confirmedStart.value.label.replace(`${confirmedStart.value.floor} `, '').trim()
: confirmedStart.value.label.trim()
return startAreas.includes(area) ? area : '服务台附近'
}
const syncDraftStartSelection = () => {
selectedStartFloor.value = confirmedStart.value?.floor || '1F'
selectedStartArea.value = resolveConfirmedStartArea()
}
onLoad(async (options: any) => {
if (options.id) {
@@ -103,15 +205,51 @@ const handleSearchTap = () => {
}
const handleChooseStart = () => {
uni.showToast({
title: '请选择当前位置',
icon: 'none'
})
syncDraftStartSelection()
isStartPanelOpen.value = true
}
const handleStartFloorChange = (floor: string) => {
selectedStartFloor.value = floor
}
const handleStartAreaChange = (area: string) => {
selectedStartArea.value = area
}
const handleCancelStartSelection = () => {
syncDraftStartSelection()
isStartPanelOpen.value = false
}
const handleConfirmStartSelection = () => {
confirmedStart.value = {
label: pendingStartLabel.value,
floor: selectedStartFloor.value,
source: 'facility-detail'
}
isStartPanelOpen.value = false
}
const handleStartNavigation = () => {
const params: Record<string, string> = {
facilityId: facility.value.id,
target: facility.value.name,
state: 'preview'
}
if (confirmedStart.value) {
params.startLabel = confirmedStart.value.label
params.startFloor = confirmedStart.value.floor
params.startSource = confirmedStart.value.source
}
const query = Object.entries(params)
.map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
.join('&')
uni.navigateTo({
url: `/pages/route/detail?facilityId=${facility.value.id}&target=${encodeURIComponent(facility.value.name)}&state=planning`
url: `/pages/route/detail?${query}`
})
}
@@ -127,6 +265,21 @@ const handleToolClick = (tool: string) => {
console.log('设施详情工具:', tool)
}
const handleTopTabChange = (tab: GuideTopTab) => {
navigateToGuideTopTab(tab)
}
const handlePageBack = () => {
uni.navigateBack({
delta: 1,
fail: () => {
uni.reLaunch({
url: '/pages/index/index'
})
}
})
}
</script>
<style scoped lang="scss">
@@ -265,4 +418,151 @@ const handleToolClick = (tool: string) => {
.action-btn.primary .action-text {
color: var(--museum-accent);
}
.start-panel-mask {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 52;
}
.start-select-sheet {
position: absolute;
left: 0;
right: 0;
bottom: calc(env(safe-area-inset-bottom) + 34px);
height: 276px;
padding: 22px 20px 16px;
box-sizing: border-box;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
z-index: 55;
}
.start-select-title {
display: block;
font-size: 18px;
line-height: 24px;
font-weight: 700;
color: #000000;
}
.start-select-desc {
display: block;
margin-top: 6px;
font-size: 12px;
line-height: 17px;
color: #626970;
}
.start-chip-section {
margin-top: 16px;
}
.start-chip-section.area {
margin-top: 14px;
}
.start-chip-label {
display: block;
margin-bottom: 8px;
font-size: 12px;
line-height: 16px;
font-weight: 500;
color: #60666d;
}
.start-chip-row {
display: flex;
align-items: center;
gap: 8px;
overflow: hidden;
}
.start-chip {
height: 28px;
min-width: 48px;
padding: 0 13px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: #f4f4ef;
border: 1px solid #e7e8e2;
border-radius: 14px;
}
.start-chip.area {
min-width: 72px;
}
.start-chip.active {
background: #000000;
border-color: #000000;
}
.start-chip-text {
font-size: 12px;
line-height: 16px;
font-weight: 500;
color: #60666d;
}
.start-chip.active .start-chip-text {
color: var(--museum-accent);
}
.start-panel-actions {
position: absolute;
left: 20px;
right: 20px;
bottom: 16px;
display: flex;
gap: 16px;
}
.start-panel-btn {
height: 42px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 8px;
}
.start-panel-btn.secondary {
width: 151px;
background: #ffffff;
border: 1px solid #000000;
}
.start-panel-btn.primary {
width: 168px;
background: #000000;
border: 1px solid #000000;
}
.start-panel-btn-text {
font-size: 14px;
line-height: 19px;
font-weight: 500;
color: #000000;
}
.start-panel-btn.primary .start-panel-btn-text {
color: var(--museum-accent);
}
@media (max-width: 360px) {
.start-panel-actions {
gap: 10px;
}
.start-panel-btn.secondary,
.start-panel-btn.primary {
width: auto;
flex: 1;
}
}
</style>

107
src/pages/hall/detail.vue
View File

@@ -1,58 +1,72 @@
<template>
<view class="detail-page">
<scroll-view class="content" scroll-y>
<!-- 展厅封面 -->
<view class="hall-hero">
<image class="hero-image" :src="hall.image" mode="aspectFill" />
<view class="hall-badge">
<text class="badge-text">{{ hall.floor }}</text>
</view>
</view>
<!-- 展厅信息 -->
<view class="hall-info">
<text class="hall-title">{{ hall.name }}</text>
<text class="hall-description">{{ hall.description }}</text>
<view class="stats-row">
<view class="stat-item">
<text class="stat-value">{{ hall.exhibitCount }}</text>
<text class="stat-label">展品数量</text>
</view>
<view class="stat-item">
<text class="stat-value">{{ hall.area }}</text>
<text class="stat-label">展厅面积</text>
<GuidePageFrame
:active-tab="activeTopTab"
variant="static"
@tab-change="handleTopTabChange"
>
<view class="detail-page">
<scroll-view class="content" scroll-y>
<!-- 展厅封面 -->
<view class="hall-hero">
<image class="hero-image" :src="hall.image" mode="aspectFill" />
<view class="hall-badge">
<text class="badge-text">{{ hall.floor }}</text>
</view>
</view>
<!-- 展品列表 -->
<view class="exhibits-section">
<text class="section-title">展厅展品</text>
<view class="exhibits-grid">
<ExhibitCard
v-for="exhibit in exhibits"
:key="exhibit.id"
:exhibit="exhibit"
@click="handleExhibitClick"
/>
<!-- 展厅信息 -->
<view class="hall-info">
<text class="hall-title">{{ hall.name }}</text>
<text class="hall-description">{{ hall.description }}</text>
<view class="stats-row">
<view class="stat-item">
<text class="stat-value">{{ hall.exhibitCount }}</text>
<text class="stat-label">展品数量</text>
</view>
<view class="stat-item">
<text class="stat-value">{{ hall.area }}</text>
<text class="stat-label">展厅面积</text>
</view>
</view>
<!-- 展品列表 -->
<view class="exhibits-section">
<text class="section-title">展厅展品</text>
<view class="exhibits-grid">
<ExhibitCard
v-for="exhibit in exhibits"
:key="exhibit.id"
:exhibit="exhibit"
@click="handleExhibitClick"
/>
</view>
</view>
</view>
</view>
</scroll-view>
</scroll-view>
<!-- 底部操作栏 -->
<view class="action-bar">
<view class="action-btn primary" @tap="handleNavigate">
<text class="btn-text">导航到展厅</text>
<!-- 底部操作栏 -->
<view class="action-bar">
<view class="action-btn primary" @tap="handleNavigate">
<text class="btn-text">导航到展厅</text>
</view>
</view>
</view>
</view>
</GuidePageFrame>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
import ExhibitCard from '@/components/content/ExhibitCard.vue'
import {
isGuideTopTab,
navigateToGuideTopTab,
type GuideTopTab
} from '@/utils/guideTopTabs'
const activeTopTab = ref<GuideTopTab>('guide')
const hall = ref({
id: '1',
@@ -73,11 +87,16 @@ onLoad((options: any) => {
if (options.id) {
console.log('加载展厅:', options.id)
}
const tab = Array.isArray(options.tab) ? options.tab[0] : options.tab
if (isGuideTopTab(tab)) {
activeTopTab.value = tab
}
})
const handleExhibitClick = (exhibit: any) => {
uni.navigateTo({
url: `/pages/exhibit/detail?id=${exhibit.id}`
url: `/pages/exhibit/detail?id=${exhibit.id}&tab=${activeTopTab.value}`
})
}
@@ -85,12 +104,16 @@ const handleNavigate = () => {
console.log('导航到展厅')
uni.navigateBack()
}
const handleTopTabChange = (tab: GuideTopTab) => {
navigateToGuideTopTab(tab)
}
</script>
<style scoped lang="scss">
.detail-page {
width: 100%;
height: 100vh;
height: 100%;
overflow-x: hidden;
background-color: var(--museum-bg-light);
display: flex;

149
src/pages/index/index.vue
View File

@@ -1,18 +1,9 @@
<template>
<view class="page-container">
<view class="content-tabs">
<view
v-for="tab in contentTabs"
:key="tab.id"
class="content-tab"
:class="{ active: currentTab === tab.id }"
@tap="handleTabChange(tab.id)"
>
<view v-if="currentTab === tab.id" class="content-tab-indicator"></view>
<text class="content-tab-label">{{ tab.label }}</text>
</view>
</view>
<GuidePageFrame
:active-tab="currentTab"
variant="overlay"
@tab-change="handleTabChange"
>
<GuideMapShell
v-if="currentTab === 'guide'"
:search-text="guideSearchText"
@@ -25,10 +16,18 @@
:map-type="guideMapType"
:outdoor-variant="guideOutdoorVariant"
:indoor-asset-base-url="indoorNavAssetBaseUrl"
:show-floor="false"
indoor-initial-view="overview"
:indoor-view="indoorView"
:active-floor="activeGuideFloor"
indoor-view-toggle-top="154px"
floor-top="244px"
:show-indoor-view-toggle="is3DMode"
:show-floor="is3DMode && indoorView === 'floor'"
:tools="[]"
@search-tap="handleGuideSearchTap"
@mode-change="handleModeChange"
@floor-change="handleFloorChange"
@indoor-view-change="handleIndoorViewChange"
>
<template #overlay>
<view v-if="guideOutdoorState === 'entrance' && !is3DMode" class="entrance-tip">
@@ -66,7 +65,7 @@
<view v-if="guideOutdoorState === 'entrance' && !is3DMode" class="entrance-bottom-card">
<text class="entrance-card-title">主入口</text>
<text class="entrance-card-desc">
可到达入口后自动切换，也可手动进入室内3D并选择楼层/区域。
可参考主入口位置，也可手动进入室内3D并选择楼层/区域。
</text>
<view class="entrance-actions">
<view class="entrance-btn secondary" @tap="handleSwitchEntrance">
@@ -102,15 +101,21 @@
@pause="handleAudioPause"
@ended="handleAudioEnded"
/>
</view>
</GuidePageFrame>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
import GuideMapShell from '@/components/navigation/GuideMapShell.vue'
import ExplainList from '@/components/explain/ExplainList.vue'
import FloatingAudioButton from '@/components/audio/FloatingAudioButton.vue'
import AudioPlayer, { type AudioItem } from '@/components/audio/AudioPlayer.vue'
import {
isGuideTopTab,
type GuideTopTab
} from '@/utils/guideTopTabs'
import {
NAV_ASSET_BASE_URL,
NAV_ROUTE_UNAVAILABLE_MESSAGE
@@ -119,20 +124,17 @@ import {
// 3D 模式状态
const is3DMode = ref(false)
const guideOutdoorState = ref<'home' | 'entrance'>('home')
const indoorView = ref<'overview' | 'floor'>('overview')
const activeGuideFloor = ref('1F')
// 状态
const searchKeyword = ref('')
const currentTab = ref('guide')
const currentTab = ref<GuideTopTab>('guide')
const searchBarFocused = ref(false)
const showMarkerDetail = ref(false)
const showAreaSelector = ref(false)
const selectedAreaId = ref('service')
const contentTabs = [
{ id: 'guide', label: '导览' },
{ id: 'explain', label: '讲解' }
]
const indoorNavAssetBaseUrl = NAV_ASSET_BASE_URL
const shortcutItems = [
@@ -171,7 +173,7 @@ const markerDataMap: Record<string, MarkerDetail> = {
}
// Tab 切换处理
const handleTabChange = (tabId: string) => {
const handleTabChange = (tabId: GuideTopTab) => {
currentTab.value = tabId
console.log('切换标签:', tabId)
@@ -181,6 +183,13 @@ const handleTabChange = (tabId: string) => {
searchBarFocused.value = false
}
onLoad((options: any = {}) => {
const tab = Array.isArray(options.tab) ? options.tab[0] : options.tab
if (isGuideTopTab(tab)) {
currentTab.value = tab
}
})
// 搜索处理
const handleSearchFocus = () => {
searchBarFocused.value = true
@@ -284,12 +293,19 @@ const handleCollectMarker = (marker: MarkerDetail) => {
}
const handleFloorChange = (floor: string) => {
activeGuideFloor.value = floor
indoorView.value = 'floor'
console.log('切换楼层:', floor)
}
const handleIndoorViewChange = (view: 'overview' | 'floor') => {
indoorView.value = view
}
// 进入 3D 室内模式
const handleEnter3DMode = () => {
console.log('进入 3D 室内模式')
indoorView.value = 'overview'
is3DMode.value = true
guideOutdoorState.value = 'home'
}
@@ -298,32 +314,37 @@ const handleModeChange = (mode: '2d' | '3d') => {
is3DMode.value = mode === '3d'
if (mode === '2d') {
indoorView.value = 'overview'
guideOutdoorState.value = 'home'
} else {
indoorView.value = 'overview'
}
}
const guideStatusLabel = computed(() => {
if (is3DMode.value) {
return '馆内定位'
return indoorView.value === 'overview' ? '室内全馆' : '室内楼层'
}
if (guideOutdoorState.value === 'entrance') {
return '推荐入口'
}
return '馆外定位'
return '室外参考'
})
const guideTaskTitle = computed(() => {
if (is3DMode.value) {
return '规划馆内路线'
return indoorView.value === 'overview' ? '查看完整建筑' : '查看楼层位置'
}
return '从室外进入馆内'
})
const guideTaskSubtitle = computed(() => {
if (is3DMode.value) {
return '选择目标设施后，系统会优先推荐最近路径'
return indoorView.value === 'overview'
? '切换到楼层后，可查看 POI 与三维位置预览'
: '选择目标设施后，可查看楼层与三维位置预览'
}
return ''
@@ -413,7 +434,7 @@ const handleAudioEnded = (audio: AudioItem) => {
const handleExplainExhibitClick = (exhibit: any) => {
console.log('点击讲解展品:', exhibit)
uni.navigateTo({
url: `/pages/exhibit/detail?id=${exhibit.id}`
url: `/pages/exhibit/detail?id=${exhibit.id}&tab=explain`
})
}
@@ -438,16 +459,6 @@ const handleExplainFeaturedClick = (exhibit: any) => {
</script>
<style scoped lang="scss">
.page-container {
position: relative;
width: 100%;
height: 100vh;
height: 100dvh;
overflow: hidden;
isolation: isolate;
background: var(--museum-bg-map);
}
.explain-page {
position: absolute;
top: 0;
@@ -546,59 +557,6 @@ const handleExplainFeaturedClick = (exhibit: any) => {
}
}
.content-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;
}
.content-tab {
position: relative;
width: 75px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.content-tab-label {
position: relative;
z-index: 2;
font-size: 16px;
line-height: 22px;
font-weight: 400;
color: #6b7280;
}
.content-tab.active .content-tab-label {
font-weight: 500;
color: #1f2329;
}
.content-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;
}
.search-bar-wrapper {
position: absolute;
top: 44px;
@@ -809,11 +767,4 @@ const handleExplainFeaturedClick = (exhibit: any) => {
color: var(--museum-accent);
}
@media (min-width: 768px) {
.page-container {
max-width: 430px;
margin: 0 auto;
box-shadow: 0 12px 36px rgba(36, 49, 42, 0.16);
}
}
</style>

993
src/pages/route/detail.vue
View File

File diff suppressed because it is too large Load Diff

277
src/pages/search/index.vue
View File

@@ -1,61 +1,103 @@
<template>
<GuideMapShell
:search-text="searchKeyword || '搜索设施、展厅、入口'"
floor-top="164px"
@search-tap="handleSearchTap"
@mode-change="handleModeChange"
@floor-change="handleFloorChange"
<GuidePageFrame
active-tab="guide"
variant="overlay"
show-back
:show-cancel="isSearchEditing"
@tab-change="handleTopTabChange"
@back="handlePageBack"
@cancel="handleSearchCancel"
>
<template #overlay>
<view class="filter-row">
<GuideMapShell
:search-text="searchKeyword || '搜索设施、展厅、入口'"
search-top="60px"
mode-top="104px"
floor-top="208px"
@search-tap="handleSearchTap"
@mode-change="handleModeChange"
@floor-change="handleFloorChange"
>
<template #overlay>
<view
v-for="filter in filters"
:key="filter.id"
class="filter-chip"
:class="[{ active: currentFilter === filter.id }, `filter-${filter.id}`]"
@tap="handleFilterChange(filter.id)"
v-if="isSearchEditing"
class="search-edit-row"
@tap.stop=""
>
<text class="filter-text">{{ filter.label }}</text>
<view class="search-edit-box">
<input
class="search-edit-input"
type="text"
confirm-type="search"
:focus="searchInputFocused"
:placeholder="searchPlaceholder"
:value="searchDraftKeyword"
@input="handleSearchInput"
@confirm="handleSearchConfirm"
/>
<view
v-if="searchDraftKeyword"
class="search-clear-btn"
@tap.stop="handleSearchClear"
>
<text class="search-clear-text">×</text>
</view>
</view>
<view class="search-confirm-btn" @tap="handleSearchConfirm">
<text class="search-confirm-text">搜索</text>
</view>
</view>
</view>
</template>
<view class="results-sheet">
<view class="sheet-header">
<text class="sheet-title">{{ resultTitle }}</text>
<text class="sort-label">按距离排序</text>
</view>
<view class="result-list">
<view
v-for="item in visibleFacilities"
:key="item.id"
class="result-card"
@tap="handleFacilityClick(item)"
>
<view class="facility-mark">
<text class="facility-mark-text">卫</text>
</view>
<view class="facility-info">
<text class="facility-name">{{ item.name }}</text>
<text class="facility-meta">{{ item.meta }}</text>
</view>
<view class="filter-row">
<view
class="result-action"
:class="{ secondary: item.action === '查看' }"
@tap.stop="handleResultAction(item)"
v-for="filter in filters"
:key="filter.id"
class="filter-chip"
:class="[{ active: currentFilter === filter.id }, `filter-${filter.id}`]"
@tap="handleFilterChange(filter.id)"
>
<text class="result-action-text">{{ item.action }}</text>
<text class="filter-text">{{ filter.label }}</text>
</view>
</view>
</template>
<view class="results-sheet">
<view class="sheet-header">
<text class="sheet-title">{{ resultTitle }}</text>
<text class="sort-label">默认展示</text>
</view>
<view class="result-list">
<view
v-for="item in visibleFacilities"
:key="item.id"
class="result-card"
@tap="handleFacilityClick(item)"
>
<view class="facility-mark">
<text class="facility-mark-text">卫</text>
</view>
<view class="facility-info">
<text class="facility-name">{{ item.name }}</text>
<text class="facility-meta">{{ item.meta }}</text>
</view>
<view
class="result-action"
:class="{ secondary: item.action === '查看' }"
@tap.stop="handleResultAction(item)"
>
<text class="result-action-text">{{ item.action }}</text>
</view>
</view>
</view>
</view>
</view>
</GuideMapShell>
</GuideMapShell>
</GuidePageFrame>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { computed, nextTick, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
import GuideMapShell from '@/components/navigation/GuideMapShell.vue'
import {
formatNavFloorLabel,
@@ -63,9 +105,13 @@ import {
searchCleanNavPois,
type CleanNavPoi
} from '@/services/navAssets'
import {
navigateToGuideTopTab,
type GuideTopTab
} from '@/utils/guideTopTabs'
interface FilterItem {
id: 'all' | 'accessible' | 'floor' | 'nearest'
id: 'all' | 'accessible' | 'floor'
label: string
}
@@ -79,14 +125,17 @@ interface FacilityResult {
}
const searchKeyword = ref('卫生间')
const searchDraftKeyword = ref('')
const currentFilter = ref<FilterItem['id']>('all')
const isLoading = ref(false)
const isSearchEditing = ref(false)
const searchInputFocused = ref(false)
const searchPlaceholder = '搜索设施、展厅、入口'
const filters: FilterItem[] = [
{ id: 'all', label: '全部' },
{ id: 'accessible', label: '无障碍' },
{ id: 'floor', label: '本楼层' },
{ id: 'nearest', label: '最近' }
{ id: 'floor', label: '1F 点位' }
]
const facilities = ref<FacilityResult[]>([])
@@ -141,11 +190,46 @@ onLoad((options: any) => {
if (options.keyword) {
searchKeyword.value = decodeURIComponent(options.keyword)
}
searchDraftKeyword.value = searchKeyword.value
void loadFacilityResults()
})
const handleSearchTap = () => {
console.log('保持搜索结果页')
const handleSearchTap = async () => {
searchDraftKeyword.value = searchKeyword.value
isSearchEditing.value = true
searchInputFocused.value = false
await nextTick()
searchInputFocused.value = true
}
const handleSearchInput = (event: any) => {
searchDraftKeyword.value = event.detail.value
}
const handleSearchClear = async () => {
searchDraftKeyword.value = ''
searchInputFocused.value = false
await nextTick()
searchInputFocused.value = true
}
const handleSearchCancel = () => {
searchDraftKeyword.value = searchKeyword.value
isSearchEditing.value = false
searchInputFocused.value = false
}
const handleSearchConfirm = async (event?: any) => {
const confirmedKeyword = typeof event?.detail?.value === 'string'
? event.detail.value
: searchDraftKeyword.value
searchKeyword.value = confirmedKeyword.trim()
searchDraftKeyword.value = searchKeyword.value
currentFilter.value = 'all'
isSearchEditing.value = false
searchInputFocused.value = false
await loadFacilityResults()
}
const handleFilterChange = (filterId: FilterItem['id']) => {
@@ -160,7 +244,7 @@ const handleFacilityClick = (facility: FacilityResult) => {
const handleResultAction = (facility: FacilityResult) => {
uni.navigateTo({
url: `/pages/route/detail?facilityId=${facility.id}&target=${encodeURIComponent(facility.name)}&state=planning`
url: `/pages/route/detail?facilityId=${facility.id}&target=${encodeURIComponent(facility.name)}&state=preview`
})
}
@@ -172,12 +256,101 @@ const handleFloorChange = (floor: string) => {
console.log('搜索页切换楼层:', floor)
}
const handleTopTabChange = (tab: GuideTopTab) => {
navigateToGuideTopTab(tab)
}
const handlePageBack = () => {
uni.navigateBack({
delta: 1,
fail: () => {
uni.reLaunch({
url: '/pages/index/index'
})
}
})
}
</script>
<style scoped lang="scss">
.search-edit-row {
position: absolute;
top: 60px;
left: 16px;
right: 16px;
height: 36px;
display: flex;
align-items: center;
gap: 8px;
z-index: 48;
}
.search-edit-box {
flex: 1;
min-width: 0;
height: 36px;
padding: 0 10px;
display: flex;
align-items: center;
box-sizing: border-box;
background: #ffffff;
border: 1px solid rgba(224, 223, 0, 0.55);
border-radius: 6px;
box-shadow: 0 0 0 2px rgba(224, 223, 0, 0.16);
}
.search-edit-input {
flex: 1;
min-width: 0;
font-size: 14px;
line-height: 19px;
color: #1f2329;
background: transparent;
}
.search-clear-btn {
width: 22px;
height: 22px;
margin-left: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: #8b8b84;
border-radius: 11px;
}
.search-clear-text {
font-size: 16px;
line-height: 18px;
font-weight: 500;
color: #ffffff;
}
.search-confirm-btn {
width: 52px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-sizing: border-box;
background: #000000;
border: 1px solid #000000;
border-radius: 8px;
}
.search-confirm-text {
font-size: 14px;
line-height: 19px;
font-weight: 500;
color: var(--museum-accent);
}
.filter-row {
position: absolute;
top: 102px;
top: 146px;
left: 23px;
right: 16px;
display: flex;
@@ -210,10 +383,6 @@ const handleFloorChange = (floor: string) => {
width: 82px;
}
.filter-nearest {
width: 74px;
}
.filter-text {
font-size: 12px;
line-height: 16px;

34
src/services/navAssets.ts
View File

@@ -1,7 +1,5 @@
export const NAV_ASSET_BASE_URL = '/static/nav-assets/app_nav_assets_v2_clean_20260609_075339'
export const NAV_ROUTE_GRAPH_READY = false
export const NAV_ROUTE_UNAVAILABLE_MESSAGE = '正式路线数据尚未接入，可先查看馆内三维位置'
export interface NavFloorOption {
@@ -55,9 +53,9 @@ const searchableCategories = new Set([
'operation_experience'
])
let poiCache: CleanNavPoi[] | null = null
const normalizeBaseUrl = (baseUrl: string) => baseUrl.replace(/\/+$/, '')
const poiCache = new Map<string, CleanNavPoi[]>()
const poiRequestCache = new Map<string, Promise<CleanNavPoi[]>>()
export const navAssetUrl = (relativePath: string, baseUrl = NAV_ASSET_BASE_URL) => (
`${normalizeBaseUrl(baseUrl)}/${relativePath.replace(/^\/+/, '')}`
@@ -106,15 +104,29 @@ const requestJson = <T>(url: string): Promise<T> => new Promise((resolve, reject
})
export const loadCleanNavPois = async (baseUrl = NAV_ASSET_BASE_URL) => {
if (poiCache) return poiCache
const cacheKey = normalizeBaseUrl(baseUrl)
const cachedPois = poiCache.get(cacheKey)
if (cachedPois) return cachedPois
const data = await requestJson<CleanPoiIndex>(navAssetUrl('data/poi_all.json', baseUrl))
if (data.status !== 'pass') {
throw new Error('导览 POI 数据状态不是 pass')
}
const pendingPois = poiRequestCache.get(cacheKey)
if (pendingPois) return pendingPois
poiCache = data.pois.filter((poi) => searchableCategories.has(poi.primaryCategory))
return poiCache
const request = requestJson<CleanPoiIndex>(navAssetUrl('data/poi_all.json', cacheKey))
.then((data) => {
if (data.status !== 'pass') {
throw new Error('导览 POI 数据状态不是 pass')
}
const pois = data.pois.filter((poi) => searchableCategories.has(poi.primaryCategory))
poiCache.set(cacheKey, pois)
return pois
})
.finally(() => {
poiRequestCache.delete(cacheKey)
})
poiRequestCache.set(cacheKey, request)
return request
}
export const loadCleanNavPoiById = async (id: string, baseUrl = NAV_ASSET_BASE_URL) => {

18
src/utils/guideTopTabs.ts Normal file
View File

@@ -0,0 +1,18 @@
export type GuideTopTab = 'guide' | 'explain'
export const GUIDE_TOP_TABS: Array<{ id: GuideTopTab; label: string }> = [
{ id: 'guide', label: '导览' },
{ id: 'explain', label: '讲解' }
]
export const isGuideTopTab = (value: unknown): value is GuideTopTab => {
return value === 'guide' || value === 'explain'
}
export const guideTopTabUrl = (tab: GuideTopTab) => `/pages/index/index?tab=${tab}`
export const navigateToGuideTopTab = (tab: GuideTopTab) => {
uni.reLaunch({
url: guideTopTabUrl(tab)
})
}