outman/frpc-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ 增加对udp的支持

Browse Source
This commit is contained in:
刘嘉伟 2024-08-11 15:12:45 +08:00
parent ff1b7fbb35
commit b2f7d8adb3
2 changed files with 96 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
electron/api/frpc.ts
View File

@ -49,6 +49,7 @@ localPort = ${m.localPort}
`; `;
switch (m.type) { switch (m.type) {
case "tcp": case "tcp":
case "udp":
toml += `remotePort = ${m.remotePort}`; toml += `remotePort = ${m.remotePort}`;
break; break;
case "http": case "http":
@ -117,6 +118,7 @@ local_port = ${m.localPort}
`; `;
switch (m.type) { switch (m.type) {
case "tcp": case "tcp":
case "udp":
ini += `remote_port = ${m.remotePort}`; ini += `remote_port = ${m.remotePort}`;
break; break;
case "http": case "http":

68
src/views/proxy/index.vue
View File

@ -1,10 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue"; import {defineComponent, onMounted, onUnmounted, reactive, ref} from "vue";
import { Icon } from "@iconify/vue"; import {Icon} from "@iconify/vue";
import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue"; import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
import { ElMessage, FormInstance, FormRules } from "element-plus"; import {ElMessage, FormInstance, FormRules} from "element-plus";
import { ipcRenderer } from "electron"; import {ipcRenderer} from "electron";
import { clone } from "@/utils/clone"; import {clone} from "@/utils/clone";
defineComponent({ defineComponent({
name: "Proxy" name: "Proxy"
@ -58,24 +58,24 @@ const editForm = ref<Proxy>({
*/ */
const editFormRules = reactive<FormRules>({ const editFormRules = reactive<FormRules>({
name: [ name: [
{ required: true, message: "请输入名称", trigger: "blur" }, {required: true, message: "请输入名称", trigger: "blur"},
// { // {
// pattern: /^[a-zA-Z]+$/, // pattern: /^[a-zA-Z]+$/,
// message: "名称只能是英文", // message: "名称只能是英文",
// trigger: "blur" // trigger: "blur"
// } // }
], ],
type: [{ required: true, message: "请选择类型", trigger: "blur" }], type: [{required: true, message: "请选择类型", trigger: "blur"}],
localIp: [ localIp: [
{ required: true, message: "请输入内网地址", trigger: "blur" }, {required: true, message: "请输入内网地址", trigger: "blur"},
{ {
pattern: /^[\w-]+(\.[\w-]+)+$/, pattern: /^[\w-]+(\.[\w-]+)+$/,
message: "请输入正确的内网地址", message: "请输入正确的内网地址",
trigger: "blur" trigger: "blur"
} }
], ],
localPort: [{ required: true, message: "请输入本地端口", trigger: "blur" }], localPort: [{required: true, message: "请输入本地端口", trigger: "blur"}],
remotePort: [{ required: true, message: "请输入远程端口", trigger: "blur" }] remotePort: [{required: true, message: "请输入远程端口", trigger: "blur"}]
}); });
/** /**
@ -152,7 +152,7 @@ const handleResetForm = () => {
const handleInitHook = () => { const handleInitHook = () => {
const InsertOrUpdateHook = (message: string, args: any) => { const InsertOrUpdateHook = (message: string, args: any) => {
loading.value.form--; loading.value.form--;
const { err } = args; const {err} = args;
if (!err) { if (!err) {
ElMessage({ ElMessage({
type: "success", type: "success",
@ -185,13 +185,13 @@ const handleInitHook = () => {
// }); // });
ipcRenderer.on("Proxy.getProxys.hook", (event, args) => { ipcRenderer.on("Proxy.getProxys.hook", (event, args) => {
loading.value.list--; loading.value.list--;
const { err, data } = args; const {err, data} = args;
if (!err) { if (!err) {
proxys.value = data; proxys.value = data;
} }
}); });
ipcRenderer.on("Proxy.deleteProxyById.hook", (event, args) => { ipcRenderer.on("Proxy.deleteProxyById.hook", (event, args) => {
const { err, data } = args; const {err, data} = args;
if (!err) { if (!err) {
handleLoadProxys(); handleLoadProxys();
ElMessage({ ElMessage({
@ -236,7 +236,7 @@ onUnmounted(() => {
class="cursor-pointer h-[36px] w-[36px] bg-[#5f3bb0] rounded text-white flex justify-center items-center" class="cursor-pointer h-[36px] w-[36px] bg-[#5f3bb0] rounded text-white flex justify-center items-center"
@click="handleOpenInsert" @click="handleOpenInsert"
> >
<Icon icon="material-symbols:add" /> <Icon icon="material-symbols:add"/>
</div> </div>
</breadcrumb> </breadcrumb>
<div class="app-container-breadcrumb" v-loading="loading.list > 0"> <div class="app-container-breadcrumb" v-loading="loading.list > 0">
@ -263,13 +263,13 @@ onUnmounted(() => {
</div> </div>
<div class="h-12 relative"> <div class="h-12 relative">
<div class="text-sm font-bold">{{ proxy.name }}</div> <div class="text-sm font-bold">{{ proxy.name }}</div>
<!-- <el-tag--> <!-- <el-tag-->
<!-- size="small"--> <!-- size="small"-->
<!-- class="absolute bottom-0"--> <!-- class="absolute bottom-0"-->
<!-- type="success"--> <!-- type="success"-->
<!-- effect="plain"--> <!-- effect="plain"-->
<!-- >正常--> <!-- >正常-->
<!-- </el-tag>--> <!-- </el-tag>-->
</div> </div>
</div> </div>
<div> <div>
@ -277,7 +277,7 @@ onUnmounted(() => {
<a href="javascript:void(0)" <a href="javascript:void(0)"
class="text-xl text-[#ADADAD] hover:text-[#5A3DAA]" class="text-xl text-[#ADADAD] hover:text-[#5A3DAA]"
> >
<Icon icon="material-symbols:more-vert" /> <Icon icon="material-symbols:more-vert"/>
</a> </a>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
@ -323,7 +323,7 @@ onUnmounted(() => {
v-else v-else
class="w-full h-full bg-white rounded p-2 overflow-hidden drop-shadow-xl flex justify-center items-center" class="w-full h-full bg-white rounded p-2 overflow-hidden drop-shadow-xl flex justify-center items-center"
> >
<el-empty description="暂无代理" /> <el-empty description="暂无代理"/>
</div> </div>
</div> </div>
@ -344,20 +344,22 @@ onUnmounted(() => {
<el-col :span="24"> <el-col :span="24">
<el-form-item label="代理类型：" prop="proxyType"> <el-form-item label="代理类型：" prop="proxyType">
<el-radio-group v-model="editForm.type"> <el-radio-group v-model="editForm.type">
<el-radio label="http" model-value="http" /> <el-radio label="http" model-value="http"/>
<el-radio label="https" model-value="https" /> <el-radio label="https" model-value="https"/>
<el-radio label="tcp" model-value="tcp" /> <el-radio label="tcp" model-value="tcp"/>
<el-radio label="udp" model-value="udp"/>
<!-- <el-radio label="stcp" model-value="stcp" />-->
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="代理名称：" prop="proxyName"> <el-form-item label="代理名称：" prop="proxyName">
<el-input v-model="editForm.name" placeholder="代理名称" /> <el-input v-model="editForm.name" placeholder="代理名称"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<el-form-item label="内网地址：" prop="localIp"> <el-form-item label="内网地址：" prop="localIp">
<el-input v-model="editForm.localIp" placeholder="127.0.0.1" /> <el-input v-model="editForm.localIp" placeholder="127.0.0.1"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
@ -372,7 +374,7 @@ onUnmounted(() => {
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<template v-if="editForm.type === 'tcp'"> <template v-if="editForm.type === 'tcp' || editForm.type === 'udp'">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="外网端口：" prop="remotePort"> <el-form-item label="外网端口：" prop="remotePort">
<el-input-number <el-input-number
@ -422,7 +424,7 @@ onUnmounted(() => {
plain plain
@click="handleAddDomain" @click="handleAddDomain"
> >
<Icon icon="material-symbols:add" /> <Icon icon="material-symbols:add"/>
</el-button> </el-button>
<el-button <el-button
type="danger" type="danger"
@ -430,7 +432,7 @@ onUnmounted(() => {
@click="handleDeleteDomain(di)" @click="handleDeleteDomain(di)"
:disabled="editForm.customDomains.length === 1" :disabled="editForm.customDomains.length === 1"
> >
<Icon icon="material-symbols:delete-rounded" /> <Icon icon="material-symbols:delete-rounded"/>
</el-button> </el-button>
<!-- <div class="domain-input-button !bg-[#d3585b]">--> <!-- <div class="domain-input-button !bg-[#d3585b]">-->
<!-- <Icon icon="material-symbols:delete-rounded" />--> <!-- <Icon icon="material-symbols:delete-rounded" />-->
@ -467,6 +469,10 @@ onUnmounted(() => {
background: #5f3bb0; background: #5f3bb0;
} }
.udp {
background: #5ec7fe;
}
.domain-input { .domain-input {
width: calc(100% - 115px); width: calc(100% - 115px);
} }