<template>
  <MapContainer />
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import MapContainer from './components/MapContainer.vue';
import autofit from 'autofit.js';

// 初始化自动适配（Vue3组合式API写法）
const initAutoFit = () => {
  autofit.init({
    designWidth: 1920,
    designHeight: 1080,
    el: '#app',
    resize: true,
    unit: 'px',
    debug: false,
    maxWidth: 1920,
    maxHeight: 1080,
    minFontSize: 12,
    fontScale: true  // 启用字体缩放
  });
};

// 生命周期钩子
onMounted(() => {
  initAutoFit();
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});

// 防抖处理resize事件
const handleResize = () => {
  // 使用autofit自带resize方法
  autofit.resize();
};
</script>

<style>
/* 必须添加的根容器样式 */
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
</style>