shengtai_web/src/App.vue

<!--
 * @Author: PoJun
 * @Date: 2023-08-18 14:01:44
 * @LastEditors: PoJun
 * @LastEditTime: 2024-01-11 15:02:34
 * @Message: Nothing
-->
<template>
    <a-config-provider :locale="locale" :get-popup-container="popContainer">
        <router-view />
    </a-config-provider>
</template>

<script>
import { enquireScreen } from "./utils/util";
import { mapState, mapMutations, mapGetters } from "vuex";
import themeUtil from "@/utils/themeUtil";
import { getI18nKey } from "@/utils/routerUtil";
import { getSysInfo } from "@/api/index.js";
export default {
    name: "App",
    data() {
        return {
            locale: {},
        };
    },
    created() {
        // 1. 首次加载页面的空白时间
        // 2. 动态路由的加载与渲染造成的白屏
        const dom = document.getElementById("pageInitLoading");
        if (dom) {
            document.body.removeChild(document.getElementById("pageInitLoading"));
        }

        getSysInfo().then(res => {
            this.setSystemInfo(res);
        });

        this.setHtmlTitle();
        this.setLanguage(this.lang);
        enquireScreen(isMobile => this.setDevice(isMobile));
    },
    mounted() {
        this.setWeekModeTheme(this.weekMode);
    },
    watch: {
        weekMode(val) {
            this.setWeekModeTheme(val);
        },
        lang(val) {
            this.setLanguage(val);
            this.setHtmlTitle();
        },
        $route() {
            this.setHtmlTitle();
        },
        "theme.mode": function (val) {
            let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`);
            themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage);
        },
        "theme.color": function (val) {
            let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`);
            themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage);
        },
        layout: function () {
            window.dispatchEvent(new Event("resize"));
        },
        sysLogo(val) {
            val && document.querySelector('link[rel="icon"]').setAttribute("href", val);
        },
    },
    computed: {
        ...mapState("setting", ["layout", "theme", "weekMode", "lang"]),
        ...mapGetters("setting", ["sysLogo"]),
    },
    methods: {
        ...mapMutations("setting", ["setDevice", "setSystemInfo"]),
        setWeekModeTheme(weekMode) {
            if (weekMode) {
                document.body.classList.add("week-mode");
            } else {
                document.body.classList.remove("week-mode");
            }
        },
        setLanguage(lang) {
            this.$i18n.locale = lang;
            switch (lang) {
                case "CN":
                    this.locale = require("ant-design-vue/es/locale-provider/zh_CN").default;
                    break;
                case "HK":
                    this.locale = require("ant-design-vue/es/locale-provider/zh_TW").default;
                    break;
                case "US":
                default:
                    this.locale = require("ant-design-vue/es/locale-provider/en_US").default;
                    break;
            }
        },
        setHtmlTitle() {
            const route = this.$route;
            const key = route.path === "/" ? "home.name" : getI18nKey(route.matched[route.matched.length - 1].path);
            document.title = this.$t(key);
        },
        popContainer() {
            return document.getElementById("popContainer");
        },
    },
};
</script>

<style lang="less">
body,
html {
    overflow: hidden;
}
</style>