<template>
|
<el-main
|
class="layout-main"
|
:style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`"
|
>
|
<el-scrollbar
|
ref="layoutMainScrollbarRef"
|
class="layout-main-scroll layout-backtop-header-fixed"
|
wrap-class="layout-main-scroll flex"
|
view-class="layout-main-scroll bg-[var(--color-bg-side)] flex h100 w-full"
|
>
|
<SideBar v-if="!isSharePage && sidebarIsShow" :isShow="sidebarIsShow" @toggleSidebar="toggleSidebar" />
|
<SidebarOther v-if="!isSharePage && !sidebarIsShow" :isShow="!sidebarIsShow" @toggleSidebar="toggleSidebar" />
|
<div
|
class="flex-auto flex-col flex right-container"
|
:class="{
|
// 'm-[6px]': !isSharePage,
|
// 'rounded-[10px]': !isSharePage,
|
'bg-[var(--color-bg-side)]': !isSharePage,
|
'bg-[#f7f8fa]': isSharePage,
|
}"
|
>
|
<Header v-if="!isSharePage" class="flex-0" :sidebarIsShow="sidebarIsShow" />
|
<ShareHeader v-else class="flex-0"></ShareHeader>
|
<LayoutParentView class="flex-auto" />
|
</div>
|
<Login v-show="isShowLogin" />
|
</el-scrollbar>
|
<el-backtop :target="setBacktopClass" />
|
</el-main>
|
</template>
|
|
<script setup lang="ts" name="layoutMain">
|
import { storeToRefs } from 'pinia';
|
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
|
import { useRoute } from 'vue-router';
|
import Header from './header/Header.vue';
|
import ShareHeader from './header/ShareHeader.vue';
|
|
import Login from './login/Login.vue';
|
import SideBar from './sidebar/Sidebar.vue';
|
import SidebarOther from './sidebar/SidebarOther.vue';
|
import { isSharePage, isShowLogin } from '/@/stores/chatRoom';
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { NextLoading } from '/@/utils/loading';
|
import { Local } from '/@/utils/storage';
|
// 引入组件
|
const LayoutParentView = defineAsyncComponent(() => import('/@/layout/routerView/parent.vue'));
|
const LayoutFooter = defineAsyncComponent(() => import('/@/layout/footer/index.vue'));
|
// 定义变量内容
|
const layoutMainScrollbarRef = ref();
|
const route = useRoute();
|
const storesTagsViewRoutes = useTagsViewRoutes();
|
const storesThemeConfig = useThemeConfig();
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
// 设置 footer 显示/隐藏
|
const isFooter = computed(() => {
|
return themeConfig.value.isFooter && !route.meta.isIframe;
|
});
|
// 设置 header 固定
|
const isFixedHeader = computed(() => {
|
return themeConfig.value.isFixedHeader;
|
});
|
// 设置 Backtop 回到顶部
|
const setBacktopClass = computed(() => {
|
if (themeConfig.value.isFixedHeader) return `.layout-backtop-header-fixed .el-scrollbar__wrap`;
|
else return `.layout-backtop .el-scrollbar__wrap`;
|
});
|
// 设置主内容区的高度
|
const setMainHeight = computed(() => {
|
if (isTagsViewCurrenFull.value) return '0px';
|
const { isTagsview, layout } = themeConfig.value;
|
if (isTagsview && layout !== 'classic') return '85px';
|
else return '51px';
|
});
|
// 页面加载前
|
onMounted(() => {
|
NextLoading.done(600);
|
});
|
|
// 暴露变量
|
defineExpose({
|
layoutMainScrollbarRef,
|
});
|
|
//#region ====================== 侧边栏显示隐藏 ======================
|
const sidebarIsShow = ref(Local.get('sidebarIsShow') ?? true);
|
const toggleSidebar = (val) => {
|
sidebarIsShow.value = val;
|
Local.set('sidebarIsShow', val);
|
};
|
//#endregion
|
</script>
|
|
<style scoped lang="scss">
|
.right-container {
|
width: 100vw;
|
// margin: 0;
|
padding: 0;
|
overflow: hidden;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
// background-color: #1c1e1d;
|
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
// margin: 6px;
|
// border-radius: 10px;
|
}
|
</style>
|
