From 40274d8c92249043d8cddb6e40b4b23128e18df4 Mon Sep 17 00:00:00 2001
From: barkure <43804451+barkure@users.noreply.github.com>
Date: Thu, 23 Jul 2026 22:02:49 +0800
Subject: [PATCH] web/frpc: support virtual net visitor plugin (#5414)

---
 web/frpc/components.d.ts                      |  1 +
 web/frpc/src/components/ConfigField.vue       | 30 ++++++++++-
 .../visitor-form/VisitorConnectionSection.vue |  6 ++-
 .../visitor-form/VisitorFormLayout.vue        |  6 +++
 .../visitor-form/VisitorPluginSection.vue     | 52 +++++++++++++++++++
 web/frpc/src/types/proxy-converters.ts        | 19 +++++++
 web/frpc/src/types/proxy-form.ts              |  7 +++
 web/frpc/src/views/VisitorEdit.vue            | 12 +++++
 8 files changed, 130 insertions(+), 3 deletions(-)
 create mode 100644 web/frpc/src/components/visitor-form/VisitorPluginSection.vue

diff --git a/web/frpc/components.d.ts b/web/frpc/components.d.ts
index c58d0bca..675f376d 100644
--- a/web/frpc/components.d.ts
+++ b/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']
   }
diff --git a/web/frpc/src/components/ConfigField.vue b/web/frpc/src/components/ConfigField.vue
index 27719847..67be4ba0 100644
--- a/web/frpc/src/components/ConfigField.vue
+++ b/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)
   }
 }
diff --git a/web/frpc/src/components/visitor-form/VisitorConnectionSection.vue b/web/frpc/src/components/visitor-form/VisitorConnectionSection.vue
index 00dfca96..0b52a874 100644
--- a/web/frpc/src/components/visitor-form/VisitorConnectionSection.vue
+++ b/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">
diff --git a/web/frpc/src/components/visitor-form/VisitorFormLayout.vue b/web/frpc/src/components/visitor-form/VisitorFormLayout.vue
index 1d50a58f..ba942463 100644
--- a/web/frpc/src/components/visitor-form/VisitorFormLayout.vue
+++ b/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'
 
diff --git a/web/frpc/src/components/visitor-form/VisitorPluginSection.vue b/web/frpc/src/components/visitor-form/VisitorPluginSection.vue
new file mode 100644
index 00000000..ecbe5ce7
--- /dev/null
+++ b/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>
diff --git a/web/frpc/src/types/proxy-converters.ts b/web/frpc/src/types/proxy-converters.ts
index 6587986e..eb4c4c17 100644
--- a/web/frpc/src/types/proxy-converters.ts
+++ b/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
diff --git a/web/frpc/src/types/proxy-form.ts b/web/frpc/src/types/proxy-form.ts
index 8f6bd614..793fe516 100644
--- a/web/frpc/src/types/proxy-form.ts
+++ b/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,
diff --git a/web/frpc/src/views/VisitorEdit.vue b/web/frpc/src/views/VisitorEdit.vue
index 615e97e9..bf92e29e 100644
--- a/web/frpc/src/views/VisitorEdit.vue
+++ b/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 = () => {