node configure增改接近完成，删除后端还没做

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,16 @@
+/**
+ * The file enables `@/store/index.js` to import all vuex modules
+ * in a one-shot manner. There should not be any reason to edit this file.
+ */
+
+const files = require.context('./modules', false, /\.js$/)
+const modules = {}
+
+files.keys().forEach(key => {
+  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+})
+
+export default {
+  namespaced: true,
+  modules
+}

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

@@ -0,0 +1,88 @@
+import { Message, MessageBox } from 'element-ui'
+import util from '@/libs/util.js'
+import router from '@/router'
+import api from '@/api'
+
+export default {
+  namespaced: true,
+  actions: {
+    /**
+     * @description 登录
+     * @param {Object} context
+     * @param {Object} payload username {String} 用户账号
+     * @param {Object} payload password {String} 密码
+     * @param {Object} payload route {Object} 登录成功后定向的路由对象 任何 vue-router 支持的格式
+     */
+    async login ({ dispatch }, {
+      username = '',
+      password = ''
+    } = {}) {
+      const res = await api.SYS_USER_LOGIN({ username, password })
+      // 设置 cookie 一定要存 uuid 和 token 两个 cookie
+      // 整个系统依赖这两个数据进行校验和存储
+      // uuid 是用户身份唯一标识 用户注册的时候确定 并且不可改变 不可重复
+      // token 代表用户当前登录状态 建议在网络请求中携带 token
+      // 如有必要 token 需要定时更新，默认保存一天
+      util.cookies.set('uuid', res.uuid)
+      util.cookies.set('token', res.token)
+      // 设置 vuex 用户信息
+      await dispatch('d2admin/user/set', { name: res.name }, { root: true })
+      // 用户登录后从持久化数据加载一系列的设置
+      await dispatch('load')
+    },
+    /**
+     * @description 注销用户并返回登录页面
+     * @param {Object} context
+     * @param {Object} payload confirm {Boolean} 是否需要确认
+     */
+    logout ({ commit, dispatch }, { confirm = false } = {}) {
+      /**
+       * @description 注销
+       */
+      async function logout () {
+        // 删除cookie
+        util.cookies.remove('token')
+        util.cookies.remove('uuid')
+        // 清空 vuex 用户信息
+        await dispatch('d2admin/user/set', {}, { root: true })
+        // 跳转路由
+        router.push({ name: 'login' })
+      }
+      // 判断是否需要确认
+      if (confirm) {
+        commit('d2admin/gray/set', true, { root: true })
+        MessageBox.confirm('确定要注销当前用户吗', '注销用户', { type: 'warning' })
+          .then(() => {
+            commit('d2admin/gray/set', false, { root: true })
+            logout()
+          })
+          .catch(() => {
+            commit('d2admin/gray/set', false, { root: true })
+            Message({ message: '取消注销操作' })
+          })
+      } else {
+        logout()
+      }
+    },
+    /**
+     * @description 用户登录后从持久化数据加载一系列的设置
+     * @param {Object} context
+     */
+    async load ({ dispatch }) {
+      // 加载用户名
+      await dispatch('d2admin/user/load', null, { root: true })
+      // 加载主题
+      await dispatch('d2admin/theme/load', null, { root: true })
+      // 加载页面过渡效果设置
+      await dispatch('d2admin/transition/load', null, { root: true })
+      // 持久化数据加载上次退出时的多页列表
+      await dispatch('d2admin/page/openedLoad', null, { root: true })
+      // 持久化数据加载侧边栏配置
+      await dispatch('d2admin/menu/asideLoad', null, { root: true })
+      // 持久化数据加载全局尺寸
+      await dispatch('d2admin/size/load', null, { root: true })
+      // 持久化数据加载颜色设置
+      await dispatch('d2admin/color/load', null, { root: true })
+    }
+  }
+}

src/store/modules/d2admin/modules/color.js

