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.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) {

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')