From ec9dcdc3cf8e003e6e756ac8ca2e7ad9f1627de0 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Tue, 12 Oct 2021 18:35:34 +0800
Subject: [PATCH 01/10] =?UTF-8?q?style:=20profile=20=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/layout/header.vue       | 2 +-
 nezha-fronted/src/components/page/config/profile.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index 342b6045a..1f715a82b 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -42,7 +42,7 @@
             <div id="header-to-english" :style="language === 'en'?'color:#f90':''" @click="changeLocal('en')"><i class="nz-icon nz-icon-lang-en"></i>English</div>
           </el-dropdown-item>
           <el-dropdown-item>
-            <div id="header-to-chinese" :style="language === 'cn'?'color:#f90':''" @click="changeLocal('cn')"><i class="nz-icon nz-icon-lang-zh"></i>中文</div>
+            <div id="header-to-chinese" :style="language === 'cn'?'color:#f90':''" @click="changeLocal('cn')"><i class="nz-icon nz-icon-lang-zh"></i>简体中文</div>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
diff --git a/nezha-fronted/src/components/page/config/profile.vue b/nezha-fronted/src/components/page/config/profile.vue
index 492c4855f..cd736c9ae 100644
--- a/nezha-fronted/src/components/page/config/profile.vue
+++ b/nezha-fronted/src/components/page/config/profile.vue
@@ -438,7 +438,7 @@ export default {
         }
       }
     }
