chore: freeze guide and explain update
This commit is contained in:
421
src/components/navigation/RoutePlannerPanel.vue
Normal file
421
src/components/navigation/RoutePlannerPanel.vue
Normal file
@@ -0,0 +1,421 @@
|
||||
<template>
|
||||
<view v-if="visible" class="route-planner-panel">
|
||||
<view class="panel-handle"></view>
|
||||
<view class="panel-header">
|
||||
<view class="panel-title-group">
|
||||
<text class="panel-title">室内到室内</text>
|
||||
<text v-if="summary" class="panel-summary">{{ summary }}</text>
|
||||
</view>
|
||||
<view class="panel-clear" @tap="handleClear">
|
||||
<text class="panel-clear-text">清除</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="point-row">
|
||||
<view class="point-card" @tap="openPicker('start')">
|
||||
<view class="point-dot start"></view>
|
||||
<text class="point-label">起点</text>
|
||||
<text class="point-name" :class="{ placeholder: !startPoint }">
|
||||
{{ startPoint?.name || '选择起点' }}
|
||||
</text>
|
||||
<text v-if="startPoint" class="point-meta">{{ pointMeta(startPoint) }}</text>
|
||||
</view>
|
||||
|
||||
<view class="swap-btn" @tap="handleSwap">
|
||||
<text class="swap-text">⇅</text>
|
||||
</view>
|
||||
|
||||
<view class="point-card" @tap="openPicker('end')">
|
||||
<view class="point-dot end"></view>
|
||||
<text class="point-label">终点</text>
|
||||
<text class="point-name" :class="{ placeholder: !endPoint }">
|
||||
{{ endPoint?.name || '选择终点' }}
|
||||
</text>
|
||||
<text v-if="endPoint" class="point-meta">{{ pointMeta(endPoint) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loading || error || summary" class="panel-status">
|
||||
<text v-if="loading" class="panel-status-text">路径加载中</text>
|
||||
<text v-else-if="error" class="panel-status-text error">{{ error }}</text>
|
||||
<text v-else class="panel-status-text">{{ summary }}</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="view-route-btn"
|
||||
:class="{ disabled: !canViewRoute }"
|
||||
@tap="handlePrimaryAction"
|
||||
>
|
||||
<text class="view-route-text">{{ primaryActionText }}</text>
|
||||
</view>
|
||||
|
||||
<RoutePointPicker
|
||||
:visible="pickerMode !== ''"
|
||||
:title="pickerTitle"
|
||||
:placeholder="pickerPlaceholder"
|
||||
:options="pointOptions"
|
||||
:selected-poi-id="activeSelectedPoiId"
|
||||
:loading="pickerLoading"
|
||||
:error="pickerError"
|
||||
:empty-text="pickerEmptyText"
|
||||
@close="closePicker"
|
||||
@select="handlePointSelect"
|
||||
@search="handlePickerSearch"
|
||||
@keyword-change="handlePickerKeywordChange"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import RoutePointPicker, {
|
||||
type RoutePointOption
|
||||
} from '@/components/navigation/RoutePointPicker.vue'
|
||||
|
||||
type PickerMode = '' | 'start' | 'end'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
visible?: boolean
|
||||
startPoint?: RoutePointOption | null
|
||||
endPoint?: RoutePointOption | null
|
||||
pointOptions?: RoutePointOption[]
|
||||
hasRoutePreview?: boolean
|
||||
loading?: boolean
|
||||
error?: string
|
||||
summary?: string
|
||||
pickerLoading?: boolean
|
||||
pickerError?: string
|
||||
pickerEmptyText?: string
|
||||
}>(), {
|
||||
visible: true,
|
||||
startPoint: null,
|
||||
endPoint: null,
|
||||
pointOptions: () => [] as RoutePointOption[],
|
||||
hasRoutePreview: false,
|
||||
loading: false,
|
||||
error: '',
|
||||
summary: '',
|
||||
pickerLoading: false,
|
||||
pickerError: '',
|
||||
pickerEmptyText: '暂无匹配地点'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:startPoint': [point: RoutePointOption | null]
|
||||
'update:endPoint': [point: RoutePointOption | null]
|
||||
startChange: [point: RoutePointOption]
|
||||
endChange: [point: RoutePointOption]
|
||||
pickerOpen: [mode: 'start' | 'end']
|
||||
pickerClose: []
|
||||
search: [payload: { mode: 'start' | 'end'; keyword: string }]
|
||||
swap: []
|
||||
clear: []
|
||||
viewRoute: [payload: { startPoint: RoutePointOption; endPoint: RoutePointOption }]
|
||||
simulateGuide: []
|
||||
}>()
|
||||
|
||||
const pickerMode = ref<PickerMode>('')
|
||||
|
||||
const pickerTitle = computed(() => (
|
||||
pickerMode.value === 'start' ? '选择起点' : '选择终点'
|
||||
))
|
||||
|
||||
const pickerPlaceholder = computed(() => (
|
||||
pickerMode.value === 'start' ? '搜索起点' : '搜索终点'
|
||||
))
|
||||
|
||||
const activeSelectedPoiId = computed(() => (
|
||||
pickerMode.value === 'start'
|
||||
? props.startPoint?.poiId || ''
|
||||
: props.endPoint?.poiId || ''
|
||||
))
|
||||
|
||||
const canViewRoute = computed(() => Boolean(
|
||||
props.startPoint
|
||||
&& props.endPoint
|
||||
&& !props.loading
|
||||
&& props.startPoint.poiId !== props.endPoint.poiId
|
||||
))
|
||||
|
||||
const primaryActionText = computed(() => (
|
||||
props.hasRoutePreview ? '模拟导览' : '生成线路'
|
||||
))
|
||||
|
||||
const pointMeta = (point: RoutePointOption) => {
|
||||
return point.categoryLabel
|
||||
? `${point.floorLabel} · ${point.categoryLabel}`
|
||||
: point.floorLabel
|
||||
}
|
||||
|
||||
const openPicker = (mode: 'start' | 'end') => {
|
||||
pickerMode.value = mode
|
||||
emit('search', { mode, keyword: '' })
|
||||
emit('pickerOpen', mode)
|
||||
}
|
||||
|
||||
const closePicker = () => {
|
||||
pickerMode.value = ''
|
||||
emit('pickerClose')
|
||||
}
|
||||
|
||||
const handlePointSelect = (point: RoutePointOption) => {
|
||||
if (pickerMode.value === 'start') {
|
||||
emit('update:startPoint', point)
|
||||
emit('startChange', point)
|
||||
} else if (pickerMode.value === 'end') {
|
||||
emit('update:endPoint', point)
|
||||
emit('endChange', point)
|
||||
}
|
||||
|
||||
closePicker()
|
||||
}
|
||||
|
||||
const handlePickerSearch = (keyword: string) => {
|
||||
if (!pickerMode.value) return
|
||||
emit('search', { mode: pickerMode.value, keyword })
|
||||
}
|
||||
|
||||
const handlePickerKeywordChange = (keyword: string) => {
|
||||
if (!pickerMode.value) return
|
||||
emit('search', { mode: pickerMode.value, keyword })
|
||||
}
|
||||
|
||||
const handleSwap = () => {
|
||||
emit('swap')
|
||||
}
|
||||
|
||||
const handleClear = () => {
|
||||
emit('clear')
|
||||
}
|
||||
|
||||
const handleViewRoute = () => {
|
||||
if (!canViewRoute.value || !props.startPoint || !props.endPoint) return
|
||||
|
||||
emit('viewRoute', {
|
||||
startPoint: props.startPoint,
|
||||
endPoint: props.endPoint
|
||||
})
|
||||
}
|
||||
|
||||
const handlePrimaryAction = () => {
|
||||
if (!canViewRoute.value) return
|
||||
if (props.hasRoutePreview) {
|
||||
emit('simulateGuide')
|
||||
return
|
||||
}
|
||||
|
||||
handleViewRoute()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.route-planner-panel {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: calc(env(safe-area-inset-bottom) + 30px);
|
||||
padding: 10px 14px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 28px rgba(36, 49, 42, 0.12);
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.panel-handle {
|
||||
width: 38px;
|
||||
height: 4px;
|
||||
margin: 0 auto 10px;
|
||||
background: #d8dbd2;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.panel-title-group {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.panel-summary {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #696962;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.panel-clear {
|
||||
flex: 0 0 auto;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background: #f5f7f2;
|
||||
border: 1px solid #e4e5df;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.panel-clear-text {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-weight: 500;
|
||||
color: #545861;
|
||||
}
|
||||
|
||||
.point-row {
|
||||
position: relative;
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding-right: 52px;
|
||||
}
|
||||
|
||||
.point-card {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 52px;
|
||||
padding: 8px 10px 8px 34px;
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
column-gap: 8px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background: #f6f7f4;
|
||||
border: 1px solid #e5e6de;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.point-dot {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 21px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.point-dot.start {
|
||||
background: #1fbf6b;
|
||||
}
|
||||
|
||||
.point-dot.end {
|
||||
background: #ef5552;
|
||||
}
|
||||
|
||||
.point-label {
|
||||
font-size: 11px;
|
||||
line-height: 15px;
|
||||
color: #8b8b84;
|
||||
}
|
||||
|
||||
.point-name {
|
||||
margin-top: 0;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
color: #1f2329;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.point-name.placeholder {
|
||||
color: #545861;
|
||||
}
|
||||
|
||||
.point-meta {
|
||||
grid-column: 2;
|
||||
margin-top: -2px;
|
||||
font-size: 11px;
|
||||
line-height: 15px;
|
||||
color: #696962;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.swap-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 42px;
|
||||
height: 112px;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d7dad3;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.swap-text {
|
||||
font-size: 22px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
color: #151713;
|
||||
}
|
||||
|
||||
.panel-status {
|
||||
margin-top: 10px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.panel-status-text {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #696962;
|
||||
}
|
||||
|
||||
.panel-status-text.error {
|
||||
color: #b44b42;
|
||||
}
|
||||
|
||||
.view-route-btn {
|
||||
margin-top: 12px;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #000000;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.view-route-btn.disabled {
|
||||
background: #d8dbd2;
|
||||
}
|
||||
|
||||
.view-route-text {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-weight: 500;
|
||||
color: var(--museum-accent);
|
||||
}
|
||||
|
||||
.view-route-btn.disabled .view-route-text {
|
||||
color: #8b8b84;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user