新版文件

Former-commit-id: f8cb004bc9c5fe881993aec4bc46f696bbc5a2c8

src/store/index.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import d2admin from './modules/d2admin'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: {
+    d2admin
+  }
+})

src/store/modules/d2admin/index.js

@@ -0,0 +1,30 @@
+import db from './modules/db'
+import releases from './modules/releases'
+import user from './modules/user'
+import menu from './modules/menu'
+import theme from './modules/theme'
+import log from './modules/log'
+import account from './modules/account'
+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,
+  modules: {
+    db,
+    releases,
+    user,
+    menu,
+    theme,
+    log,
+    account,
+    fullscreen,
+    ua,
+    gray,
+    page,
+    transition
+  }
+}

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

@@ -0,0 +1,106 @@
+import util from '@/libs/util.js'
+
+export default {
+  namespaced: true,
+  actions: {
+    /**
+     * @description 登陆
+     * @param {Object} param context
+     * @param {Object} param vm {Object} vue 实例
+     * @param {Object} param username {String} 用户账号
+     * @param {Object} param password {String} 密码
+     */
+    login ({ commit }, { vm, username, password }) {
+      // 开始请求登录接口
+      vm.$axios({
+        method: 'post',
+        url: '/login',
+        data: {
+          username,
+          password
+        }
+      })
+        .then(res => {
+          // 设置 cookie 一定要存 uuid 和 token 两个 cookie
+          // 整个系统依赖这两个数据进行校验和存储
+          // uuid 是用户身份唯一标识 用户注册的时候确定 并且不可改变 不可重复
+          // token 代表用户当前登录状态 建议在网络请求中携带 token
+          // 如有必要 token 需要定时更新，默认保存一天
+          util.cookies.set('uuid', res.data.uuid)
+          util.cookies.set('token', res.data.token)
+          // 设置 vuex 用户信息
+          commit('d2admin/user/set', {
+            name: res.data.name
+          }, { root: true })
+          // 用户登陆后从持久化数据加载一系列的设置
+          commit('load')
+          // 跳转路由
+          vm.$router.push({
+            name: 'index'
+          })
+        })
+        .catch(err => {
+          console.group('登陆结果')
+          console.log('err: ', err)
+          console.groupEnd()
+        })
+    },
+    /**
+     * @description 注销用户并返回登陆页面
+     * @param {Object} param context
+     * @param {Object} param vm {Object} vue 实例
+     * @param {Object} param confirm {Boolean} 是否需要确认
+     */
+    logout ({ commit }, { vm, confirm = false }) {
+      /**
+       * @description 注销
+       */
+      function logout () {
+        // 删除cookie
+        util.cookies.remove('token')
+        util.cookies.remove('uuid')
+        // 跳转路由
+        vm.$router.push({
+          name: 'login'
+        })
+      }
+      // 判断是否需要确认
+      if (confirm) {
+        commit('d2admin/gray/set', true, { root: true })
+        vm.$confirm('注销当前账户吗?  打开的标签页和用户设置将会被保存。', '确认操作', {
+          confirmButtonText: '确定注销',
+          cancelButtonText: '放弃',
+          type: 'warning'
+        })
+          .then(() => {
+            commit('d2admin/gray/set', false, { root: true })
+            logout()
+          })
+          .catch(() => {
+            commit('d2admin/gray/set', false, { root: true })
+            vm.$message('放弃注销用户')
+          })
+      } else {
+        logout()
+      }
+    }
+  },
+  mutations: {
+    /**
+     * @description 用户登陆后从持久化数据加载一系列的设置
+     * @param {Object} state vuex state
+     */
+    load (state) {
+      // DB -> store 加载用户名
+      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 持久化数据加载这个用户之前设置的侧边栏折叠状态
+      this.commit('d2admin/menu/asideCollapseLoad')
+    }
+  }
+}

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

