添加策略匹配

src/views/system/vpn-policy.vue

@@ -65,11 +65,32 @@
                             </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 
-                                    <el-option label="ICMP" :value="1" />
+                                        v-for="item in protocolOptions" 
-                                    <el-option label="TCP" :value="6" />
+                                        :key="item.value" 
-                                    <el-option label="UDP" :value="17" />
+                                        :label="item.label" 
+                                        :value="item.value" 
+                                    />
                                 </el-select>
+                                <el-button 
+                                    type="text" 
+                                    @click="showCustomProtocolInput = !showCustomProtocolInput"
+                                    style="margin-left: 8px;"
+                                >
+                                    {{ showCustomProtocolInput ? '取消' : '+ 自定义' }}
+                                </el-button>
+                                <div v-if="showCustomProtocolInput" style="margin-top: 8px;">
+                                    <el-input 
+                                        v-model.number="customProtocolInput" 
+                                        placeholder="输入协议号(0-512)" 
+                                        type="number"
+                                        :min="0"
+                                        :max="512"
+                                        style="width: 120px;"
+                                        @keyup.enter="addCustomProtocol"
+                                    />
+                                    <el-button type="primary" size="small" @click="addCustomProtocol" style="margin-left: 8px;">添加</el-button>
+                                </div>
                             </el-form-item>
                             <el-form-item label="动作">
                                 <el-select v-model="searchForm.action" placeholder="请选择动作" clearable style="width: 100px;">
@@ -235,12 +256,32 @@
                     <el-col :span="12">
                         <el-form-item label="协议" prop="protocol">
                             <el-select v-model="policyForm.protocol" placeholder="请选择协议">
-                                <el-option label="全部协议" :value="0" />
+                                <el-option 
-                                <el-option label="ICMP" :value="1" />
+                                    v-for="item in protocolOptions" 
-                                <el-option label="TCP" :value="6" />
+                                    :key="item.value" 
-                                <el-option label="UDP" :value="17" />
+                                    :label="item.label" 
-                                <el-option label="其他" :value="255" />
+                                    :value="item.value" 
+                                />
                             </el-select>
+                            <el-button 
+                                type="text" 
+                                @click="showCustomProtocolInput = !showCustomProtocolInput"
+                                style="margin-left: 8px;"
+                            >
+                                {{ showCustomProtocolInput ? '取消' : '+ 自定义' }}
+                            </el-button>
+                            <div v-if="showCustomProtocolInput" style="margin-top: 8px;">
+                                <el-input 
+                                    v-model.number="customProtocolInput" 
+                                    placeholder="输入协议号(0-512)" 
+                                    type="number"
+                                    :min="0"
+                                    :max="512"
+                                    style="width: 120px;"
+                                    @keyup.enter="addCustomProtocol"
+                                />
+                                <el-button type="primary" size="small" @click="addCustomProtocol" style="margin-left: 8px;">添加</el-button>
+                            </div>
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
@@ -358,12 +399,32 @@
                     <el-col :span="12">
                         <el-form-item label="协议" prop="protocol">
                             <el-select v-model="matchForm.protocol" placeholder="请选择协议">
-                                <el-option label="全部协议" :value="0" />
+                                <el-option 
-                                <el-option label="ICMP" :value="1" />
+                                    v-for="item in protocolOptions" 
-                                <el-option label="TCP" :value="6" />
+                                    :key="item.value" 
-                                <el-option label="UDP" :value="17" />
+                                    :label="item.label" 
-                                <el-option label="其他" :value="255" />
+                                    :value="item.value" 
+                                />
                             </el-select>
+                            <el-button 
+                                type="text" 
+                                @click="showCustomProtocolInput = !showCustomProtocolInput"
+                                style="margin-left: 8px;"
+                            >
+                                {{ showCustomProtocolInput ? '取消' : '+ 自定义' }}
+                            </el-button>
+                            <div v-if="showCustomProtocolInput" style="margin-top: 8px;">
+                                <el-input 
+                                    v-model.number="customProtocolInput" 
+                                    placeholder="输入协议号(0-512)" 
+                                    type="number"
+                                    :min="0"
+                                    :max="512"
+                                    style="width: 120px;"
+                                    @keyup.enter="addCustomProtocol"
+                                />
+                                <el-button type="primary" size="small" @click="addCustomProtocol" style="margin-left: 8px;">添加</el-button>
+                            </div>
                         </el-form-item>
                     </el-col>
                 </el-row>
@@ -418,6 +479,46 @@ import {
 import { match } from 'assert';
 import { el } from 'element-plus/es/locale';
 
+// 全局协议选项数组
+const protocolOptions = ref([
+    { label: '全部协议', value: 0 },
+    { label: 'ICMP', value: 1 },
+    { label: 'IGMP', value: 2},
+    { label: 'TCP', value: 6 },
+    { label: 'EGP', value: 8 },
+    { label: 'IGP', value: 9 },
+    { label: 'UDP', value: 17 },
+    { label: 'GRE', value: 47 },
+    { label: 'ESP', value: 50 },
+    { label:"AH", value: 51},
+    { label: 'IPv6-ICMP', value: 58},
+]);
+
+// 自定义协议输入
+const customProtocolInput = ref('');
+const showCustomProtocolInput = ref(false);
+
+// 添加自定义协议
+const addCustomProtocol = () => {
+    const value = parseInt(customProtocolInput.value);
+    if (isNaN(value) || value < 0 || value > 512) {
+        ElMessage.error('协议号必须在0-512范围内');
+        return;
+    }
+    
+    // 检查是否已存在
+    const exists = protocolOptions.value.some(item => item.value === value);
+    if (exists) {
+        ElMessage.warning('该协议号已存在');
+        return;
+    }
+    
+    protocolOptions.value.push({ label: `自定义(${value})`, value });
+    customProtocolInput.value = '';
+    showCustomProtocolInput.value = false;
+    ElMessage.success('添加自定义协议成功');
+};
+
 // VPN策略基础接口定义
 interface VPNPolicyBase {
     name: string;
@@ -1090,14 +1191,8 @@ const getDstValue = (policy: VPNPolicy) => {
 
 // 获取协议文本
 const getProtocolText = (protocol: number) => {
-    const protocols: {[key: number]: string} = {
+    const found = protocolOptions.value.find(item => item.value === protocol);
-        0: '全部',
+    return found ? found.label : '未知';
-        1: 'ICMP',
-        6: 'TCP',
-        17: 'UDP',
-        255: '其他'
-    };
-    return protocols[protocol] || '未知';
 };
 
 // 格式化时间