diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue index 36ef063..1556aa3 100644 --- a/src/pages/index/index.vue +++ b/src/pages/index/index.vue @@ -39,8 +39,6 @@ tools-bottom="54px" show-zoom-controls zoom-controls-top="calc(100vh - 284px)" - show-more-control - more-control-bottom="54px" :route-preview="activeRoutePreview" :show-route="Boolean(activeRoutePreview)" :auto-switch-threshold-low="0.58" @@ -52,7 +50,6 @@ @indoor-view-change="handleIndoorViewChange" @poi-click="handleGuidePoiClick" @selection-clear="handleGuideSelectionClear" - @more-click="handleGuideMoreClick" @auto-switch="handleAutoSwitch" @map-tap="handleMapTapForOutdoorNav" > @@ -110,25 +107,14 @@ - - - - {{ routePlannerEntryTitle }} - {{ routePlannerEntryDesc }} - - - 来馆 - 导航到博物馆 - + + 室内导览 + + + 来馆 @@ -313,11 +299,8 @@ const routePlanError = ref('') const routePreviewUnavailableMessage = ref('') const routeReady = ref(false) const activeRoutePreview = ref(null) -const showGuideMoreMenu = ref(false) const isSimulatingRoute = ref(false) const isPoiCardCollapsed = ref(false) -const guideMoreTouchStartY = ref(0) -const guideMoreTouchCurrentY = ref(0) // GuideMapShell 组件引用，用于显式调用路线清除方法 const guideMapShellRef = ref<{ @@ -359,10 +342,12 @@ const routePlanSummary = computed(() => { const routePanelError = computed(() => routePlanError.value) -const routePlannerEntryTitle = computed(() => '室内导览') - -const routePlannerEntryDesc = computed(() => ( - routeReady.value ? '开始路线规划' : '查看室内位置' +const showGuideQuickActions = computed(() => ( + currentTab.value === 'guide' + && !showRoutePlanner.value + && !showOutdoorNavPanel.value + && !selectedGuidePoi.value + && !isSimulatingRoute.value )) const toRoutePointOption = (target: GuideRouteTarget): RoutePointOption => ({ @@ -432,7 +417,6 @@ const handleTabChange = (tabId: GuideTopTab) => { console.log('切换标签:', tabId) // 关闭可能打开的面板 - showGuideMoreMenu.value = false showRoutePlanner.value = false isSimulatingRoute.value = false isPoiCardCollapsed.value = false @@ -449,7 +433,6 @@ const syncTopTabFromHash = () => { currentTab.value = tab loadTopTabData(tab) if (tabChanged) { - showGuideMoreMenu.value = false showRoutePlanner.value = false isSimulatingRoute.value = false isPoiCardCollapsed.value = false @@ -625,7 +608,6 @@ const handleGuidePoiClick = (poi: GuideRenderPoi) => { selectedGuidePoi.value = poi isPoiCardCollapsed.value = false indoorView.value = 'floor' - showGuideMoreMenu.value = false isSimulatingRoute.value = false const matchedFloor = guideFloors.value.find((floor) => floor.id === poi.floorId) activeGuideFloor.value = matchedFloor?.label || poi.floorId @@ -682,7 +664,6 @@ const handlePreviewSelectedPoi = () => { if (!selectedGuidePoi.value) return indoorView.value = 'floor' showRoutePlanner.value = false - showGuideMoreMenu.value = false isSimulatingRoute.value = false } @@ -739,7 +720,6 @@ const openRoutePlanner = () => { is3DMode.value = true indoorView.value = indoorView.value === 'overview' ? 'floor' : indoorView.value guideOutdoorState.value = 'home' - showGuideMoreMenu.value = false isPoiCardCollapsed.value = false isSimulatingRoute.value = false if (!routePointOptions.value.length) { @@ -850,7 +830,6 @@ const handleRouteSimulate = () => { showRoutePlanner.value = false selectedGuidePoi.value = null isPoiCardCollapsed.value = false - showGuideMoreMenu.value = false isSimulatingRoute.value = true } @@ -860,7 +839,6 @@ const handleEnter3DMode = () => { indoorView.value = 'overview' is3DMode.value = true guideOutdoorState.value = 'home' - showGuideMoreMenu.value = false if (!routePointOptions.value.length) { void loadRouteTargets() } @@ -875,7 +853,6 @@ const handleModeChange = (mode: '2d' | '3d') => { selectedGuidePoi.value = null isPoiCardCollapsed.value = false showRoutePlanner.value = false - showGuideMoreMenu.value = false isSimulatingRoute.value = false clearRoutePreviewState() } else { @@ -904,60 +881,6 @@ const handleSwitchEntrance = () => { guideOutdoorState.value = 'home' } -const handleGuideMoreClick = () => { - showGuideMoreMenu.value = !showGuideMoreMenu.value - selectedGuidePoi.value = null -} - -const closeGuideMoreMenu = () => { - showGuideMoreMenu.value = false - showOutdoorNavPanel.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() } @@ -965,7 +888,6 @@ const handleMoreRouteGuide = () => { // 室外导航处理函数 const openOutdoorNavPanel = () => { showOutdoorNavPanel.value = true - showGuideMoreMenu.value = false showRoutePlanner.value = false selectedGuidePoi.value = null isPoiCardCollapsed.value = false @@ -1159,7 +1081,6 @@ const handleExplainBack = () => { currentTab.value = 'guide' syncTopTabToUrl('guide') loadTopTabData('guide') - showGuideMoreMenu.value = false showRoutePlanner.value = false isSimulatingRoute.value = false isPoiCardCollapsed.value = false @@ -1177,8 +1098,7 @@ const handleExplainBack = () => { z-index: 10; } -.guide-poi-card, -.guide-more-popover { +.guide-poi-card { position: absolute; left: 12px; right: 12px; @@ -1199,8 +1119,7 @@ const handleExplainBack = () => { padding: 8px 10px 10px; } -.poi-card-handle, -.more-popover-handle { +.poi-card-handle { width: 38px; height: 4px; margin: 0 auto 10px; @@ -1342,42 +1261,46 @@ const handleExplainBack = () => { color: var(--museum-accent); } -.guide-more-popover { - padding: 10px 12px 12px; -} - -.more-popover-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 8px; -} - -.more-action { - min-height: 64px; - padding: 10px 8px; +.guide-quick-actions { + position: absolute; + right: 18px; + bottom: calc(env(safe-area-inset-bottom) + 54px); display: flex; flex-direction: column; - justify-content: center; - gap: 4px; - box-sizing: border-box; - background: #f6f7f4; - border: 1px solid #e5e6de; - border-radius: 8px; + align-items: stretch; + gap: 10px; + z-index: 1002; } -.more-action-title { - font-size: 14px; - line-height: 20px; - font-weight: 700; +.guide-quick-action { + width: 84px; + min-height: 38px; + padding: 0 12px; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + background: rgba(255, 255, 255, 0.95); + border: 1px solid #dde5df; + border-radius: 8px; + box-shadow: 0 8px 18px rgba(110, 127, 115, 0.12); +} + +.guide-quick-action.primary { + background: #151713; + border-color: #151713; +} + +.guide-quick-action-text { + font-size: 13px; + line-height: 18px; + font-weight: 600; color: #151713; text-align: center; } -.more-action-desc { - font-size: 11px; - line-height: 15px; - color: #696962; - text-align: center; +.guide-quick-action-text.primary { + color: var(--museum-accent); } .route-sim-top-pill {