chore: solidify guide P1 snapshot

src/pages/facility/detail.vue

@@ -1,58 +1,136 @@
 <template>
-  <GuideMapShell
-    :search-text="facility.name"
-    floor-top="164px"
-    tools-top="406px"
-    :tools="['回正', '2D']"
-    @search-tap="handleSearchTap"
-    @mode-change="handleModeChange"
-    @floor-change="handleFloorChange"
-    @tool-click="handleToolClick"
+  <GuidePageFrame
+    active-tab="guide"
+    variant="overlay"
+    show-back
+    :show-cancel="isStartPanelOpen"
+    @tab-change="handleTopTabChange"
+    @back="handlePageBack"
+    @cancel="handleCancelStartSelection"
   >
-    <view class="detail-sheet">
-      <view class="detail-title-row">
-        <text class="detail-title">{{ facility.name }}</text>
-        <text class="open-status">{{ facility.status }}</text>
-      </view>
+    <GuideMapShell
+      :search-text="facility.name"
+      search-top="60px"
+      mode-top="104px"
+      floor-top="208px"
+      tools-top="450px"
+      :tools="['回正', '2D']"
+      @search-tap="handleSearchTap"
+      @mode-change="handleModeChange"
+      @floor-change="handleFloorChange"
+      @tool-click="handleToolClick"
+    >
+      <view class="detail-sheet">
+        <view class="detail-title-row">
+          <text class="detail-title">{{ facility.name }}</text>
+          <text class="open-status">{{ facility.status }}</text>
+        </view>
 
-      <view class="detail-lines">
-        <text class="detail-line">所在区域：{{ facility.location }}</text>
-        <text class="detail-line">最近垂直交通：{{ facility.traffic }}</text>
-      </view>
+        <view class="detail-lines">
+          <text class="detail-line">所在区域：{{ facility.location }}</text>
+          <text class="detail-line">最近垂直交通：{{ facility.traffic }}</text>
+          <text v-if="confirmedStart" class="detail-line">预览起点：{{ confirmedStart.label }}</text>
+        </view>
 
-      <view class="tag-row">
-        <view
-          v-for="(tag, index) in facility.tags"
-          :key="tag"
-          class="detail-tag"
-          :class="{ active: index === 0 }"
-        >
-          <text class="detail-tag-text">{{ tag }}</text>
+        <view class="tag-row">
+          <view
+            v-for="(tag, index) in facility.tags"
+            :key="tag"
+            class="detail-tag"
+            :class="{ active: index === 0 }"
+          >
+            <text class="detail-tag-text">{{ tag }}</text>
+          </view>
+        </view>
+
+        <view class="action-row">
+          <view class="action-btn secondary" @tap="handleChooseStart">
+            <text class="action-text">{{ startButtonLabel }}</text>
+          </view>
+          <view class="action-btn primary" @tap="handleStartNavigation">
+            <text class="action-text">查看位置</text>
+          </view>
         </view>
       </view>
 
-      <view class="action-row">
-        <view class="action-btn secondary" @tap="handleChooseStart">
-          <text class="action-text">选择起点</text>
+      <view
+        v-if="isStartPanelOpen"
+        class="start-panel-mask"
+        @tap="handleCancelStartSelection"
+      ></view>
+      <view
+        v-if="isStartPanelOpen"
+        class="start-select-sheet"
+        @tap.stop=""
+      >
+        <text class="start-select-title">选择预览起点</text>
+        <text class="start-select-desc">当前仅用于位置预览，不生成真实馆内路线。</text>
+
+        <view class="start-chip-section">
+          <text class="start-chip-label">楼层</text>
+          <view class="start-chip-row">
+            <view
+              v-for="floor in startFloors"
+              :key="floor"
+              class="start-chip"
+              :class="{ active: floor === selectedStartFloor }"
+              @tap="handleStartFloorChange(floor)"
+            >
+              <text class="start-chip-text">{{ floor }}</text>
+            </view>
+          </view>
         </view>
