fix: 完善修复 ipam ip 二级菜单列表

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

@@ -24,3 +24,17 @@
   white-space:nowrap;
   width: 199px;
 }
+.ip-detail-available,.ip-detail-transient,.ip-detail-used {
+  font-size: 12px;
+  margin-right: 3px;
+  display: inline-block;
+}
+.ip-detail-used {
+  color: $--color-danger !important;
+}
+.ip-detail-transient {
+  color:$--color-silence !important;
+}
+.ip-detail-available {
+  color:$--color-success !important;
+}

nezha-fronted/src/components/common/bottomBox/bottomBox.vue

@@ -254,10 +254,10 @@ export default {
           { prop: 'agent', name: this.$t('config.agent.scrapeEndpoint'), active: true }
         ],
         ipam: [
-          { prop: 'ipam', name: this.$t('config.ipam.ipDetails'), active: true }
+          { prop: 'ipam', name: this.$t('ipam.subnet.ipDetails'), active: true }
         ],
         alertSilence: [
-          { prop: 'alertMessageTab', name: this.$t('config.ipam.alertSilence'), active: true }
+          { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
         ]
       }
     }

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue

@@ -16,7 +16,7 @@
     >
       <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
       <template v-slot:top-tool-right>
-        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 110px">
+        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" :disabled="from === fromRoute.alertSilence" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 110px">
           <el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
         </el-select>
         <pick-time v-model="searchTimeHeader" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
@@ -153,6 +153,9 @@ export default {
       immediate: true,
       handler (n) {
         if (n) {
+          if (this.from === fromRoute.alertSilence) {
+            this.state = '2'
+          }
           this.getTableData()
         }
       }

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

@@ -44,14 +44,35 @@
 
 <script>
 import editRigthBox from '../mixin/editRigthBox'
+import vm from '../../../main'
 
 export default {
   name: 'ipDetailsBox',
   props: {
-    obj: Object
+    obj: Object,
+    detailsType: Number
   },
   mixins: [editRigthBox],
   data () {
+    const detailsIpv = (rule, value, callback) => {
+      const Ipv4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/
+      const Ipv6 = /^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$|^:((:[\da-fA-F]{1,4}){1,6}|:)$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?$|^([\da-fA-F]{1,4}:){6}:$/
+      setTimeout(() => {
+        if (this.detailsType === 4) {
+          if (Ipv4.test(value)) {
+            callback()
+          } else {
+            callback(new Error(vm.$t('validate.address')))
+          }
+        } else if (this.detailsType === 6) {
+          if (Ipv6.test(value)) {
+            callback()
+          } else {
+            callback(new Error(vm.$t('validate.address')))
+          }
+        }
+      }, 100)
+    }
     return {
       editipDetails: {},
       rules: {
@@ -59,7 +80,8 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         addr: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: detailsIpv, trigger: 'blur' }
         ],
         mac: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }

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

@@ -34,7 +34,21 @@
         <div class="col-resize-area"></div>
       </template>
       <template slot-scope="scope" :column="item">
-        <template v-if="item.prop === 'asset'">{{scope.row.asset.name}}</template>
+        <template v-if="item.prop === 'asset'">{{scope.row.asset ? scope.row.asset.name : '-'}}</template>
+        <template v-else-if="item.prop === 'state'">
+          <div v-if="scope.row[item.prop] === 1">
+            <span class="nz-icon nz-icon-circle ip-detail-available"></span>
+            {{ 'Available' }}
+          </div>
+          <div v-else-if="scope.row[item.prop] === 2">
+            <span class="nz-icon nz-icon-circle ip-detail-transient"></span>
+            {{ 'Transient' }}
+          </div>
+          <div v-else-if="scope.row[item.prop] === 3">
+            <span class="nz-icon nz-icon-circle ip-detail-used"></span>
+            {{ 'Used' }}
+          </div>
+        </template>
         <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
         <template v-else>-</template>
       </template>