1ef066f47d
Former-commit-id: dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly dd4c302e448f871376ab1298240b44aa3d3e1643 [formerly 8bbdd72ba63cd9161b2b2e51826b8813e8c9fffc [formerly e7d3090ad5a6f6801b32d0abce9a4e9291fcc0e7]]]]] Former-commit-id: 1be4f8ac464528598b8a52649c107686d01c08d8 Former-commit-id: 7317640b0da3a039d8ca5b6457c1263fc1261272 Former-commit-id: 29d4f7df0be48866f4309a012d38e008e1725438 [formerly 9ee9681b4a3200cc3b344673e83d9f5e4343f07a] Former-commit-id: fddc0694f8fbf921142069e11ff694ea218fa0d9 Former-commit-id: 92059d07f780aa09aaff77faf9bc41a8bd6269f0 Former-commit-id: aef5ddaf56545324913a9b425e7f8b7c3ed45518 Former-commit-id: 279be73fde5a48ddc78a258a2ea55a3b0d64fe2b Former-commit-id: b970cb8f0bbe694a3bf733e726f8c833a1f3f511
107 lines
3.5 KiB
Vue
107 lines
3.5 KiB
Vue
<template>
|
|
<div
|
|
class="d2-layout-main-group"
|
|
:style="styleLayoutMainGroup"
|
|
:class="{grayMode: isGrayMode}">
|
|
<!-- 半透明遮罩 -->
|
|
<div class="d2-layout-main-mask"></div>
|
|
<!-- 主体内容 -->
|
|
<div class="d2-layout-main-content">
|
|
<!-- 顶栏 -->
|
|
<div class="d2-theme-header">
|
|
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
|
<img v-if="collapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
|
|
<img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
|
|
</div>
|
|
<div class="toggle-aside-btn" @click="collapse = !collapse">
|
|
<d2-icon name="bars"/>
|
|
</div>
|
|
<d2-layout-main-menu-header/>
|
|
<!-- 顶栏右侧 -->
|
|
<div class="d2-header-right">
|
|
<d2-layout-main-header-github/>
|
|
<d2-layout-main-header-help/>
|
|
<d2-layout-main-header-full-screen/>
|
|
<d2-layout-main-header-theme/>
|
|
<d2-layout-main-header-user/>
|
|
</div>
|
|
</div>
|
|
<!-- 下面 主体 -->
|
|
<div class="d2-theme-container">
|
|
<!-- 主体 侧边栏 -->
|
|
<div ref="aside" class="d2-theme-container-aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
|
<d2-layout-main-menu-side :collapse="collapse"/>
|
|
</div>
|
|
<!-- 主体 -->
|
|
<div class="d2-theme-container-main">
|
|
<div class="d2-theme-container-main-header">
|
|
<d2-multiple-page-control/>
|
|
</div>
|
|
<div class="d2-theme-container-main-body">
|
|
<transition name="fade-transverse">
|
|
<keep-alive :include="keepAliveList">
|
|
<router-view/>
|
|
</keep-alive>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapGetters } from 'vuex'
|
|
export default {
|
|
name: 'd2-layout-main',
|
|
components: {
|
|
'd2-layout-main-menu-side': () => import('./components/-menu-side'),
|
|
'd2-layout-main-menu-header': () => import('./components/-menu-header'),
|
|
'd2-layout-main-header-full-screen': () => import('./components/-full-screen'),
|
|
'd2-layout-main-header-theme': () => import('./components/-theme'),
|
|
'd2-layout-main-header-user': () => import('./components/-user'),
|
|
'd2-layout-main-header-help': () => import('./components/-help'),
|
|
'd2-layout-main-header-github': () => import('./components/-github')
|
|
},
|
|
data () {
|
|
return {
|
|
collapse: false,
|
|
// [侧边栏宽度] 正常状态
|
|
asideWidth: '200px',
|
|
// [侧边栏宽度] 折叠状态
|
|
asideWidthCollapse: '65px'
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
isGrayMode: state => state.d2admin.isGrayMode,
|
|
pageOpenedList: state => state.d2admin.pageOpenedList
|
|
}),
|
|
...mapGetters([
|
|
'themeActiveSetting'
|
|
]),
|
|
/**
|
|
* @description 返回现在需要缓存的页面 name
|
|
*/
|
|
keepAliveList () {
|
|
return this.pageOpenedList.filter(item => !(item.meta && item.meta.notCache)).map(e => e.name)
|
|
},
|
|
/**
|
|
* @description 最外层容器的背景图片样式
|
|
*/
|
|
styleLayoutMainGroup () {
|
|
return {
|
|
...this.themeActiveSetting.backgroundImage ? {
|
|
backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
|
|
} : {}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 注册主题
|
|
@import '~@/assets/style/theme/register.scss';
|
|
</style>
|