Browse Source

add:frpc

master
秋田弘 5 months ago
parent
commit
e8e010c430
  1. 94
      frontend/src/components/setting/FrpcEdit.vue
  2. 191
      frontend/src/components/setting/NetProxy.vue
  3. 3
      frontend/src/stores/proxy.ts

94
frontend/src/components/setting/FrpcEdit.vue

@ -76,6 +76,42 @@
https2httpKeyFile: [
{ required: false, message: "请选择密钥文件", trigger: "blur" },
],
remotePort: [
{ required: true, message: "请输入外网端口", trigger: "blur" },
{
type: "number",
min: 1,
max: 65535,
message: "外网端口必须在1到65535之间",
trigger: "blur",
},
],
// 访
visitedName: [
{
required: true,
message: "请输入被访问者代理名称",
trigger: "blur",
},
],
bindAddr: [
{ required: true, message: "请输入绑定地址", trigger: "blur" },
{
pattern: /^[\w-]+(\.[\w-]+)+$/,
message: "请输入正确的绑定地址",
trigger: "blur",
},
],
bindPort: [
{ required: true, message: "请输入绑定端口", trigger: "blur" },
{
type: "number",
min: 1,
max: 65535,
message: "绑定端口必须在1到65535之间",
trigger: "blur",
},
],
};
const addProxy = async () => {
@ -285,15 +321,14 @@
>
<el-input-number
v-model="proxyStore.proxyData.remotePort"
:min="0"
:min="1"
:max="65535"
/>
</el-form-item>
<template
v-if="
proxyStore.proxyData.type === 'http' ||
proxyStore.proxyData.type === 'https' ||
proxyStore.proxyData.type === 'tcp'
proxyStore.proxyData.type === 'https'
"
>
<el-form-item
@ -356,7 +391,7 @@
</el-form-item>
</template>
</template>
<template v-if="proxyStore.proxyData.type === 'tcp'">
<!-- <template v-if="proxyStore.proxyData.type === 'tcp'">
<el-form-item
label="文件访问:"
prop="staticFile"
@ -384,7 +419,7 @@
placeholder="URL的前缀"
/>
</el-form-item>
</template>
</template> -->
<!-- STCP/XTCP/SUDP模式 -->
<template
@ -428,11 +463,7 @@
<!-- 被访问者代理名称 -->
<el-form-item
v-if="
proxyStore.proxyData.type === 'stcp' ||
proxyStore.proxyData.type === 'xtcp' ||
proxyStore.proxyData.type === 'sudp'
"
v-if="proxyStore.proxyData.stcpModel == 'visitors'"
label="被访问者代理名称:"
prop="visitedName"
>
@ -442,13 +473,7 @@
/>
</el-form-item>
<template
v-if="
proxyStore.proxyData.type === 'stcp' ||
proxyStore.proxyData.type === 'xtcp' ||
proxyStore.proxyData.type === 'sudp'
"
>
<template v-if="proxyStore.proxyData.stcpModel == 'visitors'">
<el-row :gutter="20">
<el-col :span="10">
<el-form-item
@ -475,7 +500,38 @@
</el-col>
</el-row>
</template>
<template v-if="proxyStore.proxyData.type === 'xtcp'">
<template v-if="proxyStore.proxyData.stcpModel !== 'visitors'">
<el-row :gutter="20">
<!-- 内网地址 -->
<el-col :span="10">
<el-form-item
label="内网地址:"
prop="localIp"
>
<el-input v-model="proxyStore.proxyData.localIp" />
</el-form-item>
</el-col>
<!-- 内网端口 -->
<el-col :span="10">
<el-form-item
label="内网端口:"
prop="localPort"
>
<el-input-number
v-model="proxyStore.proxyData.localPort"
/>
</el-form-item>
</el-col>
</el-row>
</template>
<template
v-if="
proxyStore.proxyData.type === 'xtcp' &&
proxyStore.proxyData.stcpModel == 'visitors'
"
>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item
@ -522,7 +578,7 @@
<el-button
type="primary"
style="width: 100px"
@click="proxyDialogShow = false"
@click="proxyStore.addShow = false"
>取消</el-button
>
</el-row>

191
frontend/src/components/setting/NetProxy.vue

@ -1,92 +1,157 @@
<script setup lang="ts">
import { useProxyStore } from "@/stores/proxy";
import { notifyError, notifySuccess } from "@/util/msg";
import { Plus, Setting, VideoPlay, VideoPause, Money } from "@element-plus/icons-vue";
import { onMounted } from "vue";
const proxyStore = useProxyStore();
const {
fetchProxies,
fetchProxy,
deleteProxyById,
} = proxyStore;
import { useProxyStore } from "@/stores/proxy";
import { notifyError, notifySuccess } from "@/util/msg";
import {
Plus,
Setting,
VideoPause,
VideoPlay,
} from "@element-plus/icons-vue";
import { onMounted } from "vue";
const proxyStore = useProxyStore();
const { fetchProxies, fetchProxy, deleteProxyById } = proxyStore;
const editProxyBefore = async (id: number) => {
if (!id) {
notifyError("请选择要编辑的代理");
return;
}
//console.log(id)
await fetchProxy(id);
proxyStore.addShow = true;
proxyStore.isEditor = true;
};
const editProxyBefore = async (id: number) => {
if (!id) {
notifyError("请选择要编辑的代理");
return
}
//console.log(id)
await fetchProxy(id);
proxyStore.addShow = true;
proxyStore.isEditor = true;
};
const deleteProxy = async (id: number) => {
if (!id) {
notifyError("请选择要删除的代理");
return
}
const res = await deleteProxyById(id);
if (res) {
notifySuccess("删除成功");
} else {
notifyError("删除失败");
}
};
const addProxy = () => {
proxyStore.addShow = true;
proxyStore.resetProxyData();
proxyStore.isEditor = false;
};
onMounted(async () => {
await fetchProxies();
});
const deleteProxy = async (id: number) => {
if (!id) {
notifyError("请选择要删除的代理");
return;
}
const res = await deleteProxyById(id);
if (res) {
notifySuccess("删除成功");
} else {
notifyError("删除失败");
}
};
const addProxy = () => {
proxyStore.addShow = true;
proxyStore.resetProxyData();
proxyStore.isEditor = false;
};
onMounted(async () => {
await fetchProxies();
});
</script>
<template>
<div>
<el-row justify="end">
<el-button :type="proxyStore.status ? 'primary' : 'success'" :icon="VideoPause" circle @click="proxyStore.stopFrpc" />
<el-button :type="proxyStore.status ? 'success' : 'primary'" :icon="VideoPlay" circle @click="proxyStore.startFrpc" />
<el-button type="primary" :icon="Setting" circle @click="proxyStore.settingShow = true" />
<el-button type="primary" :icon="Plus" circle @click="addProxy" />
<el-button
:type="proxyStore.status ? 'primary' : 'success'"
:icon="VideoPause"
circle
@click="proxyStore.stopFrpc"
/>
<el-button
:type="proxyStore.status ? 'success' : 'primary'"
:icon="VideoPlay"
circle
@click="proxyStore.startFrpc"
/>
<el-button
type="primary"
:icon="Setting"
circle
@click="proxyStore.settingShow = true"
/>
<el-button
type="primary"
:icon="Plus"
circle
@click="addProxy"
/>
</el-row>
<el-table :data="proxyStore.proxies" style="width: 98%; border: none">
<el-table-column prop="name" label="名称" width="100" />
<el-table-column prop="type" label="类型" width="80" />
<el-table-column prop="localPort" label="本地端口" width="80" />
<el-table-column prop="localIp" label="本地Ip" />
<el-table
:data="proxyStore.proxies"
style="width: 98%; border: none"
>
<el-table-column
prop="name"
label="名称"
width="100"
/>
<el-table-column
prop="type"
label="类型"
width="80"
/>
<el-table-column
prop="localPort"
label="本地端口"
width="80"
/>
<el-table-column
prop="localIp"
label="本地Ip"
/>
<el-table-column label="操作">
<template #default="scope">
<el-row :gutter="24" justify="start">
<el-row
:gutter="24"
justify="start"
>
<el-col :span="10">
<el-button size="small" @click="editProxyBefore(scope.row.id)">编辑</el-button>
<el-button
size="small"
@click="editProxyBefore(scope.row.id)"
>编辑</el-button
>
</el-col>
<el-col :span="10">
<el-button size="small" type="danger" @click="deleteProxy(scope.row.id)">删除</el-button>
<el-button
size="small"
type="danger"
@click="deleteProxy(scope.row.id)"
>删除</el-button
>
</el-col>
</el-row>
</template>
</el-table-column>
</el-table>
<el-pagination v-if="proxyStore.page.total > proxyStore.page.size" layout="prev, pager, next"
:page-size="proxyStore.page.size" v-model:current-page="proxyStore.page.current"
:total="proxyStore.page.total" @current-change="proxyStore.pageChange" />
<el-drawer v-model="proxyStore.settingShow" title="编辑配置" direction="rtl" size="80%">
<el-pagination
v-if="proxyStore.page.total > proxyStore.page.size"
layout="prev, pager, next"
:page-size="proxyStore.page.size"
v-model:current-page="proxyStore.page.current"
:total="proxyStore.page.total"
@current-change="proxyStore.pageChange"
/>
<el-drawer
v-model="proxyStore.settingShow"
title="编辑配置"
direction="rtl"
size="80%"
>
<FrpcConfig />
</el-drawer>
<!-- 代理配置抽屉 -->
<el-drawer v-model="proxyStore.addShow" :title="proxyStore.isEditor ? '编辑代理' : '添加代理'" direction="rtl"
size="80%" @close="proxyStore.resetProxyData">
<el-drawer
v-model="proxyStore.addShow"
:title="proxyStore.isEditor ? '编辑代理' : '添加代理'"
direction="rtl"
size="80%"
@close="proxyStore.resetProxyData"
>
<FrpcEdit />
</el-drawer>
</div>
</template>
<style scoped>
:deep(.el-drawer) {
width: 60% !important;
}
:deep(.el-drawer) {
width: 60% !important;
}
</style>

3
frontend/src/stores/proxy.ts

@ -68,7 +68,7 @@ export const useProxyStore = defineStore('proxyStore', () => {
https2httpCaFile: "",
https2httpKeyFile: "",
remotePort: 0,
stcpModel: "",
stcpModel: "visitors",
secretKey: "",
visitedName: "",
bindAddr: "",
@ -95,6 +95,7 @@ export const useProxyStore = defineStore('proxyStore', () => {
};
const resetProxyData = () => {
proxyData.value = createNewProxyData();
customDomains.value = [""];
};
const createFrpc = async () => {

Loading…
Cancel
Save