<template>
|
<div class="page-layout" :class="{ collapse: menuCollapse }">
|
<div class="page-layout__mask" @click="collapseMenu(true)"></div>
|
|
<div class="page-layout__left">
|
<slider />
|
</div>
|
|
<div class="page-layout__right">
|
<div class="page-layout__topbar">
|
<topbar />
|
</div>
|
|
<div v-if="app.conf.showProcess" class="page-layout__process">
|
<cl-process />
|
</div>
|
|
<div class="page-layout__container">
|
<div class="page-layout__view" v-if="!appLoading">
|
<router-view v-slot="{ Component }">
|
<keep-alive :include="caches">
|
<component :is="Component" />
|
</keep-alive>
|
</router-view>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { computed, defineComponent } from "vue";
|
import Topbar from "./topbar.vue";
|
import Slider from "./slider.vue";
|
import { useCool } from "/@/cool";
|
|
export default defineComponent({
|
components: {
|
Topbar,
|
Slider
|
},
|
|
setup() {
|
const { store } = useCool();
|
|
// 菜单是否折叠
|
const menuCollapse = computed<boolean>(() => store.getters.menuCollapse);
|
|
// 应用信息
|
const app = computed<any>(() => store.getters.app);
|
|
// 应用加载
|
const appLoading = computed<boolean>(() => store.getters.appLoading);
|
|
// 缓存列表
|
const caches = computed(() => {
|
return store.getters.processList
|
.filter((e: any) => e.keepAlive)
|
.map((e: any) => {
|
return e.value.substring(1, e.value.length).replace(/\//g, "-");
|
});
|
});
|
|
// 折叠菜单
|
function collapseMenu(val: boolean) {
|
store.commit("COLLAPSE_MENU", val);
|
}
|
|
return {
|
menuCollapse,
|
app,
|
appLoading,
|
collapseMenu,
|
caches
|
};
|
}
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.page-layout {
|
display: flex;
|
background-color: #f7f7f7;
|
height: 100%;
|
width: 100%;
|
overflow: hidden;
|
|
&__left {
|
overflow: hidden;
|
height: 100%;
|
width: 255px;
|
transition: left 0.2s;
|
}
|
|
&__right {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
width: calc(100% - 255px);
|
}
|
|
&__topbar {
|
margin-bottom: 10px;
|
}
|
|
&__process {
|
margin-bottom: 10px;
|
padding: 0 10px;
|
}
|
|
&__container {
|
width: 100%;
|
box-sizing: border-box;
|
flex: 1;
|
overflow: hidden;
|
margin-bottom: 10px;
|
}
|
|
&__mask {
|
position: fixed;
|
left: 0;
|
top: 0;
|
background-color: rgba(0, 0, 0, 0.5);
|
height: 100%;
|
width: 100%;
|
z-index: 999;
|
}
|
|
&__view {
|
height: 100%;
|
width: 100%;
|
box-sizing: border-box;
|
padding: 0 10px;
|
border-radius: 3px;
|
|
& > div {
|
height: 100%;
|
}
|
}
|
|
@media only screen and (max-width: 768px) {
|
.page-layout__left {
|
position: absolute;
|
left: 0;
|
z-index: 9999;
|
transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1),
|
box-shadow 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
|
}
|
|
.page-layout__right {
|
width: 100%;
|
}
|
|
&.collapse {
|
.page-layout__left {
|
transform: translateX(-100%);
|
}
|
|
.page-layout__mask {
|
display: none;
|
}
|
}
|
}
|
|
@media only screen and (min-width: 768px) {
|
.page-layout__left,
|
.page-layout__right {
|
transition: width 0.2s ease-in-out;
|
}
|
|
.page-layout__mask {
|
display: none;
|
}
|
|
&.collapse {
|
.page-layout__left {
|
width: 64px;
|
}
|
|
.page-layout__right {
|
width: calc(100% - 64px);
|
}
|
}
|
}
|
}
|
</style>
|
