From 1caa7837d17869f3af40eab944a2ae2b2274bdfd Mon Sep 17 00:00:00 2001
From: dengbf <dengbf@aliyun.com>
Date: Tue, 12 Dec 2023 16:18:31 +0800
Subject: [PATCH] =?UTF-8?q?-=20[=E5=8A=9F=E8=83=BD]=20=E9=A1=B6=E9=83=A8?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E8=8F=9C=E5=8D=95=E8=BF=87=E5=A4=9A=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=B7=A6=E5=8F=B3=E7=AE=AD=E5=A4=B4?=
 =?UTF-8?q?=20=20=20=20-=20[=E5=85=B3=E8=81=94]=20#[1044764613378048]?=
 =?UTF-8?q?=E9=A1=B6=E9=83=A8=E6=A8=A1=E5=9D=97=E8=8F=9C=E5=8D=95=E8=BF=87?=
 =?UTF-8?q?=E5=A4=9A=E6=97=B6=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=B7=A6=E5=8F=B3?=
 =?UTF-8?q?=E7=AE=AD=E5=A4=B4=EF=BC=8C=E5=8F=AF=E4=BB=A5=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=20http://192.168.0.96:8090/demo/rdm.html#/story-detail/9390509?=
 =?UTF-8?q?47543040/939050947543042/1044764613378048?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/resources/assets/css/theme.less         |   8 +-
 src/views/components/topnav/topnav-menu.vue | 135 ++++++++++++--------
 src/views/components/topnav/topnav-user.vue |   9 +-
 src/views/components/topnav/topnav.vue      |   2 +-
 4 files changed, 91 insertions(+), 63 deletions(-)

diff --git a/src/resources/assets/css/theme.less b/src/resources/assets/css/theme.less
index ada9f4cc1..982c3fedd 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 1f3e46931..847ecd9d9 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 fe5d2d1ff..f293cacd2 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 8b7aeb743..9da5c76fa 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>
-- 
Gitee