@@ -0,0 +1,71 @@
+import { cloneDeep } from 'lodash'
+import client from 'webpack-theme-color-replacer/client'
+import forElementUI from 'webpack-theme-color-replacer/forElementUI'
+
+export default {
+  namespaced: true,
+  state: {
+    // 颜色
+    value: process.env.VUE_APP_ELEMENT_COLOR
+  },
+  actions: {
+    /**
+     * @description 设置颜色
+     * @param {Object} context
+     * @param {String} color 尺寸
+     */
+    async set ({ state, dispatch, commit }, color) {
+      // 记录上个值
+      const old = state.value
+      // store 赋值
+      state.value = color || process.env.VUE_APP_ELEMENT_COLOR
+      // 持久化
+      await dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'color.value',
+        value: state.value,
+        user: true
+      }, { root: true })
+      // 应用
+      commit('apply', {
+        oldColor: old,
+        newColor: state.value
+      })
+    },
+    /**
+     * @description 从持久化数据读取颜色设置
+     * @param {Object} context
+     */
+    async load ({ state, dispatch, commit }) {
+      // 记录上个值
+      const old = state.value
+      // store 赋值
+      state.value = await dispatch('d2admin/db/get', {
+        dbName: 'sys',
+        path: 'color.value',
+        defaultValue: process.env.VUE_APP_ELEMENT_COLOR,
+        user: true
+      }, { root: true })
+      // 应用
+      commit('apply', {
+        oldColor: old,
+        newColor: state.value
+      })
+    }
+  },
+  mutations: {
+    /**
+     * @description 将 vuex 中的主题颜色设置应用到系统中
+     * @param {Object} context
+     * @param {Object} payload oldColor {String} 旧的颜色
+     * @param {Object} payload newColor {String} 新颜色
+     */
+    apply (state, { oldColor, newColor }) {
+      var options = {
+        oldColors: cloneDeep(forElementUI.getElementUISeries(oldColor)),
+        newColors: cloneDeep(forElementUI.getElementUISeries(newColor))
+      }
+      client.changer.changeColor(options)
+    }
+  }
+}

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

