chore: solidify guide P1 snapshot
This commit is contained in:
@@ -7,7 +7,12 @@
|
||||
ref="threeMapRef"
|
||||
class="indoor-three-map"
|
||||
:asset-base-url="indoorAssetBaseUrl"
|
||||
:initial-floor-id="activeFloorId"
|
||||
:initial-view="indoorInitialView"
|
||||
:show-controls="false"
|
||||
:show-poi="shouldShowIndoorPois"
|
||||
:target-focus="targetFocusRequest"
|
||||
@target-focus="handleTargetFocus"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 -->
|
||||
@@ -77,6 +82,27 @@
|
||||
|
||||
<slot name="overlay"></slot>
|
||||
|
||||
<view
|
||||
v-if="mapType === 'indoor' && showIndoorViewToggle"
|
||||
class="indoor-view-toggle"
|
||||
:style="indoorViewToggleStyle"
|
||||
>
|
||||
<view
|
||||
class="indoor-view-item"
|
||||
:class="{ active: indoorView === 'overview' }"
|
||||
@tap="handleIndoorViewChange('overview')"
|
||||
>
|
||||
<text class="indoor-view-label">全馆</text>
|
||||
</view>
|
||||
<view
|
||||
class="indoor-view-item"
|
||||
:class="{ active: indoorView === 'floor' }"
|
||||
@tap="handleIndoorViewChange('floor')"
|
||||
>
|
||||
<text class="indoor-view-label">楼层</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="showFloor" class="floor-switcher" :style="floorSwitcherStyle">
|
||||
<view
|
||||
v-for="floor in floors"
|
||||
@@ -116,16 +142,40 @@ import {
|
||||
navFloorIdFromLabel
|
||||
} from '@/services/navAssets'
|
||||
|
||||
interface TargetPoiFocusRequest {
|
||||
requestId: number | string
|
||||
poiId: string
|
||||
name?: string
|
||||
floorId: string
|
||||
floorLabel?: string
|
||||
primaryCategoryZh?: string
|
||||
positionGltf?: [number, number, number]
|
||||
}
|
||||
|
||||
interface TargetPoiFocusResult {
|
||||
requestId: number | string
|
||||
poiId: string
|
||||
floorId: string
|
||||
status: 'focused' | 'missing' | 'error'
|
||||
message?: string
|
||||
}
|
||||
|
||||
type IndoorViewMode = 'overview' | 'floor'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
searchText?: string
|
||||
activeMode?: '2d' | '3d'
|
||||
activeFloor?: string
|
||||
indoorView?: IndoorViewMode
|
||||
indoorInitialView?: IndoorViewMode
|
||||
searchTop?: string
|
||||
floorTop?: string
|
||||
indoorViewToggleTop?: string
|
||||
toolsTop?: string
|
||||
tools?: string[]
|
||||
showSearch?: boolean
|
||||
showFloor?: boolean
|
||||
showIndoorViewToggle?: boolean
|
||||
modeTop?: string
|
||||
modeLayout?: 'full' | 'status'
|
||||
modeStatus?: string
|
||||
@@ -134,16 +184,21 @@ const props = withDefaults(defineProps<{
|
||||
outdoorVariant?: 'home' | 'entrance'
|
||||
indoorAssetBaseUrl?: string
|
||||
dimmed?: boolean
|
||||
targetFocusRequest?: TargetPoiFocusRequest | null
|
||||
}>(), {
|
||||
searchText: '搜索设施、展厅、入口',
|
||||
activeMode: '3d',
|
||||
activeFloor: '1F',
|
||||
indoorView: 'floor',
|
||||
indoorInitialView: 'floor',
|
||||
searchTop: '16px',
|
||||
floorTop: '164px',
|
||||
indoorViewToggleTop: '154px',
|
||||
toolsTop: '406px',
|
||||
tools: () => [] as string[],
|
||||
showSearch: true,
|
||||
showFloor: true,
|
||||
showIndoorViewToggle: false,
|
||||
modeTop: '60px',
|
||||
modeLayout: 'full',
|
||||
modeStatus: '',
|
||||
@@ -151,7 +206,8 @@ const props = withDefaults(defineProps<{
|
||||
mapType: 'indoor',
|
||||
outdoorVariant: 'home',
|
||||
indoorAssetBaseUrl: NAV_ASSET_BASE_URL,
|
||||
dimmed: false
|
||||
dimmed: false,
|
||||
targetFocusRequest: null
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -159,11 +215,18 @@ const emit = defineEmits<{
|
||||
modeChange: [mode: '2d' | '3d']
|
||||
floorChange: [floor: string]
|
||||
toolClick: [tool: string]
|
||||
indoorViewChange: [view: IndoorViewMode]
|
||||
targetFocus: [result: TargetPoiFocusResult]
|
||||
}>()
|
||||
|
||||
const threeMapRef = ref<{ switchFloor?: (floorId: string) => Promise<void> | void } | null>(null)
|
||||
const threeMapRef = ref<{
|
||||
switchFloor?: (floorId: string) => Promise<void> | void
|
||||
showOverview?: () => Promise<void> | void
|
||||
} | null>(null)
|
||||
const floors = NAV_FLOOR_OPTIONS.map((floor) => floor.label)
|
||||
|
||||
const activeFloorId = computed(() => navFloorIdFromLabel(props.activeFloor))
|
||||
|
||||
const searchFieldStyle = computed(() => ({
|
||||
top: props.searchTop
|
||||
}))
|
||||
@@ -172,6 +235,10 @@ const floorSwitcherStyle = computed(() => ({
|
||||
top: props.floorTop
|
||||
}))
|
||||
|
||||
const indoorViewToggleStyle = computed(() => ({
|
||||
top: props.indoorViewToggleTop
|
||||
}))
|
||||
|
||||
const modeRowStyle = computed(() => ({
|
||||
top: props.modeTop
|
||||
}))
|
||||
@@ -180,6 +247,8 @@ const toolStackStyle = computed(() => ({
|
||||
top: props.toolsTop
|
||||
}))
|
||||
|
||||
const shouldShowIndoorPois = computed(() => Boolean(props.targetFocusRequest))
|
||||
|
||||
const handleSearchTap = () => {
|
||||
emit('searchTap')
|
||||
}
|
||||
@@ -191,12 +260,27 @@ const handleModeChange = (mode: '2d' | '3d') => {
|
||||
const handleFloorChange = (floor: string) => {
|
||||
const floorId = navFloorIdFromLabel(floor)
|
||||
void threeMapRef.value?.switchFloor?.(floorId)
|
||||
emit('indoorViewChange', 'floor')
|
||||
emit('floorChange', floor)
|
||||
}
|
||||
|
||||
const handleIndoorViewChange = (view: IndoorViewMode) => {
|
||||
if (view === 'overview') {
|
||||
void threeMapRef.value?.showOverview?.()
|
||||
} else {
|
||||
void threeMapRef.value?.switchFloor?.(activeFloorId.value)
|
||||
}
|
||||
|
||||
emit('indoorViewChange', view)
|
||||
}
|
||||
|
||||
const handleToolClick = (tool: string) => {
|
||||
emit('toolClick', tool)
|
||||
}
|
||||
|
||||
const handleTargetFocus = (result: TargetPoiFocusResult) => {
|
||||
emit('targetFocus', result)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -434,6 +518,42 @@ const handleToolClick = (tool: string) => {
|
||||
z-index: 35;
|
||||
}
|
||||
|
||||
.indoor-view-toggle {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
width: 58px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 1px solid #dde5df;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 18px rgba(110, 127, 115, 0.12);
|
||||
z-index: 36;
|
||||
}
|
||||
|
||||
.indoor-view-item {
|
||||
min-height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 7px;
|
||||
color: #59645d;
|
||||
}
|
||||
|
||||
.indoor-view-item.active {
|
||||
background: var(--museum-accent);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 6px 12px rgba(82, 107, 91, 0.18);
|
||||
}
|
||||
|
||||
.indoor-view-label {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.floor-item {
|
||||
position: relative;
|
||||
height: 36px;
|
||||
|
||||
144
src/components/navigation/GuidePageFrame.vue
Normal file
144
src/components/navigation/GuidePageFrame.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<view class="guide-page-frame" :class="`variant-${variant}`">
|
||||
<GuideTopTabs
|
||||
:active-tab="activeTab"
|
||||
@tab-change="handleTabChange"
|
||||
/>
|
||||
<view
|
||||
v-if="showBack || showCancel"
|
||||
class="guide-page-frame-actions"
|
||||
>
|
||||
<view
|
||||
v-if="showBack"
|
||||
class="frame-action frame-action-back"
|
||||
@tap.stop="handleBackTap"
|
||||
>
|
||||
<text class="frame-action-text">{{ backLabel }}</text>
|
||||
</view>
|
||||
<view
|
||||
v-if="showCancel"
|
||||
class="frame-action frame-action-cancel"
|
||||
@tap.stop="handleCancelTap"
|
||||
>
|
||||
<text class="frame-action-text">{{ cancelLabel }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="guide-page-frame-body">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import GuideTopTabs from '@/components/navigation/GuideTopTabs.vue'
|
||||
import type { GuideTopTab } from '@/utils/guideTopTabs'
|
||||
|
||||
withDefaults(defineProps<{
|
||||
activeTab?: GuideTopTab
|
||||
variant?: 'overlay' | 'static'
|
||||
showBack?: boolean
|
||||
showCancel?: boolean
|
||||
backLabel?: string
|
||||
cancelLabel?: string
|
||||
}>(), {
|
||||
activeTab: 'guide',
|
||||
variant: 'overlay',
|
||||
showBack: false,
|
||||
showCancel: false,
|
||||
backLabel: '返回',
|
||||
cancelLabel: '取消'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
tabChange: [tab: GuideTopTab]
|
||||
back: []
|
||||
cancel: []
|
||||
}>()
|
||||
|
||||
const handleTabChange = (tab: GuideTopTab) => {
|
||||
emit('tabChange', tab)
|
||||
}
|
||||
|
||||
const handleBackTap = () => {
|
||||
emit('back')
|
||||
}
|
||||
|
||||
const handleCancelTap = () => {
|
||||
emit('cancel')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.guide-page-frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
background: var(--museum-bg-map);
|
||||
}
|
||||
|
||||
.guide-page-frame-body {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.variant-overlay .guide-page-frame-body {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.variant-static .guide-page-frame-body {
|
||||
top: 44px;
|
||||
background: var(--museum-bg-light);
|
||||
}
|
||||
|
||||
.guide-page-frame-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 44px;
|
||||
z-index: 2010;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.frame-action {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
min-width: 54px;
|
||||
height: 44px;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.frame-action-back {
|
||||
left: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.frame-action-cancel {
|
||||
right: 0;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.frame-action-text {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.guide-page-frame {
|
||||
max-width: 430px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
src/components/navigation/GuideTopTabs.vue
Normal file
90
src/components/navigation/GuideTopTabs.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="guide-top-tabs">
|
||||
<view
|
||||
v-for="tab in GUIDE_TOP_TABS"
|
||||
:key="tab.id"
|
||||
class="guide-top-tab"
|
||||
:class="{ active: activeTab === tab.id }"
|
||||
@tap="handleTabTap(tab.id)"
|
||||
>
|
||||
<view v-if="activeTab === tab.id" class="guide-top-tab-indicator"></view>
|
||||
<text class="guide-top-tab-label">{{ tab.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
GUIDE_TOP_TABS,
|
||||
type GuideTopTab
|
||||
} from '@/utils/guideTopTabs'
|
||||
|
||||
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-top-tabs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-bottom: 1px solid #eceee8;
|
||||
box-sizing: border-box;
|
||||
z-index: 2000;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.guide-top-tab {
|
||||
position: relative;
|
||||
width: 75px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.guide-top-tab-label {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.guide-top-tab.active .guide-top-tab-label {
|
||||
font-weight: 500;
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
.guide-top-tab-indicator {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 26px;
|
||||
width: 39px;
|
||||
height: 6px;
|
||||
background: var(--museum-accent);
|
||||
border-radius: 3px;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
212
src/components/navigation/LocationPreview.vue
Normal file
212
src/components/navigation/LocationPreview.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<view class="location-preview">
|
||||
<view class="preview-header">
|
||||
<text class="preview-title">位置预览</text>
|
||||
<text class="preview-summary">{{ summary }}</text>
|
||||
</view>
|
||||
|
||||
<view class="preview-steps">
|
||||
<view
|
||||
v-for="(step, index) in steps"
|
||||
:key="step.id"
|
||||
class="preview-step"
|
||||
>
|
||||
<view
|
||||
class="step-dot"
|
||||
:class="{ target: index === steps.length - 1 }"
|
||||
></view>
|
||||
<view v-if="index === 0" class="step-connector"></view>
|
||||
<text class="step-text">{{ step.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="action-row">
|
||||
<view class="action-btn secondary" @tap="emit('viewOutdoorMap')">
|
||||
<text class="action-text">查看室外地图</text>
|
||||
</view>
|
||||
<view class="action-btn primary" @tap="handleShowTargetLocation">
|
||||
<text class="action-text">查看目标位置</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface PreviewStep {
|
||||
id: string
|
||||
text: string
|
||||
}
|
||||
|
||||
interface PreviewTargetLocation {
|
||||
poiId: string
|
||||
name: string
|
||||
floorId: string
|
||||
floorLabel?: string
|
||||
primaryCategoryZh?: string
|
||||
positionGltf?: [number, number, number]
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
summary: string
|
||||
steps: PreviewStep[]
|
||||
targetLocation?: PreviewTargetLocation | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
viewOutdoorMap: []
|
||||
showTargetLocation: [target: PreviewTargetLocation | null]
|
||||
}>()
|
||||
|
||||
const handleShowTargetLocation = () => {
|
||||
emit('showTargetLocation', props.targetLocation || null)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.location-preview {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(env(safe-area-inset-bottom) + 34px);
|
||||
height: 222px;
|
||||
padding: 22px 20px 16px;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
|
||||
z-index: 45;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.preview-summary {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #6b7178;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.preview-steps {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.preview-step {
|
||||
position: relative;
|
||||
min-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.step-dot {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
box-sizing: border-box;
|
||||
background: #000000;
|
||||
border-radius: 5px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.step-dot.target {
|
||||
background: var(--museum-accent);
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.step-connector {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 18px;
|
||||
width: 2px;
|
||||
height: 38px;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
#d9d9d9 0,
|
||||
#d9d9d9 5px,
|
||||
transparent 5px,
|
||||
transparent 9px
|
||||
);
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
bottom: 16px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.action-btn.secondary {
|
||||
width: 151px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
width: 168px;
|
||||
background: #000000;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.action-btn.primary .action-text {
|
||||
color: var(--museum-accent);
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.action-row {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.action-btn.secondary,
|
||||
.action-btn.primary {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user