From 9e706091d80d574e7212c55e7f16e194e428cf57 Mon Sep 17 00:00:00 2001
From: lijun <lijun.ls@qq.com>
Date: Wed, 28 Jan 2026 20:22:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=AD=96=E7=95=A5=E5=8C=B9?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                             |  41 +
 src/api/vpn.ts                              |  55 ++
 src/components/menu.ts                      |   8 +-
 src/router/index.ts                         |   9 +
 src/store/permiss.ts                        |   1 +
 src/views/system/vpn-policy.vue             | 973 ++++++++++++++++++++
 src/views/system/vpn-server-config.vue      |  10 +-
 src/views/system/vpn-server-online-user.vue |   1 +
 8 files changed, 1092 insertions(+), 6 deletions(-)
 create mode 100644 src/views/system/vpn-policy.vue

diff --git a/components.d.ts b/components.d.ts
index 3d4fba0..aa1814f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,6 +8,44 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Countup: typeof import('./src/components/countup.vue')['default']
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     Header: typeof import('./src/components/header.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -20,4 +58,7 @@ declare module '@vue/runtime-core' {
     Upload_file2: typeof import('./src/components/upload_file2.vue')['default']
     UploadFile: typeof import('./src/components/upload-file.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }
diff --git a/src/api/vpn.ts b/src/api/vpn.ts
index 5526f57..1e1529c 100644
--- a/src/api/vpn.ts
+++ b/src/api/vpn.ts
@@ -103,4 +103,59 @@ export const LocalClientDisConnectHandler = (Data) => {
 //获取本地客户端连接状态
 export const LocalClientStatusHandler = () => {
     return local_request.get('/vpn/get_status')
+}
+
+// VPN Policy Management APIs
+// myVPNPolicyGroup := router.Group("/vpn_policy")
+// myVPNPolicyGroup.GET("/get", GetMyVPNPolicyHandler)
+// myVPNPolicyGroup.POST("/create", CreateMyVPNPolicyHandler)
+// myVPNPolicyGroup.POST("/update", UpdateMyVPNPolicyHandler)
+// myVPNPolicyGroup.DELETE("/delete", DeleteMyVPNPolicyHandler)
+
+/**
+ * 获取VPN策略列表
+ * @param {Object} params 查询参数，包含server_id等
+ * @returns {Promise} 包含VPN策略列表的Promise对象
+ */
+export const GetMyVPNPolicyHandler = (params) => {
+    return request.get('/vpn_policy/get', { params })
+}
+
+/**
+ * 创建VPN策略
+ * @param {Object} data VPN策略数据
+ * @returns {Promise} 创建结果的Promise对象
+ */
+export const CreateMyVPNPolicyHandler = (data) => {
+    return request.post('/vpn_policy/create', data)
+}
+
+/**
+ * 更新VPN策略
+ * @param {Object} data VPN策略更新数据，包含id
+ * @returns {Promise} 更新结果的Promise对象
+ */
+export const UpdateMyVPNPolicyHandler = (data) => {
+    return request.post('/vpn_policy/update', data)
+}
+
+/**
+ * 删除VPN策略
+ * @param {Object} data 删除参数，包含id和server_id
+ * @returns {Promise} 删除结果的Promise对象
+ */
+export const DeleteMyVPNPolicyHandler = (data) => {
+	let url =  '/vpn_policy/delete';
+
+	if (data.id){
+		url += "?id="+data.id
+	}
+	if (data.server_id){
+		url += "&server_id=" + data.server_id
+	}
+    return request.delete(url)
+}
+
+export const MatchVPNPolicyHandler = (data) => {
+	return request.post('/vpn_policy/match', data)
 }
\ No newline at end of file
diff --git a/src/components/menu.ts b/src/components/menu.ts
index bf74c28..3b9818b 100644
--- a/src/components/menu.ts
+++ b/src/components/menu.ts
@@ -102,7 +102,13 @@ export const menuData: Menus[] = [
                 pid: '75',
                 index: '/vpn-online-user',
                 title: '在线用户',
-            }
+            },
+            {
+                id: '756',
+                pid: '75',
+                index: '/vpn-policy',
+                title: 'VPN策略',
+            },
         ],
     },
     {
diff --git a/src/router/index.ts b/src/router/index.ts
index 6eb9d27..18d4fb8 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -173,6 +173,15 @@ const routes: RouteRecordRaw[] = [
                 },
                 component: () => import(/* webpackChunkName: "system-user" */ '../views/system/vpn-server-online-user.vue'),
             },