@@ -0,0 +1,221 @@
+import db from '@/libs/db.js'
+import util from '@/libs/util.js'
+
+/**
+ * @description 检查路径是否存在 不存在的话初始化
+ * @param {Object} param dbName {String} 数据库名称
+ * @param {Object} param path {String} 路径
+ * @param {Object} param user {Boolean} 区分用户
+ * @param {Object} param validator {Function} 数据校验钩子 返回 true 表示验证通过
+ * @param {Object} param defaultValue {*} 初始化默认值
+ * @returns {String} 可以直接使用的路径
+ */
+function pathInit ({
+  dbName = 'database',
+  path = '',
+  user = true,
+  validator = () => true,
+  defaultValue = ''
+}) {
+  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 !== undefined && validator(value))) {
+    db
+      .set(currentPath, defaultValue)
+      .write()
+  }
+  return currentPath
+}
+
+export default {
+  namespaced: true,
+  actions: {
+    /**
+     * @description 将数据存储到指定位置 | 路径不存在会自动初始化
+     * @description 效果类似于取值 dbName.path = value
+     * @param {Object} param dbName {String} 数据库名称
+     * @param {Object} param path {String} 存储路径
+     * @param {Object} param value {*} 需要存储的值
+     * @param {Object} param user {Boolean} 是否区分用户
+     */
+    set (context, {
+      dbName = 'database',
+      path = '',
+      value = '',
+      user = false
+    }) {
+      db.set(pathInit({
+        dbName,
+        path,
+        user
+      }), value).write()
+    },
+    /**
+     * @description 获取数据
+     * @description 效果类似于取值 dbName.path || defaultValue
+     * @param {Object} param dbName {String} 数据库名称
+     * @param {Object} param path {String} 存储路径
+     * @param {Object} param defaultValue {*} 取值失败的默认值
+     * @param {Object} param user {Boolean} 是否区分用户
+     */
+    get (context, {
+      dbName = 'database',
+      path = '',
+      defaultValue = '',
+      user = false
+    }) {
+      return new Promise(resolve => {
+        resolve(db.get(pathInit({
+          dbName,
+          path,
+          user,
+          defaultValue
+        })).value())
+      })
+    },
+    /**
+     * @description 获取存储数据库对象
+     * @param {Object} context context
+     * @param {Object} param user {Boolean} 是否区分用户
+     */
+    database (context, {
+      user = false
+    } = {}) {
+      return new Promise(resolve => {
+        resolve(db.get(pathInit({
+          dbName: 'database',
+          path: '',
+          user,
+          defaultValue: {}
+        })))
+      })
+    },
+    /**
+     * @description 清空存储数据库对象
+     * @param {Object} context context
+     * @param {Object} param user {Boolean} 是否区分用户
+     */
+    databaseClear (context, {
+      user = false
+    } = {}) {
+      return new Promise(resolve => {
+        resolve(db.get(pathInit({
+          dbName: 'database',
+          path: '',
+          user,
+          validator: () => false,
+          defaultValue: {}
+        })))
+      })
+    },
+    /**
+     * @description 获取存储数据库对象 [ 区分页面 ]
+     * @param {Object} context context
+     * @param {Object} param vm {Object} vue
+     * @param {Object} param basis {String} 页面区分依据 [ name | path | fullPath ]
+     * @param {Object} param user {Boolean} 是否区分用户
+     */
+    databasePage (context, {
+      vm,
+      basis = 'name',
+      user = false
+    } = {}) {
+      return new Promise(resolve => {
+        resolve(db.get(pathInit({
+          dbName: 'database',
+          path: `$page.${vm.$route[basis]}`,
+          user,
+          defaultValue: {}
+        })))
+      })
+    },
+    /**
+     * @description 清空存储数据库对象 [ 区分页面 ]
+     * @param {Object} context context
+     * @param {Object} param vm {Object} vue
+     * @param {Object} param basis {String} 页面区分依据 [ name | path | fullPath ]
+     * @param {Object} param user {Boolean} 是否区分用户
+     */
+    databasePageClear (context, {
+      vm,
+      basis = 'name',
+      user = false
+    } = {}) {
+      return new Promise(resolve => {
+        resolve(db.get(pathInit({
+          dbName: 'database',
+          path: `$page.${vm.$route[basis]}`,
+          user,
+          validator: () => false,
+          defaultValue: {}
+        })))
+      })
+    },
+    /**
+     * @description 快速将页面当前的数据 ( $data ) 持久化
+     * @param {Object} context context
+     * @param {Object} param vm {Object} vue
+     * @param {Object} param basis {String} 页面区分依据 [ name | path | fullPath ]
+     * @param {Object} param user {Boolean} 是否区分用户
+     */
+    pageSet (context, {
+      vm,
+      basis = 'name',
+      user = false
+    }) {
+      return new Promise(resolve => {
+        resolve(db.get(pathInit({
+          dbName: 'database',
+          path: `$page.${vm.$route[basis]}.$data`,
+          user,
+          validator: () => false,
+          defaultValue: vm.$data
+        })))
+      })
+    },
+    /**
+     * @description 快速获取页面快速持久化的数据
+     * @param {Object} context context
+     * @param {Object} param vm {Object} vue
+     * @param {Object} param basis {String} 页面区分依据 [ name | path | fullPath ]
+     * @param {Object} param user {Boolean} 是否区分用户
+     */
+    pageGet (context, {
+      vm,
+      basis = 'name',
+      user = false
+    }) {
+      return new Promise(resolve => {
+        resolve(db.get(pathInit({
+          dbName: 'database',
+          path: `$page.${vm.$route[basis]}.$data`,
+          user,
+          defaultValue: vm.$data
+        })).value())
+      })
+    },
+    /**
+     * @description 清空页面快照
+     * @param {Object} context context
+     * @param {Object} param vm {Object} vue
+     * @param {Object} param basis {String} 页面区分依据 [ name | path | fullPath ]
+     * @param {Object} param user {Boolean} 是否区分用户
+     */
+    pageClear (context, {
+      vm,
+      basis = 'name',
+      user = false
+    }) {
+      return new Promise(resolve => {
+        resolve(db.get(pathInit({
+          dbName: 'database',
+          path: `$page.${vm.$route[basis]}.$data`,
+          user,
+          validator: () => false,
+          defaultValue: {}
+        })))
+      })
+    }
+  }
+}

