马宇豪
2025-03-04 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c
src/App.vue
@@ -1,10 +1,22 @@
<template>
   <el-config-provider :size="getGlobalComponentSize" :locale="i18nLocale">
      <router-view v-show="themeConfig.lockScreenTime > 1" />
      <LockScreen v-if="themeConfig.isLockScreen" />
      <Setings ref="setingsRef" v-show="themeConfig.lockScreenTime > 1" />
      <CloseFull v-if="!themeConfig.isLockScreen" />
   </el-config-provider>
<!--        <transition name="fade" mode="out-in">-->
<!--            <keep-alive :exclude="excludeList">-->
<!--                <router-view v-if="!$route.meta.iskeepAlive" :key="$route.path"></router-view>-->
<!--            </keep-alive>-->
<!--        </transition>-->
    <!--    <router-view v-if="!$route.meta.iskeepAlive" v-slot="{ Component }">-->
    <!--        <transition name="fade" mode="in-out">-->
    <!--            <keep-alive :exclude="excludeList" :include="includeList">-->
    <!--                <components :is="Component" :key="$route.id"></components>-->
    <!--            </keep-alive>-->
    <!--        </transition>-->
    <!--    </router-view>-->
    <el-config-provider :size="getGlobalComponentSize" :locale="i18nLocale">
        <router-view v-show="themeConfig.lockScreenTime > 1" />
        <LockScreen v-if="themeConfig.isLockScreen" />
        <Setings ref="setingsRef" v-show="themeConfig.lockScreenTime > 1" />
        <CloseFull v-if="!themeConfig.isLockScreen" />
    </el-config-provider>
</template>
<script lang="ts">
@@ -21,80 +33,83 @@
import CloseFull from '/@/layout/navBars/breadcrumb/closeFull.vue';
import { initBackEndControlRoutes } from './router/backEnd';
export default ({
   name: 'app',
   components: { LockScreen, Setings, CloseFull },
   setup() {
      const { proxy } = <any>getCurrentInstance();
      const setingsRef = ref();
      const route = useRoute();
      const stores = useTagsViewRoutes();
      const storesThemeConfig = useThemeConfig();
      const { themeConfig } = storeToRefs(storesThemeConfig);
      const state = reactive({
         i18nLocale: null,
      });
export default {
    name: 'app',
    components: { LockScreen, Setings, CloseFull },
    setup() {
        const { proxy } = <any>getCurrentInstance();
        const setingsRef = ref();
        const route = useRoute();
        const stores = useTagsViewRoutes();
        const storesThemeConfig = useThemeConfig();
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const state = reactive({
            i18nLocale: null,
            excludeList: ['a-e'],
            includeList: []
        });
      // 获取全局组件大小
      const getGlobalComponentSize = computed(() => {
         return other.globalComponentSize();
      });
      // 布局配置弹窗打开
      const openSetingsDrawer = () => {
         setingsRef.value.openDrawer();
      };
      // 设置初始化,防止刷新时恢复默认
      onBeforeMount(() => {
         // 设置批量第三方 icon 图标
         setIntroduction.cssCdn();
         // 设置批量第三方 js
         setIntroduction.jsCdn();
      });
      // 页面加载时
      onMounted( () => {
         nextTick(() => {
            // 监听布局配置弹窗点击打开
            proxy.mittBus.on('openSetingsDrawer', () => {
               openSetingsDrawer();
            });
            // 设置 i18n,App.vue 中的 el-config-provider
            proxy.mittBus.on('getI18nConfig', (locale: string) => {
               (state.i18nLocale as string | null) = locale;
            });
            // 获取缓存中的布局配置
            if (Local.get('themeConfig')) {
               storesThemeConfig.setThemeConfig(Local.get('themeConfig'));
               document.documentElement.style.cssText = Local.get('themeConfigStyle');
            }
            // 获取缓存中的全屏配置
            if (Session.get('isTagsViewCurrenFull')) {
               stores.setCurrenFullscreen(Session.get('isTagsViewCurrenFull'));
            }
         });
         // if(!Session.get('token')) return
         // initBackEndControlRoutes()
      });
      // 页面销毁时,关闭监听布局配置/i18n监听
      onUnmounted(() => {
         proxy.mittBus.off('openSetingsDrawer', () => {});
         proxy.mittBus.off('getI18nConfig', () => {});
      });
      // 监听路由的变化,设置网站标题
      watch(
         () => route.path,
         () => {
            other.useTitle();
         },
         {
            deep: true,
         }
      );
      return {
         themeConfig,
         setingsRef,
         getGlobalComponentSize,
         ...toRefs(state),
      };
   },
});
        // 获取全局组件大小
        const getGlobalComponentSize = computed(() => {
            return other.globalComponentSize();
        });
        // 布局配置弹窗打开
        const openSetingsDrawer = () => {
            setingsRef.value.openDrawer();
        };
        // 设置初始化,防止刷新时恢复默认
        onBeforeMount(() => {
            // 设置批量第三方 icon 图标
            setIntroduction.cssCdn();
            // 设置批量第三方 js
            setIntroduction.jsCdn();
        });
        // 页面加载时
        onMounted(() => {
            nextTick(() => {
                // 监听布局配置弹窗点击打开
                proxy.mittBus.on('openSetingsDrawer', () => {
                    openSetingsDrawer();
                });
                // 设置 i18n,App.vue 中的 el-config-provider
                proxy.mittBus.on('getI18nConfig', (locale: string) => {
                    (state.i18nLocale as string | null) = locale;
                });
                // 获取缓存中的布局配置;
                if (Local.get('themeConfig')) {
                    storesThemeConfig.setThemeConfig(themeConfig.value);
                    // storesThemeConfig.setThemeConfig(Local.get('themeConfig'));
                    document.documentElement.style.cssText = Local.get('themeConfigStyle');
                }
                // 获取缓存中的全屏配置
                if (Session.get('isTagsViewCurrenFull')) {
                    stores.setCurrenFullscreen(Session.get('isTagsViewCurrenFull'));
                }
            });
            // if(!Session.get('token')) return
            // initBackEndControlRoutes()
        });
        // 页面销毁时,关闭监听布局配置/i18n监听
        onUnmounted(() => {
            proxy.mittBus.off('openSetingsDrawer', () => {});
            proxy.mittBus.off('getI18nConfig', () => {});
        });
        // 监听路由的变化,设置网站标题
        watch(
            () => route.path,
            () => {
                other.useTitle();
            },
            {
                deep: true
            }
        );
        return {
            themeConfig,
            setingsRef,
            getGlobalComponentSize,
            ...toRefs(state)
        };
    }
};
</script>