增加了页面结构的切换功能

移动端的判断代码移动

调整el-table的滚动条样式

vue/src/asset/style/element-ui.scss

@@ -221,14 +221,6 @@
     thead > tr > th {
         background: #fbfbfb;
     }
-
-    .el-table--scrollable-x .el-table__body-wrapper {
-        overflow-x: overlay;
-    }
-
-    .el-table--scrollable-y .el-table__body-wrapper {
-        overflow-y: overlay;
-    }
 }
 
 .el-textarea {

vue/src/layout/component/Header/index.vue

@@ -1,18 +0,0 @@
-<script type="text/jsx">
-import {getters as tagsViewGetters} from "@/layout/store/tagsView"
-import VNavbar from './Navbar'
-import TagsView from './TagsView'
-
-export default {
-    functional: true,
-
-    render() {
-        return (
-            <header>
-                <VNavbar/>
-                {tagsViewGetters.enabled && <TagsView/>}
-            </header>
-        )
-    }
-}
-</script>

vue/src/layout/component/Page/component/TagsView/index.vue

@@ -189,12 +189,12 @@ export default {
 
     render() {
         return (
-            <nav class="tags-view-container">
+            <div class="tags-view-container">
                 <scroll-panel ref="scrollPanel" class="tags-view-wrapper">
                     {this.renderTags()}
                 </scroll-panel>
                 {this.renderContextMenu()}
-            </nav>
+            </div>
         )
     }
 }

vue/src/layout/component/Page/index.vue

@@ -5,11 +5,12 @@ import BackToTop from "./component/BackToTop"
 import PageHeader from "./component/PageHeader"
 import PageView from "./component/PageView"
 import PageFooter from "./component/PageFooter"
+import TagsView from './component/TagsView'
 
 export default {
     name: 'Page',
 
-    components: {BackToTop, PageHeader, PageView, PageFooter},
+    components: {BackToTop, PageHeader, PageView, PageFooter, TagsView},
 
     computed: {
         renderPageHeader() {
@@ -26,6 +27,8 @@ export default {
 
         return (
             <main class="page-main">
+                {enabled && <tags-view/>}
+
                 <div v-show={!showIframe} class={this.pageClass}>
                     {this.renderPageHeader && <page-header/>}
 
@@ -61,8 +64,10 @@ export default {
 @import "~@/asset/style/variables.scss";
 
 .page-main {
-    position: relative;
+    display: flex;
+    flex-direction: column;
     flex: 1;
+    position: relative;
     overflow: hidden;
     background-color: #f0f2f5;
 

vue/src/layout/index.vue

@@ -1,20 +1,18 @@
 <script type="text/jsx">
 import offlineMixin from './mixin/offline'
 import VAside from './component/Aside'
-import VHeader from './component/Header'
+import VNavbar from './component/Navbar'
 import VPage from './component/Page'
-import {getters as appGetters, mutations as appMutations} from "@/layout/store/app"
+import {getters as appGetters} from "@/layout/store/app"
 import {getters as pageGetters} from "@/layout/store/page"
 import {getters as tagsViewGetters} from "@/layout/store/tagsView"
-import {debounce} from "@/util"
-import {isMobile} from "@/util/browser"
 
 export default {
     name: 'Layout',
 
     mixins: [offlineMixin],
 
-    components: {VAside, VHeader, VPage},
+    components: {VAside, VNavbar, VPage},
 
     computed: {
         isLeftRight() {
@@ -40,26 +38,15 @@ export default {
         }
     },
 
-    mounted() {
-        this.$_resizeHandler = debounce(() => {
-            !document.hidden && appMutations.isMobile(isMobile())
-        })
-        this.$_resizeHandler()
-
-        window.addEventListener('resize', this.$_resizeHandler)
-
-        this.$once('hook:beforeDestroy', () => {
-            window.removeEventListener('resize', this.$_resizeHandler)
-        })
-    },
-
     render() {
+        const aside = this.renderAside && <v-aside/>
+
         return (
             <section class={this.wrapperClass}>
-                {this.isLeftRight ? this.renderAside && <v-aside/> : <v-header/>}
+                {this.isLeftRight ? aside : <v-navbar/>}
 
                 <section class={this.containerClass}>
-                    {this.isLeftRight ? <v-header/> : <v-aside/>}
+                    {this.isLeftRight ? <v-navbar/> : aside}
                     <v-page/>
                 </section>
             </section>

vue/src/layout/store/app.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import {isEmpty} from "@/util"
+import {debounce, isEmpty} from "@/util"
 import {isMobile} from "@/util/browser"
 import {createGetters, createMutations} from "@/util/observable"
 
@@ -67,3 +67,7 @@ function sort(routes) {
         }
     })
 }
+
+window.addEventListener('resize', debounce(() => {
+    !document.hidden && mutations.isMobile(isMobile())
+}))