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:38:57 +08:00
committed by GitHub
parent 7447e82c39
commit 8b2dfea884
3 changed files with 200 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/style.css
+168 -15
View File
@@ -7945,6 +7945,16 @@ header {
flex-direction: column;
overflow: auto;
background: linear-gradient(180deg, #eef2f7 0%, #f1f5f9 50%, #e2e8f0 100%);
position: relative;
}
.dashboard-page::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.03) 1px, transparent 0);
background-size: 24px 24px;
pointer-events: none;
}
.dashboard-page .page-header {
@@ -8015,6 +8025,12 @@ header {
color: var(--text-primary);
line-height: 1.2;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.dashboard-kpi-card:focus-visible {
outline: 2px solid rgba(0, 102, 255, 0.5);
outline-offset: 2px;
}
.dashboard-kpi-label {
@@ -8052,12 +8068,13 @@ header {
.dashboard-grid .dashboard-section {
margin-bottom: 0;
background: #fff;
background: rgba(255, 255, 255, 0.95);
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;
position: relative;
}
.dashboard-grid .dashboard-section:hover {
@@ -8082,6 +8099,9 @@ header {
}
.dashboard-overview-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
border-radius: 10px;
@@ -8096,12 +8116,33 @@ header {
transform: translateX(4px);
}
.dashboard-overview-item:focus-visible {
outline: 2px solid rgba(0, 102, 255, 0.5);
outline-offset: 2px;
}
.dashboard-overview-icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(0, 102, 255, 0.08);
color: #0369a1;
flex-shrink: 0;
}
.dashboard-overview-item > div {
min-width: 0;
}
.dashboard-overview-label {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 6px;
margin-bottom: 4px;
}
.dashboard-overview-value {
@@ -8129,6 +8170,17 @@ header {
min-width: 2px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.92;
border-right: 1px solid rgba(241, 245, 249, 0.9);
box-sizing: border-box;
}
.dashboard-bar-seg:first-child {
border-radius: 14px 0 0 14px;
}
.dashboard-bar-seg:last-child {
border-right: none;
border-radius: 0 14px 14px 0;
}
.dashboard-bar-seg.seg-critical { background: linear-gradient(90deg, #fca5a5, #fecaca); }
@@ -8255,6 +8307,11 @@ header {
box-shadow: 0 2px 8px rgba(0,102,255,0.08);
}
.dashboard-quick-link:focus-visible {
outline: 2px solid rgba(0, 102, 255, 0.5);
outline-offset: 2px;
}
.dashboard-quick-icon {
display: flex;
align-items: center;
@@ -8347,44 +8404,140 @@ header {
}
.dashboard-cta-block {
position: relative;
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;
padding: 24px 28px;
background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(241,245,249,0.95) 50%, rgba(226,232,240,0.4) 100%);
border: 1px solid rgba(2, 132, 199, 0.12);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
gap: 24px;
flex-wrap: wrap;
box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
overflow: hidden;
}
.dashboard-cta-accent {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
border-radius: 16px 0 0 16px;
}
.dashboard-cta-content {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
min-width: 0;
}
.dashboard-cta-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(2, 132, 199, 0.1) 100%);
color: #0284c7;
border-radius: 12px;
}
.dashboard-cta-copy {
min-width: 0;
}
.dashboard-cta-text {
font-size: 1rem;
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 4px 0;
letter-spacing: -0.02em;
line-height: 1.3;
}
.dashboard-cta-sub {
font-size: 0.8125rem;
color: var(--text-secondary);
margin: 0;
letter-spacing: -0.01em;
line-height: 1.4;
max-width: 420px;
}
.dashboard-cta-btn {
padding: 12px 24px;
background: linear-gradient(135deg, #0369a1 0%, #0284c7 50%, #0ea5e9 100%);
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px 12px 22px;
background: linear-gradient(135deg, #0369a1 0%, #0284c7 48%, #0ea5e9 100%);
border: none;
border-radius: 10px;
border-radius: 12px;
color: #fff;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}
.dashboard-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(2, 132, 199, 0.45);
filter: brightness(1.05);
filter: brightness(1.06);
}
.dashboard-cta-btn-arrow {
display: inline-flex;
opacity: 0.9;
transition: transform 0.2s ease;
}
.dashboard-cta-btn:hover .dashboard-cta-btn-arrow {
transform: translateX(2px);
}
.dashboard-cta-btn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.8);
outline-offset: 2px;
}
/* 尊重用户“减少动效”偏好（无障碍最佳实践） */
@media (prefers-reduced-motion: reduce) {
.dashboard-kpi-card,
.dashboard-overview-item,
.dashboard-quick-link,
.dashboard-cta-btn {
transition: none;
}
.dashboard-kpi-card:hover,
.dashboard-overview-item:hover {
transform: none;
}
.dashboard-quick-link:hover {
transform: none;
}
.dashboard-cta-btn:hover {
transform: none;
}
.dashboard-cta-btn:hover .dashboard-cta-btn-arrow {
transform: none;
}
.dashboard-cta-btn-arrow {
transition: none;
}
.dashboard-tools-bar-fill {
animation: none;
}
.dashboard-bar-seg {
transition: none;
}
}
.vulnerability-controls {
web/static/js/router.js
+3 -3
View File
@@ -1,5 +1,5 @@
// 页面路由管理
let currentPage = 'chat';
let currentPage = 'dashboard';
// 初始化路由
function initRouter() {
@@ -32,8 +32,8 @@ function initRouter() {
}
}
// 默认显示对话页面
switchPage('chat');
// 默认显示仪表盘
switchPage('dashboard');
}
// 切换页面
web/templates/index.html
+29 -29
View File
@@ -204,7 +204,7 @@
<!-- 内容区域 -->
<div class="content-area">
<!-- 仪表盘页面 -->
<div id="page-dashboard" class="page">
<div id="page-dashboard" class="page active">
<div class="dashboard-page">
<div class="page-header">
<h2>仪表盘</h2>
@@ -215,22 +215,10 @@
<div class="dashboard-content">
<!-- 第一行：核心 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-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-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 class="dashboard-kpi-card" role="button" tabindex="0" onclick="switchPage('tasks')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('tasks'); }" title="点击查看任务管理"> <div class="dashboard-kpi-value" id="dashboard-running-tasks">-</div><div class="dashboard-kpi-label">运行中任务</div></div>
<div class="dashboard-kpi-card" role="button" tabindex="0" onclick="switchPage('vulnerabilities')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('vulnerabilities'); }" title="点击查看漏洞管理"><div class="dashboard-kpi-value" id="dashboard-vuln-total">-</div><div class="dashboard-kpi-label">漏洞总数</div></div>
<div class="dashboard-kpi-card" role="button" tabindex="0" onclick="switchPage('mcp-monitor')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); 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" role="button" tabindex="0" onclick="switchPage('mcp-monitor')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); 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-grid">
@@ -257,17 +245,17 @@
<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 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>
<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 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>
<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 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>
</div>
</section>
@@ -293,15 +281,27 @@
</div>
</div>
<div class="dashboard-cta-block">
<p class="dashboard-cta-text">准备好开始安全测试？</p>
<button class="dashboard-cta-btn" onclick="switchPage('chat')">前往对话</button>
<div class="dashboard-cta-accent"></div>
<div class="dashboard-cta-content">
<div class="dashboard-cta-icon" aria-hidden="true">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" 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-cta-copy">
<p class="dashboard-cta-text">准备好开始安全测试？</p>
<p class="dashboard-cta-sub">在对话中描述目标，AI 将协助执行扫描与漏洞分析</p>
</div>
</div>
<button class="dashboard-cta-btn" onclick="switchPage('chat')">
<span>前往对话</span>
<span class="dashboard-cta-btn-arrow" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
</button>
</div>
</div>
</div>
</div>
<!-- 对话页面 -->
<div id="page-chat" class="page active">
<div id="page-chat" class="page">
<div class="chat-page-layout">
<!-- 历史对话侧边栏 -->
<aside class="conversation-sidebar">