-        <view class="action-btn primary" @tap="handleStartNavigation">
-          <text class="action-text">查看位置</text>
+
+        <view class="start-chip-section area">
+          <text class="start-chip-label">区域</text>
+          <view class="start-chip-row">
+            <view
+              v-for="area in startAreas"
+              :key="area"
+              class="start-chip area"
+              :class="{ active: area === selectedStartArea }"
+              @tap="handleStartAreaChange(area)"
+            >
+              <text class="start-chip-text">{{ area }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="start-panel-actions">
+          <view class="start-panel-btn secondary" @tap="handleCancelStartSelection">
+            <text class="start-panel-btn-text">取消</text>
+          </view>
+          <view class="start-panel-btn primary" @tap="handleConfirmStartSelection">
+            <text class="start-panel-btn-text">确认起点</text>
+          </view>
         </view>
       </view>
-    </view>
-  </GuideMapShell>
+    </GuideMapShell>
+  </GuidePageFrame>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
 import GuideMapShell from '@/components/navigation/GuideMapShell.vue'
 import {
+  NAV_FLOOR_OPTIONS,
   NAV_ROUTE_UNAVAILABLE_MESSAGE,
   formatNavFloorLabel,
   isPoiAccessible,
   loadCleanNavPoiById
 } from '@/services/navAssets'
+import {
+  navigateToGuideTopTab,
+  type GuideTopTab
+} from '@/utils/guideTopTabs'
+
+interface ConfirmedStart {
+  label: string
+  floor: string
+  source: 'facility-detail'
+}
 
 const facility = ref({
   id: '',
@@ -62,6 +140,30 @@ const facility = ref({
   traffic: NAV_ROUTE_UNAVAILABLE_MESSAGE,
   tags: ['三维位置', 'clean 数据']
 })
+const isStartPanelOpen = ref(false)
+const selectedStartFloor = ref('1F')
+const selectedStartArea = ref('服务台附近')
+const confirmedStart = ref<ConfirmedStart | null>(null)
+const startFloors = NAV_FLOOR_OPTIONS.map((floor) => floor.label)
+const startAreas = ['主入口', '服务台附近', '停车场入口']
+
+const pendingStartLabel = computed(() => `${selectedStartFloor.value} ${selectedStartArea.value}`)
+const startButtonLabel = computed(() => confirmedStart.value ? '更换起点' : '选择起点')
+
+const resolveConfirmedStartArea = () => {
+  if (!confirmedStart.value) return '服务台附近'
+
+  const area = confirmedStart.value.floor
+    ? confirmedStart.value.label.replace(`${confirmedStart.value.floor} `, '').trim()
+    : confirmedStart.value.label.trim()
+
+  return startAreas.includes(area) ? area : '服务台附近'
+}
+
+const syncDraftStartSelection = () => {
+  selectedStartFloor.value = confirmedStart.value?.floor || '1F'
+  selectedStartArea.value = resolveConfirmedStartArea()
+}
 
 onLoad(async (options: any) => {
   if (options.id) {
@@ -103,15 +205,51 @@ const handleSearchTap = () => {
 }
 
 const handleChooseStart = () => {
-  uni.showToast({
-    title: '请选择当前位置',
-    icon: 'none'
-  })
+  syncDraftStartSelection()
+  isStartPanelOpen.value = true
+}
+
+const handleStartFloorChange = (floor: string) => {
+  selectedStartFloor.value = floor
+}
+
+const handleStartAreaChange = (area: string) => {
+  selectedStartArea.value = area
+}
+
+const handleCancelStartSelection = () => {
+  syncDraftStartSelection()
+  isStartPanelOpen.value = false
+}
+
+const handleConfirmStartSelection = () => {
+  confirmedStart.value = {
+    label: pendingStartLabel.value,
+    floor: selectedStartFloor.value,
+    source: 'facility-detail'
+  }
+  isStartPanelOpen.value = false
 }
 
 const handleStartNavigation = () => {
+  const params: Record<string, string> = {
+    facilityId: facility.value.id,
+    target: facility.value.name,
+    state: 'preview'
+  }
+
+  if (confirmedStart.value) {
+    params.startLabel = confirmedStart.value.label
+    params.startFloor = confirmedStart.value.floor
+    params.startSource = confirmedStart.value.source
+  }
+
+  const query = Object.entries(params)
+    .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+    .join('&')
+
   uni.navigateTo({
-    url: `/pages/route/detail?facilityId=${facility.value.id}&target=${encodeURIComponent(facility.value.name)}&state=planning`
+    url: `/pages/route/detail?${query}`
   })
 }
 
@@ -127,6 +265,21 @@ const handleToolClick = (tool: string) => {
   console.log('设施详情工具:', tool)
 }
 
+const handleTopTabChange = (tab: GuideTopTab) => {
+  navigateToGuideTopTab(tab)
+}
+
+const handlePageBack = () => {
+  uni.navigateBack({
+    delta: 1,
+    fail: () => {
+      uni.reLaunch({
+        url: '/pages/index/index'
+      })
+    }
+  })
+}
+
 </script>
 
 <style scoped lang="scss">
@@ -265,4 +418,151 @@ const handleToolClick = (tool: string) => {
 .action-btn.primary .action-text {
   color: var(--museum-accent);
 }
+
+.start-panel-mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 52;
+}
+
+.start-select-sheet {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(env(safe-area-inset-bottom) + 34px);
+  height: 276px;
+  padding: 22px 20px 16px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 20px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
+  z-index: 55;
+}
+
+.start-select-title {
+  display: block;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+  color: #000000;
+}
+
+.start-select-desc {
+  display: block;
+  margin-top: 6px;
+  font-size: 12px;
+  line-height: 17px;
+  color: #626970;
+}
+
+.start-chip-section {
+  margin-top: 16px;
+}
+
+.start-chip-section.area {
+  margin-top: 14px;
+}
+
+.start-chip-label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  color: #60666d;
+}
+
+.start-chip-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.start-chip {
+  height: 28px;
+  min-width: 48px;
+  padding: 0 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background: #f4f4ef;
+  border: 1px solid #e7e8e2;
+  border-radius: 14px;
+}
+
+.start-chip.area {
+  min-width: 72px;
+}
+
+.start-chip.active {
+  background: #000000;
+  border-color: #000000;
+}
+
+.start-chip-text {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  color: #60666d;
+}
+
+.start-chip.active .start-chip-text {
+  color: var(--museum-accent);
+}
+
+.start-panel-actions {
+  position: absolute;
+  left: 20px;
+  right: 20px;
+  bottom: 16px;
+  display: flex;
+  gap: 16px;
+}
+
+.start-panel-btn {
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+
+.start-panel-btn.secondary {
+  width: 151px;
+  background: #ffffff;
+  border: 1px solid #000000;
+}
+
+.start-panel-btn.primary {
+  width: 168px;
+  background: #000000;
+  border: 1px solid #000000;
+}
+
+.start-panel-btn-text {
+  font-size: 14px;
+  line-height: 19px;
+  font-weight: 500;
+  color: #000000;
+}
+
+.start-panel-btn.primary .start-panel-btn-text {
+  color: var(--museum-accent);
+}
+
+@media (max-width: 360px) {
+  .start-panel-actions {
+    gap: 10px;
+  }
+
+  .start-panel-btn.secondary,
+  .start-panel-btn.primary {
+    width: auto;
+    flex: 1;
+  }
+}
 </style>