feat: 修改部分暗黑模式样式

frontend/src/styles/common.scss

@@ -106,7 +106,7 @@
 }
 
 .inline-block {
-	display: inline-block;
+    display: inline-block;
 }
 
 .form-button {
@@ -269,3 +269,5 @@
         }
     }
 }
+
+

frontend/src/styles/element-dark.scss

@@ -1,74 +1,11 @@
 html.dark {
-    // --el-color-primary: #409eff;
+    --el-fill-color-blank: rgb(49, 51, 51);
-    // --el-color-primary-light-3: #3375b9;
-    // --el-color-primary-light-5: #2a598a;
-    // --el-color-primary-light-7: #213d5b;
-    // --el-color-primary-light-8: #1d3043;
-    // --el-color-primary-light-9: #18222c;
-    // --el-color-primary-dark-2: #66b1ff;
-    // --el-color-success: #67c23a;
-    // --el-color-success-light-3: #4e8e2f;
-    // --el-color-success-light-5: #3e6b27;
-    // --el-color-success-light-7: #2d481f;
-    // --el-color-success-light-8: #25371c;
-    // --el-color-success-light-9: #1c2518;
-    // --el-color-success-dark-2: #85ce61;
-    // --el-color-warning: #e6a23c;
-    // --el-color-warning-light-3: #a77730;
-    // --el-color-warning-light-5: #7d5b28;
-    // --el-color-warning-light-7: #533f20;
-    // --el-color-warning-light-8: #3e301c;
-    // --el-color-warning-light-9: #292218;
-    // --el-color-warning-dark-2: #ebb563;
-    // --el-color-danger: #f56c6c;
-    // --el-color-danger-light-3: #b25252;
-    // --el-color-danger-light-5: #854040;
-    // --el-color-danger-light-7: #582e2e;
-    // --el-color-danger-light-8: #412626;
-    // --el-color-danger-light-9: #2b1d1d;
-    // --el-color-danger-dark-2: #f78989;
-    // --el-color-error: #f56c6c;
-    // --el-color-error-light-3: #b25252;
-    // --el-color-error-light-5: #854040;
-    // --el-color-error-light-7: #582e2e;
-    // --el-color-error-light-8: #412626;
-    // --el-color-error-light-9: #2b1d1d;
-    // --el-color-error-dark-2: #f78989;
-    // --el-color-info: #909399;
-    // --el-color-info-light-3: #6b6d71;
-    // --el-color-info-light-5: #525457;
-    // --el-color-info-light-7: #393a3c;
-    // --el-color-info-light-8: #2d2d2f;
-    // --el-color-info-light-9: #202121;
-    // --el-color-info-dark-2: #a6a9ad;
-    // --el-box-shadow: 0 12px 32px 4px rgb(0 0 0 / 36%), 0 8px 20px rgb(0 0 0 / 72%);
-    // --el-box-shadow-light: 0 0 12px rgb(0 0 0 / 72%);
-    // --el-box-shadow-lighter: 0 0 6px rgb(0 0 0 / 72%);
-    // --el-box-shadow-dark: 0 16px 48px 16px rgb(0 0 0 / 72%), 0 12px 32px #000000, 0 8px 16px -8px #000000;
-    // --el-bg-color-page: #0a0a0a;
     --el-bg-color: rgb(36, 37, 37);
-    // --el-bg-color-overlay: #1d1e1f;
-    // --el-text-color-primary: #e5eaf3;
     --el-text-color-regular: #cfd3dc;
-    // --el-text-color-secondary: #a3a6ad;
+    --el-fill-color-light: rgb(49, 51, 51);
-    // --el-text-color-placeholder: #8d9095;
+    --el-border-color: rgb(64, 67, 67);
-    // --el-text-color-disabled: #6c6e72;
+    --el-bg-color-overlay: rgb(36, 37, 37);
-    // --el-border-color-darker: #636466;
+    --el-border-color-light: rgb(64, 67, 67);
-    // --el-border-color-dark: #58585b;
-    // --el-border-color: #4c4d4f;
-    // --el-border-color-light: #414243;
-    // --el-border-color-lighter: #363637;
-    // --el-border-color-extra-light: #2b2b2c;
-    // --el-fill-color-darker: #424243;
-    // --el-fill-color-dark: #39393a;
-    // --el-fill-color: #303030;
-    // --el-fill-color-light: #262727;
-    // --el-fill-color-lighter: #1d1d1d;
-    // --el-fill-color-extra-light: #191919;
-    // --el-fill-color-blank: transparent;
-    // --el-mask-color: rgb(0 0 0 / 80%);
-    // --el-mask-color-extra-light: rgb(0 0 0 / 30%);
-
     // * menu
     --el-menu-bg-color: rgb(36, 37, 37) !important;
     --el-menu-item-bg-color: rgb(36, 37, 37);
@@ -83,7 +20,8 @@ html.dark {
     --panel-login-shadow-light: 5px 5px 15px rgb(255 255 255 / 20%);
     --panel-box-shadow-light: 0 0 10px rgb(255 255 255 / 10%);
     --panel-popup-color: #060708;
-
+    --panel-alert-bg: #2f3030;
+    --panel-path-bg: #2f3030;
     .el-card {
         --el-card-border-color: rgb(64, 67, 67);
         --el-card-bg-color: rgb(36, 37, 37);
@@ -188,4 +126,28 @@ html.dark {
     span {
         color: var(--el-menu-text-color);
     }
+    .el-input.is-disabled .el-input__wrapper {
+        box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
+    }
+    .el-radio-button__inner {
+        background: rgb(49, 51, 51);
+    }
+    .el-button--primary.is-plain.is-disabled {
+        background: rgb(49, 51, 51);
+        border-color: rgb(64, 67, 67);
+    }
+    .el-button.is-disabled {
+        border-color: rgb(64, 67, 67);
+    }
+    .el-popper.is-dark {
+        color: rgb(171 173 173);
+    }
+    .path {
+        border: var(--panel-border);
+    }
+    input:-webkit-autofill {
+        box-shadow: 0 0 0 1000px #323232 inset;
+        -webkit-text-fill-color: #cfd3dc;
+        transition: background-color 1000s ease-out 0.5s;
+    }
 }

frontend/src/styles/element.scss

@@ -5,7 +5,11 @@ html {
     --el-menu-item-bg-color-active: #ffffff;
     --panel-border: 1px solid #f2f2f2;
     --panel-button-active: #ffffff;
+
+    --panel-alert-bg: #e2e4ec;
+    --panel-path-bg: #ffffff;
 }
+
 .el-notification {
     z-index: 99999 !important;
 }
@@ -172,5 +176,5 @@ html {
 }
 
 .el-avatar {
-    --el-avatar-bg-color: #ffffff;
+    --el-avatar-bg-color: #ffffff !important;
 }

frontend/src/styles/index.scss

@@ -1,6 +1,6 @@
 @use 'fit2cloud-ui-plus/src/styles/index.scss' as *;
 @use './element-dark.scss';
-@use './element.scss' as *;
+@use './element.scss';
 @use './reset.scss';
 
 

frontend/src/views/host/file-management/index.vue

@@ -492,7 +492,7 @@ onMounted(() => {
 <style scoped lang="scss">
 .path {
     border: 1px solid #ebeef5;
-    background-color: #ffffff;
+    background-color: var(--panel-path-bg);
     height: 30px;
     border-radius: 2px !important;
 

frontend/src/views/setting/backup-account/index.vue

@@ -62,7 +62,12 @@
                                     {{ dateFormatSimple(s3Data.createdAt) }}
                                 </el-form-item>
                             </div>
-                            <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
+                            <el-alert
+                                v-else
+                                center
+                                style="height: 167px; background-color: var(--panel-alert-bg)"
+                                :closable="false"
+                            >
                                 <el-button
                                     size="large"
                                     round
@@ -104,7 +109,12 @@
                                     {{ dateFormatSimple(ossData.createdAt) }}
                                 </el-form-item>
                             </div>
-                            <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
+                            <el-alert
+                                v-else
+                                center
+                                style="height: 167px; background-color: var(--panel-alert-bg)"
+                                :closable="false"
+                            >
                                 <el-button
                                     size="large"
                                     round
@@ -148,7 +158,12 @@
                                     {{ dateFormatSimple(minioData.createdAt) }}
                                 </el-form-item>
                             </div>
-                            <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
+                            <el-alert
+                                v-else
+                                center
+                                style="height: 167px; background-color: var(--panel-alert-bg)"
+                                :closable="false"
+                            >
                                 <el-button
                                     size="large"
                                     round
@@ -194,7 +209,12 @@
                                     {{ dateFormatSimple(sftpData.createdAt) }}
                                 </el-form-item>
                             </div>
-                            <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
+                            <el-alert
+                                v-else
+                                center
+                                style="height: 167px; background-color: var(--panel-alert-bg)"
+                                :closable="false"
+                            >
                                 <el-button
                                     size="large"
                                     round