Merge branch 'dev-3.6' of git.mesalab.cn:nezha/nezha-fronted into dev-3.7

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

@@ -70,6 +70,7 @@
       margin-bottom: 10px;
       box-sizing: border-box;
       height: 32px;
+      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
       .chart-title-content{
         flex: 1;
         display: flex;

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

@@ -173,6 +173,7 @@
       justify-content: space-between;
       box-sizing: border-box;
       height: 32px;
+      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
       .variable-title-left{
         width: 450px;
         text-overflow: ellipsis;
@@ -199,6 +200,9 @@
         font-size: 17px;
       }
     } 
+    .is-item-box-error .variable-title {
+      border-color: #F56C6C
+    }
     .add-variable{
       border: 1px solid $--border-color-light;
       border-radius: 2px;

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

@@ -104,6 +104,7 @@
                 v-for="(item,index) of editPanel.param.variables"
                 :key="item.uid"
                 style="margin-top: 10px"
+                :class="item.error? 'is-item-box-error' : ''"
               >
                 <div class="variable-title">
                   <span class="variable-title-left">
@@ -130,7 +131,7 @@
                   </span>
                 </div>
                 <transition name="el-zoom-in-top">
-                  <div class="form-items--half-width-group" v-if="!item.collapse" style="margin-top: 16px">
+                  <div class="form-items--half-width-group" v-show="!item.collapse" style="margin-top: 16px">
                     <!-- Name -->
                     <el-form-item class="form-item--half-width" :label='$t("overall.name")' :prop="'param.variables.' + index + '.name'"
                       :rules="[
@@ -139,7 +140,7 @@
                       { validator: variableValidator,trigger: 'blur'},
                       ]"
                     >
-                      <el-input v-model="item.name" :placeholder="$t('overall.placeHolder')" size="small"/>
+                      <el-input v-model="item.name" :placeholder="$t('overall.placeHolder')" size="small"  @change="hideError('variables', index)"/>
                     </el-form-item>
                     <!-- Type -->
                     <el-form-item class="form-item--half-width" :label='$t("overall.type")' :prop="'param.variables.' + index + '.type'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}">
@@ -175,7 +176,7 @@
                           </span>
                         </el-popover>
                       </div>
-                      <el-input v-model="item.expression" placeholder="labels_names()" size="small"/>
+                      <el-input v-model="item.expression" placeholder="labels_names()" size="small" @change="hideError('variables', index)"/>
                     </el-form-item>
                     <!-- Regex -->
                     <el-form-item v-if="item.type==='query'" :label="$t('dashboard.dashboard.regex')" :prop="'param.variables.' + index + '.regex'" key="regex" style="width: 100%;" >
@@ -183,7 +184,7 @@
                     </el-form-item>
                     <!-- Custom values -->
                     <el-form-item v-if="item.type==='custom'" :label="$t('dashboard.dashboard.customValues')" :prop="'param.variables.' + index + '.customOptions'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="customOptions" style="width: 100%;" >
-                      <el-input v-model="item.customOptions" placeholder="1,10,myKey:myValue" size="small"/>
+                      <el-input v-model="item.customOptions" placeholder="1,10,myKey:myValue" size="small" @change="hideError('variables', index)"/>
                     </el-form-item>
                     <!-- Multi-value -->
                     <el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.multi'" style="margin-bottom: 0px">
@@ -607,6 +608,39 @@ export default {
       this.esc(false)
     },
 
+    showError () {
+      this.$refs.form.validate((blooen, object) => {
+        Object.keys(object).forEach(item => {
+          const keyArr = item.split('.')
+          if (keyArr.length >= 4) {
+            this.editPanel[keyArr[0]][keyArr[1]][keyArr[2]].error = true
+          }
+        })
+        if (!blooen) {
+          this.$forceUpdate()
+        }
+      })
+    },
+    hideError (key, index) {
+      if (!this.editPanel.param[key] || !this.editPanel.param[key].length) {
+        return
+      }
+      this.$refs.form.validate((blooen, object) => {
+        console.log(Object.keys(object))
+        let flag = true
+        Object.keys(object).forEach(item => {
+          console.log(`param.${key}.${index}.`)
+          if (item.startsWith(`param.${key}.${index}.`)) {
+            flag = false
+          }
+        })
+        if (flag) {
+          this.editPanel.param[key][index].error = false
+          this.$forceUpdate()
+        }
+      })
+    },
+
     /* 保存 */
     save () {
       // 保存时把无用属性删除 再传入后台
@@ -614,6 +648,7 @@ export default {
         const temp = JSON.parse(JSON.stringify(item))
         delete temp.collapse
         delete temp.uid
+        delete temp.error
         return temp
       })
       const params = {
@@ -674,6 +709,7 @@ export default {
             })
           }
         } else {
+          this.showError()
           this.prevent_opt.save = false
           return false
         }