chore: solidify guide P1 snapshot

src/components/navigation/LocationPreview.vue

@@ -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>