src/store/modules/d2admin/modules/fullscreen.js

@@ -0,0 +1,43 @@
+import screenfull from 'screenfull'
+
+export default {
+  namespaced: true,
+  state: {
+    // 全屏激活
+    active: false
+  },
+  mutations: {
+    /**
+     * @description 初始化监听
+     */
+    listen () {
+      if (screenfull.enabled) {
+        screenfull.on('change', () => {
+          if (!screenfull.isFullscreen) {
+            this.commit('d2admin/fullscreen/set', false)
+          }
+        })
+      }
+    },
+    /**
+     * @description 切换全屏
+     */
+    toggle () {
+      if (screenfull.isFullscreen) {
+        screenfull.exit()
+        this.commit('d2admin/fullscreen/set', false)
+      } else {
+        screenfull.request()
+        this.commit('d2admin/fullscreen/set', true)
+      }
+    },
+    /**
+     * @description 设置 store 里的全屏状态
+     * @param {Object} state vuex state
+     * @param {Boolean} active active
+     */
+    set (state, active) {
+      state.active = active
+    }
+  }
+}

src/store/modules/d2admin/modules/gray.js

@@ -0,0 +1,24 @@
+export default {
+  namespaced: true,
+  state: {
+    // 灰度
+    active: false
+  },
+  mutations: {
+    /**
+     * @description 切换灰度状态
+     * @param {Object} state vuex state
+     */
+    toggle (state) {
+      state.active = !state.active
+    },
+    /**
+     * @description 设置灰度模式
+     * @param {Object} state vuex state
+     * @param {Boolean} active active
+     */
+    set (state, active) {
+      state.active = active
+    }
+  }
+}

src/store/modules/d2admin/modules/log.js

@@ -0,0 +1,74 @@
+import dayjs from 'dayjs'
+import { get, toString } from 'lodash'
+import util from '@/libs/util.js'
+
+export default {
+  namespaced: true,
+  state: {
+    // 错误日志
+    list: []
+  },
+  getters: {
+    /**
+     * @description 返回现存 log (all) 的条数
+     * @param {*} state vuex state
+     */
+    length (state) {
+      return state.list.length
+    },
+    /**
+     * @description 返回现存 log (error) 的条数
+     * @param {*} state vuex state
+     */
+    lengthError (state) {
+      return state.list.filter(l => l.type === 'error').length
+    }
+  },
+  mutations: {
+    /**
+     * @description 清空日志
+     * @param {Object} state vuex state
+     */
+    clean (state) {
+      // store 赋值
+      state.list = []
+    }
+  },
+  actions: {
+    /**
+     * @description 添加一个日志
+     * @param {Object} param type {String} 类型
+     * @param {Object} param err {Error} 错误对象
+     * @param {Object} param vm {Object} vue 实例
+     * @param {Object} param info {String} 信息
+     */
+    add ({ state, rootState }, { type, err, vm, info }) {
+      // store 赋值
+      state.list.push(Object.assign({
+        // 记录类型
+        type: 'log', // or error
+        // 信息
+        info: '',
+        // 错误对象
+        err: '',
+        // vue 实例
+        vm: '',
+        // 当前用户信息
+        user: rootState.d2admin.user.info,
+        // 当前用户的 uuid
+        uuid: util.cookies.get('uuid'),
+        // 当前的 token
+        token: util.cookies.get('token'),
+        // 当前地址
+        url: get(window, 'location.href', ''),
+        // 当前时间
+        time: dayjs().format('YYYY-M-D HH:mm:ss')
+      }, {
+        type,
+        err,
+        vm,
+        info: toString(info)
+      }))
+    }
+  }
+}

