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

src/App.vue

@@ -18,5 +18,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
+  #id{
+  }
 </style>

src/components/exception/ExceptionPage.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="exception">
+  <div class="exception-page" :style="{minHeight: layoutMinHeight - 64 + 'px'}">
     <div class="img">
       <img :src="config[type].img" />
-      <!--<div class="ele" :style="{backgroundImage: `url(${config[type].img})`}"/>-->
     </div>
     <div class="content">
       <h1>{{config[type].title}}</h1>
@@ -24,17 +23,18 @@ export default {
     return {
       config: Config
     }
-  }
+  },
+  inject: ['layoutMinHeight']
 }
 </script>
 
 <style lang="less" scoped>
-  .exception{
-    min-height: 500px;
-    height: 80%;
+  .exception-page{
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
     align-items: center;
-    text-align: center;
-    margin-top: 150px;
+    background-color: white;
     .img{
       display: inline-block;
       padding-right: 52px;
@@ -46,7 +46,6 @@ export default {
     }
     .content{
       display: inline-block;
-      flex: auto;
       h1{
         color: #434e59;
         font-size: 72px;

src/components/setting/Setting.vue

@@ -7,7 +7,7 @@
       </img-checkbox-group>
     </setting-item>
     <setting-item title="主题色">
-      <color-checkbox-group @change="onColorChange" :defaultValues="[0]" :multiple="false">
+      <color-checkbox-group @change="onColorChange" :defaultValues="[5]" :multiple="false">
         <color-checkbox v-for="(color, index) in colors" :key="index" :color="color" :value="index" />
       </color-checkbox-group>
     </setting-item>
@@ -96,6 +96,11 @@ export default {
       colors: ['#f5222d', '#fa541c', '#faad14', '#13c2c2', '#52c41a', '#1d92ff', '#2f54eb', '#722ed1'],
     }
   },
+  watch: {
+    animate(){
+      this.direction = 0
+    }
+  },
   computed: {
     animateCfg() {
       return this.animates[this.animate]

src/components/transition/PageToggleTransition.vue

@@ -51,9 +51,8 @@
           direction = animate.directions[0]
         } else {
           direction = animate.directions.find(item => item == this.direction)
-          direction = (direction == undefined || direction === 'default') ? '' : direction
         }
-        window.console.log(direction)
+        direction = (direction == undefined || direction === 'default') ? '' : direction
         if (direction != '') {
           direction = isLeave && this.reverse ? this.reversePosition(direction, animate.directions) : direction
           direction = direction[0].toUpperCase() + direction.substring(1)

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;
     }
   }

src/pages/exception/403.vue

@@ -9,6 +9,8 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+  .exception-page{
+    margin: -24px 0 0;
+  }
 </style>

src/pages/exception/404.vue

@@ -9,6 +9,8 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+  .exception-page{
+    margin: -24px 0 0;
+  }
 </style>

src/pages/exception/500.vue

@@ -1,5 +1,5 @@
 <template>
-    <exception-page type="500" />
+  <exception-page type="500" />
 </template>
 
 <script>
@@ -9,6 +9,8 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+  .exception-page{
+    margin: -24px 0 0;
+  }
 </style>

src/store/modules/setting.js

@@ -11,7 +11,7 @@ export default {
     multiPage: true,
     animates: animates,
     animate: {
-      name: 'back',
+      name: 'bounce',
       direction: 'left'
     }
   },

src/theme/default/color.less

@@ -1,4 +1,16 @@
-@import "../theme";
+@import '~ant-design-vue/lib/style/color/colors.less';
+@primary: #1890ff;
 @primary-color: @primary;
 @processing-color: @primary;
 @link-color: @primary;
+
+@primary-1: color(~`colorPalette('@{primary}', 1) `);
+@primary-2: color(~`colorPalette('@{primary}', 2) `);
+@primary-3: color(~`colorPalette('@{primary}', 3) `);
+@primary-4: color(~`colorPalette('@{primary}', 4) `);
+@primary-5: color(~`colorPalette('@{primary}', 5) `);
+@primary-6: color(~`colorPalette('@{primary}', 6) `);
+@primary-7: color(~`colorPalette('@{primary}', 7) `);
+@primary-8: color(~`colorPalette('@{primary}', 8) `);
+@primary-9: color(~`colorPalette('@{primary}', 9) `);
+@primary-10: color(~`colorPalette('@{primary}', 10) `);

src/theme/theme.less

@@ -1 +1 @@
-@primary: #1890ff;
+@import "./default/index";

vue.config.js

@@ -1,14 +1,14 @@
-// let path = require('path')
+let path = require('path')
 const ThemeColorReplacer = require('webpack-theme-color-replacer')
 const getThemeColors = require('./src/utils/themeUtil').getThemeColors
 const themeColor = require('./src/config').themeColor
 
 module.exports = {
+  // transpileDependencies: ['webpack-theme-color-replacer'],
   pluginOptions: {
     'style-resources-loader': {
       preProcessor: 'less',
-      // patterns: [path.resolve(__dirname, "./src/theme/theme.less")]
-      patterns: []
+      patterns: [path.resolve(__dirname, "./src/theme/theme.less")],
     }
   },
   configureWebpack: config => {