From a7c303849e95de66b5741dfdd7da3f57e9f80307 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Fri, 1 Dec 2023 14:57:01 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-3353=20fix=EF=BC=9A=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E4=B8=8B=E6=8B=89=E8=8F=9C=E5=8D=95=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/common.scss      | 46 ++++++++++++++-----
 .../src/components/layout/header.vue          | 22 +++++++--
 2 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 9bd6471e8..3dbeb4c59 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -172,17 +172,21 @@
 }
 
 .personal-dropdown-menu{
-  width: 200px;
+  margin-top: 14px !important;
+  width: 240px;
   padding: 8px 0;
+  box-sizing: border-box;
+  border: none;
   .el-dropdown-menu__item{
     padding: 0 12px;
     line-height: 32px;
+    font-size: 14px;
+    color: $--color-text-regular;
   }
   .personal-dropdown {
-    border-bottom: 1px solid $--border-color-light;
-    padding: 0 12px;
+    padding: 8px 12px;
     .personal-dropdown__username {
-      max-width: 176px;
+      max-width: 216px;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
@@ -190,10 +194,11 @@
       font-family: Roboto-Regular;
       font-size: 14px;
       color: $--color-text-primary;
-      font-weight: 400;
+      font-weight: bold;
+      line-height: 20px;
     }
     .personal-dropdown__name {
-      max-width: 176px;
+      max-width: 216px;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
@@ -202,22 +207,39 @@
       font-size: 14px;
       color: $--color-text-secondary;
       font-weight: 400;
-      padding-bottom: 6px;
+      line-height: 20px;
     }
   }
   .notification-dropdown{
-    border-bottom: 1px solid $--border-color-light;
-    padding: 0 12px;
     .notification-dropdown-item{
+      padding: 0 12px;
+      line-height: 32px;
+      font-size: 14px;
+      color: $--color-text-regular;
       display: flex;
       align-items: center;
       i{
         margin-right: 5px;
       }
-      line-height: 32px;
-      font-size: 14px;
-      color: $--color-text-regular;
     }
+    .toggle-item{
+      cursor: pointer;
+      line-height: 38px;
+      justify-content: space-between;
+      &:hover{
+        background: $--background-color-base;
+        color: $--color-primary;
+      }
+    }
+    .toggle-item.nz-btn-disabled {
+      opacity: .6;
+      cursor: not-allowed !important;
+    }
+  }
+  .item-divide{
+    height: 1px;
+    background: $--border-color-light;
+    margin: 4px 0;
   }
 }
 
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index 1ec309338..ddfc4219f 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -56,28 +56,31 @@
             <div class="personal-dropdown__username" :title="name">{{name}}</div>
             <div class="personal-dropdown__name" :title="username">@{{username}}</div>
           </div>
+          <div class="item-divide"></div>
           <el-dropdown-item>
             <div id="header-to-profile" @click="showPinDialog"><i class="nz-icon nz-icon-user"></i>{{$t('overall.personalCenter')}}</div>
           </el-dropdown-item>
           <div class="notification-dropdown">
-            <div class="notification-dropdown-item" style="justify-content: space-between;">
+            <div class="notification-dropdown-item toggle-item" :class="{'nz-btn-disabled': themeSave}" @click="darkThemeChange(!darkTheme)">
               <div style="display:flex;align-items:center;">
                 <i class="nz-icon nz-icon-a-Darktheme" style="font-size:15px;"></i>
                 <span>{{$t('overall.darkTheme')}}</span>
               </div>
-              <el-switch v-model="darkTheme" @change="darkThemeChange" :disabled="themeSave"></el-switch>
+              <el-switch v-model="darkTheme" @change="darkThemeChange" :disabled="themeSave" @click.native.stop></el-switch>
             </div>
           </div>
+          <div class="item-divide"></div>
           <div class="notification-dropdown">
             <div class="notification-dropdown-item">
               <i class="nz-icon nz-icon-Notification" style="font-size:15px;"></i>
               <span style="font-weight: bold;">{{$t('overall.notification')}}</span>
             </div>
-            <div class="notification-dropdown-item" style="justify-content: space-between;">
+            <div class="notification-dropdown-item toggle-item" :class="{'nz-btn-disabled': newAlertMessageSave}" @click="newAlertMessageChange(!newAlertMessage)">
               <span>{{$t('overall.newAlertMessage')}}</span>
-              <el-switch v-model="newAlertMessage" @change="newAlertMessageChange" :disabled="newAlertMessageSave"></el-switch>
+              <el-switch v-model="newAlertMessage" @change="newAlertMessageChange" :disabled="newAlertMessageSave" @click.native.stop></el-switch>
             </div>
           </div>
+          <div class="item-divide"></div>
           <el-dropdown-item>
             <div id="header-to-logout" @click="logout"><i class="nz-icon nz-icon-exit"></i>{{$t('overall.signOut')}}</div>
           </el-dropdown-item>
@@ -189,6 +192,9 @@ export default {
     this.testAutoplay()
   },
   methods: {
+    fn () {
+      console.log(666)
+    },
     ...mapActions(['logoutSuccess']),
     // 测试是否能自动播放 若不能 点击开关时弹窗
     testAutoplay () {
@@ -209,7 +215,11 @@ export default {
       this.darkTheme = theme == 'dark'
     },
     darkThemeChange (val) {
+      if (this.themeSave) {
+        return
+      }
       this.themeSave = true
+      this.darkTheme = val
       this.$get('/sys/user/profile').then(response => {
         if (response.code === 200) {
           const userInfo = response.user
@@ -233,7 +243,11 @@ export default {
       })
     },
     newAlertMessageChange (val) {
+      if (this.newAlertMessageSave) {
+        return
+      }
       this.newAlertMessageSave = true
+      this.newAlertMessage = val
       const param = {
         newAlertMessage: {
           enable: val