pqs-9100_client/frontend/src/layouts/components/Main/index.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>