feat(ui): update ui

cmdb-ui/src/components/tools/DocumentLink.vue

@@ -31,7 +31,7 @@ export default {
   text-align: center;
   border-radius: 4px;
   &:hover {
-    background: linear-gradient(0deg, rgba(0, 80, 201, 0.2) 0%, rgba(174, 207, 255, 0.06) 86.76%);
+    // background: linear-gradient(0deg, rgba(0, 80, 201, 0.2) 0%, rgba(174, 207, 255, 0.06) 86.76%);
     color: @layout-header-font-selected-color;
   }
 }

cmdb-ui/src/components/tools/TopMenu.vue

@@ -5,7 +5,6 @@
       v-for="route in defaultShowRoutes"
       :key="route.name"
       @click="() => handleClick(route)"
-      :title="$t(route.meta.title)"
     >
       {{ route.meta.title }}
     </span>
@@ -119,7 +118,9 @@ export default {
     line-height: @layout-header-line-height;
     display: inline-block;
   }
-  > span:hover,
+  > span:hover {
+    background-color: #f0f2f5;
+  }
   .top-menu-selected {
     font-weight: bold;
     color: @layout-header-font-selected-color;

cmdb-ui/src/components/tools/UserMenu.vue

@@ -10,10 +10,25 @@
         <ops-icon class="common-settings-btn-icon" type="veops-setting" />
         <span class="common-settings-btn-text">{{ $t('settings') }}</span>
       </span>
-      <span class="locale" @click="changeLang">{{ locale === 'zh' ? '简中' : 'EN' }}</span>
       <a-popover
-        trigger="click"
-        :overlayStyle="{ width: '150px' }"
+        overlayClassName="lang-popover-wrap"
+        placement="bottomRight"
+        :getPopupContainer="(trigger) => trigger.parentNode"
+      >
+        <span class="locale">{{ languageList.find((lang) => lang.key === locale).title }}</span>
+        <div class="lang-menu" slot="content">
+          <a
+            v-for="(lang) in languageList"
+            :key="lang.key"
+            :class="['lang-menu-item', lang.key === locale ? 'lang-menu-item_active' : '']"
+            @click="changeLang(lang.key)"
+          >
+            {{ lang.title }}
+          </a>
+        </div>
+      </a-popover>
+      <a-popover
+        :overlayStyle="{ width: '130px' }"
         placement="bottomRight"
         overlayClassName="custom-user"
       >
@@ -29,7 +44,7 @@
             <span>{{ $t('topMenu.logout') }}</span>
           </div>
         </template>
-        <span class="action ant-dropdown-link user-dropdown-menu">
+        <span class="action ant-dropdown-link user-dropdown-menu user-info-wrap">
           <a-avatar
             v-if="avatar()"
             class="avatar"
@@ -54,6 +69,20 @@ export default {
   components: {
     DocumentLink,
   },
+  data() {
+    return {
+      languageList: [
+        {
+          title: '简中',
+          key: 'zh'
+        },
+        {
+          title: 'EN',
+          key: 'en'
+        },
+      ]
+    }
+  },
   computed: {
     ...mapState(['user', 'locale']),
     hasBackendPermission() {
@@ -81,14 +110,9 @@ export default {
     handleClick() {
       this.$router.push('/setting')
     },
-    changeLang() {
-      if (this.locale === 'zh') {
-        this.SET_LOCALE('en')
-        this.$i18n.locale = 'en'
-      } else {
-        this.SET_LOCALE('zh')
-        this.$i18n.locale = 'zh'
-      }
+    changeLang(lang) {
+      this.SET_LOCALE(lang)
+      this.$i18n.locale = lang
       this.$nextTick(() => {
         setDocumentTitle(`${this.$t(this.$route.meta.title)} - ${domTitle}`)
       })
@@ -124,6 +148,15 @@ export default {
     color: @primary-color;
   }
 }
+
+.lang-popover-wrap {
+  width: 70px;
+  padding: 0px;
+
+  .ant-popover-inner-content {
+    padding: 0px;
+  }
+}
 </style>
 
 <style lang="less" scoped>
@@ -150,6 +183,47 @@ export default {
       font-weight: 400;
       color: #4E5969;
     }
+
+    &:hover {
+      .commen-settings-btn-text {
+        color: #2F54EB;
+      }
+    }
+  }
+
+  .lang-menu {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &-item {
+      width: 100%;
+      padding: 5px 10px;
+      cursor: pointer;
+      color: #4E5969;
+
+      &_active {
+        color: #2F54EB;
+        background-color: #f0f5ff;
+      }
+
+      &:hover {
+        color: #2F54EB;
+      }
+    }
+  }
+
+  .user-info-wrap {
+    .avatar {
+      transition: all 0.2s;
+      border: solid 1px transparent;
+    }
+
+    &:hover {
+      .avatar {
+        border-color: #2F54EB;
+      }
+    }
   }
 }
 </style>