style: 优化主题样式

frontend/src/styles/index.scss

@@ -377,36 +377,40 @@ div:focus {
 }
 
 .el-table {
-    background-color: var(--MainBG) !important;
+    background-color: var(--TableBG) !important;
     tr {
-        background-color: var(--MainBG) !important;
+        background-color: var(--TableBG) !important;
     }
     th {
-        background-color: var(--MainBG) !important;
+        background-color: var(--TableBG) !important;
     }
 }
 
 .blackTheme .el-textarea__inner {
+    color: var(--TableColor) !important;  
     background-color: var(--MainBG) !important;    
 }
 .blackTheme .el-textarea__inner:not(:focus) {
-    
+    color: var(--TableColor) !important;  
     border-color: var(--border-color-input) !important;
 }
 
 .blackTheme .el-input__inner {
-    background-color: var(--MainBG) !important;    
+    background-color: var(--MainBG) !important;
+    color: var(--TableColor) !important;    
 }
 .blackTheme .el-input__inner:not(:focus) {
-    
+    color: var(--TableColor) !important;  
     border-color: var(--border-color-input) !important;
 }
 
 .blackTheme .el-input-number__decrease {
+    color: var(--TableColor) !important;  
     background-color: var(--MainBG) !important;
     border: none !important;
 }
 .blackTheme .el-input-number__increase {
+    color: var(--TableColor) !important;  
     background-color: var(--MainBG) !important;
     border: none !important;
 }
