110 lines
2.1 KiB
Vue
110 lines
2.1 KiB
Vue
<template>
|
|
<router-view v-slot="{ Component }">
|
|
<div
|
|
class="app-main-wrap"
|
|
:style="style">
|
|
<section class="app-main">
|
|
<keep-alive
|
|
:include="cachedViews"
|
|
:max="100">
|
|
<component
|
|
:is="Component"
|
|
:key="key" />
|
|
</keep-alive>
|
|
</section>
|
|
</div>
|
|
<a-back-top
|
|
target-container=".app-main-wrap"
|
|
:style="{ position: 'absolute' }">
|
|
<a-button>UP</a-button>
|
|
</a-back-top>
|
|
</router-view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import Breadcrumb from './Breadcrumb.vue'
|
|
const LAYOUT_MOBILE_MAX = 768
|
|
|
|
export default {
|
|
name: 'app-main',
|
|
props: {
|
|
animation: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
components: { Breadcrumb },
|
|
data() {
|
|
return {
|
|
layoutWidth:
|
|
typeof window !== 'undefined' ? window.innerWidth : LAYOUT_MOBILE_MAX + 1
|
|
}
|
|
},
|
|
mounted() {
|
|
this._layoutOnResize = () => {
|
|
this.layoutWidth = window.innerWidth
|
|
}
|
|
window.addEventListener('resize', this._layoutOnResize)
|
|
},
|
|
beforeUnmount() {
|
|
window.removeEventListener('resize', this._layoutOnResize)
|
|
},
|
|
computed: {
|
|
...mapGetters(['cachedViews', 'sidebar']),
|
|
// 相同路由，不同参数缓存问题
|
|
key() {
|
|
return this.$route.fullPath
|
|
},
|
|
isCollapsed() {
|
|
return !this.sidebar.opened
|
|
},
|
|
style() {
|
|
if (this.layoutWidth <= LAYOUT_MOBILE_MAX) {
|
|
return { width: '100%' }
|
|
}
|
|
const sidebarWidth = this.isCollapsed ? '56px' : this.sidebar.width
|
|
return {
|
|
width: `calc(100% - ${sidebarWidth})`
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
$route: {
|
|
handler(val) {
|
|
if (val.meta.keepAlive)
|
|
this.$store.dispatch('cachedViews/addCachedView', val)
|
|
},
|
|
immediate: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.app-main {
|
|
position: relative;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
background: var(--portal-bg-surface);
|
|
background-image: radial-gradient(
|
|
ellipse 80% 50% at 100% 0%,
|
|
rgba(56, 189, 248, 0.05) 0%,
|
|
transparent 45%
|
|
),
|
|
radial-gradient(ellipse 60% 40% at 0% 100%, rgba(34, 211, 238, 0.04) 0%, transparent 40%);
|
|
&-wrap {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.app-main {
|
|
&-wrap {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|