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

no message

Browse Source 
Former-commit-id: 13cddc6e80583fea2d48d618c9ff9de4d8e7dfea
This commit is contained in:
liyang
2018-09-04 15:14:19 +08:00
parent 32f527ca93
commit 336164da41
44 changed files with 4060 additions and 3320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/header-aside/components/components/menu-item/index.vue
+3 -2
View File
@@ -1,9 +1,10 @@
<template>
<el-menu-item :index="menu.path || uniqueId">
<i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
<i v-else-if="menu.iconSvg">
<!-- <i v-else-if="menu.iconSvg">
<d2-icon-svg :name="menu.iconSvg"/>
</i>
</i> -->
<d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
<i v-else class="fa fa-file-o"></i>
<span slot="title">{{menu.title || '未命名菜单'}}</span>
</el-menu-item>
src/layout/header-aside/components/components/menu-sub/index.vue
+3 -2
View File
@@ -2,9 +2,10 @@
<el-submenu :index="menu.path || uniqueId">
<template slot="title">
<i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
<i v-else-if="menu.iconSvg">
<!-- <i v-else-if="menu.iconSvg">
<d2-icon-svg :name="menu.iconSvg"/>
</i>
</i> -->
<d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
<i v-else class="fa fa-folder-o"></i>
<span slot="title">{{menu.title}}</span>
</template>
src/layout/header-aside/components/header-search/index.vue
+15
View File
@@ -0,0 +1,15 @@
<template>
<el-button class="d2-mr btn-text can-hover" type="text" @click="handleClick">
<d2-icon name="search" style="font-size: 18px;"/>
</el-button>
</template>
<script>
export default {
methods: {
handleClick () {
this.$emit('click')
}
}
}
</script>
src/layout/header-aside/components/menu-header/index.vue
+14 -1
View File
@@ -1,5 +1,5 @@
<template>
<el-menu mode="horizontal" @select="handleMenuSelect">
<el-menu mode="horizontal" :default-active="active" @select="handleMenuSelect">
<template v-for="(menu, menuIndex) in header">
<d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
<d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
@@ -25,6 +25,19 @@ export default {
...mapState('d2admin/menu', [
'header'
])
},
data () {
return {
active: ''
}
},
watch: {
'$route.matched': {
handler (val) {
this.active = val[val.length - 1].path
},
immediate: true
}
}
}
</script>
src/layout/header-aside/components/mixin/menu.js
+1 -1
View File
@@ -3,7 +3,7 @@ import util from '@/libs/util.js'
export default {
methods: {
handleMenuSelect (index, indexPath) {
if (/^d2-menu-empty-\d+$/.test(index)) {
if (/^d2-menu-empty-\d+$/.test(index) || index === undefined) {
this.$message.warning('临时菜单')
} else if (/^https:\/\/|http:\/\//.test(index)) {
util.open(index)
src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
+105
View File
@@ -0,0 +1,105 @@
<template>
<div class="d2-panel-search-item" :class="hoverMode ? 'can-hover' : ''" flex>
<div class="d2-panel-search-item__icon" flex-box="0">
<div class="d2-panel-search-item__icon-box" flex="main:center cross:center">
<d2-icon v-if="item.icon" :name="item.icon"/>
<d2-icon-svg v-else-if="item.iconSvg" :name="item.iconSvg"/>
<d2-icon v-else name="file-o"/>
</div>
</div>
<div class="d2-panel-search-item__info" flex-box="1" flex="dir:top">
<div class="d2-panel-search-item__info-title" flex-box="1" flex="cross:center">
<span>{{item.title}}</span>
</div>
<div class="d2-panel-search-item__info-fullTitle" flex-box="0">
<span>{{item.fullTitle}}</span>
</div>
<div class="d2-panel-search-item__info-path" flex-box="0">
<span>{{item.path}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
item: {
default: () => ({})
},
hoverMode: {
default: false
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.d2-panel-search-item {
height: 64px;
margin: 0px -20px;
&.can-hover {
@extend %unable-select;
margin: 0px;
&:hover {
background-color: #F5F7FA;
.d2-panel-search-item__icon {
.d2-panel-search-item__icon-box {
i {
font-size: 24px;
color: $color-primary;
}
}
}
.d2-panel-search-item__info {
.d2-panel-search-item__info-title {
color: $color-text-main;
}
.d2-panel-search-item__info-fullTitle {
color: $color-text-normal;
}
.d2-panel-search-item__info-path {
color: $color-text-normal;
}
}
}
}
.d2-panel-search-item__icon {
width: 64px;
.d2-panel-search-item__icon-box {
height: 64px;
width: 64px;
border-right: 1px solid $color-border-3;
i {
font-size: 20px;
color: $color-text-sub;
}
svg {
height: 20px;
width: 20px;
}
}
}
.d2-panel-search-item__info {
margin-left: 10px;
.d2-panel-search-item__info-title {
font-size: 16px;
line-height: 16px;
font-weight: bold;
color: $color-text-normal;
}
.d2-panel-search-item__info-fullTitle {
font-size: 10px;
line-height: 14px;
color: $color-text-placehoder;
}
.d2-panel-search-item__info-path {
margin-bottom: 4px;
font-size: 10px;
line-height: 14px;
color: $color-text-placehoder;
}
}
}
</style>
src/layout/header-aside/components/panel-search/index.vue
+207
View File
@@ -0,0 +1,207 @@
<template>
<div class="panel-search" flex="dir:top">
<div class="panel-search__input-group" flex-box="0" flex="dir:top main:center cross:center">
<d2-icon-svg
class="panel-search__logo"
name="d2-admin-text"/>
<el-autocomplete
class="panel-search__input"
ref="input"
v-model="searchText"
suffix-icon="el-icon-search"
placeholder="搜索页面"
:fetch-suggestions="querySearch"
:trigger-on-focus="false"
:clearable="true"
@keydown.esc.native="handleEsc"
@select="handleSelect">
<d2-panel-search-item slot-scope="{ item }" :item="item"/>
</el-autocomplete>
<div class="panel-search__tip">
您可以使用快捷键
<span class="panel-search__key">{{hotkey.open}}</span>
唤醒搜索面板，按
<span class="panel-search__key">{{hotkey.close}}</span>
关闭
</div>
</div>
<div
v-if="resultsList.length > 0"
class="panel-search__results-group"
flex-box="1">
<el-card>
<div class="panel-search__results-group-inner">
<d2-panel-search-item
v-for="(item, index) in resultsList"
:key="index"
:item="item"
:hover-mode="true"
@click.native="handleResultsGroupItemClick(item.path)"/>
</div>
</el-card>
</div>
</div>
</template>
<script>
import Fuse from 'fuse.js'
import { mapState } from 'vuex'
import mixin from '../mixin/menu'
export default {
mixins: [
mixin
],
components: {
'd2-panel-search-item': () => import('./components/panel-search-item/index.vue')
},
data () {
return {
searchText: '',
results: []
}
},
computed: {
...mapState('d2admin/search', [
'hotkey',
'pool'
]),
// 这份数据是展示在搜索面板下面的
resultsList () {
return (this.results.length === 0 && this.searchText === '') ? this.pool.map(e => ({
value: e.fullTitle,
...e
})) : this.results
}
},
methods: {
/**
* @description 过滤选项 这个方法在每次输入框的值发生变化时会触发
*/
querySearch (queryString, callback) {
var pool = this.pool
const results = this.query(queryString ? pool : [], queryString)
this.results = results
callback(results)
},
/**
* @description 指定的数据源中根据指定的查询字符串过滤数据
* @param {Object} pool 需要过滤的数据
* @param {String} queryString 查询字符串
*/
query (pool, queryString) {
return new Fuse(pool, {
shouldSort: true,
tokenize: true,
threshold: 0.6,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [
'fullTitle',
'path'
]
})
.search(queryString)
.map(e => ({
value: e.fullTitle,
...e
}))
},
/**
* @description 聚焦输入框
*/
focus () {
this.input = ''
setTimeout(() => {
this.$refs.input.focus()
// 还原
this.searchText = ''
this.results = []
}, 500)
},
/**
* @description 接收用户在列表中选择项目的事件
*/
handleResultsGroupItemClick (path) {
// 如果用户选择的就是当前页面 就直接关闭搜索面板
if (path === this.$route.path) {
this.handleEsc()
return
}
// 用户选择的是其它页面
this.handleMenuSelect(path)
},
/**
* @description 接收用户在下拉菜单中选中事件
*/
handleSelect ({ path }) {
// 如果用户选择的就是当前页面 就直接关闭搜索面板
if (path === this.$route.path) {
this.handleEsc()
return
}
// 用户选择的是其它页面
this.$nextTick(() => {
this.handleMenuSelect(path)
})
},
/**
* @augments 关闭输入框的下拉菜单
*/
closeSuggestion () {
if (this.$refs.input.activated) {
this.$refs.input.suggestions = []
this.$refs.input.activated = false
}
},
/**
* @augments 接收用户触发的关闭
*/
handleEsc () {
this.closeSuggestion()
this.$nextTick(() => {
this.$emit('close')
})
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.panel-search {
margin: 20px;
.panel-search__input-group {
height: 240px;
.panel-search__logo {
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.panel-search__input {
width: 500px;
}
.panel-search__tip {
@extend %unable-select;
margin-top: 20px;
margin-bottom: 40px;
font-size: 12px;
color: $color-text-sub;
.panel-search__key {
padding: 1px 5px;
margin: 0px 2px;
border-radius: 2px;
background-color: $color-text-normal;
color: $color-bg;
}
}
}
.panel-search__results-group {
overflow: auto;
.panel-search__results-group-inner {
margin: -20px;
}
}
}
</style>
src/layout/header-aside/layout.vue
+46 -17
View File
@@ -8,7 +8,12 @@
<!-- 主体内容 -->
<div class="d2-layout-header-aside-content" flex="dir:top">
<!-- 顶栏 -->
<div class="d2-theme-header" flex-box="0">
<div
class="d2-theme-header"
:style="{
opacity: this.searchActive ? 0.3 : 1
}"
flex-box="0">
<div class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}">
<img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
<img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
@@ -20,6 +25,7 @@
<!-- 顶栏右侧 -->
<div class="d2-header-right">
<!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
<d2-header-search @click="handleSearchClick"/>
<d2-header-error-log/>
<d2-header-fullscreen/>
<d2-header-theme/>
@@ -33,21 +39,39 @@
flex-box="0"
ref="aside"
class="d2-theme-container-aside"
:style="{width: asideCollapse ? asideWidthCollapse : asideWidth}">
:style="{
width: asideCollapse ? asideWidthCollapse : asideWidth,
opacity: this.searchActive ? 0.3 : 1
}">
<d2-menu-side/>
</div>
<!-- 主体 -->
<div class="d2-theme-container-main" flex-box="1" flex="dir:top">
<div class="d2-theme-container-main-header" flex-box="0">
<d2-tabs/>
</div>
<div class="d2-theme-container-main-body" flex-box="1">
<transition :name="transitionActive ? 'fade-transverse' : ''">
<keep-alive :include="keepAlive">
<router-view/>
</keep-alive>
</transition>
</div>
<div class="d2-theme-container-main" flex-box="1" flex>
<!-- 搜索 -->
<transition name="fade-scale">
<div v-show="searchActive" class="d2-theme-container-main-layer" flex="dir:top">
<d2-panel-search
ref="panelSearch"
@close="searchPanelClose"/>
</div>
</transition>
<!-- 内容 -->
<transition name="fade-scale">
<div v-show="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
<!-- tab -->
<div class="d2-theme-container-main-header" flex-box="0">
<d2-tabs/>
</div>
<!-- 页面 -->
<div class="d2-theme-container-main-body" flex-box="1">
<transition :name="transitionActive ? 'fade-transverse' : ''">
<keep-alive :include="keepAlive">
<router-view/>
</keep-alive>
</transition>
</div>
</div>
</transition>
</div>
</div>
</div>
@@ -56,13 +80,18 @@
<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
import mixinSearch from './mixins/search'
export default {
name: 'd2-layout-header-aside',
mixins: [
mixinSearch
],
components: {
'd2-menu-side': () => import('./components/menu-side'),
'd2-menu-header': () => import('./components/menu-header'),
'd2-tabs': () => import('./components/tabs'),
'd2-header-fullscreen': () => import('./components/header-fullscreen'),
'd2-header-search': () => import('./components/header-search'),
'd2-header-theme': () => import('./components/header-theme'),
'd2-header-user': () => import('./components/header-user'),
'd2-header-error-log': () => import('./components/header-error-log')
@@ -97,14 +126,14 @@ export default {
}
},
methods: {
...mapMutations('d2admin/menu', [
'asideCollapseToggle'
]),
...mapMutations({
menuAsideCollapseToggle: 'd2admin/menu/asideCollapseToggle'
}),
/**
* 接收点击切换侧边栏的按钮
*/
handleToggleAside () {
this.asideCollapseToggle()
this.menuAsideCollapseToggle()
}
}
}
src/layout/header-aside/mixins/search.js
+58
View File
@@ -0,0 +1,58 @@
import { mapState, mapMutations } from 'vuex'
import hotkeys from 'hotkeys-js'
export default {
components: {
'd2-panel-search': () => import('../components/panel-search')
},
mounted () {
// 绑定搜索功能快捷键 [ 打开 ]
hotkeys(this.searchHotkey.open, event => {
event.preventDefault()
this.searchPanelOpen()
})
// 绑定搜索功能快捷键 [ 关闭 ]
hotkeys(this.searchHotkey.close, event => {
event.preventDefault()
this.searchPanelClose()
})
},
beforeDestroy () {
hotkeys.unbind(this.searchHotkey.open)
hotkeys.unbind(this.searchHotkey.close)
},
computed: {
...mapState('d2admin', {
searchActive: state => state.search.active,
searchHotkey: state => state.search.hotkey
})
},
methods: {
...mapMutations({
searchToggle: 'd2admin/search/toggle',
searchSet: 'd2admin/search/set'
}),
/**
* 接收点击搜索按钮
*/
handleSearchClick () {
this.searchToggle()
if (this.searchActive) {
this.$refs.panelSearch.focus()
}
},
searchPanelOpen () {
if (!this.searchActive) {
this.searchSet(true)
this.$refs.panelSearch.focus()
}
},
// 关闭搜索面板
searchPanelClose () {
if (this.searchActive) {
this.searchSet(false)
}
}
}
}