feat(路由): 为checkin页面添加路由名称和组件名称

添加路由名称和组件名称以支持keep-alive缓存功能
在map.vue中实现activated和deactivated生命周期钩子

 /*
 /*
  * @Date: 2023-05-29 11:10:19
  * @Date: 2023-05-29 11:10:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-26 15:46:05
+ * @LastEditTime: 2025-09-18 10:25:55
  * @FilePath: /map-demo/src/route.js
  * @FilePath: /map-demo/src/route.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -114,6 +114,7 @@ export default [
   },
   },
   {
   {
     path: '/checkin',
     path: '/checkin',
+    name: 'CheckinMap',
     component: () => import('@/views/checkin/map.vue'),
     component: () => import('@/views/checkin/map.vue'),
     meta: {
     meta: {
       title: '地图',
       title: '地图',
@@ -121,6 +122,7 @@ export default [
   },
   },
   {
   {
     path: '/checkin/info',
     path: '/checkin/info',
+    name: 'CheckinInfo',
     component: () => import('@/views/checkin/info.vue'),
     component: () => import('@/views/checkin/info.vue'),
     meta: {
     meta: {
       title: '详情页',
       title: '详情页',

 <!--
 <!--
  * @Date: 2024-09-15 22:08:49
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-17 19:50:14
+ * @LastEditTime: 2025-09-18 10:31:19
  * @FilePath: /map-demo/src/views/checkin/info.vue
  * @FilePath: /map-demo/src/views/checkin/info.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -87,7 +87,7 @@
     </div>
     </div>
 </template>
 </template>
 
 
-<script setup>
+<script setup name="CheckinInfo">
 import { ref, watch, watchEffect } from 'vue'
 import { ref, watch, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import { showImagePreview, showDialog } from 'vant';
 import { showImagePreview, showDialog } from 'vant';

 <!--
 <!--
  * @Date: 2023-05-19 14:54:27
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-18 10:10:09
+ * @LastEditTime: 2025-09-18 10:31:06
  * @FilePath: /map-demo/src/views/checkin/map.vue
  * @FilePath: /map-demo/src/views/checkin/map.vue
  * @Description: 公众地图主体页面
  * @Description: 公众地图主体页面
 -->
 -->
@@ -173,6 +173,7 @@ window._AMapSecurityConfig = {
 }
 }
 
 
 export default {
 export default {
+  name: 'CheckinMap',
   components: { pageInfo, audioBackground1, BottomNav },
   components: { pageInfo, audioBackground1, BottomNav },
   computed: {
   computed: {
     ...mapState(mainStore, ['audio_entity', 'audio_src', 'audio_status']),
     ...mapState(mainStore, ['audio_entity', 'audio_src', 'audio_status']),
@@ -322,6 +323,12 @@ export default {
     // 设置默认标题，避免显示undefined
     // 设置默认标题，避免显示undefined
     document.title = '地图加载中...';
     document.title = '地图加载中...';
 
 
+    // 将当前页面添加到缓存列表
+    const store = mainStore();
+    if (!store.keepPages.includes('CheckinMap')) {
+      store.keepPages.push('CheckinMap');
+    }
+
     const AMap = await AMapLoader.load({
     const AMap = await AMapLoader.load({
       key: '17b8fc386104b89db88b60b049a6dbce', // 控制台获取
       key: '17b8fc386104b89db88b60b049a6dbce', // 控制台获取
       version: '2.0', // 指定API版本
       version: '2.0', // 指定API版本
@@ -409,6 +416,37 @@ export default {
       autoFitView: true, // 是否自动调整地图视野到显示的路线
       autoFitView: true, // 是否自动调整地图视野到显示的路线
     });
     });
   },
   },
+  // keep-alive 组件激活时调用
+  activated() {
+    // 组件被激活时，不需要重新初始化地图，保持之前的状态
+    console.log('地图组件已激活，保持之前状态');
+    // 确保当前页面在缓存列表中
+    const store = mainStore();
+    if (!store.keepPages.includes('CheckinMap')) {
+      store.keepPages.push('CheckinMap');
+    }
+    // 重置page-info组件状态，关闭浮动面板
+    this.info_height = 0;
+    this.itemInfo = {};
+    // 重置浮动面板样式
+    this.$nextTick(() => {
+      $('.van-floating-panel__content').css('borderRadius', '1.25rem');
+      $('.van-floating-panel').css('boxShadow', 'none');
+      // 还原标记点样式
+      this.resetMarkStyle();
+    });
+    // 如果地图已经初始化，重新设置地图大小以适应容器
+    if (this.map) {
+      this.$nextTick(() => {
+        this.map.getSize();
+      });
+    }
+  },
+  // keep-alive 组件停用时调用
+  deactivated() {
+    // 组件被停用时，保存当前状态
+    console.log('地图组件已停用，状态已保存');
+  },
   watch: {
   watch: {
     // // 监听 $route 对象的 query 属性
     // // 监听 $route 对象的 query 属性
     // '$route.query': {
     // '$route.query': {