JLH/JLHWEB/src/layouts/index.vue

<!-- 💥 这里是一次性加载 LayoutComponents -->
<template>
  <LayoutLockPage v-if="getIsLock" />
  <template v-else>
    <LayoutLoginPage v-if="getIsLogin" @login-success="funLoginSuccess" />
    <!-- <component :is="LayoutComponents[layout]" v-bind="lockEvents" /> -->
    <!-- <template v-if="!loadingBtn"> -->
    <LayoutClassic ref="LayoutClassicRef" v-bind="lockEvents" />
    <ThemeDrawer />
    <!-- </template> -->
  </template>
</template>

<script setup lang="ts" name="layout">
import { computed, type Component, onBeforeMount, toRef, ref } from "vue";
import { LayoutType } from "@/stores/interface";
import { useGlobalStore } from "@/stores/modules/global";
import ThemeDrawer from "./components/ThemeDrawer/index.vue";
import LayoutVertical from "./LayoutVertical/index.vue";
import LayoutClassic from "./LayoutClassic/index.vue";
import LayoutTransverse from "./LayoutTransverse/index.vue";
import LayoutColumns from "./LayoutColumns/index.vue";
import { useLockPage } from "@/hooks/useLockPage";
import { useLockStore } from "@/stores/modules/lock";
import LayoutLockPage from "@/views/system/lock/index.vue";
import LayoutLoginPage from "@/views/system/login/index.vue";
import { createAppProviderContext } from "@/hooks/core/useAppContext";
import { prefixCls } from "@/config/designSetting";
import { useUserStore } from "@/stores/modules/user";
import { loading } from "@/utils/loading";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
import { useAuthStore } from "@/stores/modules/auth";
import router from "@/routers";

const LayoutComponents: Record<LayoutType, Component> = {
  vertical: LayoutVertical,
  classic: LayoutClassic,
  transverse: LayoutTransverse,
  columns: LayoutColumns
};

const LayoutClassicRef = ref();
const authStore = useAuthStore();
const globalStore = useGlobalStore();
const layout = computed(() => globalStore.layout);

const userStore = useUserStore();
const lockStore = useLockStore();
const lockEvents = useLockPage();
const loadingBtn = ref(true);

const getIsLock = computed(() => lockStore?.getLockInfo?.isLock ?? false);
const getIsLogin = computed(() => lockStore?.getLockInfo?.isLogin ?? false);
console.log("getIsLock :>> ", getIsLock);

createAppProviderContext({ prefixCls: toRef(prefixCls), isMobile: toRef(false) });

onBeforeMount(async () => {
  try {
    loadingBtn.value = true;
    loading.show("正在加载账号信息");
    // await userStore.getUserInfo();
    // 刷新动态路由
    await initDynamicRouter();
    console.log("authStore.authButtonList :>> ", authStore.authButtonList);
    // 获取常用菜单信息
    await authStore.getHomeLayout();

    globalStore.setGlobalState("isSuper", userStore.userInfo.usercode?.trim().toLocaleLowerCase() == "super");

    loadingBtn.value = false;
    loading.hide();
  } catch (error: any) {
    loading.hide();
    if (error.message && error.message.indexOf("timeout") !== -1) {
      let _fullPath = router.currentRoute.value.fullPath;
      let _redirectPath = _fullPath.replace(/&/g, "$and$");
      router.replace("/408" + "?redirect=" + _redirectPath);
    }
  }
});

/**
 * @description 登录成功后刷新页面
 */
const funLoginSuccess = () => {
  LayoutClassicRef.value.refresh();
};
</script>

<style scoped lang="scss">
.layout {
  min-width: 730px;
}
</style>