feat(log): 优化 WAF 日志导出功能

- 添加 API 名称分类选择功能，提高选择效率
- 优化 API 名称展示样式，使用 flex 布局
- 移除不必要的注释和冗余代码
-调整导出时间范围默认值为当天

web/src/pages/log/waflog.vue

@@ -130,11 +130,15 @@
           <div class="api-names-header">
             <h4 class="section-title">API名称选择</h4>
             <div class="api-names-actions">
-              <span class="selected-count">已选择: {{ exportForm.apiNames.length }} 个</span>
-              <a-button size="small" type="link" @click="selectAllApiNames">全选</a-button>
-              <a-button size="small" type="link" @click="clearAllApiNames">清空</a-button>
+              <span class="selected-count">已选择: {{ exportForm.apiNames.length }} / {{ apiNameOptions.length }}</span>
             </div>
           </div>
+          <div class="api-quick-filters">
+            <a-button size="small" @click="selectApiNamesByCategory('tcp_udp_web')">TCP/UDP/Web相关</a-button>
+            <a-button size="small" @click="selectApiNamesByCategory('blacklist_whitelist')">黑白名单</a-button>
+            <a-button size="small" type="dashed" @click="selectAllApiNames">全选</a-button>
+            <a-button size="small" type="dashed" danger @click="clearAllApiNames">清空</a-button>
+          </div>
           <div class="api-names-grid">
             <a-checkbox-group v-model:value="exportForm.apiNames" class="custom-checkbox-group">
               <div class="checkbox-grid">