-    .profile-left__center:nth-of-type(6) {
+    .profile-left__center:nth-of-type(7) {
       margin-bottom: 0;
     }
     .profile-left__center {

From 73408427625e14925f85b56bfc1ed38e5ff77463 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Wed, 13 Oct 2021 09:17:51 +0800
Subject: [PATCH 02/10] =?UTF-8?q?NEZ-1053=20feat:=20=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20=E5=8F=96=E6=B6=88=E8=AF=AD=E8=A8=80?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/common/login.vue | 43 +++++++++----------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 86141d617..9ef5bb173 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login" @click="langListShow = false">
+  <div class="login">
     <div class="model"></div>
     <div class="login-main">
       <div class="logo"><img src="../../assets/img/logo-big.png"></div>
@@ -25,15 +25,15 @@
         <div class="login-foot">
           <button  v-if="!verifyShow" id="login" v-loading="loading" :class="{'nz-btn-disabled': !license.valid}" class="login-btn" @click="login">{{$t("login.login")}}</button>
           <button  v-if="verifyShow" id="verify" v-loading="loading" :class="{'nz-btn-disabled': !license.valid}" class="login-btn" @click="verify">{{$t("login.verify")}}</button>
-          <div class="login-foot-lang" @click.stop="langListShow = !langListShow">
-            <i v-if="lang == 'en'" class="nz-icon nz-icon-lang-en"></i>
-            <i v-else-if="lang == 'cn'" class="nz-icon nz-icon-lang-zh"></i>
-            <i class="nz-icon nz-icon-arrow-down"></i>
-          </div>
-          <div class="login-foot-lang-list" v-show="langListShow">
-            <i v-if="lang != 'en'" @click="changeLang('en')" class="nz-icon nz-icon-lang-en"></i>
-            <i v-if="lang != 'cn'" @click="changeLang('cn')" class="nz-icon nz-icon-lang-zh"></i>
-          </div>
+<!--          <div class="login-foot-lang" @click.stop="langListShow = !langListShow">-->
+<!--            <i v-if="lang == 'en'" class="nz-icon nz-icon-lang-en"></i>-->
+<!--            <i v-else-if="lang == 'cn'" class="nz-icon nz-icon-lang-zh"></i>-->
+<!--            <i class="nz-icon nz-icon-arrow-down"></i>-->
+<!--          </div>-->
+<!--          <div class="login-foot-lang-list" v-show="langListShow">-->
+<!--            <i v-if="lang != 'en'" @click="changeLang('en')" class="nz-icon nz-icon-lang-en"></i>-->
+<!--            <i v-if="lang != 'cn'" @click="changeLang('cn')" class="nz-icon nz-icon-lang-zh"></i>-->
+<!--          </div>-->
         </div>
         <div class="login-license">
           <div class="license-warn" v-if="license.warnInfo">{{license.warnInfo}}</div>
@@ -139,8 +139,7 @@ export default {
       uploadFileList: [],
       uploadFile: { file: '', path: '', uuid: '' },
       loading: false,
-      lang: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en', // en/cn
-      langListShow: false,
+      lang: 'en', // en/cn
       verifyShow: false,
       authBindShow: false,
       authToken: '',
@@ -166,6 +165,8 @@ export default {
           if (res.code == 200) {
             // 登录成功，记录用户名、token和lang
             this.authToken = res.data.authToken
+            this.lang = res.data.user.lang
+            this.$i18n.locale = this.lang
             sessionStorage.setItem('nz-token', res.data.authToken)
             if (res.data.authFlag === 1) {
               if (res.data.authBind === 0) {
@@ -192,7 +193,6 @@ export default {
               localStorage.setItem('nz-username', this.loginData.username)
               localStorage.setItem('nz-prometheus-federation-enabled', res.data.prometheusFederationEnabled)
               localStorage.setItem('nz-language', this.lang)
-              this.$i18n.locale = this.lang
               this.loginSuccess(res)
             }
           } else {
@@ -213,8 +213,6 @@ export default {
           sessionStorage.setItem('nz-username', this.loginData.username)
           localStorage.setItem('nz-username', this.loginData.username)
           localStorage.setItem('nz-prometheus-federation-enabled', res.data.prometheusFederationEnabled)
-          localStorage.setItem('nz-language', this.lang)
-          this.$i18n.locale = this.lang
           this.loginSuccess(res)
         } else {
           this.authToken = res.data.authToken
@@ -222,12 +220,12 @@ export default {
         }
       })
     },
-    changeLang (lang) {
-      this.lang = lang
-      this.langListShow = false
-      this.$i18n.locale = this.lang
-      localStorage.setItem('nz-language', this.lang)
-    },
+    // changeLang (lang) {
+    //   this.lang = lang
+    //   this.langListShow = false
+    //   this.$i18n.locale = 'cn'
+    //   localStorage.setItem('nz-language', this.lang)
+    // },
     validateLogin () {
       if (!this.loginData.username || !this.loginData.pin) {
         this.$message.error('Empty username or password')
@@ -438,6 +436,7 @@ export default {
 .login-foot {
   padding-top: 15px;
   display: flex;
+  width: 460px;
   justify-content: space-between;
   position: relative;
 }
@@ -449,7 +448,7 @@ export default {
   border: none;
   outline: none;
   height: 44px;
-  width: 320px;
+  width: 100%;
   cursor: pointer;
   font-size: 14px;
   transition: all linear .2s;

From 69f31a5a539cd94f03511c21289c3bfafedc4a2e Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Wed, 13 Oct 2021 10:55:22 +0800
Subject: [PATCH 03/10] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Duser=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E9=BB=98=E8=AE=A4=E5=AD=97=E6=AE=B5=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/page/config/user.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nezha-fronted/src/components/page/config/user.vue b/nezha-fronted/src/components/page/config/user.vue
index 118d14aa2..93f4841ba 100644
--- a/nezha-fronted/src/components/page/config/user.vue
+++ b/nezha-fronted/src/components/page/config/user.vue
@@ -76,7 +76,7 @@ export default {
         roles: [],
         notifications: [],
         mfaLevel: 0,
-        lang: 'English'
+        lang: 'en'
       },
       tableId: 'userTable',
       searchMsg: { // 给搜索框子组件传递的信息

From d8cf47501bdb698cda0fbb59b3f86ab244115a58 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Wed, 13 Oct 2021 14:37:21 +0800
Subject: [PATCH 04/10] =?UTF-8?q?fix:=20userTable=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8Clanguage=E5=88=97=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/table/settings/userTable.vue        | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/nezha-fronted/src/components/common/table/settings/userTable.vue b/nezha-fronted/src/components/common/table/settings/userTable.vue
index e914a7096..768ddc47c 100644
--- a/nezha-fronted/src/components/common/table/settings/userTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/userTable.vue
@@ -65,6 +65,10 @@
         </template>
         <span v-else-if="item.prop === 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
         <span v-else-if="item.prop === 'lastLoginTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
+        <template v-else-if="item.prop === 'lang'">
+          <span v-if="scope.row[item.prop] === 'en'">English</span>
+          <span v-else-if="scope.row[item.prop] === 'cn'">简体中文</span>
+        </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <span v-else>-</span>
       </template>

From fb7568951874bb16b9c87ddfdcc09144d4ab95bb Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Wed, 13 Oct 2021 15:13:42 +0800
Subject: [PATCH 05/10] =?UTF-8?q?style:=20=E6=A8=A1=E6=9D=BF=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=9B=BE=E6=A0=87box=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/common/rightBox/chartTempBox.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/nezha-fronted/src/components/common/rightBox/chartTempBox.vue b/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
index 0f468c563..ef1b7321f 100644
--- a/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
@@ -16,7 +16,7 @@
                        class="right-box__select"
                        clearable
                        placeholder=""
-                       popper-class="prevent-clickoutside"
+                       popper-class="prevent-clickoutside right-box-select-top"
                        size="small"
                        value-key="chartType"
                        @change="varTypeChange">
@@ -31,7 +31,7 @@
                        v-model="editChartTemp.pid"
                        class="right-box__select" clearable
                        placeholder=""
-                       popper-class="prevent-clickoutside"
+                       popper-class="prevent-clickoutside right-box-select-top"
                        size="small"
                        value-key="chartType" >
               <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTempArr">

From 6838c990c6fae9307da8e37c8e4b0a14a02fe9df Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Wed, 13 Oct 2021 15:47:56 +0800
Subject: [PATCH 06/10] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20select=20?=
 =?UTF-8?q?=E5=8D=A0=E4=BD=8D=E7=AC=A6=EF=BC=8C=E6=9C=AA=E5=9B=BD=E9=99=85?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/rightBox/asset/assetBox.vue      | 7 ++++---
 .../src/components/page/config/system/apiKeyTable.vue      | 2 +-
 .../components/page/config/system/notifyMethodTable.vue    | 2 +-
 .../src/components/page/dashboard/alertChartParam.vue      | 4 ++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
index 9714cb56a..8e3362f52 100644
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
@@ -26,6 +26,7 @@
               class="right-box__select"
               popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
               size="small"
+              :placeholder="$t('el.select.placeholder')"
               value-key="id">
               <el-option v-for="p in options.parentAssetOptions" :key="p.id" :label="p.name" :value="p.id"></el-option>
             </el-select>
@@ -108,7 +109,7 @@
                   </el-checkbox-group>
                 </template>
                 <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.SELECT">
-                  <el-select v-model="label.value[0]" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
+                  <el-select v-model="label.value[0]" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
                     <el-option v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-option>
                   </el-select>
                 </template>
@@ -177,7 +178,7 @@
           <template v-if="editAsset.type && editAsset.type.authProtocol === assetConstants.authProtocolData.ssh">
             <div class="form__sub-title">SSH</div>
             <el-form-item :label="$t('asset.authType')" prop="authType">
-              <el-select v-model="editAsset.authType" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
+              <el-select v-model="editAsset.authType" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
                 <el-option v-for="type in assetConstants.authTypeOptions" :key="type.value" :label="type.label" :value="type.value"/>
               </el-select>
             </el-form-item>
@@ -220,7 +221,7 @@
           <template v-if="editAsset.type && editAsset.type.snmpEnable === 1">
             <div class="form__sub-title">SNMP</div>
             <el-form-item :label="$t('asset.snmpCredential')" prop="snmpCredentialId">
-              <el-select v-model="editAsset.snmpCredentialId" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
+              <el-select v-model="editAsset.snmpCredentialId" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
                 <el-option v-for="snmp in options.snmpCredentialOptions" :key="snmp.id" :label="snmp.name" :value="snmp.id"></el-option>
               </el-select>
             </el-form-item>
diff --git a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
index 8ee73caf6..d9bdc6736 100644
--- a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
+++ b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
@@ -41,7 +41,7 @@
             </template>
             <template v-if="item.prop == 'role'">
               <el-popover :content="rules.roleId.message" placement="top" trigger="manual" v-model="rules.roleId.switch" popper-class="small-pop warn-pop" @after-enter="popShow(rules.roleId)">
-                <el-select v-model="scope.row[item.prop]" size="small" value-key="id" slot="reference" popper-class="api-select right-public-box-select-top right-public-box-dropdown-top role-system-table">
+                <el-select v-model="scope.row[item.prop]" size="small" :placeholder="$t('el.select.placeholder')" value-key="id" slot="reference" popper-class="api-select right-public-box-select-top right-public-box-dropdown-top role-system-table">
                   <template v-for="role in roles" >
                     <el-option :label="role.name" :value="role"></el-option>
                   </template>
diff --git a/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue b/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
index c0a935650..c2086a79a 100644
--- a/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
+++ b/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
@@ -46,7 +46,7 @@
             </template>
             <template v-if="item.prop == 'account'">
               <el-popover :content="rules.account.message" placement="top" trigger="manual" v-model="rules.account.switch" popper-class="small-pop warn-pop" @after-enter="popShow(rules.account)">
-                <el-select slot="reference" v-model="scope.row[item.prop]" size="small" popper-class="right-public-box-select-top right-public-box-dropdown-top">
+                <el-select slot="reference" v-model="scope.row[item.prop]" :placeholder="$t('el.select.placeholder')" size="small" popper-class="right-public-box-select-top right-public-box-dropdown-top">
                   <template v-for="param in accountParams">
                     <el-option :label="param.label" :value="param.value"></el-option>
                   </template>
diff --git a/nezha-fronted/src/components/page/dashboard/alertChartParam.vue b/nezha-fronted/src/components/page/dashboard/alertChartParam.vue
index 62b32811c..09699fa94 100644
--- a/nezha-fronted/src/components/page/dashboard/alertChartParam.vue
+++ b/nezha-fronted/src/components/page/dashboard/alertChartParam.vue
@@ -11,12 +11,12 @@
           clearable></el-cascader>
       </el-form-item>
       <el-form-item :label="$t('dashboard.panel.chartForm.alertParam.alertRule')">
-        <el-select class="form-item" size="small" popper-class="alert-form-pop right-public-box-dropdown-top right-public-box-select-top no-style-class" v-model="parameters.alertRule" clearable id="alert-param-alertrule">
+        <el-select class="form-item" size="small" :placeholder="$t('el.select.placeholder')" popper-class="alert-form-pop right-public-box-dropdown-top right-public-box-select-top no-style-class" v-model="parameters.alertRule" clearable id="alert-param-alertrule">
           <el-option v-for="(rule, index) in alertRules" :key="index" :label="rule.name" :value="rule.id"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item :label="$t('dashboard.panel.chartForm.alertParam.level')" prop="level" class="severity-box">
-        <el-select class="form-item" size="small" popper-class="alert-form-pop right-public-box-select-top right-public-box-dropdown-top no-style-class" v-model="parameters.level" clearable id="alert-param-level">
+        <el-select class="form-item" size="small" :placeholder="$t('el.select.placeholder')" popper-class="alert-form-pop right-public-box-select-top right-public-box-dropdown-top no-style-class" v-model="parameters.level" clearable id="alert-param-level">
           <el-option v-for="item in alertPriority" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
               <span>
                  <i class="nz-icon nz-icon-circle" :style="{color:item.color,'font-size':'12px'}"></i> {{item.name}}

From 72665f1bcb57d8148ac5be865455677f6d2077cc Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 14 Oct 2021 13:40:13 +0800
Subject: [PATCH 07/10] =?UTF-8?q?NEZ-1059=20feat:=20=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=20=E5=A2=9E=E5=8A=A0=20=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=EF=BC=8C=E7=94=A8=E6=88=B7=E5=8F=AF=E4=BB=A5?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/language/cn.js      |   5 +
 .../src/components/common/language/en.js      |   5 +
 nezha-fronted/src/components/common/login.vue |   1 +
 .../components/common/rightBox/profileBox.vue | 155 ++++++++++++++++++
 .../src/components/layout/header.vue          |  16 +-
 .../src/components/page/config/profile.vue    |  74 ++++++++-
 6 files changed, 239 insertions(+), 17 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/rightBox/profileBox.vue

diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 5dde1d470..4fab239da 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -1799,6 +1799,11 @@ const cn = {
     clear: '清空',
     enable: '启用',
     update: '更新',
+    edit: '编辑个人中心',
+    editProfile: '编辑个人中心',
+    username: '用户名',
+    name: '名称',
+    language: '语言',
     operationRecord: '操作记录',
     changePassword: '修改密码',
     oldPassword: '当前密码',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index b042a5a8d..d9b9738a6 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -1682,6 +1682,11 @@ const en = {
     clear: 'Clear',
     enable: 'Enable',
     update: 'Update',
+    edit: 'Edit profile',
+    editProfile: 'Edit Profile',
+    username: 'User name',
+    name: 'Name',
+    language: 'Language',
     operationRecord: 'Operation log',
     changePassword: 'Change password',
     oldPassword: 'Current password',
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 9ef5bb173..90c4e8295 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -213,6 +213,7 @@ export default {
           sessionStorage.setItem('nz-username', this.loginData.username)
           localStorage.setItem('nz-username', this.loginData.username)
           localStorage.setItem('nz-prometheus-federation-enabled', res.data.prometheusFederationEnabled)
+          localStorage.setItem('nz-language', this.lang)
           this.loginSuccess(res)
         } else {
           this.authToken = res.data.authToken
diff --git a/nezha-fronted/src/components/common/rightBox/profileBox.vue b/nezha-fronted/src/components/common/rightBox/profileBox.vue
new file mode 100644
index 000000000..6918dec90
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/profileBox.vue
@@ -0,0 +1,155 @@
+<template>
+  <div v-clickoutside="{obj: editProfile, func: esc}" class="right-box right-box-profile">
+    <div class="right-box__header">
+      <div class="header__title">{{$t('profile.editProfile')}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editProfile, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="profileForm" :model="editProfile" :rules="rules" label-position="top" label-width="120px">
+          <el-form-item :label="$t('profile.name')" prop="name">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.name" size="small" type="text"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('profile.username')" prop="username">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.username" size="small" type="text"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('profile.email')" prop="email">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.email" size="small" type="text"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('profile.mobile')" prop="mobile">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.mobile" size="small" type="text"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('profile.role')" v-if="editProfile.roles[0].i18n != ''" prop="roles">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].i18n" size="small" type="text"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('profile.role')" v-else prop="roles">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].i18n" size="small" type="text"></el-input>
+          </el-form-item>
+          <!--language-->
+          <el-form-item :label="$t('config.user.language')" prop="lang">
+            <el-select id="account-input-language"
+                       class="right-box__select"
+                       v-model="editProfile.lang"
+                       clearable
+                       collapse-tags
+                       placeholder=""
+                       popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
+                       size="small">
+              <template v-for="item in languageList">
+                <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
+              </template>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('profile.source')" prop="source">
+            <el-input maxlength="64" show-word-limit v-model="editProfile.source" size="small" type="text"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{obj: editProfile, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import editRigthBox from '@/components/common/mixin/editRigthBox'
+
+export default {
+  name: 'modelbox',
+  components: {
+  },
+  props: {
+    obj: {
+      type: Object
+    }
+  },
+  computed: {},
+  mixins: [editRigthBox],
+  data () {
+    return {
+      url: 'sys/user/profile',
+      rightBox: { profile: { show: false } },
+      editProfile: {},
+      languageList: [
+        { value: 'en', label: 'English' },
+        { value: 'cn', label: '简体中文' }
+      ],
+      roles: [],
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        username: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        email: [
+          { type: 'email', message: this.$t('validate.email') },
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        mobile: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        roles: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        lang: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        source: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    obj: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.isEdit = true
+        this.editProfile = JSON.parse(JSON.stringify(n))
+      }
+    }
+  },
+  created () {},
+  methods: {
+    clickoutside () {
+      this.esc(false)
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      this.$refs.profileForm.validate((valid) => {
+        if (valid) {
+          if (this.editProfile.id) {
+            this.editProfile.roleIds = this.editProfile.roles[0].id
+            this.$put(this.url, this.editProfile).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '@/assets/css/common/rightboxcommon.scss';
+</style>
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index 1f715a82b..27fccffff 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -157,13 +157,13 @@ export default {
         document.location.href = '/'
       })
     },
-    refreshLang () {
-      this.language = localStorage.getItem('nz-language')
-      this.$i18n.locale = this.language
-      this.$nextTick(() => {
-        window.location.reload()
-      })
-    },
+    // refreshLang () {
+    //   this.language = localStorage.getItem('nz-language')
+    //   this.$i18n.locale = this.language
+    //   this.$nextTick(() => {
+    //     // window.location.reload()
+    //   })
+    // },
     showPinDialog () {
       // this.showChangePin = true
       this.$router.push({
@@ -184,7 +184,7 @@ export default {
     initEvent () {
       bus.$on('login', () => {
         this.username = sessionStorage.getItem('nz-username')
-        this.refreshLang()
+        // this.refreshLang()
       })
       if (window.history && window.history.pushState) {
         history.pushState(null, null, document.URL)
diff --git a/nezha-fronted/src/components/page/config/profile.vue b/nezha-fronted/src/components/page/config/profile.vue
index cd736c9ae..4d9a9d442 100644
--- a/nezha-fronted/src/components/page/config/profile.vue
+++ b/nezha-fronted/src/components/page/config/profile.vue
@@ -30,6 +30,10 @@
           </el-popover>
         </div>
       </div>
+      <button id="asset-edit-cancel" class="profile-left__btn" @click="profileBox">
+        <span><i class="nz-icon nz-icon-edit" style="color: #666666;margin-right: 5px;font-size: 18px"></i></span>
+        <span>{{$t('profile.edit')}}</span>
+      </button>
       <div v-for="item in tableProfile" :key="item.id" class="profile-left__center">
         <span style="margin:0 18px 0 0"><i :class="item.icon"></i></span>
         <div class="profile-left__center-title">
@@ -39,7 +43,7 @@
         </div>
       </div>
       <div class="profile-left__center">
-       <span style="margin:0 10px 10px 0"><i class="nz-icon nz-icon-yanzhengma" style="color: orange"></i></span>
+       <span style="margin:0 18px 10px 0"><i class="nz-icon nz-icon-zhongzhi2FA1" style="color: orange;"></i></span>
        <div class="profile-left__center-title">
          <div>{{$t('profile.twoFactorAuthentication')}}</div>
        </div>
@@ -126,20 +130,27 @@
         </button>
       </div>
     </el-dialog>
+    <transition name="right-box">
+      <profile-box v-if="rightBox.show" :obj="object" @close="closeRightBox"></profile-box>
+    </transition>
   </div>
 </template>
 
 <script>
 import operationRecord from './operationRecord'
-import QRCode from "qrcodejs2";
-import MessageBox from "element-ui/packages/message-box/src/main";
-import i18n from "@/components/common/i18n";
+import QRCode from "qrcodejs2"
+import MessageBox from "element-ui/packages/message-box/src/main"
+import i18n from "@/components/common/i18n"
+import profileBox from '@/components/common/rightBox/profileBox'
+import dataList from '@/components/common/mixin/dataList'
 
 export default {
   name: 'profile',
   components: {
-    operationRecord
+    operationRecord,
+    profileBox
   },
+  mixins: [dataList],
   data () {
     return {
       username: sessionStorage.getItem('nz-username'),
@@ -152,6 +163,18 @@ export default {
       mfaLevel: 0,
       authKey: '',
       authToken: '',
+      url: 'sys/user/profile',
+      object: {},
+      blankObject: { // 空白对象
+        id: '',
+        name: '',
+        username: '',
+        role: '',
+        email: '',
+        mobile: '',
+        language: 'en',
+        source: ''
+      },
       // 右侧列表
       tableProfile: [
         {
@@ -201,6 +224,9 @@ export default {
   mounted () {
     this.personalCenter()
   },
+  beforeUpdate () {
+    this.personalCenter()
+  },
   methods: {
     // 请求后端数据
     personalCenter () {
@@ -209,7 +235,11 @@ export default {
           if (response.code === 200) {
             this.userList = response.user
             this.mfaLevel = response.user.mfaLevel
-            this.tableProfile[0].prop = this.userList.roles[0].i18n
+            if (response.user.roles[0].i18n) {
+              this.tableProfile[0].prop = this.userList.roles[0].i18n
+            } else {
+              this.tableProfile[0].prop = this.userList.roles[0].name
+            }
             this.tableProfile[1].prop = this.userList.email
             this.tableProfile[2].prop = this.userList.mobile
             if (this.userList.lang == 'cn') {
@@ -278,6 +308,12 @@ export default {
         })
       })
     },
+    profileBox () {
+      this.rightBox.show = true
+      this.$get(this.url).then(res => {
+        this.object = res.user
+      })
+    },
     closeDialog () {
       this.authBindShow = false
       this.bindAuthCode = ''
@@ -353,10 +389,11 @@ export default {
     height: calc(100% - 10px);
     width: 360px;
     overflow: auto;
+    position: relative;
     .profile-left__header {
       height: 200px;
-      width: 100%;
-      margin: 10px 0;
+      width: calc(100% - 18px);
+      margin:0 0 50px 18px;
       text-align: center;
       display: flex;
       justify-content: flex-start;
@@ -438,6 +475,26 @@ export default {
         }
       }
     }
+    .profile-left__btn {
+      border: 1px solid rgba(0,0,0,0.15);
+      border-radius: 4px;
+      background: #fff;
+      min-width: 132px;
+      height: 36px;
+      position: absolute;
+      top: 175px;
+      left: 100px;
+      padding: 0 20px;
+      cursor: pointer;
+      span {
+        font-family: Roboto-Regular;
+        font-size: 14px;
+        color: #333333;
+        text-align: left;
+        line-height: 22px;
+        font-weight: 400;
+      }
+    }
     .profile-left__center:nth-of-type(7) {
       margin-bottom: 0;
     }
@@ -459,7 +516,6 @@ export default {
         color: #8871DB;
       }
       .profile-left__center-title {
-        margin-left: 8px;
         margin-top: 1px;
         div:nth-of-type(1) {
           padding-bottom: 5px;

From 379d355621af124b796594afeb4cac4fdb2623df Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 14 Oct 2021 17:03:23 +0800
Subject: [PATCH 08/10] =?UTF-8?q?fix:=20=E4=B8=AA=E4=BA=BA=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E9=A1=B5=E9=9D=A2=EF=BC=8C=E7=BC=96=E8=BE=91=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E8=BE=93=E5=85=A5=E6=A1=86=E6=9D=83=E9=99=90=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/rightBox/profileBox.vue | 24 ++++---------------
 1 file changed, 4 insertions(+), 20 deletions(-)

diff --git a/nezha-fronted/src/components/common/rightBox/profileBox.vue b/nezha-fronted/src/components/common/rightBox/profileBox.vue
index 6918dec90..e84fa691b 100644
--- a/nezha-fronted/src/components/common/rightBox/profileBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/profileBox.vue
@@ -13,7 +13,7 @@
             <el-input maxlength="64" show-word-limit v-model="editProfile.name" size="small" type="text"></el-input>
           </el-form-item>
           <el-form-item :label="$t('profile.username')" prop="username">
-            <el-input maxlength="64" show-word-limit v-model="editProfile.username" size="small" type="text"></el-input>
+            <el-input maxlength="64" show-word-limit v-model="editProfile.username" disabled size="small" type="text"></el-input>
           </el-form-item>
           <el-form-item :label="$t('profile.email')" prop="email">
             <el-input maxlength="64" show-word-limit v-model="editProfile.email" size="small" type="text"></el-input>
@@ -22,10 +22,10 @@
             <el-input maxlength="64" show-word-limit v-model="editProfile.mobile" size="small" type="text"></el-input>
           </el-form-item>
           <el-form-item :label="$t('profile.role')" v-if="editProfile.roles[0].i18n != ''" prop="roles">
-            <el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].i18n" size="small" type="text"></el-input>
+            <el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].i18n" disabled size="small" type="text"></el-input>
           </el-form-item>
           <el-form-item :label="$t('profile.role')" v-else prop="roles">
-            <el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].i18n" size="small" type="text"></el-input>
+            <el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].i18n" disabled size="small" type="text"></el-input>
           </el-form-item>
           <!--language-->
           <el-form-item :label="$t('config.user.language')" prop="lang">
@@ -43,7 +43,7 @@
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('profile.source')" prop="source">
-            <el-input maxlength="64" show-word-limit v-model="editProfile.source" size="small" type="text"></el-input>
+            <el-input maxlength="64" show-word-limit v-model="editProfile.source" disabled size="small" type="text"></el-input>
           </el-form-item>
         </el-form>
       </div>
@@ -87,24 +87,8 @@ export default {
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
-        username: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        email: [
-          { type: 'email', message: this.$t('validate.email') },
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        mobile: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        roles: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
         lang: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        source: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ]
       }
     }

From f09fd1285e35e60fddeb3ea1259cafd2d222554d Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 14 Oct 2021 18:14:36 +0800
Subject: [PATCH 09/10] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dprofile=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E4=B8=80=E7=9B=B4=E8=AF=B7=E6=B1=82=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/rightBox/profileBox.vue         | 3 ++-
 nezha-fronted/src/components/page/config/profile.vue      | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/nezha-fronted/src/components/common/rightBox/profileBox.vue b/nezha-fronted/src/components/common/rightBox/profileBox.vue
index e84fa691b..652b9fdcf 100644
--- a/nezha-fronted/src/components/common/rightBox/profileBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/profileBox.vue
@@ -25,7 +25,7 @@
             <el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].i18n" disabled size="small" type="text"></el-input>
           </el-form-item>
           <el-form-item :label="$t('profile.role')" v-else prop="roles">
-            <el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].i18n" disabled size="small" type="text"></el-input>
+            <el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].name" disabled size="small" type="text"></el-input>
           </el-form-item>
           <!--language-->
           <el-form-item :label="$t('config.user.language')" prop="lang">
@@ -123,6 +123,7 @@ export default {
               if (res.code === 200) {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
+                this.$emit('clickProfile')
               } else {
                 this.$message.error(res.msg)
               }
diff --git a/nezha-fronted/src/components/page/config/profile.vue b/nezha-fronted/src/components/page/config/profile.vue
index 4d9a9d442..15b7b6c86 100644
--- a/nezha-fronted/src/components/page/config/profile.vue
+++ b/nezha-fronted/src/components/page/config/profile.vue
@@ -131,7 +131,7 @@
       </div>
     </el-dialog>
     <transition name="right-box">
-      <profile-box v-if="rightBox.show" :obj="object" @close="closeRightBox"></profile-box>
+      <profile-box v-if="rightBox.show" :obj="object" @clickProfile="clickProfile" @close="closeRightBox"></profile-box>
     </transition>
   </div>
 </template>
@@ -224,9 +224,6 @@ export default {
   mounted () {
     this.personalCenter()
   },
-  beforeUpdate () {
-    this.personalCenter()
-  },
   methods: {
     // 请求后端数据
     personalCenter () {
@@ -314,6 +311,9 @@ export default {
         this.object = res.user
       })
     },
+    clickProfile () {
+      this.personalCenter()
+    },
     closeDialog () {
       this.authBindShow = false
       this.bindAuthCode = ''

From 3465211ab5ae5a85296cc7d552b6a075f7e11fb5 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 14 Oct 2021 21:33:57 +0800
Subject: [PATCH 10/10] =?UTF-8?q?NEZ-1061=20perf:=20=E8=AA=BF=E6=95=B4?=
 =?UTF-8?q?=E7=99=BB=E9=8C=84=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/common/login.vue | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 90c4e8295..5c1b97662 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -376,7 +376,7 @@ export default {
 
 .logo {
   z-index: 2;
-  width: 460px;
+  width: 392px;
   img{
     width: 100%;
   }
@@ -385,25 +385,21 @@ export default {
   z-index: 2;
   background: rgba(106,106,106,0.5);
   border-radius: 8px;
-  padding: 55px 50px 0px 50px;
+  padding: 55px 50px 0 50px;
 }
 .login-box {
   z-index: 2;
-  width: 460px;
+  width: 392px;
   .login-label{
-    font-family: Roboto-Medium;
     font-size: 22px;
     color: #FFFFFF;
     font-weight: 500;
-    color: #ffffff;
   }
   .login-label-foot{
-    font-family: Roboto-Medium;
     font-size: 14px;
     color: #DEDEDE;
     line-height: 20px;
     font-weight: 500;
-    color: #DEDEDE;
     word-break: keep-all;
     width: 90%;
   }
@@ -411,7 +407,7 @@ export default {
 
 .login-box .login-input {
   padding: 12px 0;
-  height: 60px;
+  height: 46px;
   position: relative;
 }
 .login-box .login-input .nz-icon {
@@ -437,7 +433,7 @@ export default {
 .login-foot {
   padding-top: 15px;
   display: flex;
-  width: 460px;
+  width: 392px;
   justify-content: space-between;
   position: relative;
 }
@@ -491,8 +487,8 @@ export default {
 }
 .login-foot-lang-list::before {
   content: " ";
-  width: 0px;
-  height: 0px;
+  width: 0;
+  height: 0;
   border-width: 10px;
   border-style: solid;
   border-color: transparent transparent rgba(0, 0, 0, 0.55) transparent;