src/store/modules/d2admin/modules/menu.js

@@ -0,0 +1,78 @@
+// 设置文件
+import setting from '@/setting.js'
+
+export default {
+  namespaced: true,
+  state: {
+    // 顶栏菜单
+    header: [],
+    // 侧栏菜单
+    aside: [],
+    // 侧边栏收缩
+    asideCollapse: setting.menu.asideCollapse
+  },
+  mutations: {
+    /**
+     * @description 设置顶栏菜单
+     * @param {Object} state vuex state
+     * @param {Array} menu menu setting
+     */
+    headerSet (state, menu) {
+      // store 赋值
+      state.header = menu
+    },
+    /**
+     * @description 设置侧边栏菜单
+     * @param {Object} state vuex state
+     * @param {Array} menu menu setting
+     */
+    asideSet (state, menu) {
+      // store 赋值
+      state.aside = menu
+    },
+    /**
+     * 设置侧边栏展开或者收缩
+     * @param {Object} state vuex state
+     * @param {Boolean} collapse is collapse
+     */
+    asideCollapseSet (state, collapse) {
+      // store 赋值
+      state.asideCollapse = collapse
+      // 持久化
+      this.dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'menu.asideCollapse',
+        value: state.asideCollapse,
+        user: true
+      })
+    },
+    /**
+     * 切换侧边栏展开和收缩
+     * @param {Object} state vuex state
+     */
+    asideCollapseToggle (state) {
+      // store 赋值
+      state.asideCollapse = !state.asideCollapse
+      // 持久化
+      this.dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'menu.asideCollapse',
+        value: state.asideCollapse,
+        user: true
+      })
+    },
+    /**
+     * 从持久化数据读取侧边栏展开或者收缩
+     * @param {Object} state vuex state
+     */
+    async asideCollapseLoad (state) {
+      // store 赋值
+      state.asideCollapse = await this.dispatch('d2admin/db/get', {
+        dbName: 'sys',
+        path: 'menu.asideCollapse',
+        defaultValue: setting.menu.asideCollapse,
+        user: true
+      })
+    }
+  }
+}

src/store/modules/d2admin/modules/page.js

