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:
公明
2026-02-08 23:15:43 +08:00
committed by GitHub
parent 44b8d0b427
commit 7447e82c39
3 changed files with 430 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/style.css
+276 -177
View File
@@ -7938,177 +7938,162 @@ header {
color: var(--text-primary);
}
/* 仪表盘页面样式 */
/* 仪表盘页面样式（最佳实践布局 + 视觉增强） */
.dashboard-page {
height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
background: linear-gradient(180deg, #f0f4ff 0%, #f8fafc 24%, var(--bg-secondary) 100%);
background: linear-gradient(180deg, #eef2f7 0%, #f1f5f9 50%, #e2e8f0 100%);
}
.dashboard-page .page-header {
flex-shrink: 0;
padding: 18px 24px;
border-bottom: 1px solid rgba(0,0,0,0.06);
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
.dashboard-page .page-header h2 {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
}
.dashboard-content {
flex: 1;
padding: 20px 24px 32px;
padding: 24px;
overflow: auto;
width: 100%;
box-sizing: border-box;
}
.dashboard-cards {
/* 第一行：核心 KPI（视觉层次 + 色块强调） */
.dashboard-kpi-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 28px;
margin-bottom: 24px;
}
@media (max-width: 900px) {
.dashboard-cards { grid-template-columns: 1fr; }
.dashboard-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.dashboard-card {
position: relative;
background: var(--bg-primary);
border-radius: 16px;
padding: 24px;
display: flex;
align-items: center;
gap: 20px;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 4px 14px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
border: 1px solid rgba(0,0,0,0.06);
overflow: hidden;
@media (max-width: 480px) {
.dashboard-kpi-row { grid-template-columns: 1fr; }
}
.dashboard-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
}
.dashboard-card-glow {
position: absolute;
top: -40%;
right: -20%;
width: 60%;
height: 100%;
border-radius: 50%;
opacity: 0.08;
pointer-events: none;
}
.dashboard-card-tasks .dashboard-card-glow { background: radial-gradient(circle, #0066ff 0%, transparent 70%); }
.dashboard-card-vulns .dashboard-card-glow { background: radial-gradient(circle, #dc3545 0%, transparent 70%); }
.dashboard-card-chat .dashboard-card-glow { background: radial-gradient(circle, #0d9488 0%, transparent 70%); }
.dashboard-card-icon {
width: 56px;
height: 56px;
.dashboard-kpi-card {
background: #fff;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.25s ease;
padding: 22px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.25s ease;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
position: relative;
}
.dashboard-card:hover .dashboard-card-icon {
transform: scale(1.08);
.dashboard-kpi-card:nth-child(1) { background: linear-gradient(145deg, #fff 0%, #f0f9ff 100%); }
.dashboard-kpi-card:nth-child(2) { background: linear-gradient(145deg, #fff 0%, #fef2f2 100%); }
.dashboard-kpi-card:nth-child(3) { background: linear-gradient(145deg, #fff 0%, #f0fdf4 100%); }
.dashboard-kpi-card:nth-child(4) { background: linear-gradient(145deg, #fff 0%, #f0fdfa 100%); }
.dashboard-kpi-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(0,0,0,0.08), 0 4px 12px rgba(0,102,255,0.08);
border-color: rgba(0, 102, 255, 0.2);
}
.dashboard-card-tasks .dashboard-card-icon {
background: linear-gradient(145deg, #e0edff 0%, #cce0ff 100%);
color: #0066ff;
}
.dashboard-card-vulns .dashboard-card-icon {
background: linear-gradient(145deg, #ffebee 0%, #ffcdd2 100%);
color: #c62828;
}
.dashboard-card-chat .dashboard-card-icon {
background: linear-gradient(145deg, #e0f2f1 0%, #b2dfdb 100%);
color: #0d9488;
}
.dashboard-card-body {
min-width: 0;
}
.dashboard-card-value {
font-size: 2rem;
.dashboard-kpi-value {
font-size: 1.875rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1.1;
line-height: 1.2;
letter-spacing: -0.03em;
}
.dashboard-card-label {
font-size: 0.9rem;
.dashboard-kpi-label {
font-size: 0.8125rem;
color: var(--text-secondary);
margin-top: 4px;
margin-top: 8px;
font-weight: 500;
}
.dashboard-card-desc {
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 2px;
/* 两列主内容网格 */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 24px;
align-items: start;
}
.dashboard-card-cta {
font-size: 1.15rem;
@media (max-width: 1100px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
}
.dashboard-main {
display: flex;
flex-direction: column;
gap: 24px;
}
.dashboard-side {
display: flex;
flex-direction: column;
gap: 24px;
}
.dashboard-grid .dashboard-section {
margin-bottom: 0;
background: #fff;
border-radius: 14px;
padding: 22px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
border: 1px solid rgba(0,0,0,0.05);
transition: box-shadow 0.25s ease;
}
.dashboard-grid .dashboard-section:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
}
.dashboard-section-title {
display: block;
font-size: 0.9375rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 16px 0;
padding-bottom: 10px;
border-bottom: 2px solid #f1f5f9;
letter-spacing: -0.01em;
}
.dashboard-card-hint {
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 6px;
opacity: 0.9;
}
.dashboard-section {
margin-bottom: 28px;
}
.dashboard-section-chart {
background: var(--bg-primary);
border-radius: 16px;
padding: 22px 24px;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
border: 1px solid rgba(0,0,0,0.05);
}
.dashboard-section-overview {
background: var(--bg-primary);
border-radius: 16px;
padding: 22px 24px;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
border: 1px solid rgba(0,0,0,0.05);
}
.dashboard-overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
.dashboard-overview-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.dashboard-overview-item {
padding: 14px 18px;
background: var(--bg-secondary);
border-radius: 12px;
border: 1px solid var(--border-color);
padding: 14px 16px;
background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.05);
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.dashboard-overview-item:hover {
border-color: var(--accent-color);
background: rgba(0, 102, 255, 0.04);
border-color: rgba(0, 102, 255, 0.25);
background: linear-gradient(135deg, rgba(0,102,255,0.04) 0%, rgba(0,102,255,0.06) 100%);
transform: translateX(4px);
}
.dashboard-overview-label {
@@ -8124,28 +8109,10 @@ header {
color: var(--text-primary);
}
.dashboard-section-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 16px 0;
}
.dashboard-section-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-color);
flex-shrink: 0;
}
.dashboard-chart-wrap {
display: flex;
flex-direction: column;
gap: 16px;
gap: 20px;
}
.dashboard-stacked-bar {
@@ -8154,26 +8121,27 @@ header {
height: 28px;
border-radius: 14px;
overflow: hidden;
background: var(--bg-tertiary);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
background: #f1f5f9;
}
.dashboard-bar-seg {
height: 100%;
min-width: 2px;
transition: width 0.4s ease;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.92;
}
.dashboard-bar-seg.seg-critical { background: linear-gradient(90deg, #b91c1c, #dc2626); }
.dashboard-bar-seg.seg-high { background: linear-gradient(90deg, #ea580c, #f97316); }
.dashboard-bar-seg.seg-medium { background: linear-gradient(90deg, #ca8a04, #eab308); }
.dashboard-bar-seg.seg-low { background: linear-gradient(90deg, #059669, #10b981); }
.dashboard-bar-seg.seg-info { background: linear-gradient(90deg, #4b5563, #6b7280); }
.dashboard-bar-seg.seg-critical { background: linear-gradient(90deg, #fca5a5, #fecaca); }
.dashboard-bar-seg.seg-high { background: linear-gradient(90deg, #fdba74, #fed7aa); }
.dashboard-bar-seg.seg-medium { background: linear-gradient(90deg, #fde047, #fef08a); }
.dashboard-bar-seg.seg-low { background: linear-gradient(90deg, #6ee7b7, #a7f3d0); }
.dashboard-bar-seg.seg-info { background: linear-gradient(90deg, #cbd5e1, #e2e8f0); }
.dashboard-legend {
display: flex;
flex-wrap: wrap;
gap: 20px 28px;
gap: 16px 32px;
align-items: center;
}
.dashboard-legend-item {
@@ -8181,6 +8149,14 @@ header {
align-items: center;
gap: 8px;
font-size: 0.875rem;
padding: 6px 12px;
background: #f8fafc;
border-radius: 20px;
transition: background 0.2s;
}
.dashboard-legend-item:hover {
background: #f1f5f9;
}
.dashboard-legend-dot {
@@ -8188,6 +8164,7 @@ header {
height: 10px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
}
.dashboard-legend-dot.critical { background: #dc2626; }
@@ -8207,85 +8184,207 @@ header {
}
.dashboard-quick-links {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
/* 主内容区：快捷入口横向排列，按钮保持自然宽度不拉伸 */
.dashboard-quick-links-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.dashboard-quick-inline .dashboard-quick-link {
flex: 0 0 auto;
width: auto;
min-width: unset;
padding: 8px 14px;
}
/* 主内容区快捷入口：去掉图标外层的“涂层”，降低按钮高度 */
.dashboard-quick-inline .dashboard-quick-icon {
width: auto;
height: auto;
min-width: unset;
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.dashboard-quick-inline .dashboard-quick-link:hover .dashboard-quick-icon {
background: transparent;
box-shadow: none;
}
@media (max-width: 1000px) {
.dashboard-quick-links:not(.dashboard-quick-links-row) {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.dashboard-quick-links:not(.dashboard-quick-links-row) {
grid-template-columns: 1fr;
}
}
.dashboard-quick-link {
display: inline-flex;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 10px 14px;
background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
border: 1px solid rgba(0,0,0,0.06);
border-radius: 10px;
color: var(--text-primary);
font-size: 0.9rem;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
transition: all 0.25s ease;
}
.dashboard-quick-link:hover {
border-color: var(--accent-color);
background: rgba(0, 102, 255, 0.06);
color: var(--accent-color);
box-shadow: 0 4px 12px rgba(0, 102, 255, 0.12);
border-color: rgba(0, 102, 255, 0.3);
background: linear-gradient(135deg, rgba(0,102,255,0.06) 0%, rgba(0,102,255,0.04) 100%);
color: var(--text-primary);
transform: translateX(4px);
box-shadow: 0 2px 8px rgba(0,102,255,0.08);
}
.dashboard-quick-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: #fff;
color: var(--text-secondary);
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.dashboard-quick-link:hover .dashboard-quick-icon {
color: var(--accent-color);
color: #0369a1;
background: rgba(3, 105, 161, 0.1);
box-shadow: 0 2px 8px rgba(3, 105, 161, 0.15);
}
/* 工具执行次数（仅柱状图） */
.dashboard-section-tools .dashboard-section-title {
margin-bottom: 12px;
}
.dashboard-tools-chart-wrap {
min-width: 0;
flex: 1;
}
.dashboard-tools-chart-placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
font-size: 0.8125rem;
color: var(--text-muted);
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 10px;
border: 1px dashed #cbd5e1;
}
.dashboard-tools-bar-chart {
display: flex;
flex-direction: column;
gap: 10px;
}
.dashboard-tools-bar-item {
display: grid;
grid-template-columns: 82px 1fr 36px;
gap: 12px;
align-items: center;
font-size: 0.8125rem;
}
.dashboard-tools-bar-label {
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-tools-bar-track {
height: 18px;
background: #f1f5f9;
border-radius: 9px;
overflow: hidden;
}
.dashboard-tools-bar-fill {
height: 100%;
border-radius: 9px;
min-width: 6px;
transform-origin: left;
animation: dashboard-bar-fill-in 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
opacity: 0.92;
}
@keyframes dashboard-bar-fill-in {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.dashboard-tools-bar-value {
font-weight: 600;
color: var(--text-secondary);
font-size: 0.8125rem;
text-align: right;
font-variant-numeric: tabular-nums;
}
.dashboard-cta-block {
margin-top: 8px;
padding: 24px;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 1px solid rgba(14, 165, 233, 0.2);
border-radius: 16px;
}
.dashboard-cta-inner {
margin-top: 24px;
padding: 20px 24px;
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
border: 1px solid rgba(0,0,0,0.06);
border-radius: 14px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
gap: 20px;
flex-wrap: wrap;
box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
}
.dashboard-cta-text {
font-size: 1rem;
font-weight: 600;
font-weight: 700;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
.dashboard-cta-btn {
padding: 12px 24px;
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
background: linear-gradient(135deg, #0369a1 0%, #0284c7 50%, #0ea5e9 100%);
border: none;
border-radius: 12px;
border-radius: 10px;
color: #fff;
font-size: 0.95rem;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.2s;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}
.dashboard-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4);
box-shadow: 0 8px 24px rgba(2, 132, 199, 0.45);
filter: brightness(1.05);
}
.vulnerability-controls {
web/static/js/dashboard.js
+80 -2
View File
@@ -14,6 +14,12 @@ async function refreshDashboard() {
if (barEl) barEl.style.width = '0%';
});
setDashboardOverviewPlaceholder('…');
setEl('dashboard-kpi-tools-calls', '…');
setEl('dashboard-kpi-success-rate', '…');
var chartPlaceholder = document.getElementById('dashboard-tools-pie-placeholder');
if (chartPlaceholder) { chartPlaceholder.style.display = 'block'; chartPlaceholder.textContent = '加载中…'; }
var barChartEl = document.getElementById('dashboard-tools-bar-chart');
if (barChartEl) { barChartEl.style.display = 'none'; barChartEl.innerHTML = ''; }
if (typeof apiFetch === 'undefined') {
if (runningEl) runningEl.textContent = '-';
@@ -75,20 +81,31 @@ async function refreshDashboard() {
setEl('dashboard-batch-done', '-');
}
// 工具调用：monitor/stats 为 { toolName: { TotalCalls, ... } }
// 工具调用：monitor/stats 为 { toolName: { totalCalls, successCalls, failedCalls, ... } }
if (monitorRes && typeof monitorRes === 'object') {
const names = Object.keys(monitorRes);
let totalCalls = 0;
let totalCalls = 0, totalSuccess = 0, totalFailed = 0;
names.forEach(k => {
const v = monitorRes[k];
const n = v && (v.totalCalls ?? v.TotalCalls);
if (typeof n === 'number') totalCalls += n;
const s = v && (v.successCalls ?? v.SuccessCalls);
if (typeof s === 'number') totalSuccess += s;
const f = v && (v.failedCalls ?? v.FailedCalls);
if (typeof f === 'number') totalFailed += f;
});
setEl('dashboard-tools-count', String(names.length));
setEl('dashboard-tools-calls', String(totalCalls));
setEl('dashboard-kpi-tools-calls', String(totalCalls));
var rateStr = totalCalls > 0 ? ((totalSuccess / totalCalls) * 100).toFixed(1) + '%' : '-';
setEl('dashboard-kpi-success-rate', rateStr);
renderDashboardToolsBar(monitorRes);
} else {
setEl('dashboard-tools-count', '-');
setEl('dashboard-tools-calls', '-');
setEl('dashboard-kpi-tools-calls', '-');
setEl('dashboard-kpi-success-rate', '-');
renderDashboardToolsBar(null);
}
// Skills：{ total_skills, total_calls, ... }
@@ -104,6 +121,11 @@ async function refreshDashboard() {
if (runningEl) runningEl.textContent = '-';
if (vulnTotalEl) vulnTotalEl.textContent = '-';
setDashboardOverviewPlaceholder('-');
setEl('dashboard-kpi-success-rate', '-');
setEl('dashboard-kpi-tools-calls', '-');
renderDashboardToolsBar(null);
var ph = document.getElementById('dashboard-tools-pie-placeholder');
if (ph) { ph.style.display = 'block'; ph.textContent = '暂无调用数据'; }
}
}
@@ -116,3 +138,59 @@ 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));
}
// Top 30 工具执行次数柱状图颜色（柔和、低饱和度）
var DASHBOARD_BAR_COLORS = [
'#93c5fd', '#a78bfa', '#6ee7b7', '#fde047', '#fda4af',
'#7dd3fc', '#a5b4fc', '#5eead4', '#fdba74', '#e9d5ff'
];
function esc(s) {
if (typeof s !== 'string') return '';
return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
}
function renderDashboardToolsBar(monitorRes) {
const placeholder = document.getElementById('dashboard-tools-pie-placeholder');
const barChartEl = document.getElementById('dashboard-tools-bar-chart');
if (!placeholder || !barChartEl) return;
if (!monitorRes || typeof monitorRes !== 'object') {
placeholder.style.display = 'block';
barChartEl.style.display = 'none';
barChartEl.innerHTML = '';
return;
}
const entries = Object.keys(monitorRes).map(function (k) {
const v = monitorRes[k];
const totalCalls = v && (v.totalCalls ?? v.TotalCalls);
return { name: k, totalCalls: typeof totalCalls === 'number' ? totalCalls : 0 };
}).filter(function (e) { return e.totalCalls > 0; })
.sort(function (a, b) { return b.totalCalls - a.totalCalls; })
.slice(0, 30);
if (entries.length === 0) {
placeholder.style.display = 'block';
barChartEl.style.display = 'none';
barChartEl.innerHTML = '';
return;
}
placeholder.style.display = 'none';
barChartEl.style.display = 'block';
const maxCalls = Math.max.apply(null, entries.map(function (e) { return e.totalCalls; }));
var html = '';
entries.forEach(function (e, i) {
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>';
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;
}
web/templates/index.html
+74 -93
View File
@@ -213,107 +213,88 @@
</div>
</div>
<div class="dashboard-content">
<div class="dashboard-cards" id="dashboard-cards">
<div class="dashboard-card dashboard-card-tasks" onclick="switchPage('tasks')">
<div class="dashboard-card-glow"></div>
<div class="dashboard-card-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
</div>
<div class="dashboard-card-body">
<div class="dashboard-card-value" id="dashboard-running-tasks">-</div>
<div class="dashboard-card-label">运行中任务</div>
<div class="dashboard-card-hint">点击查看任务管理</div>
</div>
<!-- 第一行：核心 KPI（仪表盘最佳实践：关键指标置顶） -->
<div class="dashboard-kpi-row" id="dashboard-cards">
<div class="dashboard-kpi-card" onclick="switchPage('tasks')" title="点击查看任务管理">
<div class="dashboard-kpi-value" id="dashboard-running-tasks">-</div>
<div class="dashboard-kpi-label">运行中任务</div>
</div>
<div class="dashboard-card dashboard-card-vulns" onclick="switchPage('vulnerabilities')">
<div class="dashboard-card-glow"></div>
<div class="dashboard-card-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
</div>
<div class="dashboard-card-body">
<div class="dashboard-card-value" id="dashboard-vuln-total">-</div>
<div class="dashboard-card-label">漏洞总数</div>
<div class="dashboard-card-hint">点击查看漏洞管理</div>
</div>
<div class="dashboard-kpi-card" onclick="switchPage('vulnerabilities')" title="点击查看漏洞管理">
<div class="dashboard-kpi-value" id="dashboard-vuln-total">-</div>
<div class="dashboard-kpi-label">漏洞总数</div>
</div>
<div class="dashboard-card dashboard-card-chat" onclick="switchPage('chat')">
<div class="dashboard-card-glow"></div>
<div class="dashboard-card-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
</div>
<div class="dashboard-card-body">
<div class="dashboard-card-cta">开始对话</div>
<div class="dashboard-card-desc">与 AI 进行安全测试</div>
<div class="dashboard-card-hint">立即开始</div>
</div>
<div class="dashboard-kpi-card" onclick="switchPage('mcp-monitor')" title="点击查看 MCP 监控">
<div class="dashboard-kpi-value" id="dashboard-kpi-tools-calls">-</div>
<div class="dashboard-kpi-label">工具调用次数</div>
</div>
<div class="dashboard-kpi-card" onclick="switchPage('mcp-monitor')" title="点击查看 MCP 监控">
<div class="dashboard-kpi-value" id="dashboard-kpi-success-rate">-</div>
<div class="dashboard-kpi-label">工具执行成功率</div>
</div>
</div>
<div class="dashboard-section dashboard-section-chart">
<h3 class="dashboard-section-title"><span class="dashboard-section-dot"></span>漏洞严重程度分布</h3>
<div class="dashboard-chart-wrap">
<div class="dashboard-stacked-bar" id="dashboard-stacked-bar">
<span class="dashboard-bar-seg seg-critical" id="dashboard-bar-critical" style="width: 0%"></span>
<span class="dashboard-bar-seg seg-high" id="dashboard-bar-high" style="width: 0%"></span>
<span class="dashboard-bar-seg seg-medium" id="dashboard-bar-medium" style="width: 0%"></span>
<span class="dashboard-bar-seg seg-low" id="dashboard-bar-low" style="width: 0%"></span>
<span class="dashboard-bar-seg seg-info" id="dashboard-bar-info" style="width: 0%"></span>
</div>
<div class="dashboard-legend" id="dashboard-vuln-bars">
<div class="dashboard-legend-item"><span class="dashboard-legend-dot critical"></span><span class="dashboard-legend-label">严重</span><span class="dashboard-legend-value" id="dashboard-severity-critical">0</span></div>
<div class="dashboard-legend-item"><span class="dashboard-legend-dot high"></span><span class="dashboard-legend-label">高危</span><span class="dashboard-legend-value" id="dashboard-severity-high">0</span></div>
<div class="dashboard-legend-item"><span class="dashboard-legend-dot medium"></span><span class="dashboard-legend-label">中危</span><span class="dashboard-legend-value" id="dashboard-severity-medium">0</span></div>
<div class="dashboard-legend-item"><span class="dashboard-legend-dot low"></span><span class="dashboard-legend-label">低危</span><span class="dashboard-legend-value" id="dashboard-severity-low">0</span></div>
<div class="dashboard-legend-item"><span class="dashboard-legend-dot info"></span><span class="dashboard-legend-label">信息</span><span class="dashboard-legend-value" id="dashboard-severity-info">0</span></div>
</div>
<!-- 两列主内容区 -->
<div class="dashboard-grid">
<div class="dashboard-main">
<section class="dashboard-section dashboard-section-chart">
<h3 class="dashboard-section-title">漏洞严重程度分布</h3>
<div class="dashboard-chart-wrap">
<div class="dashboard-stacked-bar" id="dashboard-stacked-bar">
<span class="dashboard-bar-seg seg-critical" id="dashboard-bar-critical" style="width: 0%"></span>
<span class="dashboard-bar-seg seg-high" id="dashboard-bar-high" style="width: 0%"></span>
<span class="dashboard-bar-seg seg-medium" id="dashboard-bar-medium" style="width: 0%"></span>
<span class="dashboard-bar-seg seg-low" id="dashboard-bar-low" style="width: 0%"></span>
<span class="dashboard-bar-seg seg-info" id="dashboard-bar-info" style="width: 0%"></span>
</div>
<div class="dashboard-legend" id="dashboard-vuln-bars">
<div class="dashboard-legend-item"><span class="dashboard-legend-dot critical"></span><span class="dashboard-legend-label">严重</span><span class="dashboard-legend-value" id="dashboard-severity-critical">0</span></div>
<div class="dashboard-legend-item"><span class="dashboard-legend-dot high"></span><span class="dashboard-legend-label">高危</span><span class="dashboard-legend-value" id="dashboard-severity-high">0</span></div>
<div class="dashboard-legend-item"><span class="dashboard-legend-dot medium"></span><span class="dashboard-legend-label">中危</span><span class="dashboard-legend-value" id="dashboard-severity-medium">0</span></div>
<div class="dashboard-legend-item"><span class="dashboard-legend-dot low"></span><span class="dashboard-legend-label">低危</span><span class="dashboard-legend-value" id="dashboard-severity-low">0</span></div>
<div class="dashboard-legend-item"><span class="dashboard-legend-dot info"></span><span class="dashboard-legend-label">信息</span><span class="dashboard-legend-value" id="dashboard-severity-info">0</span></div>
</div>
</div>
</section>
<section class="dashboard-section dashboard-section-overview">
<h3 class="dashboard-section-title">运行概览</h3>
<div class="dashboard-overview-list">
<div class="dashboard-overview-item" onclick="switchPage('tasks')">
<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" onclick="switchPage('mcp-monitor')">
<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" onclick="switchPage('skills-monitor')">
<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>
</section>
<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('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>
</div>
</section>
</div>
</div>
<div class="dashboard-section dashboard-section-overview">
<h3 class="dashboard-section-title"><span class="dashboard-section-dot"></span>运行概览</h3>
<div class="dashboard-overview-grid">
<div class="dashboard-overview-item" onclick="switchPage('tasks')">
<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" onclick="switchPage('mcp-monitor')">
<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" onclick="switchPage('skills-monitor')">
<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>
</div>
<div class="dashboard-section">
<h3 class="dashboard-section-title"><span class="dashboard-section-dot"></span>快捷入口</h3>
<div class="dashboard-quick-links">
<a class="dashboard-quick-link" onclick="switchPage('tasks')">
<span class="dashboard-quick-icon"><svg width="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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="18" height="18" 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 class="dashboard-side">
<section class="dashboard-section dashboard-section-tools">
<h3 class="dashboard-section-title">工具执行次数</h3>
<div class="dashboard-tools-chart-wrap">
<div class="dashboard-tools-chart-placeholder" id="dashboard-tools-pie-placeholder">暂无数据</div>
<div class="dashboard-tools-bar-chart" id="dashboard-tools-bar-chart"></div>
</div>
</section>
</div>
</div>
<div class="dashboard-cta-block">
<div class="dashboard-cta-inner">
<p class="dashboard-cta-text">准备好开始安全测试？</p>
<button class="dashboard-cta-btn" onclick="switchPage('chat')">前往对话 →</button>
</div>
<p class="dashboard-cta-text">准备好开始安全测试？</p>
<button class="dashboard-cta-btn" onclick="switchPage('chat')">前往对话</button>
</div>
</div>
</div>