CalvinBackup/CyberStrikeAI
1
0
Fork 0
mirror of https://github.com/Ed1s0nZ/CyberStrikeAI.git synced 2026-07-06 12:37:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
公明
2026-02-09 19:20:43 +08:00
committed by GitHub
parent 772a04b715
commit 870715fc8f
6 changed files with 165 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/style.css
+18
View File
@@ -8405,6 +8405,24 @@ header {
font-variant-numeric: tabular-nums;
}
.dashboard-tools-bar-tooltip {
display: none;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
max-width: 320px;
padding: 6px 10px;
font-size: 0.8125rem;
line-height: 1.4;
color: #fff;
background: rgba(15, 23, 42, 0.95);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
pointer-events: none;
word-break: break-all;
}
.dashboard-cta-block {
position: relative;
margin-top: 24px;
web/static/js/dashboard.js
+72 -3
View File
@@ -29,11 +29,12 @@ async function refreshDashboard() {
}
try {
const [tasksRes, vulnRes, batchRes, monitorRes, skillsRes] = await Promise.all([
const [tasksRes, vulnRes, batchRes, monitorRes, knowledgeRes, skillsRes] = await Promise.all([
apiFetch('/api/agent-loop/tasks').then(r => r.ok ? r.json() : null).catch(() => null),
apiFetch('/api/vulnerabilities/stats').then(r => r.ok ? r.json() : null).catch(() => null),
apiFetch('/api/batch-tasks?limit=500&page=1').then(r => r.ok ? r.json() : null).catch(() => null),
apiFetch('/api/monitor/stats').then(r => r.ok ? r.json() : null).catch(() => null),
apiFetch('/api/knowledge/stats').then(r => r.ok ? r.json() : null).catch(() => null),
apiFetch('/api/skills/stats').then(r => r.ok ? r.json() : null).catch(() => null)
]);
@@ -108,6 +109,20 @@ async function refreshDashboard() {
renderDashboardToolsBar(null);
}
// 知识：{ enabled, total_categories, total_items, ... }
const knowledgeValueEl = document.getElementById('dashboard-knowledge-value');
if (knowledgeRes && typeof knowledgeRes === 'object') {
if (knowledgeRes.enabled === false) {
if (knowledgeValueEl) knowledgeValueEl.textContent = '知识功能暂未启用';
} else {
const categories = knowledgeRes.total_categories ?? 0;
const items = knowledgeRes.total_items ?? 0;
if (knowledgeValueEl) knowledgeValueEl.textContent = `${categories} 个分类，共 ${items} 项`;
}
} else {
if (knowledgeValueEl) knowledgeValueEl.textContent = '-';
}
// Skills：{ total_skills, total_calls, ... }
if (skillsRes && typeof skillsRes === 'object') {
setEl('dashboard-skills-count', String(skillsRes.total_skills ?? '-'));
@@ -137,6 +152,8 @@ function setEl(id, text) {
function setDashboardOverviewPlaceholder(t) {
['dashboard-batch-pending', 'dashboard-batch-running', 'dashboard-batch-done',
'dashboard-tools-count', 'dashboard-tools-calls', 'dashboard-skills-count', 'dashboard-skills-calls'].forEach(id => setEl(id, t));
const knowledgeValueEl = document.getElementById('dashboard-knowledge-value');
if (knowledgeValueEl) knowledgeValueEl.textContent = t;
}
// Top 30 工具执行次数柱状图颜色（30 色不重复，柔和、易区分）
@@ -190,11 +207,63 @@ function renderDashboardToolsBar(monitorRes) {
var pct = maxCalls > 0 ? (e.totalCalls / maxCalls) * 100 : 0;
var label = e.name.length > 12 ? e.name.slice(0, 10) + '…' : e.name;
var color = DASHBOARD_BAR_COLORS[i % DASHBOARD_BAR_COLORS.length];
html += '<div class="dashboard-tools-bar-item">';
html += '<span class="dashboard-tools-bar-label" title="' + esc(e.name) + '">' + esc(label) + '</span>';
var fullName = esc(e.name);
html += '<div class="dashboard-tools-bar-item" data-tooltip="' + fullName + '">';
html += '<span class="dashboard-tools-bar-label">' + esc(label) + '</span>';
html += '<div class="dashboard-tools-bar-track"><div class="dashboard-tools-bar-fill" style="width:' + pct + '%;background:' + color + '"></div></div>';
html += '<span class="dashboard-tools-bar-value">' + e.totalCalls + '</span>';
html += '</div>';
});
barChartEl.innerHTML = html;
attachDashboardBarTooltips(barChartEl);
}
var dashboardBarTooltipEl = null;
var dashboardBarTooltipTimer = null;
function attachDashboardBarTooltips(barChartEl) {
if (!barChartEl) return;
if (!dashboardBarTooltipEl) {
dashboardBarTooltipEl = document.createElement('div');
dashboardBarTooltipEl.className = 'dashboard-tools-bar-tooltip';
dashboardBarTooltipEl.setAttribute('role', 'tooltip');
document.body.appendChild(dashboardBarTooltipEl);
}
barChartEl.removeEventListener('mouseover', dashboardBarTooltipOnOver);
barChartEl.removeEventListener('mouseout', dashboardBarTooltipOnOut);
barChartEl.addEventListener('mouseover', dashboardBarTooltipOnOver);
barChartEl.addEventListener('mouseout', dashboardBarTooltipOnOut);
}
function dashboardBarTooltipOnOver(ev) {
var item = ev.target && ev.target.closest && ev.target.closest('.dashboard-tools-bar-item');
if (!item || !dashboardBarTooltipEl) return;
var text = item.getAttribute('data-tooltip');
if (!text) return;
clearTimeout(dashboardBarTooltipTimer);
dashboardBarTooltipTimer = setTimeout(function () {
dashboardBarTooltipEl.textContent = text;
dashboardBarTooltipEl.style.display = 'block';
requestAnimationFrame(function () {
var rect = item.getBoundingClientRect();
var ttRect = dashboardBarTooltipEl.getBoundingClientRect();
var x = rect.left + (rect.width / 2) - (ttRect.width / 2);
var y = rect.top - ttRect.height - 6;
if (y < 8) y = rect.bottom + 6;
var pad = 8;
if (x < pad) x = pad;
if (x + ttRect.width > window.innerWidth - pad) x = window.innerWidth - ttRect.width - pad;
dashboardBarTooltipEl.style.left = x + 'px';
dashboardBarTooltipEl.style.top = y + 'px';
});
}, 180);
}
function dashboardBarTooltipOnOut(ev) {
var item = ev.target && ev.target.closest && ev.target.closest('.dashboard-tools-bar-item');
var related = ev.relatedTarget && ev.relatedTarget.closest && ev.relatedTarget.closest('.dashboard-tools-bar-item');
if (item && item === related) return;
clearTimeout(dashboardBarTooltipTimer);
dashboardBarTooltipTimer = null;
if (dashboardBarTooltipEl) dashboardBarTooltipEl.style.display = 'none';
}
web/templates/index.html
+8 -3
View File
@@ -253,6 +253,10 @@
<span class="dashboard-overview-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></span>
<div><span class="dashboard-overview-label">工具调用</span><span class="dashboard-overview-value"><span id="dashboard-tools-count">-</span> 个工具，共 <span id="dashboard-tools-calls">-</span> 次</span></div>
</div>
<div class="dashboard-overview-item" role="button" tabindex="0" onclick="switchPage('knowledge-management')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('knowledge-management'); }">
<span class="dashboard-overview-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg></span>
<div><span class="dashboard-overview-label">知识</span><span class="dashboard-overview-value" id="dashboard-knowledge-value">-</span></div>
</div>
<div class="dashboard-overview-item" role="button" tabindex="0" onclick="switchPage('skills-monitor')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('skills-monitor'); }">
<span class="dashboard-overview-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>
<div><span class="dashboard-overview-label">Skills</span><span class="dashboard-overview-value"><span id="dashboard-skills-count">-</span> 个 Skill，共 <span id="dashboard-skills-calls">-</span> 次调用</span></div>
@@ -262,11 +266,12 @@
<section class="dashboard-section dashboard-section-quick dashboard-quick-inline">
<h3 class="dashboard-section-title">快捷入口</h3>
<div class="dashboard-quick-links dashboard-quick-links-row">
<a class="dashboard-quick-link" onclick="switchPage('chat')"><span class="dashboard-quick-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></span><span>对话</span></a>
<a class="dashboard-quick-link" onclick="switchPage('tasks')"><span class="dashboard-quick-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"></path><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg></span><span>任务管理</span></a>
<a class="dashboard-quick-link" onclick="switchPage('vulnerabilities')"><span class="dashboard-quick-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></span><span>漏洞管理</span></a>
<a class="dashboard-quick-link" onclick="switchPage('chat')"><span class="dashboard-quick-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></span><span>对话</span></a>
<a class="dashboard-quick-link" onclick="switchPage('mcp-monitor')"><span class="dashboard-quick-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg></span><span>MCP 监控</span></a>
<a class="dashboard-quick-link" onclick="switchPage('skills-monitor')"><span class="dashboard-quick-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg></span><span>Skills 监控</span></a>
<a class="dashboard-quick-link" onclick="switchPage('mcp-management')"><span class="dashboard-quick-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg></span><span>MCP 管理</span></a>
<a class="dashboard-quick-link" onclick="switchPage('knowledge-management')"><span class="dashboard-quick-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg></span><span>知识管理</span></a>
<a class="dashboard-quick-link" onclick="switchPage('skills-management')"><span class="dashboard-quick-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg></span><span>Skills 管理</span></a>
</div>
</section>
</div>