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

Add files via upload

Browse Source
This commit is contained in:
公明
2025-11-14 01:34:16 +08:00
committed by GitHub
parent d61c85e73e
commit 1b14070cee
9 changed files with 1315 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/style.css
+306 -14
View File
@@ -97,28 +97,55 @@ header {
font-weight: 400;
}
.settings-btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 8px;
border-radius: 6px;
cursor: pointer;
.header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.header-actions button {
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
color: white;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.2s ease;
}
.settings-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
}
.settings-btn svg {
.header-actions button svg {
stroke: currentColor;
}
.header-actions button:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.35);
transform: translateY(-1px);
}
.monitor-btn {
color: #8cc4ff;
border-color: rgba(0, 102, 255, 0.35);
background: rgba(0, 102, 255, 0.15);
}
.monitor-btn:hover {
background: rgba(0, 102, 255, 0.25);
border-color: rgba(0, 102, 255, 0.45);
color: #cfe4ff;
}
.settings-btn {
padding: 8px;
min-width: 44px;
}
/* 侧边栏样式 */
.sidebar {
width: 280px;
@@ -1625,3 +1652,268 @@ header {
background: var(--bg-tertiary);
border-color: var(--accent-color);
}
.monitor-modal-content {
max-width: 1080px;
width: 95%;
max-height: 92vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.monitor-modal-body {
padding: 24px;
background: var(--bg-secondary);
border-radius: 0 0 16px 16px;
overflow-y: auto;
}
.monitor-sections {
display: grid;
gap: 24px;
}
.monitor-section {
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 20px;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 16px;
}
.monitor-section .section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.monitor-section .section-header h3 {
margin: 0;
font-size: 1.1rem;
color: var(--text-primary);
}
.monitor-section .section-actions {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.875rem;
color: var(--text-secondary);
}
.monitor-section .section-actions select {
margin-left: 6px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--border-color);
background: var(--bg-secondary);
color: var(--text-primary);
font-size: 0.875rem;
}
.monitor-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.monitor-stat-card {
background: var(--bg-secondary);
border: 1px solid rgba(0, 102, 255, 0.12);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow: var(--shadow-xs);
}
.monitor-stat-card h4 {
margin: 0;
font-size: 0.95rem;
color: var(--text-secondary);
}
.monitor-stat-value {
font-size: 1.8rem;
font-weight: 600;
color: var(--text-primary);
}
.monitor-stat-meta {
font-size: 0.8rem;
color: var(--text-muted);
}
.monitor-table-container {
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
}
.monitor-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.monitor-table th,
.monitor-table td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--border-color);
vertical-align: middle;
}
.monitor-table thead {
background: var(--bg-secondary);
color: var(--text-secondary);
font-weight: 600;
}
.monitor-table tbody tr:hover {
background: rgba(0, 102, 255, 0.08);
}
.monitor-status-chip {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
padding: 4px 10px;
font-size: 0.75rem;
font-weight: 600;
}
.monitor-status-chip.completed {
background: rgba(40, 167, 69, 0.12);
color: var(--success-color);
}
.monitor-status-chip.running {
background: rgba(0, 102, 255, 0.12);
color: var(--accent-color);
}
.monitor-status-chip.failed {
background: rgba(220, 53, 69, 0.12);
color: var(--error-color);
}
.monitor-execution-actions {
display: flex;
align-items: center;
gap: 8px;
}
.monitor-execution-actions button {
padding: 6px 12px;
font-size: 0.75rem;
}
.monitor-vuln-container {
display: grid;
gap: 16px;
}
.monitor-vuln-summary {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.vuln-counter {
padding: 10px 16px;
border-radius: 12px;
background: var(--bg-secondary);
border: 1px solid rgba(0, 102, 255, 0.12);
min-width: 140px;
display: flex;
flex-direction: column;
gap: 4px;
}
.vuln-counter strong {
font-size: 1.4rem;
color: var(--text-primary);
}
.vuln-counter span {
font-size: 0.8rem;
color: var(--text-muted);
}
.vuln-list {
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
}
.vuln-item {
padding: 14px 16px;
border-bottom: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 6px;
}
.vuln-item:last-child {
border-bottom: none;
}
.vuln-title {
font-weight: 600;
color: var(--text-primary);
}
.vuln-severity {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-primary);
}
.vuln-severity.critical {
background: rgba(108, 0, 150, 0.15);
color: #bf00ff;
}
.vuln-severity.high {
background: rgba(220, 53, 69, 0.12);
color: var(--error-color);
}
.vuln-severity.medium {
background: rgba(255, 193, 7, 0.15);
color: #b8860b;
}
.vuln-severity.low {
background: rgba(40, 167, 69, 0.12);
color: var(--success-color);
}
.monitor-empty {
text-align: center;
padding: 32px 16px;
color: var(--text-muted);
font-size: 0.9rem;
}
.monitor-error {
text-align: center;
padding: 24px 16px;
color: var(--error-color);
font-size: 0.9rem;
background: rgba(220, 53, 69, 0.08);
border-radius: 12px;
}
web/static/js/app.js
+240 -2
View File
@@ -1654,13 +1654,17 @@ function closeSettings() {
window.onclick = function(event) {
const settingsModal = document.getElementById('settings-modal');
const mcpModal = document.getElementById('mcp-detail-modal');
const monitorModal = document.getElementById('monitor-modal');
if (event.target == settingsModal) {
if (event.target === settingsModal) {
closeSettings();
}
if (event.target == mcpModal) {
if (event.target === mcpModal) {
closeMCPDetail();
}
if (event.target === monitorModal) {
closeMonitorPanel();
}
}
// 加载配置
@@ -1913,3 +1917,237 @@ async function changePassword() {
}
}
// 监控面板状态
const monitorState = {
executions: [],
stats: {},
lastFetchedAt: null
};
function openMonitorPanel() {
const modal = document.getElementById('monitor-modal');
if (!modal) {
return;
}
modal.style.display = 'block';
// 重置显示状态
const statsContainer = document.getElementById('monitor-stats');
const execContainer = document.getElementById('monitor-executions');
if (statsContainer) {
statsContainer.innerHTML = '<div class="monitor-empty">加载中...</div>';
}
if (execContainer) {
execContainer.innerHTML = '<div class="monitor-empty">加载中...</div>';
}
const statusFilter = document.getElementById('monitor-status-filter');
if (statusFilter) {
statusFilter.value = 'all';
}
refreshMonitorPanel();
}
function closeMonitorPanel() {
const modal = document.getElementById('monitor-modal');
if (modal) {
modal.style.display = 'none';
}
}
async function refreshMonitorPanel() {
const statsContainer = document.getElementById('monitor-stats');
const execContainer = document.getElementById('monitor-executions');
try {
const response = await apiFetch('/api/monitor', { method: 'GET' });
const result = await response.json().catch(() => ({}));
if (!response.ok) {
throw new Error(result.error || '获取监控数据失败');
}
monitorState.executions = Array.isArray(result.executions) ? result.executions : [];
monitorState.stats = result.stats || {};
monitorState.lastFetchedAt = new Date();
renderMonitorStats(monitorState.stats, monitorState.lastFetchedAt);
renderMonitorExecutions(monitorState.executions);
} catch (error) {
console.error('刷新监控面板失败:', error);
if (statsContainer) {
statsContainer.innerHTML = `<div class="monitor-error">无法加载统计信息：${escapeHtml(error.message)}</div>`;
}
if (execContainer) {
execContainer.innerHTML = `<div class="monitor-error">无法加载执行记录：${escapeHtml(error.message)}</div>`;
}
}
}
function applyMonitorFilters() {
const statusFilter = document.getElementById('monitor-status-filter');
const status = statusFilter ? statusFilter.value : 'all';
renderMonitorExecutions(monitorState.executions, status);
}
function renderMonitorStats(statsMap = {}, lastFetchedAt = null) {
const container = document.getElementById('monitor-stats');
if (!container) {
return;
}
const entries = Object.values(statsMap);
if (entries.length === 0) {
container.innerHTML = '<div class="monitor-empty">暂无统计数据</div>';
return;
}
// 计算总体汇总
const totals = entries.reduce(
(acc, item) => {
acc.total += item.totalCalls || 0;
acc.success += item.successCalls || 0;
acc.failed += item.failedCalls || 0;
const lastCall = item.lastCallTime ? new Date(item.lastCallTime) : null;
if (lastCall && (!acc.lastCallTime || lastCall > acc.lastCallTime)) {
acc.lastCallTime = lastCall;
}
return acc;
},
{ total: 0, success: 0, failed: 0, lastCallTime: null }
);
const successRate = totals.total > 0 ? ((totals.success / totals.total) * 100).toFixed(1) : '0.0';
const lastUpdatedText = lastFetchedAt ? lastFetchedAt.toLocaleString('zh-CN') : 'N/A';
const lastCallText = totals.lastCallTime ? totals.lastCallTime.toLocaleString('zh-CN') : '暂无调用';
let html = `
<div class="monitor-stat-card">
<h4>总调用次数</h4>
<div class="monitor-stat-value">${totals.total}</div>
<div class="monitor-stat-meta">成功 ${totals.success} / 失败 ${totals.failed}</div>
</div>
<div class="monitor-stat-card">
<h4>成功率</h4>
<div class="monitor-stat-value">${successRate}%</div>
<div class="monitor-stat-meta">统计自全部工具调用</div>
</div>
<div class="monitor-stat-card">
<h4>最近一次调用</h4>
<div class="monitor-stat-value" style="font-size:1rem;">${lastCallText}</div>
<div class="monitor-stat-meta">最后刷新时间：${lastUpdatedText}</div>
</div>
`;
// 显示最多前4个工具的统计
const topTools = entries
.slice()
.sort((a, b) => (b.totalCalls || 0) - (a.totalCalls || 0))
.slice(0, 4);
topTools.forEach(tool => {
const toolSuccessRate = tool.totalCalls > 0 ? ((tool.successCalls || 0) / tool.totalCalls * 100).toFixed(1) : '0.0';
html += `
<div class="monitor-stat-card">
<h4>${escapeHtml(tool.toolName || '未知工具')}</h4>
<div class="monitor-stat-value">${tool.totalCalls || 0}</div>
<div class="monitor-stat-meta">
成功 ${tool.successCalls || 0} / 失败 ${tool.failedCalls || 0} · 成功率 ${toolSuccessRate}%
</div>
</div>
`;
});
container.innerHTML = `<div class="monitor-stats-grid">${html}</div>`;
}
function renderMonitorExecutions(executions = [], statusFilter = 'all') {
const container = document.getElementById('monitor-executions');
if (!container) {
return;
}
if (!Array.isArray(executions) || executions.length === 0) {
container.innerHTML = '<div class="monitor-empty">暂无执行记录</div>';
return;
}
const normalizedStatus = statusFilter === 'all' ? null : statusFilter;
const filtered = normalizedStatus
? executions.filter(exec => (exec.status || '').toLowerCase() === normalizedStatus)
: executions;
if (filtered.length === 0) {
container.innerHTML = '<div class="monitor-empty">当前筛选条件下暂无记录</div>';
return;
}
const rows = filtered
.slice(0, 25)
.map(exec => {
const status = (exec.status || 'unknown').toLowerCase();
const statusClass = `monitor-status-chip ${status}`;
const statusLabel = getStatusText(status);
const startTime = exec.startTime ? new Date(exec.startTime).toLocaleString('zh-CN') : '未知';
const duration = formatExecutionDuration(exec.startTime, exec.endTime);
const toolName = escapeHtml(exec.toolName || '未知工具');
const executionId = escapeHtml(exec.id || '');
return `
<tr>
<td>${toolName}</td>
<td><span class="${statusClass}">${statusLabel}</span></td>
<td>${startTime}</td>
<td>${duration}</td>
<td>
<div class="monitor-execution-actions">
<button class="btn-secondary" onclick="showMCPDetail('${executionId}')">查看详情</button>
</div>
</td>
</tr>
`;
})
.join('');
container.innerHTML = `
<div class="monitor-table-container">
<table class="monitor-table">
<thead>
<tr>
<th>工具</th>
<th>状态</th>
<th>开始时间</th>
<th>耗时</th>
<th>操作</th>
</tr>
</thead>
<tbody>${rows}</tbody>
</table>
</div>
`;
}
function formatExecutionDuration(start, end) {
if (!start) {
return '未知';
}
const startTime = new Date(start);
const endTime = end ? new Date(end) : new Date();
if (Number.isNaN(startTime.getTime()) || Number.isNaN(endTime.getTime())) {
return '未知';
}
const diffMs = Math.max(0, endTime - startTime);
const seconds = Math.floor(diffMs / 1000);
if (seconds < 60) {
return `${seconds} 秒`;
}
const minutes = Math.floor(seconds / 60);
if (minutes < 60) {
const remain = seconds % 60;
return remain > 0 ? `${minutes} 分 ${remain} 秒` : `${minutes} 分`;
}
const hours = Math.floor(minutes / 60);
const remainMinutes = minutes % 60;
return remainMinutes > 0 ? `${hours} 小时 ${remainMinutes} 分` : `${hours} 小时`;
}
web/templates/index.html
+52 -2
View File
@@ -37,12 +37,20 @@
</div>
<div class="header-right">
<p class="header-subtitle">安全测试平台</p>
<button class="settings-btn" onclick="openSettings()" title="设置">
<div class="header-actions">
<button class="monitor-btn" onclick="openMonitorPanel()" title="MCP 监控面板">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12h4l3 8 4-16 3 8h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>监控</span>
</button>
<button class="settings-btn" onclick="openSettings()" title="设置">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</button>
</div>
</div>
</div>
</header>
@@ -155,6 +163,48 @@
</div>
</div>
<!-- 监控面板模态框 -->
<div id="monitor-modal" class="modal">
<div class="modal-content monitor-modal-content">
<div class="modal-header">
<h2>MCP 监控面板</h2>
<span class="modal-close" onclick="closeMonitorPanel()">&times;</span>
</div>
<div class="monitor-modal-body">
<div class="monitor-sections">
<section class="monitor-section monitor-overview">
<div class="section-header">
<h3>执行统计</h3>
<button class="btn-secondary" onclick="refreshMonitorPanel()">刷新</button>
</div>
<div id="monitor-stats" class="monitor-stats-grid">
<div class="monitor-empty">加载中...</div>
</div>
</section>
<section class="monitor-section monitor-executions">
<div class="section-header">
<h3>最新执行记录</h3>
<div class="section-actions">
<label>
状态筛选
<select id="monitor-status-filter" onchange="applyMonitorFilters()">
<option value="all">全部</option>
<option value="completed">已完成</option>
<option value="running">执行中</option>
<option value="failed">失败</option>
</select>
</label>
</div>
</div>
<div id="monitor-executions" class="monitor-table-container">
<div class="monitor-empty">加载中...</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- MCP调用详情模态框 -->
<div id="mcp-detail-modal" class="modal">
<div class="modal-content">