CalvinBackup/CyberStrikeAI
1
0
Fork 0
mirror of https://github.com/Ed1s0nZ/CyberStrikeAI.git synced 2026-05-24 16:34:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
公明
2026-02-09 19:26:57 +08:00
committed by GitHub
parent 870715fc8f
commit e4b1e10a42
3 changed files with 417 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/style.css
+259
View File
@@ -8150,6 +8150,265 @@ header {
color: var(--text-primary);
}
/* 运行概览优化样式 */
.dashboard-overview-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.dashboard-overview-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2px;
}
.dashboard-overview-total {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
background: rgba(0, 102, 255, 0.08);
padding: 2px 8px;
border-radius: 12px;
}
.dashboard-overview-success-rate {
font-size: 0.75rem;
font-weight: 600;
color: #10b981;
background: rgba(16, 185, 129, 0.1);
padding: 2px 8px;
border-radius: 12px;
}
.dashboard-overview-status {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
background: rgba(0, 0, 0, 0.05);
padding: 2px 8px;
border-radius: 12px;
}
.dashboard-overview-stats {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.dashboard-overview-stat {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8125rem;
}
.dashboard-overview-stat-badge {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.dashboard-overview-stat-badge.badge-pending {
background: #f59e0b;
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
}
.dashboard-overview-stat-badge.badge-running {
background: #3b82f6;
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
animation: pulse-running 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.dashboard-overview-stat-badge.badge-done {
background: #10b981;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes pulse-running {
0%, 100% {
opacity: 1;
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
}
50% {
opacity: 0.8;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0);
}
}
.dashboard-overview-stat-value {
font-weight: 700;
font-size: 0.9375rem;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.dashboard-overview-stat-label {
color: var(--text-secondary);
font-size: 0.8125rem;
}
.dashboard-overview-progress {
margin-top: 4px;
}
.dashboard-overview-progress-bar {
height: 6px;
background: #f1f5f9;
border-radius: 3px;
overflow: hidden;
display: flex;
position: relative;
}
.dashboard-overview-progress-segment {
height: 100%;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.dashboard-overview-progress-pending {
background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.dashboard-overview-progress-running {
background: linear-gradient(90deg, #60a5fa, #3b82f6);
animation: shimmer 2s infinite;
}
.dashboard-overview-progress-done {
background: linear-gradient(90deg, #34d399, #10b981);
}
@keyframes shimmer {
0% {
opacity: 1;
}
50% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}
.dashboard-overview-value-group {
display: flex;
align-items: baseline;
gap: 4px;
flex-wrap: wrap;
}
.dashboard-overview-value-large {
font-size: 1.25rem;
font-weight: 800;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1.2;
}
.dashboard-overview-value-normal {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.dashboard-overview-value-unit {
font-size: 0.8125rem;
color: var(--text-secondary);
font-weight: 500;
}
.dashboard-overview-value-separator {
color: var(--text-secondary);
opacity: 0.4;
margin: 0 2px;
}
/* 不同模块的图标颜色 */
.dashboard-overview-icon-batch {
background: rgba(245, 158, 11, 0.1);
color: #d97706;
}
.dashboard-overview-icon-tools {
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
}
.dashboard-overview-icon-knowledge {
background: rgba(139, 92, 246, 0.1);
color: #7c3aed;
}
.dashboard-overview-icon-skills {
background: rgba(236, 72, 153, 0.1);
color: #db2777;
}
/* 悬停效果增强 */
.dashboard-overview-item:hover .dashboard-overview-icon {
transform: scale(1.1);
transition: transform 0.2s ease;
}
.dashboard-overview-item:hover .dashboard-overview-value-large {
color: #0066ff;
transition: color 0.2s ease;
}
.dashboard-overview-item-batch:hover {
border-color: rgba(245, 158, 11, 0.3);
background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(245,158,11,0.08) 100%);
}
.dashboard-overview-item-tools:hover {
border-color: rgba(59, 130, 246, 0.3);
background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(59,130,246,0.08) 100%);
}
.dashboard-overview-item-knowledge:hover {
border-color: rgba(139, 92, 246, 0.3);
background: linear-gradient(135deg, rgba(139,92,246,0.06) 0%, rgba(139,92,246,0.08) 100%);
}
.dashboard-overview-item-skills:hover {
border-color: rgba(236, 72, 153, 0.3);
background: linear-gradient(135deg, rgba(236,72,153,0.06) 0%, rgba(236,72,153,0.08) 100%);
}
/* 响应式优化 */
@media (max-width: 768px) {
.dashboard-overview-stats {
gap: 12px;
}
.dashboard-overview-value-group {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.dashboard-overview-value-separator {
display: none;
}
}
.dashboard-chart-wrap {
display: flex;
flex-direction: column;
web/static/js/dashboard.js
+82 -15
View File
@@ -63,7 +63,7 @@ async function refreshDashboard() {
});
}
// 批量任务队列：按状态统计
// 批量任务队列：按状态统计（优化版）
if (batchRes && Array.isArray(batchRes.queues)) {
const queues = batchRes.queues;
let pending = 0, running = 0, done = 0;
@@ -73,16 +73,36 @@ async function refreshDashboard() {
else if (s === 'running') running++;
else if (s === 'completed' || s === 'cancelled') done++;
});
const total = pending + running + done;
setEl('dashboard-batch-pending', String(pending));
setEl('dashboard-batch-running', String(running));
setEl('dashboard-batch-done', String(done));
setEl('dashboard-batch-total', total > 0 ? `共 ${total} 个` : '暂无任务');
// 更新进度条
if (total > 0) {
const pendingPct = (pending / total * 100).toFixed(1);
const runningPct = (running / total * 100).toFixed(1);
const donePct = (done / total * 100).toFixed(1);
updateProgressBar('dashboard-batch-progress-pending', pendingPct);
updateProgressBar('dashboard-batch-progress-running', runningPct);
updateProgressBar('dashboard-batch-progress-done', donePct);
} else {
updateProgressBar('dashboard-batch-progress-pending', '0');
updateProgressBar('dashboard-batch-progress-running', '0');
updateProgressBar('dashboard-batch-progress-done', '0');
}
} else {
setEl('dashboard-batch-pending', '-');
setEl('dashboard-batch-running', '-');
setEl('dashboard-batch-done', '-');
setEl('dashboard-batch-total', '-');
updateProgressBar('dashboard-batch-progress-pending', '0');
updateProgressBar('dashboard-batch-progress-running', '0');
updateProgressBar('dashboard-batch-progress-done', '0');
}
// 工具调用：monitor/stats 为 { toolName: { totalCalls, successCalls, failedCalls, ... } }
// 工具调用：monitor/stats 为 { toolName: { totalCalls, successCalls, failedCalls, ... } }（优化版）
if (monitorRes && typeof monitorRes === 'object') {
const names = Object.keys(monitorRes);
let totalCalls = 0, totalSuccess = 0, totalFailed = 0;
@@ -96,40 +116,68 @@ async function refreshDashboard() {
if (typeof f === 'number') totalFailed += f;
});
setEl('dashboard-tools-count', String(names.length));
setEl('dashboard-tools-calls', String(totalCalls));
setEl('dashboard-tools-calls', formatNumber(totalCalls));
setEl('dashboard-kpi-tools-calls', String(totalCalls));
var rateStr = totalCalls > 0 ? ((totalSuccess / totalCalls) * 100).toFixed(1) + '%' : '-';
setEl('dashboard-kpi-success-rate', rateStr);
setEl('dashboard-tools-success-rate', rateStr !== '-' ? `成功率 ${rateStr}` : '-');
renderDashboardToolsBar(monitorRes);
} else {
setEl('dashboard-tools-count', '-');
setEl('dashboard-tools-calls', '-');
setEl('dashboard-kpi-tools-calls', '-');
setEl('dashboard-kpi-success-rate', '-');
setEl('dashboard-tools-success-rate', '-');
renderDashboardToolsBar(null);
}
// 知识：{ enabled, total_categories, total_items, ... }
const knowledgeValueEl = document.getElementById('dashboard-knowledge-value');
// 知识：{ enabled, total_categories, total_items, ... }（优化版）
const knowledgeItemsEl = document.getElementById('dashboard-knowledge-items');
const knowledgeCategoriesEl = document.getElementById('dashboard-knowledge-categories');
if (knowledgeRes && typeof knowledgeRes === 'object') {
if (knowledgeRes.enabled === false) {
if (knowledgeValueEl) knowledgeValueEl.textContent = '知识功能暂未启用';
if (knowledgeItemsEl) knowledgeItemsEl.textContent = '未启用';
if (knowledgeCategoriesEl) knowledgeCategoriesEl.textContent = '-';
} else {
const categories = knowledgeRes.total_categories ?? 0;
const items = knowledgeRes.total_items ?? 0;
if (knowledgeValueEl) knowledgeValueEl.textContent = `${categories} 个分类，共 ${items} 项`;
if (knowledgeItemsEl) knowledgeItemsEl.textContent = formatNumber(items);
if (knowledgeCategoriesEl) knowledgeCategoriesEl.textContent = formatNumber(categories);
}
} else {
if (knowledgeValueEl) knowledgeValueEl.textContent = '-';
if (knowledgeItemsEl) knowledgeItemsEl.textContent = '-';
if (knowledgeCategoriesEl) knowledgeCategoriesEl.textContent = '-';
}
// Skills：{ total_skills, total_calls, ... }
// Skills：{ total_skills, total_calls, ... }（优化版）
if (skillsRes && typeof skillsRes === 'object') {
setEl('dashboard-skills-count', String(skillsRes.total_skills ?? '-'));
setEl('dashboard-skills-calls', String(skillsRes.total_calls ?? '-'));
const totalSkills = skillsRes.total_skills ?? 0;
const totalCalls = skillsRes.total_calls ?? 0;
setEl('dashboard-skills-count', formatNumber(totalSkills));
setEl('dashboard-skills-calls', formatNumber(totalCalls));
// 设置状态标签
const statusEl = document.getElementById('dashboard-skills-status');
if (statusEl) {
if (totalCalls === 0) {
statusEl.textContent = '待使用';
statusEl.style.background = 'rgba(0, 0, 0, 0.05)';
statusEl.style.color = 'var(--text-secondary)';
} else if (totalCalls < 10) {
statusEl.textContent = '活跃';
statusEl.style.background = 'rgba(16, 185, 129, 0.1)';
statusEl.style.color = '#10b981';
} else {
statusEl.textContent = '高频';
statusEl.style.background = 'rgba(59, 130, 246, 0.1)';
statusEl.style.color = '#3b82f6';
}
}
} else {
setEl('dashboard-skills-count', '-');
setEl('dashboard-skills-calls', '-');
const statusEl = document.getElementById('dashboard-skills-status');
if (statusEl) statusEl.textContent = '-';
}
} catch (e) {
console.warn('仪表盘拉取统计失败', e);
@@ -150,10 +198,29 @@ 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;
['dashboard-batch-pending', 'dashboard-batch-running', 'dashboard-batch-done', 'dashboard-batch-total',
'dashboard-tools-count', 'dashboard-tools-calls', 'dashboard-tools-success-rate',
'dashboard-skills-count', 'dashboard-skills-calls', 'dashboard-skills-status',
'dashboard-knowledge-items', 'dashboard-knowledge-categories'].forEach(id => setEl(id, t));
updateProgressBar('dashboard-batch-progress-pending', '0');
updateProgressBar('dashboard-batch-progress-running', '0');
updateProgressBar('dashboard-batch-progress-done', '0');
}
// 格式化数字，添加千位分隔符
function formatNumber(num) {
if (typeof num !== 'number' || isNaN(num)) return '-';
if (num === 0) return '0';
return num.toLocaleString('zh-CN');
}
// 更新进度条宽度
function updateProgressBar(id, percentage) {
const el = document.getElementById(id);
if (el) {
const pct = parseFloat(percentage) || 0;
el.style.width = Math.max(0, Math.min(100, pct)) + '%';
}
}
// Top 30 工具执行次数柱状图颜色（30 色不重复，柔和、易区分）
web/templates/index.html
+76 -12
View File
@@ -245,21 +245,85 @@
<section class="dashboard-section dashboard-section-overview">
<h3 class="dashboard-section-title">运行概览</h3>
<div class="dashboard-overview-list">
<div class="dashboard-overview-item" role="button" tabindex="0" onclick="switchPage('tasks')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('tasks'); }">
<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"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg></span>
<div><span class="dashboard-overview-label">批量任务队列</span><span class="dashboard-overview-value"><span id="dashboard-batch-pending">-</span> 待执行 / <span id="dashboard-batch-running">-</span> 执行中 / <span id="dashboard-batch-done">-</span> 已完成</span></div>
<div class="dashboard-overview-item dashboard-overview-item-batch" role="button" tabindex="0" onclick="switchPage('tasks')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('tasks'); }">
<span class="dashboard-overview-icon dashboard-overview-icon-batch" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg></span>
<div class="dashboard-overview-content">
<div class="dashboard-overview-header">
<span class="dashboard-overview-label">批量任务队列</span>
<span class="dashboard-overview-total" id="dashboard-batch-total">-</span>
</div>
<div class="dashboard-overview-stats">
<span class="dashboard-overview-stat dashboard-overview-stat-pending">
<span class="dashboard-overview-stat-badge badge-pending"></span>
<span class="dashboard-overview-stat-value" id="dashboard-batch-pending">-</span>
<span class="dashboard-overview-stat-label">待执行</span>
</span>
<span class="dashboard-overview-stat dashboard-overview-stat-running">
<span class="dashboard-overview-stat-badge badge-running"></span>
<span class="dashboard-overview-stat-value" id="dashboard-batch-running">-</span>
<span class="dashboard-overview-stat-label">执行中</span>
</span>
<span class="dashboard-overview-stat dashboard-overview-stat-done">
<span class="dashboard-overview-stat-badge badge-done"></span>
<span class="dashboard-overview-stat-value" id="dashboard-batch-done">-</span>
<span class="dashboard-overview-stat-label">已完成</span>
</span>
</div>
<div class="dashboard-overview-progress">
<div class="dashboard-overview-progress-bar">
<div class="dashboard-overview-progress-segment dashboard-overview-progress-pending" id="dashboard-batch-progress-pending" style="width: 0%"></div>
<div class="dashboard-overview-progress-segment dashboard-overview-progress-running" id="dashboard-batch-progress-running" style="width: 0%"></div>
<div class="dashboard-overview-progress-segment dashboard-overview-progress-done" id="dashboard-batch-progress-done" style="width: 0%"></div>
</div>
</div>
</div>
</div>
<div class="dashboard-overview-item" role="button" tabindex="0" onclick="switchPage('mcp-monitor')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('mcp-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.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 class="dashboard-overview-item dashboard-overview-item-tools" role="button" tabindex="0" onclick="switchPage('mcp-monitor')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('mcp-monitor'); }">
<span class="dashboard-overview-icon dashboard-overview-icon-tools" aria-hidden="true"><svg width="16" height="16" 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 class="dashboard-overview-content">
<div class="dashboard-overview-header">
<span class="dashboard-overview-label">工具调用</span>
<span class="dashboard-overview-success-rate" id="dashboard-tools-success-rate">-</span>
</div>
<div class="dashboard-overview-value-group">
<span class="dashboard-overview-value-large" id="dashboard-tools-calls">-</span>
<span class="dashboard-overview-value-unit">次调用</span>
<span class="dashboard-overview-value-separator">·</span>
<span class="dashboard-overview-value-normal" id="dashboard-tools-count">-</span>
<span class="dashboard-overview-value-unit">个工具</span>
</div>
</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 class="dashboard-overview-item dashboard-overview-item-knowledge" 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 dashboard-overview-icon-knowledge" aria-hidden="true"><svg width="16" height="16" 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 class="dashboard-overview-content">
<div class="dashboard-overview-header">
<span class="dashboard-overview-label">知识</span>
</div>
<div class="dashboard-overview-value-group">
<span class="dashboard-overview-value-large" id="dashboard-knowledge-items">-</span>
<span class="dashboard-overview-value-unit">项知识</span>
<span class="dashboard-overview-value-separator">·</span>
<span class="dashboard-overview-value-normal" id="dashboard-knowledge-categories">-</span>
<span class="dashboard-overview-value-unit">个分类</span>
</div>
</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>
<div class="dashboard-overview-item dashboard-overview-item-skills" 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 dashboard-overview-icon-skills" aria-hidden="true"><svg width="16" height="16" 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 class="dashboard-overview-content">
<div class="dashboard-overview-header">
<span class="dashboard-overview-label">Skills</span>
<span class="dashboard-overview-status" id="dashboard-skills-status">-</span>
</div>
<div class="dashboard-overview-value-group">
<span class="dashboard-overview-value-large" id="dashboard-skills-calls">-</span>
<span class="dashboard-overview-value-unit">次调用</span>
<span class="dashboard-overview-value-separator">·</span>
<span class="dashboard-overview-value-normal" id="dashboard-skills-count">-</span>
<span class="dashboard-overview-value-unit">个 Skill</span>
</div>
</div>
</div>
</div>
</section>