diff --git a/frontend/src/styles/element-dark.scss b/frontend/src/styles/element-dark.scss index 45573f5aa..9ee20f6be 100644 --- a/frontend/src/styles/element-dark.scss +++ b/frontend/src/styles/element-dark.scss @@ -18,6 +18,7 @@ html.dark { // * panel-admin --panel-text-color: rgb(174, 166, 153); --panel-border: 1px solid #1d2023; + --panel-border-color: #394c5e; --panel-main-bg-color: rgba(12, 12, 12, 1); --panel-button-active: var(--el-color-primary); @@ -56,7 +57,8 @@ html.dark { --el-table-border-color: rgb(64, 67, 67); } .el-message-box { - --el-messagebox-title-color: #999999; + --el-messagebox-title-color: var(--el-menu-text-color); + border: 1px solid var(--panel-border-color); } .el-alert--info { @@ -74,6 +76,7 @@ html.dark { .el-popover { --el-popover-title-text-color: #999999; + border: 1px solid var(--panel-border-color); } // * wangEditor @@ -194,6 +197,9 @@ html.dark { .el-drawer .el-drawer__header span { color: var(--el-menu-text-color); } + .el-drawer { + border-left: 0.5px solid var(--panel-border-color); + } .el-input__wrapper { background-color: var(--el-disabled-bg-color); @@ -245,7 +251,11 @@ html.dark { .el-dialog__header { border-bottom: var(--panel-border); color: #999999; + .el-dialog__title { + color: var(--el-menu-text-color); + } } + border: 1px solid var(--panel-border-color); } .el-tabs__item { color: #999999; @@ -291,4 +301,9 @@ html.dark { background: #212426; } } + + .el-alert--warning.is-light { + background-color: rgb(56, 59, 59); + color: var(--el-color-warning); + } } diff --git a/frontend/src/views/host/terminal/terminal/index.vue b/frontend/src/views/host/terminal/terminal/index.vue index 0d20d7260..929001d3e 100644 --- a/frontend/src/views/host/terminal/terminal/index.vue +++ b/frontend/src/views/host/terminal/terminal/index.vue @@ -62,11 +62,7 @@ </el-tab-pane> <el-tab-pane :closable="false" name="newTabs"> <template #label> - <el-button - v-popover="popoverRef" - style="background-color: #ededed; border: 0" - icon="Plus" - ></el-button> + <el-button v-popover="popoverRef" class="tagButton" icon="Plus"></el-button> <el-popover ref="popoverRef" width="250px" trigger="hover" virtual-triggering persistent> <div style="margin-left: 10px"> <el-button link type="primary" @click="onNewSsh">{{ $t('terminal.createConn') }}</el-button> @@ -401,6 +397,11 @@ defineExpose({ } } +.tagButton { + border: 0; + background-color: var(--el-tabs__item); +} + .vertical-tabs > .el-tabs__content { padding: 32px; color: #6b778c; diff --git a/frontend/src/views/setting/safe/mfa/index.vue b/frontend/src/views/setting/safe/mfa/index.vue index baaeafae6..45d069a3f 100644 --- a/frontend/src/views/setting/safe/mfa/index.vue +++ b/frontend/src/views/setting/safe/mfa/index.vue @@ -55,7 +55,9 @@ <el-form-item :label="$t('setting.mfaInterval')" prop="interval"> <el-input v-model.number="form.interval"> <template #append> - <el-button @click="loadMfaCode">{{ $t('commons.button.save') }}</el-button> + <el-button @click="loadMfaCodeBefore(formRef)"> + {{ $t('commons.button.save') }} + </el-button> </template> </el-input> <span class="input-help">{{ $t('setting.mfaIntervalHelper') }}</span> @@ -101,7 +103,7 @@ const form = reactive({ const rules = reactive({ code: [Rules.requiredInput], - mfaInterval: [Rules.number, checkNumberRange(15, 60)], + interval: [Rules.number, checkNumberRange(15, 60)], }); interface DialogProps { @@ -123,12 +125,28 @@ const onCopy = async () => { } }; +const loadMfaCodeBefore = async (formEl: FormInstance | undefined) => { + if (!formEl) return; + const result = await formEl.validateField('interval', callback); + if (!result) { + return; + } + loadMfaCode(); +}; const loadMfaCode = async () => { const res = await getMFA(form.interval); form.secret = res.data.secret; qrImage.value = res.data.qrImage; }; +function callback(error: any) { + if (error) { + return error.message; + } else { + return; + } +} + const onBind = async (formEl: FormInstance | undefined) => { if (!formEl) return; formEl.validate(async (valid) => {