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

web/frpc/components.d.ts

@@ -38,6 +38,7 @@ declare module 'vue' {
     VisitorBaseSection: typeof import('./src/components/visitor-form/VisitorBaseSection.vue')['default']
     VisitorConnectionSection: typeof import('./src/components/visitor-form/VisitorConnectionSection.vue')['default']
     VisitorFormLayout: typeof import('./src/components/visitor-form/VisitorFormLayout.vue')['default']
+    VisitorPluginSection: typeof import('./src/components/visitor-form/VisitorPluginSection.vue')['default']
     VisitorTransportSection: typeof import('./src/components/visitor-form/VisitorTransportSection.vue')['default']
     VisitorXtcpSection: typeof import('./src/components/visitor-form/VisitorXtcpSection.vue')['default']
   }

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

web/frpc/src/components/visitor-form/VisitorConnectionSection.vue

@@ -12,7 +12,8 @@
       <ConfigField label="Bind Address" type="text" v-model="form.bindAddr"
         placeholder="127.0.0.1" :readonly="readonly" />
       <ConfigField label="Bind Port" type="number" v-model="form.bindPort"
-        :min="bindPortMin" :max="65535" prop="bindPort" :readonly="readonly" />
+        :min="bindPortMin" :max="65535" prop="bindPort" :readonly="readonly"
+        :tip="bindPortTip" />
     </div>
   </ConfigSection>
 </template>
@@ -36,6 +37,9 @@ const form = computed({
 })
 
 const bindPortMin = computed(() => (form.value.type === 'sudp' ? 1 : undefined))
+const bindPortTip = computed(() => form.value.type === 'sudp'
+  ? ''
+  : 'Use -1 to skip the local listener when connections come from another visitor or plugin.')
 </script>
 
 <style scoped lang="scss">

web/frpc/src/components/visitor-form/VisitorFormLayout.vue

@@ -4,6 +4,11 @@
       <VisitorBaseSection v-model="form" :readonly="readonly" :editing="editing" />
     </ConfigSection>
     <VisitorConnectionSection v-model="form" :readonly="readonly" />
+    <VisitorPluginSection
+      v-if="form.type === 'stcp' || form.type === 'xtcp'"
+      v-model="form"
+      :readonly="readonly"
+    />
     <VisitorTransportSection v-model="form" :readonly="readonly" />
     <VisitorXtcpSection v-if="form.type === 'xtcp'" v-model="form" :readonly="readonly" />
   </div>
@@ -15,6 +20,7 @@ import type { VisitorFormData } from '../../types'
 import ConfigSection from '../ConfigSection.vue'
 import VisitorBaseSection from './VisitorBaseSection.vue'
 import VisitorConnectionSection from './VisitorConnectionSection.vue'
+import VisitorPluginSection from './VisitorPluginSection.vue'
 import VisitorTransportSection from './VisitorTransportSection.vue'
 import VisitorXtcpSection from './VisitorXtcpSection.vue'
 

web/frpc/src/components/visitor-form/VisitorPluginSection.vue

@@ -0,0 +1,52 @@
+<template>
+  <ConfigSection title="Plugin" :readonly="readonly">
+    <div class="field-row two-col">
+      <ConfigField
+        label="Plugin Type"
+        type="select"
+        v-model="form.pluginType"
+        :options="pluginOptions"
+        placeholder="None"
+        :readonly="readonly"
+      />
+      <ConfigField
+        v-if="form.pluginType === 'virtual_net'"
+        label="Destination IP"
+        type="text"
+        v-model="form.pluginDestinationIP"
+        prop="pluginDestinationIP"
+        placeholder="10.10.10.10"
+        tip="Destination address in the frp virtual network."
+        :readonly="readonly"
+      />
+    </div>
+  </ConfigSection>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { VisitorFormData } from '../../types'
+import ConfigField from '../ConfigField.vue'
+import ConfigSection from '../ConfigSection.vue'
+
+const pluginOptions = [
+  { label: 'None', value: '' },
+  { label: 'virtual_net', value: 'virtual_net' },
+]
+
+const props = withDefaults(defineProps<{
+  modelValue: VisitorFormData
+  readonly?: boolean
+}>(), { readonly: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: VisitorFormData] }>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/css/form-layout';
+</style>

web/frpc/src/types/proxy-converters.ts

@@ -190,6 +190,16 @@ export function formToStoreVisitor(form: VisitorFormData): VisitorDefinition {
     block.bindPort = form.bindPort
   }
 
+  if (
+    form.pluginType === 'virtual_net' &&
+    (form.type === 'stcp' || form.type === 'xtcp')
+  ) {
+    block.plugin = {
+      type: 'virtual_net',
+      destinationIP: form.pluginDestinationIP.trim(),
+    }
+  }
+
   if (form.type === 'xtcp') {
     if (form.protocol && form.protocol !== 'quic') {
       block.protocol = form.protocol
@@ -448,6 +458,15 @@ export function storeVisitorToForm(
   form.bindAddr = c.bindAddr || '127.0.0.1'
   form.bindPort = c.bindPort
 
+  // Visitor plugin (only supported by stcp/xtcp; sudp runtime never uses it)
+  if (
+    c.plugin?.type === 'virtual_net' &&
+    (form.type === 'stcp' || form.type === 'xtcp')
+  ) {
+    form.pluginType = 'virtual_net'
+    form.pluginDestinationIP = c.plugin.destinationIP || ''
+  }
+
   // XTCP specific
   form.protocol = c.protocol || 'quic'
   form.keepTunnelOpen = c.keepTunnelOpen || false

web/frpc/src/types/proxy-form.ts

@@ -79,6 +79,10 @@ export interface VisitorFormData {
   bindAddr: string
   bindPort: number | undefined
 
+  // Visitor plugin
+  pluginType: '' | 'virtual_net'
+  pluginDestinationIP: string
+
   // XTCP specific (XTCPVisitorConfig)
   protocol: string
   keepTunnelOpen: boolean
@@ -156,6 +160,9 @@ export function createDefaultVisitorForm(): VisitorFormData {
     bindAddr: '127.0.0.1',
     bindPort: undefined,
 
+    pluginType: '',
+    pluginDestinationIP: '',
+
     protocol: 'quic',
     keepTunnelOpen: false,
     maxRetriesAnHour: undefined,

web/frpc/src/views/VisitorEdit.vue

@@ -107,6 +107,18 @@ const formRules: FormRules = {
       trigger: 'blur',
     },
   ],
+  pluginDestinationIP: [
+    {
+      validator: (_rule, value, callback) => {
+        if (form.value.pluginType === 'virtual_net' && !value?.trim()) {
+          callback(new Error('Destination IP is required for virtual_net'))
+          return
+        }
+        callback()
+      },
+      trigger: 'blur',
+    },
+  ],
 }
 
 const goBack = () => {