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

175
src/components/navigation/GuideBottomNav.vue
View File

@@ -1,175 +0,0 @@
<template>
<view class="guide-bottom-nav">
<view class="guide-bottom-nav-inner">
<view
v-for="tab in bottomNavTabs"
:key="tab.id"
class="guide-bottom-tab"
:class="[`tab-${tab.id}`, { active: activeTab === tab.id }]"
@tap="handleTabTap(tab.id)"
>
<view class="guide-bottom-icon" aria-hidden="true">
<template v-if="tab.id === 'guide'">
<view class="guide-icon-pin"></view>
<view class="guide-icon-path"></view>
</template>
<template v-else>
<view class="explain-icon-wave top"></view>
<view class="explain-icon-wave middle"></view>
<view class="explain-icon-wave bottom"></view>
</template>
</view>
<text class="guide-bottom-label">{{ tab.label }}</text>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import {
GUIDE_TOP_TABS,
type GuideTopTab
} from '@/utils/guideTopTabs'
const bottomNavTabs = GUIDE_TOP_TABS.filter((tab) => tab.id !== 'explain')
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-bottom-nav {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
box-sizing: border-box;
background: rgba(255, 255, 255, 0.96);
border-top: 1px solid #e6e8df;
box-shadow: 0 -10px 24px rgba(36, 49, 42, 0.1);
z-index: 2200;
transform: translateZ(0);
}
.guide-bottom-nav-inner {
height: 56px;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
padding: 4px;
box-sizing: border-box;
background: #f4f5ef;
border: 1px solid #dfe2d9;
border-radius: 8px;
}
.guide-bottom-tab {
min-width: 0;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
border-radius: 6px;
color: #515151;
transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.guide-bottom-tab.active {
background: #000000;
color: var(--museum-accent);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}
.guide-bottom-tab:active {
transform: translateY(1px);
}
.guide-bottom-icon {
position: relative;
width: 22px;
height: 22px;
flex: 0 0 22px;
color: currentColor;
}
.guide-icon-pin {
position: absolute;
left: 4px;
top: 1px;
width: 12px;
height: 15px;
box-sizing: border-box;
border: 2px solid currentColor;
border-radius: 8px 8px 8px 0;
transform: rotate(-45deg);
}
.guide-icon-pin::after {
content: '';
position: absolute;
left: 3px;
top: 3px;
width: 3px;
height: 3px;
background: currentColor;
border-radius: 50%;
}
.guide-icon-path {
position: absolute;
left: 1px;
right: 1px;
bottom: 2px;
height: 6px;
border-bottom: 2px solid currentColor;
border-left: 2px solid currentColor;
border-radius: 0 0 0 8px;
}
.explain-icon-wave {
position: absolute;
left: 2px;
right: 2px;
height: 4px;
border: 2px solid currentColor;
border-left: 0;
border-right: 0;
border-bottom: 0;
border-radius: 999px 999px 0 0;
}
.explain-icon-wave.top {
top: 3px;
}
.explain-icon-wave.middle {
top: 9px;
left: 5px;
}
.explain-icon-wave.bottom {
top: 15px;
right: 6px;
}
.guide-bottom-label {
font-size: 15px;
line-height: 20px;
font-weight: 700;
color: currentColor;
}
</style>

10
src/components/navigation/GuidePageFrame.vue
View File

@@ -1,7 +1,7 @@
<template>
<view
class="guide-page-frame"
:class="[`variant-${variant}`, { 'no-top-tabs': !showTopTabs, 'has-bottom-nav': showBottomNav }]"
:class="[`variant-${variant}`, { 'no-top-tabs': !showTopTabs }]"
>
<GuideTopTabs
v-if="showTopTabs"
@@ -32,16 +32,10 @@
<view class="guide-page-frame-body">
<slot></slot>
</view>
<GuideBottomNav
v-if="showBottomNav"
:active-tab="activeTab"
@tab-change="handleTabChange"
/>
</view>
</template>
<script setup lang="ts">
import GuideBottomNav from '@/components/navigation/GuideBottomNav.vue'
import GuideTopTabs from '@/components/navigation/GuideTopTabs.vue'
import type { GuideTopTab } from '@/utils/guideTopTabs'
@@ -51,7 +45,6 @@ withDefaults(defineProps<{
topTabsVariant?: 'underline' | 'segmented'
topTabsTop?: string
showTopTabs?: boolean
showBottomNav?: boolean
showBack?: boolean
showCancel?: boolean
backLabel?: string
@@ -62,7 +55,6 @@ withDefaults(defineProps<{
topTabsVariant: 'underline',
topTabsTop: '0',
showTopTabs: true,
showBottomNav: false,
showBack: false,
showCancel: false,
backLabel: '返回',

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

@@ -395,7 +395,7 @@ const handlePrimaryAction = () => {
position: absolute;
left: 12px;
right: 12px;
bottom: calc(env(safe-area-inset-bottom) + 112px);
bottom: calc(env(safe-area-inset-bottom) + 24px);
padding: 10px 14px 14px;
display: flex;
flex-direction: column;

1014
src/components/search/PoiSearchPanel.vue Normal file
View File

File diff suppressed because it is too large Load Diff

7
src/pages.json
View File

@@ -60,12 +60,5 @@
"navigationBarTitleText": "深圳自然博物馆",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#F3F3F3"
},
"tabBar": {
"color": "#333333",
"selectedColor": "#E0E100",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": []
}
}

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