添加VPN服务器配置管理， 未完善路由等配置
This commit is contained in:
parent
2a7cf2dedb
commit
8092709950
|
|
@ -30,6 +30,7 @@ declare module '@vue/runtime-core' {
|
||||||
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
||||||
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
||||||
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
||||||
|
ElEmpty: typeof import('element-plus/es')['ElEmpty']
|
||||||
ElForm: typeof import('element-plus/es')['ElForm']
|
ElForm: typeof import('element-plus/es')['ElForm']
|
||||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||||
|
|
|
||||||
|
|
@ -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 })
|
||||||
|
}
|
||||||
|
|
@ -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',
|
id: '2',
|
||||||
title: '组件',
|
title: '组件',
|
||||||
|
|
|
||||||
|
|
@ -127,6 +127,16 @@ const routes: RouteRecordRaw[] = [
|
||||||
component: () => import(/* webpackChunkName: "system-user" */ '../views/system/manage-model-policy.vue'),
|
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',
|
path: '/callback',
|
||||||
name: 'callback',
|
name: 'callback',
|
||||||
|
|
|
||||||
|
|
@ -60,8 +60,10 @@ export const usePermissStore = defineStore("permiss", {
|
||||||
"72", //数据库管理工具
|
"72", //数据库管理工具
|
||||||
"73", //权限策略管理
|
"73", //权限策略管理
|
||||||
"74", //模型策略管理
|
"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"],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -307,6 +307,7 @@ onMounted(async () => {
|
||||||
if (queryParams.code){
|
if (queryParams.code){
|
||||||
code.value = queryParams.code as string;
|
code.value = queryParams.code as string;
|
||||||
}
|
}
|
||||||
|
console.log("query:", queryParams);
|
||||||
|
|
||||||
const token = localStorage.getItem("token") || "";
|
const token = localStorage.getItem("token") || "";
|
||||||
if (token !== "") {
|
if (token !== "") {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue