From 49753cd68f4930df4fcaeadf29ce912e4669a962 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 26 Oct 2021 10:06:47 +0800
Subject: [PATCH 1/3] =?UTF-8?q?style=EF=BC=9A=20=E8=AF=A6=E7=BB=86?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../list/alertRule/alertRuleDetail.vue        |  98 +----------------
 .../detailView/list/asset/assetDetail.vue     |  95 +---------------
 .../common/detailView/list/dc/dcDetail.vue    |  98 +----------------
 .../common/detailView/list/detailList.scss    | 101 ++++++++++++++++++
 .../list/endpoint/endpointDetail.vue          |  98 +----------------
 .../detailView/list/module/moduleDetail.vue   |  98 +----------------
 .../terminalLogDetail/terminalLogDetail.vue   |  98 +----------------
 .../detailView/list/userDetail/userDetail.vue |  98 +----------------
 8 files changed, 109 insertions(+), 675 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/detailView/list/detailList.scss

diff --git a/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue b/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
index 47be8f76c..775c0e057 100644
--- a/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
@@ -229,101 +229,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .order-box{
-    display: flex;
-    height:40px;
-    padding: 0 15px;
-    line-height: 40px;
-    align-items: center;
-    /*.detail-select{*/
-    /*  height: 30px;*/
-    /*  line-height: 30px;*/
-    /*  flex: 1;*/
-    /*  /deep/ .el-input--small{*/
-    /*    height: 30px;*/
-    /*    line-height: 30px;*/
-    /*    background-color: rgba(9,30,66,0.08);*/
-    /*    border: none;*/
-    /*    color: #344563;*/
-    /*    input{*/
-    /*      height: 30px;*/
-    /*      line-height: 30px;*/
-    /*      background-color: rgba(9,30,66,0.08);*/
-    /*      border: none;*/
-    /*      color: #344563;*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-select:hover{*/
-    /*  /deep/ .el-input--small{*/
-    /*    input{*/
-    /*      background-color: rgba(9,30,66,0.13);*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-button{*/
-    /*  height: 28px;*/
-    /*  line-height: 28px;*/
-    /*  background-color: rgba(9,30,66,0.08);*/
-    /*  border: none;*/
-    /*  .nz-icon{*/
-    /*    color: #344563;*/
-    /*  }*/
-    /*}*/
-    /*.detail-button:hover{*/
-    /*  background-color: rgba(9,30,66,0.13);*/
-    /*}*/
-  }
-  .detail-row-box{
-    height: calc(100% - 40px);
-    overflow: hidden;
-    overflow-y: auto;
-  }
-  .detail-row{
-    width: 245px;
-    padding: 0px 0 0px 15px;
-    height: 60px;
-    border-bottom: 1px solid #E7EAED;
-    cursor: pointer;
-  }
-  .detail-row:last-of-type{
-    border-bottom: none
-  }
-  .detail-row-info{
-    display: flex;
-    height: 100%;
-    width: calc(100% - 15px);
-    justify-content:center;
-    flex-direction: column;
-    > div{
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  .asset-manageIp{
-    font-size: 16px;
-    color: #333333;
-    font-weight: 400;
-  }
-    .asset-name {
-      padding-left: 22px;
-      width: calc(100% - 22px);
-      font-size: 14px;
-      color: #999999;
-      font-weight: 400;
-    }
-  }
-  .selected{
-    background: #FFFBF6;
-  }
-  .colorEF7458{
-    color: #EF7458;
-  }
-  .color23BF9A{
-    color: #23BF9A;
-  }
-  .colorFA901C{
-    color: #fa901c;
-  }
+  @import '../detailList';
 </style>
diff --git a/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue b/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
index 7f4b1aca5..fafba094d 100644
--- a/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
@@ -27,11 +27,7 @@
         @mouseleave="labelHover(item, 'asset', false)">
         <div class="detail-row-info">
           <div class="asset-manageIp">
-            <span v-if="item.pingInfo" >
-              <span :class="{'active-icon green-bg':item.pingInfo.status == 1,'active-icon red-bg':item.pingInfo.status == 0}"></span>
-            </span>
-            <span v-else style="display: inline-block;width: 13px">
-            </span>
+            <i class="nz-icon nz-icon-overview-alert" :class="item.alertNum>0?'colorEF7458':'color23BF9A'"/>
             {{item.name}}
           </div>
           <div class="asset-name" :title="item.manageIp">{{item.manageIp}}</div>
@@ -177,92 +173,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .order-box{
-    display: flex;
-    height:40px;
-    padding: 0 15px;
-    line-height: 40px;
-    align-items: center;
-    /*.detail-select{*/
-    /*  height: 30px;*/
-    /*  line-height: 30px;*/
-    /*  flex: 1;*/
-    /*  /deep/ .el-input--small{*/
-    /*    height: 30px;*/
-    /*    line-height: 30px;*/
-    /*    background-color: rgba(9,30,66,0.08);*/
-    /*    border: none;*/
-    /*    color: #344563;*/
-    /*    input{*/
-    /*      height: 30px;*/
-    /*      line-height: 30px;*/
-    /*      background-color: rgba(9,30,66,0.08);*/
-    /*      border: none;*/
-    /*      color: #344563;*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-select:hover{*/
-    /*  /deep/ .el-input--small{*/
-    /*    input{*/
-    /*      background-color: rgba(9,30,66,0.13);*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-button{*/
-    /*  height: 28px;*/
-    /*  line-height: 28px;*/
-    /*  background-color: rgba(9,30,66,0.08);*/
-    /*  border: none;*/
-    /*  .nz-icon{*/
-    /*    color: #344563;*/
-    /*  }*/
-    /*}*/
-    /*.detail-button:hover{*/
-    /*  background-color: rgba(9,30,66,0.13);*/
-    /*}*/
-  }
-  .detail-row-box{
-    height: calc(100% - 40px);
-    overflow: hidden;
-    overflow-y: auto;
-  }
-  .detail-row{
-    width: 245px;
-    padding: 0px 0 0px 15px;
-    height: 60px;
-    border-bottom: 1px solid #E7EAED;
-    cursor: pointer;
-  }
-  .detail-row:last-of-type{
-    border-bottom: none
-  }
-  .detail-row-info{
-    display: flex;
-    height: 100%;
-    width: calc(100% - 15px);
-    justify-content:center;
-    flex-direction: column;
-    > div{
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  .asset-manageIp{
-    font-size: 16px;
-    color: #333333;
-    font-weight: 400;
-  }
-    .asset-name {
-      padding-left: 22px;
-      width: calc(100% - 22px);
-      font-size: 14px;
-      color: #999999;
-      font-weight: 400;
-    }
-  }
-  .selected{
-    background: #FFFBF6;
-  }
+  @import '../detailList';
 </style>
diff --git a/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue b/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
index b4f1ad040..61f468ea9 100644
--- a/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
@@ -160,101 +160,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .order-box{
-    display: flex;
-    height:40px;
-    padding: 0 15px;
-    line-height: 40px;
-    align-items: center;
-    /*.detail-select{*/
-    /*  height: 30px;*/
-    /*  line-height: 30px;*/
-    /*  flex: 1;*/
-    /*  /deep/ .el-input--small{*/
-    /*    height: 30px;*/
-    /*    line-height: 30px;*/
-    /*    background-color: rgba(9,30,66,0.08);*/
-    /*    border: none;*/
-    /*    color: #344563;*/
-    /*    input{*/
-    /*      height: 30px;*/
-    /*      line-height: 30px;*/
-    /*      background-color: rgba(9,30,66,0.08);*/
-    /*      border: none;*/
-    /*      color: #344563;*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-select:hover{*/
-    /*  /deep/ .el-input--small{*/
-    /*    input{*/
-    /*      background-color: rgba(9,30,66,0.13);*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-button{*/
-    /*  height: 28px;*/
-    /*  line-height: 28px;*/
-    /*  background-color: rgba(9,30,66,0.08);*/
-    /*  border: none;*/
-    /*  .nz-icon{*/
-    /*    color: #344563;*/
-    /*  }*/
-    /*}*/
-    /*.detail-button:hover{*/
-    /*  background-color: rgba(9,30,66,0.13);*/
-    /*}*/
-  }
-  .detail-row-box{
-    height: calc(100% - 40px);
-    overflow: hidden;
-    overflow-y: auto;
-  }
-  .detail-row{
-    width: 245px;
-    padding: 0px 0 0px 15px;
-    height: 60px;
-    border-bottom: 1px solid #E7EAED;
-    cursor: pointer;
-  }
-  .detail-row:last-of-type{
-    border-bottom: none
-  }
-  .detail-row-info{
-    display: flex;
-    height: 100%;
-    width: calc(100% - 15px);
-    justify-content:center;
-    flex-direction: column;
-    > div{
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  .asset-manageIp{
-    font-size: 16px;
-    color: #333333;
-    font-weight: 400;
-  }
-    .asset-name {
-      padding-left: 22px;
-      width: calc(100% - 22px);
-      font-size: 14px;
-      color: #999999;
-      font-weight: 400;
-    }
-  }
-  .selected{
-    background: #FFFBF6;
-  }
-  .colorEF7458{
-    color: #EF7458;
-  }
-  .color23BF9A{
-    color: #23BF9A;
-  }
-  .colorFA901C{
-    color: #fa901c;
-  }
+  @import '../detailList';
 </style>
diff --git a/nezha-fronted/src/components/common/detailView/list/detailList.scss b/nezha-fronted/src/components/common/detailView/list/detailList.scss
new file mode 100644
index 000000000..d773512ce
--- /dev/null
+++ b/nezha-fronted/src/components/common/detailView/list/detailList.scss
@@ -0,0 +1,101 @@
+.order-box{
+  display: flex;
+  height:40px;
+  padding: 0 15px;
+  line-height: 40px;
+  align-items: center;
+  /*.detail-select{*/
+  /*  height: 30px;*/
+  /*  line-height: 30px;*/
+  /*  flex: 1;*/
+  /*  /deep/ .el-input--small{*/
+  /*    height: 30px;*/
+  /*    line-height: 30px;*/
+  /*    background-color: rgba(9,30,66,0.08);*/
+  /*    border: none;*/
+  /*    color: #344563;*/
+  /*    input{*/
+  /*      height: 30px;*/
+  /*      line-height: 30px;*/
+  /*      background-color: rgba(9,30,66,0.08);*/
+  /*      border: none;*/
+  /*      color: #344563;*/
+  /*    }*/
+  /*  }*/
+  /*}*/
+  /*.detail-select:hover{*/
+  /*  /deep/ .el-input--small{*/
+  /*    input{*/
+  /*      background-color: rgba(9,30,66,0.13);*/
+  /*    }*/
+  /*  }*/
+  /*}*/
+  /*.detail-button{*/
+  /*  height: 28px;*/
+  /*  line-height: 28px;*/
+  /*  background-color: rgba(9,30,66,0.08);*/
+  /*  border: none;*/
+  /*  .nz-icon{*/
+  /*    color: #344563;*/
+  /*  }*/
+  /*}*/
+  /*.detail-button:hover{*/
+  /*  background-color: rgba(9,30,66,0.13);*/
+  /*}*/
+}
+.detail-row-box{
+  height: calc(100% - 40px);
+  overflow: hidden;
+  overflow-y: auto;
+}
+.detail-row{
+  width: 245px;
+  padding: 0px 0 0px 15px;
+  height: 60px;
+  border-bottom: 1px solid #E7EAED;
+  cursor: pointer;
+}
+.detail-row:last-of-type{
+  border-bottom: none
+}
+.detail-row-info{
+  display: flex;
+  height: 100%;
+  width: calc(100% - 15px);
+  justify-content:center;
+  flex-direction: column;
+  > div{
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .asset-manageIp{
+    font-size: 16px;
+    color: #333333;
+    font-weight: 400;
+    .nz-icon{
+      font-size: 14px;
+      padding-right: 2px;
+    }
+  }
+  .asset-name {
+    padding-left: 22px;
+    width: calc(100% - 22px);
+    font-size: 14px;
+    color: #999999;
+    font-weight: 400;
+  }
+}
+.selected{
+  background: #FFFBF6;
+}
+.colorEF7458{
+  color: #EF7458;
+}
+.color23BF9A{
+  color: #23BF9A;
+}
+.colorFA901C{
+  color: #fa901c;
+}
diff --git a/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue b/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue
index 94c3b6f26..6bdc98620 100644
--- a/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue
@@ -157,101 +157,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .order-box{
-    display: flex;
-    height:40px;
-    padding: 0 15px;
-    line-height: 40px;
-    align-items: center;
-    /*.detail-select{*/
-    /*  height: 30px;*/
-    /*  line-height: 30px;*/
-    /*  flex: 1;*/
-    /*  /deep/ .el-input--small{*/
-    /*    height: 30px;*/
-    /*    line-height: 30px;*/
-    /*    background-color: rgba(9,30,66,0.08);*/
-    /*    border: none;*/
-    /*    color: #344563;*/
-    /*    input{*/
-    /*      height: 30px;*/
-    /*      line-height: 30px;*/
-    /*      background-color: rgba(9,30,66,0.08);*/
-    /*      border: none;*/
-    /*      color: #344563;*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-select:hover{*/
-    /*  /deep/ .el-input--small{*/
-    /*    input{*/
-    /*      background-color: rgba(9,30,66,0.13);*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-button{*/
-    /*  height: 28px;*/
-    /*  line-height: 28px;*/
-    /*  background-color: rgba(9,30,66,0.08);*/
-    /*  border: none;*/
-    /*  .nz-icon{*/
-    /*    color: #344563;*/
-    /*  }*/
-    /*}*/
-    /*.detail-button:hover{*/
-    /*  background-color: rgba(9,30,66,0.13);*/
-    /*}*/
-  }
-  .detail-row-box{
-    height: calc(100% - 40px);
-    overflow: hidden;
-    overflow-y: auto;
-  }
-  .detail-row{
-    width: 245px;
-    padding: 0px 0 0px 15px;
-    height: 60px;
-    border-bottom: 1px solid #E7EAED;
-    cursor: pointer;
-  }
-  .detail-row:last-of-type{
-    border-bottom: none
-  }
-  .detail-row-info{
-    display: flex;
-    height: 100%;
-    width: calc(100% - 15px);
-    justify-content:center;
-    flex-direction: column;
-    > div{
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  .asset-manageIp{
-    font-size: 16px;
-    color: #333333;
-    font-weight: 400;
-  }
-    .asset-name {
-      padding-left: 22px;
-      width: calc(100% - 22px);
-      font-size: 14px;
-      color: #999999;
-      font-weight: 400;
-    }
-  }
-  .selected{
-    background: #FFFBF6;
-  }
-  .colorEF7458{
-    color: #EF7458;
-  }
-  .color23BF9A{
-    color: #23BF9A;
-  }
-  .colorFA901C{
-    color: #fa901c;
-  }
+  @import '../detailList';
 </style>
diff --git a/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue b/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue
index 5686f4407..db9463144 100644
--- a/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue
@@ -139,101 +139,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .order-box{
-    display: flex;
-    height:40px;
-    padding: 0 15px;
-    line-height: 40px;
-    align-items: center;
-    /*.detail-select{*/
-    /*  height: 30px;*/
-    /*  line-height: 30px;*/
-    /*  flex: 1;*/
-    /*  /deep/ .el-input--small{*/
-    /*    height: 30px;*/
-    /*    line-height: 30px;*/
-    /*    background-color: rgba(9,30,66,0.08);*/
-    /*    border: none;*/
-    /*    color: #344563;*/
-    /*    input{*/
-    /*      height: 30px;*/
-    /*      line-height: 30px;*/
-    /*      background-color: rgba(9,30,66,0.08);*/
-    /*      border: none;*/
-    /*      color: #344563;*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-select:hover{*/
-    /*  /deep/ .el-input--small{*/
-    /*    input{*/
-    /*      background-color: rgba(9,30,66,0.13);*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-button{*/
-    /*  height: 28px;*/
-    /*  line-height: 28px;*/
-    /*  background-color: rgba(9,30,66,0.08);*/
-    /*  border: none;*/
-    /*  .nz-icon{*/
-    /*    color: #344563;*/
-    /*  }*/
-    /*}*/
-    /*.detail-button:hover{*/
-    /*  background-color: rgba(9,30,66,0.13);*/
-    /*}*/
-  }
-  .detail-row-box{
-    height: calc(100% - 40px);
-    overflow: hidden;
-    overflow-y: auto;
-  }
-  .detail-row{
-    width: 245px;
-    padding: 0px 0 0px 15px;
-    height: 60px;
-    border-bottom: 1px solid #E7EAED;
-    cursor: pointer;
-  }
-  .detail-row:last-of-type{
-    border-bottom: none
-  }
-  .detail-row-info{
-    display: flex;
-    height: 100%;
-    width: calc(100% - 15px);
-    justify-content:center;
-    flex-direction: column;
-    > div{
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  .asset-manageIp{
-    font-size: 16px;
-    color: #333333;
-    font-weight: 400;
-  }
-    .asset-name {
-      padding-left: 22px;
-      width: calc(100% - 22px);
-      font-size: 14px;
-      color: #999999;
-      font-weight: 400;
-    }
-  }
-  .selected{
-    background: #FFFBF6;
-  }
-  .colorEF7458{
-    color: #EF7458;
-  }
-  .color23BF9A{
-    color: #23BF9A;
-  }
-  .colorFA901C{
-    color: #fa901c;
-  }
+  @import '../detailList';
 </style>
diff --git a/nezha-fronted/src/components/common/detailView/list/terminalLogDetail/terminalLogDetail.vue b/nezha-fronted/src/components/common/detailView/list/terminalLogDetail/terminalLogDetail.vue
index e63798ee0..43ca6523e 100644
--- a/nezha-fronted/src/components/common/detailView/list/terminalLogDetail/terminalLogDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/terminalLogDetail/terminalLogDetail.vue
@@ -163,101 +163,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .order-box{
-    display: flex;
-    height:40px;
-    padding: 0 15px;
-    line-height: 40px;
-    align-items: center;
-    /*.detail-select{*/
-    /*  height: 30px;*/
-    /*  line-height: 30px;*/
-    /*  flex: 1;*/
-    /*  /deep/ .el-input--small{*/
-    /*    height: 30px;*/
-    /*    line-height: 30px;*/
-    /*    background-color: rgba(9,30,66,0.08);*/
-    /*    border: none;*/
-    /*    color: #344563;*/
-    /*    input{*/
-    /*      height: 30px;*/
-    /*      line-height: 30px;*/
-    /*      background-color: rgba(9,30,66,0.08);*/
-    /*      border: none;*/
-    /*      color: #344563;*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-select:hover{*/
-    /*  /deep/ .el-input--small{*/
-    /*    input{*/
-    /*      background-color: rgba(9,30,66,0.13);*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-button{*/
-    /*  height: 28px;*/
-    /*  line-height: 28px;*/
-    /*  background-color: rgba(9,30,66,0.08);*/
-    /*  border: none;*/
-    /*  .nz-icon{*/
-    /*    color: #344563;*/
-    /*  }*/
-    /*}*/
-    /*.detail-button:hover{*/
-    /*  background-color: rgba(9,30,66,0.13);*/
-    /*}*/
-  }
-  .detail-row-box{
-    height: calc(100% - 40px);
-    overflow: hidden;
-    overflow-y: auto;
-  }
-  .detail-row{
-    width: 245px;
-    padding: 0px 0 0px 15px;
-    height: 60px;
-    border-bottom: 1px solid #E7EAED;
-    cursor: pointer;
-  }
-  .detail-row:last-of-type{
-    border-bottom: none
-  }
-  .detail-row-info{
-    display: flex;
-    height: 100%;
-    width: calc(100% - 15px);
-    justify-content:center;
-    flex-direction: column;
-    > div{
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  .asset-manageIp{
-    font-size: 16px;
-    color: #333333;
-    font-weight: 400;
-  }
-    .asset-name {
-      padding-left: 22px;
-      width: calc(100% - 22px);
-      font-size: 14px;
-      color: #999999;
-      font-weight: 400;
-    }
-  }
-  .selected{
-    background: #FFFBF6;
-  }
-  .colorEF7458{
-    color: #EF7458;
-  }
-  .color23BF9A{
-    color: #23BF9A;
-  }
-  .colorFA901C{
-    color: #fa901c;
-  }
+  @import '../detailList';
 </style>
diff --git a/nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue b/nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue
index efc6cdc5a..c967ce4cf 100644
--- a/nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue
@@ -138,101 +138,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .order-box{
-    display: flex;
-    height:40px;
-    padding: 0 15px;
-    line-height: 40px;
-    align-items: center;
-    /*.detail-select{*/
-    /*  height: 30px;*/
-    /*  line-height: 30px;*/
-    /*  flex: 1;*/
-    /*  /deep/ .el-input--small{*/
-    /*    height: 30px;*/
-    /*    line-height: 30px;*/
-    /*    background-color: rgba(9,30,66,0.08);*/
-    /*    border: none;*/
-    /*    color: #344563;*/
-    /*    input{*/
-    /*      height: 30px;*/
-    /*      line-height: 30px;*/
-    /*      background-color: rgba(9,30,66,0.08);*/
-    /*      border: none;*/
-    /*      color: #344563;*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-select:hover{*/
-    /*  /deep/ .el-input--small{*/
-    /*    input{*/
-    /*      background-color: rgba(9,30,66,0.13);*/
-    /*    }*/
-    /*  }*/
-    /*}*/
-    /*.detail-button{*/
-    /*  height: 28px;*/
-    /*  line-height: 28px;*/
-    /*  background-color: rgba(9,30,66,0.08);*/
-    /*  border: none;*/
-    /*  .nz-icon{*/
-    /*    color: #344563;*/
-    /*  }*/
-    /*}*/
-    /*.detail-button:hover{*/
-    /*  background-color: rgba(9,30,66,0.13);*/
-    /*}*/
-  }
-  .detail-row-box{
-    height: calc(100% - 40px);
-    overflow: hidden;
-    overflow-y: auto;
-  }
-  .detail-row{
-    width: 245px;
-    padding: 0px 0 0px 15px;
-    height: 60px;
-    border-bottom: 1px solid #E7EAED;
-    cursor: pointer;
-  }
-  .detail-row:last-of-type{
-    border-bottom: none
-  }
-  .detail-row-info{
-    display: flex;
-    height: 100%;
-    width: calc(100% - 15px);
-    justify-content:center;
-    flex-direction: column;
-    > div{
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  .asset-manageIp{
-    font-size: 16px;
-    color: #333333;
-    font-weight: 400;
-  }
-    .asset-name {
-      /*padding-left: 22px;*/
-      /*width: calc(100% - 22px);*/
-      font-size: 14px;
-      color: #999999;
-      font-weight: 400;
-    }
-  }
-  .selected{
-    background: #FFFBF6;
-  }
-  .colorEF7458{
-    color: #EF7458;
-  }
-  .color23BF9A{
-    color: #23BF9A;
-  }
-  .colorFA901C{
-    color: #fa901c;
-  }
+  @import '../detailList';
 </style>

From c51d1293bd8111e36dec08d3fadb6741e29b9dad Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 26 Oct 2021 15:55:57 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix=EF=BC=9A=E8=AE=B0=E5=BD=95=E7=BB=84?=
 =?UTF-8?q?=E5=90=88=E7=AD=9B=E9=80=89=E7=9A=84=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/common/mixin/dataList.js       | 1 +
 nezha-fronted/src/components/page/alert/alertMessage.vue    | 6 +++++-
 nezha-fronted/src/components/page/asset/asset.vue           | 2 +-
 .../src/components/page/monitor/endpoint/endpointList.vue   | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/nezha-fronted/src/components/common/mixin/dataList.js b/nezha-fronted/src/components/common/mixin/dataList.js
index d5a7cc187..824bda99b 100644
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -225,6 +225,7 @@ export default {
       } else {
         this.dataListLayout.push('clickSearch')
       }
+      localStorage.setItem('dataList-layout' + this.tableId, JSON.stringify(this.dataListLayout))
     },
     addSilence (row, type) {
       this.blankSilenceObject.startAt = bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index be13d49ad..f02fe16a7 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -8,7 +8,7 @@
       :api="url"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.alertMessage"
-      :layout="['searchInput', 'elementSet', 'clickSearch', 'pagination']"
+      :layout="dataListLayout"
       :search-msg="searchMsg"
       @search="search"
       v-loading="tools.loading"
@@ -17,6 +17,9 @@
         <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-public-box-select-top right-public-box-dropdown-top">
           <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
+        <button id="asset-filter" :class="[dataListLayout.indexOf('clickSearch') > -1?'is-focus':'' ]" class="top-tool-btn margin-r-10" @click.stop="showClickSearch">
+          <i class="nz-icon nz-icon-funnel"></i>
+        </button>
         <pick-time v-model="searchTime" :default-pick="12" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
         <button id="roles-add" v-has="'alertMessage_view'" :title="$t('overall.exportExcelLower')" class="top-tool-btn margin-r-10"
                 type="button" @click="showExportDialog">
@@ -154,6 +157,7 @@ export default {
     return {
       chartLoading: false,
       stateOptions: alertMessageConstant.states,
+      dataListLayout: localStorage.getItem('dataList-layout' + 'alertMessageTable') ? JSON.parse(localStorage.getItem('dataList-layout' + 'alertMessageTable')) : ['searchInput', 'elementSet', 'clickSearch', 'pagination'],
       state: '1',
       dialogShowText: false,
       dialogText: '',
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 84e8ba023..d7c6ce26c 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -213,7 +213,7 @@ export default {
         batchShow: false
       },
       silenceBoxShow: false,
-      dataListLayout: ['searchInput', 'elementSet', 'clickSearch', 'pagination', 'detailViewSet'],
+      dataListLayout: localStorage.getItem('dataList-layout' + 'assetTable') ? JSON.parse(localStorage.getItem('dataList-layout' + 'assetTable')) : ['searchInput', 'elementSet', 'clickSearch', 'pagination', 'detailViewSet'],
       assetNzTableHeightOffset: 281, // 包含click-search时nz-table的高度
       blankObject: {
         id: '',
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 17081ad69..179e1d543 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -317,7 +317,7 @@ export default {
       tableId: 'endpointTable',
       queryPermission: 'account_view',
       endpointTableHeight: 'calc(100% - 244px)', // 主列表table高度
-      dataListLayout: ['searchInput', 'elementSet', 'clickSearch', 'pagination', 'detailViewSet'],
+      dataListLayout: localStorage.getItem('dataList-layout' + 'endpointTable') ? JSON.parse(localStorage.getItem('dataList-layout' + 'endpointTable')) : ['searchInput', 'elementSet', 'clickSearch', 'pagination', 'detailViewSet'],
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
         searchLabelList: [

From 0e5603ee214f09331b01aa8befaa17937b17a29d Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 26 Oct 2021 17:08:47 +0800
Subject: [PATCH 3/3] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=20peoject=20Too?=
 =?UTF-8?q?lTip=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/project/L5/topoTooltip.vue         | 40 +++++++++++--------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
index 27d4ef319..d805c9dad 100644
--- a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
+++ b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
@@ -460,16 +460,17 @@ export default {
 
 <style lang="scss" scoped>
   .tooltip-box{
-    background: #FFFFFF;
-    box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.11);
-    border-radius: 4px;
-    padding: 10px;
-    max-height: 400px;
-    min-height: 200px;
-    height: 100%;
-    box-sizing: border-box;
-    .tooltip-box-chart{
+      padding: 10px;
+      max-height: 400px;
+      min-height: 200px;
+      height: 100%;
+      box-sizing: border-box;
+      background: #FFFFFF;
       border: 1px solid #E7EAED;
+      box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+      border-radius: 3px 3px 3px 3px;
+
+    .tooltip-box-chart{
       max-height: 400px;
       min-height: 200px;
       height: 100%;
@@ -491,10 +492,11 @@ export default {
         font-weight: 400;
         word-break: break-word;
         padding-right: 5px;
-        height: calc(100% - 24px) !important;
-        margin-top: 24px;
+        height: calc(100% - 29px) !important;
+        margin-top: 29px;
         padding-top: 5px;
         line-height: 16px;
+        border-top: 1px dashed  #DCE1E7;
       }
     }
     .tooltip-box-info{
@@ -505,14 +507,18 @@ export default {
       min-width: 186px;
       max-width: 300px;
     }
+      /deep/ .line-area{
+          padding: 0;
+      }
   }
 /deep/ .topology-chart-title{
-  text-align: left;
-  width: 100%;
-  line-height: 20px;
-  height: 24px;
-  padding: 5px 10px 0 10px;
-  box-sizing: border-box;
+    text-align: left;
+    width: 100%;
+    line-height: 19px;
+    padding: 5px 0 5px 10px;
+    height: 29px;
+    box-sizing: border-box;
+    border-bottom: 1px dashed  #DCE1E7;
 }
   .topology-tool-tip /deep/ .topology-chart-title{
     margin-top: -23px;