NEZ-1059 feat: 个人中心 增加 编辑按钮，用户可以编辑个人信息

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: '当前密码',

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',

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

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>

nezha-fronted/src/components/layout/header.vue

@@ -157,13 +157,13 @@ export default {
         document.location.href = '/'
       })
     },
-    refreshLang () {
+    // refreshLang () {
-      this.language = localStorage.getItem('nz-language')
+    //   this.language = localStorage.getItem('nz-language')
-      this.$i18n.locale = this.language
+    //   this.$i18n.locale = this.language
-      this.$nextTick(() => {
+    //   this.$nextTick(() => {
-        window.location.reload()
+    //     // 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)

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 QRCode from "qrcodejs2"
-import MessageBox from "element-ui/packages/message-box/src/main";
+import MessageBox from "element-ui/packages/message-box/src/main"
-import i18n from "@/components/common/i18n";
+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
+            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%;
+      width: calc(100% - 18px);
-      margin: 10px 0;
+      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;