diff --git a/src/resources/assets/css/theme.less b/src/resources/assets/css/theme.less
index ada9f4cc1b4fa38afdd3c49ba8f68f165af61ffd..982c3fedd904a2e78a18eb458e12b21e47e92dd0 100644
--- a/src/resources/assets/css/theme.less
+++ b/src/resources/assets/css/theme.less
@@ -135,10 +135,10 @@
         a {
           color: @default-top-text;
 
-          &:hover {
-            color: @default-op;
-            background: fade(@top-active, 50%);
-          }
+          // &:hover {
+          //   color: @default-op;
+          //   background: fade(@top-active, 50%);
+          // }
 
           &-active {
             color: @default-op;
diff --git a/src/views/components/topnav/topnav-menu.vue b/src/views/components/topnav/topnav-menu.vue
index 1f3e469317e5453ba3f29ffe029ee740490ea3b6..847ecd9d919343b6c2ffc4b74567345049fcdebd 100644
--- a/src/views/components/topnav/topnav-menu.vue
+++ b/src/views/components/topnav/topnav-menu.vue
@@ -40,16 +40,16 @@
       </div>
     </Poptip>
     <!-- 导航内容开始 -->
-    <ul class="topnav-menu-module">
-      <li 
-        v-for="module in moduleList"
-        :key="module.moduleId"
-        class="module-item text-action"
-        :class="{ 'module-item-active': module.moduleId === moduleId }"
-        @click.prevent="toMenu(module.moduleId)"   
-        @contextmenu="newTab($event, module)"     
-      >{{ module.moduleName }}</li>
-    </ul>
+    <div class="topnav-menu-module overflow">
+      <Tabs :value="moduleId" @on-click="toMenu">
+        <TabPane
+          v-for="module in moduleList"
+          :key="module.moduleId"
+          :label="renderLabel(module)"
+          :name="module.moduleId"
+        ></TabPane>
+      </Tabs>
+    </div>
     <!-- //导航内容_end -->
   </div>
 </template>
@@ -84,6 +84,21 @@ export default {
       //鼠标右键打开新标签页
       let replaceStr = `<a href="${HOME}/${module.moduleId}.html#/" style="display:block;">${module.moduleName}</a>`;
       e.currentTarget.innerHTML = replaceStr;
+    },
+    renderLabel(module) {
+      return h => {
+        return h(
+          'a',
+          {
+            domProps: {
+              href: HOME + '/' + module.moduleId + '.html#/'
+            },
+            style: {
+              display: 'block'
+            }
+          }, module.moduleName
+        );
+      };
     }
   },
   computed: {
@@ -107,55 +122,73 @@ export default {
 </script>
 <style lang="less" scoped>
 @import (reference) '~@/resources/assets/css/variable.less';
-.topnav-menu {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  .apps-icon {
-    font-size: 16px;
-    transition: color 0.2s ease;
-    display: flex;
+.theme(@top-active){
+  .topnav-menu {
+    // display: flex;
+    // align-items: center;
+    // justify-content: flex-start;
+    display: grid;
+    grid-template-columns: 46px auto;
     align-items: center;
-    margin-left: 12px;
-    margin-right: 10px;
-    cursor: pointer;
-    &::before {
-      padding: 4px;
-    }
-  }
 
-  .topnav-menu-module {
-    height: @top-height;
-    background-color: transparent;
-    cursor: pointer;
+    .apps-icon {
+      font-size: 16px;
+      transition: color 0.2s ease;
+      display: flex;
+      align-items: center;
+      margin-left: 12px;
+      margin-right: 10px;
+      cursor: pointer;
+      &::before {
+        padding: 4px;
+      }
+    }
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .module-item {
+    .topnav-menu-module {
       height: @top-height;
-      line-height: @top-height;
-      padding: 0 @space-sm;
-      min-width: 60px;
-      text-align: center;
-      position: relative;
-      transition: all 0.2s ease-in-out;
-    }
-    li{
-      a{
-        display:inline-block;
-        padding: 0 10px;
-        height: 50px;
-        line-height: 50px;
-        min-width: 60px;
-        text-align: center;
-        position: relative;
-        transition: all 0.2s ease-in-out;
+      background-color: transparent;
+      cursor: pointer;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      /deep/ .ivu-tabs {
+        color: @white;
+        .ivu-tabs-bar {
+          margin: 0;
+        }
+        .ivu-tabs-ink-bar {
+          display: none;
+        }
+        .ivu-tabs-tab {
+          padding: 0 10px;
+          height: 50px;
+          line-height: 50px;
+          margin: 0;
+        }
+        .ivu-tabs-nav-prev, .ivu-tabs-nav-next {
+          line-height: 50px;
+        }
+        .ivu-tabs-nav .ivu-tabs-tab:hover {
+          color: @white;
+          background: fade(@top-active, 50%);
+        }
+        .ivu-tabs-nav .ivu-tabs-tab-active {
+          color: @white;
+          background: var(--top-active, @top-active);
+          border-color: none;
+        }
       }
     }
   }
 }
+html {
+  .theme(@default-top-active);
+
+  &.theme-dark {
+    .theme(@dark-top-active);
+  }
+}
 </style>
 
 <style lang="less">
diff --git a/src/views/components/topnav/topnav-user.vue b/src/views/components/topnav/topnav-user.vue
index fe5d2d1ff8518b9fa397ca02b1383eb17cd19fd9..f293cacd21dfe3591b6fd49eb37536bc68590c5c 100644
--- a/src/views/components/topnav/topnav-user.vue
+++ b/src/views/components/topnav/topnav-user.vue
@@ -14,7 +14,6 @@
           :size="24"
           class="user-avatar"
         ></TsAvatar>
-        <span>{{ userInfo.userName }}</span>
         <i class="tsfont-down" :class="{'arrow-dropdown':isDropdown}"></i>
       </div>
       <DropdownMenu slot="list" class="dropdown-menu" style="width:180px;">
@@ -156,15 +155,11 @@ export default {
     cursor: pointer;
     text-align: center;
     position: relative;
-
-    .user-avatar {
-      margin-right: 4px;
-      margin-left: 4px;
-    }
+    width: 64px;
 
     .tsfont-down {
       margin-left: 5px;
-      margin-right: 24px;
+      margin-right: 16px;
       .transition(300ms);
 
       &.arrow-dropdown {
diff --git a/src/views/components/topnav/topnav.vue b/src/views/components/topnav/topnav.vue
index 8b7aeb7434501ca4ce0bcf05b8d5d3da7c2582ee..9da5c76fa0762bb9d834258a79a7cf1d11cbdcd1 100644
--- a/src/views/components/topnav/topnav.vue
+++ b/src/views/components/topnav/topnav.vue
@@ -12,7 +12,7 @@
     </div>
     <div class="topnav-right-container">
       <TopnavHelp v-if="!isAtNaviPage" class="pr-nm"></TopnavHelp>
-      <TopnavMessage :style="{'margin-right': '15px'}" />
+      <TopnavMessage class="pr-nm" />
       <TopnavUser />
     </div>
   </div>