From c508dda3c5a8810b01bed08478d4ee8ebd19b047 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Fri, 19 Nov 2021 14:09:29 +0800
Subject: [PATCH 01/19] =?UTF-8?q?style:=20project=20=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/common/rightBoxCommon.scss |  6 ++
 .../common/labelFilter/clickSearch.scss       |  5 ++
 .../common/v-selectpagenew/selectpage.scss    |  3 +
 .../page/monitor/project/project.scss         | 76 ++++++++++++-------
 .../components/common/project/topologyL5.vue  |  2 +-
 5 files changed, 65 insertions(+), 27 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
index a3d50de95..13d0547b8 100644
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -358,3 +358,9 @@
     }
   }
 }
+.right-box-sub-title {
+  background: $--right-box-sub-title-background-color !important;
+}
+.meta-option-box {
+  color: $--color-text-regular;
+}
diff --git a/nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss b/nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss
index 182dabcb4..59f0d3e5c 100644
--- a/nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss
+++ b/nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss
@@ -114,3 +114,8 @@
 .search-content-box {
   border-bottom: 1px solid $--click-search-items-border-bottom-color !important;
 }
+.el-skeleton {
+  .el-skeleton__item.el-skeleton__p.is-first {
+    background-color: $--background-color-base;
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
index eca051def..dbf0fa135 100644
--- a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
+++ b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
@@ -45,3 +45,6 @@ div.sp-result-area table.sp-table tbody tr.sp-selected td {
   color: $--select-page-focus-color !important;
   cursor: default;
 }
+div.sp-pagination ul li a:hover {
+  color: $--color-text-regular !important;
+}
diff --git a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
index 9128c7878..976caad51 100644
--- a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
+++ b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
@@ -1,30 +1,54 @@
+.main-list {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  background-color: $--background-color-base;
+  overflow-x: auto;
+}
 .main-list--project {
-  .main-list{
-    height: 100%;
-    width: 100%;
-    display: flex;
-    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;
-    }
-    .ml10{
-      margin-left: 10px;
+  .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;
+    .project-box.list-page {
+      width: 100%;
+      height: calc(100% - 8px)!important;
+      position: relative;
+      border-radius: 2px;
+      .main-list {
+        height: calc(100% - 2px) !important;
+        overflow: visible;
+        .top-tools div:nth-of-type(1) {
+          color: $--color-text-primary;
+        }
+        //.nz-table2 {
+        //  padding: 0 !important;
+        //  border: 1px solid $--border-color-base !important;
+        //}
+        .right-bottom-zoom {
+          .zoom-option {
+            color: $--color-text-regular !important;
+          }
+          .zoom-option:hover {
+            color: $--color-text-regular !important;
+          }
+        }
+      }
     }
   }
+  .hide{
+    display: none;
+  }
+  .ml10{
+    margin-left: 10px;
+  }
   .main-container{
     padding-right: 0 !important;
   }
@@ -61,7 +85,7 @@
     }
   }
   .pagination-bottom{
-    width: calc(100% - 30px);
-    bottom: 18px;
+    width: calc(100% - 30px) !important;
+    bottom: 18px !important;
   }
 }
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 4e7834e2e..e4418d428 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -152,7 +152,7 @@
             </div>
           </div>
           <div :class="['page',fromOverView?'overview-page':'']" :style="{
-            border: fromOverView ? 'none' :`1px solid ${theme.borderColorLight}`
+            border: fromOverView ? 'none' :`1px solid $--color-text-regular`
           }">
             <!--画布部分-->
             <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full" @contextmenu="onContextMenu($event)"></div>

