mirror of
https://github.com/Ed1s0nZ/CyberStrikeAI.git
synced 2026-05-01 23:35:18 +02:00
公明
322 lines
12 KiB
JavaScript
322 lines
12 KiB
JavaScript
(function () {
|
|
const STORAGE_LAST_SEEN_KEY = 'cyberstrike-notification-last-seen-at';
|
|
const POLL_INTERVAL_ACTIVE_MS = 15000;
|
|
const POLL_INTERVAL_HIDDEN_MS = 60000;
|
|
const MAX_RENDER_ITEMS = 20;
|
|
|
|
const state = {
|
|
inFlight: false,
|
|
timerId: null,
|
|
dropdownOpen: false,
|
|
lastSeenAt: readLastSeenAt(),
|
|
items: [],
|
|
unreadCount: 0,
|
|
};
|
|
|
|
function readLastSeenAt() {
|
|
try {
|
|
const raw = localStorage.getItem(STORAGE_LAST_SEEN_KEY);
|
|
const n = Number(raw);
|
|
if (Number.isFinite(n) && n > 0) return n;
|
|
} catch (e) {
|
|
console.warn('读取通知已读时间失败:', e);
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
function persistLastSeenAt(ts) {
|
|
try {
|
|
localStorage.setItem(STORAGE_LAST_SEEN_KEY, String(ts));
|
|
} catch (e) {
|
|
console.warn('保存通知已读时间失败:', e);
|
|
}
|
|
}
|
|
|
|
function getTimeMs(value) {
|
|
if (!value) return 0;
|
|
const d = new Date(value);
|
|
const ms = d.getTime();
|
|
return Number.isFinite(ms) ? ms : 0;
|
|
}
|
|
|
|
function getLocale() {
|
|
if (typeof window !== 'undefined') {
|
|
if (typeof window.__locale === 'string' && window.__locale) {
|
|
return window.__locale;
|
|
}
|
|
if (typeof window.currentLang === 'string' && window.currentLang) {
|
|
return window.currentLang;
|
|
}
|
|
}
|
|
return 'zh-CN';
|
|
}
|
|
|
|
function formatTime(value) {
|
|
const ms = getTimeMs(value);
|
|
if (!ms) return '-';
|
|
return new Date(ms).toLocaleString(getLocale());
|
|
}
|
|
|
|
function htmlEscape(value) {
|
|
if (typeof window.escapeHtml === 'function') {
|
|
return window.escapeHtml(value == null ? '' : String(value));
|
|
}
|
|
const div = document.createElement('div');
|
|
div.textContent = value == null ? '' : String(value);
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function t(key, fallback, params) {
|
|
if (typeof window !== 'undefined' && typeof window.t === 'function') {
|
|
try {
|
|
const translated = window.t(key, params || {});
|
|
if (translated && translated !== key) return translated;
|
|
} catch (_ignored) {}
|
|
}
|
|
return fallback;
|
|
}
|
|
|
|
async function apiJson(url, options) {
|
|
if (typeof window.apiFetch !== 'function') return null;
|
|
const res = await window.apiFetch(url, options || {});
|
|
if (!res.ok) return null;
|
|
return res.json();
|
|
}
|
|
|
|
async function fetchNotificationSummary() {
|
|
const url = '/api/notifications/summary?since='
|
|
+ encodeURIComponent(String(state.lastSeenAt || 0))
|
|
+ '&limit=80&lang=' + encodeURIComponent(getLocale());
|
|
try {
|
|
const summary = await apiJson(url);
|
|
if (summary && typeof summary === 'object') {
|
|
return summary;
|
|
}
|
|
} catch (_ignored) {}
|
|
return null;
|
|
}
|
|
|
|
function renderBadge(count) {
|
|
const badge = document.getElementById('notification-badge');
|
|
const btn = document.getElementById('notification-bell-btn');
|
|
if (!badge || !btn) return;
|
|
if (count <= 0) {
|
|
badge.style.display = 'none';
|
|
btn.classList.remove('has-alert');
|
|
return;
|
|
}
|
|
const text = count > 99 ? '99+' : String(count);
|
|
badge.innerHTML = '<span class="notification-badge-text">' + htmlEscape(text) + '</span>';
|
|
badge.style.display = 'inline-block';
|
|
btn.classList.add('has-alert');
|
|
}
|
|
|
|
function countP0(items) {
|
|
return (Array.isArray(items) ? items : []).reduce((acc, item) => {
|
|
if (!item || item.level !== 'p0') return acc;
|
|
if (typeof item.count === 'number' && item.count > 0) return acc + item.count;
|
|
return acc + 1;
|
|
}, 0);
|
|
}
|
|
|
|
function markableItems(items) {
|
|
return (Array.isArray(items) ? items : []).filter(item => item && item.actionable !== true && item.id);
|
|
}
|
|
|
|
function hasAction(item) {
|
|
if (!item || !item.type) return false;
|
|
if (item.type === 'vulnerability_created' && item.vulnerabilityId) return true;
|
|
if ((item.type === 'task_completed' || item.type === 'long_running_tasks') && item.conversationId) return true;
|
|
if (item.type === 'task_failed' && item.executionId) return true;
|
|
if (item.type === 'hitl_pending') return true;
|
|
return false;
|
|
}
|
|
|
|
function openNotificationTarget(item) {
|
|
if (!item || !item.type) return;
|
|
if (item.type === 'vulnerability_created' && item.vulnerabilityId) {
|
|
window.location.hash = 'vulnerabilities?id=' + encodeURIComponent(item.vulnerabilityId);
|
|
return;
|
|
}
|
|
if ((item.type === 'task_completed' || item.type === 'long_running_tasks') && item.conversationId) {
|
|
window.location.hash = 'chat?conversation=' + encodeURIComponent(item.conversationId);
|
|
return;
|
|
}
|
|
if (item.type === 'task_failed' && item.executionId) {
|
|
window.location.hash = 'mcp-monitor';
|
|
setTimeout(function () {
|
|
if (typeof showMCPDetail === 'function') {
|
|
showMCPDetail(item.executionId);
|
|
}
|
|
}, 450);
|
|
return;
|
|
}
|
|
if (item.type === 'hitl_pending') {
|
|
window.location.hash = 'hitl';
|
|
}
|
|
}
|
|
|
|
async function markItemsRead(eventIds) {
|
|
if (!Array.isArray(eventIds) || !eventIds.length) return true;
|
|
const payload = { eventIds: eventIds };
|
|
try {
|
|
const result = await apiJson('/api/notifications/read', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
return !!result;
|
|
} catch (_ignored) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function renderNotificationList(items) {
|
|
const list = document.getElementById('notification-list');
|
|
if (!list) return;
|
|
const renderItems = Array.isArray(items) ? items.slice(0, MAX_RENDER_ITEMS) : [];
|
|
if (!renderItems.length) {
|
|
list.innerHTML = '<div class="notification-empty">' + htmlEscape(t('notifications.empty', '暂无新事件')) + '</div>';
|
|
return;
|
|
}
|
|
const html = renderItems.map(item => {
|
|
const canMarkRead = item.actionable !== true && !!item.id;
|
|
const canView = hasAction(item);
|
|
return `
|
|
<div class="notification-item notification-level-${htmlEscape(item.level || 'p2')}">
|
|
<div class="notification-item-header">
|
|
<div class="notification-item-title">${htmlEscape(item.title || t('notifications.itemDefaultTitle', '通知'))}</div>
|
|
<div class="notification-item-actions">
|
|
${canView ? `<button class="notification-item-action-btn notification-item-view-btn" type="button" data-action-id="${htmlEscape(item.id || '')}">${htmlEscape(t('common.view', '查看'))}</button>` : ''}
|
|
${canMarkRead ? `<button class="notification-item-action-btn notification-item-read-btn" type="button" data-notification-id="${htmlEscape(item.id)}">${htmlEscape(t('notifications.markSingleRead', '已读'))}</button>` : ''}
|
|
</div>
|
|
</div>
|
|
<div class="notification-item-desc">${htmlEscape(item.desc || '')}</div>
|
|
<div class="notification-item-time">${htmlEscape(formatTime(item.ts))}</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
list.innerHTML = html;
|
|
const viewButtons = list.querySelectorAll('.notification-item-view-btn');
|
|
viewButtons.forEach(btn => {
|
|
btn.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
const eventID = btn.getAttribute('data-action-id') || '';
|
|
if (!eventID) return;
|
|
const item = state.items.find(it => it && it.id === eventID);
|
|
if (!item) return;
|
|
openNotificationTarget(item);
|
|
closeDropdown();
|
|
});
|
|
});
|
|
const readButtons = list.querySelectorAll('.notification-item-read-btn');
|
|
readButtons.forEach(btn => {
|
|
btn.addEventListener('click', async function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
const eventID = btn.getAttribute('data-notification-id') || '';
|
|
if (!eventID) return;
|
|
const ok = await markItemsRead([eventID]);
|
|
if (ok) {
|
|
await refreshNotifications();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function closeDropdown() {
|
|
const dropdown = document.getElementById('notification-dropdown');
|
|
const bellBtn = document.getElementById('notification-bell-btn');
|
|
if (dropdown) dropdown.style.display = 'none';
|
|
if (bellBtn) bellBtn.classList.remove('active');
|
|
state.dropdownOpen = false;
|
|
}
|
|
|
|
function markSeenNow() {
|
|
state.lastSeenAt = Date.now();
|
|
persistLastSeenAt(state.lastSeenAt);
|
|
}
|
|
|
|
async function refreshNotifications() {
|
|
if (state.inFlight) return;
|
|
state.inFlight = true;
|
|
try {
|
|
const summary = await fetchNotificationSummary();
|
|
const items = summary && Array.isArray(summary.items) ? summary.items : [];
|
|
state.items = items;
|
|
const unreadCount = summary && Number.isFinite(Number(summary.unreadCount))
|
|
? Number(summary.unreadCount)
|
|
: countP0(items);
|
|
state.unreadCount = Math.max(0, unreadCount);
|
|
renderBadge(state.unreadCount);
|
|
renderNotificationList(items);
|
|
} catch (e) {
|
|
console.warn('刷新通知失败:', e);
|
|
} finally {
|
|
state.inFlight = false;
|
|
}
|
|
}
|
|
|
|
function scheduleNextPoll() {
|
|
if (state.timerId) {
|
|
window.clearTimeout(state.timerId);
|
|
state.timerId = null;
|
|
}
|
|
const interval = document.hidden ? POLL_INTERVAL_HIDDEN_MS : POLL_INTERVAL_ACTIVE_MS;
|
|
state.timerId = window.setTimeout(async function () {
|
|
await refreshNotifications();
|
|
scheduleNextPoll();
|
|
}, interval);
|
|
}
|
|
|
|
function handleDocumentClick(event) {
|
|
const container = document.querySelector('.notification-menu-container');
|
|
if (!container) return;
|
|
if (!container.contains(event.target)) {
|
|
closeDropdown();
|
|
}
|
|
}
|
|
|
|
async function toggleDropdown() {
|
|
const dropdown = document.getElementById('notification-dropdown');
|
|
const bellBtn = document.getElementById('notification-bell-btn');
|
|
if (!dropdown || !bellBtn) return;
|
|
const isOpen = dropdown.style.display !== 'none';
|
|
if (isOpen) {
|
|
closeDropdown();
|
|
return;
|
|
}
|
|
dropdown.style.display = 'block';
|
|
bellBtn.classList.add('active');
|
|
state.dropdownOpen = true;
|
|
await refreshNotifications();
|
|
}
|
|
|
|
async function markAllSeen() {
|
|
const ids = markableItems(state.items).map(item => item.id);
|
|
const ok = await markItemsRead(ids);
|
|
if (ok) {
|
|
markSeenNow();
|
|
await refreshNotifications();
|
|
}
|
|
}
|
|
|
|
function initNotifications() {
|
|
const bellBtn = document.getElementById('notification-bell-btn');
|
|
if (!bellBtn) return;
|
|
document.addEventListener('click', handleDocumentClick);
|
|
document.addEventListener('visibilitychange', scheduleNextPoll);
|
|
document.addEventListener('languagechange', function () {
|
|
refreshNotifications();
|
|
});
|
|
refreshNotifications();
|
|
scheduleNextPoll();
|
|
}
|
|
|
|
window.toggleNotificationDropdown = toggleDropdown;
|
|
window.markAllNotificationsSeen = markAllSeen;
|
|
|
|
document.addEventListener('DOMContentLoaded', initNotifications);
|
|
})();
|