修改: 调整布局，解决全局动画导致的界面抖动问题；

src/layouts/GlobalLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-layout>
+  <a-layout class="global-layout">
     <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
       <sider-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
     </drawer>
@@ -10,9 +10,9 @@
       </div>
       <setting />
     </drawer>
-    <a-layout>
+    <a-layout class="global-layout-main">
       <global-header :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
-      <a-layout-content :style="{minHeight: minHeight, padding: '24px 24px 0', position: 'relative'}">
+      <a-layout-content class="global-layout-content" :style="{minHeight: minHeight, padding: '24px 24px 0', position: 'relative'}">
         <slot></slot>
       </a-layout-content>
       <a-layout-footer style="padding: 0px">
@@ -29,7 +29,7 @@ import Drawer from '../components/tool/Drawer'
 import SiderMenu from '../components/menu/SiderMenu'
 import Setting from '../components/setting/Setting'
 
-const minHeight = window.innerHeight - 64 - 24 - 122
+const minHeight = window.innerHeight - 64 - 122
 
 let menuData = []
 
@@ -44,6 +44,11 @@ export default {
       showSetting: false
     }
   },
+  provide() {
+    return{
+      layoutMinHeight: minHeight,
+    }
+  },
   computed: {
     isMobile () {
       return this.$store.state.setting.isMobile
@@ -82,14 +87,38 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .setting{
-    background-color: #1890ff;
-    color: #fff;
-    border-radius: 5px 0 0 5px;
-    line-height: 40px;
-    font-size: 22px;
-    width: 40px;
-    height: 40px;
-    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  .global-layout{
+    height: 100vh;
+    .global-layout-main{
+      height: 100vh;
+      overflow-y: scroll;
+      scrollbar-color: @primary-color @primary-2;
+      scrollbar-width: thin;
+      &::-webkit-scrollbar{
+        width: 3px;
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 3px;
+        background: @primary;
+      }
+      &::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
+        border-radius: 3px;
+        background: @primary-3;
+      }
+    }
+    .global-layout-content{
+    }
+    .setting{
+      background-color: #1890ff;
+      color: #fff;
+      border-radius: 5px 0 0 5px;
+      line-height: 40px;
+      font-size: 22px;
+      width: 40px;
+      height: 40px;
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+    }
   }
 </style>

src/layouts/MenuView.vue

@@ -1,25 +1,25 @@
 <template>
   <global-layout>
-    <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
-    <a-tabs
-      @contextmenu.native="e => onContextmenu(e)"
-      v-if="multiPage"
-      :active-key="activePage"
-      style="margin-top: -8px; margin-bottom: 8px"
-      :hide-add="true"
-      type="editable-card"
-      @change="changePage"
-      @edit="editPage">
-      <a-tab-pane :key="page.fullPath" v-for="page in pageList">
-        <span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
-      </a-tab-pane>
-    </a-tabs>
-    <page-toggle-transition :animate="animate.name" :direction="animate.direction">
-      <keep-alive v-if="multiPage">
-        <router-view />
-      </keep-alive>
-      <router-view v-else />
-    </page-toggle-transition>
+      <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
+      <a-tabs
+        @contextmenu.native="e => onContextmenu(e)"
+        v-if="multiPage"
+        :active-key="activePage"
+        style="margin-top: -8px; margin-bottom: 8px"
+        :hide-add="true"
+        type="editable-card"
+        @change="changePage"
+        @edit="editPage">
+        <a-tab-pane :key="page.fullPath" v-for="page in pageList">
+          <span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
+        </a-tab-pane>
+      </a-tabs>
+      <page-toggle-transition :animate="animate.name" :direction="animate.direction">
+        <keep-alive v-if="multiPage">
+          <router-view />
+        </keep-alive>
+        <router-view v-else />
+      </page-toggle-transition>
   </global-layout>
 </template>
 
@@ -159,6 +159,9 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+  .menu-view{
+    .menu-view-content{
+    }
+  }
 </style>

src/layouts/PageLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="margin: -24px -24px 0px">
+  <div class="page-layout">
     <page-header :breadcrumb="breadcrumb" :title="title" :logo="logo" :avatar="avatar">
       <slot name="action"  slot="action"></slot>
       <slot slot="content" name="headerContent"></slot>
@@ -50,6 +50,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+  .page-header{
+    margin: -24px -24px 0;
+  }
   .link{
     margin-top: 16px;
     line-height: 24px;
@@ -64,11 +67,11 @@ export default {
   }
   .page-content{
     position: relative;
+    padding: 24px 24px 0;
     &.side{
-      padding: 24px 24px 0;
     }
     &.head{
-      padding: 24px 0 0;
+      margin: 0 auto;
       max-width: 1400px;
     }
   }