@@ -414,25 +418,42 @@ div:focus {
 
 .el-pagination {
     button:disabled {
+        color: var(--TableColor) !important;  
         background-color: var(--MainBG) !important;
     }
 }
 
 .el-pager li {
+    color: var(--TableColor) !important;  
     background-color: var(--MainBG) !important;
 }
 
-.blackTheme .el-select-dropdown {
+/* .blackTheme .el-select-dropdown {
     background-color: var(--MainBG) !important;
-}
+} */
 
 .fu-search-bar-button {
     background-color: var(--Main) !important;
 }
 
-.fu-quick-search input {
+.blackTheme .fu-quick-search input {
+    color: var(--TableColor) !important;  
     background-color: var(--MainBG) !important;
 }
+.blackTheme .vue-treeselect__single-value {
+    color: var(--TableColor) !important;  
+}
+.blackTheme .el-tag.el-tag--info {
+    background-color: var(--MainContentBG);
+    border-color: var(--TableBorderColor);
+    color: var(--TableColor) !important;  ;
+}
+
+.blackTheme .vue-treeselect__control {
+    background-color: var(--MainBG) !important;
+    color: var(--TableColor) !important;
+    border-color: var(--border-color-input) !important;
+}
 
 .blackTheme .el-popover {
     background-color: var(--MainBG);
@@ -440,6 +461,7 @@ div:focus {
 
 .blackTheme .main-area-input {
     input.el-input__inner {
+        color: var(--TableColor) !important;  
         background-color: var(--ContentBG) !important;
     }
     .el-input-group__append {
@@ -448,16 +470,16 @@ div:focus {
     }    
 }
 
-.el-tree {
-    background-color: var(--MainBG) !important;
+.blackTheme .el-tree {
+    background-color: var(--SiderBG) !important;
 }
 
-.el-tree-node__content:hover {
-    background-color: var(--ContentBG) !important;
+.blackTheme .el-tree-node__content:hover {
+    background-color: var(--SiderBG) !important;
 }
 
-.is-current > .el-tree-node__content {
-    background-color: var(--ContentBG) !important;
+.blackTheme .is-current > .el-tree-node__content {
+    background-color: var(--SiderBG) !important;
 }
 .blackTheme .el-collapse-item__header {
     background-color: var(--ContentBG) !important;
@@ -497,28 +519,28 @@ div:focus {
 .blackTheme .elx-table--main-wrapper {
     
     .body--wrapper {
-        background-color: var(--ContentBG) !important;
+        background-color: var(--TableBG) !important;
     }
 }
 .blackTheme .elx-table {
-    color: var(--TextPrimary) !important;
+    color: var(--TableColor) !important;
 }
 
 .blackTheme .elx-body--column {
-    background-image: linear-gradient(var(--MainBorderColor), var(--MainBorderColor)), linear-gradient(var(--MainBorderColor), var(--MainBorderColor)) !important;
+    background-image: linear-gradient(var(--TableBorderColor), var(--TableBorderColor)), linear-gradient(var(--TableBorderColor), var(--TableBorderColor)) !important;
 }
 .blackTheme .elx-header--column {
-    background-image: linear-gradient(--MainBorderColor, --MainBorderColor), linear-gradient(--MainBorderColor, --MainBorderColor) !important;
+    background-image: linear-gradient(--TableBorderColor, --TableBorderColor), linear-gradient(--TableBorderColor, --TableBorderColor) !important;
 }
 .blackTheme tr.row--current {
     background-color: var(--MainBG) !important;
 }
 .blackTheme tr.elx-body--row:hover {
-    background-color: var(--MainBG) !important;
+    background-color: var(--TableBG) !important;
 }
 
 .blackTheme .elx-table--header-border-line {
-    border-color: var(--MainBorderColor) !important;
+    border-color: var(--TableBorderColor) !important;
 }
 
 .el-collapse-item__content {

frontend/src/styles/sidebar.scss

@@ -14,7 +14,6 @@
 
   .sidebar-container {
     transition: width 0.28s;
-    // background-color: $--background-color-base;
     height: $contentHeight;
     position: fixed;
     font-size: 0px;
@@ -64,33 +63,71 @@
       border: none;
       height: 100%;
       width: 100% !important;
-
-     
+      background-color: var(--SiderBG, #ffffff);     
     }
 
-    .submenu-title-noDropdown,
-    .el-submenu__title {
+    
+
+    .submenu-title-noDropdown:not(.is-active), .el-submenu__title {
+      color: var(--SiderTextColor);
       &:hover {
-        // background-color: $leftMenuHovor !important;
-        background-color: var(--ContentBG) !important;
+        background-color: var(--MenuHovorBG) !important;
+        color: var(--TextActive);
+      }
+      &:focus {
+        background-color: var(--MenuActiveBG) !important;
+        color: var(--TextActive);
       }
     }
+    .submenu-title-noDropdown.is-active {
+        background-color: var(--MenuActiveBG) !important;
+        color: var(--TextActive);
+    }
 
-    /* .is-active > .el-submenu__title {
-      color: $leftMenuTextActive !important;
+    .is-active > .el-submenu__title {
+        background-color: var(--MenuActiveBG) !important;
+        color: var(--TextActive);
+    }
+
+    /* .nest-menu {
+        .el-menu-item:not(.is-active) {
+            min-width: $sideBarWidth !important;
+            background-color: var(--SiderBG) !important;
+            color: var(--SiderTextColor);
+            &:hover {
+              color: var(--TextActive) !important;
+            }
+            &:focus {
+              background-color: var(--SiderBG) !important;
+              color: var(--TextActive) !important;
+            }
+        }
+        
+        .el-menu-item.is-active {
+            color: var(--TextActive) !important;
+        }
     } */
 
     & .nest-menu .el-submenu > .el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $sideBarWidth !important;
-      // background-color: $leftMenuBg !important;
-      background-color: var(--MainBG) !important;
-
+      background-color: var(--SiderBG) !important;
+      color: var(--SiderTextColor);
       &:hover {
-        // background-color: $leftMenuHovor !important;
-        background-color: var(--ContentBG) !important;
+        background-color: var(--MenuHovorBG) !important;
+        color: var(--TextActive) !important;
       }
     }
+
+    & .nest-menu .el-submenu > .el-submenu__title,
+    & .el-submenu .is-active.el-menu-item {
+      min-width: $sideBarWidth !important;
+      background-color: var(--SiderBG) !important;
+      color: var(--TextActive);
+      
+    }
+    
+
   }
 
   .hideSidebar {
@@ -147,6 +184,8 @@
     }
   }
 
+
+
   .el-menu--collapse .el-menu .el-submenu {
     min-width: $sideBarWidth !important;
   }
@@ -190,7 +229,7 @@
   .el-menu-item {
     &:hover {
       // background-color: $leftMenuHovor !important;
-      background-color: var(--ContentBG) !important;
+      background-color: var(--SiderBG) !important;
     }
   }
 

frontend/src/styles/theme/dark.scss

@@ -11,14 +11,16 @@ $--color-text-regular: #EBEEF5;
 $--color-text-secondary: #E4E7ED;
 $--color-text-placeholder: #DCDFE6;
 
-$--border-color-base: #2681ff;
-$--border-color-light: #2681ff;
-$--border-color-lighter: #2681ff;
-$--border-color-extra-light: #2681ff;
+$--border-color-base: #495865;
+$--border-color-light: #495865;
+$--border-color-lighter: #495865;
+$--border-color-extra-light: #495865;
 
 $--color-white: #FFFFFF;
 $--color-black: #000000;
 
+$--color-text-regular: #fff;
+
 $--background-color-base: #171b22;
 
 // 与CSS原生变量映射
@@ -27,12 +29,30 @@ $--background-color-base: #171b22;
   --test:#FF9227;
   --color-primary: #000;
   --MainBG: #171b22;
-  --ContentBG: #303640;
+  --ContentBG: #1b2a32;
   --MainBorderColor: #2681ff;
   --TextActive: #FFFFFF;
   --TextPrimary: #F2F6FC;
   --border-color-input: #303640;
   --border-color-input-hovor: #303640;
+
+  --TopBG: #00364d;
+
+  --TopTextColor: #fafafa;
+
+
+  --MenuHovorBG: #28404d;
+  --MenuActiveBG: #324f62;
+
+  --SiderBG: #17242b;
+  --SiderTextColor: #acbac3;
+
+  --MainContentBG: #1b2a32;
+
+  --TableBG: #21333b;
+  --TableColor: #acbac3;
+  --TableBorder: .05rem solid #495865;
+  --TableBorderColor: #495865;
 }
 
 

frontend/src/styles/topbar.scss

@@ -5,8 +5,8 @@
   left: 0;
   z-index: 1001;
   overflow: hidden;
-  border-bottom: 1px solid $--color-primary;
-
+  border-bottom: 1px solid var(--TopBG, #E6E6E6);
+  background-color: var(--TopBG, #ffffff); 
   .log {
     padding: 0 16px;
     line-height: 56px;
@@ -25,24 +25,28 @@
   .el-menu {
     float: left;
     border: none !important;
-    background-color: var(--MainBG, #ffffff) !important;
+    background-color: var(--TopBG, #ffffff) !important;
     .nav-item {
       display: inline-block;
 
       .el-menu-item:not(.is-active) {
-
+        color: var(--TopTextColor);
+        opacity: 0.65;
         &:hover {
-          background-color: var(--ContentBG, #ecf5ff) !important;
+          background-color: var(--MenuHovorBG, #ecf5ff) !important;
+          opacity: 1;
         }
 
         &:focus {
-          background-color: var(--ContentBG, #ecf5ff) !important;
+          background-color: var(--MenuActiveBG, #ecf5ff) !important;
+          opacity: 1;
         }
 
       }
       .el-menu-item.is-active {
-        background-color: var(--ContentBG, #ecf5ff) ;
+        background-color: var(--MenuActiveBG, #ecf5ff) ;
         color: var(--TextActive) !important;
+        opacity: 1;
       }
 
     }