<template>
  <MobileScale
    :design-width="1920"
    :min-scale="0.6"
    :breakpoint="992"
  >
    <TopLoading ref="topLoadingRef" />
    <!--
      最外层 router-view 不要再包 <KeepAlive>。
      原因：App.vue 下同时存在两个根路由（User、Layout/realName/livenessVerification），
      如果在 App.vue 处包 <KeepAlive>，路由在 User 和业务路由之间切换时，
      被缓存的顶层组件会随其后继组件重新挂载而重复创建（导致 onMounted 触发多次、接口被重复调用）。
      业务页面的 <KeepAlive> 已经在 Layout.vue 中按 route.meta.keepAlive 精确控制。
    -->
    <router-view />
  </MobileScale>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import TopLoading from '@/components/common/TopLoading.vue'
import MobileScale from '@/components/common/MobileScale.vue'
import { useTabsStore } from '@/stores/modules/tabs'

const tabsStore = useTabsStore()

const topLoadingRef = ref<InstanceType<typeof TopLoading>>()

onMounted(() => {
  // 将 TopLoading 实例挂载到 window 上，供 api 模块调用
  // @ts-ignore
  window.__topLoading__ = topLoadingRef.value

  // 检查并恢复标签页状态
  tabsStore.validateAndRecoverTabs()
})
</script>

<style scoped lang="scss">
</style>
