ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 重做菜单

Browse Source
This commit is contained in:
自带大佬气场
2021-05-06 09:29:07 +08:00
parent 03a88be5ce
commit a5d84bbfff
20 changed files with 265 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Web/src/assets/style/frame/dark.less
View File

@@ -4,12 +4,9 @@
.main(@nav-background: @layout-header-background;
@nav-box-shadow-color: fade(@black, 25%);
@nav-scrollbar-background: fade(@white, 50%);
@nav-app-color: fade(@white, 35%);
@logo-color: @white;
@logo-box-shadow: none;
@app-selector-color: @white;
@app-selector-border-color: fade(@white, 10%);
@app-selector-background-color: fade(@white, 30%);
@app-selector-box-shadow-color: fade(@white, 15%);
@header-action-color: fade(@white, 60%);
@header-action-hover-color: @white;
@header-action-hover-background: fade(@white, 20%);

5
Web/src/assets/style/frame/light.less
View File

@@ -3,12 +3,9 @@
.main(@nav-background: @white;
@nav-box-shadow-color: fade(@black, 5%);
@nav-scrollbar-background: fade(@black, 30%);
@nav-app-color: fade(@black, 35%);
@logo-color: @black;
@logo-box-shadow: inset -1px -1px 1px @border-color-split;
@app-selector-color: @primary-6;
@app-selector-border-color: @primary-3;
@app-selector-background-color: @primary-1;
@app-selector-box-shadow-color: @primary-1;
@header-action-color: fade(@black, 35%);
@header-action-hover-color: @icon-color-hover;
@header-action-hover-background: fade(@black, 5%);

2
Web/src/assets/style/lib/container.less
View File

@@ -1,5 +1,5 @@
@import (reference) '~@/assets/style/extend.less';
@container-width: 1200px;
@container-width: 1400px;
.container {
width: @container-width;
margin: 0 auto;

85
Web/src/assets/style/main.less
View File

@@ -4,12 +4,9 @@
.main(@nav-background: @layout-header-background,
@nav-box-shadow-color: fade(@black, 25%),
@nav-scrollbar-background: fade(@white, 30%),
@nav-app-color: fade(@white, 35%),
@logo-color: @white,
@logo-box-shadow: none,
@app-selector-color: @white,
@app-selector-border-color: fade(@white, 10%),
@app-selector-background-color: fade(@white, 30%),
@app-selector-box-shadow-color: fade(@white, 15%),
@header-action-color: fade(@white, 60%),
@header-action-hover-color: @white,
@header-action-hover-background: fade(@white, 20%),
@@ -251,6 +248,52 @@
border-right: 0;
}
}
.yo-nav {
padding-top: @padding-lg;
padding-bottom: @padding-lg;
&--row {
padding: 1px 0;
column-gap: @padding-md;
column-count: 3;
}
&--col {
break-inside: avoid;
}
&--sub-item {
}
&--item-group {
font-size: @font-size-base;
line-height: 1.5;
margin-bottom: @padding-xs;
padding-top: @padding-xs * 2;
color: fade(@black, 35%);
border: @border-width-base @border-style-base transparent;
}
&--item {
font-size: @font-size-base;
line-height: 1.5;
position: relative;
margin-bottom: @padding-xs;
padding: @padding-xs @padding-sm;
cursor: pointer;
transition: @animation-duration-fast;
border: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-base;
background-color: @white;
&:hover {
color: @white;
border-color: @primary-color;
background-color: @primary-color;
}
}
}
.yo-layout--left-menu,
.yo-layout--right-menu {
position: absolute;
@@ -345,15 +388,21 @@
position: relative;
z-index: 10;
display: flex;
flex: 1 1 100%;
flex-direction: column;
box-shadow: 2px 0 8px @nav-box-shadow-color;
&--app {
font-size: @font-size-sm;
margin-top: @padding-sm;
padding: 0 @padding-md;
color: @nav-app-color;
}
}
.swiper-container {
position: absolute;
top: (@layout-header-height / 2) + (@padding-xxs * 2);
top: 0;
left: 0;
bottom: 0;
@@ -385,28 +434,6 @@
}
}
}
.yo-apps-selector {
>span {
line-height: @layout-header-height / 2 - 2px;
display: block;
height: @layout-header-height / 2;
margin: @padding-xxs @padding-xs;
cursor: pointer;
transition: @animation-duration-slow box-shadow;
text-align: center;
color: @app-selector-color;
border: @border-width-base @border-style-base @app-selector-border-color;
border-radius: @border-radius-base;
background-color: @app-selector-background-color;
&:hover {
box-shadow: 0 0 15px @app-selector-box-shadow-color;
}
}
}
}
}
}

