82 lines
2.8 KiB
Vue
82 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 { computed, onBeforeUnmount, provide, ref, watch } 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)
|
|
//是否显示导航栏
|
|
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">
|
|
@use './index.scss';
|
|
</style>
|