1.8 版本

2019-05-11 13:46:15 +08:00
parent 9ea77930ef
commit dab2fc076d
23 changed files with 738 additions and 143 deletions
--- a/src/views/layout/Layout.vue
+++ b/src/views/layout/Layout.vue
@@ -1,34 +1,44 @@
 <template>
  <div :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar class="sidebar-container"/>
-    <div class="main-container">
-      <navbar/>
-      <tags-view/>
-      <app-main/>
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <sidebar class="sidebar-container" />
+    <div :class="{hasTagsView:needTagsView}" class="main-container">
+      <div :class="{'fixed-header':fixedHeader}">
+        <navbar />
+        <tags-view v-if="needTagsView" />
+      </div>
+      <app-main />
+      <right-panel>
+        <settings />
+      </right-panel>
    </div>
  </div>
 </template>

 <script>
-import { Navbar, Sidebar, AppMain, TagsView } from './components'
+import RightPanel from '@/components/RightPanel'
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
+import { mapState } from 'vuex'
+
 export default {
  name: 'Layout',
  components: {
-    Navbar,
-    Sidebar,
    AppMain,
-    TagsView
+    Navbar,
+    Settings,
+    Sidebar,
+    TagsView,
+    RightPanel
  },
  mixins: [ResizeMixin],
  computed: {
-    sidebar() {
-      return this.$store.state.app.sidebar
-    },
-    device() {
-      return this.$store.state.app.device
-    },
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader
+    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
@@ -40,24 +50,28 @@ export default {
  },
  methods: {
    handleClickOutside() {
-      this.$store.dispatch('closeSideBar', { withoutAnimation: false })
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    }
  }
 }
 </script>

-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";
+  @import "~@/styles/variables.scss";
+
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
-    &.mobile.openSidebar{
+
+    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }
+
  .drawer-bg {
    background: #000;
    opacity: 0.3;
@@ -67,4 +81,22 @@ export default {
    position: absolute;
    z-index: 999;
  }
+
+  .fixed-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    background: #ffffff;
+    z-index: 99;
+    width: calc(100% - #{$sideBarWidth});
+    transition: width 0.28s;
+  }
+
+  .hideSidebar .fixed-header {
+    width: calc(100% - #{$hideSidebarWidth})
+  }
+
+  .mobile .fixed-header {
+    width: 100%;
+  }
 </style>
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
@@ -22,7 +22,7 @@ export default {
 }
 </script>

-<style scoped>
+<style lang="scss" scoped>
  .app-main {
    z-index: 88;
    /*84 = navbar + tags-view = 50 +34 */
@@ -31,5 +31,19 @@ export default {
    position: relative;
    overflow: hidden;
  }
+
+  .fixed-header+.app-main {
+    padding-top: 50px;
+  }
+
+  .hasTagsView {
+  .app-main {
+    min-height: calc(100vh - 84px);
+  }
+
+  .fixed-header+.app-main {
+    padding-top: 84px;
+  }
+  }
 </style>

--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -4,28 +4,30 @@
    <breadcrumb class="breadcrumb-container"/>

    <div class="right-menu">
-      <template>
+      <template v-if="device!=='mobile'">
        <el-tooltip content="更新公告" effect="dark" placement="bottom">
          <Placard class="screenfull right-menu-item"/>
        </el-tooltip>
-      </template>
-      <template v-if="device!=='mobile'">
        <el-tooltip content="全屏" effect="dark" placement="bottom">
          <screenfull class="screenfull right-menu-item"/>
        </el-tooltip>
      </template>
-
      <el-dropdown class="avatar-container right-menu-item" trigger="click">
        <div class="avatar-wrapper">
          <img :src="user.avatar" class="user-avatar">
          <i class="el-icon-caret-bottom"/>
        </div>
        <el-dropdown-menu slot="dropdown">
-          <router-link to="/">
+          <a target="_blank" href="https://docs.auauz.net/">
            <el-dropdown-item>
-              首页
+              项目文档
            </el-dropdown-item>
-          </router-link>
+          </a>
+          <span style="display:block;" @click="show = true">
+            <el-dropdown-item>
+              布局设置
+            </el-dropdown-item>
+          </span>
          <router-link to="/user/center">
            <el-dropdown-item>
              个人中心
@@ -59,7 +61,18 @@ export default {
      'sidebar',
      'user',
      'device'
-    ])
+    ]),
+    show: {
+      get() {
+        return this.$store.state.settings.showRightPanel
+      },
+      set(val) {
+        this.$store.dispatch('changeSetting', {
+          key: 'showRightPanel',
+          value: val
+        })
+      }
+    }
  },
  methods: {
    toggleSideBar() {
--- a/src/views/layout/components/Settings/index.vue
+++ b/src/views/layout/components/Settings/index.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">系统布局配置</h3>
+      <div class="drawer-item">
+        <span>开启 Tags-Views</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>固定 Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
+      </div>
+
+      <div class="drawer-item">
+        <span>显示 Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>
--- a/src/views/layout/components/Sidebar/Logo.vue
+++ b/src/views/layout/components/Sidebar/Logo.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-menu-item v-if="sidebarLogo" :class="{'submenu-title-noDropdown':isCollapse}" index="0" style="pointer-events: none;">
+    <!-- 缩小时显示的logo，可以自定义，这里直接使用图标库中的 -->
+    <svg-icon v-if="isCollapse" icon-class="run" />
+    <!--正常状态下显示的，可以使用本地的logoImg-->
+    <div class="logo-con">
+      <img src="https://aurora-1255840532.cos.ap-chengdu.myqcloud.com/logo.png">
+      <!--<img :src="logoImg">-->
+    </div>
+  </el-menu-item>
+</template>
+
+<script>
+// import logoImg from '@/assets/logo/logo.png'
+import { mapState } from 'vuex'
+export default {
+  name: 'Logo',
+  props: {
+    isCollapse: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // logoImg: logoImg
+    }
+  },
+  computed: {
+    ...mapState({
+      sidebarLogo: state => state.settings.sidebarLogo
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
@@ -9,15 +9,7 @@
      text-color="#bfcbd9"
      active-text-color="#409EFF"
    >
-      <!-- 修改logo -->
-      <el-menu-item :class="{'submenu-title-noDropdown':isCollapse}" index="0" style="pointer-events: none;">
-        <!-- 缩小时显示的logo，可以自定义，这里直接使用图标库中的 -->
-        <svg-icon v-if="isCollapse" icon-class="run" />
-        <!--正常状态下显示的，可以使用本地的logoImg-->
-        <div class="logo-con">
-          <img src="https://aurora-1255840532.cos.ap-chengdu.myqcloud.com/logo.png">
-        </div>
-      </el-menu-item>
+      <Logo :is-collapse="isCollapse"/>
      <sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path"/>
    </el-menu>
  </el-scrollbar>
@@ -26,14 +18,9 @@
 <script>
 import { mapGetters } from 'vuex'
 import SidebarItem from './SidebarItem'
-// import logoImg from '@/assets/logo/logo.png'
+import Logo from './Logo'
 export default {
-  components: { SidebarItem },
-  data() {
-    return {
-      // logoImg: logoImg
-    }
-  },
+  components: { SidebarItem, Logo },
  computed: {
    ...mapGetters([
      'permission_routers',
--- a/src/views/layout/components/TagsView.vue
+++ b/src/views/layout/components/TagsView.vue
@@ -12,21 +12,22 @@
        @click.middle.native="closeSelectedTag(tag)"
        @contextmenu.prevent.native="openMenu(tag,$event)">
        {{ tag.title }}
-        <span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
      </router-link>
    </scroll-pane>
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <li @click="refreshSelectedTag(selectedTag)">刷新</li>
-      <li @click="closeSelectedTag(selectedTag)">关闭</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭</li>
      <li @click="closeOthersTags">关闭其他</li>
-      <li @click="closeAllTags">关闭所有</li>
+      <li @click="closeAllTags(selectedTag)">关闭所有</li>
    </ul>
  </div>
 </template>

 <script>
 import ScrollPane from '@/components/ScrollPane'
-
+import path from 'path'
+import { constantRouterMap } from '@/router'
 export default {
  components: { ScrollPane },
  data() {
@@ -34,6 +35,7 @@ export default {
      visible: false,
      top: 0,
      left: 0,
+      affixTags: [],
      selectedTag: {}
    }
  },
@@ -56,12 +58,43 @@ export default {
    }
  },
  mounted() {
+    this.initTags()
    this.addViewTags()
  },
  methods: {
    isActive(route) {
      return route.path === this.$route.path
    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          const tagPath = path.resolve(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(constantRouterMap)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('addVisitedView', tag)
+        }
+      }
+    },
    addViewTags() {
      const { name } = this.$route
      if (name) {
@@ -114,9 +147,28 @@ export default {
        this.moveToCurrentTag()
      })
    },
-    closeAllTags() {
-      this.$store.dispatch('delAllViews')
-      this.$router.push('/')
+    closeAllTags(view) {
+      this.$store.dispatch('delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view.name === '首页') {
+          // to reload home page
+          this.$router.replace({ path: '/redirect' + view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
    },
    openMenu(tag, e) {
      const menuMinWidth = 105
--- a/src/views/layout/components/index.js
+++ b/src/views/layout/components/index.js
@@ -2,3 +2,4 @@ export { default as Navbar } from './Navbar'
 export { default as Sidebar } from './Sidebar'
 export { default as AppMain } from './AppMain'
 export { default as TagsView } from './TagsView'
+export { default as Settings } from './Settings'