CalvinBackup/CyberStrikeAI
1
0
Fork 0
mirror of https://github.com/Ed1s0nZ/CyberStrikeAI.git synced 2026-05-15 21:08:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
公明
2025-12-30 23:21:09 +08:00
committed by GitHub
parent d48238f6a0
commit a32ba40353
2 changed files with 137 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/style.css
+70 -1
View File
@@ -2335,6 +2335,75 @@ header {
color: var(--text-secondary);
}
/* 工具调用状态徽章 */
.tool-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
margin-left: 8px;
white-space: nowrap;
vertical-align: middle;
}
.tool-status-badge.tool-status-running {
background: rgba(0, 102, 255, 0.12);
color: var(--accent-color);
border: 1px solid rgba(0, 102, 255, 0.3);
}
.tool-status-badge.tool-status-running::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-color);
display: inline-block;
animation: tool-running-pulse 1.5s infinite;
}
@keyframes tool-running-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.8);
}
}
.tool-status-badge.tool-status-completed {
background: rgba(40, 167, 69, 0.12);
color: var(--success-color);
border: 1px solid rgba(40, 167, 69, 0.3);
}
.tool-status-badge.tool-status-failed {
background: rgba(220, 53, 69, 0.12);
color: var(--error-color);
border: 1px solid rgba(220, 53, 69, 0.3);
}
/* 工具调用项状态样式 */
.timeline-item-tool_call.tool-call-running {
border-left-color: var(--accent-color);
background: rgba(0, 102, 255, 0.08);
}
.timeline-item-tool_call.tool-call-completed {
border-left-color: var(--success-color);
background: rgba(40, 167, 69, 0.08);
}
.timeline-item-tool_call.tool-call-failed {
border-left-color: var(--error-color);
background: rgba(220, 53, 69, 0.08);
}
/* 活跃任务栏 */
.active-tasks-bar {
display: none;
@@ -4060,7 +4129,7 @@ header {
.attack-chain-container {
flex: 1;
min-height: 0;
background: #ffffff; // 使用纯白色背景，提高节点对比度
background: #ffffff;
border: none;
position: relative;
overflow: hidden;
web/static/js/monitor.js
+67 -1
View File
@@ -3,6 +3,9 @@ let activeTaskInterval = null;
const ACTIVE_TASK_REFRESH_INTERVAL = 10000; // 10秒检查一次
const TASK_FINAL_STATUSES = new Set(['failed', 'timeout', 'cancelled', 'completed']);
// 存储工具调用ID到DOM元素的映射，用于更新执行状态
const toolCallStatusMap = new Map();
const conversationExecutionTracker = {
activeConversations: new Set(),
update(tasks = []) {
@@ -493,12 +496,26 @@ function handleStreamEvent(event, progressElement, progressId,
const toolName = toolInfo.toolName || '未知工具';
const index = toolInfo.index || 0;
const total = toolInfo.total || 0;
addTimelineItem(timeline, 'tool_call', {
const toolCallId = toolInfo.toolCallId || null;
// 添加工具调用项，并标记为执行中
const toolCallItemId = addTimelineItem(timeline, 'tool_call', {
title: `🔧 调用工具: ${escapeHtml(toolName)} (${index}/${total})`,
message: event.message,
data: toolInfo,
expanded: false
});
// 如果有toolCallId，存储映射关系以便后续更新状态
if (toolCallId && toolCallItemId) {
toolCallStatusMap.set(toolCallId, {
itemId: toolCallItemId,
timeline: timeline
});
// 添加执行中状态指示器
updateToolCallStatus(toolCallId, 'running');
}
break;
case 'tool_result':
@@ -507,6 +524,15 @@ function handleStreamEvent(event, progressElement, progressId,
const resultToolName = resultInfo.toolName || '未知工具';
const success = resultInfo.success !== false;
const statusIcon = success ? '✅' : '❌';
const resultToolCallId = resultInfo.toolCallId || null;
// 如果有关联的toolCallId，更新工具调用项的状态
if (resultToolCallId && toolCallStatusMap.has(resultToolCallId)) {
updateToolCallStatus(resultToolCallId, success ? 'completed' : 'failed');
// 从映射中移除（已完成）
toolCallStatusMap.delete(resultToolCallId);
}
addTimelineItem(timeline, 'tool_result', {
title: `${statusIcon} 工具 ${escapeHtml(resultToolName)} 执行${success ? '完成' : '失败'}`,
message: event.message,
@@ -767,9 +793,46 @@ function handleStreamEvent(event, progressElement, progressId,
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
// 更新工具调用状态
function updateToolCallStatus(toolCallId, status) {
const mapping = toolCallStatusMap.get(toolCallId);
if (!mapping) return;
const item = document.getElementById(mapping.itemId);
if (!item) return;
const titleElement = item.querySelector('.timeline-item-title');
if (!titleElement) return;
// 移除之前的状态类
item.classList.remove('tool-call-running', 'tool-call-completed', 'tool-call-failed');
// 根据状态更新样式和文本
let statusText = '';
if (status === 'running') {
item.classList.add('tool-call-running');
statusText = ' <span class="tool-status-badge tool-status-running">执行中...</span>';
} else if (status === 'completed') {
item.classList.add('tool-call-completed');
statusText = ' <span class="tool-status-badge tool-status-completed">✅ 已完成</span>';
} else if (status === 'failed') {
item.classList.add('tool-call-failed');
statusText = ' <span class="tool-status-badge tool-status-failed">❌ 执行失败</span>';
}
// 更新标题（保留原有文本，追加状态）
const originalText = titleElement.innerHTML;
// 移除之前可能存在的状态标记
const cleanText = originalText.replace(/\s*<span class="tool-status-badge[^>]*>.*?<\/span>/g, '');
titleElement.innerHTML = cleanText + statusText;
}
// 添加时间线项目
function addTimelineItem(timeline, type, options) {
const item = document.createElement('div');
// 生成唯一ID
const itemId = 'timeline-item-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
item.id = itemId;
item.className = `timeline-item timeline-item-${type}`;
const time = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
@@ -828,6 +891,9 @@ function addTimelineItem(timeline, type, options) {
if (!expanded && (type === 'tool_call' || type === 'tool_result')) {
// 对于工具调用和结果，默认显示摘要
}
// 返回item ID以便后续更新
return itemId;
}
// 加载活跃任务列表