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-07-05 22:14:22 +08:00
parent eca85b9fed
commit ad692e233a
10 changed files with 1094 additions and 1214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/explain/list.vue
View File

@@ -3,7 +3,6 @@
active-tab="explain"
variant="static"
:show-top-tabs="false"
show-bottom-nav
show-back
back-label="讲解首页"
@tab-change="handleTopTabChange"

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

@@ -3,7 +3,6 @@
active-tab="guide"
variant="overlay"
:show-top-tabs="false"
show-bottom-nav
show-back
@tab-change="handleTopTabChange"
@back="handlePageBack"
@@ -375,7 +374,7 @@ const handlePageBack = () => {
position: absolute;
left: 84px;
right: 16px;
bottom: calc(env(safe-area-inset-bottom) + 116px);
bottom: calc(env(safe-area-inset-bottom) + 24px);
min-height: 110px;
padding: 14px 14px 12px;
box-sizing: border-box;
@@ -498,7 +497,7 @@ const handlePageBack = () => {
.detail-restore {
position: absolute;
right: 18px;
bottom: calc(env(safe-area-inset-bottom) + 266px);
bottom: calc(env(safe-area-inset-bottom) + 152px);
height: 40px;
min-width: 74px;
padding: 0 12px;

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

@@ -3,7 +3,6 @@
:active-tab="currentTab"
variant="overlay"
:show-top-tabs="false"
show-bottom-nav
@tab-change="handleTabChange"
>
<GuideMapShell
@@ -16,6 +15,7 @@
mode-status-tone="glass"
search-top="20px"
search-variant="home"
:show-search="false"
:show-mode-row="false"
mode-top="80px"
:map-type="guideMapType"
@@ -43,7 +43,6 @@
:auto-switch-threshold-low="0.58"
:auto-switch-threshold-high="1.18"
:outdoor-nav-polylines="outdoorNavPolylines"
@search-tap="handleGuideSearchTap"
@mode-change="handleModeChange"
@floor-request="handleFloorRequest"
@floor-change="handleFloorChange"
@@ -111,7 +110,7 @@
</view>
<view
v-if="showGuideQuickActions"
v-if="showGuideFloatingActions"
class="guide-quick-actions"
>
<view class="guide-quick-action primary" @tap="handleMoreRouteGuide">
@@ -127,7 +126,7 @@
</view>
<text class="guide-quick-action-text">来馆</text>
</view>
<view class="guide-quick-action explain" @tap="handleExplainQuickTap">
<view class="guide-quick-action" @tap="handleExplainQuickTap">
<view class="guide-quick-icon explain">
<view class="guide-quick-explain-wave top"></view>
<view class="guide-quick-explain-wave middle"></view>
@@ -137,6 +136,16 @@
</view>
</view>
<view
v-if="showGuideHomeDock"
class="guide-home-dock"
>
<PoiSearchPanel
variant="home"
@expanded-change="handleHomeSearchExpandedChange"
/>
</view>
<RoutePlannerPanel
v-if="is3DMode"
:visible="showRoutePlanner"
@@ -263,6 +272,7 @@ import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
import GuideMapShell from '@/components/navigation/GuideMapShell.vue'
import RoutePlannerPanel from '@/components/navigation/RoutePlannerPanel.vue'
import OutdoorNavigationPanel from '@/components/navigation/OutdoorNavigationPanel.vue'
import PoiSearchPanel from '@/components/search/PoiSearchPanel.vue'
import type {
RoutePointOption
} from '@/components/navigation/RoutePointPicker.vue'
@@ -382,6 +392,7 @@ const isPoiCardCollapsed = ref(false)
const guideMapShellRef = ref<{
clearRoute?: () => void
} | null>(null)
const homeSearchExpanded = ref(false)
let launchOverlayFallbackTimer: ReturnType<typeof setTimeout> | null = null
let launchOverlayFadeTimer: ReturnType<typeof setTimeout> | null = null
@@ -527,12 +538,22 @@ const disableIndoorAutoExit = computed(() => (
|| isSimulatingRoute.value
))
const showGuideQuickActions = computed(() => (
const showGuideHomeDock = computed(() => (
currentTab.value === 'guide'
&& !showRoutePlanner.value
&& !showOutdoorNavPanel.value
&& !selectedGuidePoi.value
&& !isSimulatingRoute.value
&& !(guideOutdoorState.value === 'entrance' && !is3DMode.value)
))
const showGuideFloatingActions = computed(() => (
currentTab.value === 'guide'
&& !showRoutePlanner.value
&& !showOutdoorNavPanel.value
&& !selectedGuidePoi.value
&& !isSimulatingRoute.value
&& (!showGuideHomeDock.value || !homeSearchExpanded.value)
))
const toRoutePointOption = (target: GuideRouteTarget): RoutePointOption => ({
@@ -780,12 +801,6 @@ const buildExplainHallItems = (
})
}
const handleGuideSearchTap = () => {
uni.navigateTo({
url: '/pages/search/index'
})
}
const handleFloorRequest = ({ floorId, floorLabel }: { floorId: string; floorLabel: string }) => {
requestedFloorId.value = floorId
requestedFloorLabel.value = floorLabel
@@ -1222,6 +1237,10 @@ const handleExplainQuickTap = () => {
handleTabChange('explain')
}
const handleHomeSearchExpandedChange = (expanded: boolean) => {
homeSearchExpanded.value = expanded
}
const handleOutdoorNavClose = () => {
closeOutdoorNavPanel()
}
@@ -1618,7 +1637,7 @@ const handleExplainBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 112px);
bottom: calc(env(safe-area-inset-bottom) + 24px);
box-sizing: border-box;
background: rgba(255, 255, 255, 0.96);
border: 1px solid #e5e6de;
@@ -1777,35 +1796,45 @@ const handleExplainBack = () => {
color: var(--museum-accent);
}
.guide-quick-actions {
--guide-floating-control-width: 48px;
.guide-home-dock {
position: absolute;
top: 118px;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 16px);
padding: 12px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(255, 255, 255, 0.96);
border-radius: 16px;
box-shadow: 0 10px 28px rgba(36, 49, 42, 0.16);
z-index: 1003;
}
.guide-quick-actions {
position: absolute;
top: clamp(96px, 14vh, 118px);
right: 18px;
width: var(--guide-floating-control-width);
width: 48px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
z-index: 1002;
}
.guide-quick-action {
width: 100%;
height: 56px;
min-height: 0;
padding: 6px 4px;
width: 48px;
min-height: 56px;
padding: 7px 4px 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.95);
border: 1px solid #dde5df;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(230, 233, 224, 0.96);
border-radius: 8px;
box-shadow: 0 8px 18px rgba(110, 127, 115, 0.12);
box-shadow: 0 8px 22px rgba(36, 49, 42, 0.14);
}
.guide-quick-action.primary {
@@ -1813,11 +1842,6 @@ const handleExplainBack = () => {
border-color: #151713;
}
.guide-quick-action.explain {
background: rgba(245, 245, 237, 0.96);
border-color: #dfe4d8;
}
.guide-quick-action:active {
transform: translateY(1px);
}
@@ -1834,10 +1858,6 @@ const handleExplainBack = () => {
color: var(--museum-accent);
}
.guide-quick-action.explain .guide-quick-icon {
color: #151713;
}
.guide-quick-icon-floor {
position: absolute;
left: 3px;
@@ -1910,7 +1930,7 @@ const handleExplainBack = () => {
width: 100%;
font-size: 12px;
line-height: 16px;
font-weight: 600;
font-weight: 700;
color: #151713;
text-align: center;
white-space: nowrap;
@@ -1951,7 +1971,7 @@ const handleExplainBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 112px);
bottom: calc(env(safe-area-inset-bottom) + 24px);
min-height: 54px;
padding: 10px 10px 10px 14px;
display: flex;
@@ -2053,7 +2073,7 @@ const handleExplainBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 216px);
bottom: calc(env(safe-area-inset-bottom) + 128px);
height: 84px;
padding: 16px 10px 8px;
display: flex;
@@ -2191,7 +2211,7 @@ const handleExplainBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 216px);
bottom: calc(env(safe-area-inset-bottom) + 128px);
z-index: 1003;
}
@@ -2199,7 +2219,7 @@ const handleExplainBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 112px);
bottom: calc(env(safe-area-inset-bottom) + 24px);
height: 94px;
padding: 16px 16px 10px;
display: flex;
@@ -2255,7 +2275,7 @@ const handleExplainBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 116px);
bottom: calc(env(safe-area-inset-bottom) + 24px);
height: 158px;
padding: 18px 16px 14px;
box-sizing: border-box;

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

@@ -3,7 +3,6 @@
active-tab="guide"
variant="overlay"
:show-top-tabs="false"
show-bottom-nav
show-back
:show-cancel="isManualLocationPanelOpen"
@tab-change="handleTopTabChange"
@@ -846,7 +845,7 @@ const handlePageBack = () => {
position: absolute;
left: 16px;
right: 16px;
bottom: calc(env(safe-area-inset-bottom) + 116px);
bottom: calc(env(safe-area-inset-bottom) + 24px);
min-height: 170px;
padding: 22px 20px 20px;
display: flex;
@@ -863,7 +862,7 @@ const handlePageBack = () => {
position: absolute;
left: 16px;
right: 16px;
bottom: calc(env(safe-area-inset-bottom) + 116px);
bottom: calc(env(safe-area-inset-bottom) + 24px);
min-height: 156px;
padding: 24px 18px 16px;
display: flex;
@@ -897,7 +896,7 @@ const handlePageBack = () => {
.indoor-guide-peek {
position: absolute;
left: 50%;
bottom: calc(env(safe-area-inset-bottom) + 104px);
bottom: calc(env(safe-area-inset-bottom) + 24px);
width: 132px;
height: 38px;
display: flex;
@@ -1135,7 +1134,7 @@ const handlePageBack = () => {
position: absolute;
left: 0;
right: 0;
bottom: calc(env(safe-area-inset-bottom) + 116px);
bottom: calc(env(safe-area-inset-bottom) + 24px);
height: 196px;
padding: 21px 20px 14px;
box-sizing: border-box;
@@ -1275,7 +1274,7 @@ const handlePageBack = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 116px);
bottom: calc(env(safe-area-inset-bottom) + 24px);
height: 158px;
padding: 18px 16px 14px;
box-sizing: border-box;

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

File diff suppressed because it is too large Load Diff