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

优化导览页面面板与楼层交互

Browse Source
This commit is contained in:
lyf
2026-06-25 03:43:33 +08:00
parent 33641e75df
commit d4b97379bb
5 changed files with 252 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1158,7 +1158,7 @@ const getMultiFloorVerticalGap = (items: MultiFloorModelItem[]) => {
const maxFloorHeight = Math.max(...items.map((item) => item.size.y), 1)
const maxFootprint = Math.max(...items.map((item) => Math.max(item.size.x, item.size.z)), 1)
return Math.max(maxFloorHeight * 3.2, maxFootprint * 0.2, 42)
return Math.max(maxFloorHeight * 5.2, maxFootprint * 0.32, 68)
}
const applyMultiFloorLayout = (items: MultiFloorModelItem[]) => {
@@ -1332,6 +1332,42 @@ const setCameraPreset = (preset: CameraPreset) => {
}
}
const zoomCamera = (direction: 'in' | 'out') => {
if (!camera || !controls) return
const offset = camera.position.clone().sub(controls.target)
const currentDistance = offset.length()
const zoomFactor = direction === 'in' ? 0.72 : 1.28
const minDistance = controls.minDistance || 2
const maxDistance = controls.maxDistance || 1200
const nextDistance = Math.min(maxDistance, Math.max(minDistance, currentDistance * zoomFactor))
if (!Number.isFinite(nextDistance) || nextDistance <= 0) return
offset.setLength(nextDistance)
camera.position.copy(controls.target).add(offset)
controls.update()
if (direction === 'in' && activeView.value === 'overview' && !isLoading.value && !isAutoSwitchLocked) {
isAutoSwitchLocked = true
lastAutoSwitchTime = Date.now()
void runAutoSwitchLoad(
{
from: 'overview',
to: 'floor',
trigger: 'zoom-in',
distance: nextDistance
},
() => loadFloor(currentFloor.value || props.initialFloorId || 'L1'),
'单楼层模型加载失败'
)
return
}
handleControlChange()
}
const loadOverview = async () => {
const packageData = renderPackage.value
if (!packageData || !scene) return
@@ -1447,36 +1483,6 @@ const loadMultiFloor = async () => {
activeView.value = 'multi'
clearSceneData()
setProgress(18, '正在加载多层展示模型...')
const packageData = renderPackage.value
const allFloorsShareOverview = Boolean(packageData)
&& floorIndex.value.every((floor) => floor.sharedModelAsset && floor.modelUrl === packageData!.overviewModelUrl)
if (allFloorsShareOverview && packageData) {
if (!attachCachedSharedModel(packageData.overviewModelUrl, 'GuideMultiFloorModel', loadToken)) {
const gltf = await loadModel(packageData.overviewModelUrl, '正在加载多层展示模型', loadToken)
assertCurrentModelLoad(loadToken, gltf.scene)
const targetScene = scene
if (!targetScene) {
disposeObject(gltf.scene)
throw createStaleModelLoadError()
}
activeModel = gltf.scene
activeModel.name = 'GuideMultiFloorModel'
prepareModel(activeModel)
applyModelVisibilityForView(activeModel, 'multi')
cachedOverviewModel = activeModel
cachedSharedModelUrl = packageData.overviewModelUrl
targetScene.add(activeModel)
}
if (!activeModel) throw createStaleModelLoadError()
fitCameraToObject(activeModel)
refreshPoiVisibilityByDistance()
renderRoutePreview()
return
}
const group = new THREE.Group()
group.name = 'GuideMultiFloorModel'
@@ -2310,6 +2316,7 @@ defineExpose({
showMultiFloor,
resetCamera,
setCameraPreset,
zoomCamera,
focusTargetPoi: (request: TargetPoiFocusRequest) => {
queueTargetFocus(request)
},

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

@@ -29,6 +29,8 @@
:target-focus-distance-factor="targetFocusDistanceFactor"
:route-preview="routePreview"
:show-route="showRoute"
:auto-switch-threshold-low="autoSwitchThresholdLow"
:auto-switch-threshold-high="autoSwitchThresholdHigh"
@floor-change="handleThreeFloorChange"
@poi-click="handlePoiClick"
@selection-clear="handleSelectionClear"
@@ -138,7 +140,12 @@
:class="`side-${floorSide}`"
:style="floorSwitcherStyle"
>
<view v-if="showFloorHeader" class="floor-header">
<view
v-if="showFloorHeader"
class="floor-header"
:class="{ active: layerMode === 'multi' }"
@tap.stop="handleFloorHeaderTap"
>
<text class="floor-header-icon">▱</text>
<text class="floor-header-label">楼层</text>
</view>
@@ -146,7 +153,7 @@
v-for="floor in floorLabels"
:key="floor"
class="floor-item"
:class="{ active: activeFloor === floor }"
:class="{ active: activeFloor === floor && layerMode !== 'multi' }"
@tap="handleFloorChange(floor)"
>
<text class="floor-label">{{ floor }}</text>
@@ -242,6 +249,7 @@ const props = withDefaults(defineProps<{
layerMode?: LayerDisplayMode
searchTop?: string
floorTop?: string
floorMaxHeight?: string
layerModeToggleTop?: string
toolsTop?: string
tools?: string[]
@@ -275,6 +283,8 @@ const props = withDefaults(defineProps<{
targetFocusDistanceFactor?: number
routePreview?: GuideRouteResult | null
showRoute?: boolean
autoSwitchThresholdLow?: number
autoSwitchThresholdHigh?: number
}>(), {
searchText: '请输入地点进行搜索',
activeMode: '3d',
@@ -284,6 +294,7 @@ const props = withDefaults(defineProps<{
layerMode: 'single',
searchTop: '16px',
floorTop: '164px',
floorMaxHeight: '',
layerModeToggleTop: '154px',
toolsTop: '406px',
tools: () => [] as string[],
@@ -316,7 +327,9 @@ const props = withDefaults(defineProps<{
touchGestureMode: 'orbit',
targetFocusDistanceFactor: 0.22,
routePreview: null,
showRoute: false
showRoute: false,
autoSwitchThresholdLow: 1.0,
autoSwitchThresholdHigh: 1.3
})
const emit = defineEmits<{
@@ -339,6 +352,7 @@ const indoorRendererRef = ref<{
showMultiFloor?: () => Promise<void> | void
resetCamera?: () => void
setCameraPreset?: (preset: 'top' | 'oblique') => void
zoomCamera?: (direction: 'in' | 'out') => void
clearSelection?: (shouldEmit?: boolean) => void
disableAutoSwitchTemporarily?: (durationMs: number) => void
} | null>(null)
@@ -359,7 +373,8 @@ const searchFieldStyle = computed(() => ({
}))
const floorSwitcherStyle = computed(() => ({
top: props.floorTop
top: props.floorTop,
...(props.floorMaxHeight ? { maxHeight: props.floorMaxHeight } : {})
}))
const layerModeToggleStyle = computed(() => ({
@@ -432,6 +447,10 @@ const handleLayerModeToggle = () => {
handleLayerModeChange(nextLayerMode.value)
}
const handleFloorHeaderTap = () => {
handleLayerModeChange('multi')
}
const handleToolClick = (tool: string) => {
if (props.mapType === 'indoor') {
indoorRendererRef.value?.disableAutoSwitchTemporarily?.(10000)
@@ -456,6 +475,7 @@ const handleResetView = () => {
}
const handleZoomClick = (direction: 'in' | 'out') => {
indoorRendererRef.value?.zoomCamera?.(direction)
emit('toolClick', direction === 'in' ? '放大' : '缩小')
}
@@ -797,7 +817,9 @@ const handleAutoSwitch = (event: { from: 'overview' | 'floor'; to: 'overview' |
max-height: calc(100vh - 260px);
padding: 1px;
box-sizing: border-box;
overflow: visible;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
background: rgba(255, 255, 255, 0.84);
border: 1px solid #dde5df;
border-radius: 8px;
@@ -805,6 +827,10 @@ const handleAutoSwitch = (event: { from: 'overview' | 'floor'; to: 'overview' |
z-index: 35;
}
.floor-switcher::-webkit-scrollbar {
display: none;
}
.floor-switcher.side-right {
right: 16px;
}
@@ -814,6 +840,7 @@ const handleAutoSwitch = (event: { from: 'overview' | 'floor'; to: 'overview' |
}
.floor-header {
position: relative;
min-height: 50px;
padding: 7px 4px 6px;
display: flex;
@@ -826,6 +853,10 @@ const handleAutoSwitch = (event: { from: 'overview' | 'floor'; to: 'overview' |
border-radius: 8px 8px 0 0;
}
.floor-header.active {
background: #000000;
}
.floor-header::after {
content: '';
position: absolute;
@@ -842,12 +873,20 @@ const handleAutoSwitch = (event: { from: 'overview' | 'floor'; to: 'overview' |
color: #151713;
}
.floor-header.active .floor-header-icon {
color: var(--museum-accent);
}
.floor-header-label {
font-size: 11px;
line-height: 14px;
color: #545861;
}
.floor-header.active .floor-header-label {
color: var(--museum-accent);
}
.layer-mode-toggle {
position: absolute;
right: 16px;

78
src/components/navigation/RoutePlannerPanel.vue
View File

@@ -1,5 +1,15 @@
<template>
<view v-if="visible" class="route-planner-panel" :class="{ collapsed: isCollapsed }">
<view
v-if="visible"
class="route-planner-panel"
:class="{ collapsed: isCollapsed }"
@touchstart.stop="handlePanelTouchStart"
@touchmove.stop="handlePanelTouchMove"
@touchend.stop="handlePanelTouchEnd"
@mousedown.stop="handlePanelMouseStart"
@mousemove.stop="handlePanelMouseMove"
@mouseup.stop="handlePanelMouseEnd"
>
<view class="panel-handle" @tap.stop="toggleCollapsed"></view>
<view v-if="isCollapsed" class="panel-collapsed" @tap="expandPanel">
@@ -19,6 +29,9 @@
<text v-if="summary" class="panel-summary">{{ summary }}</text>
</view>
<view class="panel-actions">
<view class="panel-light-action" @tap="handleBack">
<text class="panel-light-action-text">返回</text>
</view>
<view class="panel-light-action" @tap="collapsePanel">
<text class="panel-light-action-text">收起</text>
</view>
@@ -94,6 +107,7 @@
:loading="pickerLoading"
:error="pickerError"
:empty-text="pickerEmptyText"
close-text="返回"
@close="closePicker"
@select="handlePointSelect"
@search="handlePickerSearch"
@@ -148,10 +162,13 @@ const emit = defineEmits<{
clear: []
viewRoute: [payload: { startPoint: RoutePointOption; endPoint: RoutePointOption }]
simulateGuide: []
back: []
}>()
const pickerMode = ref<PickerMode>('')
const isCollapsed = ref(false)
const panelTouchStartY = ref(0)
const panelTouchCurrentY = ref(0)
const pickerTitle = computed(() => (
pickerMode.value === 'start' ? '选择起点' : '选择终点'
@@ -274,6 +291,15 @@ const handleClear = () => {
emit('clear')
}
const handleBack = () => {
if (pickerMode.value) {
closePicker()
return
}
emit('back')
}
const collapsePanel = () => {
isCollapsed.value = true
}
@@ -286,6 +312,56 @@ const toggleCollapsed = () => {
isCollapsed.value = !isCollapsed.value
}
const getGestureClientY = (event: TouchEvent | MouseEvent) => {
if ('changedTouches' in event) {
return event.changedTouches?.[0]?.clientY
?? event.touches?.[0]?.clientY
?? 0
}
return event.clientY
}
const handlePanelTouchStart = (event: TouchEvent) => {
if (pickerMode.value) return
const clientY = getGestureClientY(event)
panelTouchStartY.value = clientY
panelTouchCurrentY.value = clientY
}
const handlePanelTouchMove = (event: TouchEvent) => {
if (pickerMode.value) return
panelTouchCurrentY.value = getGestureClientY(event)
}
const handlePanelTouchEnd = (event: TouchEvent) => {
if (pickerMode.value) return
panelTouchCurrentY.value = getGestureClientY(event)
if (panelTouchCurrentY.value - panelTouchStartY.value > 48) {
collapsePanel()
}
}
const handlePanelMouseStart = (event: MouseEvent) => {
if (pickerMode.value) return
const clientY = getGestureClientY(event)
panelTouchStartY.value = clientY
panelTouchCurrentY.value = clientY
}
const handlePanelMouseMove = (event: MouseEvent) => {
if (pickerMode.value) return
panelTouchCurrentY.value = getGestureClientY(event)
}
const handlePanelMouseEnd = (event: MouseEvent) => {
if (pickerMode.value) return
panelTouchCurrentY.value = getGestureClientY(event)
if (panelTouchCurrentY.value - panelTouchStartY.value > 48) {
collapsePanel()
}
}
const handleViewRoute = () => {
if (!canViewRoute.value || !props.startPoint || !props.endPoint) return

6
src/components/navigation/RoutePointPicker.vue
View File

@@ -5,7 +5,7 @@
<view class="picker-header">
<text class="picker-title">{{ title }}</text>
<view class="picker-close" @tap="handleClose">
<text class="picker-close-text">关闭</text>
<text class="picker-close-text">{{ closeText }}</text>
</view>
</view>
@@ -72,6 +72,7 @@ const props = withDefaults(defineProps<{
loading?: boolean
error?: string
emptyText?: string
closeText?: string
}>(), {
visible: false,
title: '选择目标',
@@ -81,7 +82,8 @@ const props = withDefaults(defineProps<{
initialKeyword: '',
loading: false,
error: '',
emptyText: '暂无匹配地点'
emptyText: '暂无匹配地点',
closeText: '关闭'
})
const emit = defineEmits<{

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

@@ -24,19 +24,20 @@
:indoor-model-source="indoorModelSource"
:floors="guideFloors"
:normalize-floor-id="normalizeGuideFloorId"
indoor-initial-view="floor"
indoor-initial-view="overview"
:indoor-view="indoorView"
:layer-mode="indoorLayerMode"
:active-floor="activeGuideFloor"
layer-mode-toggle-top="154px"
floor-top="420px"
floor-side="left"
floor-top="clamp(128px, 18vh, 180px)"
floor-max-height="min(342px, calc(100vh - clamp(128px, 18vh, 180px) - 300px))"
floor-side="right"
show-floor-header
:show-layer-mode-toggle="false"
:show-floor="is3DMode"
tools-top="130px"
tools-top="calc(50% - 126px)"
show-zoom-controls
zoom-controls-top="560px"
zoom-controls-top="calc(100vh - 284px)"
show-location-control
location-control-bottom="54px"
show-more-control
@@ -44,6 +45,8 @@
:tools="guide3DTools"
:route-preview="activeRoutePreview"
:show-route="Boolean(activeRoutePreview)"
:auto-switch-threshold-low="0.58"
:auto-switch-threshold-high="1.18"
@search-tap="handleGuideSearchTap"
@mode-change="handleModeChange"
@floor-change="handleFloorChange"
@@ -107,8 +110,17 @@
</template>
</view>
<view v-if="showGuideMoreMenu && !showRoutePlanner" class="guide-more-popover">
<view class="more-popover-handle"></view>
<view
v-if="showGuideMoreMenu && !showRoutePlanner"
class="guide-more-popover"
@touchstart.stop="handleGuideMoreTouchStart"
@touchmove.stop="handleGuideMoreTouchMove"
@touchend.stop="handleGuideMoreTouchEnd"
@mousedown.stop="handleGuideMoreMouseStart"
@mousemove.stop="handleGuideMoreMouseMove"
@mouseup.stop="handleGuideMoreMouseEnd"
>
<view class="more-popover-handle" @tap.stop="closeGuideMoreMenu"></view>
<view class="more-popover-grid">
<view class="more-action" @tap="handleMoreRouteGuide">
<text class="more-action-title">线路预览</text>
@@ -122,14 +134,6 @@
<text class="more-action-title">推荐入口</text>
<text class="more-action-desc">入口参考</text>
</view>
<view class="more-action" @tap="handleEnter3DMode">
<text class="more-action-title">室内3D</text>
<text class="more-action-desc">位置预览</text>
</view>
<view class="more-action" @tap="handleMoreToggleLayer">
<text class="more-action-title">{{ indoorLayerMode === 'multi' ? '单层' : '多层' }}</text>
<text class="more-action-desc">切换楼层</text>
</view>
</view>
</view>
@@ -153,6 +157,7 @@
@clear="handleRouteClear"
@view-route="handleRouteView"
@simulate-guide="handleRouteSimulate"
@back="handleRouteBack"
/>
<view v-if="isSimulatingRoute && activeRoutePreview" class="route-sim-top-pill">
@@ -262,7 +267,7 @@ const initialTopTab = (): GuideTopTab => topTabFromHash() || 'guide'
// 3D 模式状态
const is3DMode = ref(true)
const guideOutdoorState = ref<'home' | 'entrance'>('home')
const indoorView = ref<GuideIndoorView>('floor')
const indoorView = ref<GuideIndoorView>('overview')
const activeGuideFloor = ref('1F')
const selectedGuidePoi = ref<GuideRenderPoi | null>(null)
@@ -281,6 +286,8 @@ const activeRoutePreview = ref<GuideRouteResult | null>(null)
const showGuideMoreMenu = ref(false)
const isSimulatingRoute = ref(false)
const isPoiCardCollapsed = ref(false)
const guideMoreTouchStartY = ref(0)
const guideMoreTouchCurrentY = ref(0)
const indoorNavAssetBaseUrl = guideUseCase.getAssetBaseUrl()
const indoorModelSource = guideUseCase.getModelSource()
@@ -530,8 +537,9 @@ const buildExplainHallItems = (
}
const handleGuideSearchTap = () => {
uni.navigateTo({
url: '/pages/search/index'
uni.showToast({
title: '功能待开放',
icon: 'none'
})
}
@@ -707,6 +715,19 @@ const handleRouteClear = () => {
clearRoutePreviewState()
}
const handleRouteBack = () => {
if (activeRoutePreview.value) {
activeRoutePreview.value = null
routePlanError.value = ''
isSimulatingRoute.value = false
showRoutePlanner.value = true
return
}
showRoutePlanner.value = false
isSimulatingRoute.value = false
}
const handleRouteStartPointChange = (point: RoutePointOption | null) => {
routeStartPoint.value = point
clearRoutePreviewState()
@@ -789,7 +810,7 @@ const handleRouteSimulate = () => {
// 进入 3D 室内模式
const handleEnter3DMode = () => {
console.log('进入 3D 室内模式')
indoorView.value = 'floor'
indoorView.value = 'overview'
is3DMode.value = true
guideOutdoorState.value = 'home'
showGuideMoreMenu.value = false
@@ -811,7 +832,7 @@ const handleModeChange = (mode: '2d' | '3d') => {
isSimulatingRoute.value = false
clearRoutePreviewState()
} else {
indoorView.value = 'floor'
indoorView.value = 'overview'
if (!routePointOptions.value.length) {
void loadRouteTargets()
}
@@ -841,6 +862,54 @@ const handleGuideMoreClick = () => {
selectedGuidePoi.value = null
}
const closeGuideMoreMenu = () => {
showGuideMoreMenu.value = false
}
const getGestureClientY = (event: TouchEvent | MouseEvent) => {
if ('changedTouches' in event) {
return event.changedTouches?.[0]?.clientY
?? event.touches?.[0]?.clientY
?? 0
}
return event.clientY
}
const handleGuideMoreTouchStart = (event: TouchEvent) => {
const clientY = getGestureClientY(event)
guideMoreTouchStartY.value = clientY
guideMoreTouchCurrentY.value = clientY
}
const handleGuideMoreTouchMove = (event: TouchEvent) => {
guideMoreTouchCurrentY.value = getGestureClientY(event)
}
const handleGuideMoreTouchEnd = (event: TouchEvent) => {
guideMoreTouchCurrentY.value = getGestureClientY(event)
if (guideMoreTouchCurrentY.value - guideMoreTouchStartY.value > 48) {
closeGuideMoreMenu()
}
}
const handleGuideMoreMouseStart = (event: MouseEvent) => {
const clientY = getGestureClientY(event)
guideMoreTouchStartY.value = clientY
guideMoreTouchCurrentY.value = clientY
}
const handleGuideMoreMouseMove = (event: MouseEvent) => {
guideMoreTouchCurrentY.value = getGestureClientY(event)
}
const handleGuideMoreMouseEnd = (event: MouseEvent) => {
guideMoreTouchCurrentY.value = getGestureClientY(event)
if (guideMoreTouchCurrentY.value - guideMoreTouchStartY.value > 48) {
closeGuideMoreMenu()
}
}
const handleMoreRouteGuide = () => {
openRoutePlanner()
}
@@ -864,13 +933,6 @@ const handleMoreRecommendedEntrance = () => {
openOutdoorReference('entrance')
}
const handleMoreToggleLayer = () => {
is3DMode.value = true
guideOutdoorState.value = 'home'
indoorView.value = indoorLayerMode.value === 'multi' ? 'floor' : 'multi'
showGuideMoreMenu.value = false
}
const guideShellMode = computed(() => (is3DMode.value ? '3d' : '2d'))
const guideMapType = computed(() => (is3DMode.value ? 'indoor' : 'outdoor'))
const guideOutdoorVariant = computed(() => (