add transition setting

Former-commit-id: 56f830d8693d9ac264c647aeb62e2cabf915f46e [formerly 56f830d8693d9ac264c647aeb62e2cabf915f46e [formerly 56f830d8693d9ac264c647aeb62e2cabf915f46e [formerly 56f830d8693d9ac264c647aeb62e2cabf915f46e [formerly 5c54818ab49b18a1c5f7dfdbcf9a3e585699623f [formerly 69d8a8881c6c5807882f566c1aad5aaf25c71844]]]]]
Former-commit-id: b9f4b800e18a1b0b274170fceec985567a82fe21
Former-commit-id: a62959e0e06f81cee7460baf1bb69b592d9a81d2
Former-commit-id: 11ba6f480f66db6e352acc5975eb0f127c9d553c [formerly eed4539c51e4c855d708f74dea30b175c534772b]
Former-commit-id: fc03c9f4d102371aaf3d1e53242b6e2e60e8a617
Former-commit-id: 69967ee1bbe532e61f96b46572cc2f4bfca6ca74
Former-commit-id: 7d78e41d4f5e39fb7b9690a1dd12766f04c79599
Former-commit-id: 2d0d79e4a4916c164f05d9eb761298a246928810
Former-commit-id: d741001cf4ee057219d432fbc26c62cc67bd6cad

src/layout/header-aside/layout.vue

@@ -43,7 +43,7 @@
             <d2-tabs/>
           </div>
           <div class="d2-theme-container-main-body" flex-box="1">
-            <transition name="fade-transverse">
+            <transition :name="transitionActive ? 'fade-transverse' : ''">
               <keep-alive :include="keepAlive">
                 <router-view/>
               </keep-alive>
@@ -80,6 +80,7 @@ export default {
   computed: {
     ...mapState('d2admin', {
       grayActive: state => state.gray.active,
+      transitionActive: state => state.transition.active,
       asideCollapse: state => state.menu.asideCollapse
     }),
     ...mapGetters('d2admin', {

src/menu/modules/demo-playground.js

@@ -32,7 +32,8 @@ export default {
         { path: `${pre}store/ua`, title: '浏览器信息', icon: 'info-circle' },
         { path: `${pre}store/gray`, title: '灰度模式', icon: 'eye' },
         { path: `${pre}store/fullscreen`, title: '全屏', icon: 'arrows-alt' },
-        { path: `${pre}store/theme`, title: '主题', icon: 'diamond' }
+        { path: `${pre}store/theme`, title: '主题', icon: 'diamond' },
+        { path: `${pre}store/transition`, title: '页面过渡开关', icon: 'toggle-on' }
       ]
     },
     {

src/pages/demo/playground/store/transition/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <d2-container type="card">
+    <el-button type="primary" @click="set(!active)">
+      {{active ? '关闭页面切换动画' : '打开页面切换动画'}}
+    </el-button>
+  </d2-container>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+  computed: {
+    ...mapState('d2admin/transition', [
+      'active'
+    ])
+  },
+  methods: {
+    ...mapMutations('d2admin/transition', [
+      'set'
+    ])
+  }
+}
+</script>

src/router/routes.js.REMOVED.git-id

@@ -1 +1 @@
-2414e68d302f8c63a5f472513a885d93860227aa
+3f797ef981679608bad178b6a1a748bfa08e6ade

src/store/modules/d2admin/index.js

@@ -9,6 +9,7 @@ import fullscreen from './modules/fullscreen'
 import ua from './modules/ua'
 import gray from './modules/gray'
 import page from './modules/page'
+import transition from './modules/transition'
 
 export default {
   namespaced: true,
@@ -23,6 +24,7 @@ export default {
     fullscreen,
     ua,
     gray,
-    page
+    page,
+    transition
   }
 }

src/store/modules/d2admin/modules/account.js

@@ -96,6 +96,8 @@ export default {
       this.commit('d2admin/user/load')
       // DB -> store 加载主题
       this.commit('d2admin/theme/load')
+      // DB -> store 加载页面过渡效果设置
+      this.commit('d2admin/transition/load')
       // DB -> store 数据库加载上次退出时的多页列表
       this.commit('d2admin/page/openedLoad')
       // DB -> store 数据库加载这个用户之前设置的侧边栏折叠状态

src/store/modules/d2admin/modules/db.js

@@ -20,7 +20,7 @@ function pathInit ({
   const uuid = util.cookies.get('uuid') || 'ghost-uuid'
   const currentPath = `${dbName}.${user ? `user.${uuid}` : 'public'}${path ? `.${path}` : ''}`
   const value = db.get(currentPath).value()
-  if (!(value && validator(value))) {
+  if (!(value !== undefined && validator(value))) {
     db
       .set(currentPath, defaultValue)
       .write()

src/store/modules/d2admin/modules/transition.js

@@ -0,0 +1,36 @@
+export default {
+  namespaced: true,
+  state: {
+    // 是否开启页面过度动画
+    active: true
+  },
+  mutations: {
+    /**
+     * @description 设置开启状态
+     * @param {Object} state vuex state
+     * @param {Boolean} active 新的状态
+     */
+    set (state, active) {
+      // store 赋值
+      state.active = active
+      // 持久化
+      this.commit('d2admin/db/setByUser', {
+        dbName: 'sys',
+        path: 'transition.active',
+        value: state.active
+      })
+    },
+    /**
+     * 从数据库读取页面过渡动画设置
+     * @param {Object} state vuex state
+     */
+    async load (state) {
+      // store 赋值
+      state.active = await this.dispatch('d2admin/db/getByUser', {
+        dbName: 'sys',
+        path: 'transition.active',
+        defaultValue: true
+      })
+    }
+  }
+}