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