From a5d84bbfffa207a7887cc83dc89a0c333d7f5631 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=87=AA=E5=B8=A6=E5=A4=A7=E4=BD=AC=E6=B0=94=E5=9C=BA?= <188633308@qq.com> Date: Thu, 6 May 2021 09:29:07 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E9=87=8D=E5=81=9A=E8=8F=9C=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Web/package.json | 1 + Web/src/assets/style/frame/dark.less | 5 +- Web/src/assets/style/frame/light.less | 5 +- Web/src/assets/style/lib/container.less | 2 +- Web/src/assets/style/main.less | 85 +++++++---- Web/src/common/login/index.js | 3 +- Web/src/common/storage/index.js | 2 - Web/src/components/yoTable/index.js | 2 +- Web/src/pages/home/index.less | 6 +- Web/src/pages/home/index.vue | 10 +- Web/src/pages/system/app/form.vue | 23 +++ Web/src/views/main/_layout/header/index.vue | 34 ++++- Web/src/views/main/_layout/header/search.js | 6 +- Web/src/views/main/_layout/nav/index.js | 78 ++++++++++ Web/src/views/main/_layout/sider/app.vue | 46 ------ .../views/main/_layout/sider/index copy.vue | 138 ------------------ Web/src/views/main/_layout/sider/index.vue | 11 -- Web/src/views/main/_layout/sider/menu.js | 18 ++- Web/src/views/main/index.vue | 60 +++----- Web/yarn.lock | 27 +++- 20 files changed, 265 insertions(+), 297 deletions(-) create mode 100644 Web/src/views/main/_layout/nav/index.js delete mode 100644 Web/src/views/main/_layout/sider/app.vue delete mode 100644 Web/src/views/main/_layout/sider/index copy.vue diff --git a/Web/package.json b/Web/package.json index c51e772..d9b6637 100644 --- a/Web/package.json +++ b/Web/package.json @@ -21,6 +21,7 @@ "swiper": "^6.5.0", "vue": "^2.6.11", "vue-awesome-swiper": "^4.1.1", + "vue-color": "^2.8.1", "vue-highlight.js": "^3.1.0", "vue-router": "^3.5.1" }, diff --git a/Web/src/assets/style/frame/dark.less b/Web/src/assets/style/frame/dark.less index 988c16a..edb8dc2 100644 --- a/Web/src/assets/style/frame/dark.less +++ b/Web/src/assets/style/frame/dark.less @@ -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%); diff --git a/Web/src/assets/style/frame/light.less b/Web/src/assets/style/frame/light.less index f3232bf..57a78ce 100644 --- a/Web/src/assets/style/frame/light.less +++ b/Web/src/assets/style/frame/light.less @@ -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%); diff --git a/Web/src/assets/style/lib/container.less b/Web/src/assets/style/lib/container.less index fdf7179..95a5ebb 100644 --- a/Web/src/assets/style/lib/container.less +++ b/Web/src/assets/style/lib/container.less @@ -1,5 +1,5 @@ @import (reference) '~@/assets/style/extend.less'; -@container-width: 1200px; +@container-width: 1400px; .container { width: @container-width; margin: 0 auto; diff --git a/Web/src/assets/style/main.less b/Web/src/assets/style/main.less index 2a039d3..3992476 100644 --- a/Web/src/assets/style/main.less +++ b/Web/src/assets/style/main.less @@ -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; - } - } - } } } } diff --git a/Web/src/common/login/index.js b/Web/src/common/login/index.js index 1ba96ca..93f80bf 100644 --- a/Web/src/common/login/index.js +++ b/Web/src/common/login/index.js @@ -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 { diff --git a/Web/src/common/storage/index.js b/Web/src/common/storage/index.js index 8f2cc8a..0be05e6 100644 --- a/Web/src/common/storage/index.js +++ b/Web/src/common/storage/index.js @@ -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 } \ No newline at end of file diff --git a/Web/src/components/yoTable/index.js b/Web/src/components/yoTable/index.js index b806b40..0348be2 100644 --- a/Web/src/components/yoTable/index.js +++ b/Web/src/components/yoTable/index.js @@ -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' } } diff --git a/Web/src/pages/home/index.less b/Web/src/pages/home/index.less index e3168fc..8f87df1 100644 --- a/Web/src/pages/home/index.less +++ b/Web/src/pages/home/index.less @@ -10,8 +10,10 @@ } .home-header-content { margin-left: @padding-lg; - span { - color: @primary-color; + h4 { + span { + color: @primary-color; + } } p { margin: 0; diff --git a/Web/src/pages/home/index.vue b/Web/src/pages/home/index.vue index 9469a28..3b4f46f 100644 --- a/Web/src/pages/home/index.vue +++ b/Web/src/pages/home/index.vue @@ -9,11 +9,15 @@
-

