web/frpc: support virtual net visitor plugin (#5414)

web/frpc/src/components/ConfigField.vue

@@ -12,7 +12,7 @@
     <!-- number -->
     <el-input
       v-else-if="type === 'number'"
-      :model-value="modelValue != null ? String(modelValue) : ''"
+      :model-value="numberDraft"
       :placeholder="placeholder"
       :disabled="disabled"
       @update:model-value="handleNumberInput($event)"
@@ -112,7 +112,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import KeyValueEditor from './KeyValueEditor.vue'
 import StringListEditor from './StringListEditor.vue'
 import PopoverMenu from '@shared/components/PopoverMenu.vue'
@@ -154,16 +154,42 @@ const emit = defineEmits<{
   'update:modelValue': [value: any]
 }>()
 
+const numberDraft = ref(
+  props.modelValue != null ? String(props.modelValue) : '',
+)
+const preserveNumberDraft = ref(false)
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (preserveNumberDraft.value && value == null) {
+      preserveNumberDraft.value = false
+      return
+    }
+    preserveNumberDraft.value = false
+    numberDraft.value = value != null ? String(value) : ''
+  },
+)
+
 const handleNumberInput = (val: string) => {
+  numberDraft.value = val
   if (val === '') {
     emit('update:modelValue', undefined)
     return
   }
+  // Keep a leading sign as an editing state so negative values can be typed
+  // naturally. The form value is updated once the input becomes a number.
+  if (val === '-' || val === '+') {
+    preserveNumberDraft.value = true
+    emit('update:modelValue', undefined)
+    return
+  }
   const num = Number(val)
   if (!isNaN(num)) {
     let clamped = num
     if (props.min != null && clamped < props.min) clamped = props.min
     if (props.max != null && clamped > props.max) clamped = props.max
+    numberDraft.value = String(clamped)
     emit('update:modelValue', clamped)
   }
 }