增加刷新按钮

导航栏样式修改

vue/src/layout/components/Navbar/components/Bell.vue

@@ -1,6 +1,6 @@
 <template>
-    <el-badge :hidden="hidden" class="bell-badge" is-dot>
+    <el-badge :hidden="hidden" class="bell-badge" is-dot @click.native="jump">
-        <i class="el-icon-bell navbar-icon" title="消息提醒" @click="jump"/>
+        <i class="el-icon-bell navbar-icon" title="消息提醒"/>
     </el-badge>
 </template>
 

vue/src/layout/components/Navbar/components/Breadcrumb.vue

@@ -35,9 +35,9 @@
 <style lang="scss" scoped>
     @import "~@/assets/styles/variables.scss";
 
-    .app-breadcrumb.el-breadcrumb {
+    .app-breadcrumb {
-        display: inline-block;
+        margin-left: 8px;
-        line-height: 50px;
+        line-height: $nav-height;
 
         .no-redirect {
             color: $--color-gray;

vue/src/layout/components/Navbar/components/Hamburger.vue

@@ -4,51 +4,26 @@
 
         functional: true,
 
-        props: {isActive: Boolean},
+        props: {active: Boolean},
 
         render(h, context) {
-            const {isActive} = context.props
+            const {active} = context.props
+            const className = {'navbar-icon': true, 'el-icon-s-unfold': true, 'hamburger': true, 'is-active': active}
             return (
-                <div class="hamburger-container" {...context.data}>
+                <div {...context.data}>
-                    <svg
+                    <i class={className}/>
-                        class={{'hamburger': true, 'is-active': isActive}}
-                        viewBox="0 0 1024 1024"
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="64"
-                        height="64"
-                    >
-                        <path
-                            d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"/>
-                    </svg>
                 </div>
             )
         }
     }
 </script>
 
-<style lang="scss">
+<style>
-    .hamburger-container {
+    .hamburger {
-        padding: 0 15px;
+        font-size: 20px;
-        line-height: 46px;
+    }
-        height: 100%;
-        float: left;
-        cursor: pointer;
-        transition: background .3s;
-        -webkit-tap-highlight-color: transparent;
-
-        &:hover {
-            background: rgba(0, 0, 0, .025)
-        }
-
-        .hamburger {
-            display: inline-block;
-            vertical-align: middle;
-            width: 20px;
-            height: 20px;
 
-            &.is-active {
+    .hamburger.is-active {
-                transform: rotate(180deg);
+        transform: rotate(180deg);
-            }
-        }
     }
 </style>

vue/src/layout/components/Navbar/index.vue

@@ -1,20 +1,24 @@
 <template>
     <nav class="navbar">
-        <hamburger :is-active="!sidebarCollapse" @click="clickHamburger"/>
+        <div>
+            <hamburger class="navbar-item" :active="!sidebarCollapse" @click="sidebarCtrl"/>
 
-        <breadcrumb v-if="showBreadcrumb"/>
+            <div class="navbar-item" @click="refresh">
+                <i class="el-icon-refresh-right navbar-icon" title="刷新"/>
+            </div>
 
-        <div class="right-menu">
+            <breadcrumb v-if="showBreadcrumb"/>
-            <search id="header-search" class="right-menu-item hidden-xs"/>
+        </div>
 
-            <bell class="right-menu-item"/>
+        <div>
+            <bell class="navbar-item"/>
 
-            <div class="setting-btn right-menu-item hidden-xs" @click="settingDrawer=true">
+            <div class="setting-btn navbar-item hidden-xs" @click="settingDrawer=true">
                 <i class="el-icon-s-operation navbar-icon" title="个性设置"/>
             </div>
 
             <el-dropdown
-                    class="avatar-container right-menu-item"
+                    class="navbar-item"
                     trigger="click"
                     @visible-change="$emit('menu-show',$event)"
             >
@@ -78,10 +82,14 @@
         },
 
         methods: {
-            clickHamburger() {
+            sidebarCtrl() {
                 this.$store.commit('setting/sidebarCollapse', !this.sidebarCollapse)
             },
 
+            refresh() {
+                this.$router.replace({path: `/redirect${this.$route.fullPath}`})
+            },
+
             logout() {
                 if (this.prepare_logout) return
                 elConfirm('确认退出?')

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

@@ -1,56 +1,47 @@
 @import "~@/assets/styles/variables.scss";
 
 .navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
     height: $nav-height;
+    padding: 0 12px;
     transition: height .3s ease-in-out;
-    overflow: hidden;
     position: relative;
     z-index: 9;
-    background: #fff;
+    background-color: #fff;
     box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
 
+    > div {
+        display: flex;
+        height: 100%;
+    }
+
     .navbar-icon {
         font-size: 18px;
-        cursor: pointer;
-        vertical-align: middle;
     }
 
-    .right-menu {
+    .navbar-item {
-        float: right;
+        display: flex;
-        height: 100%;
+        align-items: center;
-        line-height: $nav-height;
+        padding: 0 8px;
-
+        color: #5a5e66;
-        &:focus {
+        transition: background .3s;
-            outline: none;
+        cursor: pointer;
-        }
-
-        .right-menu-item {
-            display: inline-block;
-            position: relative;
-            padding: 0 8px;
-            height: 100%;
-            font-size: 0;
-            color: #5a5e66;
-            vertical-align: text-bottom;
-            transition: background .3s;
-            cursor: pointer;
 
-            &:hover:not(#header-search) {
+        &:hover {
-                background: rgba(0, 0, 0, .025)
+            background: rgba(0, 0, 0, .025)
-            }
         }
+    }
 
-        .avatar-container {
+    .avatar-wrapper {
-            .avatar-wrapper {
+        display: flex;
-                display: flex;
+        align-items: center;
-                align-items: center;
-                height: 100%;
 
-                span {
+        span {
-                    margin-right: 5px;
+            margin-right: 5px;
-                    font-size: 18px;
+            font-size: 18px;
-                }
-            }
         }
     }
 }

vue/src/mixins/guide/data/navbar.js

@@ -8,11 +8,11 @@ const steps = [
         content: '这是搜索栏，可以根据关键字搜索菜单',
     },
     {
-        element: '.setting-btn.right-menu-item',
+        element: '.setting-btn.navbar-item',
         content: '这是个性设置按钮，可以根据自己喜好进行一些设置',
     },
     {
-        element: '.avatar-container.right-menu-item',
+        element: '.avatar-container.navbar-item',
         content: '这是用户中心',
     },
     {