mirror of
https://github.com/TangSengDaoDao/TangSengDaoDaoManager
synced 2025-06-06 17:50:44 +00:00
119 lines
3.0 KiB
Vue
Executable File
119 lines
3.0 KiB
Vue
Executable File
<template>
|
|
<div v-if="maximize" class="maximize" @click="onExitMaximizeClick">
|
|
<el-icon>
|
|
<i-bd-close />
|
|
</el-icon>
|
|
</div>
|
|
|
|
<Tabs v-if="tabs" />
|
|
<el-main>
|
|
<router-view v-slot="{ Component, route }">
|
|
<transition appear name="fade-transform" mode="out-in">
|
|
<keep-alive :include="keepAliveName">
|
|
<component :is="Component" v-if="isRouterShow" :key="route.fullPath" />
|
|
</keep-alive>
|
|
</transition>
|
|
</router-view>
|
|
</el-main>
|
|
<el-footer v-if="footer">
|
|
<Footer />
|
|
</el-footer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useDebounceFn } from '@vueuse/core';
|
|
import { useGlobalStore } from '@/stores/modules/global';
|
|
import { useKeepAliveStore } from '@/stores/modules/keepAlive';
|
|
import Tabs from '@/layouts/components/Tabs.vue';
|
|
import Footer from '@/layouts/components/Footer.vue';
|
|
|
|
const globalStore = useGlobalStore();
|
|
const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore);
|
|
|
|
const keepAliveStore = useKeepAliveStore();
|
|
const { keepAliveName } = storeToRefs(keepAliveStore);
|
|
// 注入刷新页面方法
|
|
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);
|
|
});
|
|
|
|
const onExitMaximizeClick = () => {
|
|
globalStore.setGlobalState('maximize', false);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-main {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
background-color: var(--el-bg-color-page);
|
|
}
|
|
.el-footer {
|
|
height: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.maximize {
|
|
position: fixed;
|
|
top: -25px;
|
|
right: -25px;
|
|
z-index: 999;
|
|
width: 52px;
|
|
height: 52px;
|
|
cursor: pointer;
|
|
background-color: var(--el-color-info);
|
|
border-radius: 50%;
|
|
opacity: 0.7;
|
|
&:hover {
|
|
background-color: var(--el-color-info-dark-2);
|
|
}
|
|
.el-icon {
|
|
position: relative;
|
|
top: 68%;
|
|
left: 32%;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
</style>
|