style： 黑色主题下的样式调整

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

@@ -374,3 +374,13 @@
 .meta-option-box {
   color: $--color-text-regular;
 }
+.el-range-input{
+  background: $--background-color-empty;
+}
+.ql-toolbar {
+  line-height: 22px;
+  .ql-picker-options{
+    background-color: $--background-color-empty;
+    color: $--color-text-primary;
+  }
+}

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

@@ -568,3 +568,11 @@
   overflow: auto;
   background-color: $--table-body-background-color;
 }
+.el-checkbox.is-disabled{
+  line-height: 1;
+  height: 16px;
+}
+.el-checkbox__input.is-disabled{
+  line-height: 1;
+  height: 16px;
+}

nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss

@@ -215,16 +215,16 @@
       font-weight: 600;
       text-transform: Capitalize;
     }
-    .pipeline-option {
-      i {
-        color: $--color-text-regular;
-      }
-    }
   }
   .el-input-group__append {
     background-color: $--border-color-light;
   }
 }
+.pipeline-option {
+  i {
+    color: $--color-text-regular;
+  }
+}
 .sub-label {
   padding-right: 15px;
   font-size: 14px;

nezha-fronted/src/components/common/alert/alertLabel.vue

@@ -607,10 +607,10 @@
 </template>
 
 <script>
-import trendMixin from "./trendMixins";
+import trendMixin from './trendMixins'
 
 export default {
-  name: "alertLabel",
+  name: 'alertLabel',
   mixins: [trendMixin],
   props: {
     id: {},
@@ -618,63 +618,63 @@ export default {
     // labelLoading:{},
     that: {},
     detailList: Boolean,
-    alertTableDialog: Boolean,
+    alertTableDialog: Boolean
   },
-  data() {
+  data () {
     return {
       alertLabelData: null,
       loading: true,
       heightList: 0,
       boxWidth: 0,
       severityDataWeight: this.$store.getters.severityDataWeight,
-      alertColor: "#23bf9a",
+      alertColor: '#23bf9a'
-    };
+    }
   },
   watch: {
     id: {
       immediate: true,
       deep: true,
-      handler(n) {
+      handler (n) {
-        this.init();
+        this.init()
-      },
+      }
     },
     that: {
       immediate: true,
       deep: true,
-      handler(n) {},
+      handler (n) {}
     },
     LRTriangle: {
       immediate: true,
       deep: true,
-      handler(n) {},
+      handler (n) {}
-    },
+    }
   },
   computed: {
-    calcPosition() {
+    calcPosition () {
       return function (position) {
         const clientHeight =
           document.body.clientHeight < document.documentElement.clientHeight
             ? document.body.clientHeight
-            : document.documentElement.clientHeight;
+            : document.documentElement.clientHeight
         const clientWidth =
           document.body.clientWidth < document.documentElement.clientWidth
             ? document.body.clientWidth
-            : document.documentElement.clientWidth;
+            : document.documentElement.clientWidth
-        let leftOffSetView = 0;
+        let leftOffSetView = 0
-        let leftOffSet = this.detailList ? -80 : 10;
+        let leftOffSet = this.detailList ? -80 : 10
-        let topOffSet = this.detailList ? 60 : 22;
+        let topOffSet = this.detailList ? 60 : 22
-        let topOffSetView = 0;
+        let topOffSetView = 0
         let labelPosition = {
           top: 0,
           left: 0,
-          right: 0,
+          right: 0
-        };
+        }
         if (this.alertTableDialog) {
           let dialog = document.querySelector(
-            "#dialog-alert-massage .el-dialog"
+            '#dialog-alert-massage .el-dialog'
-          );
+          )
           if (!dialog) {
-            dialog = document.querySelector("#viewGraphDialog .el-dialog");
+            dialog = document.querySelector('#viewGraphDialog .el-dialog')
           }
           const dialogHeight = dialog.getBoundingClientRect()
           leftOffSet = leftOffSet - 3 * dialogHeight.x
@@ -685,190 +685,190 @@ export default {
         if (position.top > clientHeight / 2) {
           labelPosition = {
             left: `${position.left + position.width + leftOffSet}px`,
-            top: `${position.top - this.heightList - topOffSetView}px`,
+            top: `${position.top - this.heightList - topOffSetView}px`
-          };
+          }
         } else {
           labelPosition = {
             left: `${position.left + position.width + leftOffSet}px`,
-            top: `${position.top + topOffSet}px`,
+            top: `${position.top + topOffSet}px`
-          };
+          }
         }
         if (position.left > clientWidth / 2) {
-          delete labelPosition.left;
+          delete labelPosition.left
 
           labelPosition.right =
-            clientWidth - position.left - leftOffSetView + "px";
+            clientWidth - position.left - leftOffSetView + 'px'
+        }
+        return labelPosition
       }
-        return labelPosition;
-      };
     },
-    calcHeight() {
+    calcHeight () {
-      const self = this;
+      const self = this
       return function (position) {
         const clientHeight =
           document.body.clientHeight < document.documentElement.clientHeight
             ? document.body.clientHeight
-            : document.documentElement.clientHeight;
+            : document.documentElement.clientHeight
         const elHeight =
-          self.type === "asset" ? 318 : self.type === "project" ? 70 : 70;
+          self.type === 'asset' ? 318 : self.type === 'project' ? 70 : 70
         if (position.top + elHeight > clientHeight) {
-          return "alert-labelUp";
+          return 'alert-labelUp'
         } else {
-          return "alert-label";
+          return 'alert-label'
+        }
+      }
     }
-      };
-    },
   },
   methods: {
-    init() {
+    init () {
-      this.loading = true;
+      this.loading = true
-      if (this.type === "asset") {
+      if (this.type === 'asset') {
-        this.$get("asset/asset/" + this.id).then((res) => {
+        this.$get('asset/asset/' + this.id).then((res) => {
-          if (res.msg === "success") {
+          if (res.msg === 'success') {
-            this.loading = false;
+            this.loading = false
-            this.alertLabelData = res.data;
+            this.alertLabelData = res.data
-            this.alertColor = this.returnColor(res.data.alert);
+            this.alertColor = this.returnColor(res.data.alert)
           } else {
-            this.$message.error(res.msg);
+            this.$message.error(res.msg)
           }
-        });
+        })
       }
-      if (this.type === "project") {
+      if (this.type === 'project') {
-        this.$get("monitor/project/" + this.id).then((res) => {
+        this.$get('monitor/project/' + this.id).then((res) => {
-          if (res.msg === "success") {
+          if (res.msg === 'success') {
-            this.loading = false;
+            this.loading = false
-            this.alertLabelData = res.data;
+            this.alertLabelData = res.data
-            this.alertColor = this.returnColor(res.data.alert);
+            this.alertColor = this.returnColor(res.data.alert)
           } else {
-            this.$message.error(res.msg);
+            this.$message.error(res.msg)
           }
-        });
+        })
       }
-      if (this.type === "module") {
+      if (this.type === 'module') {
-        this.$get("monitor/module/" + this.id).then((res) => {
+        this.$get('monitor/module/' + this.id).then((res) => {
-          if (res.msg === "success") {
+          if (res.msg === 'success') {
-            this.loading = false;
+            this.loading = false
-            this.alertLabelData = res.data;
+            this.alertLabelData = res.data
-            this.alertColor = this.returnColor(res.data.alert);
+            this.alertColor = this.returnColor(res.data.alert)
           } else {
-            this.$message.error(res.msg);
+            this.$message.error(res.msg)
           }
-        });
+        })
       }
-      if (this.type === "endpoint") {
+      if (this.type === 'endpoint') {
-        this.$get("monitor/endpoint/" + this.id).then((res) => {
+        this.$get('monitor/endpoint/' + this.id).then((res) => {
-          if (res.msg === "success") {
+          if (res.msg === 'success') {
-            this.loading = false;
+            this.loading = false
-            this.alertLabelData = res.data;
+            this.alertLabelData = res.data
-            this.alertColor = this.returnColor(res.data.alert);
+            this.alertColor = this.returnColor(res.data.alert)
           } else {
-            this.$message.error(res.msg);
+            this.$message.error(res.msg)
           }
-        });
+        })
       }
-      if (this.type === "dc") {
+      if (this.type === 'dc') {
-        this.$get("dc/" + this.id).then((res) => {
+        this.$get('dc/' + this.id).then((res) => {
-          if (res.msg === "success") {
+          if (res.msg === 'success') {
-            this.loading = false;
+            this.loading = false
-            this.alertLabelData = res.data;
+            this.alertLabelData = res.data
-            this.alertColor = this.returnColor(res.data.alert);
+            this.alertColor = this.returnColor(res.data.alert)
           } else {
-            this.$message.error(res.msg);
+            this.$message.error(res.msg)
           }
-        });
+        })
       }
-      const weekDays = this.getWeeksTime();
+      const weekDays = this.getWeeksTime()
       if (this.trendTimer) {
-        clearTimeout(this.trendTimer);
+        clearTimeout(this.trendTimer)
-        this.trendTimer = null;
+        this.trendTimer = null
       }
       this.trendTimer = setTimeout(() => {
-        this.trendLoading = true;
+        this.trendLoading = true
         const params = {
-          type: "total",
+          type: 'total',
-          dimension: "priority",
+          dimension: 'priority',
-          step: "d",
+          step: 'd'
-        };
+        }
-        params[this.type + "Id"] = this.id;
+        params[this.type + 'Id'] = this.id
-        this.$get("/stat/alertMessage/trend", params).then((res) => {
+        this.$get('/stat/alertMessage/trend', params).then((res) => {
           if (!res.data) {
-            return;
+            return
           }
           const alertDaysData = res.data.result
             ? res.data.result[0].values
-            : [];
+            : []
-          const newWeekDays = JSON.parse(JSON.stringify(weekDays));
+          const newWeekDays = JSON.parse(JSON.stringify(weekDays))
           alertDaysData.forEach((item) => {
             item.values.forEach((time) => {
-              const findItem = newWeekDays.find((days) => days.time == time[0]);
+              const findItem = newWeekDays.find((days) => days.time == time[0])
               if (findItem) {
-                findItem[item.metric.priority] = time[1];
+                findItem[item.metric.priority] = time[1]
               }
-            });
+            })
-          });
+          })
           setTimeout(() => {
-            this.alertDaysData = newWeekDays;
+            this.alertDaysData = newWeekDays
-            this.trendLoading = false;
+            this.trendLoading = false
-          });
+          })
-        });
+        })
-      });
+      })
     },
-    alertActiveStr() {
+    alertActiveStr () {
-      return this.$t("overall.active");
+      return this.$t('overall.active')
     },
-    alertStateStr(num) {
+    alertStateStr (num) {
       if (num == 1) {
-        return this.$t("asset.inStock");
+        return this.$t('asset.inStock')
       } else {
-        return this.$t("asset.notInStock");
+        return this.$t('asset.notInStock')
       }
     },
-    selectIcon(type) {
+    selectIcon (type) {
       switch (type) {
-        case "asset":
+        case 'asset':
-          return "nz-icon-overview-project";
+          return 'nz-icon-overview-project'
-        case "dc":
+        case 'dc':
-          return "nz-icon-Datacenter2";
+          return 'nz-icon-Datacenter2'
-        case "project":
+        case 'project':
-          return "nz-icon-project";
+          return 'nz-icon-project'
-        case "module":
+        case 'module':
-          return "nz-icon-overview-module";
+          return 'nz-icon-overview-module'
-        case "endpoint":
+        case 'endpoint':
-          return "nz-icon-overview-endpoint";
+          return 'nz-icon-overview-endpoint'
-        case "alertrule":
+        case 'alertrule':
-          return "nz-icon-Alertrule";
+          return 'nz-icon-Alertrule'
       }
-      return "nz-icon-module5";
+      return 'nz-icon-module5'
     },
-    returnColor(obj) {
+    returnColor (obj) {
-      let color = "";
+      let color = ''
       if (!obj) {
-        return "#23bf9a";
+        return '#23bf9a'
       } else {
         this.severityDataWeight.forEach((severity) => {
-          const num = obj.find((alert) => alert.priority === severity.name);
+          const num = obj.find((alert) => alert.priority === severity.name)
           if (num && !color && num.num > 0) {
-            color = severity.color;
+            color = severity.color
           }
-        });
+        })
         if (!color) {
-          color = "#23bf9a";
+          color = '#23bf9a'
+        }
+        return color
       }
-        return color;
     }
   },
-  },
+  mounted () {
-  mounted() {
     if (this.$refs.alertLabels) {
-      this.heightList = this.$refs.alertLabels.getBoundingClientRect().height;
+      this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
-      this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width;
+      this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
     } else {
-      this.heightList = 0;
+      this.heightList = 0
-      this.boxWidth = 0;
+      this.boxWidth = 0
     }
   },
-  beforeDestroy() {},
+  beforeDestroy () {}
-};
+}
 </script>
 <style>
 </style>

nezha-fronted/src/components/common/alert/nzTooltip.vue

@@ -15,7 +15,8 @@ export default {
     // labelLoading:{},
     that: {},
     detailList: Boolean,
-    alertTableDialog: Boolean
+    alertTableDialog: Boolean,
+    isTopoInfo: Boolean
   },
   data () {
     return {
@@ -31,9 +32,10 @@ export default {
         const leftOffSetView = this.detailList ? -80 : 10
         const leftOffSet = this.detailList ? -80 : 10
         const topOffSet = this.detailList ? 60 : 22
+        const topoOffset = this.isTopoInfo ? 155 : 0
         if (position.top + this.heightList > clientHeight) {
           return {
-            left: `${position.left + position.width + leftOffSet}px`,
+            left: `${position.left + position.width + leftOffSet - topoOffset}px`,
             top: `${position.top - this.heightList + topOffSet}px`
           }
         } else if (this.alertTableDialog) {
@@ -47,7 +49,7 @@ export default {
           }
         } else {
           return {
-            left: `${position.left + position.width + leftOffSetView}px`,
+            left: `${position.left + position.width + leftOffSetView - topoOffset}px`,
             top: `${position.top}px`
           }
         }

nezha-fronted/src/components/common/project/popData/endpointTable.vue

@@ -15,6 +15,7 @@
         <template  v-slot:default="slotProps">
           <endpoint-table
             style="height: 100%"
+            :isTopoInfo="true"
             ref="dataTable"
             :orderByFa="orderBy"
             v-my-loading="tools.loading"

nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue

@@ -153,11 +153,11 @@ export default {
         if (valid) {
           if (this.editCredential.type === 3) {
             if (this.editCredential.config.authProtocol && !this.editCredential.config.privProtocol) {
-              this.editCredential.securityLevel = 'authNoPriv'
+              this.editCredential.config.securityLevel = 'authNoPriv'
             } else if (this.editCredential.config.authProtocol && this.editCredential.config.privProtocol) {
-              this.editCredential.securityLevel = 'authPriv'
+              this.editCredential.config.securityLevel = 'authPriv'
             } else {
-              this.editCredential.securityLevel = 'noAuthNoPriv'
+              this.editCredential.config.securityLevel = 'noAuthNoPriv'
             }
           }
           const param = JSON.parse(JSON.stringify(this.editCredential))

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -139,7 +139,7 @@
              <span class="active-icon gray-bg inline-block"></span>
            </span>
          </span>
-            <nz-tooltip :that="scope.row.configs[1]"  v-if="scope.row.configs[1] && scope.row.configs[1].loading && scope.row.configs[1].state > 1" :type="'configs[1]'">
+            <nz-tooltip :that="scope.row.configs[1]"  v-if="scope.row.configs[1] && scope.row.configs[1].loading && scope.row.configs[1].state > 1" :type="'configs[1]'" :isTopoInfo="isTopoInfo">
               <div name="default">
                 <div v-html="suspendedStr(scope.row.configs[1].state)"></div>
               </div>
@@ -213,6 +213,10 @@ export default {
       type: Boolean,
       default: true
     },
+    isTopoInfo: {
+      type: Boolean,
+      default: false
+    },
     endpointTab: Boolean,
     loading: Boolean
   },