新增: 全局动画切换功能；

src/layouts/GlobalLayout.vue

@@ -12,7 +12,7 @@
     </drawer>
     <a-layout>
       <global-header :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
-      <a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}">
+      <a-layout-content :style="{minHeight: minHeight, padding: '24px 24px 0', position: 'relative'}">
         <slot></slot>
       </a-layout-content>
       <a-layout-footer style="padding: 0px">

src/layouts/MenuView.vue

@@ -10,25 +10,28 @@
       type="editable-card"
       @change="changePage"
       @edit="editPage">
-      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">
+      <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>
-    <transition name="page-toggle">
+    <page-toggle-transition :animate="animate.name" :direction="animate.direction">
       <keep-alive v-if="multiPage">
         <router-view />
       </keep-alive>
       <router-view v-else />
-    </transition>
+    </page-toggle-transition>
   </global-layout>
 </template>
 
 <script>
 import GlobalLayout from './GlobalLayout'
 import Contextmenu from '../components/menu/Contextmenu'
+import PageToggleTransition from '../components/transition/PageToggleTransition'
+import {mapState} from 'vuex'
+
 export default {
   name: 'MenuView',
-  components: {Contextmenu, GlobalLayout},
+  components: {PageToggleTransition, Contextmenu, GlobalLayout},
   data () {
     return {
       pageList: [],
@@ -43,9 +46,7 @@ export default {
     }
   },
   computed: {
-    multiPage () {
-      return this.$store.state.setting.multiPage
-    }
+    ...mapState('setting', ['multiPage', 'animate'])
   },
   created () {
     this.pageList.push(this.$route)
@@ -63,8 +64,8 @@ export default {
         this.pageList.push(newRoute)
       }
     },
-    'activePage': function () {
-      // this.$router.push(key)
+    'activePage': function (key) {
+      this.$router.push(key)
     },
     'multiPage': function (newVal) {
       if (!newVal) {

src/layouts/PageLayout.vue

@@ -14,7 +14,7 @@
       <slot v-if="this.$refs.extra" slot="extra" name="extra"></slot>
     </page-header>
     <div ref="page" :class="['page-content', layout]" >
-      <slot ></slot>
+      <slot></slot>
     </div>
   </div>
 </template>
@@ -63,11 +63,12 @@ export default {
     }
   }
   .page-content{
+    position: relative;
     &.side{
-      margin: 24px 24px 0px;
+      padding: 24px 24px 0;
     }
     &.head{
-      margin: 24px auto 0;
+      padding: 24px 0 0;
       max-width: 1400px;
     }
   }

src/layouts/PageView.vue

@@ -3,20 +3,23 @@
     <div slot="extra" class="extraImg">
       <img :src="extraImage"/>
     </div>
-    <transition name="page-toggle">
+    <page-toggle-transition :animate="animate.name" :direction="animate.direction">
       <keep-alive v-if="multiPage">
         <router-view ref="page" />
       </keep-alive>
       <router-view ref="page" v-else />
-    </transition>
+    </page-toggle-transition>
   </page-layout>
 </template>
 
 <script>
 import PageLayout from './PageLayout'
+import PageToggleTransition from '../components/transition/PageToggleTransition';
+import {mapState} from 'vuex'
+
 export default {
   name: 'PageView',
-  components: {PageLayout},
+  components: {PageToggleTransition, PageLayout},
   data () {
     return {
       title: '',
@@ -26,9 +29,7 @@ export default {
     }
   },
   computed: {
-    multiPage () {
-      return this.$store.state.setting.multiPage
-    }
+    ...mapState('setting', ['multiPage', 'animate'])
   },
   mounted () {
     this.getPageHeaderInfo()

src/layouts/RouteView.vue

@@ -1,19 +1,21 @@
 <template>
-  <transition name="page-toggle">
+  <page-toggle-transition :animate="animate.name" :direction="animate.direction">
     <keep-alive v-if="multiPage">
       <router-view />
     </keep-alive>
     <router-view v-else />
-  </transition>
+  </page-toggle-transition>
 </template>
 
 <script>
+import PageToggleTransition from '../components/transition/PageToggleTransition';
+import {mapState} from 'vuex'
+
 export default {
   name: 'RouteView',
+  components: {PageToggleTransition},
   computed: {
-    multiPage () {
-      return this.$store.state.setting.multiPage
-    }
+    ...mapState('setting', ['multiPage', 'animate'])
   }
 }
 </script>