diff --git a/vue/src/asset/style/variables.scss b/vue/src/asset/style/variables.scss index 3badceb..3d555c9 100644 --- a/vue/src/asset/style/variables.scss +++ b/vue/src/asset/style/variables.scss @@ -47,11 +47,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts'; } } -//亮色边框的颜色,使用的element-ui原定义 -$border-color-light: #dcdfe6; -//暗色边框的颜色 -$border-color-dark: #101117; - //菜单中icon的大小 $menu-icon-size: 14px; //菜单中icon和文字的距离 @@ -59,19 +54,19 @@ $menu-icon-text-gap: 10px; //菜单的padding $menu-padding: $menu-icon-size + $menu-icon-text-gap; //暗色菜单的背景色 -$menu-dark-background: #304156; +$menu-background-dark: #304156; //暗色子级菜单的背景色 -$sub-menu-dark-background: darken($menu-dark-background, 5%); +$sub-menu-background-dark: darken($menu-background-dark, 5%); //暗色主菜单的背景色(用于双层侧边栏的主菜单和顶部导航栏) -$root-menu-dark-background: #001529; +$root-menu-background-dark: #1F293D; //亮色菜单的文字颜色 -$menu-text-light-color: #303133; -//亮色菜单的文字hover颜色 -$menu-text-hover-light-color: $--color-primary; +$menu-text-color-light: #303133; //暗色菜单的文字颜色 -$menu-text-dark-color: rgba(255, 255, 255, .65); +$menu-text-color-dark: rgba(255, 255, 255, .65); +//亮色菜单的文字hover颜色 +$menu-text-hover-color-light: $--color-primary; //暗色菜单的文字hover颜色 -$menu-text-dark-hover-color: rgba(255, 255, 255, 1); +$menu-text-hover-color-dark: rgba(255, 255, 255, 1); //侧边栏宽度 $aside-width: 208px; @@ -83,13 +78,13 @@ $nav-height: 48px; //导航栏的padding-left $navbar-padding-left: 12px; //亮色导航栏的功能项颜色 -$navbar-item-light-color: $menu-text-light-color; +$navbar-item-color-light: $menu-text-color-light; //暗色导航栏的功能项颜色 -$navbar-item-dark-color: rgba(255, 255, 255, .85); +$navbar-item-color-dark: rgba(255, 255, 255, .85); //亮色导航栏的功能项hover背景颜色 -$navbar-item-hover-light-color: rgba(255, 255, 255, .85); +$navbar-item-hover-color-light: rgba(255, 255, 255, .85); //暗色导航栏的功能项hover背景颜色 -$navbar-item-hover-dark-color: lighten($root-menu-dark-background, 5%); +$navbar-item-hover-color-dark: lighten($root-menu-background-dark, 5%); //多页签栏高度 $tags-view-height: 32px; @@ -101,6 +96,11 @@ $page-header-padding: 12px; //路由页面的margin $page-view-margin: 24px; +//亮色边框的颜色,使用的element-ui原定义 +$border-color-light: #dcdfe6; +//暗色边框的颜色 +$border-color-dark: darken($root-menu-background-dark, 5%); + //dialog距离顶部的距离,用于的top属性、中滚动区域的最大高度 $dialog-top: 100px; diff --git a/vue/src/component/RegionSelector/Tab/index.vue b/vue/src/component/RegionSelector/Tab/index.vue index 0c3920e..2eb21a8 100644 --- a/vue/src/component/RegionSelector/Tab/index.vue +++ b/vue/src/component/RegionSelector/Tab/index.vue @@ -154,7 +154,14 @@ export default { if (!this.searchText) return this.items = parent.children - const predicate = item => item.id.startsWith(this.searchText) || item.name.startsWith(this.searchText) + //以0-9开头的的搜索词都根据id去查 + const firstCharCode = this.searchText.charCodeAt(0) + const useId = 48 <= firstCharCode && firstCharCode <= 57 + const predicate = ( + () => useId + ? item => item.id.startsWith(this.searchText) + : item => item.name.startsWith(this.searchText) + )() this.items = parent.children.filter(predicate) }, @@ -176,6 +183,7 @@ export default { prev.push(item) const next = deepClone(DEFAULT_TABS) + //选择省份时 if (level === 1) { //选择直辖市的时候,最大深度-1,移除'市'tab if (PROVINCE_CITIES.some(i => i.id === item.id)) { diff --git a/vue/src/component/menu/ContextMenu/index.vue b/vue/src/component/menu/ContextMenu/index.vue index 3bf2428..59e75b3 100644 --- a/vue/src/component/menu/ContextMenu/index.vue +++ b/vue/src/component/menu/ContextMenu/index.vue @@ -90,7 +90,7 @@ export default { .context-menu { margin: 0; - background: $menu-dark-background; + background: $menu-background-dark; z-index: 10; position: fixed; list-style-type: none; diff --git a/vue/src/component/menu/NavMenu/theme-dark.scss b/vue/src/component/menu/NavMenu/theme-dark.scss index 8a68da8..ccddbc3 100644 --- a/vue/src/component/menu/NavMenu/theme-dark.scss +++ b/vue/src/component/menu/NavMenu/theme-dark.scss @@ -3,31 +3,31 @@ &.el-menu--vertical { &.el-menu, .el-menu { - background-color: $menu-dark-background; + background-color: $menu-background-dark; //菜单的文字以及hover颜色 .el-menu-item, .el-submenu__title { - color: $menu-text-dark-color; + color: $menu-text-color-dark; &:hover { - color: $menu-text-dark-hover-color; + color: $menu-text-hover-color-dark; } } //子级菜单的背景颜色 &.el-menu--inline { - background-color: $sub-menu-dark-background; + background-color: $sub-menu-background-dark; } //子级菜单内阴影 &.el-menu--inline { - box-shadow: inset 0 2px 8px darken($sub-menu-dark-background, 10%) + box-shadow: inset 0 2px 8px darken($sub-menu-background-dark, 10%) } //设置了显示弹出菜单的父级 &.el-menu--popup .popover-menu__title { - color: $menu-text-dark-hover-color; + color: $menu-text-hover-color-dark; border-bottom-color: $border-color-dark; } } @@ -37,15 +37,15 @@ &.el-menu--horizontal { &.el-menu, .el-menu { - background-color: $root-menu-dark-background; + background-color: $root-menu-background-dark; //菜单的文字以及hover颜色 .el-menu-item, .el-submenu__title { - color: $menu-text-dark-color; + color: $menu-text-color-dark; &:hover { - color: $menu-text-dark-hover-color; + color: $menu-text-hover-color-dark; } } } diff --git a/vue/src/component/menu/NavMenu/theme-light.scss b/vue/src/component/menu/NavMenu/theme-light.scss index 38a1f8b..8f2c4ea 100644 --- a/vue/src/component/menu/NavMenu/theme-light.scss +++ b/vue/src/component/menu/NavMenu/theme-light.scss @@ -6,16 +6,16 @@ //菜单的文字以及hover颜色 .el-menu-item, .el-submenu__title { - color: $menu-text-light-color; + color: $menu-text-color-light; &:hover { - color: $menu-text-hover-light-color; + color: $menu-text-hover-color-light; } } //弹出菜单的父级 &.el-menu--popup .popover-menu__title { - color: $menu-text-hover-light-color; + color: $menu-text-hover-color-light; border-bottom-color: $border-color-light; } } @@ -28,10 +28,10 @@ //菜单的文字以及hover颜色 .el-menu-item, .el-submenu__title { - color: $menu-text-light-color; + color: $menu-text-color-light; &:hover { - color: $menu-text-hover-light-color; + color: $menu-text-hover-color-light; } } } diff --git a/vue/src/layout/component/Aside/component/MenuSearch.vue b/vue/src/layout/component/Aside/component/MenuSearch.vue index 27bcb8d..9ee3b4e 100644 --- a/vue/src/layout/component/Aside/component/MenuSearch.vue +++ b/vue/src/layout/component/Aside/component/MenuSearch.vue @@ -51,6 +51,6 @@ export default { .dark .aside-search .el-input__inner { border: none; color: #ffffff; - background-color: lighten($menu-dark-background, 5%); + background-color: lighten($menu-background-dark, 5%); } diff --git a/vue/src/layout/component/Aside/theme-dark.scss b/vue/src/layout/component/Aside/theme-dark.scss index b707d7f..3e9eaae 100644 --- a/vue/src/layout/component/Aside/theme-dark.scss +++ b/vue/src/layout/component/Aside/theme-dark.scss @@ -1,12 +1,12 @@ .aside.dark { &, > .el-drawer__wrapper .el-drawer__body { - background-color: $menu-dark-background; + background-color: $menu-background-dark; } .root-sidebar, .root-sidebar > .el-menu--vertical.el-menu { - background-color: $root-menu-dark-background; + background-color: $root-menu-background-dark; } .root-sidebar { @@ -21,7 +21,7 @@ border-top-color: $border-color-dark; i { - color: $menu-text-dark-color; + color: $menu-text-color-dark; } } } diff --git a/vue/src/layout/component/Aside/theme-light.scss b/vue/src/layout/component/Aside/theme-light.scss index 610b97d..64c2e5c 100644 --- a/vue/src/layout/component/Aside/theme-light.scss +++ b/vue/src/layout/component/Aside/theme-light.scss @@ -8,7 +8,7 @@ border-top-color: $border-color-light; i { - color: $menu-text-light-color; + color: $menu-text-color-light; } } } diff --git a/vue/src/layout/component/Navbar/index.vue b/vue/src/layout/component/Navbar/index.vue index c1a3d40..5132ebd 100644 --- a/vue/src/layout/component/Navbar/index.vue +++ b/vue/src/layout/component/Navbar/index.vue @@ -47,14 +47,17 @@ export default { command(command) { switch (command) { case 'user': - this.$router.push('/user') + const path = '/user' + this.$route.path !== path && this.$router.push(path) break case 'guide': this.$guide(0, this.guideSteps) break case 'logout': - if (this.prepareLogout) return - elConfirm('确认退出?').then(() => this.$store.dispatch('user/logout')) + if (!this.prepareLogout) { + elConfirm('确认退出?') + .then(() => this.$store.dispatch('user/logout')) + } break } }, @@ -103,14 +106,18 @@ export default { - + 个人中心 - + 退出登录 diff --git a/vue/src/layout/component/Navbar/style.scss b/vue/src/layout/component/Navbar/style.scss index c77f8d1..33959a4 100644 --- a/vue/src/layout/component/Navbar/style.scss +++ b/vue/src/layout/component/Navbar/style.scss @@ -37,6 +37,7 @@ .avatar-wrapper { display: flex; align-items: center; + height: 100%; span { margin-right: 5px; diff --git a/vue/src/layout/component/Navbar/theme-dark.scss b/vue/src/layout/component/Navbar/theme-dark.scss index f5e5d7a..a18ebc9 100644 --- a/vue/src/layout/component/Navbar/theme-dark.scss +++ b/vue/src/layout/component/Navbar/theme-dark.scss @@ -1,11 +1,27 @@ .navbar.dark { - background-color: $root-menu-dark-background; + background-color: $root-menu-background-dark; .navbar-item { - color: $navbar-item-dark-color; + color: $navbar-item-color-dark; &:hover { - background: $navbar-item-hover-dark-color; + background: $navbar-item-hover-color-dark; + } + } +} + +//暗色主题的下拉菜单 +.dark.el-dropdown-menu { + background-color: $root-menu-background-dark; + border: none; + + .el-dropdown-menu__item { + color: $menu-text-color-dark; + + &:hover, + &:focus { + background-color: unset; + color: $menu-text-hover-color-dark; } } } diff --git a/vue/src/layout/component/Navbar/theme-light.scss b/vue/src/layout/component/Navbar/theme-light.scss index cb017ab..e3763a6 100644 --- a/vue/src/layout/component/Navbar/theme-light.scss +++ b/vue/src/layout/component/Navbar/theme-light.scss @@ -2,10 +2,10 @@ background-color: #ffffff; .navbar-item { - color: $navbar-item-light-color; + color: $navbar-item-color-light; &:hover { - background: $navbar-item-hover-light-color; + background: $navbar-item-hover-color-light; } } } diff --git a/vue/src/view/userCenter/component/Avatar.vue b/vue/src/view/userCenter/component/Avatar.vue index 938ac05..a461b56 100644 --- a/vue/src/view/userCenter/component/Avatar.vue +++ b/vue/src/view/userCenter/component/Avatar.vue @@ -1,29 +1,26 @@