fix android vpn permission grant (#2023)

* fix android vpn permission grant * fix url input behaviour
2026-05-10 07:55:36 +00:00 · 2026-03-29 23:16:32 +08:00
parent 7e289865b2
commit a1bec48dc9
22 changed files with 496 additions and 162 deletions
@@ -15,6 +15,7 @@ const url = defineModel<string>({ required: true })
 const editing = ref(false)
 const container = ref<HTMLElement | null>(null)
 const internalCompact = ref(false)
+const hostFocused = ref(false)

 onMounted(() => {
    if (container.value) {
@@ -36,36 +37,86 @@ const parseUrl = (val: string | null | undefined) => {
        const p = parseInt(portStr)
        return isNaN(p) ? (props.protos[proto] ?? 11010) : p
    }
+    const parseByPattern = (input: string) => {
+        const trimmed = input.trim()
+        if (!trimmed) {
+            return null
+        }
+        const match = trimmed.match(/^(\w+):\/\/(.*)$/)
+        const proto = match ? match[1] : 'tcp'
+        const rest = match ? match[2] : trimmed
+        const authority = rest.split(/[/?#]/)[0]
+        if (!authority) {
+            return null
+        }
+        const hostAndMaybePort = authority.includes('@') ? authority.slice(authority.lastIndexOf('@') + 1) : authority
+        if (hostAndMaybePort.startsWith('[')) {
+            const ipv6End = hostAndMaybePort.indexOf(']')
+            if (ipv6End > 0) {
+                const host = hostAndMaybePort.slice(0, ipv6End + 1)
+                const remain = hostAndMaybePort.slice(ipv6End + 1)
+                const port = remain.startsWith(':') ? getValidPort(remain.slice(1), proto) : (props.protos[proto] ?? 11010)
+                return { proto, host, port }
+            }
+        }
+        const portMatch = hostAndMaybePort.match(/^(.*):(\d+)$/)
+        const host = portMatch ? portMatch[1] : hostAndMaybePort
+        const port = portMatch ? parseInt(portMatch[2]) : (props.protos[proto] ?? 11010)
+        return { proto, host, port }
+    }

    if (!val) {
        return { proto: 'tcp', host: '', port: props.protos['tcp'] ?? 11010 }
    }
-    try {
-        const urlObj = new URL(val)
-        const proto = urlObj.protocol.replace(':', '')
-        return {
-            proto: proto,
-            host: urlObj.hostname,
-            port: getValidPort(urlObj.port, proto)
-        }
-    } catch (e) {
-        // Fallback for incomplete or invalid URLs
-        const match = val.match(/^(\w+):\/\/(.*)$/)
-        if (match) {
-            const proto = match[1]
-            const rest = match[2]
-            const portMatch = rest.match(/:(\d+)$/)
-            return {
-                proto,
-                host: portMatch ? rest.slice(0, portMatch.index) : rest,
-                port: portMatch ? parseInt(portMatch[1]) : (props.protos[proto] ?? 11010)
-            }
-        }
-        return { proto: 'tcp', host: '', port: 11010 }
+    const parsedByPattern = parseByPattern(val)
+    if (parsedByPattern) {
+        return parsedByPattern
    }
+    return { proto: 'tcp', host: '', port: 11010 }
 }

 const internalValue = ref(parseUrl(url.value))
+const defaultHost = '0.0.0.0'
+
+const buildUrlValue = (value: { proto: string, host: string, port: number }, forceDefaultHost = false) => {
+    const proto = value.proto || 'tcp'
+    const rawHost = (value.host ?? '').trim()
+    const host = rawHost || (forceDefaultHost ? defaultHost : '')
+    if (!host) {
+        return null
+    }
+    let port = value.port
+    if (isNaN(parseInt(port as any))) {
+        port = props.protos[proto] ?? 11010
+    }
+
+    if (props.protos[proto] === 0) {
+        return `${proto}://${host}`
+    }
+    return `${proto}://${host}:${port}`
+}
+
+const syncUrlFromInternal = (forceDefaultHost = false) => {
+    const nextUrl = buildUrlValue(internalValue.value, forceDefaultHost)
+    if (!nextUrl || nextUrl === url.value) {
+        return
+    }
+    url.value = nextUrl
+}
+
+const onHostBlur = () => {
+    hostFocused.value = false
+    syncUrlFromInternal(true)
+}
+
+const onHostFocus = () => {
+    hostFocused.value = true
+}
+
+const onDialogConfirm = () => {
+    syncUrlFromInternal(true)
+    editing.value = false
+}

 const isNoPortProto = computed(() => {
    return props.protos[internalValue.value.proto] === 0
@@ -73,28 +124,22 @@ const isNoPortProto = computed(() => {

 // Sync from external
 watch(() => url.value, (newVal) => {
+    if (hostFocused.value) {
+        return
+    }
    const parsed = parseUrl(newVal)
+    const internalHost = internalValue.value.host ?? ''
+    const sameHost = parsed.host === internalHost || (!internalHost.trim() && parsed.host === defaultHost)
    if (parsed.proto !== internalValue.value.proto ||
-        parsed.host !== internalValue.value.host ||
+        !sameHost ||
        parsed.port !== internalValue.value.port) {
        internalValue.value = parsed
    }
 })

 // Sync to external
-watch(internalValue, (newVal) => {
-    const proto = newVal.proto || 'tcp'
-    const host = newVal.host || '0.0.0.0'
-    let port = newVal.port
-    if (isNaN(parseInt(port as any))) {
-        port = props.protos[proto] ?? 11010
-    }
-
-    if (props.protos[proto] === 0) {
-        url.value = `${proto}://${host}`
-    } else {
-        url.value = `${proto}://${host}:${port}`
-    }
+watch(internalValue, () => {
+    syncUrlFromInternal(false)
 }, { deep: true })

 const protoOptions = computed(() => Object.keys(props.protos))
@@ -128,7 +173,8 @@ const onProtoChange = (newProto: string) => {
            <AutoComplete :model-value="internalValue.proto" :suggestions="filteredProtos" dropdown
                class="max-w-32 proto-autocomplete-in-group" @complete="searchProtos"
                @update:model-value="onProtoChange" />
-            <InputText v-model="internalValue.host" :placeholder="placeholder || '0.0.0.0'" class="grow" />
+            <InputText v-model="internalValue.host" :placeholder="placeholder || '0.0.0.0'" class="grow"
+                @focus="onHostFocus" @blur="onHostBlur" />
            <template v-if="!isNoPortProto">
                <InputGroupAddon>
                    <span style="font-weight: bold">:</span>
@@ -156,7 +202,8 @@ const onProtoChange = (newProto: string) => {
                </div>
                <div class="flex flex-col gap-2">
                    <label>{{ t('web.common.address') || 'Address' }}</label>
-                    <InputText v-model="internalValue.host" :placeholder="placeholder || '0.0.0.0'" class="w-full" />
+                    <InputText v-model="internalValue.host" :placeholder="placeholder || '0.0.0.0'" class="w-full"
+                        @focus="onHostFocus" @blur="onHostBlur" />
                </div>
                <div v-if="!isNoPortProto" class="flex flex-col gap-2">
                    <label>{{ t('port') }}</label>
@@ -164,7 +211,7 @@ const onProtoChange = (newProto: string) => {
                </div>
            </div>
            <template #footer>
-                <Button :label="t('web.common.confirm') || 'Done'" icon="pi pi-check" @click="editing = false"
+                <Button :label="t('web.common.confirm') || 'Done'" icon="pi pi-check" @click="onDialogConfirm"
                    autofocus />
            </template>
        </Dialog>