统一导览点位摘要卡视觉体验

src/pages/index/index.vue

@@ -68,46 +68,19 @@
         </view>
       </template>
 
-      <view
+      <GuidePoiSummaryCard
         v-if="selectedGuidePoi && !showRoutePlanner && !isSimulatingRoute"
-        class="guide-poi-card"
-        :class="{ collapsed: isPoiCardCollapsed }"
-      >
-        <view class="poi-card-handle" @tap.stop="togglePoiCardCollapsed"></view>
-        <view v-if="isPoiCardCollapsed" class="poi-card-collapsed" @tap="expandPoiCard">
-          <view class="poi-card-copy">
-            <text class="poi-card-title">{{ selectedGuidePoi.name }}</text>
-            <text class="poi-card-subtitle">{{ selectedGuidePoiCollapsedSubtitle }}</text>
-          </view>
-          <view class="poi-card-mini-action">
-            <text class="poi-card-mini-text">展开</text>
-          </view>
-        </view>
-        <template v-else>
-          <view class="poi-card-header">
-            <view class="poi-card-copy">
-              <text class="poi-card-title">{{ selectedGuidePoi.name }}</text>
-              <text class="poi-card-subtitle">{{ selectedGuidePoiSubtitle }}</text>
-            </view>
-            <view class="poi-card-header-actions">
-              <view class="poi-card-soft-action" @tap="collapsePoiCard">
-                <text class="poi-card-soft-text">收起</text>
-              </view>
-              <view class="poi-card-close" @tap="handleGuidePoiCardClose">
-                <text class="poi-card-close-text">×</text>
-              </view>
-            </view>
-          </view>
-          <view
-            v-if="selectedGuidePoiDetailTarget"
-            class="poi-card-actions"
-          >
-            <view class="poi-action primary" @tap="handleViewSelectedPoiDetail">
-              <text class="poi-action-text">{{ selectedGuidePoiDetailActionText }}</text>
-            </view>
-          </view>
-        </template>
-      </view>
+        :title="selectedGuidePoi.name"
+        :subtitle="isPoiCardCollapsed ? selectedGuidePoiCollapsedSubtitle : selectedGuidePoiSubtitle"
+        :collapsed="isPoiCardCollapsed"
+        collapsible
+        :action-text="selectedGuidePoiDetailTarget ? selectedGuidePoiDetailActionText : ''"
+        @toggle="togglePoiCardCollapsed"
+        @expand="expandPoiCard"
+        @collapse="collapsePoiCard"
+        @close="handleGuidePoiCardClose"
+        @action="handleViewSelectedPoiDetail"
+      />
 
       <view
         v-if="showGuideFloatingActions"
@@ -291,6 +264,7 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
 import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
 import GuideMapShell from '@/components/navigation/GuideMapShell.vue'
+import GuidePoiSummaryCard from '@/components/map/GuidePoiSummaryCard.vue'
 import RoutePlannerPanel from '@/components/navigation/RoutePlannerPanel.vue'
 import ArrivalPanel from '@/components/navigation/ArrivalPanel.vue'
 import PoiSearchPanel from '@/components/search/PoiSearchPanel.vue'
@@ -1816,168 +1790,6 @@ const handleExplainBack = () => {
   z-index: 10;
 }
 
-.guide-poi-card {
-  position: absolute;
-  left: 12px;
-  right: 12px;
-  bottom: calc(env(safe-area-inset-bottom) + 24px);
-  box-sizing: border-box;
-  background: rgba(255, 255, 255, 0.96);
-  border: 1px solid #e5e6de;
-  border-radius: 8px;
-  box-shadow: 0 10px 24px rgba(36, 49, 42, 0.12);
-  z-index: 1003;
-}
-
-.guide-poi-card {
-  padding: 10px 14px 14px;
-}
-
-.guide-poi-card.collapsed {
-  padding: 8px 10px 10px;
-}
-
-.poi-card-handle {
-  width: 38px;
-  height: 4px;
-  margin: 0 auto 10px;
-  background: #d8dbd2;
-  border-radius: 999px;
-}
-
-.poi-card-collapsed {
-  min-height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.poi-card-mini-action {
-  flex: 0 0 auto;
-  height: 30px;
-  padding: 0 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #151713;
-  border-radius: 8px;
-}
-
-.poi-card-mini-text {
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 500;
-  color: var(--museum-accent);
-}
-
-.poi-card-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.poi-card-copy {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.poi-card-title {
-  font-size: 17px;
-  line-height: 24px;
-  font-weight: 700;
-  color: #151713;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.poi-card-subtitle {
-  font-size: 12px;
-  line-height: 17px;
-  color: #696962;
-}
-
-.poi-card-header-actions {
-  flex: 0 0 auto;
-  display: flex;
-  gap: 6px;
-}
-
-.poi-card-soft-action {
-  height: 28px;
-  padding: 0 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  border: 1px solid #e4e5df;
-  border-radius: 8px;
-  background: #f5f7f2;
-}
-
-.poi-card-soft-text {
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 500;
-  color: #545861;
-}
-
-.poi-card-close {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  background: #f5f7f2;
-}
-
-.poi-card-close-text {
-  font-size: 18px;
-  line-height: 20px;
-  color: #545861;
-}
-
-.poi-card-actions {
-  margin-top: 12px;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-}
-
-.poi-action {
-  min-width: 0;
-  height: 38px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 16px;
-  box-sizing: border-box;
-  background: #f6f7f4;
-  border: 1px solid #e5e6de;
-  border-radius: 8px;
-}
-
-.poi-action.primary {
-  background: #151713;
-  border-color: #151713;
-}
-
-.poi-action-text {
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 500;
-  color: #151713;
-  text-align: center;
-}
-
-.poi-action.primary .poi-action-text {
-  color: var(--museum-accent);
-}
-
 .guide-home-dock {
   position: absolute;
   --museum-h5-page-width: min(100vw, 430px);