mirror of https://gitee.com/godoos/godoos.git
2 changed files with 477 additions and 297 deletions
@ -1,295 +1,475 @@ |
|||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { useProxyStore } from "@/stores/proxy"; |
import { useProxyStore } from "@/stores/proxy"; |
||||
import { notifyError, notifySuccess } from "@/util/msg"; |
import { OpenDirDialog } from "@/util/goutil"; |
||||
import { ref } from "vue"; |
import { notifyError, notifySuccess } from "@/util/msg"; |
||||
import { OpenDirDialog } from "@/util/goutil"; |
import { ref } from "vue"; |
||||
const proxyStore = useProxyStore(); |
const proxyStore = useProxyStore(); |
||||
const { |
const { updateProxy } = proxyStore; |
||||
updateProxy, |
|
||||
} = proxyStore; |
|
||||
|
|
||||
const proxyDialogShow = ref(false); |
const proxyDialogShow = ref(false); |
||||
const pwdRef = ref<any>(null); |
const pwdRef = ref<any>(null); |
||||
|
|
||||
// 定义表单验证规则 |
// 定义表单验证规则 |
||||
const proxyRules = { |
const proxyRules = { |
||||
name: [{ required: true, message: "请输入代理名称", trigger: "blur" }], |
name: [{ required: true, message: "请输入代理名称", trigger: "blur" }], |
||||
// port: [ |
// port: [ |
||||
// { required: true, message: "请输入端口", trigger: "blur" }, |
// { required: true, message: "请输入端口", trigger: "blur" }, |
||||
// { type: "number", message: "端口必须是数字", trigger: "blur" }, |
// { type: "number", message: "端口必须是数字", trigger: "blur" }, |
||||
// ], |
// ], |
||||
domain: [{ required: false, message: "请输入域名", trigger: "blur" }], |
domain: [{ required: false, message: "请输入域名", trigger: "blur" }], |
||||
type: [{ required: true, message: "请选择类型", trigger: "blur" }], |
type: [{ required: true, message: "请选择类型", trigger: "blur" }], |
||||
localIp: [ |
localIp: [ |
||||
{ required: false, message: "请输入内网地址", trigger: "blur" }, |
{ required: false, message: "请输入内网地址", trigger: "blur" }, |
||||
{ |
{ |
||||
pattern: /^[\w-]+(\.[\w-]+)+$/, |
pattern: /^[\w-]+(\.[\w-]+)+$/, |
||||
message: "请输入正确的内网地址", |
message: "请输入正确的内网地址", |
||||
trigger: "blur" |
trigger: "blur", |
||||
} |
}, |
||||
], |
], |
||||
localPort: [ |
localPort: [ |
||||
{ required: true, message: "请输入内网端口", trigger: "blur" }, |
{ required: true, message: "请输入内网端口", trigger: "blur" }, |
||||
{ |
{ |
||||
pattern: /^(?:\d{1,5}|\d{1,5}-\d{1,5})(?:,(?:\d{1,5}|\d{1,5}-\d{1,5}))*$/, |
pattern: |
||||
message: "请输入正确的端口", |
/^(?:\d{1,5}|\d{1,5}-\d{1,5})(?:,(?:\d{1,5}|\d{1,5}-\d{1,5}))*$/, |
||||
trigger: "blur" |
message: "请输入正确的端口", |
||||
}, |
trigger: "blur", |
||||
] |
}, |
||||
}; |
], |
||||
|
}; |
||||
|
|
||||
const addProxy = async () => { |
const addProxy = async () => { |
||||
const res = await proxyStore.createFrpc() |
const res = await proxyStore.createFrpc(); |
||||
if (res.code !== 0) { |
if (res.code !== 0) { |
||||
notifyError(res.message); |
notifyError(res.message); |
||||
return; |
return; |
||||
} |
} |
||||
proxyStore.addShow = false; |
proxyStore.addShow = false; |
||||
proxyStore.resetProxyData(); |
proxyStore.resetProxyData(); |
||||
notifySuccess("代理配置已成功创建"); |
notifySuccess("代理配置已成功创建"); |
||||
await proxyStore.fetchProxies(); |
await proxyStore.fetchProxies(); |
||||
}; |
}; |
||||
|
|
||||
const update = async () => { |
const update = async () => { |
||||
await updateProxy(proxyStore.proxyData); |
await updateProxy(proxyStore.proxyData); |
||||
notifySuccess("编辑成功"); |
notifySuccess("编辑成功"); |
||||
proxyStore.addShow = false; |
proxyStore.addShow = false; |
||||
proxyStore.resetProxyData(); |
proxyStore.resetProxyData(); |
||||
proxyStore.isEditor = false; |
proxyStore.isEditor = false; |
||||
await proxyStore.fetchProxies(); |
await proxyStore.fetchProxies(); |
||||
}; |
}; |
||||
|
|
||||
const saveProxy = () => { |
const saveProxy = () => { |
||||
pwdRef.value.validate((valid: boolean) => { |
pwdRef.value.validate((valid: boolean) => { |
||||
if (valid) { |
if (valid) { |
||||
if (proxyStore.isEditor) { |
if (proxyStore.isEditor) { |
||||
update(); |
update(); |
||||
} else { |
} else { |
||||
addProxy(); |
addProxy(); |
||||
} |
} |
||||
} else { |
} else { |
||||
console.log("表单验证失败"); |
console.log("表单验证失败"); |
||||
} |
} |
||||
}); |
}); |
||||
}; |
}; |
||||
|
|
||||
|
const proxyTypes = ref([ |
||||
|
"http", |
||||
|
"https", |
||||
|
"tcp", |
||||
|
"udp", |
||||
|
"stcp", |
||||
|
"xtcp", |
||||
|
"sudp", |
||||
|
]); |
||||
|
|
||||
|
const stcpModels = ref([ |
||||
|
{ label: "访问者", value: "visitors" }, |
||||
|
{ label: "被访问者", value: "visited" }, |
||||
|
]); |
||||
|
|
||||
const proxyTypes = ref([ |
const handleSelectFile = (mod: number) => { |
||||
"http", |
OpenDirDialog().then((res: string) => { |
||||
"https", |
if (mod == 1) { |
||||
"tcp", |
proxyStore.proxyData.https2httpCaFile = res; |
||||
"udp", |
} else if (mod == 2) { |
||||
"stcp", |
proxyStore.proxyData.https2httpKeyFile = res; |
||||
"xtcp", |
} else if (mod == 3) { |
||||
"sudp", |
proxyStore.proxyData.localPath = res; |
||||
]); |
} |
||||
|
}); |
||||
const stcpModels = ref([ |
}; |
||||
{ label: "访问者", value: "visitors" }, |
|
||||
{ label: "被访问者", value: "visited" }, |
|
||||
]); |
|
||||
|
|
||||
const handleSelectFile = (mod: number) => { |
|
||||
OpenDirDialog().then((res: string) => { |
|
||||
if (mod == 1) { |
|
||||
proxyStore.proxyData.https2httpCaFile = res; |
|
||||
} else if (mod == 2) { |
|
||||
proxyStore.proxyData.https2httpKeyFile = res; |
|
||||
} else if (mod == 3) { |
|
||||
proxyStore.proxyData.localPath = res; |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
|
|
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<el-form :model="proxyStore.proxyData" :rules="proxyRules" ref="pwdRef" label-position="top"> |
<el-form |
||||
<!-- 代理类型选择 --> |
:model="proxyStore.proxyData" |
||||
<el-form-item label="代理类型:" prop="type"> |
:rules="proxyRules" |
||||
<el-radio-group v-model="proxyStore.proxyData.type"> |
ref="pwdRef" |
||||
<el-radio-button v-for="type in proxyTypes" :key="type" :value="type">{{ type }}</el-radio-button> |
label-position="top" |
||||
</el-radio-group> |
> |
||||
</el-form-item> |
<!-- 代理类型选择 --> |
||||
|
<el-form-item |
||||
<!-- HTTP/HTTPS模式 --> |
label="代理类型:" |
||||
<template v-if=" |
prop="type" |
||||
proxyStore.proxyData.type === 'http' || |
> |
||||
proxyStore.proxyData.type === 'https' || |
<el-radio-group v-model="proxyStore.proxyData.type"> |
||||
proxyStore.proxyData.type === 'tcp' || |
<el-radio-button |
||||
proxyStore.proxyData.type === 'udp' || |
v-for="type in proxyTypes" |
||||
proxyStore.proxyData.type === 'stcp' || |
:key="type" |
||||
proxyStore.proxyData.type === 'xtcp' || |
:value="type" |
||||
proxyStore.proxyData.type === 'sudp' |
>{{ type }}</el-radio-button |
||||
"> |
> |
||||
<el-form-item label="代理名称:" prop="name"> |
</el-radio-group> |
||||
<el-input v-model="proxyStore.proxyData.name" placeholder="代理名称" /> |
</el-form-item> |
||||
</el-form-item> |
|
||||
<el-row v-if=" |
|
||||
proxyStore.proxyData.type === 'http' || |
|
||||
proxyStore.proxyData.type === 'https' || |
|
||||
proxyStore.proxyData.type === 'tcp' || |
|
||||
proxyStore.proxyData.type === 'udp' |
|
||||
" :gutter="20"> |
|
||||
<el-col :span="12"> |
|
||||
<el-form-item label="内网Ip:" prop="localIp"> |
|
||||
<el-input v-model="proxyStore.proxyData.localIp" placeholder="内网Ip地址" /> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="8"> |
|
||||
<el-form-item label="端口:" prop="localPort"> |
|
||||
<el-input-number v-model="proxyStore.proxyData.localPort" :min="0" :max="65535" /> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
|
|
||||
<el-form-item v-if=" |
<!-- HTTP/HTTPS模式 --> |
||||
proxyStore.proxyData.type === 'http' || |
<template |
||||
proxyStore.proxyData.type === 'https' |
v-if=" |
||||
" label="自定义域名:" prop="customDomain"> |
proxyStore.proxyData.type === 'http' || |
||||
<el-row v-for="(_, index) in proxyStore.customDomains" :key="index" :gutter="24"> |
proxyStore.proxyData.type === 'https' || |
||||
<el-col :span="12"> |
proxyStore.proxyData.type === 'tcp' || |
||||
<el-input v-model="proxyStore.customDomains[index]" placeholder="example.com" /> |
proxyStore.proxyData.type === 'udp' || |
||||
</el-col> |
proxyStore.proxyData.type === 'stcp' || |
||||
<el-col :span="5"> |
proxyStore.proxyData.type === 'xtcp' || |
||||
<el-button type="primary" icon="Plus" style="width: 80px" |
proxyStore.proxyData.type === 'sudp' |
||||
@click="proxyStore.addCustomDomain">添加</el-button> |
" |
||||
</el-col> |
> |
||||
<el-col :span="5"> |
<el-form-item |
||||
<el-button type="primary" icon="Plus" style="width: 80px" @click=" |
label="代理名称:" |
||||
proxyStore.removeCustomDomain(index) |
prop="name" |
||||
">删除</el-button> |
> |
||||
</el-col> |
<el-input |
||||
</el-row> |
v-model="proxyStore.proxyData.name" |
||||
</el-form-item> |
placeholder="代理名称" |
||||
<el-form-item v-if=" |
/> |
||||
proxyStore.proxyData.type === 'http' || |
</el-form-item> |
||||
proxyStore.proxyData.type === 'https' |
<el-row |
||||
" label="子域名:" prop="domain"> |
v-if=" |
||||
<el-input v-model="proxyStore.proxyData.domain" placeholder="子域名" /> |
proxyStore.proxyData.type === 'http' || |
||||
</el-form-item> |
proxyStore.proxyData.type === 'https' || |
||||
<el-form-item v-if=" |
proxyStore.proxyData.type === 'tcp' || |
||||
proxyStore.proxyData.type === 'tcp' || |
proxyStore.proxyData.type === 'udp' |
||||
proxyStore.proxyData.type === 'udp' |
" |
||||
" label="外网端口:" prop="remotePort"> |
:gutter="20" |
||||
<el-input-number v-model="proxyStore.proxyData.remotePort" :min="0" :max="65535" /> |
> |
||||
</el-form-item> |
<el-col :span="12"> |
||||
<template v-if="proxyStore.proxyData.type === 'http' || |
<el-form-item |
||||
proxyStore.proxyData.type === 'https' || |
label="内网Ip:" |
||||
proxyStore.proxyData.type === 'tcp'"> |
prop="localIp" |
||||
<el-form-item label="HTTP基本认证:" prop="httpAuth"> |
> |
||||
<el-switch v-model="proxyStore.proxyData.httpAuth" /> |
<el-input |
||||
</el-form-item> |
v-model="proxyStore.proxyData.localIp" |
||||
<el-form-item v-if="proxyStore.proxyData.httpAuth" label="认证用户名:" prop="authUsername"> |
placeholder="内网Ip地址" |
||||
<el-input v-model="proxyStore.proxyData.authUsername" placeholder="username" /> |
/> |
||||
</el-form-item> |
</el-form-item> |
||||
<el-form-item v-if="proxyStore.proxyData.httpAuth" label="认证密码:" prop="authPassword"> |
</el-col> |
||||
<el-input v-model="proxyStore.proxyData.authPassword" type="password" placeholder="password" /> |
<el-col :span="8"> |
||||
</el-form-item> |
<el-form-item |
||||
</template> |
label="端口:" |
||||
<el-form-item v-if="proxyStore.proxyData.type === 'https'" label="证书文件:" prop="https2httpCaFile"> |
prop="localPort" |
||||
<el-input v-model="proxyStore.proxyData.https2httpCaFile" placeholder="点击选择证书文件" |
> |
||||
@click="handleSelectFile(1)" /> |
<el-input-number |
||||
</el-form-item> |
v-model="proxyStore.proxyData.localPort" |
||||
<el-form-item v-if="proxyStore.proxyData.type === 'https'" label="密钥文件:" prop="https2httpKeyFile"> |
:min="0" |
||||
<el-input v-model="proxyStore.proxyData.https2httpKeyFile" placeholder="点击选择密钥文件" |
:max="65535" |
||||
@click="handleSelectFile(2)" /> |
/> |
||||
</el-form-item> |
</el-form-item> |
||||
</template> |
</el-col> |
||||
<template v-if="proxyStore.proxyData.type === 'tcp'"> |
</el-row> |
||||
<el-form-item label="文件访问:" prop="staticFile"> |
|
||||
<el-switch v-model="proxyStore.proxyData.staticFile" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item v-if="proxyStore.proxyData.staticFile" label="文件夹路径:" prop="localPath"> |
|
||||
<el-input v-model="proxyStore.proxyData.localPath" placeholder="点击选择文件夹路径" |
|
||||
@click="handleSelectFile(3)" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item v-if="proxyStore.proxyData.staticFile" label="URL的前缀:" prop="stripPrefix"> |
|
||||
<el-input v-model="proxyStore.proxyData.stripPrefix" placeholder="URL的前缀" /> |
|
||||
</el-form-item> |
|
||||
</template> |
|
||||
|
|
||||
|
<el-form-item |
||||
|
v-if=" |
||||
|
proxyStore.proxyData.type === 'http' || |
||||
|
proxyStore.proxyData.type === 'https' |
||||
|
" |
||||
|
label="自定义域名:" |
||||
|
prop="customDomain" |
||||
|
> |
||||
|
<el-row |
||||
|
v-for="(_, index) in proxyStore.customDomains" |
||||
|
:key="index" |
||||
|
:gutter="24" |
||||
|
> |
||||
|
<el-col :span="12"> |
||||
|
<el-input |
||||
|
v-model="proxyStore.customDomains[index]" |
||||
|
placeholder="example.com" |
||||
|
/> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="Plus" |
||||
|
style="width: 80px" |
||||
|
@click="proxyStore.addCustomDomain" |
||||
|
>添加</el-button |
||||
|
> |
||||
|
</el-col> |
||||
|
<el-col :span="5"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="Plus" |
||||
|
style="width: 80px" |
||||
|
@click="proxyStore.removeCustomDomain(index)" |
||||
|
>删除</el-button |
||||
|
> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if=" |
||||
|
proxyStore.proxyData.type === 'http' || |
||||
|
proxyStore.proxyData.type === 'https' |
||||
|
" |
||||
|
label="子域名:" |
||||
|
prop="domain" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="proxyStore.proxyData.subdomain" |
||||
|
placeholder="子域名" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if=" |
||||
|
proxyStore.proxyData.type === 'tcp' || |
||||
|
proxyStore.proxyData.type === 'udp' |
||||
|
" |
||||
|
label="外网端口:" |
||||
|
prop="remotePort" |
||||
|
> |
||||
|
<el-input-number |
||||
|
v-model="proxyStore.proxyData.remotePort" |
||||
|
:min="0" |
||||
|
:max="65535" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<template |
||||
|
v-if=" |
||||
|
proxyStore.proxyData.type === 'http' || |
||||
|
proxyStore.proxyData.type === 'https' || |
||||
|
proxyStore.proxyData.type === 'tcp' |
||||
|
" |
||||
|
> |
||||
|
<el-form-item |
||||
|
label="HTTP基本认证:" |
||||
|
prop="BasicAuth" |
||||
|
> |
||||
|
<el-switch v-model="proxyStore.proxyData.basicAuth" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="proxyStore.proxyData.basicAuth" |
||||
|
label="认证用户名:" |
||||
|
prop="httpUser" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="proxyStore.proxyData.httpUser" |
||||
|
placeholder="username" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="proxyStore.proxyData.basicAuth" |
||||
|
label="认证密码:" |
||||
|
prop="httpPassword" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="proxyStore.proxyData.httpPassword" |
||||
|
type="password" |
||||
|
placeholder="password" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</template> |
||||
|
<el-form-item |
||||
|
v-if="proxyStore.proxyData.type === 'https'" |
||||
|
label="证书文件:" |
||||
|
prop="https2httpCaFile" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="proxyStore.proxyData.https2httpCaFile" |
||||
|
placeholder="点击选择证书文件" |
||||
|
@click="handleSelectFile(1)" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="proxyStore.proxyData.type === 'https'" |
||||
|
label="密钥文件:" |
||||
|
prop="https2httpKeyFile" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="proxyStore.proxyData.https2httpKeyFile" |
||||
|
placeholder="点击选择密钥文件" |
||||
|
@click="handleSelectFile(2)" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</template> |
||||
|
<template v-if="proxyStore.proxyData.type === 'tcp'"> |
||||
|
<el-form-item |
||||
|
label="文件访问:" |
||||
|
prop="staticFile" |
||||
|
> |
||||
|
<el-switch v-model="proxyStore.proxyData.staticFile" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="proxyStore.proxyData.staticFile" |
||||
|
label="文件夹路径:" |
||||
|
prop="localPath" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="proxyStore.proxyData.localPath" |
||||
|
placeholder="点击选择文件夹路径" |
||||
|
@click="handleSelectFile(3)" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="proxyStore.proxyData.staticFile" |
||||
|
label="URL的前缀:" |
||||
|
prop="stripPrefix" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="proxyStore.proxyData.stripPrefix" |
||||
|
placeholder="URL的前缀" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</template> |
||||
|
|
||||
<!-- STCP/XTCP/SUDP模式 --> |
<!-- STCP/XTCP/SUDP模式 --> |
||||
<template v-if=" |
<template |
||||
proxyStore.proxyData.type === 'stcp' || |
v-if=" |
||||
proxyStore.proxyData.type === 'xtcp' || |
proxyStore.proxyData.type === 'stcp' || |
||||
proxyStore.proxyData.type === 'sudp' |
proxyStore.proxyData.type === 'xtcp' || |
||||
"> |
proxyStore.proxyData.type === 'sudp' |
||||
<el-row :gutter="22"> |
" |
||||
<el-col :span="14"> |
> |
||||
<el-form-item label="STCP模式:" prop="stcpModel"> |
<el-row :gutter="22"> |
||||
<el-radio-group v-model="proxyStore.proxyData.stcpModel"> |
<el-col :span="14"> |
||||
<el-radio v-for="model in stcpModels" :key="model.value" :value="model.value">{{ model.label |
<el-form-item |
||||
}}</el-radio> |
label="STCP模式:" |
||||
</el-radio-group> |
prop="stcpModel" |
||||
</el-form-item> |
> |
||||
</el-col> |
<el-radio-group |
||||
<el-col :span="10"> |
v-model="proxyStore.proxyData.stcpModel" |
||||
<el-form-item label="共享密钥:" prop="secretKey"> |
> |
||||
<el-input v-model="proxyStore.proxyData.secretKey" type="password" placeholder="密钥" /> |
<el-radio |
||||
</el-form-item> |
v-for="model in stcpModels" |
||||
</el-col> |
:key="model.value" |
||||
</el-row> |
:value="model.value" |
||||
|
>{{ model.label }}</el-radio |
||||
|
> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<el-form-item |
||||
|
label="共享密钥:" |
||||
|
prop="secretKey" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="proxyStore.proxyData.secretKey" |
||||
|
type="password" |
||||
|
placeholder="密钥" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
<!-- 被访问者代理名称 --> |
<!-- 被访问者代理名称 --> |
||||
<el-form-item v-if=" |
<el-form-item |
||||
proxyStore.proxyData.type === 'stcp' || |
v-if=" |
||||
proxyStore.proxyData.type === 'xtcp' || |
proxyStore.proxyData.type === 'stcp' || |
||||
proxyStore.proxyData.type === 'sudp' |
proxyStore.proxyData.type === 'xtcp' || |
||||
" label="被访问者代理名称:" prop="visitedName"> |
proxyStore.proxyData.type === 'sudp' |
||||
<el-input v-model="proxyStore.proxyData.visitedName" placeholder="被访问者代理名称" /> |
" |
||||
</el-form-item> |
label="被访问者代理名称:" |
||||
|
prop="visitedName" |
||||
|
> |
||||
|
<el-input |
||||
|
v-model="proxyStore.proxyData.visitedName" |
||||
|
placeholder="被访问者代理名称" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
<template v-if=" |
<template |
||||
proxyStore.proxyData.type === 'stcp' || |
v-if=" |
||||
proxyStore.proxyData.type === 'xtcp' || |
proxyStore.proxyData.type === 'stcp' || |
||||
proxyStore.proxyData.type === 'sudp' |
proxyStore.proxyData.type === 'xtcp' || |
||||
"> |
proxyStore.proxyData.type === 'sudp' |
||||
<el-row :gutter="20"> |
" |
||||
<el-col :span="10"> |
> |
||||
<el-form-item label="绑定地址:" prop="bindAddr"> |
<el-row :gutter="20"> |
||||
<el-input v-model="proxyStore.proxyData.bindAddr" placeholder="127.0.0.1" /> |
<el-col :span="10"> |
||||
</el-form-item> |
<el-form-item |
||||
</el-col> |
label="绑定地址:" |
||||
<el-col :span="10"> |
prop="bindAddr" |
||||
<el-form-item label="绑定端口:" prop="bindPort"> |
> |
||||
<el-input-number v-model="proxyStore.proxyData.bindPort" :min="1" :max="65535" /> |
<el-input |
||||
</el-form-item> |
v-model="proxyStore.proxyData.bindAddr" |
||||
</el-col> |
placeholder="127.0.0.1" |
||||
</el-row> |
/> |
||||
</template> |
</el-form-item> |
||||
<template v-if="proxyStore.proxyData.type === 'xtcp'"> |
</el-col> |
||||
<el-row :gutter="20"> |
<el-col :span="10"> |
||||
<el-col :span="10"> |
<el-form-item |
||||
<el-form-item label="回退代理名称:" prop="fallbackTo"> |
label="绑定端口:" |
||||
<el-input v-model="proxyStore.proxyData.fallbackTo |
prop="bindPort" |
||||
" placeholder="回退代理名称" /> |
> |
||||
</el-form-item> |
<el-input-number |
||||
</el-col> |
v-model="proxyStore.proxyData.bindPort" |
||||
<el-col :span="10"> |
:min="1" |
||||
<el-form-item label="回退超时毫秒:" prop="fallbackTimeoutMs"> |
:max="65535" |
||||
<el-input-number v-model="proxyStore.proxyData |
/> |
||||
.fallbackTimeoutMs |
</el-form-item> |
||||
" :min="0" /> |
</el-col> |
||||
</el-form-item> |
</el-row> |
||||
</el-col> |
</template> |
||||
</el-row> |
<template v-if="proxyStore.proxyData.type === 'xtcp'"> |
||||
<!-- 保持隧道开启 --> |
<el-row :gutter="20"> |
||||
<el-form-item label="保持隧道开启:" prop="keepAlive"> |
<el-col :span="10"> |
||||
<el-switch v-model="proxyStore.proxyData.keepAlive" /> |
<el-form-item |
||||
</el-form-item> |
label="回退代理名称:" |
||||
</template> |
prop="fallbackTo" |
||||
</template> |
> |
||||
|
<el-input |
||||
|
v-model="proxyStore.proxyData.fallbackTo" |
||||
|
placeholder="回退代理名称" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<el-form-item |
||||
|
label="回退超时毫秒:" |
||||
|
prop="fallbackTimeoutMs" |
||||
|
> |
||||
|
<el-input-number |
||||
|
v-model="proxyStore.proxyData.fallbackTimeoutMs" |
||||
|
:min="0" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<!-- 保持隧道开启 --> |
||||
|
<el-form-item |
||||
|
label="保持隧道开启:" |
||||
|
prop="keepAlive" |
||||
|
> |
||||
|
<el-switch v-model="proxyStore.proxyData.keepAlive" /> |
||||
|
</el-form-item> |
||||
|
</template> |
||||
|
</template> |
||||
|
|
||||
<!-- 保存和取消按钮 --> |
<!-- 保存和取消按钮 --> |
||||
<el-row justify="start"> |
<el-row justify="start"> |
||||
<el-button type="primary" @click="saveProxy" style="width: 100px"> |
<el-button |
||||
{{ proxyStore.isEditor ? '编辑' : '保存' }} |
type="primary" |
||||
</el-button> |
@click="saveProxy" |
||||
<el-button type="primary" style="width: 100px" @click="proxyDialogShow = false">取消</el-button> |
style="width: 100px" |
||||
</el-row> |
> |
||||
</el-form> |
{{ proxyStore.isEditor ? "编辑" : "保存" }} |
||||
</template> |
</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
style="width: 100px" |
||||
|
@click="proxyDialogShow = false" |
||||
|
>取消</el-button |
||||
|
> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
Loading…
Reference in new issue