3
Web/src/common/login/index.js
View File

@@ -1,6 +1,6 @@
import { api } from '@/common/api'
import { token } from '@/common/token'
import { GLOBAL_INFO_KEY, ACTIVE_APP_KEY } from '@/common/storage'
import { GLOBAL_INFO_KEY } from '@/common/storage'
import { encryptByDES, decryptByDES } from '@/util/des'
import app from '@/main'
@@ -50,7 +50,6 @@ const doLogout = () => {
if (success) {
removeGlobal()
token.value = ''
window.localStorage.removeItem(ACTIVE_APP_KEY)
if (app.$route.path === '/') {
app.$router.replace('/login')
} else {

2
Web/src/common/storage/index.js
View File

@@ -1,11 +1,9 @@
const SESSION_KEY = '__SESSION'
const SETTING_KEY = '__SETTINGS'
const GLOBAL_INFO_KEY = '__GLOBAL_INFO'
const ACTIVE_APP_KEY = '__ACTIVE_APP'
export {
SESSION_KEY,
SETTING_KEY,
GLOBAL_INFO_KEY,
ACTIVE_APP_KEY
}

2
Web/src/components/yoTable/index.js
View File

@@ -170,7 +170,7 @@ export default {
columns: this.columns.filter(p => !p.hidden),
bordered: true,
size: 'middle',
rowKey: record => record.id,
rowKey: record => record.id || Math.random().toString(16).slice(2),
scroll: { x: 'max-content' }
}

6
Web/src/pages/home/index.less
View File

@@ -10,8 +10,10 @@
}
.home-header-content {
margin-left: @padding-lg;
span {
color: @primary-color;
h4 {
span {
color: @primary-color;
}
}
p {
margin: 0;

10
Web/src/pages/home/index.vue
View File

@@ -9,11 +9,15 @@
<yo-image :id="$root.global.info.avatar" :size="64" icon="user" type="avatar" />
</div>
<div class="home-header-content">
<h2>
<h4>
{{ $moment().format('A') }}好，
<span>{{ $root.global.info.nickName || $root.global.info.name }}</span>，欢迎您登录系统！
</h2>
<p>上次IP：{{ $root.global.info.lastLoginIp }} 上次登录时间：{{ $root.global.info.lastLoginTime }}</p>
</h4>
<p>
<span>上次IP：{{ $root.global.info.lastLoginIp }}</span>
<a-divider type="vertical" />
<span>上次登录时间：{{ $root.global.info.lastLoginTime }}</span>
</p>
</div>
</div>
</a-col>

23
Web/src/pages/system/app/form.vue
View File

@@ -7,6 +7,15 @@
<a-form-model-item label="唯一编码" prop="code">
<a-input placeholder="请输入唯一编码" v-model="form.code" />
</a-form-model-item>
<a-form-model-item label="图标" prop="icon">
<a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
<a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
<a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
</a-input>
</a-form-model-item>
<a-form-model-item prop="color">
<chrome-picker v-model="form.color" />
</a-form-model-item>
<a-form-model-item label="排序" prop="sort">
<a-input-number
:max="1000"
@@ -17,13 +26,23 @@
/>
</a-form-model-item>
</div>
<yo-icon-selector ref="icon-selector" v-model="form.icon" />
</a-form-model>
</template>
<script>
import YoIconSelector from '@/components/yoIconSelector';
import { Chrome } from 'vue-color';
export default {
components: {
YoIconSelector,
ChromePicker: Chrome,
},
data() {
return {
form: {
color: '#fff',
active: false,
},
rules: {
@@ -58,6 +77,10 @@ export default {
this.$refs.form.resetFields();
}, 300);
},
onOpenSelectIcon() {
this.$refs['icon-selector'].onOpen(this.form.icon);
},
},
};
</script>

34
Web/src/views/main/_layout/header/index.vue
View File

@@ -10,7 +10,7 @@
>
<a-icon :type="$root.global.settings.siderCollapsed ? 'menu-unfold' : 'menu-fold'" />
</a>
<search :menus="nav.menus" />
<search :menus="nav.content" />
</div>
<div class="header-actions">
<User />
@@ -29,9 +29,11 @@
</section>
<container v-else-if="$root.global.settings.layout === 'top-nav'">
<div class="header-actions">
<a @click="showNav = !showNav" class="header-action mr-md">
<a-icon type="menu" />
</a>
<Logo />
<Sider :nav="nav" @open="(nav) => $emit('open', nav)" />
<search :menus="nav.menus" />
<search :menus="nav.content" />
</div>
<div class="header-actions">
<User />
@@ -47,12 +49,26 @@
<a-icon type="setting" />
</a>
</div>
<a-drawer
:body-style="{ padding: 0 }"
:closable="false"
:get-container="'.ant-layout-content > .ant-tabs'"
:visible="showNav"
:wrap-style="{ position: 'absolute' }"
@close="showNav = false"
placement="left"
width="38.2%"
>
<div @blur="showNav = false" @mouseleave="showNav = false">
<Nav :nav="nav" @open="showNav = false" />
</div>
</a-drawer>
</container>
</a-layout-header>
</template>
<script>
import Logo from '../logo';
import Sider from '../sider';
import Nav from '../nav';
import User from './user';
import Search from './search';
@@ -60,7 +76,7 @@ import Search from './search';
export default {
components: {
Logo,
Sider,
Nav,
User,
Search,
@@ -69,12 +85,16 @@ export default {
nav: {
default() {
return {
apps: [],
menus: [],
content: [],
};
},
type: Object,
},
},
data() {
return {
showNav: false,
};
},
};
</script>

6
Web/src/views/main/_layout/header/search.js
View File

@@ -46,7 +46,7 @@ export default {
onSearch(value) {
this.searchText = value
const menus = this.$_.cloneDeep(this.menus)
const menus = this.$_.concat.apply(this, this.$_.cloneDeep(this.menus.map(p => p.menu)))
const search = (m) => {
if (!value) return []
@@ -83,12 +83,14 @@ export default {
return result
}
this.searchResult = unzip(search(menus)).map(p => {
const result = unzip(search(menus)).filter(p => p.parents.length).map(p => {
return {
parents: p.parents.join('-'),
children: p.children
}
})
this.searchResult = result
},
onSearchSelect(value, node) {

78
Web/src/views/main/_layout/nav/index.js Normal file
View File

@@ -0,0 +1,78 @@
export default {
props: {
nav: {
type: Object,
default() {
return {
content: []
}
}
}
},
methods: {
onOpenContentWindow(menu) {
this.$emit('open')
setTimeout(() => {
this.openContentWindow({
key: menu.id,
title: menu.meta.title,
icon: menu.meta.icon,
path: menu.component,
})
}, 300)
},
},
render() {
return (
<container mode="container-fluid">
{this.nav.content.map((item, i) => {
return (
<section class="yo-nav">
<h5 class="yo-nav--app">{item.app.name}</h5>
<div class="yo-nav--row">
{
item.menu.map(sub => {
return (
<div class="yo-nav--col">
<div class="yo-nav--sub-item">
{
sub.children ?
<div class="yo-nav--item-group">
{
sub.meta.icon && <a-icon type={sub.meta.icon} class="mr-xs" />
}
{sub.meta.title}
</div>
:
<div class="yo-nav--item" onClick={() => this.onOpenContentWindow(sub)}>
{
sub.meta.icon && <a-icon type={sub.meta.icon} class="mr-xs" />
}
{sub.meta.title}
</div>
}
{
sub.children && sub.children.map(menu => {
return <div class="yo-nav--item" onClick={() => this.onOpenContentWindow(menu)}>
{
menu.meta.icon && <a-icon type={menu.meta.icon} class="mr-xs" />
}
{menu.meta.title}
</div>
})
}
</div>
</div>
)
})
}
</div>
</section>
)
})}
</container>
)
}
}

46
Web/src/views/main/_layout/sider/app.vue
View File

@@ -1,46 +0,0 @@
<template>
<a-popover :placement="placement" trigger="click">
<template slot="content">
<a-button-group>
<a-button :key="app.code" @click="onChangeApp(app)" v-for="app in apps">{{ app.name }}</a-button>
</a-button-group>
</template>
<div class="yo-apps-selector">
<span>{{ appActived.name }}</span>
</div>
</a-popover>
</template>
<script>
export default {
props: {
apps: {
type: Array,
require: true,
},
},
computed: {
placement() {
const layout = this.$root.global.settings.layout;
switch (layout) {
case 'left-menu':
return 'right';
case 'right-menu':
return 'left';
default:
return 'bottom';
}
},
appActived() {
return this.apps.find((p) => p.active) || {};
},
},
methods: {
onChangeApp(app) {
this.$emit('change-app', app);
},
},
};
</script>

138
Web/src/views/main/_layout/sider/index copy.vue
View File

@@ -1,138 +0,0 @@
<template>
<section>
<a-layout-sider
:collapsed="siderCollapsed === undefined ? $root.global.settings.siderCollapsed : siderCollapsed"
@collapse="onCollapse"
v-if="$root.global.settings.layout === 'left-menu' || $root.global.settings.layout === 'right-menu'"
width="200"
>
<Logo />
<div class="yo-sider-nav">
<App :apps="nav.apps" @change-app="(app) => $emit('change-app', app)" />
<!-- <swiper :options="siderSwiperOptions" ref="sider-swiper">
<swiper-slide>
<a-spin :spinning="nav.loading">
<a-icon slot="indicator" spin type="loading" />
<Menu
:menu-style="{ height: '100%', borderRight: 0 }"
:nav="nav"
@openChange="onMenuOpenChange"
mode="inline"
/>
</a-spin>
</swiper-slide>
<div class="swiper-scrollbar" id="layout--swiper-scrollbar" slot="scrollbar"></div>
</swiper>-->
<div class="swiper-container" id="layout--swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a-spin :spinning="nav.loading">
<a-icon slot="indicator" spin type="loading" />
<Menu
:menu-style="{ height: '100%', borderRight: 0 }"
:nav="nav"
@openChange="onMenuOpenChange"
mode="inline"
/>
</a-spin>
</div>
<div class="swiper-scrollbar" id="layout--swiper-scrollbar"></div>
</div>
</div>
</div>
</a-layout-sider>
<template v-else-if="$root.global.settings.layout === 'top-nav'">
<Menu
:menu-style="{ borderBottom: 0 }"
:nav="nav"
@openChange="onMenuOpenChange"
mode="horizontal"
/>
</template>
</section>
</template>
<script>
import Logo from '../logo';
import App from './app';
import Menu from './menu';
import Swiper from 'swiper';
let timer,
swiper,
siderSwiperOptions = {
direction: 'vertical',
slidesPerView: 'auto',
freeMode: true,
scrollbar: {
el: '#layout--swiper-scrollbar',
},
mousewheel: true,
};
export default {
components: {
Logo,
App,
Menu,
},
props: {
nav: {
default() {
return {
apps: [],
menus: [],
loading: false,
};
},
type: Object,
},
},
data() {
return {
siderCollapsed: undefined,
};
},
mounted() {
swiper = new Swiper('#layout--swiper-container', siderSwiperOptions);
window.addEventListener('resize', () => {
if (this.$root.global.settings.layout === 'left-menu' || this.$root.global.settings.layout === 'right-menu') {
if (!this.$root.global.settings.siderCollapsed) {
if (window.innerWidth < 1000) {
this.siderCollapsed = true;
} else {
this.siderCollapsed = undefined;
}
}
this.onUpdateSwiper();
}
});
},
methods: {
onUpdateSwiper() {
clearTimeout(timer);
timer = setTimeout(() => {
// if (this.$refs['sider-swiper']) {
// this.$refs['sider-swiper'].$swiper.update();
// }
swiper.update();
}, 300);
},
onMenuOpenChange() {
this.onUpdateSwiper();
},
onCollapse() {
this.onUpdateSwiper();
},
windowTriggerResize() {
let e = new Event('resize');
window.dispatchEvent(e);
},
},
};
</script>

11
Web/src/views/main/_layout/sider/index.vue
View File

@@ -8,7 +8,6 @@
>
<Logo />
<div class="yo-sider-nav">
<App :apps="nav.apps" @change-app="(app) => $emit('change-app', app)" />
<div class="swiper-container" id="layout--swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
@@ -27,19 +26,10 @@
</div>
</div>
</a-layout-sider>
<template v-else-if="$root.global.settings.layout === 'top-nav'">
<Menu
:menu-style="{ borderBottom: 0 }"
:nav="nav"
@openChange="onMenuOpenChange"
mode="horizontal"
/>
</template>
</section>
</template>
<script>
import Logo from '../logo';
import App from './app';
import Menu from './menu';
import Swiper from 'swiper';
@@ -59,7 +49,6 @@ let timer,
export default {
components: {
Logo,
App,
Menu,
},
props: {

18
Web/src/views/main/_layout/sider/menu.js
View File

@@ -1,10 +1,11 @@
import { HmacMD5 } from "crypto-js"
export default {
props: {
nav: {
default() {
return {
modules: [],
menus: [],
content: []
}
},
type: Object,
@@ -75,6 +76,17 @@ export default {
openChange: this.onMenuOpenChange,
}
return <a-menu {...{ props, on }}>{this.renderMenu(this.nav.menus)}</a-menu>
return (<section>
{
this.nav.content.map(item => {
return (
<section>
<div class="yo-sider-nav--app">{item.app.name}</div>
<a-menu {...{ props, on }}>{this.renderMenu(item.menu)}</a-menu>
</section>
)
})
}
</section>)
},
}

60
Web/src/views/main/index.vue
View File

@@ -6,11 +6,7 @@
[`yo-layout--${$root.global.settings.layout}`]: true,
}"
>
<Sider
:nav="nav"
@change-app="onChangeApp"
v-if="$root.global.settings.layout === 'left-menu'"
/>
<Sider :nav="nav" v-if="$root.global.settings.layout === 'left-menu'" />
<a-layout>
<Header :nav="nav" @reload="onReloadContentWindow" @setting="setting.visible = true" />
<a-layout>
@@ -40,7 +36,6 @@ import Content from './_layout/content';
import Setting from './setting';
import { setGlobal } from '@/common/login';
import { ACTIVE_APP_KEY } from '@/common/storage';
import { EMPTY_ID } from '@/util/global';
@@ -65,8 +60,7 @@ export default {
},
nav: {
loading: false,
apps: [],
menus: [],
content: [],
},
};
},
@@ -77,15 +71,14 @@ export default {
this.nav.loading = true;
this.$api.getLoginUser().then(({ data }) => {
this.$api.getLoginUser().then(async ({ data }) => {
// 去除应用和菜单信息,存储基本信息
const info = this.$_.cloneDeep(data);
delete info.apps;
delete info.menus;
setGlobal(info);
data.apps.map((p) => (p.active = p.active));
this.onSetNav(data);
this.nav.content = await this.onSetNav(data);
this.nav.loading = false;
this.$root.global.defaultWindow.map((options) => {
@@ -206,37 +199,22 @@ export default {
this.$refs.content.onLoadContentWindow(key);
},
onChangeApp(app) {
this.nav.loading = true;
this.$api.sysMenuChange({ application: app.code }).then(({ data }) => {
this.nav.apps.map((p) => (p.active = p.code === app.code));
window.localStorage.removeItem(ACTIVE_APP_KEY);
this.onSetNav({
apps: this.nav.apps,
menus: data,
});
this.nav.loading = false;
});
},
onSetNav(nav) {
// 从本地存储获取当前选中的应用及菜单
this.nav.apps = nav.apps;
const code = window.localStorage.getItem(ACTIVE_APP_KEY);
if (code) {
this.nav.apps.map((p) => (p.active = p.code === code.code));
this.onChangeApp({
code,
const getNav = [];
nav.apps.forEach((app) => {
getNav.push({
app,
});
});
return this.$api
.$queue(getNav.map((p) => this.$api.sysMenuChangeAwait({ application: p.app.code })))
.then((menus) => {
menus.forEach((menu, i) => {
getNav[i].menu = this.serializeMenu(menu.data);
});
return getNav;
});
} else {
// 将默认选中菜单存储
const app = nav.apps.find((p) => p.active);
if (app) {
window.localStorage.setItem(ACTIVE_APP_KEY, app.code);
this.serializeMenu(nav.menus);
}
}
},
serializeMenu(menus) {
@@ -252,7 +230,7 @@ export default {
return m;
};
this.nav.menus = children[EMPTY_ID] ? serialize(children[EMPTY_ID]) : new Array();
return children[EMPTY_ID] ? serialize(children[EMPTY_ID]) : new Array();
},
},
};