添加地址池、隧道管理，修改服务器配置

src/api/vpn.ts

@@ -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')
 }

src/components/menu.ts

@@ -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: '隧道配置',
+            },
         ],
     },
     {

src/router/index.ts

@@ -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',

src/store/permiss.ts

@@ -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"],
       },

src/views/system/vpn-address-pool.vue

@@ -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>

src/views/system/vpn-server-config.vue

@@ -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;
+    type: number;
-    gateway: string;
+    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>

src/views/system/vpn-tunnel.vue

@@ -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>