fix: 暗色样式调整 (#1606)

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);
+    }
 }

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;

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) => {