54 lines
2.1 KiB
Vue
54 lines
2.1 KiB
Vue
<template>
|
||
<Loading />
|
||
<el-config-provider :namespace="ns.elNamespace" :locale="i18nLocale" :button="config" :size="layout.elementPlusSize">
|
||
<router-view v-slot="{ Component }">
|
||
<component :is="Component" />
|
||
</router-view>
|
||
</el-config-provider>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="App">
|
||
import { reactive, computed, provide } from "vue";
|
||
import { storeToRefs } from "pinia";
|
||
import { ElConfigProvider } from "element-plus";
|
||
import zhCn from "element-plus/es/locale/lang/zh-cn";
|
||
import en from "element-plus/es/locale/lang/en";
|
||
import { LanguageEnum } from "@/common/enums";
|
||
import { GlobalConfigKey, serviceConfig } from "@/common/config";
|
||
import { isFunction } from "@/common/utils";
|
||
import { useNamespace, useWatchCssVar, useTheme } from "@/composables";
|
||
import { useSettingStore, useLayoutStore } from "@/pinia";
|
||
import { useIFrame } from "@/layout/components/iframe/use-iframe";
|
||
import Loading from "@/layout/components/loading/index.vue";
|
||
|
||
const ns = useNamespace();
|
||
|
||
const settingStore = useSettingStore();
|
||
const layoutStore = useLayoutStore();
|
||
|
||
const { layout } = storeToRefs(settingStore);
|
||
const { language } = storeToRefs(layoutStore);
|
||
|
||
// 自定义注入全局参数。ElConfigProvider 会自动使用 provide 全局注入它的 props 到项目里，可以通过 configProviderContextKey 来 inject 获取（先从 element-plus 引入，然后 const config = inject(configProviderContextKey)）
|
||
provide(GlobalConfigKey, { size: computed(() => layout.value.elementPlusSize) });
|
||
|
||
// 初始化主题配置
|
||
useTheme().initTheme();
|
||
// 监听布局样式变量
|
||
useWatchCssVar();
|
||
// IFrame 通信
|
||
useIFrame(serviceConfig.layout.watchFrame);
|
||
|
||
// 配置 element 按钮文字中间是否有空格
|
||
const config = reactive({ autoInsertSpace: false });
|
||
|
||
// element 语言配置
|
||
const i18nLocale = computed(() => {
|
||
if (language.value === LanguageEnum.ZhCn) return zhCn;
|
||
if (language.value === LanguageEnum.EnUs) return en;
|
||
return document.documentElement.lang === "zh-CN" ? zhCn : en;
|
||
});
|
||
|
||
if (isFunction(log.success)) log.success(__APP_INFO__.pkg.version, "欢迎使用 Teek Design Vue3 系统");
|
||
</script>
|