ljydlv
/
sawAdmin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加VPN服务器配置管理， 未完善路由等配置

This commit is contained in:
lijun 2025-12-16 20:58:43 +08:00
parent 2a7cf2dedb
commit 8092709950
7 changed files with 634 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -30,6 +30,7 @@ declare module '@vue/runtime-core' {
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']

70
src/api/vpn.ts Normal file
View File

@ -0,0 +1,70 @@
import request from '@/utils/user_center_request';
// myVPNGroup := router.Group("/vpn")
// myVPNGroup.POST("/server_register", ServerRegisterHandler)
// myVPNGroup.GET("/get_support_vpn_server", GetSupportVPNServerHandler)
// myVPNGroup.POST("/update_client_status", UpdateClientStatusHandler)
// myVPNGroup.POST("/update_server_status", UpdateServerStatusHandler)
// myVPNGroup.GET("/get_client_config", GetClientConfigHandler) //prepare online
// myVPNGroup.GET("/get_server_config", GetServerConfigHandler)
// myVPNGroup.PUT("/client_heartbeat", ClientHeartbeatHandler)
// myVPNGroup.GET("/get_vpn_user", GetVPNUserHandler)
// myVPNGroup.POST("/set_vpn_server_config", SetVPNServerConfigHandler)
// myVPNGroup.GET("/get_vpn_server_config", GetVPNServerConfigHandler)
// myVPNGroup.GET("/get_server_online", GetVPNServerOnlineListHandler)
// myVPNGroup.DELETE("/delete_vpn_server", DeleteVPNServerHandler)
// myVPNGroup.POST("/set_vpn_ip_pool", SetVPNPoolHandler)
// myVPNGroup.GET("/get_vpn_ip_pool", GetVPNAddressPoolHandler)
// myVPNGroup.DELETE("/delete_vpn_ip_pool", DeleteVPNPoolHandler)
// myVPNGroup.POST("/set_vpn_tunnel", SetVPNTunnelHandler)
// myVPNGroup.DELETE("/delete_vpn_tunnel", DeleteVPNTunnelHandler)
// myVPNGroup.GET("/get_vpn_tunnel_config", GetVPNTunnelConfigHandler)
export const GetSupportVPNServerHandler = () => {
return request.get('/vpn/get_support_vpn_server')
}
export const GetVPNUserHandler = () => {
return request.get('/vpn/get_vpn_user')
}
export const GetVPNAddressPoolHandler = () => {
return request.get('/vpn/get_vpn_ip_pool')
}
export const SetVPNAddressPoolHandler = (Data) => {
return request.post('/vpn/set_vpn_ip_pool', Data)
}
/**
* 获取VPN隧道配置信息
* @returns {Promise} 包含VPN隧道配置信息的Promise对象
*/
export const GetVPNTunnelConfigHandler = () => {
return request.get('/vpn/get_vpn_tunnel_config')
}
export const SetVPNTunnelHandler = (Data) => {
return request.post('/vpn/set_vpn_tunnel', Data)
}
export const GetVPNServerOnlineListHandler = () => {
return request.get('/vpn/get_server_online')
}
export const GetVPNServerConfigHandler = () => {
return request.get('/vpn/get_vpn_server_config')
}
export const SetVPNServerConfigHandler = (Data) => {
return request.post('/vpn/set_vpn_server_config', Data)
}
export const DeleteVPNServerHandler = (Data) => {
return request.delete('/vpn/delete_vpn_server', { data: Data })
}

14
src/components/menu.ts
View File

@ -73,6 +73,20 @@ export const menuData: Menus[] = [
}
],
},
{
id: '75',
title: 'VPN服务器',
index: '75',
icon: 'Lock',
children: [
{
id: '751',
pid: '75',
index: '/vpn-server-config',
title: 'VPN服务器配置',
}
],
},
{
id: '2',
title: '组件',

10
src/router/index.ts
View File

@ -127,6 +127,16 @@ const routes: RouteRecordRaw[] = [
component: () => import(/* webpackChunkName: "system-user" */ '../views/system/manage-model-policy.vue'),
},
{
path: '/vpn-server-config',
name: 'vpn-server-config',
meta: {
title: 'VPN服务器配置',
permiss: '751',
},
component: () => import(/* webpackChunkName: "system-user" */ '../views/system/vpn-server-config.vue'),
},
{
path: '/callback',
name: 'callback',

4
src/store/permiss.ts
View File

@ -60,8 +60,10 @@ export const usePermissStore = defineStore("permiss", {
"72", //数据库管理工具
"73", //权限策略管理
"74", //模型策略管理
"75", //VPN服务器配置管理
"751", //VPN服务器配置管理
],
user: ["0", "8", "7", "9", "51" ,"53","55" ,"56", "57", "58", "59", "61", "71"],
user: ["0", "8", "7", "9", "51" ,"53","55" ,"56", "57", "58", "59", "61", "71", "75"],
},
};
},

