D2Admin 1.7
Former-commit-id: 3010ce31114fdc121006451c72f9e18306239fd2
This commit is contained in:
liyang
@@ -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
|
||||
}
|
||||
})
|
||||
@@ -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
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import { Message, MessageBox } from 'element-ui'
|
||||
import util from '@/libs/util.js'
|
||||
import router from '@/router'
|
||||
import { AccountLogin } from '@api/sys.login'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
actions: {
|
||||
/**
|
||||
* @description 登录
|
||||
* @param {Object} param context
|
||||
* @param {Object} param username {String} 用户账号
|
||||
* @param {Object} param password {String} 密码
|
||||
* @param {Object} param route {Object} 登录成功后定向的路由对象 任何 vue-router 支持的格式
|
||||
*/
|
||||
login ({ dispatch }, {
|
||||
username = '',
|
||||
password = ''
|
||||
} = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 开始请求登录接口
|
||||
AccountLogin({
|
||||
username,
|
||||
password
|
||||
})
|
||||
.then(async res => {
|
||||
// 设置 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')
|
||||
// 结束
|
||||
resolve()
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('err: ', err)
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description 注销用户并返回登录页面
|
||||
* @param {Object} param context
|
||||
* @param {Object} param 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('注销当前账户吗? 打开的标签页和用户设置将会被保存。', '确认操作', {
|
||||
confirmButtonText: '确定注销',
|
||||
cancelButtonText: '放弃',
|
||||
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} state vuex state
|
||||
*/
|
||||
load ({ dispatch }) {
|
||||
return new Promise(async resolve => {
|
||||
// DB -> store 加载用户名
|
||||
await dispatch('d2admin/user/load', null, { root: true })
|
||||
// DB -> store 加载主题
|
||||
await dispatch('d2admin/theme/load', null, { root: true })
|
||||
// DB -> store 加载页面过渡效果设置
|
||||
await dispatch('d2admin/transition/load', null, { root: true })
|
||||
// DB -> store 持久化数据加载上次退出时的多页列表
|
||||
await dispatch('d2admin/page/openedLoad', null, { root: true })
|
||||
// DB -> store 持久化数据加载侧边栏折叠状态
|
||||
await dispatch('d2admin/menu/asideCollapseLoad', null, { root: true })
|
||||
// DB -> store 持久化数据加载全局尺寸
|
||||
await dispatch('d2admin/size/load', null, { root: true })
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
import util from '@/libs/util'
|
||||
import router from '@/router'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
/**
|
||||
* @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 = util.db.get(currentPath).value()
|
||||
if (!(value !== undefined && validator(value))) {
|
||||
util.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
|
||||
}) {
|
||||
util.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(cloneDeep(util.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(util.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(util.db.get(pathInit({
|
||||
dbName: 'database',
|
||||
path: '',
|
||||
user,
|
||||
validator: () => false,
|
||||
defaultValue: {}
|
||||
})))
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description 获取存储数据库对象 [ 区分页面 ]
|
||||
* @param {Object} context context
|
||||
* @param {Object} param basis {String} 页面区分依据 [ name | path | fullPath ]
|
||||
* @param {Object} param user {Boolean} 是否区分用户
|
||||
*/
|
||||
databasePage (context, {
|
||||
basis = 'fullPath',
|
||||
user = false
|
||||
} = {}) {
|
||||
return new Promise(resolve => {
|
||||
resolve(util.db.get(pathInit({
|
||||
dbName: 'database',
|
||||
path: `$page.${router.app.$route[basis]}`,
|
||||
user,
|
||||
defaultValue: {}
|
||||
})))
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description 清空存储数据库对象 [ 区分页面 ]
|
||||
* @param {Object} context context
|
||||
* @param {Object} param basis {String} 页面区分依据 [ name | path | fullPath ]
|
||||
* @param {Object} param user {Boolean} 是否区分用户
|
||||
*/
|
||||
databasePageClear (context, {
|
||||
basis = 'fullPath',
|
||||
user = false
|
||||
} = {}) {
|
||||
return new Promise(resolve => {
|
||||
resolve(util.db.get(pathInit({
|
||||
dbName: 'database',
|
||||
path: `$page.${router.app.$route[basis]}`,
|
||||
user,
|
||||
validator: () => false,
|
||||
defaultValue: {}
|
||||
})))
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description 快速将页面当前的数据 ( $data ) 持久化
|
||||
* @param {Object} context context
|
||||
* @param {Object} param instance {Object} vue 实例
|
||||
* @param {Object} param basis {String} 页面区分依据 [ name | path | fullPath ]
|
||||
* @param {Object} param user {Boolean} 是否区分用户
|
||||
*/
|
||||
pageSet (context, {
|
||||
instance,
|
||||
basis = 'fullPath',
|
||||
user = false
|
||||
}) {
|
||||
return new Promise(resolve => {
|
||||
resolve(util.db.get(pathInit({
|
||||
dbName: 'database',
|
||||
path: `$page.${router.app.$route[basis]}.$data`,
|
||||
user,
|
||||
validator: () => false,
|
||||
defaultValue: cloneDeep(instance.$data)
|
||||
})))
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description 快速获取页面快速持久化的数据
|
||||
* @param {Object} context context
|
||||
* @param {Object} param instance {Object} vue 实例
|
||||
* @param {Object} param basis {String} 页面区分依据 [ name | path | fullPath ]
|
||||
* @param {Object} param user {Boolean} 是否区分用户
|
||||
*/
|
||||
pageGet (context, {
|
||||
instance,
|
||||
basis = 'fullPath',
|
||||
user = false
|
||||
}) {
|
||||
return new Promise(resolve => {
|
||||
resolve(cloneDeep(util.db.get(pathInit({
|
||||
dbName: 'database',
|
||||
path: `$page.${router.app.$route[basis]}.$data`,
|
||||
user,
|
||||
defaultValue: cloneDeep(instance.$data)
|
||||
})).value()))
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description 清空页面快照
|
||||
* @param {Object} context context
|
||||
* @param {Object} param basis {String} 页面区分依据 [ name | path | fullPath ]
|
||||
* @param {Object} param user {Boolean} 是否区分用户
|
||||
*/
|
||||
pageClear (context, {
|
||||
basis = 'fullPath',
|
||||
user = false
|
||||
}) {
|
||||
return new Promise(resolve => {
|
||||
resolve(util.db.get(pathInit({
|
||||
dbName: 'database',
|
||||
path: `$page.${router.app.$route[basis]}.$data`,
|
||||
user,
|
||||
validator: () => false,
|
||||
defaultValue: {}
|
||||
})))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import screenfull from 'screenfull'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
// 全屏激活
|
||||
active: false
|
||||
},
|
||||
actions: {
|
||||
/**
|
||||
* @description 初始化监听
|
||||
*/
|
||||
listen ({ commit }) {
|
||||
return new Promise(resolve => {
|
||||
if (screenfull.enabled) {
|
||||
screenfull.on('change', () => {
|
||||
console.log('1')
|
||||
if (!screenfull.isFullscreen) {
|
||||
commit('set', false)
|
||||
}
|
||||
})
|
||||
}
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description 切换全屏
|
||||
*/
|
||||
toggle ({ commit }) {
|
||||
return new Promise(resolve => {
|
||||
if (screenfull.isFullscreen) {
|
||||
screenfull.exit()
|
||||
commit('set', false)
|
||||
} else {
|
||||
screenfull.request()
|
||||
commit('set', true)
|
||||
}
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
/**
|
||||
* @description 设置 store 里的全屏状态
|
||||
* @param {Object} state vuex state
|
||||
* @param {Boolean} active active
|
||||
*/
|
||||
set (state, active) {
|
||||
state.active = active
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
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 {String} param message {String} 信息
|
||||
* @param {String} param type {String} 类型
|
||||
* @param {Object} param 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 vuex state
|
||||
* @param {Object} log data
|
||||
*/
|
||||
push (state, log) {
|
||||
state.log.push(log)
|
||||
},
|
||||
/**
|
||||
* @description 清空日志
|
||||
* @param {Object} state vuex state
|
||||
*/
|
||||
clean (state) {
|
||||
// store 赋值
|
||||
state.log = []
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
// 设置文件
|
||||
import setting from '@/setting.js'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
// 顶栏菜单
|
||||
header: [],
|
||||
// 侧栏菜单
|
||||
aside: [],
|
||||
// 侧边栏收缩
|
||||
asideCollapse: setting.menu.asideCollapse
|
||||
},
|
||||
actions: {
|
||||
/**
|
||||
* 设置侧边栏展开或者收缩
|
||||
* @param {Object} state vuex state
|
||||
* @param {Boolean} collapse is collapse
|
||||
*/
|
||||
asideCollapseSet ({ state, dispatch }, collapse) {
|
||||
return new Promise(async resolve => {
|
||||
// store 赋值
|
||||
state.asideCollapse = collapse
|
||||
// 持久化
|
||||
await dispatch('d2admin/db/set', {
|
||||
dbName: 'sys',
|
||||
path: 'menu.asideCollapse',
|
||||
value: state.asideCollapse,
|
||||
user: true
|
||||
}, { root: true })
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 切换侧边栏展开和收缩
|
||||
* @param {Object} state vuex state
|
||||
*/
|
||||
asideCollapseToggle ({ state, dispatch }) {
|
||||
return new Promise(async resolve => {
|
||||
// store 赋值
|
||||
state.asideCollapse = !state.asideCollapse
|
||||
// 持久化
|
||||
await dispatch('d2admin/db/set', {
|
||||
dbName: 'sys',
|
||||
path: 'menu.asideCollapse',
|
||||
value: state.asideCollapse,
|
||||
user: true
|
||||
}, { root: true })
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 从持久化数据读取侧边栏展开或者收缩
|
||||
* @param {Object} state vuex state
|
||||
*/
|
||||
asideCollapseLoad ({ state, dispatch }) {
|
||||
return new Promise(async resolve => {
|
||||
// store 赋值
|
||||
state.asideCollapse = await dispatch('d2admin/db/get', {
|
||||
dbName: 'sys',
|
||||
path: 'menu.asideCollapse',
|
||||
defaultValue: setting.menu.asideCollapse,
|
||||
user: true
|
||||
}, { root: true })
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,401 @@
|
||||
import { 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: setting.page.opened,
|
||||
// 当前页面
|
||||
current: '',
|
||||
// 需要缓存的页面 name
|
||||
keepAlive: []
|
||||
},
|
||||
actions: {
|
||||
/**
|
||||
* @class opened
|
||||
* @description 从持久化数据载入分页列表
|
||||
* @param {Object} state vuex state
|
||||
*/
|
||||
openedLoad ({ state, commit, dispatch }) {
|
||||
return new Promise(async resolve => {
|
||||
// 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)
|
||||
// 根据 opened 数据生成缓存设置
|
||||
commit('keepAliveRefresh')
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 将 opened 属性赋值并持久化 在这之前请先确保已经更新了 state.opened
|
||||
* @param {Object} state vuex state
|
||||
*/
|
||||
opend2db ({ state, dispatch }) {
|
||||
return new Promise(async resolve => {
|
||||
// 设置数据
|
||||
dispatch('d2admin/db/set', {
|
||||
dbName: 'sys',
|
||||
path: 'page.opened',
|
||||
value: state.opened,
|
||||
user: true
|
||||
}, { root: true })
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 更新页面列表上的某一项
|
||||
* @param {Object} state vuex state
|
||||
* @param {Object} param { index, params, query, fullPath } 路由信息
|
||||
*/
|
||||
openedUpdate ({ state, commit, dispatch }, { index, params, query, fullPath }) {
|
||||
return new Promise(async resolve => {
|
||||
// 更新页面列表某一项
|
||||
let 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('opend2db')
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 新增一个 tag (打开一个页面)
|
||||
* @param {Object} state vuex state
|
||||
* @param {Object} param new tag info
|
||||
*/
|
||||
add ({ state, commit, dispatch }, { tag, params, query, fullPath }) {
|
||||
return new Promise(async resolve => {
|
||||
// 设置新的 tag 在新打开一个以前没打开过的页面时使用
|
||||
let 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('opend2db')
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class current
|
||||
* @description 打开一个新的页面
|
||||
* @param {Object} state vuex state
|
||||
* @param {Object} param 从路由钩子的 to 对象上获取 { name, params, query, fullPath } 路由信息
|
||||
*/
|
||||
open ({ state, commit, dispatch }, { name, params, query, fullPath }) {
|
||||
return new Promise(async resolve => {
|
||||
// 已经打开的页面
|
||||
let 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 {
|
||||
// 页面以前没有打开过
|
||||
let page = state.pool.find(t => t.name === name)
|
||||
// 如果这里没有找到 page 代表这个路由虽然在框架内 但是不参与标签页显示
|
||||
if (page) {
|
||||
await dispatch('add', {
|
||||
tag: Object.assign({}, page),
|
||||
params,
|
||||
query,
|
||||
fullPath
|
||||
})
|
||||
}
|
||||
}
|
||||
commit('currentSet', fullPath)
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 关闭一个 tag (关闭一个页面)
|
||||
* @param {Object} state vuex state
|
||||
* @param {Object} param { tagName: 要关闭的标签名字 }
|
||||
*/
|
||||
close ({ state, commit, dispatch }, { tagName }) {
|
||||
return new Promise(async resolve => {
|
||||
// 下个新的页面
|
||||
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].fullPath === tagName) {
|
||||
if (i < len - 1) {
|
||||
newPage = state.opened[i + 1]
|
||||
} else {
|
||||
newPage = 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('opend2db')
|
||||
// 最后需要判断是否需要跳到首页
|
||||
if (isCurrent) {
|
||||
const { name = '', params = {}, query = {} } = newPage
|
||||
let routerObj = {
|
||||
name,
|
||||
params,
|
||||
query
|
||||
}
|
||||
router.push(routerObj)
|
||||
}
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 关闭当前标签左边的标签
|
||||
* @param {Object} state vuex state
|
||||
* @param {Object} param { pageSelect: 当前选中的tagName }
|
||||
*/
|
||||
closeLeft ({ state, commit, dispatch }, { pageSelect } = {}) {
|
||||
return new Promise(async resolve => {
|
||||
const pageAim = pageSelect || state.current
|
||||
let currentIndex = 0
|
||||
state.opened.forEach((page, index) => {
|
||||
if (page.fullPath === pageAim) {
|
||||
currentIndex = index
|
||||
}
|
||||
})
|
||||
if (currentIndex > 0) {
|
||||
// 删除打开的页面 并在缓存设置中删除
|
||||
state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||
}
|
||||
state.current = pageAim
|
||||
if (router.app.$route.fullPath !== pageAim) {
|
||||
router.push(pageAim)
|
||||
}
|
||||
// 持久化
|
||||
await dispatch('opend2db')
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 关闭当前标签右边的标签
|
||||
* @param {Object} state vuex state
|
||||
* @param {Object} param { pageSelect: 当前选中的tagName }
|
||||
*/
|
||||
closeRight ({ state, commit, dispatch }, { pageSelect } = {}) {
|
||||
return new Promise(async resolve => {
|
||||
const pageAim = pageSelect || state.current
|
||||
let currentIndex = 0
|
||||
state.opened.forEach((page, index) => {
|
||||
if (page.fullPath === pageAim) {
|
||||
currentIndex = index
|
||||
}
|
||||
})
|
||||
// 删除打开的页面 并在缓存设置中删除
|
||||
state.opened.splice(currentIndex + 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||
// 设置当前的页面
|
||||
state.current = pageAim
|
||||
if (router.app.$route.fullPath !== pageAim) {
|
||||
router.push(pageAim)
|
||||
}
|
||||
// 持久化
|
||||
await dispatch('opend2db')
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 关闭当前激活之外的 tag
|
||||
* @param {Object} state vuex state
|
||||
* @param {Object} param { pageSelect: 当前选中的tagName }
|
||||
*/
|
||||
closeOther ({ state, commit, dispatch }, { pageSelect } = {}) {
|
||||
return new Promise(async resolve => {
|
||||
const pageAim = pageSelect || state.current
|
||||
let currentIndex = 0
|
||||
state.opened.forEach((page, index) => {
|
||||
if (page.fullPath === pageAim) {
|
||||
currentIndex = index
|
||||
}
|
||||
})
|
||||
// 删除打开的页面数据 并更新缓存设置
|
||||
if (currentIndex === 0) {
|
||||
state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||
} else {
|
||||
state.opened.splice(currentIndex + 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||
state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||
}
|
||||
// 设置新的页面
|
||||
state.current = pageAim
|
||||
if (router.app.$route.fullPath !== pageAim) {
|
||||
router.push(pageAim)
|
||||
}
|
||||
// 持久化
|
||||
await dispatch('opend2db')
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 关闭所有 tag
|
||||
* @param {Object} state vuex state
|
||||
*/
|
||||
closeAll ({ state, commit, dispatch }) {
|
||||
return new Promise(async resolve => {
|
||||
// 删除打开的页面 并在缓存设置中删除
|
||||
state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||
// 持久化
|
||||
await dispatch('opend2db')
|
||||
// 关闭所有的标签页后需要判断一次现在是不是在首页
|
||||
if (router.app.$route.name !== 'index') {
|
||||
router.push({
|
||||
name: 'index'
|
||||
})
|
||||
}
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
/**
|
||||
* @class keepAlive
|
||||
* @description 从已经打开的页面记录中更新需要缓存的页面记录
|
||||
* @param {Object} state vuex state
|
||||
*/
|
||||
keepAliveRefresh (state) {
|
||||
state.keepAlive = state.opened.filter(item => isKeepAlive(item)).map(e => e.name)
|
||||
},
|
||||
/**
|
||||
* @description 删除一个页面的缓存设置
|
||||
* @param {Object} state vuex state
|
||||
* @param {String} name name
|
||||
*/
|
||||
keepAliveRemove (state, name) {
|
||||
const list = [ ...state.keepAlive ]
|
||||
const index = list.findIndex(item => item === name)
|
||||
|
||||
if (index !== -1) {
|
||||
list.splice(index, 1)
|
||||
state.keepAlive = list
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 增加一个页面的缓存设置
|
||||
* @param {Object} state vuex state
|
||||
* @param {String} name name
|
||||
*/
|
||||
keepAlivePush (state, name) {
|
||||
const keep = [ ...state.keepAlive ]
|
||||
keep.push(name)
|
||||
state.keepAlive = keep
|
||||
},
|
||||
/**
|
||||
* @description 清空页面缓存设置
|
||||
* @param {Object} state vuex state
|
||||
*/
|
||||
keepAliveClean (state) {
|
||||
state.keepAlive = []
|
||||
},
|
||||
/**
|
||||
* @class current
|
||||
* @description 设置当前激活的页面 fullPath
|
||||
* @param {Object} state vuex state
|
||||
* @param {String} fullPath new fullPath
|
||||
*/
|
||||
currentSet (state, fullPath) {
|
||||
state.current = fullPath
|
||||
},
|
||||
/**
|
||||
* @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 {
|
||||
if (!route.hidden) {
|
||||
const { meta, name, path } = route
|
||||
pool.push({ meta, name, path })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
push(routes)
|
||||
state.pool = pool
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import util from '@/libs/util.js'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
mutations: {
|
||||
/**
|
||||
* @description 显示版本信息
|
||||
* @param {Object} state vuex 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://doc.d2admin.fairyever.com/zh/')
|
||||
console.log('请不要吝啬您的 star，谢谢 ~')
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 vuex state
|
||||
*/
|
||||
toggle (state) {
|
||||
state.active = !state.active
|
||||
},
|
||||
/**
|
||||
* @description 设置激活模式
|
||||
* @param {Object} state vuex state
|
||||
* @param {Boolean} active active
|
||||
*/
|
||||
set (state, active) {
|
||||
state.active = active
|
||||
},
|
||||
/**
|
||||
* @description 初始化
|
||||
* @param {Object} state vuex 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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
// 尺寸
|
||||
value: '' // medium small mini
|
||||
},
|
||||
actions: {
|
||||
/**
|
||||
* @description 设置尺寸
|
||||
* @param {Object} state vuex state
|
||||
* @param {String} size 尺寸
|
||||
*/
|
||||
set ({ state, dispatch }, size) {
|
||||
return new Promise(async resolve => {
|
||||
// store 赋值
|
||||
state.value = size
|
||||
// 持久化
|
||||
await dispatch('d2admin/db/set', {
|
||||
dbName: 'sys',
|
||||
path: 'size.value',
|
||||
value: state.value,
|
||||
user: true
|
||||
}, { root: true })
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description 从持久化数据读取尺寸设置
|
||||
* @param {Object} state vuex state
|
||||
*/
|
||||
load ({ state, dispatch }) {
|
||||
return new Promise(async resolve => {
|
||||
// store 赋值
|
||||
state.value = await dispatch('d2admin/db/get', {
|
||||
dbName: 'sys',
|
||||
path: 'size.value',
|
||||
defaultValue: 'default',
|
||||
user: true
|
||||
}, { root: true })
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
// 设置文件
|
||||
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)
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
/**
|
||||
* @description 激活一个主题
|
||||
* @param {Object} state vuex state
|
||||
* @param {String} themeValue 需要激活的主题名称
|
||||
*/
|
||||
set ({ state, commit, dispatch }, themeName) {
|
||||
return new Promise(async resolve => {
|
||||
// 检查这个主题在主题列表里是否存在
|
||||
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 })
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description 从持久化数据加载主题设置
|
||||
* @param {Object} state vuex state
|
||||
*/
|
||||
load ({ state, commit, dispatch }) {
|
||||
return new Promise(async resolve => {
|
||||
// store 赋值
|
||||
let 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')
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
/**
|
||||
* @description 将 vuex 中的主题应用到 dom
|
||||
* @param {Object} state vuex state
|
||||
*/
|
||||
dom (state) {
|
||||
document.body.className = `theme-${state.activeName}`
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
// 设置文件
|
||||
import setting from '@/setting.js'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
// 是否开启页面过度动画
|
||||
active: setting.transition.active
|
||||
},
|
||||
actions: {
|
||||
/**
|
||||
* @description 设置开启状态
|
||||
* @param {Object} state vuex state
|
||||
* @param {Boolean} active 新的状态
|
||||
*/
|
||||
set ({ state, dispatch }, active) {
|
||||
return new Promise(async resolve => {
|
||||
// store 赋值
|
||||
state.active = active
|
||||
// 持久化
|
||||
await dispatch('d2admin/db/set', {
|
||||
dbName: 'sys',
|
||||
path: 'transition.active',
|
||||
value: state.active,
|
||||
user: true
|
||||
}, { root: true })
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 从数据库读取页面过渡动画设置
|
||||
* @param {Object} state vuex state
|
||||
*/
|
||||
load ({ state, dispatch }) {
|
||||
return new Promise(async resolve => {
|
||||
// store 赋值
|
||||
state.active = await dispatch('d2admin/db/get', {
|
||||
dbName: 'sys',
|
||||
path: 'transition.active',
|
||||
defaultValue: setting.transition.active,
|
||||
user: true
|
||||
}, { root: true })
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
// 用户信息
|
||||
info: {}
|
||||
},
|
||||
actions: {
|
||||
/**
|
||||
* @description 设置用户数据
|
||||
* @param {Object} state vuex state
|
||||
* @param {*} info info
|
||||
*/
|
||||
set ({ state, dispatch }, info) {
|
||||
return new Promise(async resolve => {
|
||||
// store 赋值
|
||||
state.info = info
|
||||
// 持久化
|
||||
await dispatch('d2admin/db/set', {
|
||||
dbName: 'sys',
|
||||
path: 'user.info',
|
||||
value: info,
|
||||
user: true
|
||||
}, { root: true })
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description 从数据库取用户数据
|
||||
* @param {Object} state vuex state
|
||||
*/
|
||||
load ({ state, dispatch }) {
|
||||
return new Promise(async resolve => {
|
||||
// store 赋值
|
||||
state.info = await dispatch('d2admin/db/get', {
|
||||
dbName: 'sys',
|
||||
path: 'user.info',
|
||||
defaultValue: {},
|
||||
user: true
|
||||
}, { root: true })
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user