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

NEZ-2009 perf:新建成功引导样式修改

Browse Source
This commit is contained in:
zyh
2022-07-06 18:58:40 +08:00
parent aa5c6cb42f
commit 9816c14967
6 changed files with 76 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -439,20 +439,36 @@ input,
textarea { textarea {
font-family: Inter-Regular !important; font-family: Inter-Regular !important;
} }
.custom-message{
display: flex;
align-items: center;
.message-right {
padding-right: 128px;
position: relative;
}
.message-right.hidden{
display: none;
}
.message-next { .message-next {
vertical-align: bottom; width: 86px;
float: unset; height: 24px;
font-size: 10px; line-height: 24px;
margin-left: 190px; text-align: center;
.message-next-continue { border:1px solid $--message-success-font-color;
color: $--color-text-primary; border-radius: 4px;
font-weight: 400; position: absolute;
} right: 10px;
.message-next-content { top: 0;
color: $--color-text-link; bottom: 0;
font-weight: 600; margin: auto;
cursor: pointer;
font-size: 14px;
span{
font-size: 12px;
} }
} }
}
.document-copy-block { .document-copy-block {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;

50
nezha-fronted/src/components/common/mixin/editRigthBox.js
View File

@@ -1,3 +1,5 @@
import i18n from '@/components/common/i18n'
import { getUUID } from '../js/common'
export default { export default {
data () { data () {
return { return {
@@ -7,7 +9,8 @@ export default {
params: {}, params: {},
emit: '' emit: ''
}, },
closeMessage: '' closeMessage: null,
uuid: getUUID()
} }
}, },
mounted () { mounted () {
@@ -18,25 +21,55 @@ export default {
} }
}, },
methods: { methods: {
messageShow (msg, route, params, showNext = false, nextText = 'setup.next', emit) { // 开启计时器 对message赋值
coutTime (msg, showNext, nextText, second) {
if (!this.closeMessage) {
return false
}
this.closeMessage.message =
`<div class="custom-message">
<div class="message-left">${msg}</div>
<div class="message-right ${showNext ? '' : 'hidden'}">
<span>，${i18n.t('tip.clickNext')}${i18n.t(nextText)}</span>
<span id="assetAdd${this.uuid}" class="message-next">${i18n.t('tip.next')}
<span>(${second}s)</span>
</span>
</div>
</div>`
this.$nextTick(() => {
const assetAdd = document.getElementById(`assetAdd${this.uuid}`)
assetAdd.addEventListener('click', this.saveNext)
})
setTimeout(() => {
--second
if (second === 0) {
this.closeMessage.close()
} else {
this.coutTime(msg, showNext, nextText, second)
}
}, 1000)
},
messageShow (msg, route, params, showNext = false, nextText = '', emit) {
// 如果存在弹框 则先清理掉
this.messageParams.route = route this.messageParams.route = route
this.messageParams.params = params this.messageParams.params = params
this.messageParams.emit = emit this.messageParams.emit = emit
this.closeMessage = this.$message({ this.closeMessage = this.$message({
duration: showNext ? 5000 : 2000, duration: showNext ? 30000 : 3000,
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
type: 'success', type: 'success',
message: `<div>${msg} <span class="message-next ${showNext ? '' : 'hidden'}"><span class="message-next-continue">${this.$t('overall.continue')}</span> <span id="assetAdd" class="message-next-content">${this.$t(nextText)}</span></span></div>`, message: '',
onClose: () => { onClose: () => {
const assetAdd = document.getElementById('assetAdd') const assetAdd = document.getElementById(`assetAdd${this.uuid}`)
assetAdd.removeEventListener('click', this.saveNext) assetAdd.removeEventListener('click', this.saveNext)
this.closeMessage = '' this.closeMessage = null
} }
}) })
const assetAdd = document.getElementById('assetAdd') // 对message赋值
assetAdd.addEventListener('click', this.saveNext) this.coutTime(msg, showNext, nextText, 30)
}, },
saveNext () { saveNext () {
this.closeMessage.close()
if (!this.messageParams.route) { if (!this.messageParams.route) {
this.$store.dispatch(this.messageParams.emit, this.messageParams.params) this.$store.dispatch(this.messageParams.emit, this.messageParams.params)
return return
@@ -45,7 +78,6 @@ export default {
path: this.messageParams.route, path: this.messageParams.route,
query: this.messageParams.params query: this.messageParams.params
}) })
this.closeMessage.close()
} }
}, },
destroyed () { destroyed () {

4
nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
View File

@@ -744,7 +744,7 @@ export default {
this.$put(this.url, params).then(res => { this.$put(this.url, params).then(res => {
this.prevent_opt.save = false this.prevent_opt.save = false
if (res.code === 200) { if (res.code === 200) {
this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { assetId: res.data.id }, false, 'guide.addEndpoint') this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { assetId: res.data.id }, false, 'tip.endpoint')
this.esc(true) this.esc(true)
} else { } else {
this.$message.error(res.msg) this.$message.error(res.msg)
@@ -754,7 +754,7 @@ export default {
this.$post(this.url, params).then(res => { this.$post(this.url, params).then(res => {
this.prevent_opt.save = false this.prevent_opt.save = false
if (res.code === 200) { if (res.code === 200) {
this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { assetId: res.data.id }, true, 'guide.addEndpoint') this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { assetId: res.data.id }, true, 'tip.endpoint')
this.esc(true) this.esc(true)
} else { } else {
this.$message.error(res.msg) this.$message.error(res.msg)

4
nezha-fronted/src/components/common/rightBox/dcBox.vue
View File

@@ -124,7 +124,7 @@ export default {
this.$put('/dc', param).then(response => { this.$put('/dc', param).then(response => {
this.prevent_opt.save = false this.prevent_opt.save = false
if (response.code === 200) { if (response.code === 200) {
this.messageShow(this.$t('tip.saveSuccess'), '', { dcId: response.data.id, cabinetBoxShow: true }, false, 'overall.createCabinet', 'addCabinet') this.messageShow(this.$t('tip.saveSuccess'), '', { dcId: response.data.id, cabinetBoxShow: true }, false, 'tip.cabinet', 'addCabinet')
this.esc(true) this.esc(true)
} else { } else {
this.$message.error(response.msg) this.$message.error(response.msg)
@@ -147,7 +147,7 @@ export default {
this.$post('/dc', param).then(response => { this.$post('/dc', param).then(response => {
this.prevent_opt.save = false this.prevent_opt.save = false
if (response.code === 200) { if (response.code === 200) {
this.messageShow(this.$t('tip.saveSuccess'), '', { dcId: response.data.id, cabinetBoxShow: true }, true, 'overall.createCabinet', 'addCabinet') this.messageShow(this.$t('tip.saveSuccess'), '', { dcId: response.data.id, cabinetBoxShow: true }, true, 'tip.cabinet', 'addCabinet')
this.esc(true) this.esc(true)
} else { } else {
this.$message.error(response.msg) this.$message.error(response.msg)

4
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -935,7 +935,7 @@ export default {
this.$put('monitor/module', params).then(response => { this.$put('monitor/module', params).then(response => {
if (response.code === 200) { if (response.code === 200) {
// this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') }) // this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { projectId: this.editModule.projectId, moduleId: response.data.id }, false, 'guide.addEndpoint') this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { projectId: this.editModule.projectId, moduleId: response.data.id }, false, 'tip.endpoint')
this.$store.commit('setReloadFacade') this.$store.commit('setReloadFacade')
this.esc(true) this.esc(true)
} else { } else {
@@ -946,7 +946,7 @@ export default {
} else { } else {
this.$post('monitor/module', params).then(response => { this.$post('monitor/module', params).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { projectId: this.editModule.projectId, moduleId: response.data.id }, true, 'guide.addEndpoint') this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { projectId: this.editModule.projectId, moduleId: response.data.id }, true, 'tip.endpoint')
this.$store.commit('setReloadFacade') this.$store.commit('setReloadFacade')
this.esc(true) this.esc(true)
} else { } else {

4
nezha-fronted/src/components/common/rightBox/projectBox.vue
View File

@@ -72,7 +72,7 @@ export default {
this.$put('monitor/project', this.editProject).then(response => { this.$put('monitor/project', this.editProject).then(response => {
if (response.code === 200) { if (response.code === 200) {
// this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') }) // this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.messageShow(this.$t('tip.saveSuccess'), '/module', { projectId: response.data.id }, false, 'overall.createModule') this.messageShow(this.$t('tip.saveSuccess'), '/module', { projectId: response.data.id }, false, 'tip.module')
this.$store.commit('projectListChange') this.$store.commit('projectListChange')
this.$store.commit('setProject', this.project) this.$store.commit('setProject', this.project)
this.esc(true) this.esc(true)
@@ -84,7 +84,7 @@ export default {
} else { } else {
this.$post('monitor/project', this.editProject).then(response => { this.$post('monitor/project', this.editProject).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.messageShow(this.$t('tip.saveSuccess'), '/module', { projectId: response.data.id }, true, 'overall.createModule') this.messageShow(this.$t('tip.saveSuccess'), '/module', { projectId: response.data.id }, true, 'tip.module')
this.$store.commit('projectListChange') this.$store.commit('projectListChange')
this.esc(true) this.esc(true)
} else { } else {