85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
<template>
|
|
<Maximize v-show="maximize" />
|
|
<Tabs v-if="tabs && showMenuFlag" />
|
|
<el-main>
|
|
<router-view v-slot="{ Component, route }" style="height:100%;">
|
|
<!-- {{ keepAliveName}} -->
|
|
<!-- <transition name="slide-right" mode="out-in"> -->
|
|
<keep-alive :include="tabsMenuList" >
|
|
<component :is="Component" :key="route.fullPath" />
|
|
</keep-alive>
|
|
<!-- </transition> -->
|
|
</router-view>
|
|
</el-main>
|
|
<el-footer>
|
|
<Footer />
|
|
</el-footer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onBeforeUnmount, provide, watch, computed } from "vue";
|
|
import { storeToRefs } from "pinia";
|
|
import { useDebounceFn } from "@vueuse/core";
|
|
import { useGlobalStore } from "@/stores/modules/global";
|
|
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
|
|
import Maximize from "./components/Maximize.vue";
|
|
import Tabs from "@/layouts/components/Tabs/index.vue";
|
|
import Footer from "@/layouts/components/Footer/index.vue";
|
|
import { useAuthStore } from "@/stores/modules/auth";
|
|
import { useTabsStore } from '@/stores/modules/tabs'
|
|
const tabStore = useTabsStore()
|
|
const globalStore = useGlobalStore();
|
|
const tabsMenuList = computed(() => tabStore.tabsMenuList.map(item => item.name))
|
|
const authStore = useAuthStore();
|
|
const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore);
|
|
const keepAliveStore = useKeepAliveStore();
|
|
const { keepAliveName } = storeToRefs(keepAliveStore);
|
|
// console.log("🚀 ~ keepAliveName:", keepAliveName)
|
|
//是否显示导航栏
|
|
const showMenuFlag = computed(() => authStore.showMenuFlagGet);
|
|
// 注入刷新页面方法
|
|
const isRouterShow = ref(true);
|
|
const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);
|
|
provide("refresh", refreshCurrentPage);
|
|
|
|
// 监听当前页面是否最大化，动态添加 class
|
|
watch(
|
|
() => maximize.value,
|
|
() => {
|
|
const app = document.getElementById("app") as HTMLElement;
|
|
if (maximize.value) app.classList.add("main-maximize");
|
|
else app.classList.remove("main-maximize");
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
// 监听布局变化，在 body 上添加相对应的 layout class
|
|
watch(
|
|
() => layout.value,
|
|
() => {
|
|
const body = document.body as HTMLElement;
|
|
body.setAttribute("class", layout.value);
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
|
|
// 监听窗口大小变化，折叠侧边栏
|
|
const screenWidth = ref(0);
|
|
const listeningWindow = useDebounceFn(() => {
|
|
screenWidth.value = document.body.clientWidth;
|
|
if (!isCollapse.value && screenWidth.value < 1200)
|
|
globalStore.setGlobalState("isCollapse", true);
|
|
if (isCollapse.value && screenWidth.value > 1200)
|
|
globalStore.setGlobalState("isCollapse", false);
|
|
}, 100);
|
|
window.addEventListener("resize", listeningWindow, false);
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("resize", listeningWindow);
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./index.scss";
|
|
</style>
|