@@ -0,0 +1,314 @@
+// 设置文件
+import setting from '@/setting.js'
+
+export default {
+  namespaced: true,
+  state: {
+    // 可以在多页 tab 模式下显示的页面
+    pool: [],
+    // 当前显示的多页面列表
+    opened: setting.page.opened,
+    // 当前页面
+    current: ''
+  },
+  getters: {
+    /**
+     * @description 从当前所有打开的多标签页里返回需要缓存的页面 name
+     * @param {*} state vuex state
+     */
+    keepAlive (state) {
+      return state.opened.filter(item => {
+        if (item.meta) {
+          if (item.meta.notCache) {
+            return false
+          }
+        }
+        return true
+      }).map(e => e.name)
+    }
+  },
+  mutations: {
+    /**
+     * @class current
+     * @description 打开一个新的页面
+     * @param {Object} state vuex state
+     * @param {Object} param { name, params, query } 路由信息
+     */
+    open (state, { name, params, query }) {
+      // 已经打开的页面
+      let opened = state.opened
+      // 判断此页面是否已经打开 并且记录位置
+      let pageOpendIndex = 0
+      const pageOpend = opened.find((page, index) => {
+        const same = page.name === name
+        pageOpendIndex = same ? index : pageOpendIndex
+        return same
+      })
+      if (pageOpend) {
+        // 页面以前打开过 但是新的页面可能 name 一样，参数不一样
+        this.commit('d2admin/page/openedUpdate', {
+          index: pageOpendIndex,
+          params,
+          query
+        })
+      } else {
+        // 页面以前没有打开过
+        let page = state.pool.find(t => t.name === name)
+        if (page) {
+          this.commit('d2admin/page/add', {
+            tag: page,
+            params,
+            query
+          })
+        }
+      }
+      this.commit('d2admin/page/currentSet', name)
+    },
+    /**
+     * @class current
+     * @description 设置当前激活的页面 name
+     * @param {Object} state vuex state
+     * @param {String} name new name
+     */
+    currentSet (state, name) {
+      state.current = name
+    },
+    /**
+     * @class opened
+     * @description 更新页面列表上的某一项
+     * @param {Object} state vuex state
+     * @param {Object} param { index, params, query } 路由信息
+     */
+    openedUpdate (state, { index, params, query }) {
+      // 更新页面列表某一项
+      let page = state.opened[index]
+      page.params = params || page.params
+      page.query = query || page.query
+      state.opened.splice(index, 1, page)
+      // 持久化
+      this.commit('d2admin/page/opend2db')
+    },
+    /**
+     * 将 opened 属性赋值并持久化 在这之前请先确保已经更新了 state.opened
+     * @param {Object} state vuex state
+     */
+    opend2db (state) {
+      this.dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'page.opened',
+        value: state.opened,
+        user: true
+      })
+    },
+    /**
+     * @class opened
+     * @description 从持久化数据载入分页列表
+     * @param {Object} state vuex state
+     */
+    async openedLoad (state) {
+      // store 赋值
+      const value = await this.dispatch('d2admin/db/get', {
+        dbName: 'sys',
+        path: 'page.opened',
+        defaultValue: setting.page.opened,
+        user: true
+      })
+      // 在处理函数中进行数据优化 过滤掉现在已经失效的页签或者已经改变了信息的页签
+      // 以 name 字段为准
+      // 如果页面过多的话可能需要优化算法
+      // valid 有效列表 1, 1, 0, 1 => 有效, 有效, 失效, 有效
+      const valid = []
+      // 处理数据
+      state.opened = value.map(opened => {
+        // 忽略首页
+        if (opened.name === 'index') {
+          valid.push(1)
+          return opened
+        }
+        // 尝试在所有的支持多标签页的页面里找到 name 匹配的页面
+        const find = state.pool.find(item => item.name === opened.name)
+        // 记录有效或无效信息
+        valid.push(find ? 1 : 0)
+        // 返回合并后的数据 新的覆盖旧的
+        // 新的数据中一般不会携带 params 和 query, 所以旧的参数会留存
+        return Object.assign({}, opened, find)
+      }).filter((opened, index) => valid[index] === 1)
+    },
+    /**
+     * @class opened
+     * @description 新增一个 tag (打开一个页面)
+     * @param {Object} state vuex state
+     * @param {Object} param new tag info
+     */
+    add (state, { tag, params, query }) {
+      // 设置新的 tag 在新打开一个以前没打开过的页面时使用
+      let newTag = tag
+      newTag.params = params || newTag.params
+      newTag.query = query || newTag.query
+      // 添加进当前显示的页面数组
+      state.opened.push(newTag)
+      // 持久化
+      this.commit('d2admin/page/opend2db')
+    },
+    /**
+     * @class opened
+     * @description 关闭一个 tag (关闭一个页面)
+     * @param {Object} state vuex state
+     * @param {Object} param { tagName: 要关闭的标签名字, vm: vue }
+     */
+    close (state, { tagName, vm }) {
+      // 下个新的页面
+      let newPage = state.opened[0]
+      const isCurrent = state.current === tagName
+      // 如果关闭的页面就是当前显示的页面
+      if (isCurrent) {
+        // 去找一个新的页面
+        let len = state.opened.length
+        for (let i = 1; i < len; i++) {
+          if (state.opened[i].name === tagName) {
+            if (i < len - 1) {
+              newPage = state.opened[i + 1]
+            } else {
+              newPage = state.opened[i - 1]
+            }
+            break
+          }
+        }
+      }
+      // 找到这个页面在已经打开的数据里是第几个
+      const index = state.opened.findIndex(page => page.name === tagName)
+      if (index >= 0) {
+        state.opened.splice(index, 1)
+      }
+      // 持久化
+      this.commit('d2admin/page/opend2db')
+      // 最后需要判断是否需要跳到首页
+      if (isCurrent) {
+        const { name = '', params = {}, query = {} } = newPage
+        let routerObj = {
+          name,
+          params,
+          query
+        }
+        vm.$router.push(routerObj)
+      }
+    },
+    /**
+     * @class opened
+     * @description 关闭当前标签左边的标签
+     * @param {Object} state vuex state
+     * @param {Object} param { pageSelect: 当前选中的tagName, vm: vue }
+     */
+    closeLeft (state, { pageSelect, vm } = {}) {
+      const pageAim = pageSelect || state.current
+      let currentIndex = 0
+      state.opened.forEach((page, index) => {
+        if (page.name === pageAim) {
+          currentIndex = index
+        }
+      })
+      if (currentIndex > 0) {
+        state.opened.splice(1, currentIndex - 1)
+      }
+      state.current = pageAim
+      if (vm && vm.$route.name !== pageAim) {
+        vm.$router.push({
+          name: pageAim
+        })
+      }
+      // 持久化
+      this.commit('d2admin/page/opend2db')
+    },
+    /**
+     * @class opened
+     * @description 关闭当前标签右边的标签
+     * @param {Object} state vuex state
+     * @param {Object} param { pageSelect: 当前选中的tagName, vm: vue }
+     */
+    closeRight (state, { pageSelect, vm } = {}) {
+      const pageAim = pageSelect || state.current
+      let currentIndex = 0
+      state.opened.forEach((page, index) => {
+        if (page.name === pageAim) {
+          currentIndex = index
+        }
+      })
+      state.opened.splice(currentIndex + 1)
+      state.current = pageAim
+      if (vm && vm.$route.name !== pageAim) {
+        vm.$router.push({
+          name: pageAim
+        })
+      }
+      // 持久化
+      this.commit('d2admin/page/opend2db')
+    },
+    /**
+     * @class opened
+     * @description 关闭当前激活之外的 tag
+     * @param {Object} state vuex state
+     * @param {Object} param { pageSelect: 当前选中的tagName, vm: vue }
+     */
+    closeOther (state, { pageSelect, vm } = {}) {
+      const pageAim = pageSelect || state.current
+      let currentIndex = 0
+      state.opened.forEach((page, index) => {
+        if (page.name === pageAim) {
+          currentIndex = index
+        }
+      })
+      if (currentIndex === 0) {
+        state.opened.splice(1)
+      } else {
+        state.opened.splice(currentIndex + 1)
+        state.opened.splice(1, currentIndex - 1)
+      }
+      state.current = pageAim
+      if (vm && vm.$route.name !== pageAim) {
+        vm.$router.push({
+          name: pageAim
+        })
+      }
+      // 持久化
+      this.commit('d2admin/page/opend2db')
+    },
+    /**
+     * @class opened
+     * @description 关闭所有 tag
+     * @param {Object} state vuex state
+     * @param {Object} vm vue
+     */
+    closeAll (state, vm) {
+      state.opened.splice(1)
+      // 持久化
+      this.commit('d2admin/page/opend2db')
+      // 关闭所有的标签页后需要判断一次现在是不是在首页
+      if (vm.$route.name !== 'index') {
+        vm.$router.push({
+          name: 'index'
+        })
+      }
+    },
+    /**
+     * @class pool
+     * @description 保存 pool (候选池)
+     * @param {Object} state vuex state
+     * @param {Array} routes routes
+     */
+    init (state, routes) {
+      const pool = []
+      const push = function (routes) {
+        routes.forEach(route => {
+          if (route.children) {
+            push(route.children)
+          } else {
+            const { meta, name, path } = route
+            pool.push({ meta, name, path })
+          }
+        })
+      }
+      push(routes)
+      state.pool = pool
+    }
+  }
+}

