perf: sub form perfermence

src/components/Form/AutoDataForm/components/NestedField.vue

@@ -3,12 +3,13 @@
     v-if="!loading"
     :disabled="disabled"
     :fields="iFields"
-    :form="value"
+    :form="iValue"
     class="sub-form"
     v-bind="kwargs"
     @change="updateValue($event)"
     @input="updateValue($event)"
     v-on="$listeners"
+    @submit.native.prevent
   />
 </template>
 
@@ -42,6 +43,7 @@ export default {
     return {
       loading: false,
       formJson: JSON.stringify(this.value),
+      iValue: this.value,
       kwargs: {
         hasReset: false,
         hasSaveContinue: false,
@@ -71,15 +73,22 @@ export default {
     }
   },
   watch: {
+    iValue: {
+      handler(val) {
+        this.formJson = JSON.stringify(val)
+      },
+      deep: true
+    },
     value: {
       handler(val) {
         const valJson = JSON.stringify(val)
         // 如果不想等，证明是 value 自己变化导致的， 需要重新渲染
         if (valJson !== this.formJson) {
+          this.iValue = val
           this.loading = true
           setTimeout(() => {
             this.loading = false
-          }, 10)
+          }, 100)
         }
       },
       deep: true
@@ -87,8 +96,10 @@ export default {
   },
   methods: {
     updateValue(val) {
-      this.formJson = JSON.stringify(val)
-      this.$emit('input', val)
+      this.iValue = val
+      setTimeout(() => {
+        this.$emit('input', val)
+      }, 100)
     },
     objectToString(obj) {
       let data = ''
@@ -105,7 +116,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .sub-form {
   margin-left: -33%;
   margin-right: 10px;

src/components/Form/FormFields/TagInput.vue

@@ -24,7 +24,7 @@
       @change="handleChange"
       @focus="focus = true"
       @select="handleSelect"
-      @keyup.enter.native="handleConfirm"
+      @keyup.enter.prevent.native="handleConfirm"
     />
     <span
       v-if="replaceShowPassword && filterTags.length > 0"
@@ -89,7 +89,6 @@ export default {
     iPlaceholder() {
       return `${this.placeholder} (${this.$t('EnterToContinue')})`
     }
-
   },
   watch: {
     value(val) {
@@ -107,7 +106,7 @@ export default {
     },
     handleChange: _.debounce(function(item) {
       this.handleConfirm()
-    }, 240),
+    }, 200),
     handleConfirm() {
       if (this.filterValue === '') return
 
@@ -116,22 +115,19 @@ export default {
         this.filterValue = ''
         this.$emit('change', this.filterTags)
       }
+      this.$refs.SearchInput.focus()
     },
     handleTagClick(v, k) {
-      if (this.filterValue.length !== 0) {
-        this.handleConfirm()
-      }
       this.$delete(this.filterTags, k)
       this.filterValue = v
       this.$refs.SearchInput.focus()
     },
     matchRule(value) {
       const regex = new RegExp(this.replaceRule)
-      const replacedValue = value.replace(regex, (match, p1, p2, p3) => {
+      return value.replace(regex, (match, p1, p2, p3) => {
         const stars = p2.replace(/./g, this.replaceContent)
         return p1 + stars + p3
       })
-      return replacedValue
     },
     changeTagShowValue(value) {
       if (this.replaceShowPassword && this.replaceRule) {
@@ -147,60 +143,60 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .el-tag + .el-tag {
-    margin-left: 4px;
+.el-tag + .el-tag {
+  margin-left: 4px;
+}
+
+.filter-field {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 1px 2px 1px;
+  border: 1px solid #dcdee2;
+  border-radius: 1px;
+  background-color: #fff;
+  line-height: 30px;
+
+  &:hover {
+    border-color: #C0C4CC;
   }
 
-  .filter-field {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: 1px 2px 1px;
-    border: 1px solid #dcdee2;
-    border-radius: 1px;
-    background-color: #fff;
-    line-height: 30px;
-
-    &:hover {
-      border-color: #C0C4CC;
-    }
-
-    & ::v-deep .el-tag {
-      margin-top: 1px;
-      font-family: sans-serif !important;
-    }
-
-    & ::v-deep .el-autocomplete {
-      height: 28px;
-    }
+  & ::v-deep .el-tag {
+    margin-top: 1px;
+    font-family: sans-serif !important;
   }
 
-  .search-input {
-    flex: 1;
-
-    & ::v-deep .el-input__inner {
-      max-width: 100%;
-      border: none;
-      padding-left: 10px;
-    }
-  }
-
-  .el-input ::v-deep .el-input__inner {
-    border: none !important;
-    font-size: 13px;
-  }
-
-  .filter-field ::v-deep .el-input__inner {
+  & ::v-deep .el-autocomplete {
     height: 28px;
   }
+}
 
-  .show-password {
-    display: inherit;
-    padding-right: 6px;
-    cursor: pointer;
+.search-input {
+  flex: 1;
 
-    &:hover {
-      color: #999999;
-    }
+  & ::v-deep .el-input__inner {
+    max-width: 100%;
+    border: none;
+    padding-left: 10px;
   }
+}
+
+.el-input ::v-deep .el-input__inner {
+  border: none !important;
+  font-size: 13px;
+}
+
+.filter-field ::v-deep .el-input__inner {
+  height: 28px;
+}
+
+.show-password {
+  display: inherit;
+  padding-right: 6px;
+  cursor: pointer;
+
+  &:hover {
+    color: #999999;
+  }
+}
 </style>

src/views/settings/Terminal/index.vue

@@ -35,7 +35,7 @@ export default {
           name: 'Basic'
         },
         {
-          title: this.$t('Terminal'),
+          title: this.$t('Components'),
           name: 'TerminalList',
           hidden: () => !this.$hasPerm('terminal.view_terminal')
         },
@@ -47,14 +47,14 @@ export default {
           }
         },
         {
-          title: this.$t('Endpoint'),
+          title: this.$t('Endpoints'),
           name: 'EndpointList',
           hidden: () => {
             return !this.$hasPerm('terminal.view_endpoint')
           }
         },
         {
-          title: this.$t('EndpointRule'),
+          title: this.$t('EndpointRules'),
           name: 'EndpointRuleList',
           hidden: () => {
             return !this.$hasPerm('terminal.view_endpointrule')