导航栏的下拉菜单样式跟随主题

部分样式变量名称修改

代码优化

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;
+$menu-text-color-light: #303133;
-//亮色菜单的文字hover颜色
-$menu-text-hover-light-color: $--color-primary;
 //暗色菜单的文字颜色
-$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距离顶部的距离，用于<el-dialog>的top属性、<el-dialog>中滚动区域的最大高度
 $dialog-top: 100px;
 

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)) {

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;

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;
                 }
             }
         }

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;
                 }
             }
         }

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%);
 }
 </style>

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;
         }
     }
 }

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;
         }
     }
 }

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
+                    if (!this.prepareLogout) {
-                    elConfirm('确认退出?').then(() => this.$store.dispatch('user/logout'))
+                        elConfirm('确认退出?')
+                            .then(() => this.$store.dispatch('user/logout'))
+                    }
                     break
             }
         },
@@ -103,14 +106,18 @@ export default {
                             <el-avatar size={30} src={this.avatar} icon="el-icon-user-solid"/>
                             <span class="hidden-xs">{this.name}</span>
                         </div>
-                        <el-dropdown-menu class="user-dropdown" slot="dropdown">
+                        <el-dropdown-menu
+                            slot="dropdown"
+                            class={navbarGetters.theme}
+                            visible-arrow={false}
+                        >
                             <el-dropdown-item icon="el-icon-user" command="user">
                                 个人中心
                             </el-dropdown-item>
                             <el-dropdown-item class="hidden-xs" icon="el-icon-guide" command="guide">
                                 新手指引
                             </el-dropdown-item>
-                            <el-dropdown-item divided icon="el-icon-switch-button" command="logout">
+                            <el-dropdown-item icon="el-icon-switch-button" command="logout">
                                 退出登录
                             </el-dropdown-item>
                         </el-dropdown-menu>

vue/src/layout/component/Navbar/style.scss

@@ -37,6 +37,7 @@
     .avatar-wrapper {
         display: flex;
         align-items: center;
+        height: 100%;
 
         span {
             margin-right: 5px;

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;
         }
     }
 }

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;
         }
     }
 }

vue/src/view/userCenter/component/Avatar.vue

@@ -1,29 +1,26 @@
 <template>
     <abstract-dialog :loading="loading" title="上传头像" :value="value" width="50%" @close="cancel">
-        <el-row class="avatar-cropper">
+        <div class="avatar-cropper">
-            <div class="img-wrapper">
+            <vue-cropper
-                <vue-cropper
+                ref="cropper"
-                    ref="cropper"
+                :img="img"
-                    :img="img"
+                :info="false"
-                    :info="false"
+                autoCrop
-                    autoCrop
+                autoCropHeight="200px"
-                    autoCropHeight="200px"
+                autoCropWidth="200px"
-                    autoCropWidth="200px"
+                fixedBox
-                    fixedBox
+                full
-                    full
+                outputType="png"
-                    outputType="png"
+                @wheel.native.prevent="scale"
-                    @wheel.native.prevent="scale"
+            />
-                />
-            </div>
 
             <input
                 ref="input"
                 accept="image/png, image/jpeg, image/gif, image/jpg"
-                style="display: none"
                 type="file"
                 @change="chooseImage"
             >
-        </el-row>
+        </div>
 
         <template v-slot:footer>
             <el-button plain size="small" @click="$refs.input.click()">选择图片</el-button>
@@ -61,18 +58,36 @@ export default {
     },
 
     methods: {
+        clear() {
+            this.loading = false
+            this.$refs.cropper.clearCrop()
+            this.img && window.URL.revokeObjectURL(this.img)
+            this.img = ''
+            this.name = ''
+        },
+
+        scale(e) {
+            const eventDelta = e.wheelDelta || -(e.detail || 0) * 40
+            this.$refs.cropper.changeScale(eventDelta / 120)
+        },
+
         chooseImage(e) {
             if (this.loading) return
+
             this.clear()
-            let file = e.target.files[0]
+
+            const file = e.target.files[0]
+
             if (!file.type.includes('image')) {
                 return elError('请上传图片')
             }
+
             if (file.size > 1048576) {
                 return elError('上传的图片不能大于1M')
             }
+
             this.name = file.name
-            let reader = new FileReader()
+            const reader = new FileReader()
             reader.onload = e => {
                 this.img = window.URL.createObjectURL(new Blob([e.target.result]))
             }
@@ -95,19 +110,6 @@ export default {
             })
         },
 
-        clear() {
-            this.loading = false
-            this.$refs.cropper.clearCrop()
-            if (this.img) window.URL.revokeObjectURL(this.img)
-            this.img = ''
-            this.name = ''
-        },
-
-        scale(e) {
-            const eventDelta = e.wheelDelta || -(e.detail || 0) * 40
-            this.$refs.cropper.changeScale(eventDelta / 120)
-        },
-
         cancel() {
             this.closeDialog()
             this.clear()
@@ -118,17 +120,17 @@ export default {
 
 <style lang="scss">
 .avatar-cropper {
+    height: 500px;
+    width: 100%;
+    border: 1px solid #ebebeb;
+
     .cropper-crop-box {
-        border: 1px solid #39f;
         border-radius: 50%;
         overflow: hidden;
     }
 
-    .img-wrapper {
+    > input[type=file] {
-        height: 500px;
+        display: none;
-        width: 100%;
-        display: inline-block;
-        border: 1px solid #ebebeb;
     }
 }
 </style>