src/store/modules/d2admin/modules/releases.js

@@ -0,0 +1,67 @@
+import axios from 'axios'
+import semver from 'semver'
+import util from '@/libs/util.js'
+import setting from '@/setting.js'
+
+export default {
+  namespaced: true,
+  state: {
+    // D2Admin 版本
+    version: setting.releases.version,
+    // 最新版本的信息
+    latest: {},
+    // 有新版本
+    update: false
+  },
+  actions: {
+    /**
+     * @description 检查版本更新
+     * @param {Object} param context
+     */
+    checkUpdate ({ state, commit }) {
+      axios.get(setting.releases.api)
+        .then(res => {
+          let versionGet = res.tag_name
+          const update = semver.lt(state.version, versionGet)
+          if (update) {
+            util.log.capsule('D2Admin', `New version ${res.name}`)
+            console.log(`版本号: ${res.tag_name} | 详情 ${res.html_url}`)
+            commit('updateSet', true)
+          }
+          commit('latestSet', res)
+        })
+        .catch(err => {
+          console.log('checkUpdate error', err)
+        })
+    }
+  },
+  mutations: {
+    /**
+     * @description 显示版本信息
+     * @param {Object} state vuex state
+     */
+    versionShow (state) {
+      util.log.capsule('D2Admin', `v${state.version}`)
+      console.log('Github https://github.com/d2-projects/d2-admin')
+      console.log('Doc    http://d2admin.fairyever.com/zh/')
+    },
+    /**
+     * @description 设置是否有新的 D2Admin 版本
+     * @param {Object} state vuex state
+     * @param {Boolean} update can update
+     */
+    updateSet (state, update) {
+      // store 赋值
+      state.update = update
+    },
+    /**
+     * @description 设置最新版本的信息
+     * @param {Object} state vuex state
+     * @param {Object}} latest releases value
+     */
+    latestSet (state, latest) {
+      // store 赋值
+      state.latest = latest
+    }
+  }
+}

