style: 优化主题样式

frontend/package.json

@@ -27,10 +27,11 @@
     "file-saver": "^2.0.5",
     "fit2cloud-ui": "1.5.0-beta.0",
     "html2canvasde": "^v1.1.4-de",
+    "jquery": "^3.1.1",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
     "jspdf": "^2.3.1",
-    "lodash": "4.17.21",
+    "lodash": "^4.17.4",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "screenfull": "4.2.0",
@@ -51,9 +52,7 @@
     "vuedraggable": "^2.24.3",
     "vuex": "3.1.0",
     "webpack": "^4.46.0",
-    "xlsx": "^0.17.0",
-    "lodash": "^4.17.4",
-    "jquery": "^3.1.1"
+    "xlsx": "^0.17.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0-0",

frontend/src/components/dataease/DeAsideContainer.vue

@@ -43,7 +43,7 @@ export default {
     padding: 10px;
     border-radius: 2px;
     box-sizing: border-box;
-    background-color: var(--MainBG);
+    background-color: var(--SiderBG);
     height: calc(100vh - 56px);
     border-right: 0px;
     position: relative;

frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue

@@ -28,7 +28,7 @@ export default {
     right: 0px;
     top: 0;
     cursor: col-resize;
-    background-color: var(--MainBorderColor) !important;
+    background-color: var(--SiderTextColor) !important;
     border: 0px;
   }
 

frontend/src/layout/components/Sidebar/index.vue

@@ -7,7 +7,7 @@
       :collapse="isCollapse"
       :unique-opened="false"
       :collapse-transition="false"
-      background-color="var(--MainBG)"
+
       mode="vertical"
     >
       <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
@@ -57,26 +57,4 @@ export default {
 
 <style lang="scss" scoped>
 
-/* .sidebar-container {
-    >>>li.el-menu-item.is-active {
-        background-color: var(--active-bg) !important;
-    }
-    >>>li.el-submenu.is-active:not(&:hover){
-         background-color: var(--active-bg) ;
-    }
-
-    >>>li.el-submenu__title {
-      &:hover {
-        background-color: var(--left-menu-hovor) !important;
-      }
-    }
-
-    >>>.el-submenu.is-active .el-submenu__title {
-      color: var(--theme) !important;
-    }
-
-    .is-active > .el-submenu__title {
-      color: var(--theme) !important;
-    }
-} */
 </style>

frontend/src/layout/components/Topbar.vue

@@ -22,7 +22,7 @@
       </div>
     </el-menu>
 
-    <div class="right-menu" style="color: var(--TextPrimary)">
+    <div class="right-menu" style="color: var(--TopTextColor)">
       <template>
 
         <notification class="right-menu-item hover-effect" />
@@ -35,7 +35,7 @@
       </template>
 
       <el-dropdown class="top-dropdown" style="display: flex;align-items: center; width:100px;">
-        <span class="el-dropdown-link" style="color: var(--TextPrimary);font-size: 14px;max-width: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
+        <span class="el-dropdown-link" style="color: var(--TopTextColor);font-size: 14px;max-width: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
           {{ name }}
           <i class="el-icon-arrow-down el-icon--right" />
         </span>

frontend/src/layout/index.vue

@@ -80,7 +80,7 @@ export default {
     position: relative;
     height: 100%;
     // height: $contentHeight;
-    background-color: var(--MainBG);
+    background-color: var(--MainContentBG);
     width: 100%;
     &.mobile.openSidebar{
       position: fixed;
@@ -124,7 +124,7 @@ export default {
         height: calc(100vh - 80px) !important;
         overflow-x: hidden !important;
         overflow-y: auto !important;
-        background-color: var(--MainBG) !important;
+        background-color: var(--SiderBG) !important;
       }
   }
 </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;
       }
 
     }

frontend/src/views/msg/setting.vue

@@ -244,10 +244,10 @@ export default {
   .tree-head{
     height: 30px;
     line-height: 30px;
-    border-bottom: 1px solid #e6e6e6;
-    background-color: #f7f8fa;
+    border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
+    background-color: var(--SiderBG, #f7f8fa);
     font-size: 12px;
-    color: #3d4d66 ;
+    color: var(--TableColor, #3d4d66) ;
   }
 
   .auth-span{

frontend/src/views/panel/GrantAuth/dept/index.vue

@@ -260,13 +260,21 @@ export default {
     border: 1px solid #e6e6e6;
     overflow-y: auto;
   }
-  .tree-head{
+  /* .tree-head{
     height: 30px;
     line-height: 30px;
     border-bottom: 1px solid #e6e6e6;
     background-color: #f7f8fa;
     font-size: 12px;
     color: #3d4d66 ;
+  } */
+  .tree-head{
+    height: 30px;
+    line-height: 30px;
+    border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
+    background-color: var(--SiderBG, #f7f8fa);
+    font-size: 12px;
+    color: var(--TableColor, #3d4d66) ;
   }
 
   .auth-span{

frontend/src/views/panel/edit/index.vue

@@ -773,6 +773,11 @@ export default {
   .de-header {
     height: 35px !important;
     border-bottom: 1px solid #E6E6E6;
+
+  }
+  .blackTheme .de-header {
+      background-color: var(--SiderBG) !important;
+      color: var(--TextActive);
   }
 
   .showLeftPanel {

frontend/src/views/panel/list/PanelViewShow.vue

@@ -62,7 +62,7 @@
       </el-row>
     </el-col>
     <el-col v-if="panelInfo.name.length===0" style="height: 100%;">
-      <el-row style="height: 100%; background-color: var(--MainBG);" class="custom-position">
+      <el-row style="height: 100%; background-color: var(--MainContentBG);" class="custom-position">
         {{ $t('panel.select_panel_from_left') }}
       </el-row>
     </el-col>
@@ -306,10 +306,13 @@ export default {
 
   .panel-design-head {
     height: 40px;
-    background-color: white;
+    background-color: var(--SiderBG, white);
     padding: 0 10px;
     line-height: 40px;
   }
+  .blackTheme .panel-design-head  {
+      color: var(--TextActive);
+  }
 
   .panel-design-preview {
     width: 100%;

frontend/src/views/system/authority/components/LazyTree.vue

@@ -300,13 +300,21 @@ export default {
     border: 1px solid #e6e6e6;
     overflow-y: auto!important;
   }
-  .tree-head{
+  /* .tree-head{
     height: 30px;
     line-height: 30px;
     border-bottom: 1px solid #e6e6e6;
     background-color: #f7f8fa;
     font-size: 12px;
     color: #3d4d66 ;
+  } */
+  .tree-head{
+    height: 30px;
+    line-height: 30px;
+    border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
+    background-color: var(--SiderBG, #f7f8fa);
+    font-size: 12px;
+    color: var(--TableColor, #3d4d66) ;
   }
 
   .auth-span{