完善

Former-commit-id: 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 5d75986f02de2f4515121e9f797b835dba132732 [formerly 8c4098bcffd50089b041edcf9d539c64c3c92b16 [formerly 1bf5ee08c5424c0a4cedac421d52cf8c8393ae7f]]]]]
Former-commit-id: 3aa6fad9f9c31f62376dfb27f62fa937d0735e55
Former-commit-id: d293c0b275dc8c4d439fa04a45d9d4efa1dd8f4c
Former-commit-id: a737d8ff3f0c9d829e66a1cd305257961c551eda [formerly 4d2360f8b865bfab066291680106dc95df97ce2a]
Former-commit-id: b64f59d9203d16e71bcd21065aba7ead88566938
Former-commit-id: 4350c691cdff708266be623edf8f1b9d61faeb02
Former-commit-id: 1dba1637790b1f2c87733adfdfcc8491a97bfd1d
Former-commit-id: e17d989004ecb5fb7ce620103b997998da42b8d9
Former-commit-id: 3b781b9b28f6ed584b9c6dbfa5fafe3f8c1475b5

src/layout/header-aside/layout.vue

@@ -0,0 +1,117 @@
+<template>
+  <div
+    class="d2-layout-header-aside-group"
+    :style="styleLayoutMainGroup"
+    :class="{grayMode: isGrayMode}">
+    <!-- 半透明遮罩 -->
+    <div class="d2-layout-header-aside-mask"></div>
+    <!-- 主体内容 -->
+    <div class="d2-layout-header-aside-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-menu-header/>
+        <!-- 顶栏右侧 -->
+        <div class="d2-header-right">
+          <d2-header-github/>
+          <d2-header-help/>
+          <d2-header-fullscreen/>
+          <d2-header-theme/>
+          <d2-header-user/>
+        </div>
+      </div>
+      <!-- 下面 主体 -->
+      <div class="d2-theme-container">
+        <!-- 主体 侧边栏 -->
+        <div ref="aside" class="d2-theme-container-aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
+          <d2-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'
+
+import menuSide from './components/menu-side'
+import menuHeader from './components/menu-header'
+import multiplePageControl from './components/multiple-page-control'
+import headerFullscreen from './components/header-fullscreen'
+import headerTheme from './components/header-theme'
+import headerUser from './components/header-user'
+import headerHelp from './components/header-help'
+import headerGithub from './components/header-github'
+
+export default {
+  name: 'd2-layout-header-aside',
+  components: {
+    'd2-menu-side': menuSide,
+    'd2-menu-header': menuHeader,
+    'd2-multiple-page-control': multiplePageControl,
+    'd2-header-fullscreen': headerFullscreen,
+    'd2-header-theme': headerTheme,
+    'd2-header-user': headerUser,
+    'd2-header-help': headerHelp,
+    'd2-header-github': headerGithub
+  },
+  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>