Browse Source

Merge branch 'master' of https://gitee.com/godoos/godoos

master
godo 5 months ago
parent
commit
5295344ad1
  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: [ https2httpKeyFile: [
{ required: false, message: "请选择密钥文件", trigger: "blur" }, { 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 () => { const addProxy = async () => {
@ -285,15 +321,14 @@
> >
<el-input-number <el-input-number
v-model="proxyStore.proxyData.remotePort" v-model="proxyStore.proxyData.remotePort"
:min="0" :min="1"
:max="65535" :max="65535"
/> />
</el-form-item> </el-form-item>
<template <template
v-if=" v-if="
proxyStore.proxyData.type === 'http' || proxyStore.proxyData.type === 'http' ||
proxyStore.proxyData.type === 'https' || proxyStore.proxyData.type === 'https'
proxyStore.proxyData.type === 'tcp'
" "
> >
<el-form-item <el-form-item
@ -356,7 +391,7 @@
</el-form-item> </el-form-item>
</template> </template>
</template> </template>
<template v-if="proxyStore.proxyData.type === 'tcp'"> <!-- <template v-if="proxyStore.proxyData.type === 'tcp'">
<el-form-item <el-form-item
label="文件访问:" label="文件访问:"
prop="staticFile" prop="staticFile"
@ -384,7 +419,7 @@
placeholder="URL的前缀" placeholder="URL的前缀"
/> />
</el-form-item> </el-form-item>
</template> </template> -->
<!-- STCP/XTCP/SUDP模式 --> <!-- STCP/XTCP/SUDP模式 -->
<template <template
@ -428,11 +463,7 @@
<!-- 被访问者代理名称 --> <!-- 被访问者代理名称 -->
<el-form-item <el-form-item
v-if=" v-if="proxyStore.proxyData.stcpModel == 'visitors'"
proxyStore.proxyData.type === 'stcp' ||
proxyStore.proxyData.type === 'xtcp' ||
proxyStore.proxyData.type === 'sudp'
"
label="被访问者代理名称:" label="被访问者代理名称:"
prop="visitedName" prop="visitedName"
> >
@ -442,13 +473,7 @@
/> />
</el-form-item> </el-form-item>
<template <template v-if="proxyStore.proxyData.stcpModel == 'visitors'">
v-if="
proxyStore.proxyData.type === 'stcp' ||
proxyStore.proxyData.type === 'xtcp' ||
proxyStore.proxyData.type === 'sudp'
"
>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="10"> <el-col :span="10">
<el-form-item <el-form-item
@ -475,7 +500,38 @@
</el-col> </el-col>
</el-row> </el-row>
</template> </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-row :gutter="20">
<el-col :span="10"> <el-col :span="10">
<el-form-item <el-form-item
@ -522,7 +578,7 @@
<el-button <el-button
type="primary" type="primary"
style="width: 100px" style="width: 100px"
@click="proxyDialogShow = false" @click="proxyStore.addShow = false"
>取消</el-button >取消</el-button
> >
</el-row> </el-row>

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

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

3
frontend/src/stores/proxy.ts

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

Loading…
Cancel
Save