@@ -0,0 +1,157 @@
+import router from '@/router'
+import { cloneDeep } from 'lodash'
+import { database as getDatabase, dbGet, dbSet } from '@/libs/util.db'
+
+export default {
+  namespaced: true,
+  actions: {
+    /**
+     * @description 将数据存储到指定位置 | 路径不存在会自动初始化
+     * @description 效果类似于取值 dbName.path = value
+     * @param {Object} context
+     * @param {Object} payload dbName {String} 数据库名称
+     * @param {Object} payload path {String} 存储路径
+     * @param {Object} payload value {*} 需要存储的值
+     * @param {Object} payload user {Boolean} 是否区分用户
+     */
+    set (context, {
+      dbName = 'database',
+      path = '',
+      value = '',
+      user = false
+    }) {
+      dbSet({ dbName, path, value, user })
+    },
+    /**
+     * @description 获取数据
+     * @description 效果类似于取值 dbName.path || defaultValue
+     * @param {Object} context
+     * @param {Object} payload dbName {String} 数据库名称
+     * @param {Object} payload path {String} 存储路径
+     * @param {Object} payload defaultValue {*} 取值失败的默认值
+     * @param {Object} payload user {Boolean} 是否区分用户
+     */
+    get (context, {
+      dbName = 'database',
+      path = '',
+      defaultValue = '',
+      user = false
+    }) {
+      return dbGet({ dbName, path, defaultValue, user })
+    },
+    /**
+     * @description 获取存储数据库对象
+     * @param {Object} context
+     * @param {Object} payload user {Boolean} 是否区分用户
+     */
+    database (context, {
+      user = false
+    } = {}) {
+      return getDatabase({
+        user,
+        defaultValue: {}
+      })
+    },
+    /**
+     * @description 清空存储数据库对象
+     * @param {Object} context
+     * @param {Object} payload user {Boolean} 是否区分用户
+     */
+    databaseClear (context, {
+      user = false
+    } = {}) {
+      return getDatabase({
+        user,
+        validator: () => false,
+        defaultValue: {}
+      })
+    },
+    /**
+     * @description 获取存储数据库对象 [ 区分页面 ]
+     * @param {Object} context
+     * @param {Object} payload basis {String} 页面区分依据 [ name | path | fullPath ]
+     * @param {Object} payload user {Boolean} 是否区分用户
+     */
+    databasePage (context, {
+      basis = 'fullPath',
+      user = false
+    } = {}) {
+      return getDatabase({
+        path: `$page.${router.app.$route[basis]}`,
+        user,
+        defaultValue: {}
+      })
+    },
+    /**
+     * @description 清空存储数据库对象 [ 区分页面 ]
+     * @param {Object} context
+     * @param {Object} payload basis {String} 页面区分依据 [ name | path | fullPath ]
+     * @param {Object} payload user {Boolean} 是否区分用户
+     */
+    databasePageClear (context, {
+      basis = 'fullPath',
+      user = false
+    } = {}) {
+      return getDatabase({
+        path: `$page.${router.app.$route[basis]}`,
+        user,
+        validator: () => false,
+        defaultValue: {}
+      })
+    },
+    /**
+     * @description 快速将页面当前的数据 ( $data ) 持久化
+     * @param {Object} context
+     * @param {Object} payload instance {Object} vue 实例
+     * @param {Object} payload basis {String} 页面区分依据 [ name | path | fullPath ]
+     * @param {Object} payload user {Boolean} 是否区分用户
+     */
+    pageSet (context, {
+      instance,
+      basis = 'fullPath',
+      user = false
+    }) {
+      return getDatabase({
+        path: `$page.${router.app.$route[basis]}.$data`,
+        user,
+        validator: () => false,
+        defaultValue: cloneDeep(instance.$data)
+      })
+    },
+    /**
+     * @description 快速获取页面快速持久化的数据
+     * @param {Object} context
+     * @param {Object} payload instance {Object} vue 实例
+     * @param {Object} payload basis {String} 页面区分依据 [ name | path | fullPath ]
+     * @param {Object} payload user {Boolean} 是否区分用户
+     */
+    pageGet (context, {
+      instance,
+      basis = 'fullPath',
+      user = false
+    }) {
+      return dbGet({
+        path: `$page.${router.app.$route[basis]}.$data`,
+        user,
+        defaultValue: cloneDeep(instance.$data)
+      })
+    },
+    /**
+     * @description 清空页面快照
+     * @param {Object} context
+     * @param {Object} payload basis {String} 页面区分依据 [ name | path | fullPath ]
+     * @param {Object} payload user {Boolean} 是否区分用户
+     */
+    pageClear (context, {
+      basis = 'fullPath',
+      user = false
+    }) {
+      return getDatabase({
+        path: `$page.${router.app.$route[basis]}.$data`,
+        user,
+        validator: () => false,
+        defaultValue: {}
+      })
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+import screenfull from 'screenfull'
+
+export default {
+  namespaced: true,
+  state: {
+    // 全屏激活
+    active: false
+  },
+  actions: {
+    /**
+     * @description 初始化监听
+     * @param {Object} context
+     */
+    listen ({ commit }) {
+      if (screenfull.isEnabled) {
+        screenfull.on('change', () => {
+          if (!screenfull.isFullscreen) commit('set', false)
+        })
+      }
+    },
+    /**
+     * @description 切换全屏
+     * @param {Object} context
+     */
+    toggle ({ commit }) {
+      if (screenfull.isFullscreen) {
+        screenfull.exit()
+        commit('set', false)
+      } else {
+        screenfull.request()
+        commit('set', true)
+      }
+    }
+  },
+  mutations: {
+    /**
+     * @description 设置 store 里的全屏状态
+     * @param {Object} state 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 state
+     */
+    toggle (state) {
+      state.active = !state.active
+    },
+    /**
+     * @description 设置灰度模式
+     * @param {Object} state state
+     * @param {Boolean} active active
+     */
+    set (state, active) {
+      state.active = active
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+import dayjs from 'dayjs'
+import { get } from 'lodash'
+import util from '@/libs/util.js'
+
+export default {
+  namespaced: true,
+  state: {
+    // 错误日志
+    // + 日志条目的属性
+    //   - message 必须 日志信息
+    //   - type 非必须 类型 success | warning | info(默认) | danger
+    //   - time 必须 日志记录时间
+    //   - meta 非必须 其它携带信息
+    log: []
+  },
+  getters: {
+    /**
+     * @description 返回现存 log (all) 的条数
+     * @param {*} state vuex state
+     */
+    length (state) {
+      return state.log.length
+    },
+    /**
+     * @description 返回现存 log (error) 的条数
+     * @param {*} state vuex state
+     */
+    lengthError (state) {
+      return state.log.filter(log => log.type === 'danger').length
+    }
+  },
+  actions: {
+    /**
+     * @description 添加一个日志
+     * @param {Object} context
+     * @param {String} param message {String} 信息
+     * @param {String} param type {String} 类型
+     * @param {Object} payload meta {Object} 附带的信息
+     */
+    push ({ rootState, commit }, { message, type = 'info', meta }) {
+      commit('push', {
+        message,
+        type,
+        time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        meta: {
+          // 当前用户信息
+          user: rootState.d2admin.user.info,
+          // 当前用户的 uuid
+          uuid: util.cookies.get('uuid'),
+          // 当前的 token
+          token: util.cookies.get('token'),
+          // 当前地址
+          url: get(window, 'location.href', ''),
+          // 用户设置
+          ...meta
+        }
+      })
+    }
+  },
+  mutations: {
+    /**
+     * @description 添加日志
+     * @param {Object} state state
+     * @param {Object} log data
+     */
+    push (state, log) {
+      state.log.push(log)
+    },
+    /**
+     * @description 清空日志
+     * @param {Object} state state
+     */
+    clean (state) {
+      // store 赋值
+      state.log = []
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+// 设置文件
+import setting from '@/setting.js'
+
+export default {
+  namespaced: true,
+  state: {
+    // 顶栏菜单
+    header: [],
+    // 侧栏菜单
+    aside: [],
+    // 侧边栏收缩
+    asideCollapse: setting.menu.asideCollapse,
+    // 侧边栏折叠动画
+    asideTransition: setting.menu.asideTransition
+  },
+  actions: {
+    /**
+     * 设置侧边栏展开或者收缩
+     * @param {Object} context
+     * @param {Boolean} collapse is collapse
+     */
+    async asideCollapseSet ({ state, dispatch }, collapse) {
+      // store 赋值
+      state.asideCollapse = collapse
+      // 持久化
+      await dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'menu.asideCollapse',
+        value: state.asideCollapse,
+        user: true
+      }, { root: true })
+    },
+    /**
+     * 切换侧边栏展开和收缩
+     * @param {Object} context
+     */
+    async asideCollapseToggle ({ state, dispatch }) {
+      // store 赋值
+      state.asideCollapse = !state.asideCollapse
+      // 持久化
+      await dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'menu.asideCollapse',
+        value: state.asideCollapse,
+        user: true
+      }, { root: true })
+    },
+    /**
+     * 设置侧边栏折叠动画
+     * @param {Object} context
+     * @param {Boolean} transition is transition
+     */
+    async asideTransitionSet ({ state, dispatch }, transition) {
+      // store 赋值
+      state.asideTransition = transition
+      // 持久化
+      await dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'menu.asideTransition',
+        value: state.asideTransition,
+        user: true
+      }, { root: true })
+    },
+    /**
+     * 切换侧边栏折叠动画
+     * @param {Object} context
+     */
+    async asideTransitionToggle ({ state, dispatch }) {
+      // store 赋值
+      state.asideTransition = !state.asideTransition
+      // 持久化
+      await dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'menu.asideTransition',
+        value: state.asideTransition,
+        user: true
+      }, { root: true })
+    },
+    /**
+     * 持久化数据加载侧边栏设置
+     * @param {Object} context
+     */
+    async asideLoad ({ state, dispatch }) {
+      // store 赋值
+      const menu = await dispatch('d2admin/db/get', {
+        dbName: 'sys',
+        path: 'menu',
+        defaultValue: setting.menu,
+        user: true
+      }, { root: true })
+      state.asideCollapse = menu.asideCollapse !== undefined ? menu.asideCollapse : setting.menu.asideCollapse
+      state.asideTransition = menu.asideTransition !== undefined ? menu.asideTransition : setting.menu.asideTransition
+    }
+  },
+  mutations: {
+    /**
+     * @description 设置顶栏菜单
+     * @param {Object} state state
+     * @param {Array} menu menu setting
+     */
+    headerSet (state, menu) {
+      // store 赋值
+      state.header = menu
+    },
+    /**
+     * @description 设置侧边栏菜单
+     * @param {Object} state state
+     * @param {Array} menu menu setting
+     */
+    asideSet (state, menu) {
+      // store 赋值
+      state.aside = menu
+    }
+  }
+}

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

@@ -0,0 +1,395 @@
+import { cloneDeep, uniq, get } from 'lodash'
+import router from '@/router'
+import setting from '@/setting.js'
+
+// 判定是否需要缓存
+const isKeepAlive = data => get(data, 'meta.cache', false)
+
+export default {
+  namespaced: true,
+  state: {
+    // 可以在多页 tab 模式下显示的页面
+    pool: [],
+    // 当前显示的多页面列表
+    opened: get(setting, 'page.opened', []),
+    // 已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
+    openedLoaded: false,
+    // 当前页面
+    current: '',
+    // 需要缓存的页面 name
+    keepAlive: []
+  },
+  actions: {
+    /**
+     * @description 确认已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
+     * @param {Object} context
+     */
+    isLoaded ({ state }) {
+      if (state.openedLoaded) return Promise.resolve()
+      return new Promise(resolve => {
+        const timer = setInterval(() => {
+          if (state.openedLoaded) resolve(clearInterval(timer))
+        }, 10)
+      })
+    },
+    /**
+     * @class opened
+     * @description 从持久化数据载入标签页列表
+     * @param {Object} context
+     */
+    async openedLoad ({ state, commit, dispatch }) {
+      // store 赋值
+      const value = await dispatch('d2admin/db/get', {
+        dbName: 'sys',
+        path: 'page.opened',
+        defaultValue: setting.page.opened,
+        user: true
+      }, { root: true })
+      // 在处理函数中进行数据优化 过滤掉现在已经失效的页签或者已经改变了信息的页签
+      // 以 fullPath 字段为准
+      // 如果页面过多的话可能需要优化算法
+      // valid 有效列表 1, 1, 0, 1 => 有效, 有效, 失效, 有效
+      const valid = []
+      // 处理数据
+      state.opened = value
+        .map(opened => {
+          // 忽略首页
+          if (opened.fullPath === '/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)
+      // 标记已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
+      state.openedLoaded = true
+      // 根据 opened 数据生成缓存设置
+      commit('keepAliveRefresh')
+    },
+    /**
+     * 将 opened 属性赋值并持久化 在这之前请先确保已经更新了 state.opened
+     * @param {Object} context
+     */
+    async opened2db ({ state, dispatch }) {
+      // 设置数据
+      dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'page.opened',
+        value: state.opened,
+        user: true
+      }, { root: true })
+    },
+    /**
+     * @class opened
+     * @description 更新页面列表上的某一项
+     * @param {Object} context
+     * @param {Object} payload { index, params, query, fullPath } 路由信息
+     */
+    async openedUpdate ({ state, commit, dispatch }, { index, params, query, fullPath }) {
+      // 更新页面列表某一项
+      const page = state.opened[index]
+      page.params = params || page.params
+      page.query = query || page.query
+      page.fullPath = fullPath || page.fullPath
+      state.opened.splice(index, 1, page)
+      // 持久化
+      await dispatch('opened2db')
+    },
+    /**
+     * @class opened
+     * @description 重排页面列表上的某一项
+     * @param {Object} context
+     * @param {Object} payload { oldIndex, newIndex } 位置信息
+     */
+    async openedSort ({ state, commit, dispatch }, { oldIndex, newIndex }) {
+      // 重排页面列表某一项
+      const page = state.opened[oldIndex]
+      state.opened.splice(oldIndex, 1)
+      state.opened.splice(newIndex, 0, page)
+      // 持久化
+      await dispatch('opened2db')
+    },
+    /**
+     * @class opened
+     * @description 新增一个 tag (打开一个页面)
+     * @param {Object} context
+     * @param {Object} payload new tag info
+     */
+    async add ({ state, commit, dispatch }, { tag, params, query, fullPath }) {
+      // 设置新的 tag 在新打开一个以前没打开过的页面时使用
+      const newTag = tag
+      newTag.params = params || newTag.params
+      newTag.query = query || newTag.query
+      newTag.fullPath = fullPath || newTag.fullPath
+      // 添加进当前显示的页面数组
+      state.opened.push(newTag)
+      // 如果这个页面需要缓存 将其添加到缓存设置
+      if (isKeepAlive(newTag)) commit('keepAlivePush', tag.name)
+      // 持久化
+      await dispatch('opened2db')
+    },
+    /**
+     * @class current
+     * @description 打开一个新的页面
+     * @param {Object} context
+     * @param {Object} payload 从路由钩子的 to 对象上获取 { name, params, query, fullPath, meta } 路由信息
+     */
+    async open ({ state, commit, dispatch }, { name, params, query, fullPath, meta }) {
+      // 已经打开的页面
+      const opened = state.opened
+      // 判断此页面是否已经打开 并且记录位置
+      let pageOpendIndex = 0
+      const pageOpend = opened.find((page, index) => {
+        const same = page.fullPath === fullPath
+        pageOpendIndex = same ? index : pageOpendIndex
+        return same
+      })
+      if (pageOpend) {
+        // 页面以前打开过
+        await dispatch('openedUpdate', {
+          index: pageOpendIndex,
+          params,
+          query,
+          fullPath
+        })
+      } else {
+        // 页面以前没有打开过
+        const page = state.pool.find(t => t.name === name)
+        // 如果这里没有找到 page 代表这个路由虽然在框架内 但是不参与标签页显示
+        if (page) {
+          await dispatch('add', {
+            tag: Object.assign({}, page),
+            params,
+            query,
+            fullPath
+          })
+        }
+      }
+      // 如果这个页面需要缓存 将其添加到缓存设置
+      if (isKeepAlive({ meta })) commit('keepAlivePush', name)
+      // 设置当前的页面
+      commit('currentSet', fullPath)
+    },
+    /**
+     * @class opened
+     * @description 关闭一个 tag (关闭一个页面)
+     * @param {Object} context
+     * @param {Object} payload { tagName: 要关闭的标签名字 }
+     */
+    async close ({ state, commit, dispatch }, { tagName }) {
+      // 预定下个新页面
+      let newPage = {}
+      const isCurrent = state.current === tagName
+      // 如果关闭的页面就是当前显示的页面
+      if (isCurrent) {
+        // 去找一个新的页面
+        const len = state.opened.length
+        for (let i = 0; i < len; i++) {
+          if (state.opened[i].fullPath === tagName) {
+            newPage = i < len - 1 ? state.opened[i + 1] : state.opened[i - 1]
+            break
+          }
+        }
+      }
+      // 找到这个页面在已经打开的数据里是第几个
+      const index = state.opened.findIndex(page => page.fullPath === tagName)
+      if (index >= 0) {
+        // 如果这个页面是缓存的页面 将其在缓存设置中删除
+        commit('keepAliveRemove', state.opened[index].name)
+        // 更新数据 删除关闭的页面
+        state.opened.splice(index, 1)
+      }
+      // 持久化
+      await dispatch('opened2db')
+      // 决定最后停留的页面
+      if (isCurrent) {
+        const { name = 'index', params = {}, query = {} } = newPage
+        const routerObj = { name, params, query }
+        await router.push(routerObj)
+      }
+    },
+    /**
+     * @class opened
+     * @description 关闭当前标签左边的标签
+     * @param {Object} context
+     * @param {Object} payload { pageSelect: 当前选中的tagName }
+     */
+    async closeLeft ({ state, commit, dispatch }, { pageSelect } = {}) {
+      const pageAim = pageSelect || state.current
+      let currentIndex = 0
+      state.opened.forEach((page, index) => {
+        if (page.fullPath === pageAim) currentIndex = index
+      })
+      if (currentIndex > 0) {
+        // 删除打开的页面 并在缓存设置中删除
+        for (let i = state.opened.length - 1; i >= 0; i--) {
+          if (state.opened[i].name === 'index' || i >= currentIndex) {
+            continue
+          }
+
+          commit('keepAliveRemove', state.opened[i].name)
+          state.opened.splice(i, 1)
+        }
+      }
+      // 持久化
+      await dispatch('opened2db')
+      // 设置当前的页面
+      state.current = pageAim
+      if (router.app.$route.fullPath !== pageAim) await router.push(pageAim)
+    },
+    /**
+     * @class opened
+     * @description 关闭当前标签右边的标签
+     * @param {Object} context
+     * @param {Object} payload { pageSelect: 当前选中的tagName }
+     */
+    async closeRight ({ state, commit, dispatch }, { pageSelect } = {}) {
+      const pageAim = pageSelect || state.current
+      let currentIndex = 0
+      state.opened.forEach((page, index) => {
+        if (page.fullPath === pageAim) currentIndex = index
+      })
+      // 删除打开的页面 并在缓存设置中删除
+      for (let i = state.opened.length - 1; i >= 0; i--) {
+        if (state.opened[i].name === 'index' || currentIndex >= i) {
+          continue
+        }
+
+        commit('keepAliveRemove', state.opened[i].name)
+        state.opened.splice(i, 1)
+      }
+      // 持久化
+      await dispatch('opened2db')
+      // 设置当前的页面
+      state.current = pageAim
+      if (router.app.$route.fullPath !== pageAim) await router.push(pageAim)
+    },
+    /**
+     * @class opened
+     * @description 关闭当前激活之外的 tag
+     * @param {Object} context
+     * @param {Object} payload { pageSelect: 当前选中的tagName }
+     */
+    async closeOther ({ state, commit, dispatch }, { pageSelect } = {}) {
+      const pageAim = pageSelect || state.current
+      let currentIndex = 0
+      state.opened.forEach((page, index) => {
+        if (page.fullPath === pageAim) currentIndex = index
+      })
+      // 删除打开的页面数据 并更新缓存设置
+      for (let i = state.opened.length - 1; i >= 0; i--) {
+        if (state.opened[i].name === 'index' || currentIndex === i) {
+          continue
+        }
+
+        commit('keepAliveRemove', state.opened[i].name)
+        state.opened.splice(i, 1)
+      }
+      // 持久化
+      await dispatch('opened2db')
+      // 设置新的页面
+      state.current = pageAim
+      if (router.app.$route.fullPath !== pageAim) await router.push(pageAim)
+    },
+    /**
+     * @class opened
+     * @description 关闭所有 tag
+     * @param {Object} context
+     */
+    async closeAll ({ state, commit, dispatch }) {
+      // 删除打开的页面 并在缓存设置中删除
+      for (let i = state.opened.length - 1; i >= 0; i--) {
+        if (state.opened[i].name === 'index') {
+          continue
+        }
+
+        commit('keepAliveRemove', state.opened[i].name)
+        state.opened.splice(i, 1)
+      }
+      // 持久化
+      await dispatch('opened2db')
+      // 关闭所有的标签页后需要判断一次现在是不是在首页
+      if (router.app.$route.name !== 'index') {
+        await router.push({ name: 'index' })
+      }
+    }
+  },
+  mutations: {
+    /**
+     * @class keepAlive
+     * @description 从已经打开的页面记录中更新需要缓存的页面记录
+     * @param {Object} state state
+     */
+    keepAliveRefresh (state) {
+      state.keepAlive = state.opened.filter(item => isKeepAlive(item)).map(e => e.name)
+    },
+    /**
+     * @description 删除一个页面的缓存设置
+     * @param {Object} state state
+     * @param {String} name name
+     */
+    keepAliveRemove (state, name) {
+      const list = cloneDeep(state.keepAlive)
+      const index = list.findIndex(item => item === name)
+      if (index !== -1) {
+        list.splice(index, 1)
+        state.keepAlive = list
+      }
+    },
+    /**
+     * @description 增加一个页面的缓存设置
+     * @param {Object} state state
+     * @param {String} name name
+     */
+    keepAlivePush (state, name) {
+      const keep = cloneDeep(state.keepAlive)
+      keep.push(name)
+      state.keepAlive = uniq(keep)
+    },
+    /**
+     * @description 清空页面缓存设置
+     * @param {Object} state state
+     */
+    keepAliveClean (state) {
+      state.keepAlive = []
+    },
+    /**
+     * @class current
+     * @description 设置当前激活的页面 fullPath
+     * @param {Object} state state
+     * @param {String} fullPath new fullPath
+     */
+    currentSet (state, fullPath) {
+      state.current = fullPath
+    },
+    /**
+     * @class pool
+     * @description 保存 pool (候选池)
+     * @param {Object} state state
+     * @param {Array} routes routes
+     */
+    init (state, routes) {
+      const pool = []
+      const push = function (routes) {
+        routes.forEach(route => {
+          if (route.children && route.children.length > 0) {
+            push(route.children)
+          } else {
+            if (!route.hidden) {
+              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,18 @@
+import util from '@/libs/util.js'
+
+export default {
+  namespaced: true,
+  mutations: {
+    /**
+     * @description 显示版本信息
+     * @param {Object} state state
+     */
+    versionShow () {
+      util.log.capsule('D2Admin', `v${process.env.VUE_APP_VERSION}`)
+      console.log('D2 Admin  https://github.com/d2-projects/d2-admin')
+      console.log('D2 Crud   https://github.com/d2-projects/d2-crud')
+      console.log('Document  https://d2.pub/zh/doc/d2-admin')
+      console.log('请不要吝啬您的 star，谢谢 ~')
+    }
+  }
+}

src/store/modules/d2admin/modules/search.js

@@ -0,0 +1,55 @@
+import setting from '@/setting.js'
+
+export default {
+  namespaced: true,
+  state: {
+    // 搜索面板激活状态
+    active: false,
+    // 快捷键
+    hotkey: {
+      open: setting.hotkey.search.open,
+      close: setting.hotkey.search.close
+    },
+    // 所有可以搜索的页面
+    pool: []
+  },
+  mutations: {
+    /**
+     * @description 切换激活状态
+     * @param {Object} state state
+     */
+    toggle (state) {
+      state.active = !state.active
+    },
+    /**
+     * @description 设置激活模式
+     * @param {Object} state state
+     * @param {Boolean} active active
+     */
+    set (state, active) {
+      state.active = active
+    },
+    /**
+     * @description 初始化
+     * @param {Object} state state
+     * @param {Array} menu menu
+     */
+    init (state, menu) {
+      const pool = []
+      const push = function (menu, titlePrefix = []) {
+        menu.forEach(m => {
+          if (m.children) {
+            push(m.children, [...titlePrefix, m.title])
+          } else {
+            pool.push({
+              ...m,
+              fullTitle: [...titlePrefix, m.title].join(' / ')
+            })
+          }
+        })
+      }
+      push(menu)
+      state.pool = pool
+    }
+  }
+}

src/store/modules/d2admin/modules/size.js

@@ -0,0 +1,69 @@
+import Vue from 'vue'
+import router from '@/router'
+
+export default {
+  namespaced: true,
+  state: {
+    // 尺寸
+    value: '' // medium small mini
+  },
+  actions: {
+    /**
+     * @description 将当前的设置应用到 element
+     * @param {Object} context
+     * @param {Boolean} refresh 是否在设置之后刷新页面
+     */
+    apply ({ state, commit }, refresh) {
+      Vue.prototype.$ELEMENT.size = state.value
+      if (refresh) {
+        commit('d2admin/page/keepAliveClean', null, { root: true })
+        router.replace('/refresh')
+      }
+    },
+    /**
+     * @description 确认已经加载组件尺寸设置 https://github.com/d2-projects/d2-admin/issues/198
+     * @param {Object} context
+     */
+    isLoaded ({ state }) {
+      if (state.value) return Promise.resolve()
+      return new Promise(resolve => {
+        const timer = setInterval(() => {
+          if (state.value) resolve(clearInterval(timer))
+        }, 10)
+      })
+    },
+    /**
+     * @description 设置尺寸
+     * @param {Object} context
+     * @param {String} size 尺寸
+     */
+    async set ({ state, dispatch }, size) {
+      // store 赋值
+      state.value = size
+      // 应用
+      dispatch('apply', true)
+      // 持久化
+      await dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'size.value',
+        value: state.value,
+        user: true
+      }, { root: true })
+    },
+    /**
+     * @description 从持久化数据读取尺寸设置
+     * @param {Object} context
+     */
+    async load ({ state, dispatch }) {
+      // store 赋值
+      state.value = await dispatch('d2admin/db/get', {
+        dbName: 'sys',
+        path: 'size.value',
+        defaultValue: 'default',
+        user: true
+      }, { root: true })
+      // 应用
+      dispatch('apply')
+    }
+  }
+}

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

@@ -0,0 +1,76 @@
+import { get } from 'lodash'
+import setting from '@/setting.js'
+
+export default {
+  namespaced: true,
+  state: {
+    // 主题
+    list: get(setting, 'theme.list', []),
+    // 现在激活的主题 这应该是一个名字 不是对象
+    activeName: get(setting, 'theme.list[0].name', 'd2')
+  },
+  getters: {
+    /**
+     * @description 返回当前的主题信息 不是一个名字 而是当前激活主题的所有数据
+     * @param {Object} state state
+     */
+    activeSetting (state) {
+      return state.list.find(theme => theme.name === state.activeName)
+    }
+  },
+  actions: {
+    /**
+     * @description 激活一个主题
+     * @param {String} themeValue 需要激活的主题名称
+     */
+    async set ({ state, commit, dispatch }, themeName) {
+      // 检查这个主题在主题列表里是否存在
+      state.activeName = state.list.find(e => e.name === themeName) ? themeName : state.list[0].name
+      // 将 vuex 中的主题应用到 dom
+      commit('dom')
+      // 持久化
+      await dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'theme.activeName',
+        value: state.activeName,
+        user: true
+      }, { root: true })
+    },
+    /**
+     * @description 从持久化数据加载主题设置     * @param {Object} context
+     */
+    async load ({ state, commit, dispatch }) {
+      // store 赋值
+      const activeName = await dispatch('d2admin/db/get', {
+        dbName: 'sys',
+        path: 'theme.activeName',
+        defaultValue: state.list[0].name,
+        user: true
+      }, { root: true })
+      // 检查这个主题在主题列表里是否存在
+      if (state.list.find(e => e.name === activeName)) {
+        state.activeName = activeName
+      } else {
+        state.activeName = state.list[0].name
+        // 持久化
+        await dispatch('d2admin/db/set', {
+          dbName: 'sys',
+          path: 'theme.activeName',
+          value: state.activeName,
+          user: true
+        }, { root: true })
+      }
+      // 将 vuex 中的主题应用到 dom
+      commit('dom')
+    }
+  },
+  mutations: {
+    /**
+     * @description 将 vuex 中的主题应用到 dom
+     * @param {Object} state 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
+  },
+  actions: {
+    /**
+     * @description 设置开启状态
+     * @param {Object} context
+     * @param {Boolean} active 新的状态
+     */
+    async set ({ state, dispatch }, active) {
+      // store 赋值
+      state.active = active
+      // 持久化
+      await dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'transition.active',
+        value: state.active,
+        user: true
+      }, { root: true })
+    },
+    /**
+     * 从数据库读取页面过渡动画设置
+     * @param {Object} context
+     */
+    async load ({ state, dispatch }) {
+      // store 赋值
+      state.active = await dispatch('d2admin/db/get', {
+        dbName: 'sys',
+        path: 'transition.active',
+        defaultValue: setting.transition.active,
+        user: true
+      }, { root: 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 state
+     */
+    get (state) {
+      state.data = new UaParser().getResult()
+    }
+  }
+}

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

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