<template>
  <el-config-provider :size="size">
    <router-view></router-view>
  </el-config-provider>
</template>

<script lang="js">
  import { defineComponent, computed, onMounted } from 'vue'
  import { useStore } from 'vuex'
  import { useGetDictList } from '@/hooks/useGetDictList.js'
  export default defineComponent({
    name: 'App',
    setup() {
      const store = useStore()
      const size = computed(() => store.state.app.elementSize)
      const { loadDictData } = useGetDictList();

      onMounted(() => {
        // 获取公共字典数据
        if (store.state.user.token) {
          loadDictData(true);
        }
      });

      return {
        size,
      }
    }
  })
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
    height: 100vh;
    --el-color-primary: var(--system-primary-color);
  }
</style>