+             {
+                path: '/vpn-policy',
+                name: 'vpn-policy',
+                meta: {
+                    title: 'VPN策略',
+                    permiss: '755',
+                },
+                component: () => import(/* webpackChunkName: "system-user" */ '../views/system/vpn-policy.vue'),
+            },
 
             {
                 path: '/callback',
diff --git a/src/store/permiss.ts b/src/store/permiss.ts
index 0de974e..9ee785b 100644
--- a/src/store/permiss.ts
+++ b/src/store/permiss.ts
@@ -66,6 +66,7 @@ export const usePermissStore = defineStore("permiss", {
           "753", //VPN隧道管理
           "754", //VPN客户端UI
           "755", //VPN在线用户连接
+          "756", //VPN策略
         ],
         user: ["0", "8", "7", "9",  "51" ,"53","55" ,"56", "57", "58", "59", "61", "71", "754"],
       },
diff --git a/src/views/system/vpn-policy.vue b/src/views/system/vpn-policy.vue
new file mode 100644
index 0000000..123469e
--- /dev/null
+++ b/src/views/system/vpn-policy.vue
@@ -0,0 +1,973 @@
+<template>
+    <div class="vpn-policy-management">
+        <el-row :gutter="20">
+            <!-- 左侧服务器列表 -->
+            <el-col :span="8">
+                <el-card shadow="hover">
+                    <template #header>
+                        <div class="card-header">
+                            <span>VPN服务器列表</span>
+                        </div>
+                    </template>
+                    <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">
+                                    <span class="status-indicator" :class="{ 'online': onlineServers.includes(server.server_id) }"></span>
+                                    {{ server.name }}
+                                </div>
+                                <div class="server-ip">{{ server.server_ip }}</div>
+                            </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>{{ selectedServer.name }} - 策略管理</span>
+                            <div class="header-actions">
+                                <el-button type="primary" @click="showAddDialog">新增策略</el-button>
+                                <el-button type="primary" @click="showMatchDialog">策略匹配</el-button>
+                                <el-button type="success" @click="refreshPolicies">刷新</el-button>
+                            </div>
+                        </div>
+                    </template>
+                    
+                    <!-- 搜索栏 -->
+                    <div class="search-bar">
+                        <el-form :model="searchForm" inline size="default">
+                            <el-form-item label="源类型">
+                                <el-select v-model="searchForm.src_type" placeholder="请选择源类型" clearable style="width: 120px;">
+                                    <el-option label="IP地址" :value="0" />
+                                    <el-option label="网段" :value="1" />
+                                    <el-option label="用户ID" :value="2" />
+                                    <el-option label="组ID" :value="3" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="目标类型">
+                                <el-select v-model="searchForm.dst_type" placeholder="请选择目标类型" clearable style="width: 120px;">
+                                    <el-option label="IP地址" :value="0" />
+                                    <el-option label="网段" :value="1" />
+                                    <el-option label="用户ID" :value="2" />
+                                    <el-option label="组ID" :value="3" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="协议">
+                                <el-select v-model="searchForm.protocol" placeholder="请选择协议" clearable style="width: 120px;">
+                                    <el-option label="全部" :value="0" />
+                                    <el-option label="ICMP" :value="1" />
+                                    <el-option label="TCP" :value="6" />
+                                    <el-option label="UDP" :value="17" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="动作">
+                                <el-select v-model="searchForm.action" placeholder="请选择动作" clearable style="width: 100px;">
+                                    <el-option label="拒绝" :value="0" />
+                                    <el-option label="允许" :value="1" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button type="primary" @click="searchPolicies">搜索</el-button>
+                                <el-button @click="resetSearch">重置</el-button>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+
+                    <!-- 策略表格 -->
+                    <el-table 
+                        :data="policyList" 
+                        style="width: 100%; margin-top: 20px;"
+                        v-loading="loading"
+                        stripe
+                    >
+                        <el-table-column prop="id" label="ID" width="80" />
+                        <el-table-column label="源信息" min-width="150">
+                            <template #default="scope">
+                                <div>{{ getSrcTypeText(scope.row.src_type) }}</div>
+                                <div class="text-secondary">{{ getSrcValue(scope.row) }}</div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="目标信息" min-width="150">
+                            <template #default="scope">
+                                <div>{{ getDstTypeText(scope.row.dst_type) }}</div>
+                                <div class="text-secondary">{{ getDstValue(scope.row) }}</div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="协议/动作" width="120">
+                            <template #default="scope">
+                                <div>{{ getProtocolText(scope.row.protocol) }}</div>
+                                <el-tag :type="scope.row.action === 1 ? 'success' : 'danger'" size="small">
+                                    {{ scope.row.action === 1 ? '允许' : '拒绝' }}
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="info" label="描述" min-width="120" show-overflow-tooltip />
+                        <el-table-column prop="created_at" label="创建时间" width="160">
+                            <template #default="scope">
+                                {{ formatTime(scope.row.CreatedAt) }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" width="150" fixed="right">
+                            <template #default="scope">
+                                <el-button type="primary" size="small" text @click="editPolicy(scope.row)">
+                                    编辑
+                                </el-button>
+                                <el-button type="danger" size="small" text @click="deletePolicy(scope.row)">
+                                    删除
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+
+                    <!-- 分页 -->
+                    <div class="pagination-wrapper">
+                        <el-pagination
+                            v-model:current-page="pagination.page"
+                            v-model:page-size="pagination.size"
+                            :page-sizes="[10, 20, 50, 100]"
+                            :total="pagination.total"
+                            layout="total, sizes, prev, pager, next, jumper"
+                            @size-change="handleSizeChange"
+                            @current-change="handleCurrentChange"
+                        />
+                    </div>
+                </el-card>
+
+                <el-card shadow="hover" v-else>
+                    <el-empty description="请选择VPN服务器以管理策略" />
+                </el-card>
+            </el-col>
+        </el-row>
+
+        <!-- 策略编辑对话框 -->
+        <el-dialog 
+            :title="dialogTitle" 
+            v-model="dialogVisible" 
+            width="800px"
+            @close="resetForm"
+        >
+            <el-form 
+                :model="policyForm" 
+                :rules="formRules" 
+                ref="policyFormRef"
+                label-width="120px" 
+                size="default"
+            >
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="服务器ID" prop="server_id">
+                            <el-input v-model="policyForm.server_id" disabled />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="IP类型" prop="ip_type">
+                            <el-select v-model="policyForm.ip_type" placeholder="请选择IP类型">
+                                <el-option label="IPv4" :value="4" />
+                                <el-option label="IPv6" :value="6" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="源类型" prop="src_type">
+                            <el-select v-model="policyForm.src_type" placeholder="请选择源类型" @change="onSrcTypeChange">
+                                <el-option label="IP地址" :value="0" />
+                                <el-option label="网段" :value="1" />
+                                <el-option label="用户ID" :value="2" />
+                                <el-option label="组ID" :value="3" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="源值" prop="src_value" :rules="getSrcRules()">
+                            <el-input 
+                                v-model="policyForm.src_value" 
+                                :placeholder="getSrcPlaceholder()"
+                                clearable
+                            />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="目标类型" prop="dst_type">
+                            <el-select v-model="policyForm.dst_type" placeholder="请选择目标类型" @change="onDstTypeChange">
+                                <el-option label="IP地址" :value="0" />
+                                <el-option label="网段" :value="1" />
+                                <el-option label="用户ID" :value="2" />
+                                <el-option label="组ID" :value="3" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="目标值" prop="dst_value" :rules="getDstRules()">
+                            <el-input 
+                                v-model="policyForm.dst_value" 
+                                :placeholder="getDstPlaceholder()"
+                                clearable
+                            />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="协议" prop="protocol">
+                            <el-select v-model="policyForm.protocol" placeholder="请选择协议">
+                                <el-option label="全部协议" :value="0" />
+                                <el-option label="ICMP" :value="1" />
+                                <el-option label="TCP" :value="6" />
+                                <el-option label="UDP" :value="17" />
+                                <el-option label="其他" :value="255" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="动作" prop="action">
+                            <el-radio-group v-model="policyForm.action">
+                                <el-radio :label="1">允许</el-radio>
+                                <el-radio :label="0">拒绝</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-form-item label="策略描述" prop="info">
+                    <el-input 
+                        v-model="policyForm.info" 
+                        type="textarea" 
+                        :rows="3"
+                        placeholder="请输入策略描述信息"
+                    />
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="submitPolicy" :loading="submitLoading">
+                        确定
+                    </el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { 
+    GetVPNServerConfigHandler, 
+    GetVPNServerOnlineListHandler,
+    GetMyVPNPolicyHandler,
+    CreateMyVPNPolicyHandler,
+    UpdateMyVPNPolicyHandler,
+    DeleteMyVPNPolicyHandler
+} from '@/api/vpn';
+
+// VPN策略基础接口定义
+interface VPNPolicyBase {
+    server_id: string;
+    ip_type: number;    // 4, 6
+    src_type: number;   // 0-ip,1-network, 2-userID, 3-groupID
+    src_ip: string;     // type 1, set 0.0.0.0/0 is all
+    src_user_id: number; // 0-all, more than 0, user
+    dst_type: number;   // 0-ip,1-network, 2-userID, 3-groupID
+    dst_ip: string;
+    dst_user_id: number;
+    protocol: number;   // 0:is all, 1-ICMP, 17-UDP etc.
+    action: number;     // 0-deny, 1-permit
+    info: string;
+    src_value: string;
+    dst_value: string;
+}
+
+// VPN策略完整接口定义
+interface VPNPolicy extends VPNPolicyBase {
+    ID: number;
+    CreatedAt: string;
+    UpdatedAt: string;
+}
+
+// 服务器配置接口
+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;
+    protocol: number;
+    ip_type: number;
+    ipv4_address_pool: string;
+    ipv6_address_pool: string;
+    dns_server: string;
+    tunnel: string;
+    allow_user_id: Array<{id: number}>;
+    encryption: string;
+    hash: string;
+    no_policy_action: number;
+    user_max_device: number;
+    duration_time: number;
+    ipv4_router: Array<{type: number, ip: string, prefix: number}>;
+    ipv6_router: Array<{type: number, ip: string, prefix: number}>;
+}
+
+// 响应式数据
+const serverList = ref<ServerConfig[]>([]);
+const selectedServer = ref<ServerConfig | null>(null);
+const policyList = ref<VPNPolicy[]>([]);
+const onlineServers = ref<string[]>([]);
+const loading = ref(false);
+const submitLoading = ref(false);
+const dialogVisible = ref(false);
+const matchDialogVisible = ref(false);
+const isEdit = ref(false);
+const policyFormRef = ref();
+
+// 搜索表单
+const searchForm = reactive({
+    src_type: undefined as number | undefined,
+    dst_type: undefined as number | undefined,
+    protocol: undefined as number | undefined,
+    action: undefined as number | undefined
+});
+
+// 分页信息
+const pagination = reactive({
+    page: 1,
+    size: 20,
+    total: 0
+});
+
+// 策略表单
+const policyForm = reactive<VPNPolicyBase & { id?: number }>({
+    id: undefined,
+    server_id: '',
+    ip_type: 4,
+    src_type: 0,
+    src_value: '',
+    dst_value: '',
+    src_ip: '',
+    src_user_id: 0,
+    dst_type: 0,
+    dst_ip: '',
+    dst_user_id: 0,
+    protocol: 0,
+    action: 1,
+    info: ''
+});
+
+// 表单验证规则
+const formRules = {
+    server_id: [{ required: true, message: '服务器ID不能为空', trigger: 'blur' }],
+    ip_type: [{ required: true, message: '请选择IP类型', trigger: 'change' }],
+    src_type: [{ required: true, message: '请选择源类型', trigger: 'change' }],
+    dst_type: [{ required: true, message: '请选择目标类型', trigger: 'change' }],
+    protocol: [{ required: true, message: '请选择协议', trigger: 'change' }],
+    action: [{ required: true, message: '请选择动作', trigger: 'change' }]
+};
+
+// 计算属性
+const dialogTitle = computed(() => isEdit.value ? '编辑策略' : '新增策略');
+
+// 获取服务器配置列表
+const getServerConfigs = async () => {
+    try {
+        const response = await GetVPNServerConfigHandler();
+        serverList.value = response.data;
+    } catch (error) {
+        ElMessage.error('获取服务器配置失败');
+        console.error(error);
+    }
+};
+
+// 获取在线服务器列表
+const getOnlineServers = async () => {
+    try {
+        const response = await GetVPNServerOnlineListHandler();
+        if (response.data && Array.isArray(response.data)) {
+            onlineServers.value = response.data.map((server: any) => server.server_id);
+        }
+    } catch (error) {
+        console.error('获取在线服务器状态失败:', error);
+    }
+};
+
+// 启动定时查询
+const startOnlineStatusTimer = () => {
+    getOnlineServers();
+    setInterval(() => {
+        getOnlineServers();
+    }, 20000);
+};
+
+// 选择服务器
+const selectServer = (server: ServerConfig) => {
+    selectedServer.value = server;
+    policyForm.server_id = server.server_id;
+    loadPolicies();
+};
+
+// 加载策略列表
+const loadPolicies = async () => {
+    if (!selectedServer.value) return;
+    
+    loading.value = true;
+    try {
+        const params = {
+            server_id: selectedServer.value.server_id,
+            page: pagination.page,
+            size: pagination.size,
+            ...searchForm
+        };
+        
+        const response = await GetMyVPNPolicyHandler(params);
+        if (response["code"] === 0) {
+            policyList.value = response.data|| [];
+            pagination.total = policyList.value.length;
+        } else {
+            ElMessage.error(response["message"] || '获取策略列表失败');
+        }
+    } catch (error) {
+        ElMessage.error('获取策略列表失败');
+        console.error(error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+// 搜索策略
+const searchPolicies = () => {
+    pagination.page = 1;
+    loadPolicies();
+};
+
+// 重置搜索
+const resetSearch = () => {
+    Object.keys(searchForm).forEach(key => {
+        searchForm[key] = undefined;
+    });
+    pagination.page = 1;
+    loadPolicies();
+};
+
+// 刷新策略
+const refreshPolicies = () => {
+    pagination.page = 1;
+    loadPolicies();
+};
+
+//显示匹配对话框
+const showMatchDialog = () => {
+    matchDialogVisible.value = true;
+};
+
+// 显示新增对话框
+const showAddDialog = () => {
+    isEdit.value = false;
+    resetForm();
+    dialogVisible.value = true;
+};
+
+// 编辑策略
+const editPolicy = (policy: VPNPolicy) => {
+    isEdit.value = true;
+    Object.assign(policyForm, {
+        id: policy.ID,
+        server_id: policy.server_id,
+        ip_type: policy.ip_type,
+        src_type: policy.src_type,
+        src_ip: policy.src_ip,
+        src_user_id: policy.src_user_id,
+        dst_type: policy.dst_type,
+        dst_ip: policy.dst_ip,
+        dst_user_id: policy.dst_user_id,
+        protocol: policy.protocol,
+        action: policy.action,
+        info: policy.info
+    });
+    switch (policyForm.src_type) {
+        case 0:
+        case 1:
+            policyForm.src_value = policy.src_ip;
+            break;
+        case 2:
+        case 3:  
+            policyForm.src_value = policy.src_user_id.toString();
+            break;
+        default:
+            break;
+    }
+    switch (policyForm.dst_type) {
+        case 0:
+        case 1:    
+            policyForm.dst_value = policy.dst_ip;
+            break;
+        case 2:
+        case 3:    
+            policyForm.dst_value = policy.dst_user_id.toString();
+            break;
+        default:
+            break;
+    }
+    dialogVisible.value = true;
+};
+
+// 删除策略
+const deletePolicy = async (policy: VPNPolicy) => {
+    try {
+        await ElMessageBox.confirm('确定要删除此策略吗？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        });
+        
+        const response = await DeleteMyVPNPolicyHandler({ 
+            id: policy.ID, 
+        });
+        
+        if (response["code"] === 0) {
+            ElMessage.success('删除成功');
+            loadPolicies();
+        } else {
+            ElMessage.error(response["message"] || '删除失败');
+        }
+    } catch (error: any) {
+        if (error !== 'cancel') {
+            ElMessage.error('删除失败');
+            console.error(error);
+        }
+    }
+};
+
+
+// 提交策略
+const submitPolicy = async () => {
+    if (!policyFormRef.value) return;
+    
+    try {
+        await policyFormRef.value.validate();
+        submitLoading.value = true;
+
+        switch (policyForm.src_type) {
+                case 0:
+                case 1:  
+                    policyForm.src_ip = policyForm.src_value;
+                    break;
+                case 2:
+                case 3:  
+                    policyForm.src_user_id = parseInt(policyForm.src_value);
+                    break;
+                default:
+                    break;
+            }
+        switch (policyForm.dst_type) {
+            case 0:
+            case 1:  
+                policyForm.dst_ip = policyForm.dst_value;
+                break;
+            case 2:
+            case 3:  
+                policyForm.dst_user_id = parseInt(policyForm.dst_value);
+                break;
+            default:
+                break;
+        }
+
+        console.log('policyForm:', policyForm);
+        
+        let response;
+        if (isEdit.value && policyForm.id) {
+            response = await UpdateMyVPNPolicyHandler(policyForm);
+        } else {
+            response = await CreateMyVPNPolicyHandler(policyForm);
+        }
+        
+        if (response["code"] === 0) {
+            ElMessage.success(isEdit.value ? '更新成功' : '创建成功');
+            dialogVisible.value = false;
+            loadPolicies();
+        } else {
+            ElMessage.error(response["message"] || '操作失败');
+        }
+    } catch (error) {
+        console.error('表单验证失败:', error);
+    } finally {
+        submitLoading.value = false;
+    }
+};
+
+// 重置表单
+const resetForm = () => {
+    Object.assign(policyForm, {
+        id: undefined,
+        server_id: selectedServer.value?.server_id || '',
+        ip_type: 4,
+        src_type: 0,
+        src_ip: '',
+        src_user_id: 0,
+        dst_type: 0,
+        dst_ip: '',
+        dst_user_id: 0,
+        protocol: 0,
+        action: 1,
+        info: ''
+    });
+    policyFormRef.value?.clearValidate();
+};
+
+// 源类型改变处理
+const onSrcTypeChange = () => {
+    policyForm.src_ip = '';
+    policyForm.src_user_id = 0;
+};
+
+// 目标类型改变处理
+const onDstTypeChange = () => {
+    policyForm.dst_ip = '';
+    policyForm.dst_user_id = 0;
+};
+
+// 获取源类型验证规则
+const getSrcRules = () => {
+    const rules = [{ required: true, message: '此项不能为空', trigger: 'blur' }];
+    
+    switch (policyForm.src_type) {
+        case 0: // IP地址
+        case 1: // 网段
+            rules.push({ 
+                validator: (rule: any, value: string, callback: Function) => {
+                    if (!value) {
+                        callback(new Error('IP地址不能为空'));
+                        return;
+                    }
+                    if (policyForm.src_type === 1) {
+                        // 网段格式验证
+                        const cidrRegex = /^([0-9]{1,3}\.){3}[0-9]{1,3}\/[0-9]{1,2}$/;
+                        if (!cidrRegex.test(value)) {
+                            callback(new Error('请输入正确的CIDR格式，如：192.168.1.0/24'));
+                            return;
+                        }
+                    } else {
+                        // IP地址格式验证
+                        const ipRegex = /^([0-9]{1,3}\.){3}[0-9]{1,3}$/;
+                        if (!ipRegex.test(value)) {
+                            callback(new Error('请输入正确的IP地址格式'));
+                            return;
+                        }
+                    }
+                    callback();
+                },
+                trigger: 'blur'
+            });
+            break;
+        case 2: // 用户ID
+            rules.push({ 
+                validator: (rule: any, value: number, callback: Function) => {
+                    if (!value || value <= 0) {
+                        callback(new Error('用户ID必须大于0'));
+                        return;
+                    }
+                    callback();
+                },
+                trigger: 'blur'
+            });
+            break;
+        case 3: // 组ID
+            rules.push({ 
+                validator: (rule: any, value: number, callback: Function) => {
+                    if (!value || value <= 0) {
+                        callback(new Error('组ID必须大于0'));
+                        return;
+                    }
+                    callback();
+                },
+                trigger: 'blur'
+            });
+            break;
+    }
+    
+    return rules;
+};
+
+// 获取目标类型验证规则
+const getDstRules = () => {
+    const rules = [{ required: true, message: '此项不能为空', trigger: 'blur' }];
+    
+    switch (policyForm.dst_type) {
+        case 0: // IP地址
+        case 1: // 网段
+            rules.push({ 
+                validator: (rule: any, value: string, callback: Function) => {
+                    if (!value) {
+                        callback(new Error('IP地址不能为空'));
+                        return;
+                    }
+                    if (policyForm.dst_type === 1) {
+                        // 网段格式验证
+                        const cidrRegex = /^([0-9]{1,3}\.){3}[0-9]{1,3}\/[0-9]{1,2}$/;
+                        if (!cidrRegex.test(value)) {
+                            callback(new Error('请输入正确的CIDR格式，如：192.168.1.0/24'));
+                            return;
+                        }
+                    } else {
+                        // IP地址格式验证
+                        const ipRegex = /^([0-9]{1,3}\.){3}[0-9]{1,3}$/;
+                        if (!ipRegex.test(value)) {
+                            callback(new Error('请输入正确的IP地址格式'));
+                            return;
+                        }
+                    }
+                    callback();
+                },
+                trigger: 'blur'
+            });
+            break;
+        case 2: // 用户ID
+            rules.push({ 
+                validator: (rule: any, value: number, callback: Function) => {
+                    if (!value || value <= 0) {
+                        callback(new Error('用户ID必须大于0'));
+                        return;
+                    }
+                    callback();
+                },
+                trigger: 'blur'
+            });
+            break;
+        case 3: // 组ID
+            rules.push({ 
+                validator: (rule: any, value: number, callback: Function) => {
+                    if (!value || value <= 0) {
+                        callback(new Error('组ID必须大于0'));
+                        return;
+                    }
+                },
+                trigger: 'blur'
+            });
+            break;
+    }
+    
+    return rules;
+};
+
+// 获取源类型占位符
+const getSrcPlaceholder = () => {
+    switch (policyForm.src_type) {
+        case 0: return '请输入IP地址，如：192.168.1.1';
+        case 1: return '请输入网段，如：192.168.1.0/24';
+        case 2: return '请输入用户ID';
+        case 3: return '请输入组ID';
+        default: return '请输入值';
+    }
+};
+
+// 获取目标类型占位符
+const getDstPlaceholder = () => {
+    switch (policyForm.dst_type) {
+        case 0: return '请输入IP地址，如：192.168.1.1';
+        case 1: return '请输入网段，如：192.168.1.0/24';
+        case 2: return '请输入用户ID';
+        case 3: return '请输入组ID';
+        default: return '请输入值';
+    }
+};
+
+// 获取源类型文本
+const getSrcTypeText = (type: number) => {
+    const types: {[key: number]: string} = {
+        0: 'IP地址',
+        1: '网段',
+        2: '用户ID',
+        3: '组ID'
+    };
+    return types[type] || '未知';
+};
+
+// 获取目标类型文本
+const getDstTypeText = (type: number) => {
+    const types: {[key: number]: string} = {
+        0: 'IP地址',
+        1: '网段',
+        2: '用户ID',
+        3: '组ID'
+    };
+    return types[type] || '未知';
+};
+
+// 获取源值显示
+const getSrcValue = (policy: VPNPolicy) => {
+    switch (policy.src_type) {
+        case 0: return policy.src_ip || '-';
+        case 1: return policy.src_ip || '-';
+        case 2: return `用户ID: ${policy.src_user_id}`;
+        case 3: return `组ID: ${policy.src_user_id}`;
+        default: return '-';
+    }
+};
+
+// 获取目标值显示
+const getDstValue = (policy: VPNPolicy) => {
+    switch (policy.dst_type) {
+        case 0: return policy.dst_ip || '-';
+        case 1: return policy.dst_ip || '-';
+        case 2: return `用户ID: ${policy.dst_user_id}`;
+        case 3: return `组ID: ${policy.dst_user_id}`;
+        default: return '-';
+    }
+};
+
+// 获取协议文本
+const getProtocolText = (protocol: number) => {
+    const protocols: {[key: number]: string} = {
+        0: '全部',
+        1: 'ICMP',
+        6: 'TCP',
+        17: 'UDP',
+        255: '其他'
+    };
+    return protocols[protocol] || '未知';
+};
+
+// 格式化时间
+const formatTime = (timeStr: string) => {
+    if (!timeStr) return '-';
+    return new Date(timeStr).toLocaleString('zh-CN');
+};
+
+// 分页处理
+const handleSizeChange = (size: number) => {
+    pagination.size = size;
+    pagination.page = 1;
+    loadPolicies();
+};
+
+const handleCurrentChange = (page: number) => {
+    pagination.page = page;
+    loadPolicies();
+};
+
+// 组件挂载
+onMounted(() => {
+    getServerConfigs();
+    startOnlineStatusTimer();
+});
+</script>
+
+<style scoped>
+.vpn-policy-management {
+    padding: 20px;
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: bold;
+}
+
+.header-actions {
+    display: flex;
+    gap: 10px;
+}
+
+.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;
+    display: flex;
+    align-items: center;
+}
+
+.status-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #909399;
+    margin-right: 8px;
+    transition: background-color 0.3s;
+}
+
+.status-indicator.online {
+    background-color: #67c23a;
+    box-shadow: 0 0 4px rgba(103, 194, 58, 0.5);
+}
+
+.server-ip {
+    font-size: 12px;
+    color: #909399;
+}
+
+.search-bar {
+    background: #f8f9fa;
+    padding: 15px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+
+.text-secondary {
+    font-size: 12px;
+    color: #909399;
+    margin-top: 4px;
+}
+
+.pagination-wrapper {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+}
+
+.dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/vpn-server-config.vue b/src/views/system/vpn-server-config.vue
index 1a217d7..d885634 100644
--- a/src/views/system/vpn-server-config.vue
+++ b/src/views/system/vpn-server-config.vue
@@ -103,11 +103,10 @@
 
                         <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-form-item label="策略匹配失败">
+                                    <el-select v-model="selectedServer.no_policy_action" placeholder="请选择策略匹配失败动作">
+                                        <el-option label="拒绝" :value="0" />
+                                        <el-option label="允许" :value="1" />
                                     </el-select>
                                 </el-form-item>
                             </el-col>
@@ -360,6 +359,7 @@ interface ServerConfig {
     allow_user_id: UserID[];
     encryption: string;
     hash: string;
+    no_policy_action:number;
     user_max_device: number;
     duration_time: number;
     ipv4_router: VPNRouter[];
diff --git a/src/views/system/vpn-server-online-user.vue b/src/views/system/vpn-server-online-user.vue
index 563809e..c72cede 100644
--- a/src/views/system/vpn-server-online-user.vue
+++ b/src/views/system/vpn-server-online-user.vue
@@ -106,6 +106,7 @@ interface ServerConfig {
     allow_user_id: any[];
     encryption: string;
     hash: string;
+    no_policy_action:number;
     user_max_device: number;
     duration_time: number;
     ipv4_router: any[];