添加地址池、隧道管理，修改服务器配置
This commit is contained in:
parent
1051d0e7e8
commit
691d12c5eb
|
|
@ -36,6 +36,10 @@ export const SetVPNAddressPoolHandler = (Data) => {
|
|||
return request.post('/vpn/set_vpn_ip_pool', Data)
|
||||
}
|
||||
|
||||
export const DeleteVPNAddressPoolHandler = (Data) => {
|
||||
return request.delete('/vpn/delete_vpn_ip_pool', { data: Data })
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取VPN隧道配置信息
|
||||
* @returns {Promise} 包含VPN隧道配置信息的Promise对象
|
||||
|
|
@ -54,6 +58,10 @@ export const GetVPNServerOnlineListHandler = () => {
|
|||
return request.get('/vpn/get_server_online')
|
||||
}
|
||||
|
||||
export const DeleteVPNTunnelHandler = (Data) => {
|
||||
return request.delete('/vpn/delete_vpn_tunnel', { data: Data })
|
||||
}
|
||||
|
||||
export const GetVPNServerConfigHandler = () => {
|
||||
return request.get('/vpn/get_vpn_server_config')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,7 +84,19 @@ export const menuData: Menus[] = [
|
|||
pid: '75',
|
||||
index: '/vpn-server-config',
|
||||
title: 'VPN服务器配置',
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '752',
|
||||
pid: '75',
|
||||
index: '/vpn-address-pool',
|
||||
title: '地址池配置',
|
||||
},
|
||||
{
|
||||
id: '753',
|
||||
pid: '75',
|
||||
index: '/vpn-tunnel',
|
||||
title: '隧道配置',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -137,6 +137,24 @@ const routes: RouteRecordRaw[] = [
|
|||
},
|
||||
component: () => import(/* webpackChunkName: "system-user" */ '../views/system/vpn-server-config.vue'),
|
||||
},
|
||||
{
|
||||
path: '/vpn-address-pool',
|
||||
name: 'vpn-address-pool',
|
||||
meta: {
|
||||
title: 'VPN地址池管理',
|
||||
permiss: '752',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "system-user" */ '../views/system/vpn-address-pool.vue'),
|
||||
},
|
||||
{
|
||||
path: '/vpn-tunnel',
|
||||
name: 'vpn-tunnel',
|
||||
meta: {
|
||||
title: 'VPN隧道管理',
|
||||
permiss: '753',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "system-user" */ '../views/system/vpn-tunnel.vue'),
|
||||
},
|
||||
{
|
||||
path: '/callback',
|
||||
name: 'callback',
|
||||
|
|
|
|||
|
|
@ -62,6 +62,8 @@ export const usePermissStore = defineStore("permiss", {
|
|||
"74", //模型策略管理
|
||||
"75", //VPN服务器配置管理
|
||||
"751", //VPN服务器配置管理
|
||||
"752", //VPN地址池管理
|
||||
"753", //VPN隧道管理
|
||||
],
|
||||
user: ["0", "8", "7", "9", "51" ,"53","55" ,"56", "57", "58", "59", "61", "71", "75"],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,560 @@
|
|||
<template>
|
||||
<div class="vpn-address-pool">
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧地址池列表 -->
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>地址池列表</span>
|
||||
<el-button type="primary" @click="addNewPool">新增地址池</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div class="pool-list">
|
||||
<div
|
||||
v-for="pool in poolList"
|
||||
:key="pool.pool_name"
|
||||
class="pool-item"
|
||||
:class="{ active: selectedPool?.pool_name === pool.pool_name }"
|
||||
@click="selectPool(pool)"
|
||||
>
|
||||
<div class="pool-info">
|
||||
<div class="pool-name">{{ pool.pool_name }}</div>
|
||||
<div class="pool-range">
|
||||
IPv4: {{ pool.config.ipv4_address_pool.start_ip }} - {{ pool.config.ipv4_address_pool.end_ip }}/{{ pool.config.ipv4_address_pool.prefix }}
|
||||
</div>
|
||||
<div class="pool-range">
|
||||
IPv6: {{ pool.config.ipv6_address_pool.start_ip }} - {{ pool.config.ipv6_address_pool.end_ip }}/{{ pool.config.ipv6_address_pool.prefix }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="pool-actions">
|
||||
<el-button type="danger" size="small" text @click.stop="deletePool(pool.pool_name)">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-if="poolList.length === 0" description="暂无地址池配置" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧编辑表单 -->
|
||||
<el-col :span="16">
|
||||
<el-card shadow="hover" v-if="selectedPool">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>编辑地址池配置</span>
|
||||
<el-button type="success" @click="saveConfig">保存配置</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="selectedPool" label-width="120px" size="default">
|
||||
<el-form-item label="地址池名称">
|
||||
<el-input v-model="selectedPool.pool_name" placeholder="请输入地址池名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">IPv4地址池配置</el-divider>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="起始IP">
|
||||
<el-input v-model="selectedPool.config.ipv4_address_pool.start_ip" placeholder="请输入起始IPv4地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="结束IP">
|
||||
<el-input v-model="selectedPool.config.ipv4_address_pool.end_ip" placeholder="请输入结束IPv4地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="子网前缀">
|
||||
<el-input-number v-model="selectedPool.config.ipv4_address_pool.prefix" :min="1" :max="32" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="DNS服务器">
|
||||
<el-select
|
||||
v-model="selectedPool.config.ipv4_address_pool.dns_ip"
|
||||
placeholder="请选择DNS服务器"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="dns in dnsOptions"
|
||||
:key="dns.value"
|
||||
:label="dns.label"
|
||||
:value="dns.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider content-position="left">IPv6地址池配置</el-divider>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="起始IP">
|
||||
<el-input v-model="selectedPool.config.ipv6_address_pool.start_ip" placeholder="请输入起始IPv6地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="结束IP">
|
||||
<el-input v-model="selectedPool.config.ipv6_address_pool.end_ip" placeholder="请输入结束IPv6地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="子网前缀">
|
||||
<el-input-number v-model="selectedPool.config.ipv6_address_pool.prefix" :min="1" :max="128" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="DNS服务器">
|
||||
<el-select
|
||||
v-model="selectedPool.config.ipv6_address_pool.dns_ip"
|
||||
placeholder="请选择DNS服务器"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="dns in dnsOptions"
|
||||
:key="dns.value"
|
||||
:label="dns.label"
|
||||
:value="dns.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider content-position="left">IP绑定配置</el-divider>
|
||||
|
||||
<el-form-item label="用户IP绑定">
|
||||
<div class="ip-bind-section">
|
||||
<div
|
||||
v-for="(bind, index) in selectedPool.config.ipv4_address_pool.ip_bind"
|
||||
:key="index"
|
||||
class="ip-bind-item"
|
||||
>
|
||||
<el-select v-model="bind.user_id" placeholder="选择用户" filterable>
|
||||
<el-option
|
||||
v-for="user in userOptions"
|
||||
:key="user.value"
|
||||
:label="user.label"
|
||||
:value="user.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input v-model="bind.bind_ip" placeholder="绑定IP地址" style="margin-left: 10px;" />
|
||||
<el-button type="danger" size="small" text @click="removeIPBind('ipv4', index)" style="margin-left: 10px;">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button type="primary" size="small" text @click="addIPBind('ipv4')">
|
||||
添加IPv4绑定
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="IPv6用户绑定">
|
||||
<div class="ip-bind-section">
|
||||
<div
|
||||
v-for="(bind, index) in selectedPool.config.ipv6_address_pool.ip_bind"
|
||||
:key="index"
|
||||
class="ip-bind-item"
|
||||
>
|
||||
<el-select v-model="bind.user_id" placeholder="选择用户" filterable>
|
||||
<el-option
|
||||
v-for="user in userOptions"
|
||||
:key="user.value"
|
||||
:label="user.label"
|
||||
:value="user.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input v-model="bind.bind_ip" placeholder="绑定IPv6地址" style="margin-left: 10px;" />
|
||||
<el-button type="danger" size="small" text @click="removeIPBind('ipv6', index)" style="margin-left: 10px;">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button type="primary" size="small" text @click="addIPBind('ipv6')">
|
||||
添加IPv6绑定
|
||||
</el-button>
|
||||
</div>
|
||||
</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 { GetVPNAddressPoolHandler, SetVPNAddressPoolHandler, DeleteVPNAddressPoolHandler } from '@/api/vpn';
|
||||
|
||||
// IPv4地址验证
|
||||
const isValidIPv4 = (ip: string): boolean => {
|
||||
const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
||||
return ipv4Regex.test(ip);
|
||||
};
|
||||
|
||||
// IPv6地址验证
|
||||
const isValidIPv6 = (ip: string): boolean => {
|
||||
// 简化的IPv6验证，支持标准IPv6格式
|
||||
const ipv6Regex = /^(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,7}:$|^(?:[0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,5}(?::[0-9a-fA-F]{1,4}){1,2}$|^(?:[0-9a-fA-F]{1,4}:){1,4}(?::[0-9a-fA-F]{1,4}){1,3}$|^(?:[0-9a-fA-F]{1,4}:){1,3}(?::[0-9a-fA-F]{1,4}){1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,2}(?::[0-9a-fA-F]{1,4}){1,5}$|^[0-9a-fA-F]{1,4}:(?:(?::[0-9a-fA-F]{1,4}){1,6})$|^:(?:(?::[0-9a-fA-F]{1,4}){1,7}|:)$/;
|
||||
return ipv6Regex.test(ip);
|
||||
};
|
||||
|
||||
interface StringValue {
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface UserIDBindIP {
|
||||
user_id: number;
|
||||
bind_ip: string;
|
||||
}
|
||||
|
||||
interface AddressPool {
|
||||
start_ip: string;
|
||||
end_ip: string;
|
||||
prefix: number;
|
||||
dns_ip: StringValue[] | string[];
|
||||
ip_bind: UserIDBindIP[];
|
||||
}
|
||||
|
||||
interface AddressPoolConfig {
|
||||
ipv4_address_pool: AddressPool;
|
||||
ipv6_address_pool: AddressPool;
|
||||
}
|
||||
|
||||
interface AddressPoolRequest {
|
||||
pool_name: string;
|
||||
config: AddressPoolConfig;
|
||||
}
|
||||
|
||||
const poolList = ref<AddressPoolRequest[]>([]);
|
||||
const selectedPool = ref<AddressPoolRequest | null>(null);
|
||||
const userOptions = ref<Array<{value: number, label: string}>>([]);
|
||||
const dnsOptions = ref<Array<{value: string, label: string}>>([
|
||||
{ value: '8.8.8.8', label: '8.8.8.8 (Google DNS)' },
|
||||
{ value: '8.8.4.4', label: '8.8.4.4 (Google DNS)' },
|
||||
{ value: '1.1.1.1', label: '1.1.1.1 (Cloudflare DNS)' },
|
||||
{ value: '1.0.0.1', label: '1.0.0.1 (Cloudflare DNS)' },
|
||||
{ value: '208.67.222.222', label: '208.67.222.222 (OpenDNS)' },
|
||||
{ value: '2001:4860:4860::8888', label: '2001:4860:4860::8888 (Google IPv6)' },
|
||||
{ value: '2001:4860:4860::8844', label: '2001:4860:4860::8844 (Google IPv6)' },
|
||||
{ value: '2606:4700:4700::1111', label: '2606:4700:4700::1111 (Cloudflare IPv6)' },
|
||||
{ value: '2606:4700:4700::1001', label: '2606:4700:4700::1001 (Cloudflare IPv6)' }
|
||||
]);
|
||||
|
||||
// 创建默认的地址池配置
|
||||
const createDefaultPool = (): AddressPoolRequest => {
|
||||
return {
|
||||
pool_name: '',
|
||||
config: {
|
||||
ipv4_address_pool: {
|
||||
start_ip: '',
|
||||
end_ip: '',
|
||||
prefix: 24,
|
||||
dns_ip: [],
|
||||
ip_bind: []
|
||||
},
|
||||
ipv6_address_pool: {
|
||||
start_ip: '',
|
||||
end_ip: '',
|
||||
prefix: 64,
|
||||
dns_ip: [],
|
||||
ip_bind: []
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 获取地址池列表
|
||||
const getPools = async () => {
|
||||
try {
|
||||
const response = await GetVPNAddressPoolHandler();
|
||||
poolList.value = response.data;
|
||||
} catch (error) {
|
||||
ElMessage.error('获取地址池列表失败');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取用户列表
|
||||
const getUsers = async () => {
|
||||
try {
|
||||
const response = await getAllDefaultUsers();
|
||||
if (response['code'] !== 0) {
|
||||
console.error('获取用户失败:', response["message"]);
|
||||
return;
|
||||
}
|
||||
userOptions.value = response.data
|
||||
.filter((user: any) => user.type === 0)
|
||||
.map((user: any) => ({
|
||||
value: user.id,
|
||||
label: user.name
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('获取用户失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 选择地址池
|
||||
const selectPool = (pool: AddressPoolRequest) => {
|
||||
selectedPool.value = JSON.parse(JSON.stringify(pool)); // 深拷贝避免直接修改
|
||||
let dns_ip = selectedPool.value.config.ipv4_address_pool.dns_ip.map(item => item.value);
|
||||
let dns_ip_v6 = selectedPool.value.config.ipv6_address_pool.dns_ip.map(item => item.value);
|
||||
selectedPool.value.config.ipv4_address_pool.dns_ip = dns_ip;
|
||||
selectedPool.value.config.ipv6_address_pool.dns_ip = dns_ip_v6;
|
||||
};
|
||||
|
||||
// 新增地址池
|
||||
const addNewPool = () => {
|
||||
selectedPool.value = createDefaultPool();
|
||||
};
|
||||
|
||||
// 删除地址池
|
||||
const deletePool = async (poolName: string) => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要删除此地址池吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
});
|
||||
|
||||
await DeleteVPNAddressPoolHandler({ pool_name: poolName });
|
||||
|
||||
const index = poolList.value.findIndex(pool => pool.pool_name === poolName);
|
||||
if (index > -1) {
|
||||
poolList.value.splice(index, 1);
|
||||
if (selectedPool.value?.pool_name === poolName) {
|
||||
selectedPool.value = null;
|
||||
}
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('删除失败');
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 添加IP绑定
|
||||
const addIPBind = (type: 'ipv4' | 'ipv6') => {
|
||||
if (!selectedPool.value) return;
|
||||
|
||||
const bind: UserIDBindIP = {
|
||||
user_id: 0,
|
||||
bind_ip: ''
|
||||
};
|
||||
if (selectedPool.value.config.ipv4_address_pool.ip_bind == null){
|
||||
selectedPool.value.config.ipv4_address_pool.ip_bind = [];
|
||||
}
|
||||
if (selectedPool.value.config.ipv6_address_pool.ip_bind == null){
|
||||
selectedPool.value.config.ipv6_address_pool.ip_bind = [];
|
||||
}
|
||||
|
||||
if (type === 'ipv4') {
|
||||
selectedPool.value.config.ipv4_address_pool.ip_bind.push(bind);
|
||||
} else {
|
||||
selectedPool.value.config.ipv6_address_pool.ip_bind.push(bind);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除IP绑定
|
||||
const removeIPBind = (type: 'ipv4' | 'ipv6', index: number) => {
|
||||
if (!selectedPool.value) return;
|
||||
|
||||
if (type === 'ipv4') {
|
||||
selectedPool.value.config.ipv4_address_pool.ip_bind.splice(index, 1);
|
||||
} else {
|
||||
selectedPool.value.config.ipv6_address_pool.ip_bind.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 保存配置
|
||||
const saveConfig = async () => {
|
||||
if (!selectedPool.value) return;
|
||||
|
||||
if (!selectedPool.value.pool_name.trim()) {
|
||||
ElMessage.error('请输入地址池名称');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedPool.value.config.ipv4_address_pool.start_ip || !selectedPool.value.config.ipv4_address_pool.end_ip) {
|
||||
ElMessage.error('请输入完整的IPv4地址范围');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedPool.value.config.ipv6_address_pool.start_ip || !selectedPool.value.config.ipv6_address_pool.end_ip) {
|
||||
ElMessage.error('请输入完整的IPv6地址范围');
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证IPv4用户绑定
|
||||
for (let i = 0; i < selectedPool.value.config.ipv4_address_pool.ip_bind.length; i++) {
|
||||
const bind = selectedPool.value.config.ipv4_address_pool.ip_bind[i];
|
||||
if (!bind.user_id || bind.user_id === 0) {
|
||||
ElMessage.error(`IPv4绑定第${i + 1}行：请选择用户`);
|
||||
return;
|
||||
}
|
||||
if (!bind.bind_ip || bind.bind_ip.trim() === '') {
|
||||
ElMessage.error(`IPv4绑定第${i + 1}行：请输入正确的IP地址`);
|
||||
return;
|
||||
}
|
||||
// 验证IPv4地址格式
|
||||
if (!isValidIPv4(bind.bind_ip.trim())) {
|
||||
ElMessage.error(`IPv4绑定第${i + 1}行：IP地址格式不正确`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 验证IPv6用户绑定
|
||||
for (let i = 0; i < selectedPool.value.config.ipv6_address_pool.ip_bind.length; i++) {
|
||||
const bind = selectedPool.value.config.ipv6_address_pool.ip_bind[i];
|
||||
if (!bind.user_id || bind.user_id === 0) {
|
||||
ElMessage.error(`IPv6绑定第${i + 1}行：请选择用户`);
|
||||
return;
|
||||
}
|
||||
if (!bind.bind_ip || bind.bind_ip.trim() === '') {
|
||||
ElMessage.error(`IPv6绑定第${i + 1}行：请输入正确的IPv6地址`);
|
||||
return;
|
||||
}
|
||||
// 验证IPv6地址格式
|
||||
if (!isValidIPv6(bind.bind_ip.trim())) {
|
||||
ElMessage.error(`IPv6绑定第${i + 1}行：IPv6地址格式不正确`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
let dns_ip = [];
|
||||
for(let value_ of selectedPool.value.config.ipv4_address_pool.dns_ip){
|
||||
dns_ip.push({value:value_})
|
||||
}
|
||||
let dns_ip_v6 = [];
|
||||
for(let value_ of selectedPool.value.config.ipv6_address_pool.dns_ip){
|
||||
dns_ip_v6.push({value:value_})
|
||||
}
|
||||
selectedPool.value.config.ipv6_address_pool.dns_ip = dns_ip_v6;
|
||||
selectedPool.value.config.ipv4_address_pool.dns_ip = dns_ip;
|
||||
|
||||
try {
|
||||
const response = await SetVPNAddressPoolHandler(selectedPool.value);
|
||||
if (response["code"] !== 0) {
|
||||
ElMessage.error(response["message"]);
|
||||
return;
|
||||
}
|
||||
ElMessage.success('配置保存成功');
|
||||
getPools(); // 重新获取最新数据
|
||||
} catch (error) {
|
||||
ElMessage.error('保存配置失败');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
getPools();
|
||||
getUsers();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.vpn-address-pool {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pool-list {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.pool-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;
|
||||
}
|
||||
|
||||
.pool-item:hover {
|
||||
background-color: #f5f7fa;
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.pool-item.active {
|
||||
background-color: #ecf5ff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.pool-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pool-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.pool-range {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.pool-actions {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.ip-bind-section {
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.ip-bind-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ip-bind-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.el-divider {
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -64,6 +64,20 @@
|
|||
<el-input v-model="selectedServer.server_ip" placeholder="请输入服务器IP" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器IPV6">
|
||||
<el-input v-model="selectedServer.server_ipv6" placeholder="请输入服务器IPV6" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="IP类型">
|
||||
<el-select v-model="selectedServer.server_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="UDP端口">
|
||||
<el-input-number v-model="selectedServer.udp_port" :min="1" :max="65535" />
|
||||
|
|
@ -215,6 +229,48 @@
|
|||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">IPv4路由配置</el-divider>
|
||||
|
||||
<el-form-item label="IPv4路由">
|
||||
<div class="router-section">
|
||||
<div
|
||||
v-for="(router, index) in selectedServer.ipv4_router"
|
||||
:key="index"
|
||||
class="router-item"
|
||||
>
|
||||
<el-input v-model="router.ip" placeholder="IP地址 (如: 192.168.1.1)" style="flex: 1;" />
|
||||
<el-input-number v-model="router.prefix" :min="1" :max="32" placeholder="前缀长度" style="flex: 1; margin-left: 10px;" />
|
||||
<el-button type="danger" size="small" text @click="removeRouter('ipv4', index)" style="margin-left: 10px;">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button type="primary" size="small" text @click="addRouter('ipv4')">
|
||||
添加IPv4路由
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">IPv6路由配置</el-divider>
|
||||
|
||||
<el-form-item label="IPv6路由">
|
||||
<div class="router-section">
|
||||
<div
|
||||
v-for="(router, index) in selectedServer.ipv6_router"
|
||||
:key="index"
|
||||
class="router-item"
|
||||
>
|
||||
<el-input v-model="router.ip" placeholder="IP地址 (如: 2001:db8::1)" style="flex: 1;" />
|
||||
<el-input-number v-model="router.prefix" :min="1" :max="128" placeholder="前缀长度" style="flex: 1; margin-left: 10px;" />
|
||||
<el-button type="danger" size="small" text @click="removeRouter('ipv6', index)" style="margin-left: 10px;">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button type="primary" size="small" text @click="addRouter('ipv6')">
|
||||
添加IPv6路由
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
|
|
@ -281,14 +337,17 @@ interface TunnelRequestAndResponse {
|
|||
}
|
||||
|
||||
interface VPNRouter {
|
||||
network: string;
|
||||
gateway: string;
|
||||
type: number;
|
||||
ip: string;
|
||||
prefix: number;
|
||||
}
|
||||
|
||||
interface ServerConfig {
|
||||
name: string;
|
||||
server_id: string;
|
||||
server_ip: string;
|
||||
server_ipv6: string;
|
||||
server_ip_type: number;
|
||||
server_info: string;
|
||||
udp_port: number;
|
||||
tcp_port: number;
|
||||
|
|
@ -380,7 +439,7 @@ const stopOnlineStatusTimer = () => {
|
|||
|
||||
// 选择服务器
|
||||
const selectServer = (server: ServerConfig) => {
|
||||
selectedServer.value = { ...server };
|
||||
selectedServer.value = JSON.parse(JSON.stringify(server)); // 深拷贝避免直接修改
|
||||
// 确保allow_user_id是用户ID数组
|
||||
if (server.allow_user_id && server.allow_user_id.length > 0) {
|
||||
/**
|
||||
|
|
@ -392,6 +451,13 @@ const selectServer = (server: ServerConfig) => {
|
|||
} else {
|
||||
selectedServer.value.allow_user_id = [];
|
||||
}
|
||||
// 确保路由数组存在
|
||||
if (!selectedServer.value.ipv4_router) {
|
||||
selectedServer.value.ipv4_router = [];
|
||||
}
|
||||
if (!selectedServer.value.ipv6_router) {
|
||||
selectedServer.value.ipv6_router = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 删除服务器
|
||||
|
|
@ -425,6 +491,40 @@ const deleteServer = async (serverId: string) => {
|
|||
const saveConfig = async () => {
|
||||
if (!selectedServer.value) return;
|
||||
|
||||
// 验证IPv4路由配置
|
||||
for (let i = 0; i < selectedServer.value.ipv4_router.length; i++) {
|
||||
const router = selectedServer.value.ipv4_router[i];
|
||||
if (!router.ip || router.ip.trim() === '') {
|
||||
ElMessage.error(`IPv4路由第${i + 1}行：IP地址不能为空`);
|
||||
return;
|
||||
}
|
||||
if (!isValidIPv4Address(router.ip)) {
|
||||
ElMessage.error(`IPv4路由第${i + 1}行：IP地址格式不正确`);
|
||||
return;
|
||||
}
|
||||
if (!router.prefix || router.prefix < 1 || router.prefix > 32) {
|
||||
ElMessage.error(`IPv4路由第${i + 1}行：前缀长度必须在1-32之间`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 验证IPv6路由配置
|
||||
for (let i = 0; i < selectedServer.value.ipv6_router.length; i++) {
|
||||
const router = selectedServer.value.ipv6_router[i];
|
||||
if (!router.ip || router.ip.trim() === '') {
|
||||
ElMessage.error(`IPv6路由第${i + 1}行：IP地址不能为空`);
|
||||
return;
|
||||
}
|
||||
if (!isValidIPv6Address(router.ip)) {
|
||||
ElMessage.error(`IPv6路由第${i + 1}行：IP地址格式不正确`);
|
||||
return;
|
||||
}
|
||||
if (!router.prefix || router.prefix < 1 || router.prefix > 128) {
|
||||
ElMessage.error(`IPv6路由第${i + 1}行：前缀长度必须在1-128之间`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 转换数据格式，确保与后端API兼容
|
||||
const configData = { ...selectedServer.value };
|
||||
// 将allow_user_id转换为后端期望的格式
|
||||
|
|
@ -451,6 +551,56 @@ const saveConfig = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
// 添加路由
|
||||
const addRouter = (type: 'ipv4' | 'ipv6') => {
|
||||
if (!selectedServer.value) return;
|
||||
|
||||
const router: VPNRouter = {
|
||||
type: type === 'ipv4' ? 4 : 6,
|
||||
ip: '',
|
||||
prefix: type === 'ipv4' ? 24 : 64
|
||||
};
|
||||
|
||||
if (!selectedServer.value.ipv4_router) {
|
||||
selectedServer.value.ipv4_router = [];
|
||||
}
|
||||
if (!selectedServer.value.ipv6_router) {
|
||||
selectedServer.value.ipv6_router = [];
|
||||
}
|
||||
|
||||
if (type === 'ipv4') {
|
||||
selectedServer.value.ipv4_router.push(router);
|
||||
} else {
|
||||
selectedServer.value.ipv6_router.push(router);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除路由
|
||||
const removeRouter = (type: 'ipv4' | 'ipv6', index: number) => {
|
||||
if (!selectedServer.value) return;
|
||||
|
||||
if (type === 'ipv4') {
|
||||
selectedServer.value.ipv4_router.splice(index, 1);
|
||||
} else {
|
||||
selectedServer.value.ipv6_router.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 验证IPv4地址格式
|
||||
const isValidIPv4Address = (ip: string): boolean => {
|
||||
if (!ip || ip.trim() === '') return false;
|
||||
const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
||||
return ipv4Regex.test(ip);
|
||||
};
|
||||
|
||||
// 验证IPv6地址格式
|
||||
const isValidIPv6Address = (ip: string): boolean => {
|
||||
if (!ip || ip.trim() === '') return false;
|
||||
// 简化的IPv6验证，支持标准IPv6格式
|
||||
const ipv6Regex = /^(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,7}:$|^(?:[0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,5}(?::[0-9a-fA-F]{1,4}){1,2}$|^(?:[0-9a-fA-F]{1,4}:){1,4}(?::[0-9a-fA-F]{1,4}){1,3}$|^(?:[0-9a-fA-F]{1,4}:){1,3}(?::[0-9a-fA-F]{1,4}){1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,2}(?::[0-9a-fA-F]{1,4}){1,5}$|^[0-9a-fA-F]{1,4}:(?:(?::[0-9a-fA-F]{1,4}){1,6})$|^:(?:(?::[0-9a-fA-F]{1,4}){1,7}|:)$/;
|
||||
return ipv6Regex.test(ip);
|
||||
};
|
||||
|
||||
const GetAllDefaultUsers = async () => {
|
||||
try {
|
||||
const response = await getAllDefaultUsers();
|
||||
|
|
@ -565,4 +715,21 @@ onUnmounted(() => {
|
|||
.el-form {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.router-section {
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.router-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.router-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,354 @@
|
|||
<template>
|
||||
<div class="vpn-tunnel">
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧隧道列表 -->
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>隧道列表</span>
|
||||
<el-button type="primary" @click="addNewTunnel">新增隧道</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div class="tunnel-list">
|
||||
<div
|
||||
v-for="tunnel in tunnelList"
|
||||
:key="tunnel.tunnel_name"
|
||||
class="tunnel-item"
|
||||
:class="{ active: selectedTunnel?.tunnel_name === tunnel.tunnel_name }"
|
||||
@click="selectTunnel(tunnel)"
|
||||
>
|
||||
<div class="tunnel-info">
|
||||
<div class="tunnel-name">{{ tunnel.tunnel_name }}</div>
|
||||
<div class="tunnel-ips">
|
||||
IPv4: {{ tunnel.config.auto_ipv4 ? '自动' : tunnel.config.ipv4_address }}
|
||||
</div>
|
||||
<div class="tunnel-ips">
|
||||
IPv6: {{ tunnel.config.auto_ipv6 ? '自动' : tunnel.config.ipv6_address }}
|
||||
</div>
|
||||
<div class="tunnel-limits">
|
||||
上行: {{ tunnel.config.upload_limit }} Mbps | 下行: {{ tunnel.config.download_limit }} Mbps
|
||||
</div>
|
||||
</div>
|
||||
<div class="tunnel-actions">
|
||||
<el-button type="danger" size="small" text @click.stop="deleteTunnel(tunnel.tunnel_name)">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-if="tunnelList.length === 0" description="暂无隧道配置" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧编辑表单 -->
|
||||
<el-col :span="16">
|
||||
<el-card shadow="hover" v-if="selectedTunnel">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>编辑隧道配置</span>
|
||||
<el-button type="success" @click="saveConfig">保存配置</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="selectedTunnel" label-width="120px" size="default">
|
||||
<el-form-item label="隧道名称">
|
||||
<el-input v-model="selectedTunnel.tunnel_name" placeholder="请输入隧道名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">IPv4配置</el-divider>
|
||||
|
||||
<el-form-item label="自动分配IPv4">
|
||||
<el-switch v-model="selectedTunnel.config.auto_ipv4" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="IPv4地址" v-if="!selectedTunnel.config.auto_ipv4">
|
||||
<el-input v-model="selectedTunnel.config.ipv4_address" placeholder="请输入IPv4地址" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="IPv4 MTU">
|
||||
<el-input-number v-model="selectedTunnel.config.ipv4_mtu" :min="68" :max="9000" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">IPv6配置</el-divider>
|
||||
|
||||
<el-form-item label="自动分配IPv6">
|
||||
<el-switch v-model="selectedTunnel.config.auto_ipv6" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="IPv6地址" v-if="!selectedTunnel.config.auto_ipv6">
|
||||
<el-input v-model="selectedTunnel.config.ipv6_address" placeholder="请输入IPv6地址" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="IPv6 MTU">
|
||||
<el-input-number v-model="selectedTunnel.config.ipv6_mtu" :min="1280" :max="9000" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">带宽限制</el-divider>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="上行限制(Kbps)">
|
||||
<el-input-number
|
||||
v-model="selectedTunnel.config.upload_limit"
|
||||
:min="0"
|
||||
:max="10000"
|
||||
:step="1"
|
||||
placeholder="0表示无限制"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="下行限制(Kbps)">
|
||||
<el-input-number
|
||||
v-model="selectedTunnel.config.download_limit"
|
||||
:min="0"
|
||||
:max="10000"
|
||||
:step="1"
|
||||
placeholder="0表示无限制"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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 { GetVPNTunnelConfigHandler, SetVPNTunnelHandler, DeleteVPNTunnelHandler } from '@/api/vpn';
|
||||
|
||||
// IPv4地址验证
|
||||
const isValidIPv4 = (ip: string): boolean => {
|
||||
const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
||||
return ipv4Regex.test(ip);
|
||||
};
|
||||
|
||||
// IPv6地址验证
|
||||
const isValidIPv6 = (ip: string): boolean => {
|
||||
// 简化的IPv6验证，支持标准IPv6格式
|
||||
const ipv6Regex = /^(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,7}:$|^(?:[0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,5}(?::[0-9a-fA-F]{1,4}){1,2}$|^(?:[0-9a-fA-F]{1,4}:){1,4}(?::[0-9a-fA-F]{1,4}){1,3}$|^(?:[0-9a-fA-F]{1,4}:){1,3}(?::[0-9a-fA-F]{1,4}){1,4}$|^(?:[0-9a-fA-F]{1,4}:){1,2}(?::[0-9a-fA-F]{1,4}){1,5}$|^[0-9a-fA-F]{1,4}:(?:(?::[0-9a-fA-F]{1,4}){1,6})$|^:(?:(?::[0-9a-fA-F]{1,4}){1,7}|:)$/;
|
||||
return ipv6Regex.test(ip);
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
const tunnelList = ref<TunnelRequestAndResponse[]>([]);
|
||||
const selectedTunnel = ref<TunnelRequestAndResponse | null>(null);
|
||||
|
||||
// 创建默认的隧道配置
|
||||
const createDefaultTunnel = (): TunnelRequestAndResponse => {
|
||||
return {
|
||||
tunnel_name: '',
|
||||
config: {
|
||||
tunnel_name: '',
|
||||
auto_ipv4: true,
|
||||
auto_ipv6: true,
|
||||
ipv4_address: '',
|
||||
ipv6_address: '',
|
||||
ipv4_mtu: 1420,
|
||||
ipv6_mtu: 1420,
|
||||
upload_limit: 0,
|
||||
download_limit: 0
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 获取隧道列表
|
||||
const getTunnels = async () => {
|
||||
try {
|
||||
const response = await GetVPNTunnelConfigHandler();
|
||||
tunnelList.value = response.data;
|
||||
} catch (error) {
|
||||
ElMessage.error('获取隧道列表失败');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 选择隧道
|
||||
const selectTunnel = (tunnel: TunnelRequestAndResponse) => {
|
||||
selectedTunnel.value = JSON.parse(JSON.stringify(tunnel)); // 深拷贝避免直接修改
|
||||
selectedTunnel.value.config.tunnel_name = selectedTunnel.value.tunnel_name;
|
||||
};
|
||||
|
||||
// 新增隧道
|
||||
const addNewTunnel = () => {
|
||||
selectedTunnel.value = createDefaultTunnel();
|
||||
};
|
||||
|
||||
// 删除隧道
|
||||
const deleteTunnel = async (tunnelName: string) => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要删除此隧道吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
});
|
||||
|
||||
await DeleteVPNTunnelHandler({ tunnel_name: tunnelName });
|
||||
|
||||
const index = tunnelList.value.findIndex(tunnel => tunnel.tunnel_name === tunnelName);
|
||||
if (index > -1) {
|
||||
tunnelList.value.splice(index, 1);
|
||||
if (selectedTunnel.value?.tunnel_name === tunnelName) {
|
||||
selectedTunnel.value = null;
|
||||
}
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('删除失败');
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 保存配置
|
||||
const saveConfig = async () => {
|
||||
if (!selectedTunnel.value) return;
|
||||
|
||||
if (!selectedTunnel.value.tunnel_name.trim()) {
|
||||
ElMessage.error('请输入隧道名称');
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果不是自动分配，需要验证IP地址格式
|
||||
if (!selectedTunnel.value.config.auto_ipv4) {
|
||||
if (!selectedTunnel.value.config.ipv4_address.trim()) {
|
||||
ElMessage.error('请输入IPv4地址');
|
||||
return;
|
||||
}
|
||||
if (!isValidIPv4(selectedTunnel.value.config.ipv4_address.trim())) {
|
||||
ElMessage.error('IPv4地址格式不正确');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!selectedTunnel.value.config.auto_ipv6) {
|
||||
if (!selectedTunnel.value.config.ipv6_address.trim()) {
|
||||
ElMessage.error('请输入IPv6地址');
|
||||
return;
|
||||
}
|
||||
if (!isValidIPv6(selectedTunnel.value.config.ipv6_address.trim())) {
|
||||
ElMessage.error('IPv6地址格式不正确');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 设置tunnel_name到config中
|
||||
selectedTunnel.value.config.tunnel_name = selectedTunnel.value.tunnel_name;
|
||||
|
||||
try {
|
||||
const response = await SetVPNTunnelHandler(selectedTunnel.value);
|
||||
if (response["code"] !== 0) {
|
||||
ElMessage.error(response["message"]);
|
||||
return;
|
||||
}
|
||||
ElMessage.success('配置保存成功');
|
||||
getTunnels(); // 重新获取最新数据
|
||||
} catch (error) {
|
||||
ElMessage.error('保存配置失败');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
getTunnels();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.vpn-tunnel {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tunnel-list {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tunnel-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;
|
||||
}
|
||||
|
||||
.tunnel-item:hover {
|
||||
background-color: #f5f7fa;
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.tunnel-item.active {
|
||||
background-color: #ecf5ff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.tunnel-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tunnel-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tunnel-ips {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.tunnel-limits {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.tunnel-actions {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.el-divider {
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue