perf: 样式调整

nezha-fronted/src/assets/css/common.scss

@@ -179,6 +179,21 @@ td .nz-icon-gear:before{
   box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color;
   border-radius: 2px;
 }
+.el-popover {
+  box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color !important;
+}
+.el-input__count-inner {
+  background-color: $--input-background-color !important;
+}
+.el-textarea {
+  .el-textarea__inner {
+    background-color: $--input-background-color !important;
+  }
+  .el-input__count {
+    background-color: $--input-background-color !important;
+  }
+}
+
 .icon {
   width: 5rem;
   height: 5rem;
@@ -193,3 +208,6 @@ td .nz-icon-gear:before{
   font-family: NotoSans !important;
   font-size: 12px !important;
 }
+.el-tree {
+  background-color: $--background-color-empty !important;
+}

nezha-fronted/src/assets/css/common/rightBoxCommon.scss

@@ -7,7 +7,7 @@
   padding: 0;
   height: calc(100% - 50px);
   width: 700px;
-  box-shadow: 0 0 5px #ccc;
+  box-shadow: $--right-box-shadow;
   background-color: $--background-color-empty;
   z-index: 410;
 
@@ -127,10 +127,10 @@
       }
 
       .el-input__inner:hover {
-        border-color: darken($--border-color-light, 10%);
+        border-color: $--border-color-light-hover;
       }
       .el-input__inner:focus {
-        border-color: darken($--border-color-light, 20%);
+        border-color: $--border-color-light-focus;
       }
     }
     .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
@@ -146,7 +146,8 @@
       font-size: 14px;
       font-weight: bold;
       color: $--color-text-primary;
-      background-color: $--background-color-base;
+      background-color: $--right-box-sub-title-background-color;
+      border: 1px solid $--right-box-sub-title-border-color;
     }
     /* 虚线框类型的form-item */
     .form__dotted-item {

nezha-fronted/src/assets/css/common/tableCommon.scss

@@ -102,7 +102,7 @@
   }
   .top-tool-btn:focus:not(.nz-btn-disabled), .top-tool-btn.is-focus {
     background-color: $--button-icon-active-background-color;
-    border: 1px solid $--button-icon-active-border-color;
+    border: 1px solid $--button-icon-active-border-color !important;
     color: $--button-icon-active-color;
 
     i {
@@ -111,7 +111,7 @@
   }
   .top-tool-btn--delete.top-tool-btn:focus:not(.nz-btn-disabled) {
     background-color: $--button-icon-hover-background-color;
-    border-color: #FFC4B9;
+    border: 1px solid #FFC4B9 !important;
     i {
       color: #F0745A;
     }

nezha-fronted/src/assets/css/components/charts/chart.scss

@@ -201,7 +201,7 @@
   position: relative;
 }
 .resize-box {
-  border: 1px solid $--border-color-light;
+  border: 1px solid $--chart-box-border-color;
   position: absolute;
   box-sizing: border-box;
   width: 100%;
@@ -306,7 +306,7 @@
     position: relative;
     background-color: $--background-color-empty;
     .chartTitle:hover {
-      background-color: $--background-color-1;
+      background-color: $--chart-title-hover-background-color;
     }
     .chartTitle {
       text-align: center;
@@ -361,7 +361,7 @@
       }
     }
     .chart-sub-title {
-      background-color: $--background-color-1;
+      background-color: $--chart-title-hover-background-color;
       font-size: 13px;
       color: $--color-text-regular;
       padding-left: 5px;
@@ -524,7 +524,7 @@
     position: relative;
     background-color: $--background-color-empty;
     .chartTitle:hover {
-      background-color: $--background-color-1;
+      background-color: $--chart-title-hover-background-color;
     }
     .chartTitle {
       text-align: center;

nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss

@@ -4,7 +4,7 @@
   z-index: 3000;
   padding: 10px;
   border-radius: 4px;
-  box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color;
 
   .alert-label-info{
     border-bottom: none;
@@ -62,7 +62,7 @@
   line-height: 0;
   border: 5px;
   border-style: dashed solid dashed dashed;
-  border-color: transparent #fff transparent transparent;
+  border-color: transparent $--popover-background-color transparent transparent;
   position: absolute;
   top: 20px;
   left: 0;

nezha-fronted/src/assets/css/components/common/detailView/list/common.scss

@@ -46,7 +46,7 @@
   }
 }
 .selected{
-  background: #FFFBF6;
+  background: $--background-color-base;
 }
 .colorEF7458{
   color: $--color-danger;

nezha-fronted/src/assets/css/components/layout/leftMenu.scss

@@ -79,7 +79,7 @@
       height: 50px;
       border-right: 1px solid $--left-menu-background-color-base;
       box-sizing: border-box;
-      background-color: $--left-menu-background-color-open !important;
+      background-color: $--left-menu-background-color-base !important;
 
       .logo {
         display: flex;

nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss

@@ -2,6 +2,29 @@
   height: calc(100% - 20px) !important;
   padding: 0 10px;
   background-color: $--background-color-base;
+
+  .el-carousel--horizontal{
+    height: 100%;
+  }
+  .el-carousel__container{
+    height: calc(100% - 36px);
+  }
+  .el-carousel__item .project-name {
+    font-size: 18px;
+    margin: 0;
+    position: absolute;
+    z-index: 1;
+  }
+  .el-carousel__indicator--horizontal .el-carousel__button{
+    background-color: #C0C4CC;
+    opacity: .24;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+  }
+  .el-carousel__indicator--horizontal.is-active .el-carousel__button{
+    opacity: 1;
+  }
 }
 .overview-content-header{
   display: flex;
@@ -103,7 +126,7 @@
   background-color: $--background-color-empty;
   flex: 1;
   border-radius: 5px;
-  border: 1px solid $--dashboard-card-border-color;
+  border: 1px solid $--chart-box-border-color;
 }
 .content-col-title {
   height: 2rem;
@@ -658,22 +681,6 @@
   height: 1px;
   background-color: transparent;
 }
-.leaflet-bottom{
-  z-index: 409;
-}
-.el-carousel--horizontal{
-  height: 100%;
-}
-.el-carousel__container{
-  height: calc(100% - 36px);
-}
-.el-carousel__item .project-name {
-  font-size: 18px;
-  margin: 0;
-  position: absolute;
-  z-index: 1;
-}
-
 .maskLayer{
   width: 100%;
   height: 100%;
@@ -684,14 +691,6 @@
   z-index: 10;
   cursor: pointer;
 }
-.el-carousel__indicator--horizontal .el-carousel__button{
+.leaflet-bottom{
-  background-color: #C0C4CC;
+  z-index: 409;
-  opacity: .24;
-  height: 10px;
-  width: 10px;
-  border-radius: 50%;
 }
-.el-carousel__indicator--horizontal.is-active .el-carousel__button{
-  opacity: 1;
-}
-

nezha-fronted/src/assets/css/components/page/dashboard/panel.scss

@@ -1,7 +1,3 @@
-.border-t-1-de{
-  border-top: 1px solid $--border-color-base;
-  padding-top: 10px;
-}
 .border-t-1-tr{
   border-top: 1px solid transparent;
 }
@@ -22,11 +18,12 @@
   height: calc(100% - 50px);
   flex: 1;
   background-color: $--dashboard-background-color-empty;
-  &>div {
-    background-color: $--dashboard-background-color-empty;
 }
+.table-list-box {
+  border-top: 1px solid $--background-color-base;
+  padding: 10px 0 0 10px;
+  background-color: $--background-color-empty;
 }
-
 .box-content {
   position: relative;
   height: 100%;

nezha-fronted/src/assets/css/components/page/monitor/project/project.scss

@@ -3,14 +3,20 @@
     height: 100%;
     width: 100%;
     display: flex;
-    background: $--background-color-base;
+    background-color: $--background-color-base;
+    overflow-x: auto;
     .projectList{
       flex: 1;
+      width: calc(50% - 10px);
       margin-right: 10px;
+      min-width: 745px;
     }
     .projectTopo{
       flex: 1;
+      width: calc(50% - 10px);
       margin-right: 10px;
+      min-width: 435px;
+
     }
     .hide{
       display: none;

nezha-fronted/src/assets/css/themes/theme-dark.scss

@@ -14,13 +14,13 @@ $--background-color-1: #444440;
 $--background-color-2: #000;
 
 // 左侧菜单背景色
-$--left-menu-background-color-base: $--background-color-empty;
+$--left-menu-background-color-base: #2D2E35;
 // 左侧菜单激活背景色
-$--left-menu-background-color-active: #191A1E;
+$--left-menu-background-color-active: #1D1D22;
 // 左侧菜单展开背景色
-$--left-menu-background-color-open: #191A1E;
+$--left-menu-background-color-open: #26262c;
 // 左侧菜单hover背景色
-$--menu-item-hover-fill: #191A1E;
+$--menu-item-hover-fill: #1D1D22;
 
 /* 3.字色 */
 // 标题字色
@@ -35,10 +35,15 @@ $--color-text-link: #3C92F1;
 /* 4.边框色 */
 // 普通边框色
 $--border-color-base: transparent;
-// 浅边框色
-$--border-color-light: #2e2e2e;
 // 普通边框色focus
 $--border-color-base-focus: #C7C7C7;
+// 浅边框色
+$--border-color-light: #454545;
+// 浅边框色hover
+$--border-color-light-hover: lighten($--border-color-light, 10%);
+// 浅边框色focus
+$--border-color-light-focus: lighten($--border-color-light, 20%);
+
 
 /* 5.提示色 */
 // 正常绿色
@@ -69,7 +74,7 @@ $--table-body-background-color: $--background-color-empty;
 /* 7.checkbox */
 // 背景色
 $--checkbox-background-color: $--background-color-empty;
-$--checkbox-border-color: #454545;
+$--checkbox-border-color: $--border-color-light;
 
 /* 8.滚动条 */
 // 背景色
@@ -101,7 +106,7 @@ $--button-gray-active-color: mix(#000, $--color-primary, 15%); // 灰色按钮fo
 $--button-gray-background-color: $--background-color-empty; // 灰色按钮背景色
 $--button-gray-hover-background-color: $--background-color-base; // 灰色按钮hover背景色
 $--button-gray-active-background-color: $--background-color-base; // 灰色按钮focus背景色
-$--button-gray-border-color: #454545; // 灰色按钮边框色
+$--button-gray-border-color: $--border-color-light; // 灰色按钮边框色
 $--button-gray-hover-border-color: $--button-gray-hover-color; // 灰色按钮hover边框色
 $--button-gray-active-border-color: $--button-gray-active-color; // 灰色按钮focus边框色
 
@@ -112,10 +117,22 @@ $--button-icon-active-color: $--color-text-primary; // focus字色
 $--button-icon-background-color: $--background-color-base; // 背景色
 $--button-icon-hover-background-color: $--background-color-empty; // hover背景色
 $--button-icon-active-background-color: $--background-color-empty; // focus背景色
-$--button-icon-border-color: #454545; // 边框色
+$--button-icon-border-color: $--border-color-light; // 边框色
 $--button-icon-hover-border-color: $--button-icon-border-color; // hover边框色
 $--button-icon-active-border-color: $--color-text-primary; // focus边框色
 
+/* 13.panel */
+$--chart-title-hover-background-color: #323238;
+$--chart-box-border-color: $--border-color-light;
+
+/* 14.popover */
+$--popover-background-color: $--background-color-empty;
+$--popover-border-color: none;
+
+/* 15.侧滑 */
+$--right-box-shadow: -3px 0 8px -3px rgba(17,17,17,0.77);
+$--right-box-sub-title-background-color: #323238;
+$--right-box-sub-title-border-color: $--border-color-light;
 
 
 /*** themes/common.scss是与主题切换无关的变量 ***/

nezha-fronted/src/assets/css/themes/theme-light.scss

@@ -35,10 +35,14 @@ $--color-text-link: #3C92F1;
 /* 4.边框色 */
 // 普通边框色(覆盖element-ui内置变量)
 $--border-color-base: #DEDEDE;
-// 浅边框色(覆盖element-ui内置变量)
-$--border-color-light: #E7EAED;
 // 普通边框色focus
 $--border-color-base-focus: #C7C7C7;
+// 浅边框色(覆盖element-ui内置变量)
+$--border-color-light: #E7EAED;
+// 浅边框色hover
+$--border-color-light-hover: darken($--border-color-light, 10%);
+// 浅边框色focus
+$--border-color-light-focus: darken($--border-color-light, 20%);
 
 /* 5.提示色 */
 // 正常绿色(覆盖element-ui内置变量)
@@ -116,6 +120,18 @@ $--button-icon-border-color: $--border-color-base; // 边框色
 $--button-icon-hover-border-color: $--border-color-base; // hover边框色
 $--button-icon-active-border-color: mix(#FFF, $--color-primary, 10%); // focus边框色
 
+/* 13.panel */
+$--chart-title-hover-background-color: $--background-color-1;
+$--chart-box-border-color: $--border-color-light;
+
+/* 14.popover */
+$--popover-background-color: $--background-color-empty;
+
+/* 15.侧滑 */
+$--right-box-shadow: -3px 0 8px -3px #ccc;
+$--right-box-sub-title-background-color: $--background-color-base;
+$--right-box-sub-title-border-color: $--right-box-sub-title-background-color;
+
 
 /*** themes/common.scss是与主题切换无关的变量 ***/
 @import './src/common/var.scss';

nezha-fronted/src/assets/stylus/main.scss

@@ -291,21 +291,6 @@ li {
   height: calc(100% - 50px);
 }
 
-/*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
-/*.right-box-menu ,.right-box-role ,.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
-.right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-mib, .right-box-asset, .right-box-add-chart, .right-box-asset-type,
-.right-box-asset-state , .right-box-credential{
-  width: 850px;
-}*/
-.right-box-chart .el-input__inner, .right-box-chart input {
-  background-color: $--background-color-empty;
-}
-/*.right-box-add-endpoint {
-  width: 850px;
-}
-.right-box-add-endpoint.right-box-add-endpoint-snmp {
-  width: 850px;
-}*/
 .snmp-form {
   .el-form-item__content {
     margin-left: 10px !important;
@@ -361,7 +346,7 @@ li {
 /* begin--右侧弹框--内容*/
 .nz-pop { /*小弹框*/
   padding-top: 0;
-  box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);
+  box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color;
   z-index: 2951 !important;
   border-radius: 5px;
 }
@@ -377,7 +362,6 @@ li {
 }
 .nz-pop-select-area, .nz-pop-select-panel {
   padding: 0 !important;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1) !important;
 }
 .nz-pop-select-walk .pop-item-wider {
   position: relative;

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -6,7 +6,7 @@
           <div v-if="isLoading" class="panel-loading"></div>
         </transition>
       </div>
-      <div class="main-container" style="padding-right: 0">
+      <div class="main-container">
         <div class="top-tools">
           <div v-if="panelData.length == 0" class="top-tool-left" style="margin-left: 10px;">
             <button id="panel-add-panel" class="nz-btn nz-btn-style-light nz-btn-size-small" @click="toAdd"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t("dashboard.panel.createPanelTitleSec")}}</button>
@@ -80,7 +80,7 @@
           </template>
         </div>
         <div id="tableList" class="table-list">
-          <div ref="dashboardScrollbar" id="dashboardScrollbar" class="border-t-1-de" style="height: calc(100% - 20px); overflow: auto;">
+          <div id="dashboardScrollbar" ref="dashboardScrollbar" class="table-list-box" style="height: calc(100% - 20px); overflow: auto;">
             <div class="box-content" v-loading="chartListLoading">
               <chart-list ref="chartList" :class="{'show-top':showTopBtn}" :from="fromRoute.panel" :panel-lock="panelLock" @on-edit-chart="editChart" @on-refresh-time="refreshTime"  @on-remove-chart="delChart" @panel-list-loading="load" @on-add-group-item-chart="addGroupItem"></chart-list>
             </div>

nezha-fronted/src/components/page/monitor/project/index.vue

@@ -45,34 +45,3 @@ export default {
   methods: {}
 }
 </script>
-
-<style scoped lang="scss">
-.main-list{
-  height: 100%;
-  width: 100%;
-  display: flex;
-  background: #f6f6f6;
-  overflow-x: auto;
-  .projectList{
-    flex: 1;
-    width: calc(50% - 10px);
-    margin-right: 10px;
-    min-width: 745px;
-  }
-  .projectTopo{
-    flex: 1;
-    width: calc(50% - 10px);
-    margin-right: 10px;
-    min-width: 435px;
-  }
-  .hide{
-    display: none;
-  }
-  .ml10{
-    margin-left: 10px;
-  }
-}
-  /deep/ .main-container{
-    padding-right: 0px !important;
-  }
-</style>