src/store/modules/d2admin/modules/theme.js

@@ -0,0 +1,63 @@
+// 设置文件
+import setting from '@/setting.js'
+
+export default {
+  namespaced: true,
+  state: {
+    // 主题
+    list: setting.theme.list,
+    // 现在激活的主题 这应该是一个名字 不是对象
+    activeName: setting.theme.list[0].name
+  },
+  getters: {
+    /**
+     * @description 返回当前的主题信息 不是一个名字 而是当前激活主题的所有数据
+     * @param {Object} state vuex state
+     */
+    activeSetting (state) {
+      return state.list.find(theme => theme.name === state.activeName)
+    }
+  },
+  mutations: {
+    /**
+     * @description 激活一个主题
+     * @param {Object} state vuex state
+     * @param {String} themeValue 需要激活的主题名称
+     */
+    set (state, themeName) {
+      // 检查这个主题在主题列表里是否存在
+      state.activeName = state.list.find(e => e.name === themeName) ? themeName : state.list[0].name
+      // 将 vuex 中的主题应用到 dom
+      this.commit('d2admin/theme/dom')
+      // 持久化
+      this.dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'theme.activeName',
+        value: state.activeName,
+        user: true
+      })
+    },
+    /**
+     * @description 从持久化数据加载主题设置
+     * @param {Object} state vuex state
+     */
+    async load (state) {
+      // store 赋值
+      state.activeName = await this.dispatch('d2admin/db/get', {
+        dbName: 'sys',
+        path: 'theme.activeName',
+        defaultValue: state.list[0].name,
+        user: true
+      })
+      // 更新到页面
+      this.commit('d2admin/theme/dom')
+    },
+    /**
+     * @description 将 vuex 中的主题应用到 dom
+     * @param {Object} state vuex state
+     */
+    dom (state) {
+      document.body.className = `theme-${state.activeName}`
+    }
+  }
+}

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

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

src/store/modules/d2admin/modules/ua.js

@@ -0,0 +1,18 @@
+import UaParser from 'ua-parser-js'
+
+export default {
+  namespaced: true,
+  state: {
+    // 用户 UA
+    data: {}
+  },
+  mutations: {
+    /**
+     * @description 记录 UA
+     * @param {Object} state vuex state
+     */
+    get (state) {
+      state.data = new UaParser().getResult()
+    }
+  }
+}

src/store/modules/d2admin/modules/user.js

@@ -0,0 +1,41 @@
+// 设置文件
+import setting from '@/setting.js'
+
+export default {
+  namespaced: true,
+  state: {
+    // 用户信息
+    info: setting.user.info
+  },
+  mutations: {
+    /**
+     * @description 设置用户数据
+     * @param {Object} state vuex state
+     * @param {*} info info
+     */
+    set (state, info) {
+      // store 赋值
+      state.info = info
+      // 持久化
+      this.dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'user.info',
+        value: info,
+        user: true
+      })
+    },
+    /**
+     * @description 从数据库取用户数据
+     * @param {Object} state vuex state
+     */
+    async load (state) {
+      // store 赋值
+      state.info = await this.dispatch('d2admin/db/get', {
+        dbName: 'sys',
+        path: 'user.info',
+        defaultValue: setting.user.info,
+        user: true
+      })
+    }
+  }
+}