odboy/d2-admin-start-kit
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: update 1.9.0

Browse Source
This commit is contained in:
FairyEver
2020-04-22 16:58:44 +08:00
parent c15671ce88
commit d63f8b6300
9 changed files with 265 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/style/theme/d2/setting.scss
+5
View File
@@ -5,6 +5,11 @@ $theme-bg-color: #ebf1f6;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);
// 消息提示
$theme-message-info-background-color: $color-bg;
$theme-message-info-text-color: $color-text-normal;
$theme-message-info-border-color: $color-border-1;
// container组件
$theme-container-background-color: rgba(#FFF, 1);
$theme-container-header-footer-background-color: #FFF;
src/assets/style/theme/line/setting.scss
+5
View File
@@ -5,6 +5,11 @@ $theme-bg-color: #f8f8f9;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);
// 消息提示
$theme-message-info-background-color: $color-bg;
$theme-message-info-text-color: $color-text-normal;
$theme-message-info-border-color: $color-border-1;
// container组件
$theme-container-background-color: rgba(#FFF, .8);
$theme-container-header-footer-background-color: #FFF;
src/assets/style/theme/star/setting.scss
+5
View File
@@ -5,6 +5,11 @@ $theme-bg-color: #EFF4F8;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, .3);
// 消息提示
$theme-message-info-background-color: $color-bg;
$theme-message-info-text-color: $color-text-normal;
$theme-message-info-border-color: $color-border-1;
// container组件
$theme-container-background-color: rgba(#FFF, .9);
$theme-container-header-footer-background-color: #FFF;
src/assets/style/theme/theme.scss
+8 -3
View File
@@ -1,6 +1,14 @@
// 每个主题特有的设置
.theme-#{$theme-name} {
.el-message {
&.el-message--info {
background-color: $theme-message-info-background-color;
color: $theme-message-info-text-color;
border-color: $theme-message-info-border-color;
}
}
.el-card {
&.d2-card {
border: $theme-container-border-outer;
@@ -255,9 +263,6 @@
&:hover {
padding: 0px 20px;
}
.el-icon-close {
display: none;
}
}
}
.el-tabs__item.is-active {
src/assets/style/theme/tomorrow-night-blue/setting.scss
+5
View File
@@ -5,6 +5,11 @@ $theme-bg-color: #002253;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);
// 消息提示
$theme-message-info-background-color: $color-bg;
$theme-message-info-text-color: $color-text-normal;
$theme-message-info-border-color: $color-border-1;
// container组件
$theme-container-background-color: rgba(#FFF, 1);
$theme-container-header-footer-background-color: #FFF;
src/assets/style/theme/violet/setting.scss
+5
View File
@@ -5,6 +5,11 @@ $theme-bg-color: #000;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);
// 消息提示
$theme-message-info-background-color: $color-bg;
$theme-message-info-text-color: $color-text-normal;
$theme-message-info-border-color: $color-border-1;
// container组件
$theme-container-background-color: #FFF;
$theme-container-header-footer-background-color: #FFF;
src/layout/header-aside/components/panel-search/index.vue
+5 -7
View File
@@ -24,7 +24,7 @@
</div>
</div>
<div v-if="resultsList.length > 0" class="panel-search__results-group" flex-box="1">
<el-card>
<el-card shadow="never">
<div class="panel-search__results-group-inner">
<d2-panel-search-item
v-for="(item, index) in resultsList"
@@ -132,16 +132,15 @@ export default {
/**
* @description 接收用户在下拉菜单中选中事件
*/
handleSelect ({ path }) {
async handleSelect ({ path }) {
// 如果用户选择的就是当前页面 就直接关闭搜索面板
if (path === this.$route.path) {
this.handleEsc()
return
}
// 用户选择的是其它页面
this.$nextTick(() => {
await this.$nextTick()
this.handleMenuSelect(path)
})
},
/**
* @augments 关闭输入框的下拉菜单
@@ -161,11 +160,10 @@ export default {
/**
* @augments 接收用户触发的关闭
*/
handleEsc () {
async handleEsc () {
this.closeSuggestion()
this.$nextTick(() => {
await this.$nextTick()
this.$emit('close')
})
}
}
}
src/layout/header-aside/components/tabs/index.vue
+46 -38
View File
@@ -2,23 +2,36 @@
<div class="d2-multiple-page-control-group" flex>
<div class="d2-multiple-page-control-content" flex-box="1">
<div class="d2-multiple-page-control-content-inner">
<d2-contextmenu :visible.sync="contextmenuFlag" :x="contentmenuX" :y="contentmenuY">
<d2-contextmenu-list :menulist="tagName === '/index' ? contextmenuListIndex : contextmenuList" @rowClick="contextmenuClick"/>
<d2-contextmenu
:visible.sync="contextmenuFlag"
:x="contentmenuX"
:y="contentmenuY">
<d2-contextmenu-list
:menulist="tagName === '/index' ? contextmenuListIndex : contextmenuList"
@rowClick="contextmenuClick"/>
</d2-contextmenu>
<el-tabs
class="d2-multiple-page-control d2-multiple-page-sort"
:value="current"
type="card"
:closable="true"
@tab-click="handleClick"
@edit="handleTabsEdit"
@tab-remove="handleTabRemove"
@contextmenu.native="handleContextmenu">
<el-tab-pane v-for="page in opened" :key="page.fullPath" :label="page.meta.title || '未命名'" :name="page.fullPath"/>
<el-tab-pane
v-for="page in opened"
:key="page.fullPath"
:label="page.meta.title || '未命名'"
:name="page.fullPath"
:closable="isTabClosable(page)"/>
</el-tabs>
</div>
</div>
<div class="d2-multiple-page-control-btn" flex-box="0">
<el-dropdown size="default" split-button @click="closeAll" @command="command => handleControlItemClick(command)">
<el-dropdown
size="default"
split-button
@click="closeAll"
@command="command => handleControlItemClick(command)">
<d2-icon name="times-circle"/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="left">
@@ -46,6 +59,7 @@
<script>
import { mapState, mapActions } from 'vuex'
import Sortable from 'sortablejs'
export default {
components: {
D2Contextmenu: () => import('../contextmenu'),
@@ -83,12 +97,20 @@ export default {
'closeAll',
'openedSort'
]),
/**
* @description 计算某个标签页是否可关闭
* @param {Object} page 其中一个标签页
*/
isTabClosable (page) {
return page.name !== 'index'
},
/**
* @description 右键菜单功能点击
* @param {Object} event 事件
*/
handleContextmenu (event) {
let target = event.target
// 解决 https://github.com/d2-projects/d2-admin/issues/54
// fix https://github.com/d2-projects/d2-admin/issues/54
let flag = false
if (target.className.indexOf('el-tabs__item') > -1) flag = true
else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
@@ -106,58 +128,44 @@ export default {
},
/**
* @description 右键菜单的 row-click 事件
* @param {String} command 事件类型
*/
contextmenuClick (command) {
this.handleControlItemClick(command, this.tagName)
},
/**
* @description 接收点击关闭控制上选项的事件
* @param {String} command 事件类型
* @param {String} tagName tab 名称
*/
handleControlItemClick (command, tagName = null) {
if (tagName) {
this.contextmenuFlag = false
}
const params = {
pageSelect: tagName
}
if (tagName) this.contextmenuFlag = false
const params = { pageSelect: tagName }
switch (command) {
case 'left':
this.closeLeft(params)
break
case 'right':
this.closeRight(params)
break
case 'other':
this.closeOther(params)
break
case 'all':
this.closeAll()
break
default:
this.$message.error('无效的操作')
break
case 'left': this.closeLeft(params); break
case 'right': this.closeRight(params); break
case 'other': this.closeOther(params); break
case 'all': this.closeAll(); break
default: this.$message.error('无效的操作'); break
}
},
/**
* @description 接收点击 tab 标签的事件
* @param {object} tab 标签
* @param {object} event 事件
*/
handleClick (tab, event) {
// 找到点击的页面在 tag 列表里是哪个
const page = this.opened.find(page => page.fullPath === tab.name)
const { name, params, query } = page
if (page) {
this.$router.push({ name, params, query })
}
if (page) this.$router.push({ name, params, query })
},
/**
* @description 点击 tab 上的删除按钮触发这里 首页的删除按钮已经隐藏 因此这里不用判断是 index
* @description 点击 tab 上的删除按钮触发这里
* @param {String} tagName tab 名称
*/
handleTabsEdit (tagName, action) {
if (action === 'remove') {
this.close({
tagName
})
}
handleTabRemove (tagName) {
this.close({ tagName })
}
},
mounted () {
src/store/modules/d2admin/modules/page.js
+35 -96
View File
@@ -1,4 +1,4 @@
import { get } from 'lodash'
import { cloneDeep, uniq, get } from 'lodash'
import router from '@/router'
import setting from '@/setting.js'
@@ -11,7 +11,7 @@ export default {
// 可以在多页 tab 模式下显示的页面
pool: [],
// 当前显示的多页面列表
opened: setting.page.opened,
opened: get(setting, 'page.opened', []),
// 已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
openedLoaded: false,
// 当前页面
@@ -28,9 +28,7 @@ export default {
if (state.openedLoaded) return Promise.resolve()
return new Promise(resolve => {
const timer = setInterval(() => {
if (state.openedLoaded) {
resolve(clearInterval(timer))
}
if (state.openedLoaded) resolve(clearInterval(timer))
}, 10)
})
},
@@ -39,8 +37,7 @@ export default {
* @description 从持久化数据载入标签页列表
* @param {Object} context
*/
openedLoad ({ state, commit, dispatch }) {
return new Promise(async resolve => {
async openedLoad ({ state, commit, dispatch }) {
// store 赋值
const value = await dispatch('d2admin/db/get', {
dbName: 'sys',
@@ -54,7 +51,8 @@ export default {
// valid 有效列表 1, 1, 0, 1 => 有效, 有效, 失效, 有效
const valid = []
// 处理数据
state.opened = value.map(opened => {
state.opened = value
.map(opened => {
// 忽略首页
if (opened.fullPath === '/index') {
valid.push(1)
@@ -67,21 +65,18 @@ export default {
// 返回合并后的数据 新的覆盖旧的
// 新的数据中一般不会携带 params 和 query, 所以旧的参数会留存
return Object.assign({}, opened, find)
}).filter((opened, index) => valid[index] === 1)
})
.filter((opened, index) => valid[index] === 1)
// 标记已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
state.openedLoaded = true
// 根据 opened 数据生成缓存设置
commit('keepAliveRefresh')
// end
resolve()
})
},
/**
* 将 opened 属性赋值并持久化 在这之前请先确保已经更新了 state.opened
* @param {Object} context
*/
opened2db ({ state, dispatch }) {
return new Promise(async resolve => {
async opened2db ({ state, dispatch }) {
// 设置数据
dispatch('d2admin/db/set', {
dbName: 'sys',
@@ -89,9 +84,6 @@ export default {
value: state.opened,
user: true
}, { root: true })
// end
resolve()
})
},
/**
* @class opened
@@ -99,8 +91,7 @@ export default {
* @param {Object} context
* @param {Object} payload { index, params, query, fullPath } 路由信息
*/
openedUpdate ({ state, commit, dispatch }, { index, params, query, fullPath }) {
return new Promise(async resolve => {
async openedUpdate ({ state, commit, dispatch }, { index, params, query, fullPath }) {
// 更新页面列表某一项
let page = state.opened[index]
page.params = params || page.params
@@ -109,9 +100,6 @@ export default {
state.opened.splice(index, 1, page)
// 持久化
await dispatch('opened2db')
// end
resolve()
})
},
/**
* @class opened
@@ -119,17 +107,13 @@ export default {
* @param {Object} context
* @param {Object} payload { oldIndex, newIndex } 位置信息
*/
openedSort ({ state, commit, dispatch }, { oldIndex, newIndex }) {
return new Promise(async resolve => {
async openedSort ({ state, commit, dispatch }, { oldIndex, newIndex }) {
// 重排页面列表某一项
let page = state.opened[oldIndex]
state.opened.splice(oldIndex, 1)
state.opened.splice(newIndex, 0, page)
// 持久化
await dispatch('opened2db')
// end
resolve()
})
},
/**
* @class opened
@@ -137,8 +121,7 @@ export default {
* @param {Object} context
* @param {Object} payload new tag info
*/
add ({ state, commit, dispatch }, { tag, params, query, fullPath }) {
return new Promise(async resolve => {
async add ({ state, commit, dispatch }, { tag, params, query, fullPath }) {
// 设置新的 tag 在新打开一个以前没打开过的页面时使用
let newTag = tag
newTag.params = params || newTag.params
@@ -147,23 +130,17 @@ export default {
// 添加进当前显示的页面数组
state.opened.push(newTag)
// 如果这个页面需要缓存 将其添加到缓存设置
if (isKeepAlive(newTag)) {
commit('keepAlivePush', tag.name)
}
if (isKeepAlive(newTag)) commit('keepAlivePush', tag.name)
// 持久化
await dispatch('opened2db')
// end
resolve()
})
},
/**
* @class current
* @description 打开一个新的页面
* @param {Object} context
* @param {Object} payload 从路由钩子的 to 对象上获取 { name, params, query, fullPath } 路由信息
* @param {Object} payload 从路由钩子的 to 对象上获取 { name, params, query, fullPath, meta } 路由信息
*/
open ({ state, commit, dispatch }, { name, params, query, fullPath }) {
return new Promise(async resolve => {
async open ({ state, commit, dispatch }, { name, params, query, fullPath, meta }) {
// 已经打开的页面
let opened = state.opened
// 判断此页面是否已经打开 并且记录位置
@@ -194,10 +171,10 @@ export default {
})
}
}
// 如果这个页面需要缓存 将其添加到缓存设置
if (isKeepAlive({ meta })) commit('keepAlivePush', name)
// 设置当前的页面
commit('currentSet', fullPath)
// end
resolve()
})
},
/**
* @class opened
@@ -205,8 +182,7 @@ export default {
* @param {Object} context
* @param {Object} payload { tagName: 要关闭的标签名字 }
*/
close ({ state, commit, dispatch }, { tagName }) {
return new Promise(async resolve => {
async close ({ state, commit, dispatch }, { tagName }) {
// 下个新的页面
let newPage = state.opened[0]
const isCurrent = state.current === tagName
@@ -216,11 +192,8 @@ export default {
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]
}
if (i < len - 1) newPage = state.opened[i + 1]
else newPage = state.opened[i - 1]
break
}
}
@@ -245,9 +218,6 @@ export default {
}
router.push(routerObj)
}
// end
resolve()
})
},
/**
* @class opened
@@ -255,28 +225,20 @@ export default {
* @param {Object} context
* @param {Object} payload { pageSelect: 当前选中的tagName }
*/
closeLeft ({ state, commit, dispatch }, { pageSelect } = {}) {
return new Promise(async resolve => {
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 (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)
}
if (router.app.$route.fullPath !== pageAim) router.push(pageAim)
// 持久化
await dispatch('opened2db')
// end
resolve()
})
},
/**
* @class opened
@@ -284,27 +246,19 @@ export default {
* @param {Object} context
* @param {Object} payload { pageSelect: 当前选中的tagName }
*/
closeRight ({ state, commit, dispatch }, { pageSelect } = {}) {
return new Promise(async resolve => {
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
}
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)
}
if (router.app.$route.fullPath !== pageAim) router.push(pageAim)
// 持久化
await dispatch('opened2db')
// end
resolve()
})
},
/**
* @class opened
@@ -312,14 +266,11 @@ export default {
* @param {Object} context
* @param {Object} payload { pageSelect: 当前选中的tagName }
*/
closeOther ({ state, commit, dispatch }, { pageSelect } = {}) {
return new Promise(async resolve => {
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
}
if (page.fullPath === pageAim) currentIndex = index
})
// 删除打开的页面数据 并更新缓存设置
if (currentIndex === 0) {
@@ -330,35 +281,24 @@ export default {
}
// 设置新的页面
state.current = pageAim
if (router.app.$route.fullPath !== pageAim) {
router.push(pageAim)
}
if (router.app.$route.fullPath !== pageAim) router.push(pageAim)
// 持久化
await dispatch('opened2db')
// end
resolve()
})
},
/**
* @class opened
* @description 关闭所有 tag
* @param {Object} context
*/
closeAll ({ state, commit, dispatch }) {
return new Promise(async resolve => {
async closeAll ({ state, commit, dispatch }) {
// 删除打开的页面 并在缓存设置中删除
state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name))
// 持久化
await dispatch('opened2db')
// 关闭所有的标签页后需要判断一次现在是不是在首页
if (router.app.$route.name !== 'index') {
router.push({
name: 'index'
})
router.push({ name: 'index' })
}
// end
resolve()
})
}
},
mutations: {
@@ -376,9 +316,8 @@ export default {
* @param {String} name name
*/
keepAliveRemove (state, name) {
const list = [ ...state.keepAlive ]
const list = cloneDeep(state.keepAlive)
const index = list.findIndex(item => item === name)
if (index !== -1) {
list.splice(index, 1)
state.keepAlive = list
@@ -390,9 +329,9 @@ export default {
* @param {String} name name
*/
keepAlivePush (state, name) {
const keep = [ ...state.keepAlive ]
const keep = cloneDeep(state.keepAlive)
keep.push(name)
state.keepAlive = keep
state.keepAlive = uniq(keep)
},
/**
* @description 清空页面缓存设置