+

{{ $moment().format('A') }}好， {{ $root.global.info.nickName || $root.global.info.name }}，欢迎您登录系统！ -

-

上次IP：{{ $root.global.info.lastLoginIp }} 上次登录时间：{{ $root.global.info.lastLoginTime }}

+ +

+ 上次IP：{{ $root.global.info.lastLoginIp }} + + 上次登录时间：{{ $root.global.info.lastLoginTime }} +

diff --git a/Web/src/pages/system/app/form.vue b/Web/src/pages/system/app/form.vue index 95bdcbc..52d2220 100644 --- a/Web/src/pages/system/app/form.vue +++ b/Web/src/pages/system/app/form.vue @@ -7,6 +7,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/Web/src/views/main/_layout/header/index.vue b/Web/src/views/main/_layout/header/index.vue index 79aae2f..50f3fa5 100644 --- a/Web/src/views/main/_layout/header/index.vue +++ b/Web/src/views/main/_layout/header/index.vue @@ -10,7 +10,7 @@ > - +
@@ -29,9 +29,11 @@
+ + + - - +
@@ -47,12 +49,26 @@
+ +
+
+ \ No newline at end of file diff --git a/Web/src/views/main/_layout/header/search.js b/Web/src/views/main/_layout/header/search.js index 1e8fb2f..cae9bd6 100644 --- a/Web/src/views/main/_layout/header/search.js +++ b/Web/src/views/main/_layout/header/search.js @@ -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) { diff --git a/Web/src/views/main/_layout/nav/index.js b/Web/src/views/main/_layout/nav/index.js new file mode 100644 index 0000000..cdea4d7 --- /dev/null +++ b/Web/src/views/main/_layout/nav/index.js @@ -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 ( + + {this.nav.content.map((item, i) => { + return ( +
+
{item.app.name}
+
+ { + item.menu.map(sub => { + return ( +
+
+ { + sub.children ? +
+ { + sub.meta.icon && + } + {sub.meta.title} +
+ : +
this.onOpenContentWindow(sub)}> + { + sub.meta.icon && + } + {sub.meta.title} +
+ } + { + sub.children && sub.children.map(menu => { + return
this.onOpenContentWindow(menu)}> + { + menu.meta.icon && + } + {menu.meta.title} +
+ }) + } +
+
+ ) + }) + } +
+
+ ) + })} + + ) + } +} \ No newline at end of file diff --git a/Web/src/views/main/_layout/sider/app.vue b/Web/src/views/main/_layout/sider/app.vue deleted file mode 100644 index f97d621..0000000 --- a/Web/src/views/main/_layout/sider/app.vue +++ /dev/null @@ -1,46 +0,0 @@ - - \ No newline at end of file diff --git a/Web/src/views/main/_layout/sider/index copy.vue b/Web/src/views/main/_layout/sider/index copy.vue deleted file mode 100644 index 004b462..0000000 --- a/Web/src/views/main/_layout/sider/index copy.vue +++ /dev/null @@ -1,138 +0,0 @@ - - \ No newline at end of file diff --git a/Web/src/views/main/_layout/sider/index.vue b/Web/src/views/main/_layout/sider/index.vue index 0acaa6c..190312e 100644 --- a/Web/src/views/main/_layout/sider/index.vue +++ b/Web/src/views/main/_layout/sider/index.vue @@ -8,7 +8,6 @@ >
-
@@ -27,19 +26,10 @@
-