1
src/views/pages/login.vue
View File

@ -307,6 +307,7 @@ onMounted(async () => {
if (queryParams.code){
code.value = queryParams.code as string;
}
console.log("query:", queryParams);
const token = localStorage.getItem("token") || "";
if (token !== "") {

535
src/views/system/vpn-server-config.vue Normal file
View File

@ -0,0 +1,535 @@
<template>
<div class="vpn-server-config">
<el-row :gutter="20">
<!-- 左侧服务器列表 -->
<el-col :span="8">
<el-card shadow="hover">
<div class="server-list">
<div
v-for="server in serverList"
:key="server.server_id"
class="server-item"
:class="{ active: selectedServer?.server_id === server.server_id }"
@click="selectServer(server)"
>
<div class="server-info">
<div class="server-name">{{ server.name }}</div>
<div class="server-ip">{{ server.server_ip }}</div>
</div>
<div class="server-actions">
<el-button type="danger" size="small" text @click.stop="deleteServer(server.server_id)">
删除
</el-button>
</div>
</div>
<el-empty v-if="serverList.length === 0" description="暂无服务器配置" />
</div>
</el-card>
</el-col>
<!-- 右侧编辑表单 -->
<el-col :span="16">
<el-card shadow="hover" v-if="selectedServer">
<template #header>
<div class="card-header">
<span>编辑服务器配置</span>
<el-button type="success" @click="saveConfig">保存配置</el-button>
</div>
</template>
<el-form :model="selectedServer" label-width="120px" size="default">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="服务器名称">
<el-input v-model="selectedServer.name" placeholder="请输入服务器名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="服务器ID">
<el-input v-model="selectedServer.server_id" placeholder="请输入服务器ID" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="服务器IP">
<el-input v-model="selectedServer.server_ip" placeholder="请输入服务器IP" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="UDP端口">
<el-input-number v-model="selectedServer.udp_port" :min="1" :max="65535" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="TCP端口">
<el-input-number v-model="selectedServer.tcp_port" :min="1" :max="65535" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="协议类型">
<el-select v-model="selectedServer.protocol" placeholder="请选择协议">
<el-option label="TCP" :value="1" />
<el-option label="UDP" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="IP类型">
<el-select v-model="selectedServer.ip_type" placeholder="请选择IP类型">
<el-option label="IPv4" :value="4" />
<el-option label="IPv6" :value="6" />
<el-option label="IPv4/IPv6" :value="46" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="DNS服务器">
<el-input v-model="selectedServer.dns_server" placeholder="请输入DNS服务器" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="加密算法">
<el-select v-model="selectedServer.encryption" placeholder="请选择加密算法">
<el-option label="AES-128-GCM" value="aes-128-gcm" />
<el-option label="AES-192-GCM" value="aes-192-gcm" />
<el-option label="AES-256-GCM" value="aes-256-gcm" />
<el-option label="SM4-GCM" value="SM4-GCM" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="摘要算法">
<el-select v-model="selectedServer.hash" placeholder="请选择摘要算法">
<el-option label="SHA256" value="sha256" />
<el-option label="SHA512" value="sha512" />
<el-option label="MD5" value="md5" />
<el-option label="SM3" value="sm3" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="最大设备数">
<el-input-number v-model="selectedServer.user_max_device" :min="1" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="空闲时长(秒)">
<el-input-number v-model="selectedServer.duration_time" :min="1" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="IPv4地址池">
<el-select
v-model="selectedServer.ipv4_address_pool"
placeholder="请选择IPv4地址池"
clearable
filterable
>
<el-option
v-for="pool in addressPools"
:key="pool.pool_name"
:label="`${pool.pool_name} (${pool.config.ipv4_address_pool.start_ip} - ${pool.config.ipv4_address_pool.end_ip}/${pool.config.ipv4_address_pool.prefix})`"
:value="pool.pool_name"
/>
</el-select>
</el-form-item>
<el-form-item label="IPv6地址池">
<el-select
v-model="selectedServer.ipv6_address_pool"
placeholder="请选择IPv6地址池"
clearable
filterable
>
<el-option
v-for="pool in addressPools"
:key="pool.pool_name"
:label="`${pool.pool_name} (${pool.config.ipv6_address_pool.start_ip} - ${pool.config.ipv6_address_pool.end_ip}/${pool.config.ipv6_address_pool.prefix})`"
:value="pool.pool_name"
/>
</el-select>
</el-form-item>
<el-form-item label="隧道类型">
<el-select
v-model="selectedServer.tunnel"
placeholder="请选择隧道类型"
clearable
filterable
>
<el-option
v-for="tunnel in tunnelConfigs"
:key="tunnel.tunnel_name"
:label="`${tunnel.tunnel_name} (MTU: IPv4=${tunnel.config.ipv4_mtu}, IPv6=${tunnel.config.ipv6_mtu}, 限速: ↑${tunnel.config.upload_limit}Kbps/↓${tunnel.config.download_limit}Kbps)`"
:value="tunnel.tunnel_name"
/>
</el-select>
</el-form-item>
<el-form-item label="服务器信息">
<el-input
v-model="selectedServer.server_info"
type="textarea"
:rows="3"
placeholder="请输入服务器信息"
/>
</el-form-item>
<el-form-item label="允许用户">
<el-select
v-model="user_select_ids"
placeholder="请选择允许的用户"
multiple
filterable
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="3"
>
<el-option
v-for="user in user_select_opts"
:key="user.value"
:label="user.label"
:value="user.value"
/>
</el-select>
</el-form-item>
</el-form>
</el-card>
<el-card shadow="hover" v-else>
<el-empty description="请选择要编辑的服务器" />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {getAllDefaultUsers} from '@/api/user';
import { GetVPNServerConfigHandler, SetVPNServerConfigHandler, DeleteVPNServerHandler, GetVPNAddressPoolHandler, GetVPNTunnelConfigHandler } from '@/api/vpn';
interface UserID {
id: number;
}
interface StringValue {
value: string;
}
interface UserIDBindIP {
user_id: number;
ip: string;
}
interface AddressPool {
start_ip: string;
end_ip: string;
prefix: number;
dns_ip: StringValue[];
ip_bind: UserIDBindIP[];
}
interface AddressPoolConfig {
ipv4_address_pool: AddressPool;
ipv6_address_pool: AddressPool;
}
interface AddressPoolRequest {
pool_name: string;
config: AddressPoolConfig;
}
interface TunnelConfig {
tunnel_name: string;
auto_ipv4: boolean;
auto_ipv6: boolean;
ipv4_address: string;
ipv6_address: string;
ipv4_mtu: number;
ipv6_mtu: number;
upload_limit: number;
download_limit: number;
}
interface TunnelRequestAndResponse {
tunnel_name: string;
config: TunnelConfig;
}
interface VPNRouter {
network: string;
gateway: string;
}
interface ServerConfig {
name: string;
server_id: string;
server_ip: string;
server_info: string;
udp_port: number;
tcp_port: number;
protocol: number;
ip_type: number;
ipv4_address_pool: string;
ipv6_address_pool: string;
dns_server: string;
tunnel: string;
allow_user_id: UserID[];
encryption: string;
hash: string;
user_max_device: number;
duration_time: number;
ipv4_router: VPNRouter[];
ipv6_router: VPNRouter[];
}
const serverList = ref<ServerConfig[]>([]);
const selectedServer = ref<ServerConfig | null>(null);
const addressPools = ref<AddressPoolRequest[]>([]);
const tunnelConfigs = ref<TunnelRequestAndResponse[]>([]);
const user_select_opts = ref<Array<{value: number, label: string}>>([]);
const user_select_ids = ref<number[]>([]);
// 获取服务器配置列表
const getServerConfigs = async () => {
try {
const response = await GetVPNServerConfigHandler();
serverList.value = response.data;
} catch (error) {
ElMessage.error('获取服务器配置失败');
console.error(error);
}
};
// 获取地址池列表
const getAddressPools = async () => {
try {
const response = await GetVPNAddressPoolHandler();
addressPools.value = response.data;
} catch (error) {
ElMessage.error('获取地址池列表失败');
console.error(error);
}
};
// 获取隧道配置列表
const getTunnelConfigs = async () => {
try {
const response = await GetVPNTunnelConfigHandler();
tunnelConfigs.value = response.data;
} catch (error) {
ElMessage.error('获取隧道配置列表失败');
console.error(error);
}
};
// 选择服务器
const selectServer = (server: ServerConfig) => {
selectedServer.value = { ...server };
// 确保allow_user_id是用户ID数组
if (server.allow_user_id && server.allow_user_id.length > 0) {
/**
* Extracts the id property from an item object
* @param {Object} item - The item object containing an id property
* @returns {*} The value of the item's id property
*/
user_select_ids.value = server.allow_user_id.map(item => item.id);
} else {
selectedServer.value.allow_user_id = [];
}
};
// 添加服务器
const addServer = () => {
const newServer: ServerConfig = {
name: "新服务器",
server_id: "",
server_ip: "",
server_info: "",
udp_port: 1194,
tcp_port: 443,
protocol: 2,
ip_type: 4,
ipv4_address_pool: "10.8.0.0/24",
ipv6_address_pool: "",
dns_server: "8.8.8.8",
tunnel: "tun",
allow_user_id: [],
encryption: "aes-256-gcm",
hash: "sha256",
user_max_device: 5,
duration_time: 300,
ipv4_router: [],
ipv6_router: []
};
serverList.value.push(newServer);
selectServer(newServer);
ElMessage.success('已添加新服务器');
};
// 删除服务器
const deleteServer = async (serverId: string) => {
try {
await ElMessageBox.confirm('确定要删除此服务器配置吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await DeleteVPNServerHandler({ server_id: serverId });
const index = serverList.value.findIndex(server => server.server_id === serverId);
if (index > -1) {
serverList.value.splice(index, 1);
if (selectedServer.value?.server_id === serverId) {
selectedServer.value = null;
}
ElMessage.success('删除成功');
}
} catch (error: any) {
if (error !== 'cancel') {
ElMessage.error('删除失败');
console.error(error);
}
}
};
// 保存配置
const saveConfig = async () => {
if (!selectedServer.value) return;
// 转换数据格式，确保与后端API兼容
const configData = { ...selectedServer.value };
// 将allow_user_id转换为后端期望的格式
configData.allow_user_id = user_select_ids.value.map(id => ({ id: id }));
let req = {
server_id: selectedServer.value.server_id,
server_ip: selectedServer.value.server_ip,
server_info: selectedServer.value.server_info,
config: configData
}
try {
let resp = await SetVPNServerConfigHandler(req);
if (resp["code"] !== 0) {
ElMessage.error(resp["message"]);
return;
}
ElMessage.success('配置保存成功');
//获取最新数据
getServerConfigs();
} catch (error) {
ElMessage.error('保存配置失败');
console.error(error);
}
};
const GetAllDefaultUsers = async () => {
try {
const response = await getAllDefaultUsers();
if (response['code'] !== 0) {
console.error('获取默认用户失败:', response["message"]);
return;
}
user_select_opts.value.length = 0;
for (let i = 0; i < response.data.length; i++) {
let user = response.data[i];
if (user.type === 0) {
user_select_opts.value.push({
value: user.id,
label: user.name
});
}
}
//console.log("user_select_opts:", user_select_opts.value);
} catch (error) {
console.error('获取默认用户失败:', error);
}
};
// 组件挂载时获取数据
onMounted(() => {
getServerConfigs();
getAddressPools();
getTunnelConfigs();
GetAllDefaultUsers();
});
</script>
<style scoped>
.vpn-server-config {
padding: 20px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
}
.server-list {
max-height: 600px;
overflow-y: auto;
}
.server-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
margin-bottom: 8px;
border: 1px solid #e4e7ed;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
}
.server-item:hover {
background-color: #f5f7fa;
border-color: #409eff;
}
.server-item.active {
background-color: #ecf5ff;
border-color: #409eff;
}
.server-info {
flex: 1;
}
.server-name {
font-weight: bold;
margin-bottom: 4px;
}
.server-ip {
font-size: 12px;
color: #909399;
}
.server-actions {
margin-left: 10px;
}
.el-form {
padding: 20px 0;
}
</style>