84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<!-- 纵向布局作为基础布局 -->
|
||
<script setup lang="ts">
|
||
import SystemAnnouncementDialog from '@/components/SystemAnnouncementDialog/index.vue';
|
||
import { useSafeArea } from '@/hooks/useSafeArea';
|
||
import { useWindowWidthObserver } from '@/hooks/useWindowWidthObserver';
|
||
import Aside from '@/layouts/components/Aside/index.vue';
|
||
import Header from '@/layouts/components/Header/index.vue';
|
||
import Main from '@/layouts/components/Main/index.vue';
|
||
import { useAnnouncementStore, useDesignStore } from '@/stores';
|
||
|
||
const designStore = useDesignStore();
|
||
const announcementStore = useAnnouncementStore();
|
||
|
||
const isCollapse = computed(() => designStore.isCollapse);
|
||
|
||
/* 是否移入了安全区 */
|
||
useSafeArea({
|
||
direction: 'left',
|
||
size: 50,
|
||
onChange(isInSafeArea) {
|
||
// 设置悬停为 true
|
||
designStore.isSafeAreaHover = isInSafeArea;
|
||
},
|
||
enabled: isCollapse, // 折叠才开启监听
|
||
});
|
||
|
||
/** 监听窗口大小变化，折叠侧边栏 */
|
||
useWindowWidthObserver();
|
||
|
||
// 应用加载时检查是否需要显示公告弹窗
|
||
onMounted(() => {
|
||
// 检查是否应该显示弹窗（只有"关闭一周"且未超过7天才不显示）
|
||
// 数据获取已移至 SystemAnnouncementDialog 组件内部，每次打开弹窗时都会获取最新数据
|
||
if (announcementStore.shouldShowDialog) {
|
||
announcementStore.openDialog();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<el-container class="layout-container">
|
||
<el-header class="layout-header">
|
||
<Header />
|
||
</el-header>
|
||
<el-container class="layout-container-main">
|
||
<Aside />
|
||
<el-main class="layout-main">
|
||
<!-- 路由页面 -->
|
||
<Main />
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
<!-- 系统公告弹窗 -->
|
||
<SystemAnnouncementDialog />
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.layout-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
.layout-header {
|
||
padding: 0;
|
||
}
|
||
.layout-main {
|
||
height: 100%;
|
||
padding: 0;
|
||
}
|
||
.layout-container-main {
|
||
margin-left: var(--sidebar-left-container-default-width, 0);
|
||
transition: margin-left 0.3s ease;
|
||
}
|
||
}
|
||
|
||
/** 去除菜单右侧边框 */
|
||
.el-menu {
|
||
border-right: none;
|
||
}
|
||
.layout-scrollbar {
|
||
width: 100%;
|
||
}
|
||
</style>
|