From 6a00be20f0ec46624acb7952c38cf3a2cebc98da Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Fri, 19 Nov 2021 14:19:15 +0800
Subject: [PATCH 02/19] =?UTF-8?q?style:=20project=20=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/page/monitor/project/project.scss   | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
index 976caad51..61833643d 100644
--- a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
+++ b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
@@ -1,11 +1,9 @@
-.main-list {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  background-color: $--background-color-base;
-  overflow-x: auto;
-}
-.main-list--project {
+.main-list--project.main-list {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    background-color: $--background-color-base;
+    overflow-x: auto;
   .projectList{
     flex: 1;
     width: calc(50% - 10px);

From 415d6fadf631f8ee4dd614b60453ccd848b01259 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 19 Nov 2021 14:25:27 +0800
Subject: [PATCH 03/19] =?UTF-8?q?fix=EF=BC=9A=20=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=20=E6=B7=BB=E5=8A=A0=E9=80=8F?=
 =?UTF-8?q?=E6=98=8E=E5=BA=A6=E7=9A=84=E9=80=89=E6=8B=A9=20=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8Atopo=E5=9B=BE=20=E8=83=8C=E6=99=AF=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E9=80=8F=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/ChartDiagram/diagram.vue  |  5 ++++-
 nezha-fronted/src/components/common/nezhaColor.vue  | 13 +++++++++++--
 .../components/common/project/L5/CanvasProps.vue    |  2 +-
 .../src/components/common/project/topologyL5.vue    |  5 ++++-
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
index 84963611e..e101164ed 100644
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -808,7 +808,7 @@ export default {
         // data = JSON.parse(localStorage.getItem('topoData'))
         if (!res.data.topo || !data.pens) {
           data = {
-            bkColor: '#FFFFFF',
+            bkColor: '#FFFFFF00',
             gridSize: 10,
             gridColor: '#ededed',
             lineWidth: 1,
@@ -887,6 +887,9 @@ export default {
             if (!data.bkImage) {
               data.bkImage = undefined
             }
+            if (data.bkColor === '#FFFFFF') {
+              data.bkColor = '#FFFFFF00'
+            }
             resolve(data)
           }, 100)
         }
diff --git a/nezha-fronted/src/components/common/nezhaColor.vue b/nezha-fronted/src/components/common/nezhaColor.vue
index 0649bb244..72d68c252 100644
--- a/nezha-fronted/src/components/common/nezhaColor.vue
+++ b/nezha-fronted/src/components/common/nezhaColor.vue
@@ -21,7 +21,7 @@
       <el-row v-if="!single" class="color-tab">
         <div v-for="item in valueArr" :key="item.key" :class="[keyName==item.name?'color-active':'']" @click="colorTabChange(item)">{{item.name}}</div>
       </el-row>
-      <sketch v-model="colors" :disableAlpha="true" @input="updateValue" :presetColors="presetColors"/>
+      <sketch v-model="colors" :disableAlpha="disableAlpha" @input="updateValue" :presetColors="presetColors"/>
     </div>
   </span>
 </template>
@@ -67,6 +67,10 @@ export default {
           '#7C2EA3', '#8F3BB8', '#B877D9'
         ]
       }
+    },
+    disableAlpha: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {},
@@ -89,7 +93,12 @@ export default {
   methods: {
     updateValue (color) {
       this.colors = color.hex
-      this.$emit('colorChange', color.hex, this.keyName)
+      if (!this.disableAlpha) {
+        this.colors = color.hex8
+        this.$emit('colorChange', color.hex8, this.keyName)
+      } else {
+        this.$emit('colorChange', color.hex, this.keyName)
+      }
     },
     changeColor () {
       this.showColorPicker = !this.showColorPicker
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index e224034d0..8a7d093a6 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -1709,7 +1709,7 @@ export default {
         return ''
       }
       ;
-      if (color.length <= 7) {
+      if (color.indexOf('#') === 0) {
         return color
       }
       const rgb = color.split(',')
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index e4418d428..bd08cf041 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -805,7 +805,7 @@ export default {
           // data = JSON.parse(localStorage.getItem('topoData'))
           if (!res.data.topo || !data.pens) {
             data = {
-              bkColor: '#FFFFFF',
+              bkColor: '#FFFFFF00',
               gridSize: 10,
               gridColor: '#ededed',
               lineWidth: 1,
@@ -886,6 +886,9 @@ export default {
               if (!data.bkImage) {
                 data.bkImage = undefined
               }
+              if (data.bkColor === '#FFFFFF') {
+                data.bkColor = '#FFFFFF00'
+              }
               Promise.all(promiseArr).then(res => {
                 res.forEach((response, index) => {
                   const item = data.pens[index]

From cdfa0f86c4be8eaeea4f197f630aa0577ff0ed49 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Fri, 19 Nov 2021 16:16:30 +0800
Subject: [PATCH 04/19] =?UTF-8?q?style:=20modele=20=EF=BC=8Cseelctpage=20?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/common/rightBoxCommon.scss |  4 ++--
 .../components/common/rightBox/moduleBox.scss | 20 +++++++++++++++++--
 .../common/v-selectpagenew/selectpage.scss    | 17 ++++++++++++----
 .../src/assets/css/themes/theme-dark.scss     | 10 +++++++++-
 .../src/assets/css/themes/theme-light.scss    | 12 +++++++++--
 5 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
index 13d0547b8..3001161eb 100644
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -167,7 +167,7 @@
           justify-content: space-between;
           .form__labels-label__span {
             i {
-              color: $--asset-label-btn-icon-color;
+              color: $--nz-icon-color;
             }
           }
         }
@@ -182,7 +182,7 @@
       background-color: $--asset-label-btn-background-color;
 
       i {
-        color: $--asset-label-btn-icon-color;
+        color: $--nz-icon-color;
       }
     }
     .form__flex-container {
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
index 062f8fcd8..31993e939 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
@@ -140,7 +140,7 @@
     top: 15px;
     background: rgba(236,127,102,0.1);
     padding: 2px 6px;
-    color: #EC7F66;
+    color: $--nz-icon-color;
   }
   .endpoint-title{
     border: 1px solid $--border-color-light;
@@ -227,7 +227,7 @@
   border: none!important;
 }
 .param-box-row-symbol {
-  color: $--color-text-regular;
+  color: $--color-text-regular !important;
 }
 .module-form__label {
   padding-bottom: 6px;
@@ -235,3 +235,19 @@
   line-height: 16px;
   color: $--color-text-regular;
 }
+.el-tooltip__popper.prevent-clickoutside {
+  background-color: $--background-color-empty;
+}
+.vue-tags-input,.ti-new-tag-input {
+  background-color: $--value-input-background-color !important;
+  .ti-input {
+    border: 1px solid $--border-color-light;
+    .ti-tag.ti-valid {
+      background-color: $--value-background-color;
+      color: $--value-color;
+    }
+    .ti-new-tag-input {
+      color: $--color-text-regular !important;
+    }
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
index dbf0fa135..a65370d4a 100644
--- a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
+++ b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
@@ -1,5 +1,8 @@
-.el-picker-panel,.sp-base.sp-inputs,.sp-search,.sp-result-area,.sp-pagination{
-  background: $--background-color-empty !important;
+.el-picker-panel,.sp-base.sp-inputs{
+  background: $--input-background-color !important;
+}
+.sp-search,.sp-result-area,.sp-pagination {
+  background-color: $--background-color-empty !important;
 }
 .el-date-table td.today span {
   color: $--button-primary-color !important;
@@ -17,9 +20,15 @@
 }
 .sp-selected-tag {
   color: $--color-text-regular !important;
-  background-color: $--background-color-base !important;
+  background-color: $--select-page-tag-background-color !important;
   i {
-    color: #aaa !important;
+    color: $--color-text-regular !important;
+  }
+}
+.sp-selected-tag:hover {
+  background-color: $--background-color-empty !important;
+  i:hover {
+    color: $--color-text-primary !important;
   }
 }
 .sp-search-input {
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 2f2f84bdf..476fe8dbf 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -127,7 +127,6 @@ $--button-icon-hover-border-color: $--button-icon-border-color; // hover边框
 $--button-icon-active-border-color: $--color-text-primary; // focus边框色
 
 /* Asset */
-$--asset-label-btn-icon-color: $--button-primary-color; //icon
 $--asset-label-btn-border-color: $--border-color-light; // border
 $--asset-label-btn-background-color: #222329; // background
 
@@ -140,6 +139,15 @@ $--click-search-items-color: $--color-text-regular; // color
 $--select-page-background-color: $--background-color-empty;
 $--select-page-hover-background-color: $--button-light-hover-background-color;
 $--select-page-focus-color: #666666;
+$--select-page-tag-background-color: $--background-color-empty;
+
+// icon字色
+$--nz-icon-color: $--button-primary-color;
+
+// value
+$--value-background-color: $--background-color-empty;
+$--value-input-background-color: $--background-color-base;
+$--value-color: $--table-header-font-color;
 
 /* 13.panel */
 $--chart-title-hover-background-color: #323238;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index 19e75c623..b80d0301f 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -125,7 +125,6 @@ $--button-icon-hover-border-color: $--border-color-base; // hover边框色
 $--button-icon-active-border-color: mix(#FFF, $--color-primary, 10%); // focus边框色
 
 /* Asset */
-$--asset-label-btn-icon-color: $--color-primary; //icon
 $--asset-label-btn-border-color: mix(#FFF, $--color-primary, 60%); // border
 $--asset-label-btn-background-color: #FFF4E8; // background
 
@@ -135,9 +134,18 @@ $--click-search-items-border-bottom-color: $--border-color-base; // border
 $--click-search-items-color: $--color-primary; // color
 
 // selectPage
-$--select-page-background-color: $--background-color-empty;
+$--select-page-background-color: $--background-color-base;
 $--select-page-hover-background-color: #f6f8fa;
 $--select-page-focus-color: #CCCCCC;
+$--select-page-tag-background-color: #e4eaee;
+
+// icon 字色
+$--nz-icon-color: $--color-primary; //icon
+
+// value
+$--value-background-color: #5C6BC0;
+$--value-color: #FFFFFF;
+$--value-input-background-color: $--value-color;
 
 /* 13.panel */
 $--chart-title-hover-background-color: $--background-color-1;

From 8cc89464856eabdb884fc857b4e2c456c0bd326a Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Fri, 19 Nov 2021 18:21:10 +0800
Subject: [PATCH 05/19] =?UTF-8?q?style:=20module=20=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/common.scss      | 10 ++++
 .../components/common/paramBpx/paramBox.scss  | 40 +++++++++++++
 .../components/common/rightBox/moduleBox.scss | 29 ++++++----
 .../src/assets/css/components/index.scss      |  2 +
 .../page/dashboard/explore/explore.scss       | 27 +++++----
 .../src/assets/css/themes/theme-dark.scss     |  1 +
 .../src/assets/css/themes/theme-light.scss    |  1 +
 nezha-fronted/src/assets/stylus/main.scss     | 58 -------------------
 .../common/rightBox/editEndpointBoxNew.vue    |  2 +-
 .../components/common/rightBox/moduleBox.vue  |  2 +-
 10 files changed, 88 insertions(+), 84 deletions(-)
 create mode 100644 nezha-fronted/src/assets/css/components/common/paramBpx/paramBox.scss

diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index a0155fd7a..d7f89853e 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -234,3 +234,13 @@ td .nz-icon-gear:before{
     opacity: 1 !important;
   }
 }
+.right-box .right-box-form-add,.right-box .right-box-form-minus-box{
+  padding:4px 6px;
+  background: $--background-color-copy;
+  border-radius: $--border-radius-small;
+  border: 1px solid $--span-nz-icon-border-color;
+  cursor: pointer;
+  .nz-icon-plus {
+    color: $--nz-icon-color;
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/common/paramBpx/paramBox.scss b/nezha-fronted/src/assets/css/components/common/paramBpx/paramBox.scss
new file mode 100644
index 000000000..26b92c863
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/common/paramBpx/paramBox.scss
@@ -0,0 +1,40 @@
+/* start--param*/
+.param-box, .tag-edit-box {
+  border: 1px solid #DCDFE6;
+  border-radius: 2px;
+}
+.param-box-endpoint {
+  height: 325px;
+}
+.param-box-module, .tag-edit-box {
+  height: 140px;
+}
+.param-box-row {
+  padding: 0;
+  position: relative;
+}
+.param-box-row>div {
+  display: inline-block;
+}
+.param-box-row-key, .param-box-row-value {
+  display: inline-block;
+  width: 43%;
+}
+.param-box-row-eq {
+  display: inline-block;
+  width: 22px;
+  text-align: center;
+  height: 32px;
+  line-height: 32px;
+  color: #c4c7cF;
+}
+.param-box-row-symbol {
+  display: inline-block;
+  padding-left: 3px;
+  font-size: 12px;
+  color: $--color-text-regular;
+  cursor: pointer;
+}
+.param-box .param-box-row .is-error {
+  padding-bottom: 10px;
+}
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
index 31993e939..80e95bad4 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
@@ -53,7 +53,7 @@
     padding-left: 0;
   }
   .el-tabs__item{
-    width: 90px;
+    min-width: 90px;
     padding: 0 10px;
     text-align: center;
   }
@@ -102,10 +102,6 @@
     padding: 10px 0px 10px 15px;
     width:100%;
     margin-left: 0px;
-    pre{
-      max-height: 300px;
-      min-height: 100px;
-    }
   }
   .configs-copy-value .copy-value-content{
     position: absolute;
@@ -138,8 +134,9 @@
     position: absolute;
     right: 20px;
     top: 15px;
-    background: rgba(236,127,102,0.1);
+    background: $--background-color-copy;
     padding: 2px 6px;
+    border: 1px solid $--span-nz-icon-border-color;
     color: $--nz-icon-color;
   }
   .endpoint-title{
@@ -169,13 +166,13 @@
     }
   }
   .value-mapping-add {
-    background: rgba(250,144,28,0.1);
-    border: 1px solid #FFE0BD;
     margin-bottom: 10px;
     height: 24px;
-    line-height: 24px;
-    color: $--color-primary;
+    line-height: 23px;
     box-sizing: border-box;
+    background: $--background-color-copy;
+    border: 1px solid $--span-nz-icon-border-color;
+    color: $--nz-icon-color;
   }
   #module-box-relabel .vue-tags-input{
     max-width: unset;
@@ -198,6 +195,15 @@
       text-transform: Capitalize;
     }
   }
+  .configs-copy-value {
+    pre {
+      color: $--color-text-primary;
+      padding: 15px;
+    }
+    i {
+      color: $--color-text-regular;
+    }
+  }
 }
 .sub-label {
   padding-right: 15px;
@@ -250,4 +256,7 @@
       color: $--color-text-regular !important;
     }
   }
+  .ti-input:hover {
+    border: 1px solid $--border-color-light-hover;
+  }
 }
diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss
index 790896fbb..50ed37545 100644
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -87,3 +87,5 @@
 @import './page/monitor/project/project.scss';
 
 @import 'common/v-selectpagenew/selectpage.scss';
+
+@import "common/paramBpx/paramBox";
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
index bff01217d..f87c11add 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
@@ -3,6 +3,19 @@
   padding: 10px 0 10px 10px;
   background-color: $--background-color-base;
   box-sizing: border-box;
+  pre {
+    border: 1px solid $--border-color-base;
+    border-left: 4px solid #e6522c;
+    border-radius: 0;
+    font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
+    background-color: $--background-color-empty;
+    color: $--color-text-primary;
+    padding: 15px;
+  }
+
+  pre code {
+    white-space: pre;
+  }
 
   .el-table--border::after, .el-table--group::after, .el-table::before {
     height: 0;
@@ -280,20 +293,6 @@
   background-color: transparent;
 }
 
-pre {
-  border: 1px solid $--border-color-base;
-  border-left: 4px solid #e6522c;
-  border-radius: 0;
-  font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
-  background-color: $--background-color-empty;
-  color: $--color-text-primary;
-  padding: 15px;
-}
-
-pre code {
-  white-space: pre;
-}
-
 code {
   color: $--color-text-primary;
 }
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 476fe8dbf..f514aa708 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -143,6 +143,7 @@ $--select-page-tag-background-color: $--background-color-empty;
 
 // icon字色
 $--nz-icon-color: $--button-primary-color;
+$--span-nz-icon-border-color: $--border-color-light-hover;
 
 // value
 $--value-background-color: $--background-color-empty;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index b80d0301f..7c0228e9c 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -141,6 +141,7 @@ $--select-page-tag-background-color: #e4eaee;
 
 // icon 字色
 $--nz-icon-color: $--color-primary; //icon
+$--span-nz-icon-border-color: $--asset-label-btn-border-color;
 
 // value
 $--value-background-color: #5C6BC0;
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 651cea591..40633dcd2 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -707,46 +707,6 @@ li {
 .right-box-form-btns button {
   margin-left: 10px;
 }
-/* start--param*/
-.param-box, .tag-edit-box {
-  border: 1px solid #DCDFE6;
-  border-radius: 2px;
-}
-.param-box-endpoint {
-  height: 325px;
-}
-.param-box-module, .tag-edit-box {
-  height: 140px;
-}
-.param-box-row {
-  padding: 0;
-  position: relative;
-}
-.param-box-row>div {
-  display: inline-block;
-}
-.param-box-row-key, .param-box-row-value {
-  display: inline-block;
-  width: 43%;
-}
-.param-box-row-eq {
-  display: inline-block;
-  width: 22px;
-  text-align: center;
-  height: 32px;
-  line-height: 32px;
-  color: #c4c7cF;
-}
-.param-box-row-symbol {
-  display: inline-block;
-  padding-left: 3px;
-  font-size: 12px;
-  color: #DCDFE6;
-  cursor: pointer;
-}
-.param-box .param-box-row .is-error {
-  padding-bottom: 10px;
-}
 /* end--param*/
 .right-box-form-content .el-select {
   width: 100%;
@@ -1424,24 +1384,6 @@ li {
   width: calc(50% - 30px);
   margin-left: 0;
 }
-.right-box .right-box-form-add,.right-box  .right-box-form-minus-box{
-  background: rgba(250,144,28,.1);
-  padding:4px 6px;
-  border-radius: 2px;
-  cursor: pointer;
-}
-.right-box .right-box-form-add .nz-icon-create-square{
-  color: $--color-primary;
-  cursor: pointer;
-}
-.right-box .right-box-form-add .nz-icon-plus{
-  color: $--color-primary;
-  cursor: pointer;
-}
-.right-box  .right-box-form-minus-box .nz-icon-minus{
-  color: $--color-primary;
-  cursor: pointer;
-}
 .nz-icon-caret-right{
   font-size: 12px;
 }
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index 359e41b68..fe15c0dea 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -563,7 +563,7 @@
           <div class="right-box-line"></div>
           <div class="configs-copy-value">
             <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
-            <pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
+            <pre>{{configsCopyValue}}</pre>
           </div>
         </el-form>
       </div>
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 1764a4398..85a3a6222 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -542,7 +542,7 @@
           <div class="right-box-line"></div>
           <div id="module-box-preview" ref="previewBoxScrollbar"  class="configs-copy-value"  style="overflow: auto;">
             <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
-            <pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
+            <pre>{{configsCopyValue}}</pre>
           </div>
         </el-form>
       </div>

From 7ee0375ffdffec0f6fe831ab734a938fd02b7503 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Mon, 22 Nov 2021 17:01:41 +0800
Subject: [PATCH 06/19] =?UTF-8?q?style:=20=E4=B8=BB=E9=A2=98=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/rightBox/moduleBox.scss |  2 +-
 .../common/table/alert/alertMessageTable.scss | 26 ++++++++++---------
 .../css/components/common/timePicker.scss     |  5 +++-
 .../common/v-selectpagenew/selectpage.scss    | 24 ++++++++++++++---
 .../src/assets/css/themes/theme-dark.scss     |  5 ++++
 .../src/assets/css/themes/theme-light.scss    |  5 ++++
 .../components/common/rightBox/moduleBox.vue  |  2 +-
 7 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
index 80e95bad4..9c4b36c5b 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
@@ -189,7 +189,7 @@
     .pipeline-title{
       font-family: Roboto-Medium;
       font-size: 14px;
-      color: $--color-primary;
+      color: $--color-title-primary;
       letter-spacing: 0;
       font-weight: 600;
       text-transform: Capitalize;
diff --git a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
index b465bc6e9..58736892c 100644
--- a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
@@ -1,15 +1,17 @@
-.pointer{
-  background: $--color-primary;
-  border-radius: 2px;
-  border: none;
-  width: 40px;
-  height: 22px;
-  box-sizing: border-box;
-  text-align:center;
-  color: #fff;
-  font-size: 12px;
-  margin-right: 20px;
-}
+//.alert-message-list {
+//  .pointer{
+//    background: $--color-primary;
+//    border-radius: 2px;
+//    border: none;
+//    width: 40px;
+//    height: 22px;
+//    box-sizing: border-box;
+//    text-align:center;
+//    color: #fff;
+//    font-size: 12px;
+//    margin-right: 20px;
+//  }
+//}
 .alertLabelInfo{
   border: 1px solid $--border-color-light;
   border-bottom: none;
diff --git a/nezha-fronted/src/assets/css/components/common/timePicker.scss b/nezha-fronted/src/assets/css/components/common/timePicker.scss
index af5001291..0b4b28b69 100644
--- a/nezha-fronted/src/assets/css/components/common/timePicker.scss
+++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss
@@ -19,9 +19,12 @@
     line-height: 30px;
   }
 }
+.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
+  color: $--color-primary !important;
+}
 .nz-dashboard-dropdown-bg {
   background: $--color-primary;
-  color: #fff !important;
+  color: $--time-picker-hover-color !important;
 }
 .calendar-dropdown-title {
   white-space: nowrap;
diff --git a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
index a65370d4a..d2900c7c4 100644
--- a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
+++ b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
@@ -1,4 +1,4 @@
-.el-picker-panel,.sp-base.sp-inputs{
+.el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input{
   background: $--input-background-color !important;
 }
 .sp-search,.sp-result-area,.sp-pagination {
@@ -36,10 +36,10 @@
   border: 1px solid $--border-color-light !important;
   color: $--color-text-regular !important;
 }
-.sp-base.sp-inputs {
+.sp-base.sp-inputs,.sp-base.sp-input {
   border: 1px solid $--border-color-light !important;
 }
-.sp-base.sp-inputs:hover,.sp-base.sp-inputs:focus {
+.sp-base.sp-inputs:hover,.sp-base.sp-input:hover,.sp-base.sp-inputs:focus,.sp-base.sp-input:focus {
   border: 1px solid $--border-color-light-hover !important;
 }
 .v-dropdown-container.v-dropdown-no-border {
@@ -57,3 +57,21 @@ div.sp-result-area table.sp-table tbody tr.sp-selected td {
 div.sp-pagination ul li a:hover {
   color: $--color-text-regular !important;
 }
+div.v-selectpage div.sp-input-container div.sp-input {
+  color: $--color-text-regular !important;
+}
+div.v-selectpage div.sp-input-container.sp-open div.sp-input {
+  border: 1px solid #aaa;
+  border-radius: 2px;
+  color: $--color-text-regular !important;
+}
+.sp-button {
+  .sp-caret {
+    color: $--color-text-regular !important;
+  }
+}
+.sp-button.open {
+  .sp-caret {
+    color: $--color-text-regular !important;
+  }
+}
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index f514aa708..9207a34a4 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -33,6 +33,8 @@ $--color-text-regular: #BEBEBE;
 $--color-text-secondary: #999998;
 // 链接字色
 $--color-text-link: #3C92F1;
+// title 字色
+$--color-title-primary: $--color-text-primary;
 
 /* 4.边框色 */
 // 普通边框色
@@ -150,6 +152,9 @@ $--value-background-color: $--background-color-empty;
 $--value-input-background-color: $--background-color-base;
 $--value-color: $--table-header-font-color;
 
+// time picker
+$--time-picker-hover-color: #FFFFFF;
+
 /* 13.panel */
 $--chart-title-hover-background-color: #323238;
 $--chart-box-border-color: $--border-color-light;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index 7c0228e9c..d1ea09e32 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -33,6 +33,8 @@ $--color-text-regular: #666665;
 $--color-text-secondary: #999998;
 // 链接字色
 $--color-text-link: #3C92F1;
+// title 字色
+$--color-title-primary: $--color-primary;
 
 /* 4.边框色 */
 // 普通边框色(覆盖element-ui内置变量)
@@ -148,6 +150,9 @@ $--value-background-color: #5C6BC0;
 $--value-color: #FFFFFF;
 $--value-input-background-color: $--value-color;
 
+// time picker
+$--time-picker-hover-color: $--value-color;
+
 /* 13.panel */
 $--chart-title-hover-background-color: $--background-color-1;
 $--chart-box-border-color: $--border-color-light;
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 85a3a6222..5b9378a7a 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -427,7 +427,7 @@
                         >
                           <el-input v-model="item2.expressions[eindex].key" placeholder="key" size="mini" ></el-input>
                         </el-form-item>
-                        =
+                        <span class="param-box-row-eq">=</span>
                         <el-form-item
                           :prop="'configs.1.config.'+ index +'.pipeline.' + index2 + '.expressions.'+eindex+'.value'"
                           :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"

From f458a59f52e7cb820fed6eec47804a3e33450872 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Mon, 22 Nov 2021 17:37:51 +0800
Subject: [PATCH 07/19] =?UTF-8?q?style:=20model=20=E5=AD=97=E8=89=B2?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/components/common/rightBox/moduleBox.scss    | 2 +-
 nezha-fronted/src/assets/css/themes/theme-dark.scss             | 2 --
 nezha-fronted/src/assets/css/themes/theme-light.scss            | 2 --
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
index 9c4b36c5b..80e95bad4 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
@@ -189,7 +189,7 @@
     .pipeline-title{
       font-family: Roboto-Medium;
       font-size: 14px;
-      color: $--color-title-primary;
+      color: $--color-primary;
       letter-spacing: 0;
       font-weight: 600;
       text-transform: Capitalize;
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 9207a34a4..0311a2b65 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -33,8 +33,6 @@ $--color-text-regular: #BEBEBE;
 $--color-text-secondary: #999998;
 // 链接字色
 $--color-text-link: #3C92F1;
-// title 字色
-$--color-title-primary: $--color-text-primary;
 
 /* 4.边框色 */
 // 普通边框色
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index d1ea09e32..401ec793c 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -33,8 +33,6 @@ $--color-text-regular: #666665;
 $--color-text-secondary: #999998;
 // 链接字色
 $--color-text-link: #3C92F1;
-// title 字色
-$--color-title-primary: $--color-primary;
 
 /* 4.边框色 */
 // 普通边框色(覆盖element-ui内置变量)

From 6f739034b9a1c0429f57bbc14d6120757229b915 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Tue, 23 Nov 2021 14:19:15 +0800
Subject: [PATCH 08/19] =?UTF-8?q?style:=20=E4=B8=BB=E9=A2=98=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/alert/alertLabel.scss   |  6 ++
 .../common/alert/alertRuleInfo.scss           |  4 +-
 .../common/table/alert/alertMessageTable.scss |  1 -
 .../css/components/page/alert/nzAlertTag.scss | 78 +++++++++----------
 .../page/dashboard/overview/overview2.scss    | 31 ++++++--
 .../src/assets/css/themes/theme-dark.scss     | 16 ++++
 .../src/assets/css/themes/theme-light.scss    | 15 ++++
 .../page/dashboard/overview/overview.vue      | 10 +--
 8 files changed, 107 insertions(+), 54 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
index 112c9d910..ed0064154 100644
--- a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
@@ -10,6 +10,12 @@
     border-bottom: none;
     font-size: 13px;
     line-height: 26px;
+    .active {
+      color: $--color-primary;
+      border-bottom: none;
+      cursor: default;
+      font-weight: bold;
+    }
   }
   .alert-label-box{
     display: flex;
diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss b/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
index 2970fbc3d..a49b5b7bd 100644
--- a/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
@@ -68,19 +68,17 @@
 .alert-rule-box{
   display: flex;
   justify-content:space-between;
-  border-bottom: 1px solid $--border-color-light;
 }
 .alert-rule-title{
   text-align: left;
   width: 110px;
-  border-right: 1px solid $--border-color-light;
   color: $--color-text-regular;
   padding: 0 3px 0 13px;
 }
 .alert-rule-value{
   text-align: left;
   width: 150px;
-  color: #1a1a1a;
+  color: $--color-text-regular;
   padding: 0 3px 0 13px;
   word-wrap: break-word;
   white-space: normal;
diff --git a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
index 58736892c..ca6739c0a 100644
--- a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
@@ -96,7 +96,6 @@
 }
 .red,.green{
   color: white;
-  padding: 2px 5px;
   border-radius: 4px;
 }
 /deep/ .nz-message .el-textarea textarea{
diff --git a/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss b/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
index 397e3d5eb..b0f19c489 100644
--- a/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
+++ b/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
@@ -32,44 +32,44 @@
     word-break: break-all;
     display: inline-block;
   }
-  .nz-alert-tag_normal {
-    border-color: $--color-text-link;
-    .nz-alert-tag__label {
-      border-right: 1px solid $--color-text-link;
-      background-color: $--color-text-link;
-      color: white;
-    }
-  }
-  .nz-alert-tag_success {
-    border-color: #50d050;
-    .nz-alert-tag__label {
-      border-right: 1px solid #50d050;
-      background-color: #50d050;
-      color: white;
-    }
-  }
-  .nz-alert-tag_info {
-    border-color: $--color-text-secondary;
-    .nz-alert-tag__label {
-      border-right: 1px solid $--color-text-secondary;
-      background-color: $--color-text-secondary;
-      color: white;
-    }
-  }
-  .nz-alert-tag_danger {
-    border-color: #d64f40;
-    .nz-alert-tag__label {
-      border-right: 1px solid #d64f40;
-      background-color: #d64f40;
-      color: white;
-    }
-  }
-  .nz-alert-tag_warning {
-    border-color: #e6a23c;
-    .nz-alert-tag__label {
-      border-right: 1px solid #e6a23c;
-      background-color: #e6a23c;
-      color: white;
-    }
+}
+.nz-alert-tag_normal {
+  border-color: $--color-text-link;
+  .nz-alert-tag__label {
+    border-right: 1px solid $--color-text-link;
+    background-color: $--color-text-link;
+    color: white;
+  }
+}
+.nz-alert-tag_success {
+  border-color: #50d050;
+  .nz-alert-tag__label {
+    border-right: 1px solid #50d050;
+    background-color: #50d050;
+    color: white;
+  }
+}
+.nz-alert-tag_info {
+  border-color: $--color-text-secondary;
+  .nz-alert-tag__label {
+    border-right: 1px solid $--color-text-secondary;
+    background-color: $--color-text-secondary;
+    color: white;
+  }
+}
+.nz-alert-tag_danger {
+  border-color: #d64f40;
+  .nz-alert-tag__label {
+    border-right: 1px solid #d64f40;
+    background-color: #d64f40;
+    color: white;
+  }
+}
+.nz-alert-tag_warning {
+  border-color: #e6a23c;
+  .nz-alert-tag__label {
+    border-right: 1px solid #e6a23c;
+    background-color: #e6a23c;
+    color: white;
   }
 }
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss
index a0cf34b77..73fa138d4 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss
@@ -14,6 +14,7 @@
     margin: 0;
     position: absolute;
     z-index: 1;
+    color: $--color-text-primary;
   }
   .el-carousel__indicator--horizontal .el-carousel__button{
     background-color: #C0C4CC;
@@ -25,6 +26,9 @@
   .el-carousel__indicator--horizontal.is-active .el-carousel__button{
     opacity: 1;
   }
+  .nz-table2 {
+    height: 100% !important;
+  }
 }
 .overview-content-header{
   display: flex;
@@ -282,12 +286,27 @@
   font-size: 0.7rem;
   font-style: italic;
 }
+.overview-to-alert__background {
+  background-color: $--overview-alert-icon-background-color;
+}
+.overview-to-asset__background {
+  background-color: $--overview-asset-icon-background-color;
+}
+.overview-to-project__background {
+  background-color: $--overview-project-icon-background-color;
+}
+.overview-to-module__background {
+  background-color: $--overview-module-icon-background-color;
+}
+.overview-to-endpoint__background {
+  background-color: $--overview-endpoint-icon-background-color;
+}
 .content-col-content-icon {
   height: 3.75rem;
   width: 3.75rem;
   border-radius: 50%;
   box-sizing: border-box;
-  border: 1px solid #e5eaef;
+  border: 1px solid $--overview-border-color;
   position: relative;
   .nz-icon {
     font-size: 1.75rem !important;
@@ -297,21 +316,21 @@
     transform: translate(-50%, -50%);
   }
   .nz-icon-overview-project {
-    color: #80A7F4;
+    color: $--overview-asset-icon-color;
   }
   .nz-icon-project {
     font-size: 1.75rem !important;
-    color: #F6B275;
+    color: $--overview-project-icon-color;
   }
   .nz-icon-overview-module {
-    color: #7AD0BC;
+    color: $--overview-module-icon-color;
   }
   .nz-icon-overview-endpoint {
-    color: #969DEA;
+    color: $--overview-endpoint-icon-color;
   }
   .nz-icon-overview-alert {
     font-size: 1.75rem !important;
-    color: #EE9A87;
+    color: $--overview-alert-icon-color;
   }
 }
 .content-num-box {
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 0311a2b65..dd50475f4 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -153,6 +153,22 @@ $--value-color: $--table-header-font-color;
 // time picker
 $--time-picker-hover-color: #FFFFFF;
 
+/* overview */
+// color
+$--overview-asset-icon-color: $--time-picker-hover-color;
+$--overview-project-icon-color: $--time-picker-hover-color;
+$--overview-module-icon-color: $--time-picker-hover-color;
+$--overview-endpoint-icon-color: $--time-picker-hover-color;
+$--overview-alert-icon-color: $--time-picker-hover-color;
+// background
+$--overview-module-icon-background-color: #5F80D5;
+$--overview-endpoint-icon-background-color: #7F87EA;
+$--overview-alert-icon-background-color: #EFA25D;
+$--overview-asset-icon-background-color: #568FFF;
+$--overview-project-icon-background-color: #4DB4FF;
+// border
+$--overview-border-color: $--background-color-empty;
+
 /* 13.panel */
 $--chart-title-hover-background-color: #323238;
 $--chart-box-border-color: $--border-color-light;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index 401ec793c..84aae22fc 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -151,6 +151,21 @@ $--value-input-background-color: $--value-color;
 // time picker
 $--time-picker-hover-color: $--value-color;
 
+/* overview */
+$--overview-asset-icon-color: #80A7F4;
+$--overview-project-icon-color: #F6B275;
+$--overview-module-icon-color: #7AD0BC;
+$--overview-endpoint-icon-color: #969DEA;
+$--overview-alert-icon-color: #EE9A87;
+// background
+$--overview-module-icon-background-color: $--value-color;
+$--overview-endpoint-icon-background-color: $--value-color;
+$--overview-alert-icon-background-color: $--value-color;
+$--overview-asset-icon-background-color: $--value-color;
+$--overview-project-icon-background-color: $--value-color;
+// border
+$--overview-border-color: #E5EAEF;
+
 /* 13.panel */
 $--chart-title-hover-background-color: $--background-color-1;
 $--chart-box-border-color: $--border-color-light;
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
index 3009a14ba..82cfc10a6 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
@@ -24,7 +24,7 @@
       <div class="content-row-box">
         <div class="content-col-box">
           <div id="overview-to-asset" v-loading="assetLoading" class="content-col-content clickable" @click="jumpTo('asset')">
-            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-project"></i></div>
+            <div class="content-col-content-icon overview-to-asset__background"><i class="nz-icon nz-icon-overview-project"></i></div>
             <div class="content-num-box">
               <el-tooltip :content="`${assetData}`" class="item" effect="light" placement="top">
                 <div class="content-col-content-num">
@@ -40,7 +40,7 @@
         </div>
         <div class="content-col-box">
           <div v-loading="projectLoading" class="content-col-content clickable" @click="jumpTo('project')">
-            <div class="content-col-content-icon"><i class="nz-icon nz-icon-project"></i></div>
+            <div class="content-col-content-icon overview-to-project__background"><i class="nz-icon nz-icon-project"></i></div>
             <div class="content-num-box">
               <el-tooltip :content="`${projectData.total}`" class="item" effect="light" placement="top">
                 <div class="content-col-content-num">
@@ -55,7 +55,7 @@
         </div>
         <div class="content-col-box">
           <div v-loading="moduleLoading" class="content-col-content clickable" @click="jumpTo('module')">
-            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-module"></i></div>
+            <div class="content-col-content-icon overview-to-module__background"><i class="nz-icon nz-icon-overview-module"></i></div>
             <div class="content-num-box">
               <el-tooltip :content="`${moduleData.total}`" class="item" effect="light" placement="top">
                 <div class="content-col-content-num">
@@ -70,7 +70,7 @@
         </div>
         <div class="content-col-box">
           <div v-loading="endpointLoading" class="content-col-content clickable" @click="jumpTo('endpoint')">
-            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
+            <div class="content-col-content-icon overview-to-endpoint__background"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
             <div class="content-num-box">
               <el-tooltip :content="`${endpointData.num}`" class="item" effect="light" placement="top">
                 <div class="content-col-content-num">
@@ -85,7 +85,7 @@
         </div>
         <div class="content-col-box">
           <div id="overview-to-alertlist" v-loading="alertMessageLoading" class="content-col-content clickable" @click="jumpTo('alertList')">
-            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-alert"></i></div>
+            <div class="content-col-content-icon overview-to-alert__background"><i class="nz-icon nz-icon-overview-alert"></i></div>
             <div class="content-num-box">
               <el-tooltip :content="`${alertMessageData.num}`" class="item" effect="light" placement="top">
                 <div class="content-col-content-num">

From 9009b715ae0acd4ee9750194ec493498544f9ea8 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Tue, 23 Nov 2021 18:16:11 +0800
Subject: [PATCH 09/19] =?UTF-8?q?style:=20=E4=B8=BB=E9=A2=98=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/common.scss      | 23 ++++++++++
 .../src/assets/css/common/rightBoxCommon.scss |  7 ---
 .../common/rightBox/alertRuleBox.scss         | 36 ++++++++++-----
 .../common/rightBox/alertSilenceBox.scss      | 28 ++++++------
 .../common/v-selectpagenew/selectpage.scss    | 44 ++++++++++++-------
 .../common/rightBox/alertRuleBox.vue          |  4 +-
 6 files changed, 93 insertions(+), 49 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index d7f89853e..ccad976e2 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -244,3 +244,26 @@ td .nz-icon-gear:before{
     color: $--nz-icon-color;
   }
 }
+.el-time-panel {
+  background-color: $--background-color-empty;
+  .el-time-panel__footer {
+    border: 1px solid $--border-color-light;
+  }
+}
+//.editor-core {
+//  p {
+//    color: $--color-text-regular;
+//  }
+//}
+//.ql-toolbar.ql-snow,.ql-container.ql-snow {
+//  border: 1px solid $--border-color-light;
+//  .ql-header {
+//    color: $--color-text-primary;
+//  }
+//  .ql-stroke {
+//    stroke: $--color-text-primary;
+//  }
+//  .ql-picker-options {
+//    background-color: $--background-color-empty;
+//  }
+//}
diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
index 3001161eb..4ee0dee5b 100644
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -119,13 +119,6 @@
 
     .el-form-item {
       margin-bottom: 16px;
-      .el-form-item__label{
-        padding-bottom: 6px;
-        font-size: 14px;
-        line-height: 16px;
-        color: #666;
-      }
-
       .el-input__inner:hover {
         border-color: $--border-color-light-hover;
       }
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
index 448e65ac9..d45f7b479 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
@@ -17,6 +17,11 @@
       width: 100%;
     }
   }
+  .alert-box-duration.half-form-item {
+    .el-form-item__content {
+      line-height: 31px !important;
+    }
+  }
   .right-box-alert-rule .right-box__container .el-form-item__content .el-input-group--prepend{
     width: 100%;
   }
@@ -25,6 +30,8 @@
   }
   .el-input-group__prepend{
     position: relative;
+    background: $--border-color-light;
+    border: $--border-color-light;
     .hide-icon{
       width: 38px;
       .el-input__inner{
@@ -33,6 +40,10 @@
       }
     }
   }
+  .el-input-group__append {
+    background: $--border-color-light;
+    border: $--border-color-light;
+  }
   .alert-rule-split-title{
     background: $--background-color-base;
     font-size: 14px;
@@ -44,21 +55,22 @@
     margin-bottom: 10px;
     height: 24px;
   }
-  .el-form-item__content .el-input-group{
+  .el-form-item__content .el-input-group.el-input-group--prepend {
     vertical-align: middle;
-  }
-  .severity-item{
-    color: $--color-text-secondary;
-    font-size: 12px;
-    max-width: 120px;
-    overflow: hidden;
-  }
-  .text-ellipsis{
-    overflow:hidden;
-    text-overflow:ellipsis;
-    white-space:nowrap
+    width: 100%;
   }
   .query-row .metric-selector-input-box {
     width: calc(100% - 120px);
   }
 }
+.severity-item{
+  color: $--color-text-secondary;
+  font-size: 12px;
+  max-width: 120px;
+  overflow: hidden;
+}
+.text-ellipsis{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap
+}
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
index dde785655..c0025baa8 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
@@ -1,13 +1,14 @@
 .range-time {
-  /deep/ .el-radio-button--small .el-radio-button__inner, /deep/ .el-radio-group {
-    width: 100%
+  .el-radio-button--small .el-radio-button__inner,.el-radio-group {
+    width: 100%;
+    background-color: $--background-color-empty;
   }
 
-  /deep/ .el-radio-button {
+  .el-radio-button {
     width: 14.2%
   }
 
-  /deep/ .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
+  .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
     width: 100%;
   }
 
@@ -19,14 +20,15 @@
       width: 48%;
       flex: 1;
       position: relative;
-      /deep/ .el-date-editor.el-input, /deep/ .el-date-editor.el-input__inner{
+      .el-date-editor.el-input,.el-date-editor.el-input__inner{
         width: 100%;
       }
-      /deep/ .el-input__inner{
+      .el-input__inner{
         text-align: center;
       }
       .datepicker-title{
         position: absolute;
+        color: $--color-text-regular;
         left: 15px;
         z-index: 1;
       }
@@ -34,10 +36,10 @@
   }
 }
 .matchers{
-  /deep/ .el-input__prefix{
+  .el-input__prefix{
     left: 0;
   }
-  /deep/ .el-form-item__error{
+  .el-form-item__error{
     left: 126px;
     padding-top: 5px;
   }
@@ -55,7 +57,7 @@
       font-weight: 400;
       text-align: center;
     }
-    /deep/ .matchers-type-title.el-select--small .el-input__inner{
+    .matchers-type-title.el-select--small .el-input__inner{
       background:$--border-color-light;
       font-family: ArialMT;
       font-size: 14px;
@@ -70,19 +72,19 @@
     }
   }
 }
-/deep/ .silence-matchers-value{
+.silence-matchers-value{
   width: calc(100% - 100px);
 }
-/deep/ .silence-matchers-key{
+.silence-matchers-key{
   width: 100%;
 }
 .silence-matchers-regex{
   margin-left: 10px;
 }
-/deep/ .param-box-row-key{
+.param-box-row-key{
   width: 36%;
 }
-/deep/ .param-box-row-value{
+.param-box-row-value{
   width: 50%;
 }
 .module-add-label{
diff --git a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
index d2900c7c4..ccc186077 100644
--- a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
+++ b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
@@ -1,4 +1,4 @@
-.el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input{
+.el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input,.el-picker-panel__footer{
   background: $--input-background-color !important;
 }
 .sp-search,.sp-result-area,.sp-pagination {
@@ -32,46 +32,60 @@
   }
 }
 .sp-search-input {
-  background-color: $--select-page-background-color !important;
-  border: 1px solid $--border-color-light !important;
-  color: $--color-text-regular !important;
+  background-color: $--select-page-background-color;
+  border: 1px solid $--border-color-light;
+  color: $--color-text-regular;
 }
 .sp-base.sp-inputs,.sp-base.sp-input {
-  border: 1px solid $--border-color-light !important;
+  border: 1px solid $--border-color-light;
 }
 .sp-base.sp-inputs:hover,.sp-base.sp-input:hover,.sp-base.sp-inputs:focus,.sp-base.sp-input:focus {
-  border: 1px solid $--border-color-light-hover !important;
+  border: 1px solid $--border-color-light-hover;
 }
 .v-dropdown-container.v-dropdown-no-border {
-  border: 1px solid $--border-color-light !important;
+  border: 1px solid $--border-color-light;
 }
 div.sp-result-area table.sp-table tbody tr.sp-over td {
-  background-color: $--select-page-hover-background-color !important;
-  color: $--button-light-hover-color !important;
+  background-color: $--select-page-hover-background-color;
+  color: $--button-light-hover-color;
   cursor: pointer;
 }
 div.sp-result-area table.sp-table tbody tr.sp-selected td {
-  color: $--select-page-focus-color !important;
+  color: $--select-page-focus-color;
   cursor: default;
 }
 div.sp-pagination ul li a:hover {
-  color: $--color-text-regular !important;
+  color: $--color-text-regular;
 }
 div.v-selectpage div.sp-input-container div.sp-input {
-  color: $--color-text-regular !important;
+  color: $--color-text-regular;
 }
 div.v-selectpage div.sp-input-container.sp-open div.sp-input {
   border: 1px solid #aaa;
   border-radius: 2px;
-  color: $--color-text-regular !important;
+  color: $--color-text-regular;
 }
 .sp-button {
   .sp-caret {
-    color: $--color-text-regular !important;
+    color: $--color-text-regular;
   }
 }
 .sp-button.open {
   .sp-caret {
-    color: $--color-text-regular !important;
+    color: $--color-text-regular;
   }
 }
+.el-picker-panel__footer {
+  border-top: 1px solid $--border-color-light;
+  span {
+    color: $--color-text-regular;
+  }
+  .el-button--text {
+    span {
+      color: $--color-primary;
+    }
+  }
+}
+.el-date-picker__time-header,.el-date-table th {
+  border-bottom: 1px solid $--border-color-light;
+}
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index 3bd619992..98e049c4d 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -87,7 +87,7 @@
           <el-form-item
             v-if="showSnmpTrap"
             :label="$t('alert.config.threshold')"
-            prop="threshold" class="half-form-item"
+            prop="threshold" class="half-form-item alert-box-threshold"
             style="display: inline-block;"
             :rules="[
               { required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' },
@@ -115,7 +115,7 @@
             <el-input id="alert-box-input-inr" v-model.number="editAlertRule.inr" :placeholder="$t('alert.config.inrPlaceholder')" size="small" type="text" :disabled="!showSnmpTrap"></el-input>
           </el-form-item>
           <!--last-->
-          <el-form-item v-if="showSnmpTrap" :label="$t('alert.config.for')" prop="last"  class="half-form-item" :rules=" [
+          <el-form-item v-if="showSnmpTrap" :label="$t('alert.config.for')" prop="last"  class="half-form-item alert-box-duration" :rules=" [
           { required: showSnmpTrap, message: this.$t('validate.required'), trigger: 'change' },
         ]">
             <el-input id="alert-box-input-last" :controls="false" v-model.number="editAlertRule.last" placeholder="" size="small" :disabled="!showSnmpTrap" type="text">

From 891c51c55e58274751b47e4f838c9c5b6b3c5bb5 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Wed, 24 Nov 2021 10:53:50 +0800
Subject: [PATCH 10/19] =?UTF-8?q?style:=20=E4=B8=BB=E9=A2=98=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/common.scss      |  6 +++
 .../common/rightBox/alertSilenceBox.scss      | 12 +++++-
 .../common/v-selectpagenew/selectpage.scss    | 42 +++++++++++++------
 .../src/assets/css/themes/theme-dark.scss     |  6 +++
 .../src/assets/css/themes/theme-light.scss    |  6 +++
 .../common/rightBox/alertSilenceBox.vue       |  2 +-
 6 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index ccad976e2..8369c9661 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -250,6 +250,12 @@ td .nz-icon-gear:before{
     border: 1px solid $--border-color-light;
   }
 }
+.nz-icon-create-square {
+  color: $--nz-icon-color !important;
+}
+.el-scrollbar {
+  background-color: $--background-color-empty;
+}
 //.editor-core {
 //  p {
 //    color: $--color-text-regular;
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
index c0025baa8..032e24fa3 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
@@ -1,13 +1,21 @@
 .range-time {
   .el-radio-button--small .el-radio-button__inner,.el-radio-group {
     width: 100%;
+  }
+  .el-radio-group {
+    border-left: 1px solid $--border-color-light;
+  }
+  .el-radio-button__inner {
+    border: 1px solid  $--border-color-light;
+    border-left: 0;
+    background-color: $--background-color-empty;
+  }
+  .el-button.is-plain {
     background-color: $--background-color-empty;
   }
-
   .el-radio-button {
     width: 14.2%
   }
-
   .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
     width: 100%;
   }
diff --git a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
index ccc186077..1b2c3a28e 100644
--- a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
+++ b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
@@ -1,34 +1,34 @@
 .el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input,.el-picker-panel__footer{
-  background: $--input-background-color !important;
+  background: $--input-background-color;
 }
 .sp-search,.sp-result-area,.sp-pagination {
-  background-color: $--background-color-empty !important;
+  background-color: $--background-color-empty;
 }
-.el-date-table td.today span {
-  color: $--button-primary-color !important;
+.el-date-table td.today.available span {
+  color: $--select-page-color !important;
 }
 .sp-table {
   th {
-    color: $--color-text-primary !important;
+    color: $--color-text-primary;
   }
   td {
-    color: $--color-text-regular !important;
+    color: $--color-text-regular;
   }
 }
 .sp-page-info,.sp-result-message {
-  color: $--color-text-regular !important;
+  color: $--color-text-regular;
 }
 .sp-selected-tag {
-  color: $--color-text-regular !important;
-  background-color: $--select-page-tag-background-color !important;
+  color: $--color-text-regular;
+  background-color: $--select-page-tag-background-color;
   i {
-    color: $--color-text-regular !important;
+    color: $--color-text-regular;
   }
 }
 .sp-selected-tag:hover {
-  background-color: $--background-color-empty !important;
+  background-color: $--background-color-empty;
   i:hover {
-    color: $--color-text-primary !important;
+    color: $--color-text-primary;
   }
 }
 .sp-search-input {
@@ -85,7 +85,23 @@ div.v-selectpage div.sp-input-container.sp-open div.sp-input {
       color: $--color-primary;
     }
   }
+  .el-button--default {
+    margin-left: 10px;
+    color: $--button-primary-color;
+    background: $--select-page-btn-background-color;
+    border: 1px solid $--border-color-light;
+  }
+  .el-button.is-plain:hover {
+    background-color: $--select-page-btn-background-color;
+    border-color: $--select-page-btn-border-color;
+    span {
+      color: $--select-page-btn-color;
+    }
+  }
 }
-.el-date-picker__time-header,.el-date-table th {
+.el-date-table th {
   border-bottom: 1px solid $--border-color-light;
 }
+.el-date-picker__time-header {
+  border-bottom: 1px solid $--select-page-border-color;
+}
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index dd50475f4..326cf085c 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -139,7 +139,13 @@ $--click-search-items-color: $--color-text-regular; // color
 $--select-page-background-color: $--background-color-empty;
 $--select-page-hover-background-color: $--button-light-hover-background-color;
 $--select-page-focus-color: #666666;
+$--select-page-color: $--button-primary-color;
 $--select-page-tag-background-color: $--background-color-empty;
+$--select-page-border-color: $--border-color-light;
+$--select-page-btn-color: mix(#FFF, $--color-primary, 15%);
+$--select-page-btn-border-color:  mix(#FFF, $--color-primary, 15%);
+$--select-page-btn-background-color: $--background-color-base;
+
 
 // icon字色
 $--nz-icon-color: $--button-primary-color;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index 84aae22fc..fe7cbcf4b 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -137,7 +137,13 @@ $--click-search-items-color: $--color-primary; // color
 $--select-page-background-color: $--background-color-base;
 $--select-page-hover-background-color: #f6f8fa;
 $--select-page-focus-color: #CCCCCC;
+$--select-page-color: #232F3E;
 $--select-page-tag-background-color: #e4eaee;
+$--select-page-border-color: $--border-color-base-focus;
+$--select-page-btn-color: #409eff;
+$--select-page-btn-border-color: #409eff;
+$--select-page-btn-background-color: #FFFFFF;
+
 
 // icon 字色
 $--nz-icon-color: $--color-primary; //icon
diff --git a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
index d2dbb6c9b..1ee6a1472 100644
--- a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
@@ -81,7 +81,7 @@
                 <el-input v-model="item.value" class="silence-matchers-value" placeholder="value"  size="mini"></el-input>
                 <el-checkbox v-model="item.regex" :false-label="0" :true-label="1" class="silence-matchers-regex" >Regex</el-checkbox>
               </el-form-item>
-              <span :id="'moduel-remove-label-'+index" class="param-box-row-symbol" @click="removematchers(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
+              <span :id="'moduel-remove-label-'+index" class="param-box-row-symbol" @click="removematchers(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
             </div>
             <div class="" style="text-align: center;">
                <span id="module-add-label" type="button" @click="addmatchers" class="right-box-form-add module-add-label right-box-form-minus-box module-add-label" style="">

From 7a068cbb5f35b0223d2b59669a17439ad470ed5f Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Wed, 24 Nov 2021 11:14:58 +0800
Subject: [PATCH 11/19] =?UTF-8?q?style:=20=E6=90=9C=E7=B4=A2=E6=A1=86?=
 =?UTF-8?q?=E8=BE=B9=E6=A1=86=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/common.scss                     | 3 ---
 .../css/components/common/rightBox/alertSilenceBox.scss      | 5 +++++
 .../src/assets/css/components/common/searchInput.scss        | 4 ++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 8369c9661..dc206a901 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -250,9 +250,6 @@ td .nz-icon-gear:before{
     border: 1px solid $--border-color-light;
   }
 }
-.nz-icon-create-square {
-  color: $--nz-icon-color !important;
-}
 .el-scrollbar {
   background-color: $--background-color-empty;
 }
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
index 032e24fa3..91617cbcb 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
@@ -106,3 +106,8 @@
   line-height: 18px;
   margin-right: 80px;
 }
+.right-box-form-add.module-add-label {
+  .nz-icon-create-square {
+    color: $--nz-icon-color;
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/common/searchInput.scss b/nezha-fronted/src/assets/css/components/common/searchInput.scss
index 5b230d706..433a82a94 100644
--- a/nezha-fronted/src/assets/css/components/common/searchInput.scss
+++ b/nezha-fronted/src/assets/css/components/common/searchInput.scss
@@ -4,7 +4,7 @@
   border: none;
   outline: none;
   cursor: pointer;
-  border-left: 1px solid $--border-color-base;
+  border-left: 1px solid $--border-color-light;
   background-color: lighten($--background-color-base, 10%);
 
   i {
@@ -32,7 +32,7 @@
   position: relative;
   line-height: 25px;
   border-radius: 2px;
-  border: 1px solid $--border-color-base;
+  border: 1px solid $--border-color-light;
 }
 .new-search .search-input-all{
   width: 226px !important;

From 71e209d63d85faed233c3c19546a611447b4e9e0 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Wed, 24 Nov 2021 16:15:41 +0800
Subject: [PATCH 12/19] =?UTF-8?q?style:=20=E4=B8=BB=E9=A2=98=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/common/tableCommon.scss    | 14 +++---
 .../components/page/config/mibBrowser.scss    | 19 ++++----
 .../css/components/page/config/system.scss    | 44 ++++++++++++++++---
 .../src/assets/css/themes/theme-dark.scss     |  3 ++
 .../src/assets/css/themes/theme-light.scss    |  8 +++-
 5 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 6b923ee81..9dfe62558 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -274,19 +274,19 @@
           outline: none;
           transition:all .2s;
         }
-        .el-dropdown {
-          border: 1px solid $--border-color-light;
-        }
         .table-operation-item.table-operation-item--disable{
-          border: 1px solid $--border-color-base;
-          background-color: $--border-color-base;
+          border: 1px solid $--button-light-border-color;
+          background-color: $--button-light-border-color;
           opacity: 0.6;
           outline: none;
           i {
             font-size: 14px;
-            color: $--background-color-empty;
+            color: $--button-primary-color;
           }
         }
+        .table-operation-item.table-operation-item--disable:hover {
+          background-color: $--button-light-border-color;
+        }
         &>.table-operation-item {
           justify-content: center;
           align-items: center;
@@ -309,7 +309,7 @@
         .table-operation-item.table-operation-item--more {
           justify-content: center;
           align-items: center;
-          border: 1px solid $--border-color-base;
+          border: 1px solid $--button-icon-border-color;
           width: 30px;
           i {
             color: $--color-text-secondary;
diff --git a/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss b/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
index bb68b0915..e8849a5ca 100644
--- a/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
@@ -21,7 +21,7 @@
   }
   #browser-advanced {
     border-radius: 0;
-    border-right: 1px solid $--border-color-base-focus;
+    border-right: 1px solid $--border-color-light;
   }
   .mib-browser-btn-group {
     position: relative;
@@ -60,7 +60,7 @@
     display: flex;
     height: calc(100% - 55px);
     width: 100%;
-    border: 1px solid $--border-color-base;
+    border: 1px solid $--border-color-light;
     border-radius: 4px;
     box-sizing: border-box;
   }
@@ -90,14 +90,14 @@
     width: 100%;
     background-color: $--background-color-base;
     cursor: ns-resize;
-    border: 1px solid $--border-color-base;
+    border: 1px solid $--border-color-light;
     border-left: none;
     border-right: none;
   }
   .mib-browser-detail-row {
     line-height: 25px;
     background-color: $--background-color-empty;
-    border-bottom: 1px solid $--border-color-base;
+    border-bottom: 1px solid $--border-color-light;
     font-size: 14px;
     display: flex;
   }
@@ -122,11 +122,11 @@
   /*第一列宽75%*/
   .mib-browser-detail-row>div:last-of-type {
     width: 75%;
-    border-left: 1px solid $--border-color-base;
+    border-left: 1px solid $--border-color-light;
     word-break: break-all;
   }
   .mib-browser-detail-row:not(:last-of-type) {
-    border-bottom: 1px solid $--border-color-base;
+    border-bottom: 1px solid $--border-color-light;
     height: 25px;
   }
   .mib-browser-detail-row:last-of-type {
@@ -144,7 +144,7 @@
   }
   .left-right-resize {
     width: 2px;
-    border: 1px solid $--border-color-base;
+    border: 1px solid $--border-color-light;
     background-color: $--background-color-base;
     cursor: ew-resize;
     height: 100%;
@@ -163,6 +163,9 @@
       .el-table {
         height: calc(100% - 20px) !important;
         width: calc(100% - 20px) !important;
+        .el-table__header-wrapper th {
+          background-color: $--background-color-base;
+        }
       }
       .el-table__body-wrapper td {
         padding: 2px 0 !important;
@@ -174,7 +177,7 @@
     line-height: 30px;
     color: $--color-text-primary;
     font-size: 16px;
-    border-bottom: 1px solid $--border-color-base;
+    border-bottom: 1px solid $--border-color-light;
     padding: 0 5px 0 8px;
     display: flex;
     justify-content: space-between;
diff --git a/nezha-fronted/src/assets/css/components/page/config/system.scss b/nezha-fronted/src/assets/css/components/page/config/system.scss
index f9bd21678..e266f49ab 100644
--- a/nezha-fronted/src/assets/css/components/page/config/system.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/system.scss
@@ -96,19 +96,19 @@
   cursor: pointer;
   color: $--color-text-primary;
 }
-/deep/ .el-form-item--small .el-form-item__error{
+.el-form-item--small .el-form-item__error{
   padding-top: 0;
 }
 .linkUrlTip{
   width: 430px;
 }
-.system-config-form.terminal  /deep/ .el-input-number--small{
+.system-config-form.terminal .el-input-number--small{
   width: 512px;
 }
-.system-config-form.basicForm  /deep/ .el-input-number--small{
+.system-config-form.basicForm .el-input-number--small{
   width: 512px;
 }
-.system-config-form  /deep/ .el-input input{
+.system-config-form .el-input input{
   text-align: left;
 }
 .utc-item {
@@ -195,6 +195,39 @@
   .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(:first-child) {
     margin-left: 5px;
   }
+  .el-input-group__prepend {
+    background-color: $--right-box-sub-title-background-color;
+    border: 1px solid $--border-color-light;
+    border-right: none;
+  }
+  .el-input-group__append {
+    background-color: $--right-box-sub-title-background-color;
+    border: 1px solid $--border-color-light;
+    border-left: none;
+  }
+  .el-input-number__decrease,.el-input-number__increase,.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled {
+    background-color: $--popover-background-color;
+  }
+  .el-input-number__decrease {
+    border-left: 1px solid $--border-color-light !important;
+  }
+  .el-input-number__increase {
+    border-left: 1px solid $--border-color-light;
+    border-bottom: 1px solid $--border-color-light !important;
+  }
+  .el-input-number__decrease.is-disabled {
+    border-left: 1px solid $--border-color-light;
+  }
+  .el-input-number__increase.is-disabled {
+    border-left: 1px solid $--border-color-light;
+    border-bottom: 1px solid $--border-color-light;
+  }
+  .el-input__inner:hover {
+    border-color: $--border-color-light-hover;
+  }
+  .el-input__inner:focus {
+    border-color: $--color-primary;
+  }
 }
 .system-config-form .el-form-item__content{
   width: 512px;
@@ -210,12 +243,13 @@
   border-top: unset;
   height: 100%;
 }
-.system-tabs .el-tabs--border-card{
+.system-tabs.el-tabs--border-card{
   box-shadow: unset !important;
   height: 100%;
   width: 100%;
   border-bottom: unset;
   border-left: unset;
+  background-color: $--background-color-empty;
 }
 .reset-form .el-checkbox-group{
   margin-left: -28px !important;
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 326cf085c..0f626299e 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -175,6 +175,9 @@ $--overview-project-icon-background-color: #4DB4FF;
 // border
 $--overview-border-color: $--background-color-empty;
 
+/* system */
+$--system-input-background-color: #C0C4CC;
+
 /* 13.panel */
 $--chart-title-hover-background-color: #323238;
 $--chart-box-border-color: $--border-color-light;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index fe7cbcf4b..96c82af6d 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -140,8 +140,8 @@ $--select-page-focus-color: #CCCCCC;
 $--select-page-color: #232F3E;
 $--select-page-tag-background-color: #e4eaee;
 $--select-page-border-color: $--border-color-base-focus;
-$--select-page-btn-color: #409eff;
-$--select-page-btn-border-color: #409eff;
+$--select-page-btn-color: $--color-primary;
+$--select-page-btn-border-color: $--color-primary;
 $--select-page-btn-background-color: #FFFFFF;
 
 
@@ -172,6 +172,10 @@ $--overview-project-icon-background-color: $--value-color;
 // border
 $--overview-border-color: #E5EAEF;
 
+/* system */
+$--system-input-background-color: $--background-color-empty;
+
+
 /* 13.panel */
 $--chart-title-hover-background-color: $--background-color-1;
 $--chart-box-border-color: $--border-color-light;

From 2c1e9d2586f12f1a7ec6a6da98d60e1c9177bf23 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Wed, 24 Nov 2021 18:24:59 +0800
Subject: [PATCH 13/19] =?UTF-8?q?style:=20=E4=BD=BF=E7=94=A8=E5=90=91?=
 =?UTF-8?q?=E5=AF=BC=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/common/tableCommon.scss    |  6 ++---
 .../css/components/common/popBox/guide.scss   | 26 +++++++++----------
 .../assets/css/components/layout/header.scss  |  4 +--
 .../css/components/page/config/profile.scss   | 16 ++++++------
 .../src/assets/css/themes/theme-dark.scss     | 19 ++++++++++++--
 .../src/assets/css/themes/theme-light.scss    | 19 ++++++++++++--
 .../src/components/page/config/profile.vue    |  2 +-
 7 files changed, 61 insertions(+), 31 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 9dfe62558..786866073 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -276,16 +276,16 @@
         }
         .table-operation-item.table-operation-item--disable{
           border: 1px solid $--button-light-border-color;
-          background-color: $--button-light-border-color;
+          background-color: $--background-color-disabled;
           opacity: 0.6;
           outline: none;
           i {
             font-size: 14px;
-            color: $--button-primary-color;
+            color: $--color-text-disabled;
           }
         }
         .table-operation-item.table-operation-item--disable:hover {
-          background-color: $--button-light-border-color;
+          background-color: $--background-color-disabled;
         }
         &>.table-operation-item {
           justify-content: center;
diff --git a/nezha-fronted/src/assets/css/components/common/popBox/guide.scss b/nezha-fronted/src/assets/css/components/common/popBox/guide.scss
index e874011a1..9b8b8865a 100644
--- a/nezha-fronted/src/assets/css/components/common/popBox/guide.scss
+++ b/nezha-fronted/src/assets/css/components/common/popBox/guide.scss
@@ -38,7 +38,7 @@
         top: -1px;
         left: 0;
         transition: all linear .3s;
-        border-bottom: 3px solid #101B27;
+        border-bottom: 3px solid $--guide-border-color;
         background-color: $--background-color-base;
       }
 
@@ -52,7 +52,7 @@
         left: calc(50% - 6px);
         bottom: -9px;
         border-width: 6px 6px 0;
-        border-color: #424242 transparent transparent transparent;
+        border-color: $--guide-border-color transparent transparent transparent;
       }
 
       .guide-item {
@@ -62,8 +62,8 @@
         &:not(:nth-of-type(2)):before {
           top: 100px;
           width: 50%;
-          height: 2px;
-          background-color: #d8d8d8;
+          height: 1px;
+          background-color: $--select-page-focus-color;
           position: absolute;
           left: 0;
           content: "";
@@ -71,8 +71,8 @@
         &:not(:last-of-type):after {
           top: 100px;
           width: 50%;
-          height: 2px;
-          background-color: #d8d8d8;
+          height: 1px;
+          background-color: $--select-page-focus-color;
           position: absolute;
           right: 0;
           content: "";
@@ -80,15 +80,15 @@
 
         &.guide-item--active{
           .item__title {
-            color: #101B27;
+            color: $--color-text-regular;
             font-weight: bold;
           }
           .item__icon {
-            border-color: #ABABAB;
-            background-color: $--background-color-empty;
+            border-color: $--guide-icon-border-color;
+            background-color: $--background-color-base;
             cursor: pointer;
             i {
-              color: #ABABAB;
+              color: $--guide-icon-color;
             }
           }
           .item__icon.item__icon--disabled {
@@ -114,7 +114,7 @@
           border: 1px solid $--border-color-light;
           border-radius: 50%;
           box-sizing: border-box;
-          background-color: $--background-color-base;
+          background-color: $--background-color-empty;
           transition: all linear .3s;
           z-index: 1;
 
@@ -137,7 +137,7 @@
       height: 200px;
       padding-bottom: 32px;
       box-sizing: border-box;
-      border: 1px solid $--color-text-secondary;
+      border: 1px solid $--border-color-light;
 
       .desc-text {
         flex: auto;
@@ -145,7 +145,7 @@
 
         display: flex;
         align-items: center;
-        color: #101B27;
+        color: $--color-text-regular;
         font-size: 18px;
         word-break: keep-all;
       }
diff --git a/nezha-fronted/src/assets/css/components/layout/header.scss b/nezha-fronted/src/assets/css/components/layout/header.scss
index 59f64d781..3dbb48dc0 100644
--- a/nezha-fronted/src/assets/css/components/layout/header.scss
+++ b/nezha-fronted/src/assets/css/components/layout/header.scss
@@ -9,9 +9,9 @@
       height: 32px;
       display: inline-block;
       line-height: 32px;
-      background: rgba(60,146,241,0.10);
+      background: $--profile-span-background-color;
       font-size: 14px;
-      color: #3C92F1;
+      color: $--profile-span-color;
       letter-spacing: 0;
       font-weight: 500;
       text-transform: capitalize;
diff --git a/nezha-fronted/src/assets/css/components/page/config/profile.scss b/nezha-fronted/src/assets/css/components/page/config/profile.scss
index c250edb0e..4550cef0e 100644
--- a/nezha-fronted/src/assets/css/components/page/config/profile.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/profile.scss
@@ -25,12 +25,12 @@
         margin-left: 20px;
         span {
           display: inline-block;
-          background: rgba(60,146,241,0.10);
+          background: $--profile-span-background-color;
           text-transform: capitalize;
           width: 100%;
           height: 100%;
           font-size: 30px;
-          color: #3C92F1;
+          color: $--profile-span-color;
           letter-spacing: 0;
           font-weight: 500;
           border-radius: 100%;
@@ -74,18 +74,18 @@
           line-height: 22px;
           font-weight: 400;
         }
-        .profile-left__header-username__span {
+        .profile-left__header-username-span {
           display: inline-block;
           text-align: center;
           width: 42px;
           height: 24px;
           line-height: 25px;
           margin-left: 10px;
-          background-color: #ecf5ff;
-          border-color: #d9ecff;
-          border-radius: 10px;
+          background-color: $--profile-2FA-background-color;
+          border: 1px solid $--profile-span-border-color;
+          border-radius: 25px;
           font-size: 14px;
-          color: #409EFF;
+          color: $--profile-2FA-color;
           letter-spacing: 0;
           font-weight: 400;
         }
@@ -173,7 +173,7 @@
     }
     .profile-left__button {
       margin-left: 50px;
-      .profile-left__button-footer__btn {
+      .profile-left__button-footer-btn {
         margin: 0 10px;
         height: 30px;
         min-width: 74px;
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 0f626299e..eeae3d149 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -14,6 +14,8 @@ $--background-color-1: #444440;
 $--background-color-2: #000;
 // 背景色 copy
 $--background-color-copy: #454545;
+// 禁用背景色
+$--background-color-disabled: #222329;
 
 // 左侧菜单背景色
 $--left-menu-background-color-base: #2D2E35;
@@ -33,6 +35,8 @@ $--color-text-regular: #BEBEBE;
 $--color-text-secondary: #999998;
 // 链接字色
 $--color-text-link: #3C92F1;
+// 禁用字色
+$--color-text-disabled: #505050;
 
 /* 4.边框色 */
 // 普通边框色
@@ -135,7 +139,7 @@ $--click-search-items-border-color: $--background-color-copy; // border
 $--click-search-items-border-bottom-color: #2E2E2E; // border-BOTTOM
 $--click-search-items-color: $--color-text-regular; // color
 
-// selectPage
+// 时间选着器 selectPage 主题颜色
 $--select-page-background-color: $--background-color-empty;
 $--select-page-hover-background-color: $--button-light-hover-background-color;
 $--select-page-focus-color: #666666;
@@ -146,7 +150,6 @@ $--select-page-btn-color: mix(#FFF, $--color-primary, 15%);
 $--select-page-btn-border-color:  mix(#FFF, $--color-primary, 15%);
 $--select-page-btn-background-color: $--background-color-base;
 
-
 // icon字色
 $--nz-icon-color: $--button-primary-color;
 $--span-nz-icon-border-color: $--border-color-light-hover;
@@ -178,6 +181,18 @@ $--overview-border-color: $--background-color-empty;
 /* system */
 $--system-input-background-color: #C0C4CC;
 
+/* profile */
+$--profile-span-color: $--time-picker-hover-color;
+$--profile-span-border-color: #87C0FF;
+$--profile-span-background-color: $--overview-asset-icon-background-color;
+$--profile-2FA-background-color: $--background-color-empty;
+$--profile-2FA-color: #3C92F1;
+
+/* guide */
+$--guide-border-color: $--select-page-focus-color;
+$--guide-icon-border-color: $--time-picker-hover-color;
+$--guide-icon-color: $--time-picker-hover-color;
+
 /* 13.panel */
 $--chart-title-hover-background-color: #323238;
 $--chart-box-border-color: $--border-color-light;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index 96c82af6d..f4943d7e5 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -14,6 +14,8 @@ $--background-color-1: #EFEFEF;
 $--background-color-2: #F9F9F9;
 // 背景色 copy
 $--background-color-copy: #fdf5e0;
+// 禁用背景色
+$--background-color-disabled: #DEDEDE;
 
 // 左侧菜单背景色
 $--left-menu-background-color-base: #202F3F;
@@ -33,6 +35,8 @@ $--color-text-regular: #666665;
 $--color-text-secondary: #999998;
 // 链接字色
 $--color-text-link: #3C92F1;
+// 禁用字色
+$--color-text-disabled: #FFFFFF;
 
 /* 4.边框色 */
 // 普通边框色(覆盖element-ui内置变量)
@@ -142,7 +146,7 @@ $--select-page-tag-background-color: #e4eaee;
 $--select-page-border-color: $--border-color-base-focus;
 $--select-page-btn-color: $--color-primary;
 $--select-page-btn-border-color: $--color-primary;
-$--select-page-btn-background-color: #FFFFFF;
+$--select-page-btn-background-color: $--color-text-disabled;
 
 
 // icon 字色
@@ -151,7 +155,7 @@ $--span-nz-icon-border-color: $--asset-label-btn-border-color;
 
 // value
 $--value-background-color: #5C6BC0;
-$--value-color: #FFFFFF;
+$--value-color: $--color-text-disabled;
 $--value-input-background-color: $--value-color;
 
 // time picker
@@ -175,6 +179,17 @@ $--overview-border-color: #E5EAEF;
 /* system */
 $--system-input-background-color: $--background-color-empty;
 
+/* profile */
+$--profile-span-color: $--color-text-link;
+$--profile-span-border-color: $--color-text-link;
+$--profile-span-background-color: mix(#FFF, $--color-text-link, 90%);
+$--profile-2FA-background-color: $--profile-span-background-color;
+$--profile-2FA-color: $--color-text-link;
+
+/* guide */
+$--guide-border-color: #18171D;
+$--guide-icon-border-color: #666666;
+$--guide-icon-color: $--guide-icon-border-color;
 
 /* 13.panel */
 $--chart-title-hover-background-color: $--background-color-1;
diff --git a/nezha-fronted/src/components/page/config/profile.vue b/nezha-fronted/src/components/page/config/profile.vue
index de3a66332..c59324b47 100644
--- a/nezha-fronted/src/components/page/config/profile.vue
+++ b/nezha-fronted/src/components/page/config/profile.vue
@@ -15,7 +15,7 @@
               <span :class="(mfaEnable == '1' || mfaLevel > 0)?'MfaName':'name'">
                 {{userList.name}}
               </span>
-              <span class="profile-left__header-username__span" v-show="mfaEnable == '1' || mfaLevel > 0">2FA</span>
+              <span class="profile-left__header-username-span" v-show="mfaEnable == '1' || mfaLevel > 0">2FA</span>
             </div>
           </el-popover>
           <el-popover

From b48ef90ad3f97e94426b7a255c453000733e177b Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 25 Nov 2021 10:19:17 +0800
Subject: [PATCH 14/19] =?UTF-8?q?style:=20=E4=BF=AE=E5=A4=8D=20selectPage?=
 =?UTF-8?q?=20=E5=92=8C=20picker=20=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E9=94=99=E8=AF=AF=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/common.scss      | 31 +++++++
 .../common/v-selectpagenew/selectpage.scss    | 80 ++++++-------------
 .../css/components/page/config/about.scss     |  2 +-
 .../css/components/page/config/system.scss    |  7 ++
 .../src/assets/css/themes/theme-dark.scss     | 12 ++-
 .../src/assets/css/themes/theme-light.scss    | 10 ++-
 6 files changed, 79 insertions(+), 63 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index dc206a901..574ed0c63 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -253,6 +253,37 @@ td .nz-icon-gear:before{
 .el-scrollbar {
   background-color: $--background-color-empty;
 }
+/* el-picker 下拉时间选择器 */
+.el-picker-panel__footer {
+  border-top: 1px solid $--border-color-light !important;
+  span {
+    color: $--color-text-regular !important;
+  }
+  .el-button--text {
+    span {
+      color: $--color-primary !important;
+    }
+  }
+  .el-button--default {
+    margin-left: 10px;
+    color: $--button-primary-color !important;
+    background: $--picker-page-background-color !important;
+    border: 1px solid $--border-color-light !important;
+  }
+  .el-button.is-plain:hover {
+    background-color: $--picker-page-background-color !important;
+    border-color: $--picker-page-btn-border-color !important;
+    span {
+      color: $--picker-page-btn-color !important;
+    }
+  }
+}
+.el-date-table th {
+  border-bottom: 1px solid $--border-color-light !important;
+}
+.el-date-picker__time-header {
+  border-bottom: 1px solid $--picker-page-border-color !important;
+}
 //.editor-core {
 //  p {
 //    color: $--color-text-regular;
diff --git a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
index 1b2c3a28e..e8e45396a 100644
--- a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
+++ b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
@@ -1,107 +1,77 @@
 .el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input,.el-picker-panel__footer{
-  background: $--input-background-color;
+  background: $--input-background-color !important;
 }
 .sp-search,.sp-result-area,.sp-pagination {
-  background-color: $--background-color-empty;
+  background-color: $--background-color-empty !important;
 }
 .el-date-table td.today.available span {
   color: $--select-page-color !important;
 }
 .sp-table {
   th {
-    color: $--color-text-primary;
+    color: $--color-text-primary !important;
   }
   td {
-    color: $--color-text-regular;
+    color: $--color-text-regular !important;
   }
 }
 .sp-page-info,.sp-result-message {
-  color: $--color-text-regular;
+  color: $--color-text-regular !important;
 }
 .sp-selected-tag {
-  color: $--color-text-regular;
-  background-color: $--select-page-tag-background-color;
+  color: $--color-text-regular !important;
+  background-color: $--select-page-tag-background-color !important;
   i {
-    color: $--color-text-regular;
+    color: $--color-text-regular !important;
   }
 }
 .sp-selected-tag:hover {
-  background-color: $--background-color-empty;
+  background-color: $--background-color-empty !important;
   i:hover {
-    color: $--color-text-primary;
+    color: $--color-text-primary !important;
   }
 }
 .sp-search-input {
-  background-color: $--select-page-background-color;
-  border: 1px solid $--border-color-light;
-  color: $--color-text-regular;
+  background-color: $--select-page-background-color !important;
+  border: 1px solid $--border-color-light !important;
+  color: $--color-text-regular !important;
 }
 .sp-base.sp-inputs,.sp-base.sp-input {
-  border: 1px solid $--border-color-light;
+  border: 1px solid $--border-color-light !important;
 }
 .sp-base.sp-inputs:hover,.sp-base.sp-input:hover,.sp-base.sp-inputs:focus,.sp-base.sp-input:focus {
-  border: 1px solid $--border-color-light-hover;
+  border: 1px solid $--border-color-light-hover !important;
 }
 .v-dropdown-container.v-dropdown-no-border {
-  border: 1px solid $--border-color-light;
+  border: 1px solid $--border-color-light !important;
 }
 div.sp-result-area table.sp-table tbody tr.sp-over td {
-  background-color: $--select-page-hover-background-color;
-  color: $--button-light-hover-color;
+  background-color: $--select-page-hover-background-color !important;
+  color: $--button-light-hover-color !important;
   cursor: pointer;
 }
 div.sp-result-area table.sp-table tbody tr.sp-selected td {
-  color: $--select-page-focus-color;
+  color: $--select-page-focus-color !important;
   cursor: default;
 }
 div.sp-pagination ul li a:hover {
-  color: $--color-text-regular;
+  color: $--color-text-regular !important;
 }
 div.v-selectpage div.sp-input-container div.sp-input {
-  color: $--color-text-regular;
+  color: $--color-text-regular !important;
 }
 div.v-selectpage div.sp-input-container.sp-open div.sp-input {
-  border: 1px solid #aaa;
+  border: 1px solid #aaa !important;
   border-radius: 2px;
-  color: $--color-text-regular;
+  color: $--color-text-regular !important;
 }
 .sp-button {
   .sp-caret {
-    color: $--color-text-regular;
+    color: $--color-text-regular !important;
   }
 }
 .sp-button.open {
   .sp-caret {
-    color: $--color-text-regular;
+    color: $--color-text-regular !important;
   }
 }
-.el-picker-panel__footer {
-  border-top: 1px solid $--border-color-light;
-  span {
-    color: $--color-text-regular;
-  }
-  .el-button--text {
-    span {
-      color: $--color-primary;
-    }
-  }
-  .el-button--default {
-    margin-left: 10px;
-    color: $--button-primary-color;
-    background: $--select-page-btn-background-color;
-    border: 1px solid $--border-color-light;
-  }
-  .el-button.is-plain:hover {
-    background-color: $--select-page-btn-background-color;
-    border-color: $--select-page-btn-border-color;
-    span {
-      color: $--select-page-btn-color;
-    }
-  }
-}
-.el-date-table th {
-  border-bottom: 1px solid $--border-color-light;
-}
-.el-date-picker__time-header {
-  border-bottom: 1px solid $--select-page-border-color;
-}
diff --git a/nezha-fronted/src/assets/css/components/page/config/about.scss b/nezha-fronted/src/assets/css/components/page/config/about.scss
index e7cc37cfd..4008ce183 100644
--- a/nezha-fronted/src/assets/css/components/page/config/about.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/about.scss
@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  background-color: white;
+  background-color: $--background-color-empty;
   border: 10px solid $--background-color-base;
   box-sizing: border-box;
 
diff --git a/nezha-fronted/src/assets/css/components/page/config/system.scss b/nezha-fronted/src/assets/css/components/page/config/system.scss
index e266f49ab..d61c1e93d 100644
--- a/nezha-fronted/src/assets/css/components/page/config/system.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/system.scss
@@ -2,6 +2,13 @@
   height: 100%;
   position: relative;
   margin-top: 10px;
+  .el-tag.el-tag--info {
+    background-color: $--chart-title-hover-background-color;
+    border: 1px solid $--border-color-light;
+    i {
+      background-color: $--background-color-base;
+    }
+  }
 }
 .system-config-form{
   width: 61.8% !important;
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index eeae3d149..7240b7581 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -139,16 +139,20 @@ $--click-search-items-border-color: $--background-color-copy; // border
 $--click-search-items-border-bottom-color: #2E2E2E; // border-BOTTOM
 $--click-search-items-color: $--color-text-regular; // color
 
-// 时间选着器 selectPage 主题颜色
+// 第三方插件 下拉多选搜索 selectPage 主题颜色
 $--select-page-background-color: $--background-color-empty;
 $--select-page-hover-background-color: $--button-light-hover-background-color;
 $--select-page-focus-color: #666666;
 $--select-page-color: $--button-primary-color;
 $--select-page-tag-background-color: $--background-color-empty;
 $--select-page-border-color: $--border-color-light;
-$--select-page-btn-color: mix(#FFF, $--color-primary, 15%);
-$--select-page-btn-border-color:  mix(#FFF, $--color-primary, 15%);
-$--select-page-btn-background-color: $--background-color-base;
+
+/* el-picker 下拉时间选择器 */
+$--picker-page-background-color: $--select-page-tag-background-color;
+$--picker-page-border-color: $--select-page-border-color;
+$--picker-page-btn-color: mix(#FFF, $--color-primary, 15%);
+$--picker-page-btn-border-color:  mix(#FFF, $--color-primary, 15%);
+$--picker-page-btn-background-color: $--background-color-base;
 
 // icon字色
 $--nz-icon-color: $--button-primary-color;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index f4943d7e5..96e650518 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -144,9 +144,13 @@ $--select-page-focus-color: #CCCCCC;
 $--select-page-color: #232F3E;
 $--select-page-tag-background-color: #e4eaee;
 $--select-page-border-color: $--border-color-base-focus;
-$--select-page-btn-color: $--color-primary;
-$--select-page-btn-border-color: $--color-primary;
-$--select-page-btn-background-color: $--color-text-disabled;
+
+/* el-picker 下拉时间选择器 */
+$--picker-page-background-color: $--background-color-empty;
+$--picker-page-border-color: $--select-page-border-color;
+$--picker-page-btn-color: $--color-primary;
+$--picker-page-btn-border-color: $--color-primary;
+$--picker-page-btn-background-color: $--color-text-disabled;
 
 
 // icon 字色

From 404054a62187bb3fc223e04c57b9bba7f9be8ee4 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 25 Nov 2021 11:32:08 +0800
Subject: [PATCH 15/19] =?UTF-8?q?style:=E4=B8=BB=E9=A2=98=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/components/charts/chart.scss | 5 ++++-
 .../components/common/popBox/selectAssetMetaGroup.scss    | 3 +++
 .../components/page/dashboard/explore/promqlInput.scss    | 3 +++
 .../src/components/charts/chart-bar-statistics.vue        | 4 ++--
 nezha-fronted/src/components/charts/chart-pie.vue         | 4 ++--
 nezha-fronted/src/components/charts/chartPreview.vue      | 4 ++--
 nezha-fronted/src/components/charts/line-chart-block.vue  | 8 ++++----
 7 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/charts/chart.scss b/nezha-fronted/src/assets/css/components/charts/chart.scss
index 27630fe98..d4ec28fca 100644
--- a/nezha-fronted/src/assets/css/components/charts/chart.scss
+++ b/nezha-fronted/src/assets/css/components/charts/chart.scss
@@ -35,6 +35,9 @@
   line-height: 18px;
   position: absolute;
   padding-bottom:3px;
+  .legend-container__span,.legend-option-cell {
+    color: $--color-text-regular;
+  }
 }
 .legend-container .option-th{
   color:#33a2e5;
@@ -498,7 +501,7 @@
           overflow: hidden;
           white-space: nowrap;
           border-left: 1px solid $--border-color-light;
-          color: #1a1a1a;
+          color: $--color-text-regular;
           width: 65%;
           height: 99%;
         }
diff --git a/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss b/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss
index 632461712..e7440279d 100644
--- a/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss
+++ b/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss
@@ -58,3 +58,6 @@
 .panel-dropdown-btn-delete:hover {
   color: #D96D7A;
 }
+.el-popover__reference {
+  color: $--color-text-regular;
+}
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
index 46058dcb5..a62d24ef4 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
@@ -4,6 +4,9 @@
   display: flex;
   .no-resize{
     background: rgba(255,255,255,0);
+    .el-textarea__inner {
+      border: 1px solid $--border-color-light;
+    }
   }
 
   .query-row {
diff --git a/nezha-fronted/src/components/charts/chart-bar-statistics.vue b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
index 086c73014..c192a41fc 100644
--- a/nezha-fronted/src/components/charts/chart-bar-statistics.vue
+++ b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
@@ -56,7 +56,7 @@
         <div class="chart-no-data" v-show="noData">No Data</div>
         <div class='legend-container' ref="legendArea" v-show="firstShow">
           <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
           </div>
         </div>
         <!--全屏-->
@@ -73,7 +73,7 @@
             <div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
             <div :id="'screenLegendArea'+chartIndex"   class="legend-container legend-container-screen">
               <div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                 <br/><!--bgColorList[index]-->
               </div>
             </div>
diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue
index 867556d1d..40d8e42eb 100644
--- a/nezha-fronted/src/components/charts/chart-pie.vue
+++ b/nezha-fronted/src/components/charts/chart-pie.vue
@@ -56,7 +56,7 @@
         <div class="chart-no-data" v-show="noData">No Data</div>
         <div class='legend-container' ref="legendArea" v-show="firstShow">
           <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
           </div>
         </div>
         <!--全屏-->
@@ -73,7 +73,7 @@
             <div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
             <div :id="'screenLegendArea'+chartIndex"   class="legend-container legend-container-screen">
               <div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                 <br/><!--bgColorList[index]-->
               </div>
             </div>
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index 31bef095c..e7afb3083 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -60,7 +60,7 @@
           <template v-if="!hasLegendOptions">
             <div @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"  class="legend-container legend-container-screen" ref="screenLegendArea" v-show="showLegend">
               <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                 <br/><!--bgColorList[index]-->
               </div>
             </div>
@@ -79,7 +79,7 @@
                 <tr v-for="(item, index) in screenLegendList" :key="'legend_' + item.name+'_'+index">
                   <td>
                     <div :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" >
-                      <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                      <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                     </div>
                   </td>
                   <template v-for="(legendOption, i) in screenLegendOptions">
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 4d62f538c..543fbe2d4 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -78,7 +78,7 @@
         <template v-if="!hasLegendOptions">
           <div class='legend-container' ref="legendArea" v-show="firstShow">
             <div v-for="(item, index) in legendListMore" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-              <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+              <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
             </div>
           </div>
         </template>
@@ -96,7 +96,7 @@
               <tr v-for="(item, index) in legendListMore" :key="'legend_' + item.name+'_'+index">
                 <td>
                   <div :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" >
-                    <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                    <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                   </div>
                 </td>
                 <template v-for="(legendOption, i) in legendOptions">
@@ -158,7 +158,7 @@
           <template v-if="!hasLegendOptions">
             <div :id="'screenLegendArea'+chartIndex"  @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" v-show="showLegend">
               <div v-for="(item, index) in screenLegendListMore" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                 <br/><!--bgColorList[index]-->
               </div>
             </div>
@@ -177,7 +177,7 @@
                 <tr v-for="(item, index) in screenLegendListMore" :key="'legend_' + item.name+'_'+index">
                   <td>
                     <div :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" >
-                      <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                      <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                     </div>
                   </td>
                   <template v-for="(legendOption, i) in screenLegendOptions">

From ed8d78b12f137c862eb5bad637fe1107c9ad5f16 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 25 Nov 2021 16:05:16 +0800
Subject: [PATCH 16/19] =?UTF-8?q?style:=E4=B8=BB=E9=A2=98=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/common/tableCommon.scss    |   6 +-
 .../common/bottomBox/bottomBox.scss           |  17 ++-
 .../common/detailView/detailView.scss         |   9 +-
 .../detailView/detailViewTopSearch.scss       |   5 +-
 .../detailView/view/detailViewRight.scss      | 127 +++++++++---------
 .../common/table/special/endpointQuery.scss   |   9 ++
 .../src/assets/css/themes/theme-dark.scss     |   3 +
 .../src/assets/css/themes/theme-light.scss    |   3 +
 .../common/bottomBox/tabs/endpointQuery.vue   |  11 --
 9 files changed, 105 insertions(+), 85 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 786866073..d6ccd8e2e 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -129,7 +129,7 @@
       width: 200px;
       line-height: 40px;
       font-size: 16px;
-      color: #202F3F;
+      color: $--color-text-regular;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
@@ -527,3 +527,7 @@
 ::-webkit-scrollbar-corner {
   background-color: $--background-color-empty;
 }
+.full-width-height{
+  width: 100%;
+  height: 100%;
+}
diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
index c21903c8e..bd1e5ad61 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
@@ -32,6 +32,15 @@
   &>.nz-table2 {
     height: 100%;
     padding-top: 20px !important;
+    .table-list {
+      background-color: $--background-color-empty;
+      .list-width {
+        width: 100%;
+        padding: 0 10px 5px;
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+    }
   }
 }
 .sub-top-tools .top-tool-btn-txt .nz-icon{
@@ -46,9 +55,10 @@
 .has-sub-popper {
   color: $--color-danger;
 }
-.sub-box {
+.sub-box.bottom-box {
   height: 50%;
   position: relative;
+  padding: 0;
 }
 .sub-list {
   height: calc(100% - 9px);
@@ -138,3 +148,8 @@
 .symbol-select .el-input__inner {
   padding-left: 8px;
 }
+.list-page.endpoint,.list-page.asset {
+  .nz-table2 {
+    height: 100%;
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss b/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss
index 0f0c00641..c140911c5 100644
--- a/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss
+++ b/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss
@@ -26,6 +26,9 @@
       flex: 1;
       height: calc(100% - 100px);
     }
+    .detail-row.selected {
+      background-color: $--detail-left-background-color;
+    }
     .nz-detail-view-pagination {
       height: 30px;
       text-align: center;
@@ -68,17 +71,15 @@
     color: $--color-text-regular;
     vertical-align: middle;
   }
-  /deep/ .bottom-log {
+.bottom-log {
     height: 100%;
     overflow-y: auto;
     padding-top: 15px;
   }
 }
-.detail-view {
-  .list-page div.main-container{
+.list-page div.main-container{
     height: calc(100% - 20px);
     width: calc(100% - 20px);
-  }
 }
 .nz-detail-view-no-data {
   border-top: 1px solid $--border-color-light;
diff --git a/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss b/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss
index ac5a916a2..ba26178c0 100644
--- a/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss
+++ b/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss
@@ -6,7 +6,7 @@
     border-radius: 2px;
   }
   .search-detail-box:hover{
-    background: #F9F9F9;
+    background: $--background-color-base;
   }
   .search-detail-box.select-dropdown{
     background: #F9F9F9;
@@ -51,6 +51,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    display: flex;
     .el-checkbox{
       width: calc(100% - 20px);
       height: 36px;
@@ -79,7 +80,7 @@
   }
   .el-dropdown-menu__item:not(.is-disabled):hover{
     color: $--color-text-secondary;
-    background: $--background-color-empty !important;
+    background: $--background-color-base !important;
   }
 }
 .clear-all-select{
diff --git a/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss b/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
index 129ecf20d..70b771ffa 100644
--- a/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
+++ b/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
@@ -1,74 +1,69 @@
-.detail-view-sub-box {
-  .detail-view-right-top {
-    height: 60px;
-    background: $--background-color-empty;
-    border: 1px solid $--border-color-light;
-    margin-bottom: 10px
-  }
-
-  .sub-box {
-    height: 100%;
-    flex-direction: column;
-  }
-
-  .sub-list__tabs {
-    flex: 1;
-    background-color: $--background-color-empty;
-    height: calc(100% - 12px);
-    border: 1px solid $--border-color-light;
-
-    & > div {
+.detail-view.asset {
+  .nz-detail-view-right {
+    .sub-box {
       height: 100%;
+      flex-direction: column;
+    }
+    .sub-box .top-tools.top-tools--sub {
+      padding: 0 15px 0 0;
+      margin-right: 15px;
+      margin-left: 20px;
+      border: none;
+      border-bottom: 1px solid $--border-color-light;
+    }
 
-      & > .nz-table2 {
-        height: calc(100% - 92px);
-        padding: 20px 20px 0;
+    .sub-box {
+      padding: 0;
+    }
+
+    .sub-box .sub-list__tabs .chart-list .nz-table2 {
+      padding: 20px;
+      height: 100%;
+    }
+
+    .sub-box .table-list {
+      padding: 0;
+      height: 100%;
+      background-color: $--background-color-empty;
+    }
+
+    .sub-box .pagination-bottom {
+      bottom: -3px;
+    }
+
+    .sub-box .sub-list-tab {
+      cursor: pointer;
+    }
+    .sub-list__tabs {
+      flex: 1;
+      background-color: $--background-color-empty;
+      height: calc(100% - 12px);
+      border: 1px solid $--border-color-light;
+
+      & > div {
+        height: 100%;
+
+        & > .nz-table2 {
+          height: calc(100% - 92px);
+          padding: 20px 20px 0;
+        }
+      }
+
+      .chart-list {
+        .nz-table2 {
+          box-sizing: border-box;
+          padding: 0;
+        }
       }
     }
 
-    .chart-list {
-      .nz-table2 {
-        box-sizing: border-box;
-        padding: 0;
-      }
+    .bottom-data-list .sub-container {
+      height: calc(100% - 45px);
+      position: relative;
+      padding: 0;
+      background-color: $--background-color-empty;
+      overflow-y: hidden;
     }
   }
-
-  .bottom-data-list .sub-container {
-    height: calc(100% - 45px);
-    position: relative;
-    padding: 0;
-    background-color: $--background-color-empty;
-    overflow-y: hidden;
-  }
-
-  .sub-box .top-tools.top-tools--sub {
-    border: none;
-    padding: 0 15px 0 0;
-    margin-right: 15px;
-    margin-left: 20px;
-    border-bottom: 1px solid $--border-color-light;
-  }
-
-  .sub-box .list-width {
-    padding: 0;
-  }
-
-  .sub-box .nz-table2 {
-    padding: 20px;
-    height: 100%;
-  }
-
-  .sub-box .table-list {
-    padding: 0;
-    height: 100%;
-  }
-
-  .sub-box .pagination-bottom {
-    bottom: -3px;
-  }
-
-  .sub-box .sub-list-tab {
-    cursor: pointer;
-  }
 }
+
diff --git a/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss b/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss
index 00b368316..e8b10b9dd 100644
--- a/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss
@@ -22,4 +22,13 @@
     margin-right: -5px;
     padding: 0 5px;
   }
+  .full-width-height{
+    width: 100%;
+    height: 100%;
+  }
+  .control-icon-unchecked {
+    color: #bcbec2;
+    cursor: not-allowed;
+    background-color: #f4f4f5;
+  }
 }
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 7240b7581..522c7f547 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -197,6 +197,9 @@ $--guide-border-color: $--select-page-focus-color;
 $--guide-icon-border-color: $--time-picker-hover-color;
 $--guide-icon-color: $--time-picker-hover-color;
 
+/* detail */
+$--detail-left-background-color: $--background-color-base;
+
 /* 13.panel */
 $--chart-title-hover-background-color: #323238;
 $--chart-box-border-color: $--border-color-light;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index 96e650518..7f649081a 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -195,6 +195,9 @@ $--guide-border-color: #18171D;
 $--guide-icon-border-color: #666666;
 $--guide-icon-color: $--guide-icon-border-color;
 
+/* detail */
+$--detail-left-background-color: $--table-row-hover-background-color;
+
 /* 13.panel */
 $--chart-title-hover-background-color: $--background-color-1;
 $--chart-box-border-color: $--border-color-light;
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
index 30d9f33e0..46c3df5a7 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
@@ -220,14 +220,3 @@ export default {
   }
 }
 </script>
-<style scoped>
-  .full-width-height{
-    width: 100%;
-    height: 100%;
-  }
-  .control-icon-unchecked {
-    color: #bcbec2;
-    cursor: not-allowed;
-    background-color: #f4f4f5;
-  }
-</style>

From f50e9682806159df7d32838a21ba4ce319e6af6d Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 25 Nov 2021 18:16:47 +0800
Subject: [PATCH 17/19] =?UTF-8?q?style:=20=E4=B8=BB=E9=A2=98=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/common.scss      | 12 +++++++
 .../src/assets/css/common/rightBoxCommon.scss |  3 ++
 .../src/assets/css/common/tableCommon.scss    |  1 +
 .../common/bottomBox/bottomBox.scss           |  6 +---
 .../common/rightBox/editEndpointBoxNew.scss   | 33 +++++++++++--------
 .../components/common/rightBox/moduleBox.scss | 23 +++++++------
 .../css/components/page/dashboard/panel.scss  |  5 +++
 .../page/monitor/project/project.scss         |  1 +
 .../common/rightBox/editEndpointBoxNew.vue    |  2 +-
 9 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 574ed0c63..4c4f86111 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -284,6 +284,18 @@ td .nz-icon-gear:before{
 .el-date-picker__time-header {
   border-bottom: 1px solid $--picker-page-border-color !important;
 }
+.el-input-group.el-input-group--prepend,.query-input-inactive.el-input {
+  .el-input-group__prepend {
+    background-color: $--background-color-empty;
+    border: 1px solid $--border-color-light;
+    .el-input__inner:focus {
+      border-color: $--border-color-light-hover;
+    }
+  }
+  .el-input__inner:hover {
+    border-color: $--border-color-light-hover;
+  }
+}
 //.editor-core {
 //  p {
 //    color: $--color-text-regular;
diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
index 4ee0dee5b..982c1d4d0 100644
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -16,6 +16,9 @@
       padding-left: 32px;
     }
   }
+  .el-form-item__label {
+    line-height: 16px !important;
+  }
 }
 
 .right-box__header {
diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index d6ccd8e2e..e6d923fe5 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -323,6 +323,7 @@
   .el-table__body-wrapper {
     overflow: auto;
     background-color: $--table-body-background-color;
+    height: 100% !important;
   }
   .el-table__fixed-body-wrapper {
     top: 42px !important;
diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
index bd1e5ad61..f1847611f 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
@@ -84,6 +84,7 @@
       .nz-table2 {
         box-sizing: border-box;
         padding: 0;
+        height: 100%;
       }
     }
   }
@@ -148,8 +149,3 @@
 .symbol-select .el-input__inner {
   padding-left: 8px;
 }
-.list-page.endpoint,.list-page.asset {
-  .nz-table2 {
-    height: 100%;
-  }
-}
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss b/nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss
index 2937f2758..ab7b6debc 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss
@@ -53,8 +53,8 @@
     padding-left: 0;
   }
   .el-tabs__item{
-    width: 90px;
-    padding: 0;
+    min-width: 90px;
+    padding: 0 10px;
     text-align: center;
   }
   .el-tabs__item.is-active{
@@ -96,13 +96,17 @@
     border-radius: 2px;
     height: 140px;
     position: relative;
-    margin-top: 10px;
-    padding: 10px 0 10px 15px;
+    margin: 10px 0 16px 0;
+    padding: 10px 0px 10px 0;
     width:100%;
-    margin-left: 0;
-    pre{
-      max-height: 300px;
-      min-height: 100px;
+  }
+  .configs-copy-value {
+    pre {
+      color: $--color-text-primary;
+      padding: 15px;
+    }
+    i {
+      color: $--color-text-regular;
     }
   }
   .configs-copy-value .copy-value-content{
@@ -136,9 +140,10 @@
     position: absolute;
     right: 20px;
     top: 15px;
-    background: rgba(236,127,102,0.1);
+    background: $--background-color-copy;
     padding: 2px 6px;
-    color: #EC7F66;
+    border: 1px solid $--span-nz-icon-border-color;
+    color: $--nz-icon-color;
   }
   .endpoint-title{
     border: 1px solid $--border-color-light;
@@ -167,13 +172,13 @@
     }
   }
   .value-mapping-add {
-    background: rgba(250,144,28,0.1);
-    border: 1px solid #FFE0BD;
     margin-bottom: 10px;
     height: 24px;
-    line-height: 24px;
-    color: $--color-primary;
+    line-height: 23px;
     box-sizing: border-box;
+    background: $--background-color-copy;
+    border: 1px solid $--span-nz-icon-border-color;
+    color: $--nz-icon-color;
   }
   #module-box-relabel .vue-tags-input{
     max-width: unset;
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
index 80e95bad4..dee3763a3 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
@@ -98,10 +98,18 @@
     border-radius: 2px;
     height: 140px;
     position: relative;
-    margin-top: 10px;
-    padding: 10px 0px 10px 15px;
+    margin: 10px 0 16px 0;
+    padding: 10px 0px 10px 0;
     width:100%;
-    margin-left: 0px;
+  }
+  .configs-copy-value {
+    pre {
+      color: $--color-text-primary;
+      padding: 15px;
+    }
+    i {
+      color: $--color-text-regular;
+    }
   }
   .configs-copy-value .copy-value-content{
     position: absolute;
@@ -195,15 +203,6 @@
       text-transform: Capitalize;
     }
   }
-  .configs-copy-value {
-    pre {
-      color: $--color-text-primary;
-      padding: 15px;
-    }
-    i {
-      color: $--color-text-regular;
-    }
-  }
 }
 .sub-label {
   padding-right: 15px;
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
index f99735a47..ff89a2f53 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
@@ -6,6 +6,11 @@
   display: flex;
   flex-direction:column;
 }
+.panel.list-page {
+  .table-list {
+    height: calc(100% - 58px);
+  }
+}
 
 .panel .el-table {
   border-radius: 5px;
diff --git a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
index 61833643d..5aed726e7 100644
--- a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
+++ b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
@@ -49,6 +49,7 @@
   }
   .main-container{
     padding-right: 0 !important;
+    width: calc(100% - 10px);
   }
 }
 .project-calendar .el-input__inner {
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index fe15c0dea..8d302252a 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -561,7 +561,7 @@
             {{$t('overall.preview')}}
           </div>
           <div class="right-box-line"></div>
-          <div class="configs-copy-value">
+          <div class="configs-copy-value" style="overflow: auto">
             <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
             <pre>{{configsCopyValue}}</pre>
           </div>

From bde70cd3e63061e141b974ca342698b5ffa63e4b Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 25 Nov 2021 18:27:50 +0800
Subject: [PATCH 18/19] =?UTF-8?q?style:=20project=20=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E5=85=83=E7=B4=A0=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/page/monitor/project/project.scss       | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
index 5aed726e7..f19cef107 100644
--- a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
+++ b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
@@ -15,13 +15,18 @@
     width: calc(50% - 10px);
     margin-right: 10px;
     min-width: 435px;
+    div.page {
+      textarea {
+        display: none;
+      }
+    }
     .project-box.list-page {
       width: 100%;
       height: calc(100% - 8px)!important;
       position: relative;
       border-radius: 2px;
       .main-list {
-        height: calc(100% - 2px) !important;
+        height: 100% !important;
         overflow: visible;
         .top-tools div:nth-of-type(1) {
           color: $--color-text-primary;

From fe1f7cf15c4193a63b4725f3e394bb93858b63a5 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 25 Nov 2021 19:37:24 +0800
Subject: [PATCH 19/19] =?UTF-8?q?style:=20=E4=B8=BB=E9=A2=98=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/common.scss        | 17 ++++++++++++++++-
 .../src/assets/css/common/tableCommon.scss      |  9 ---------
 .../components/common/bottomBox/bottomBox.scss  | 14 +++++++++++++-
 .../common/detailView/view/detailViewRight.scss |  7 -------
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 4c4f86111..32842f96c 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -146,7 +146,7 @@
   text-transform: capitalize;
 }
 .personal-dropdown {
-  border-bottom: 1px solid #E7EAED;
+  border-bottom: 1px solid $--border-color-light;
   padding: 0 20px;
   .personal-dropdown__username {
     max-width: 109px;
@@ -278,6 +278,12 @@ td .nz-icon-gear:before{
     }
   }
 }
+.el-date-range-picker__time-header {
+  border-bottom: 1px solid $--border-color-light;
+}
+.el-date-range-picker__content.is-left {
+  border-right: 1px solid $--border-color-light;
+}
 .el-date-table th {
   border-bottom: 1px solid $--border-color-light !important;
 }
@@ -296,6 +302,15 @@ td .nz-icon-gear:before{
     border-color: $--border-color-light-hover;
   }
 }
+.sub-box.detail-view-sub-box {
+  .top-tools.top-tools--sub {
+    padding: 0 15px 0 0;
+    margin-right: 15px;
+    margin-left: 20px;
+    border: none;
+    border-bottom: 1px solid $--border-color-light;
+  }
+}
 //.editor-core {
 //  p {
 //    color: $--color-text-regular;
diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index e6d923fe5..bdbebf02b 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -39,15 +39,6 @@
     justify-content: space-between;
     padding: 14px 20px;
 
-    &.top-tools--sub {
-      align-items: center;
-      padding: 0 70px 0 15px;
-      height: 44px;
-      background-color: $--background-color-empty;
-      border: 1px solid $--border-color-light;
-      box-sizing: border-box;
-    }
-
     .top-tool-right {
       display: flex;
       flex-shrink: 0;
diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
index f1847611f..713317ae2 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
@@ -22,7 +22,6 @@
   }
 }
 .bottom-data-list .sub-container {
-  padding: 10px;
   height: calc(100% - 64px);
   background-color: $--background-color-base;
   overflow-y: auto;
@@ -55,10 +54,23 @@
 .has-sub-popper {
   color: $--color-danger;
 }
+.sub-box.detail-view-sub-box {
+  padding: 0 !important;
+  height: 100%;
+  .sub-list__tabs {
+    height: calc(100% - 12px);
+    border: 1px solid $--border-color-light;
+  }
+}
 .sub-box.bottom-box {
   height: 50%;
   position: relative;
   padding: 0;
+  .bottom-data-list {
+    .sub-container {
+      padding: 10px;
+    }
+  }
 }
 .sub-list {
   height: calc(100% - 9px);
diff --git a/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss b/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
index 70b771ffa..f5c081a7e 100644
--- a/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
+++ b/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
@@ -4,13 +4,6 @@
       height: 100%;
       flex-direction: column;
     }
-    .sub-box .top-tools.top-tools--sub {
-      padding: 0 15px 0 0;
-      margin-right: 15px;
-      margin-left: 20px;
-      border: none;
-      border-bottom: 1px solid $--border-color-light;
-    }
 
     .sub-box {
       padding: 0;