sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'feature/menu_search' into develop

Browse Source 
Former-commit-id: 1b92128e89b29eda735f274243b152009c9fda1d [formerly 1b92128e89b29eda735f274243b152009c9fda1d [formerly 1b92128e89b29eda735f274243b152009c9fda1d [formerly 1b92128e89b29eda735f274243b152009c9fda1d [formerly 6d0ad889c8a55b39aed1234f33bd4289becb382f [formerly 628b796b47811eac1da0c6ef7a2857a0dc93762a]]]]]
Former-commit-id: b643ffbe716bc602991a675857c899fe4598de6b
Former-commit-id: 89177da3733ab7fd98ff5c038c2c2618353d1521
Former-commit-id: 1d1328895a0adc0e43e207167b48db8a77ea49f9 [formerly 75f6252347dc0048f1ce40a56690da8f0971f95a]
Former-commit-id: 422e9a18552f63ec5390a3f79688bdd733a72047
Former-commit-id: facbc0e703cfb4a43a2af3348cd69f63b7e1f425
Former-commit-id: 27f70579ee35411203e52c565854c81af6060e89
Former-commit-id: 85d532f0d569c2681dc4bd6cf2f39c3078ea30c5
Former-commit-id: 76aa5b8cc5b7097c23ddb18c93817d47591e100b
This commit is contained in:
liyang
2018-08-29 14:22:51 +08:00
parent d6077ab4f1 836dbd452a
commit 6449f7d571
15 changed files with 523 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/style/theme/theme-base.scss.REMOVED.git-id
View File

@@ -1 +1 @@
27d62e35e945646beaa49ba9850fdbce60ed9e66
76c08deda5f3f6bd81e91aeb695cae984eab131e

19
src/assets/svg-icons/icons/d2-admin-text.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

15
src/layout/header-aside/components/header-search/index.vue Normal file
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>

2
src/layout/header-aside/components/mixin/menu.js
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)

105
src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue Normal file
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>

200
src/layout/header-aside/components/panel-search/index.vue Normal file
View File

@@ -0,0 +1,200 @@
<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 { 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 pool.filter(item => {
const path = item.path || ''
const fullTitle = item.fullTitle || ''
return (`${fullTitle}${path}`.toLowerCase().indexOf(queryString.toLowerCase()) >= 0)
}).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>

63
src/layout/header-aside/layout.vue
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()
}
}
}

58
src/layout/header-aside/mixins/search.js Normal file
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)
}
}
}
}

2
src/main.js
View File

@@ -53,6 +53,8 @@ new Vue({
this.$store.commit('d2admin/page/init', frameInRoutes)
// 设置顶栏菜单
this.$store.commit('d2admin/menu/headerSet', menuHeader)
// 初始化菜单搜索功能
this.$store.commit('d2admin/search/init', menuHeader)
},
mounted () {
// 展示系统信息

4
src/router/index.js
View File

@@ -1,6 +1,8 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store/index'
import util from '@/libs/util.js'
// 路由数据
@@ -18,6 +20,8 @@ const router = new VueRouter({
* 权限验证
*/
router.beforeEach((to, from, next) => {
// 关闭搜索面板
store.commit('d2admin/search/set', false)
// 验证当前路由所有的匹配中是否需要有登陆验证的
if (to.matched.some(r => r.meta.requiresAuth)) {
// 这里暂时将cookie里是否存有token作为验证是否登陆的条件

12
src/setting.js
View File

@@ -1,6 +1,14 @@
import { version } from '../package'
const setting = {
// 快捷键
// 支持快捷键 例如 ctrl+shift+s
hotkey: {
search: {
open: 's',
close: 'esc'
}
},
// 侧边栏默认折叠状态
menu: {
asideCollapse: false
@@ -22,6 +30,10 @@ const setting = {
version: version,
api: 'https://api.github.com/repos/FairyEver/d2-admin/releases/latest'
},
// 菜单搜索
search: {
enable: true
},
// 注册的主题
theme: {
list: [

4
src/store/modules/d2admin/index.js
View File

@@ -10,6 +10,7 @@ import ua from './modules/ua'
import gray from './modules/gray'
import page from './modules/page'
import transition from './modules/transition'
import search from './modules/search'
export default {
namespaced: true,
@@ -25,6 +26,7 @@ export default {
ua,
gray,
page,
transition
transition,
search
}
}

55
src/store/modules/d2admin/modules/search.js Normal file
View File

@@ -0,0 +1,55 @@
import setting from '@/setting.js'
export default {
namespaced: true,
state: {
// 搜索面板激活状态
active: true,
// 快捷键
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} menus menus
*/
init (state, menus) {
const pool = []
const push = function (menus, titlePrefix = []) {
menus.forEach(menu => {
if (menu.children) {
push(menu.children, [ ...titlePrefix, menu.title ])
} else {
pool.push({
...menu,
fullTitle: [ ...titlePrefix, menu.title ].join(' / ')
})
}
})
}
push(menus)
state.pool = pool
}
}
}