239 lines
10 KiB
Vue
239 lines
10 KiB
Vue
|
<template>
|
||
|
|
<v-card :subtitle="$t('objects.dial')" style="background-color: inherit;">
|
||
|
|
<v-row>
|
||
|
|
<v-col cols="12" sm="6" md="4" v-if="optionDetour">
|
||
|
|
<v-select
|
||
|
|
hide-details
|
||
|
|
:label="$t('dial.detourText')"
|
||
|
|
:items="outTags"
|
||
|
|
v-model="dial.detour">
|
||
|
|
</v-select>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="12" sm="6" md="4" v-if="optionBind">
|
||
|
|
<v-text-field
|
||
|
|
:label="$t('dial.bindIf')"
|
||
|
|
hide-details
|
||
|
|
v-model="dial.bind_interface"></v-text-field>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
<v-row>
|
||
|
|
<v-col cols="12" sm="6" md="4" v-if="optionIPV4">
|
||
|
|
<v-text-field
|
||
|
|
:label="$t('dial.bindIp4')"
|
||
|
|
hide-details
|
||
|
|
v-model="dial.inet4_bind_address"></v-text-field>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="12" sm="6" md="4" v-if="optionIPV6">
|
||
|
|
<v-text-field
|
||
|
|
:label="$t('dial.bindIp6')"
|
||
|
|
hide-details
|
||
|
|
v-model="dial.inet6_bind_address"></v-text-field>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="12" sm="6" md="4" v-if="optionBindNoPort">
|
||
|
|
<v-switch v-model="dial.bind_address_no_port" color="primary" :label="$t('dial.bindNoPort')" hide-details></v-switch>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
<v-row>
|
||
|
|
<v-col cols="12" sm="6" md="4" v-if="optionRM">
|
||
|
|
<v-text-field
|
||
|
|
label="Linux Routing Mark"
|
||
|
|
hide-details
|
||
|
|
type="number"
|
||
|
|
min="0"
|
||
|
|
v-model.number="routingMark"></v-text-field>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="12" sm="6" md="4" v-if="optionRA">
|
||
|
|
<v-switch v-model="dial.reuse_addr" color="primary" :label="$t('dial.reuseAddr')" hide-details></v-switch>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
<v-row v-if="optionTCP">
|
||
|
|
<v-col cols="12" sm="6" md="4">
|
||
|
|
<v-switch v-model="dial.tcp_fast_open" color="primary" label="TCP Fast Open" hide-details></v-switch>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="12" sm="6" md="4">
|
||
|
|
<v-switch v-model="dial.tcp_multi_path" color="primary" label="TCP Multi Path" hide-details></v-switch>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
<v-row v-if="optionTcpKeepAlive">
|
||
|
|
<v-col cols="12" sm="6" md="4">
|
||
|
|
<v-switch v-model="dial.disable_tcp_keep_alive" color="primary" :label="$t('dial.disableTcpKeepAlive')" hide-details></v-switch>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="12" sm="6" md="4">
|
||
|
|
<v-text-field v-model="dial.tcp_keep_alive" :label="$t('dial.tcpKeepAlive')" hide-details></v-text-field>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="12" sm="6" md="4">
|
||
|
|
<v-text-field v-model="dial.tcp_keep_alive_interval" :label="$t('dial.tcpKeepAliveInterval')" hide-details></v-text-field>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
<v-row>
|
||
|
|
<v-col cols="12" sm="6" md="4" v-if="optionUDP">
|
||
|
|
<v-switch v-model="dial.udp_fragment" color="primary" label="UDP Fragment" hide-details></v-switch>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="12" sm="6" md="4" v-if="optionCT">
|
||
|
|
<v-text-field
|
||
|
|
:label="$t('dial.connTimeout')"
|
||
|
|
hide-details
|
||
|
|
type="number"
|
||
|
|
min="1"
|
||
|
|
:suffix="$t('date.s')"
|
||
|
|
v-model.number="connectTimeout"></v-text-field>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
<v-row v-if="optionDR">
|
||
|
|
<v-col cols="12" sm="6" md="4">
|
||
|
|
<v-select
|
||
|
|
hide-details
|
||
|
|
:label="$t('dial.domainResolver')"
|
||
|
|
:items="dnsTags"
|
||
|
|
v-model="dial.domain_resolver">
|
||
|
|
</v-select>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
<v-card-actions class="pt-0">
|
||
|
|
<v-spacer></v-spacer>
|
||
|
|
<v-menu v-model="menu" :close-on-content-click="false" location="start">
|
||
|
|
<template v-slot:activator="{ props }">
|
||
|
|
<v-btn v-bind="props" hide-details variant="tonal">{{ $t('dial.options') }}</v-btn>
|
||
|
|
</template>
|
||
|
|
<v-card>
|
||
|
|
<v-list>
|
||
|
|
<v-list-item v-if="mode != 'client'">
|
||
|
|
<v-switch v-model="optionDetour" color="primary" :label="$t('listen.detour')" hide-details></v-switch>
|
||
|
|
</v-list-item>
|
||
|
|
<v-list-item v-if="mode != 'client'">
|
||
|
|
<v-switch v-model="optionBind" color="primary" :label="$t('dial.bindIf')" hide-details></v-switch>
|
||
|
|
</v-list-item>
|
||
|
|
<v-list-item v-if="mode != 'client'">
|
||
|
|
<v-switch v-model="optionIPV4" color="primary" :label="$t('dial.bindIp4')" hide-details></v-switch>
|
||
|
|
</v-list-item>
|
||
|
|
<v-list-item v-if="mode != 'client'">
|
||
|
|
<v-switch v-model="optionIPV6" color="primary" :label="$t('dial.bindIp6')" hide-details></v-switch>
|
||
|
|
</v-list-item>
|
||
|
|
<v-list-item v-if="mode != 'client'">
|
||
|
|
<v-switch v-model="optionBindNoPort" color="primary" :label="$t('dial.bindNoPort')" hide-details></v-switch>
|
||
|
|
</v-list-item>
|
||
|
|
<v-list-item v-if="mode != 'client'">
|
||
|
|
<v-switch v-model="optionRM" color="primary" label="Routing Mark" hide-details></v-switch>
|
||
|
|
</v-list-item>
|
||
|
|
<v-list-item v-if="mode != 'client'">
|
||
|
|
<v-switch v-model="optionRA" color="primary" :label="$t('dial.reuseAddr')" hide-details></v-switch>
|
||
|
|
</v-list-item>
|
||
|
|
<v-list-item>
|
||
|
|
<v-switch v-model="optionTCP" color="primary" :label="$t('listen.tcpOptions')" hide-details></v-switch>
|
||
|
|
</v-list-item>
|
||
|
|
<v-list-item>
|
||
|
|
<v-switch v-model="optionUDP" color="primary" :label="$t('listen.udpOptions')" hide-details></v-switch>
|
||
|
|
</v-list-item>
|
||
|
|
<v-list-item>
|
||
|
|
<v-switch v-model="optionCT" color="primary" :label="$t('dial.connTimeout')" hide-details></v-switch>
|
||
|
|
</v-list-item>
|
||
|
|
<v-list-item>
|
||
|
|
<v-switch v-model="optionTcpKeepAlive" color="primary" :label="$t('dial.tcpKeepAlive')" hide-details></v-switch>
|
||
|
|
</v-list-item>
|
||
|
|
<v-list-item v-if="mode != 'client'">
|
||
|
|
<v-switch v-model="optionDR" color="primary" :label="$t('dial.domainResolver')" hide-details></v-switch>
|
||
|
|
</v-list-item>
|
||
|
|
</v-list>
|
||
|
|
</v-card>
|
||
|
|
</v-menu>
|
||
|
|
</v-card-actions>
|
||
|
|
</v-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import Data from '@/store/modules/data'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: ['dial', 'mode'],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
menu: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
outTags() { return [...Data().outbounds?.map((o:any) => o.tag), ...Data().endpoints?.map((e:any) => e.tag)] },
|
||
|
|
connectTimeout: {
|
||
|
|
get() { return this.$props.dial.connect_timeout ? parseInt(this.$props.dial.connect_timeout.replace('s','')) : 5 },
|
||
|
|
set(newValue:number) { this.$props.dial.connect_timeout = newValue > 0 ? newValue + 's' : '5s' }
|
||
|
|
},
|
||
|
|
routingMark: {
|
||
|
|
get() { return this.$props.dial.routing_mark?? 0 },
|
||
|
|
set(newValue:number) { this.$props.dial.routing_mark = newValue > 0 ? newValue : 0 }
|
||
|
|
},
|
||
|
|
optionDetour: {
|
||
|
|
get(): boolean { return this.$props.dial.detour != undefined },
|
||
|
|
set(v:boolean) { v ? this.$props.dial.detour = this.outTags[0]?? '' : delete this.$props.dial.detour }
|
||
|
|
},
|
||
|
|
optionBind: {
|
||
|
|
get(): boolean { return this.$props.dial.bind_interface != undefined },
|
||
|
|
set(v:boolean) { v ? this.$props.dial.bind_interface = '' : delete this.$props.dial.bind_interface }
|
||
|
|
},
|
||
|
|
optionIPV4: {
|
||
|
|
get(): boolean { return this.$props.dial.inet4_bind_address != undefined },
|
||
|
|
set(v:boolean) { v ? this.$props.dial.inet4_bind_address = '' : delete this.$props.dial.inet4_bind_address }
|
||
|
|
},
|
||
|
|
optionIPV6: {
|
||
|
|
get(): boolean { return this.$props.dial.inet6_bind_address != undefined },
|
||
|
|
set(v:boolean) { v ? this.$props.dial.inet6_bind_address = '' : delete this.$props.dial.inet6_bind_address }
|
||
|
|
},
|
||
|
|
optionBindNoPort: {
|
||
|
|
get(): boolean { return this.$props.dial.bind_address_no_port != undefined },
|
||
|
|
set(v:boolean) { v ? this.$props.dial.bind_address_no_port = true : delete this.$props.dial.bind_address_no_port }
|
||
|
|
},
|
||
|
|
optionTcpKeepAlive: {
|
||
|
|
get(): boolean {
|
||
|
|
return this.$props.dial.disable_tcp_keep_alive != undefined ||
|
||
|
|
this.$props.dial.tcp_keep_alive != undefined ||
|
||
|
|
this.$props.dial.tcp_keep_alive_interval != undefined
|
||
|
|
},
|
||
|
|
set(v:boolean) {
|
||
|
|
if (v) {
|
||
|
|
this.$props.dial.tcp_keep_alive = '5m'
|
||
|
|
this.$props.dial.tcp_keep_alive_interval = '75s'
|
||
|
|
} else {
|
||
|
|
delete this.$props.dial.disable_tcp_keep_alive
|
||
|
|
delete this.$props.dial.tcp_keep_alive
|
||
|
|
delete this.$props.dial.tcp_keep_alive_interval
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
optionRM: {
|
||
|
|
get(): boolean { return this.$props.dial.routing_mark != undefined },
|
||
|
|
set(v:boolean) { v ? this.$props.dial.routing_mark = 0 : delete this.$props.dial.routing_mark }
|
||
|
|
},
|
||
|
|
optionRA: {
|
||
|
|
get(): boolean { return this.$props.dial.reuse_addr != undefined },
|
||
|
|
set(v:boolean) { v ? this.$props.dial.reuse_addr = true : delete this.$props.dial.reuse_addr }
|
||
|
|
},
|
||
|
|
optionTCP: {
|
||
|
|
get(): boolean {
|
||
|
|
return this.$props.dial.tcp_fast_open != undefined &&
|
||
|
|
this.$props.dial.tcp_multi_path != undefined
|
||
|
|
},
|
||
|
|
set(v:boolean) {
|
||
|
|
if (v) {
|
||
|
|
this.$props.dial.tcp_fast_open = false
|
||
|
|
this.$props.dial.tcp_multi_path = false
|
||
|
|
} else {
|
||
|
|
delete this.$props.dial.tcp_fast_open
|
||
|
|
delete this.$props.dial.tcp_multi_path
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
optionUDP: {
|
||
|
|
get(): boolean { return this.$props.dial.udp_fragment != undefined },
|
||
|
|
set(v:boolean) { v ? this.$props.dial.udp_fragment = true : delete this.$props.dial.udp_fragment }
|
||
|
|
},
|
||
|
|
optionCT: {
|
||
|
|
get(): boolean { return this.$props.dial.connect_timeout != undefined },
|
||
|
|
set(v:boolean) { v ? this.$props.dial.connect_timeout = '5s' : delete this.$props.dial.connect_timeout }
|
||
|
|
},
|
||
|
|
optionDR: {
|
||
|
|
get(): boolean { return this.$props.dial.domain_resolver != undefined },
|
||
|
|
set(v:boolean) { this.$props.dial.domain_resolver = v ? this.dnsTags[0]?? '' : undefined }
|
||
|
|
},
|
||
|
|
dnsTags() {return Data().config.dns?.servers?.map((d:any) => d.tag) ?? []}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|