feat: 主题样式优化 (#7053)

Author: lan-yonghui

frontend/src/api/modules/files.ts

@@ -74,7 +74,7 @@ export const WgetFile = (params: File.FileWget) => {
 };
 
 export const MoveFile = (params: File.FileMove) => {
-    return http.post<File.File>('files/move', params);
+    return http.post<File.File>('files/move', params, TimeoutEnum.T_5M);
 };
 
 export const DownloadFile = (params: File.FileDownload) => {

frontend/src/styles/element-dark.scss

@@ -43,36 +43,40 @@ html.dark {
     --el-color-success: #3fb950;
     --el-color-success-light-5: #4DC894;
     --el-color-success-light-8: #3fb950;
-    --el-color-success-light-9: #1E5146;
+    --el-color-success-light-9: var(--panel-main-bg-color-9);
 
     --el-color-warning: #EDAC2C;
     --el-color-warning-light-5: #F1C161;
     --el-color-warning-light-8: #EDAC2C;
-    --el-color-warning-light-9: #59472A;
+    --el-color-warning-light-9: var(--panel-main-bg-color-9);
 
     --el-color-danger: #E2324F;
     --el-color-danger-light-5: #E9657B;
     --el-color-danger-light-8: #E2324F;
-    --el-color-danger-light-9: #54293A;
+    --el-color-danger-light-9: var(--panel-main-bg-color-9);
 
     --el-color-error: #E2324F;
     --el-color-error-light-5: #E9657B;
     --el-color-error-light-8: #E2324F;
-    --el-color-error-light-9: #54293A;
+    --el-color-error-light-9: var(--panel-main-bg-color-9);
 
-    --el-color-info: var(--panel-main-bg-color-2);
+    --el-color-info: var(--panel-main-bg-color-3);
     --el-color-info-light-5: var(--panel-main-bg-color-3);
-    --el-color-info-light-8: var(--panel-color-primary);
-    --el-color-info-light-9: var(--panel-main-bg-color-8);
+    --el-color-info-light-8: var(--panel-main-bg-color-3);
+    --el-color-info-light-9: var(--panel-main-bg-color-9);
 
 
     --panel-pie-bg-color: #434552;
     --panel-text-color-white: #ffffff;
 
 
     --el-color-primary: var(--panel-color-primary);
+    --el-color-primary-light-1: var(--panel-color-primary-light-1);
+    --el-color-primary-light-2: var(--panel-color-primary-light-2);
     --el-color-primary-light-3: var(--panel-color-primary-light-3);
+    --el-color-primary-light-4: var(--panel-color-primary-light-4);
     --el-color-primary-light-5: var(--panel-color-primary-light-5);
+    --el-color-primary-light-6: var(--panel-color-primary-light-6);
     --el-color-primary-light-7: var(--panel-color-primary-light-7);
     --el-color-primary-light-8: var(--panel-color-primary-light-8);
     --el-color-primary-light-9: var(--panel-color-primary-light-9);
@@ -185,6 +189,11 @@ html.dark {
         --el-card-bg-color: var(--panel-main-bg-color-10)
     }
 
+    .el-button:hover {
+        --el-button-hover-border-color:var(--panel-main-bg-color-11);
+        --el-button-hover-bg-color: var(--panel-main-bg-color-10);
+    }
+
     .el-button--primary {
         --el-button-text-color: var(--panel-main-bg-color-10);
         --el-button-hover-link-text-color: var(--panel-color-primary-light-1);
@@ -221,9 +230,9 @@ html.dark {
     }
 
     .el-button--primary:hover {
-        --el-button-hover-text-color: var(--panel-main-bg-color-2);
+        --el-button-hover-text-color: var(--panel-main-bg-color-7);
         --el-button-border-color: var(--el-color-primary);
-        --el-button-hover-bg-color: var(--panel-main-bg-color-9);
+        --el-button-hover-bg-color: var(--panel-color-primary-light-2);
         --el-button-hover-border-color: var(--panel-main-bg-color-8);
     }
 
@@ -272,7 +281,6 @@ html.dark {
         border: 1px solid var(--panel-border-color);
 
         .el-dialog__header {
-            border-bottom: var(--panel-border);
             color: var(--el-text-color-primary);
 
             .el-dialog__title {
@@ -288,7 +296,7 @@ html.dark {
 
     .el-alert--success {
         --el-alert-bg-color: var(--panel-alert-success-bg-color);
-        --el-color-success: var(--panel-alert-success-text-color);;
+        --el-color-success: var(--panel-alert-success-text-color);
     }
 
     .el-alert--warning {

frontend/src/styles/element.scss

@@ -25,9 +25,6 @@
     --el-color-primary-light-9: var(--panel-color-primary-light-9);
 
     --el-text-color-regular: #646a73;
-    --el-color-success:#238636;
-    --el-color-success-light-8: #3fb950;
-    --el-color-success-light-9: #3fb95030;
 }
 
 html {

frontend/src/views/app-store/installed/check/index.vue

@@ -9,7 +9,7 @@
                     show-icon
                     :closable="false"
                 />
-                <el-descriptions :column="1" border>
+                <el-descriptions :column="1" border class="mt-5">
                     <el-descriptions-item
                         v-for="(item, key) in map"
                         :key="key"

frontend/src/views/container/container/index.vue

@@ -204,7 +204,7 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('container.related')" min-width="200" prop="appName">
+                    <el-table-column :label="$t('container.related')" min-width="210" prop="appName">
                         <template #default="{ row }">
                             <div>
                                 <el-tooltip

frontend/src/views/database/mysql/check/index.vue

@@ -15,7 +15,7 @@
                     show-icon
                     :closable="false"
                 />
-                <el-descriptions border :column="1">
+                <el-descriptions border :column="1" class="mt-5">
                     <el-descriptions-item label-class-name="check-label" class-name="check-content" min-width="60px">
                         <template #label>
                             <a href="javascript:void(0);" class="check-label-a" @click="toApp()">

frontend/src/views/database/postgresql/check/index.vue

@@ -15,7 +15,7 @@
                     show-icon
                     :closable="false"
                 />
-                <el-descriptions border :column="1">
+                <el-descriptions border :column="1" class="mt-5">
                     <el-descriptions-item label-class-name="check-label" class-name="check-content" min-width="60px">
                         <template #label>
                             <a href="javascript:void(0);" class="check-label-a" @click="toApp()">

frontend/src/views/database/redis/check/index.vue

@@ -15,7 +15,7 @@
                     show-icon
                     :closable="false"
                 />
-                <el-descriptions border :column="1">
+                <el-descriptions border :column="1" class="mt-5">
                     <el-descriptions-item label-class-name="check-label" class-name="check-content" min-width="60px">
                         <template #label>
                             <a href="javascript:void(0);" class="check-label-a" @click="toApp()">

frontend/src/views/setting/snapshot/snap_status/index.vue

@@ -329,9 +329,6 @@ defineExpose({
 .el-alert:first-child {
     margin: 0;
 }
-.top-margin {
-    margin-top: 10px;
-}
 .err-message {
     margin-left: 23px;
     line-height: 20px;

frontend/src/views/website/runtime/php/check/index.vue

@@ -9,7 +9,7 @@
                     show-icon
                     :closable="false"
                 />
-                <el-descriptions border :column="1">
+                <el-descriptions border :column="1" class="mt-5">
                     <el-descriptions-item
                         v-for="(item, key) in map"
                         :key="key"