gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-924 fix: header调整

Browse Source
This commit is contained in:
@changcode
2021-08-20 17:09:39 +08:00
parent 1bc1c91277
commit e017d7f014
8 changed files with 96 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
nezha-fronted/src/assets/css/common.scss
View File

@@ -135,3 +135,30 @@
.data-column__span:first-letter,.el-tabs__item:first-letter,.header__title:first-letter,.operation-dropdown-text:first-letter{ .data-column__span:first-letter,.el-tabs__item:first-letter,.header__title:first-letter,.operation-dropdown-text:first-letter{
text-transform: capitalize; text-transform: capitalize;
} }
.personal-dropdown {
border-bottom: 1px solid #E7EAED;
padding: 0 20px;
.personal-dropdown__username {
max-width: 109px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
vertical-align: middle;
font-family: Roboto-Regular;
font-size: 15px;
color: #333333;
font-weight: 400;
}
.personal-dropdown__name {
max-width: 109px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
vertical-align: middle;
font-family: Roboto-Regular;
font-size: 14px;
color: #999999;
font-weight: 400;
padding-bottom: 10px;
}
}

4
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -365,14 +365,14 @@
} }
.profile { .profile {
.main-list { .main-list {
height: calc(100% + 7px); height: calc(100% + 13px);
} }
.top-tools { .top-tools {
padding: 0 20px 14px 20px; padding: 0 20px 14px 20px;
} }
.list-page .nz-table2 .el-table:not(.chart-table) .gutter { .list-page .nz-table2 .el-table:not(.chart-table) .gutter {
position: fixed; position: fixed;
right: 21px; right: 31px;
height: 42px; height: 42px;
border-bottom: 1px solid #E7EAED; border-bottom: 1px solid #E7EAED;
background-color: white; background-color: white;

2
nezha-fronted/src/components/common/language/cn.js
View File

@@ -1766,7 +1766,7 @@ const cn = {
email: 'Email', email: 'Email',
mobile: '手机', mobile: '手机',
source: '来源', source: '来源',
twoFactorAuthentication: '双重身份验证' twoFactorAuthentication: '双因子认证'
}, },
...zhLocale ...zhLocale
} }

9
nezha-fronted/src/components/common/login.vue
View File

@@ -167,6 +167,15 @@ export default {
// 登录成功，记录用户名、token和lang // 登录成功，记录用户名、token和lang
this.authToken = res.data.authToken this.authToken = res.data.authToken
sessionStorage.setItem('nz-token', res.data.authToken) sessionStorage.setItem('nz-token', res.data.authToken)
this.$get('/sys/user/profile').then(response => {
if (response.code === 200) {
const userList = response.user
console.log(userList)
// 保存当前用户的 userId
localStorage.setItem('nz-user-id', userList.id)
localStorage.setItem('nz-user-name', userList.name)
}
})
if (res.data.authFlag === 1) { if (res.data.authFlag === 1) {
if (res.data.authBind === 0) { if (res.data.authBind === 0) {
this.verifyShow = true this.verifyShow = true

31
nezha-fronted/src/components/layout/header.vue
View File

@@ -44,13 +44,17 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<el-dropdown> <el-dropdown>
<div class='login-user header-menu--item'>{{username}}&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></div> <div class="personal-avatar"><span>{{username.substr(0, 1)}}</span>&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu style="width: 142px" slot="dropdown">
<div class="personal-dropdown">
<div class="personal-dropdown__username">{{username}}</div>
<div class="personal-dropdown__name">@{{name}}</div>
</div>
<el-dropdown-item> <el-dropdown-item>
<div id="header-to-changepin" @click="showPinDialog">{{$t('overall.personalCenter')}}</div> <div id="header-to-profile" @click="showPinDialog"><i class="nz-icon nz-icon-user"></i>{{$t('overall.personalCenter')}}</div>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item> <el-dropdown-item>
<div id="header-to-logout" @click="logout">{{$t('overall.signOut')}}</div> <div id="header-to-logout" @click="logout"><i class="nz-icon nz-icon-exit"></i>{{$t('overall.signOut')}}</div>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
@@ -74,8 +78,8 @@ export default {
data () { data () {
return { return {
username: sessionStorage.getItem('nz-username'), username: sessionStorage.getItem('nz-username'),
name: localStorage.getItem('nz-user-name'),
language: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en', language: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en',
// 顶部菜单相关 // 顶部菜单相关
createMenu: [ // 新增按钮内容 createMenu: [ // 新增按钮内容
{ {
@@ -260,7 +264,22 @@ export default {
.header { .header {
display: flex; display: flex;
height: 50px; height: 50px;
.personal-avatar {
span {
width: 32px;
height: 32px;
display: inline-block;
line-height: 32px;
background: rgba(60,146,241,0.10);
font-family: PingFangSC-Medium;
font-size: 14px;
color: #3C92F1;
letter-spacing: 0;
font-weight: 500;
text-transform: capitalize;
border-radius: 100%;
}
}
.header-menu { .header-menu {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

21
nezha-fronted/src/components/page/config/operationRecord.vue
View File

@@ -8,7 +8,7 @@
@search="search" @search="search"
:search-msg="searchMsg"> :search-msg="searchMsg">
<template v-slot:top-tool-left> <template v-slot:top-tool-left>
<div class="profile-right__tabs-title" style="margin-left: -20px"> <div class="profile-right__tabs-title">
<div class="profile-right__tabs-active" :class="{'is-active': profileShow}" @click="tabsActive">{{$t('profile.operationRecord')}}</div> <div class="profile-right__tabs-active" :class="{'is-active': profileShow}" @click="tabsActive">{{$t('profile.operationRecord')}}</div>
<div class="profile-right__tabs-active" :class="{'is-active': !profileShow}" @click="tabsActiveTow">{{$t('profile.changePassword')}}</div> <div class="profile-right__tabs-active" :class="{'is-active': !profileShow}" @click="tabsActiveTow">{{$t('profile.changePassword')}}</div>
</div> </div>
@@ -111,9 +111,10 @@ export default {
this.profileShow = false this.profileShow = false
this.layout = [] this.layout = []
}, },
getTableData (params) { getTableData () {
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo) this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize) this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
// 获取 userId 作为过滤条件传给后台
this.$set(this.searchLabel, 'userId', localStorage.getItem('nz-user-id')) this.$set(this.searchLabel, 'userId', localStorage.getItem('nz-user-id'))
this.tools.loading = true this.tools.loading = true
this.$get(this.url, { ...this.searchLabel }).then(response => { this.$get(this.url, { ...this.searchLabel }).then(response => {
@@ -132,7 +133,7 @@ export default {
} }
} }
}) })
}, }
} }
} }
</script> </script>
@@ -140,12 +141,11 @@ export default {
.top-tool-left { .top-tool-left {
.profile-right__tabs-title { .profile-right__tabs-title {
display: flex; display: flex;
justify-content: flex-start; justify-content: space-around;
position: relative; align-items: flex-start;
padding-top: 19px;
.profile-right__tabs-active { .profile-right__tabs-active {
margin-right: 30px; padding:0 10px;
margin-left: -2px;
padding-top: 25px;
font-size: 14px; font-size: 14px;
height: 30px; height: 30px;
color: #666666; color: #666666;
@@ -153,7 +153,6 @@ export default {
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
opacity: .6; opacity: .6;
transform: translateX(20%);
} }
.is-active { .is-active {
border-bottom: 2px solid #FA901C; border-bottom: 2px solid #FA901C;
@@ -167,9 +166,9 @@ export default {
} }
.profile-hr { .profile-hr {
position: absolute; position: absolute;
top: 55px; top: 50px;
width: calc(100% - 40px); width: calc(100% - 40px);
height: 2px; height: 1px;
background-color: #eceef0; background-color: #eceef0;
} }
} }

32
nezha-fronted/src/components/page/config/profile.vue
View File

@@ -2,7 +2,7 @@
<div class="profile"> <div class="profile">
<div class="profile-left"> <div class="profile-left">
<div class="profile-left__header"> <div class="profile-left__header">
<div class="profile-left__header-img"> <div class="profile-left__header-avatar">
<span>{{username.substr(0, 1)}}</span> <span>{{username.substr(0, 1)}}</span>
</div> </div>
<div class="profile-left__header-username"> <div class="profile-left__header-username">
@@ -16,7 +16,17 @@
</span> </span>
<span class="profile-left__header-username__span" v-show="mfaEnable == '1' || mfaLevel > 0">2FA</span></div> <span class="profile-left__header-username__span" v-show="mfaEnable == '1' || mfaLevel > 0">2FA</span></div>
</el-popover> </el-popover>
<div>@{{userList.name}}</div> <el-popover
placement="right-start"
style="line-height: .1;"
trigger="hover"
:content="'@'+userList.name">
<div slot="reference">
<span :class="(mfaEnable == '1' || mfaLevel > 0)?'MfaName':'name'">
@{{userList.name}}
</span>
</div>
</el-popover>
</div> </div>
</div> </div>
<div v-for="item in tableProfile" :key="item.id" class="profile-left__center"> <div v-for="item in tableProfile" :key="item.id" class="profile-left__center">
@@ -34,15 +44,6 @@
</div> </div>
</div> </div>
<div class="profile-left__button table-operation-items"> <div class="profile-left__button table-operation-items">
<!-- <el-button v-show="this.userList.mfaLevel == 0 && this.userList.mfaAuthEnable == 0 ? true : false" size="small" class="profile-left__button-footer__btn footer__btns">-->
<!-- <span>{{$t('profile.enable')}}</span>-->
<!-- </el-button>-->
<!-- <el-button @click="profileDisable" size="small" v-show="this.userList.mfaLevel == 0 && this.userList.mfaAuthEnable == 0 ? false : true" :class="{'table-operation-item&#45;&#45;disable': this.userList.mfaLevel == 2 || this.userList.mfaAuthEnable ==1}" :disabled="this.userList.mfaLevel == 2 || this.userList.mfaAuthEnable == 1" class="profile-left__button-footer__btn footer__btns table-operation-item">-->
<!-- <span>{{$t('profile.close')}}</span>-->
<!-- </el-button>-->
<!-- <el-button @click="profileMfaLevel" size="small" v-show="this.userList.mfaLevel == 0 && this.userList.mfaAuthEnable == 0 ? false : true" :class="{'table-operation-item&#45;&#45;disable': this.userList.mfaLevel == 2 || this.userList.mfaAuthEnable ==1}" class="profile-left__button-footer__btn footer__btn table-operation-item">-->
<!-- <span>{{$t('profile.update')}}</span>-->
<!-- </el-button>-->
<el-button @click="profileEnable" size="small" class="profile-left__button-footer__btn footer__btn table-operation-item" v-if="mfaEnable != '1' && mfaLevel == 0"> <el-button @click="profileEnable" size="small" class="profile-left__button-footer__btn footer__btn table-operation-item" v-if="mfaEnable != '1' && mfaLevel == 0">
<span>{{$t('profile.enable')}}</span> <span>{{$t('profile.enable')}}</span>
</el-button> </el-button>
@@ -65,7 +66,9 @@
</div> </div>
</div> </div>
</div> </div>
<div style="width: calc(100% - 370px);">
<operation-record /> <operation-record />
</div>
<el-dialog :visible.sync="authBindShow" :title="$t('login.verifyDialogTitle')" :modal-append-to-body='false' <el-dialog :visible.sync="authBindShow" :title="$t('login.verifyDialogTitle')" :modal-append-to-body='false'
:show-close="true" width="620px" class="nz-dialog" @closed="closeDialog"> :show-close="true" width="620px" class="nz-dialog" @closed="closeDialog">
@@ -207,7 +210,6 @@ export default {
this.tableProfile[1].prop = this.userList.email this.tableProfile[1].prop = this.userList.email
this.tableProfile[2].prop = this.userList.mobile this.tableProfile[2].prop = this.userList.mobile
this.tableProfile[3].prop = this.userList.source this.tableProfile[3].prop = this.userList.source
localStorage.setItem('nz-user-id', this.userList.id)
} }
resolve() resolve()
}) })
@@ -349,7 +351,7 @@ export default {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.profile-left__header-img { .profile-left__header-avatar {
height: 80px; height: 80px;
width: 80px; width: 80px;
line-height: 80px; line-height: 80px;
@@ -379,6 +381,7 @@ export default {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
padding-top: 4px;
} }
.MfaName{ .MfaName{
display: inline-block; display: inline-block;
@@ -387,6 +390,7 @@ export default {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
padding-top: 4px;
} }
div:nth-of-type(1) { div:nth-of-type(1) {
font-family: Roboto-Medium; font-family: Roboto-Medium;
@@ -396,7 +400,7 @@ export default {
letter-spacing: 0; letter-spacing: 0;
line-height: 22px; line-height: 22px;
font-weight: 500; font-weight: 500;
padding: 8px 0 8px 0; padding: 9px 0 0 0;
} }
div:nth-of-type(2) { div:nth-of-type(2) {
font-family: Roboto-Regular; font-family: Roboto-Regular;

15
nezha-fronted/src/components/page/config/profileChangePin.vue
View File

@@ -2,18 +2,6 @@
<div class="profile-change__Pin"> <div class="profile-change__Pin">
<div class="profile-change__Pin-from"> <div class="profile-change__Pin-from">
<el-form :model="user" label-position = "top" label-width="150px" :rules="rules" ref="changePinForm"> <el-form :model="user" label-position = "top" label-width="150px" :rules="rules" ref="changePinForm">
<!-- <el-form-item :label="$t('config.user.account')" prop="username" v-show="curUser != sysUser">-->
<!-- <el-input type="text" autocomplete="false" v-model="user.username" disabled id="change-pin-username"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('config.user.oldPin')" prop="pin">-->
<!-- <el-input type="password" autocomplete="false" :show-password="true" v-model="user.pin" maxlength="20" :placeholder="$t('config.user.inputOldPin')" id="change-pin-pin"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('config.user.newPin')" prop="newPin">-->
<!-- <el-input type="password" autocomplete="false" :show-password="true" v-model="user.newPin" maxlength="20" :placeholder="$t('config.user.inputNewPin')" id="change-pin-newPin"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('config.user.confirmPin')" prop="confirmPin">-->
<!-- <el-input type="password" autocomplete="false" :show-password="true" v-model="user.confirmPin" maxlength="20" :placeholder="$t('config.user.inputConfirmPin')" id="change-pin-confirmPin"></el-input>-->
<!-- </el-form-item>-->
<el-form-item class="profile-change__Pin-input" :label="$t('profile.oldPassword')" prop="pin"> <el-form-item class="profile-change__Pin-input" :label="$t('profile.oldPassword')" prop="pin">
<el-input v-model="user.pin" type="password" size="small"/> <el-input v-model="user.pin" type="password" size="small"/>
</el-form-item> </el-form-item>
@@ -103,6 +91,9 @@ export default {
this.$get('/sys/user/pin?oldPin=' + paramObj.pin + '&newPin=' + paramObj.newPin).then(response => { this.$get('/sys/user/pin?oldPin=' + paramObj.pin + '&newPin=' + paramObj.newPin).then(response => {
if (response && response.code == 200) { if (response && response.code == 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') }) this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
this.user.pin = ''
this.user.newPin = ''
this.user.confirmPin = ''
this.close() this.close()
} else { } else {
this.$message.error(response.msg) this.$message.error(response.msg)