@@ -278,7 +282,6 @@ const columns = [
 const fetchData = () => {
   loading.value = true;
   
-  // 构造请求参数，并处理特殊类型
   const params = {
     requestIp: queryParam.value.requestIp || '',
     uid: queryParam.value.uid ? parseInt(queryParam.value.uid) : '',
@@ -294,10 +297,7 @@ const fetchData = () => {
     order: 'desc'
   };
   
-  console.log('发送WAF日志查询参数:', params);
-  
   getWafLogList(params).then(response => {
-    // 根据实际返回格式处理数据
     if (response && response.code === 0 && response.data) {
       const apiData = response.data;
       if (apiData.records && Array.isArray(apiData.records)) {
@@ -308,12 +308,10 @@ const fetchData = () => {
       } else {
         dataSource.value = [];
         pagination.value.total = 0;
-        console.warn('响应中无WAF日志数据记录');
       }
     } else {
       dataSource.value = [];
       pagination.value.total = 0;
-      console.error('无效的WAF日志响应格式或响应错误', response);
     }
     loading.value = false;
   }).catch((error) => {
@@ -348,6 +346,10 @@ const resetSearch = () => {
 
 const detailModalRef = ref(null);
 
+const goToInfo = (id) => {
+  detailModalRef.value?.open(id);
+};
+
 // 导出相关
 const exportModalVisible = ref(false);
 const exportLoading = ref(false);
@@ -368,32 +370,52 @@ const exportForm = ref({
   endTime: null
 });
 
-// 判断是否为TCP、UDP、Web相关的API
-const isTcpUdpWebRelated = (apiName) => {
-  const keywords = ['tcp', 'udp', 'web', '游戏盾', '转发', '网关', '限流', '防护', '规则', '策略'];
-  const lowerApiName = apiName.toLowerCase();
-  return keywords.some(keyword => lowerApiName.includes(keyword.toLowerCase()));
+// API 名称关键字分类
+const apiNameCategories = {
+  tcp_udp_web: ['tcp', 'udp', '转发', 'web', '网站', 'cdn', 'host', '域名', '游戏盾'],
+  blacklist_whitelist: ['ip', '黑白名单', 'waf', '防护', '规则', '策略', 'cc'],
 };
 
-const goToInfo = (id) => {
-  // 打开模态框而不是跳转页面
-  detailModalRef.value?.open(id);
+// 根据分类选择API名称 (此操作会覆盖当前选择)
+const selectApiNamesByCategory = (category) => {
+  const keywords = apiNameCategories[category];
+  if (!keywords) {
+    exportForm.value.apiNames = [];
+    return;
+  }
+  const selected = apiNameOptions.value
+    .filter(option => {
+      const lowerLabel = option.label.toLowerCase();
+      return keywords.some(keyword => lowerLabel.includes(keyword));
+    })
+    .map(option => option.value);
+  exportForm.value.apiNames = selected;
+};
+
+// 默认选中TCP, UDP, Web相关
+const setDefaultApiSelection = () => {
+  const defaultKeywords = apiNameCategories.tcp_udp_web || [];
+  
+  const defaultSelected = apiNameOptions.value
+    .filter(option => {
+      const lowerLabel = option.label.toLowerCase();
+      return defaultKeywords.some(keyword => lowerLabel.includes(keyword));
+    })
+    .map(option => option.value);
+  exportForm.value.apiNames = defaultSelected;
 };
 
 // 显示导出弹窗
 const showExportModal = async () => {
   try {
-    // 获取API描述映射
     const response = await getApiDescriptions();
     if (response && response.code === 0 && response.data) {
-      // 将API描述映射转换为checkbox选项格式，只显示中文名称
       apiNameOptions.value = Object.entries(response.data).map(([key, value]) => ({
-        label: value, // 只显示中文名称
-        value: value  // 传给后端的值也是中文名称
+        label: value,
+        value: value
       }));
     }
     
-    // 重置表单
     exportForm.value = {
       id: '',
       uid: '',
@@ -409,17 +431,11 @@ const showExportModal = async () => {
       endTime: null
     };
     
-    // 默认选中TCP、UDP、Web相关的API
     if (apiNameOptions.value.length > 0) {
-      const defaultSelected = apiNameOptions.value
-        .filter(option => isTcpUdpWebRelated(option.label))
-        .map(option => option.value);
-      exportForm.value.apiNames = defaultSelected;
+      setDefaultApiSelection();
     }
     
-    // 重置高级筛选折叠状态
     advancedFilterKey.value = [];
-    
     exportModalVisible.value = true;
   } catch (error) {
     console.error('获取API描述失败:', error);
@@ -430,7 +446,6 @@ const showExportModal = async () => {
 // 时间范围快捷选择
 const setTimeRange = (range) => {
   const now = dayjs();
-  
   switch (range) {
     case 'today':
       exportForm.value.startTime = now.startOf('day');
@@ -452,30 +467,24 @@ const setTimeRange = (range) => {
   }
 };
 
-// 清空时间范围
 const clearTimeRange = () => {
   exportForm.value.startTime = null;
   exportForm.value.endTime = null;
 };
 
-// 全选API名称
 const selectAllApiNames = () => {
   exportForm.value.apiNames = apiNameOptions.value.map(option => option.value);
 };
 
-// 清空API名称选择
 const clearAllApiNames = () => {
   exportForm.value.apiNames = [];
 };
 
-// 处理导出
 const handleExport = async () => {
   try {
     exportLoading.value = true;
     
-    // 构造导出参数，只传递有值的参数
     const params = {};
-    
     if (exportForm.value.id) params.id = parseInt(exportForm.value.id);
     if (exportForm.value.uid) params.uid = parseInt(exportForm.value.uid);
     if (exportForm.value.name) params.name = exportForm.value.name;
@@ -499,12 +508,8 @@ const handleExport = async () => {
       params.endTime = dayjs(exportForm.value.endTime).format('YYYY-MM-DD HH:mm:ss');
     }
     
-    console.log('导出参数:', params);
-    
-    // 调用导出接口
     const response = await exportWafLog(params);
     
-    // 处理文件下载
     const blob = new Blob([response], { 
       type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
     });
@@ -527,7 +532,6 @@ const handleExport = async () => {
   }
 };
 
-// 取消导出
 const handleExportCancel = () => {
   exportModalVisible.value = false;
 };
@@ -542,7 +546,6 @@ onMounted(() => {
   margin-bottom: 24px;
 }
 
-/* 表格样式优化 */
 :deep(.ant-table-body) {
   overflow-x: auto !important;
 }
@@ -572,7 +575,6 @@ onMounted(() => {
   background: #a8a8a8;
 }
 
-/* 导出弹窗样式 */
 .export-form-container {
   max-height: 70vh;
   overflow-y: auto;
@@ -604,7 +606,6 @@ onMounted(() => {
   color: #262626;
 }
 
-/* 时间范围选择区域 */
 .time-range-section {
   background: #fafafa;
   border: 1px solid #f0f0f0;
@@ -630,7 +631,6 @@ onMounted(() => {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-/* API名称选择区域 */
 .api-names-section {
   background: #fafafa;
   border: 1px solid #f0f0f0;
@@ -646,6 +646,13 @@ onMounted(() => {
   margin-bottom: 12px;
 }
 
+.api-quick-filters {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
 .api-names-actions {
   display: flex;
   align-items: center;
@@ -655,7 +662,6 @@ onMounted(() => {
 .selected-count {
   font-size: 12px;
   color: #666;
-  margin-right: 8px;
 }
 
 .api-names-grid {
@@ -690,8 +696,8 @@ onMounted(() => {
 }
 
 .checkbox-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  display: flex;
+  flex-wrap: wrap;
   gap: 8px 16px;
 }
 
@@ -702,14 +708,13 @@ onMounted(() => {
   transition: background-color 0.2s ease;
   border-radius: 4px;
   padding-left: 8px;
-  margin-left: 0 !important;
+  margin-right: 16px; /* 增加右边距确保换行时有间距 */
 }
 
 .checkbox-item:hover {
   background-color: #f5f5f5;
 }
 
-/* 高级筛选折叠面板样式 */
 :deep(.ant-collapse-ghost .ant-collapse-item) {
   border: 1px solid #f0f0f0;
   border-radius: 8px;
@@ -732,7 +737,6 @@ onMounted(() => {
   padding: 16px;
 }
 
-/* 导出弹窗整体样式 */
 :deep(.export-modal .ant-modal-body) {
   padding: 20px 24px;
 }