App.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <template>
  2. <el-config-provider :locale="locale">
  3. <router-view></router-view>
  4. </el-config-provider>
  5. </template>
  6. <script lang="ts" setup>
  7. import { computed, onMounted, watch } from 'vue'
  8. import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
  9. import en from 'element-plus/dist/locale/en.mjs'
  10. import useSystemStore from '@/stores/modules/system'
  11. import useAppStore from '@/stores/modules/app'
  12. import { useDark, useToggle } from '@vueuse/core'
  13. import { setThemeColor } from '@/utils/common'
  14. import { useRoute } from 'vue-router'
  15. const route = useRoute()
  16. // 初始化设置语言
  17. const systemStore = useSystemStore()
  18. const locale = computed(() => (systemStore.lang === 'zh-cn' ? zhCn : en))
  19. // 查询website信息
  20. systemStore.getWebsiteInfo()
  21. const toggleDark = useToggle(useDark())
  22. watch(route, () => {
  23. useAppStore().$patch(state => {
  24. state.route = route
  25. })
  26. }, { immediate: true })
  27. onMounted(() => {
  28. // 设置主题色
  29. toggleDark(systemStore.dark)
  30. setThemeColor(systemStore.theme, systemStore.dark ? 'dark' : 'light')
  31. })
  32. </script>
  33. <style lang="scss" scoped></style>