feat: HTTP方法颜色语义化显示，点击扫描URL跳转HTTP信息页

Author: githubnull

src/frontEnd/src/utils/requestFormatter.ts

@@ -99,9 +99,33 @@ export function highlightHttpRequest(lines: string[], searchKeyword?: string, op
         const url = parts.slice(1, -1).join(' ') || ''
         const version = parts[parts.length - 1] || ''
 
-        highlightedLine = `<span style="background-color:#8b5cf6 !important; color:#ffffff !important; font-weight:bold !important; padding:2px 6px !important; border-radius:4px !important; font-size:12px !important; display:inline-block !important; margin-right:8px !important; border:1px solid #7c3aed !important;">${escapeHtml(method)}</span>` +
-          `<span style="color:#34d399 !important; text-decoration:underline !important; font-weight:600 !important;">${escapeHtml(url)}</span>` +
-          ` <span style="color:#06b6d4 !important; font-weight:600 !important;">${escapeHtml(version)}</span>`
+        // 根据HTTP方法的安全性/危险程度标记颜色
+        // GET/HEAD/OPTIONS: 绿色（只读，安全）
+        // POST/PUT/PATCH: 橙色（写入，有影响）
+        // DELETE: 红色（危险，删除数据）
+        let methodColor = '#10b981' // 默认绿色（安全）
+        let methodBgColor = '#10b981'
+        let methodBorderColor = '#059669'
+        
+        const upperMethod = method.toUpperCase()
+        if (['POST', 'PUT', 'PATCH'].includes(upperMethod)) {
+          // 写入方法 - 橙色
+          methodBgColor = '#f59e0b'
+          methodBorderColor = '#d97706'
+        } else if (upperMethod === 'DELETE') {
+          // 删除方法 - 红色
+          methodBgColor = '#ef4444'
+          methodBorderColor = '#dc2626'
+        } else {
+          // GET/HEAD/OPTIONS等只读方法 - 绿色
+          methodBgColor = '#10b981'
+          methodBorderColor = '#059669'
+        }
+        
+        // 请求方法、PATH、版本字体大小一致，都使用 inherit 继承父元素的22px
+        highlightedLine = `<span style="background-color:${methodBgColor} !important; color:#ffffff !important; font-weight:bold !important; padding:4px 10px !important; border-radius:6px !important; font-size:inherit !important; display:inline-block !important; margin-right:10px !important; border:1px solid ${methodBorderColor} !important; vertical-align:middle !important;">${escapeHtml(method)}</span>` +
+          `<span style="color:#34d399 !important; text-decoration:underline !important; font-weight:600 !important; font-size:inherit !important;">${escapeHtml(url)}</span>` +
+          ` <span style="color:#06b6d4 !important; font-weight:600 !important; font-size:inherit !important;">${escapeHtml(version)}</span>`
       }
     } else if (!isBody) {
       // 2. HTTP头高亮

src/frontEnd/src/views/TaskList/index.vue

@@ -85,7 +85,11 @@
           </Column>
           <Column field="scanUrl" header="扫描URL" :style="{ minWidth: '250px', maxWidth: '600px' }" sortable>
             <template #body="{ data }">
-              <div class="url-cell" :title="data.scanUrl">
+              <div 
+                class="url-cell clickable-url" 
+                :title="'点击查看HTTP请求信息'" 
+                @click="goToTaskHttpInfo(data)"
+              >
                 {{ data.scanUrl }}
               </div>
             </template>
@@ -98,6 +102,9 @@
                 :value="data.injected ? '存在注入' : '无注入'"
                 :severity="data.injected ? 'danger' : 'success'"
                 :icon="data.injected ? 'pi pi-exclamation-triangle' : 'pi pi-check-circle'"
+                :class="{ 'clickable-tag': data.injected }"
+                @click="data.injected && goToTaskResults(data)"
+                v-tooltip.top="data.injected ? '点击查看扫描结果' : ''"
               />
               <Tag v-else value="未知" severity="secondary" icon="pi pi-question-circle" />
             </template>
@@ -428,6 +435,16 @@ function goToTaskLogs(task: any) {
   router.push({ path: `/tasks/${task.taskid}`, query: { tab: '4' } })
 }
 
+function goToTaskResults(task: any) {
+  // 跳转到任务详情页的扫描结果标签页（value="3"）
+  router.push({ path: `/tasks/${task.taskid}`, query: { tab: '3' } })
+}
+
+function goToTaskHttpInfo(task: any) {
+  // 跳转到任务详情页的HTTP请求信息标签页（value="1"）
+  router.push({ path: `/tasks/${task.taskid}`, query: { tab: '1' } })
+}
+
 async function stopTask(taskId: string) {
   await taskStore.stopTask(taskId)
 }
@@ -745,6 +762,27 @@ function confirmDeleteAll() {
   }
 }
 
+// 可点击URL样式
+.clickable-url {
+  cursor: pointer;
+  color: #6366f1;
+  text-decoration: none;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: #4f46e5;
+    background: rgba(99, 102, 241, 0.1);
+    text-decoration: underline;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
+    border-radius: 4px;
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
 .clickable-id {
   cursor: pointer;
   padding: 4px 8px;