fix: 看板历史轨迹地图支持滑动和放大缩小

@@ -14,7 +14,7 @@
   import { useBaiduMapSDK } from '../../../hook/useBaiduMapSDK';
   import { HistoryModalOkEmitParams, TrackAnimationStatus } from './type';
   import { useMapTrackPlayback } from './useMapTrackPlayback';
-  import { shallowRef } from 'vue';
+  // import { shallowRef } from 'vue';
   import { formatToDateTime } from '/@/utils/dateUtil';
 
   const props = defineProps<{
@@ -25,7 +25,7 @@
 
   const wrapId = `bai-map-${buildUUID()}`;
 
-  const mapInstance = shallowRef<Nullable<Recordable>>(null);
+  const mapInstance = ref<Nullable<Recordable>>(null);
 
   const rangString = ref<Nullable<string>>(null);
 
@@ -35,6 +35,9 @@
     openModal(true, toRaw(props.config.option.dataSource));
   };
 
+  const { genTrackPlaybackAnimation, playStatus, playFn, continueFn, pauseFn } =
+    useMapTrackPlayback(mapInstance);
+
   const getIsWidgetLibSelectMode = computed(() => {
     return !props.config.option.dataSource;
   });
@@ -68,8 +71,8 @@
   async function initMap() {
     const wrapEl = unref(wrapRef);
     if (!wrapEl) return;
-    const BMapGL = (window as any).BMapGL;
     if (!Reflect.has(window, 'BMapGL')) return;
+    const BMapGL = (window as any).BMapGL;
     mapInstance.value = new BMapGL.Map(wrapId);
 
     // 定位当前城市
@@ -89,13 +92,10 @@
   }
 
   const { loading } = useBaiduMapSDK(initMap);
-
-  const { genTrackPlaybackAnimation, playStatus, playFn, continueFn, pauseFn } =
-    useMapTrackPlayback(mapInstance);
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main class="w-full h-full flex flex-col p-2 justify-center items-center">
     <div class="w-full flex justify-end">
       <Button
         type="text"
@@ -126,9 +126,8 @@
       :spinning="loading"
       wrapper-class-name="map-spin-wrapper !w-full !h-full !flex justify-center items-center pointer-events-none"
       tip="地图加载中..."
-    >
-      <div ref="wrapRef" :id="wrapId" class="w-full h-full no-drag"> </div>
-    </Spin>
+    />
+    <div ref="wrapRef" :id="wrapId" class="w-full h-full no-drag"> </div>
 
     <HistoryDataModel @register="register" @ok="handleRenderHistroyData" />
   </main>