H-tech-AFAQ-CEO/Vibrant-Cybersecurity-Dashboard-Interface

# Sentinel — 威胁情报仪表板 **Sentinel** 是一个现代化的交互式安全运营中心 (SOC) 仪表板，专为实时威胁监控、事件响应和网络可视化而设计。它作为单页 HTML/CSS/JS 应用程序构建，为安全分析师提供了一个全面的深色主题界面，用于跟踪警报、分析攻击向量并管理安全态势。 ## ✨ 功能 ### 核心模块 - **概述仪表板** – 实时安全态势仪表盘、关键指标计数器、威胁活动时间线和分布图表。 - **威胁源** – 可排序和过滤的活动威胁表，带有严重性指标、搜索和导出为 CSV 的功能。 - **网络地图** – 动态交互式拓扑可视化，具有实时攻击路径动画和节点检查功能。 - **分析中心** – MTTR 趋势分析、每小时警报量图表和地理威胁来源映射。 - **事件管理** – 跟踪并解决安全事件，提供状态更新和深入查看细节功能。 - **资产清单** – 带有过滤功能和可视化风险指标的风险评分资产列表。 - **检测规则** – 通过简洁的开关界面管理和切换检测规则的开启/关闭状态。 ### 交互元素 - **深入查看面板** – 点击任何威胁、事件或通知以查看详细上下文和建议的操作。 - **模态框** – 无需离开仪表板即可内联添加新威胁、事件或规则。 - **实时时钟与自动刷新** – 实时 UTC 时钟和定期数据更新模拟实时事件摄取。 - **热力图** – 通过颜色编码的密度可视化事件在几天和几小时内的分布。 - **Chart.js 可视化** – 条形图、折线图、圆环图和雷达图，用于提供深入见解。 ### 技术亮点 - **响应式设计** – 适用于桌面、平板和移动设备，带有可折叠的侧边栏。 - **深色/浅色主题切换** – 在保留数据的同时，在浅色和深色模式之间切换。 - **GSAP 动画** – 流畅的页面过渡和淡入效果。 - **Canvas 网络拓扑** – 带有移动攻击指示器的自定义绘制网络地图。 - **本地数据模拟** – 使用逼真的模拟数据即可完全运行，随时可连接到后端 API。 ## 🖼️ 截图 | 概述仪表板 | 威胁源 | |-------------------|-------------| | *[插入主仪表板的截图]* | *[插入威胁表的截图]* | | 网络地图 | 分析 | |------------|----------| | *[插入网络画布的截图]* | *[插入 MTTR 图表的截图]* | ## 🚀 快速入门 ### 前置条件 无需构建工具或服务器。任何现代网络浏览器（Chrome、Firefox、Safari、Edge）均可满足需求。 ### 安装与使用 1. 克隆或下载该代码库。 2. 直接在浏览器中打开 `index.html`。 # 如果你有一个本地服务器 (可选) npx serve 🔧 自定义 数据集成 所有数据目前均从静态 JavaScript 数组（例如，THREATS、ASSETS、RULES）提供。要连接到实时后端： 将 THREATS 数组替换为 `renderThreatTable()` 内部的 API fetch 调用。 修改 `liveRefresh()` 以从 WebSocket 或 REST endpoint 拉取实时事件。 主题 广泛使用了 CSS custom properties（变量）。编辑 `:root` 代码块以调整颜色、间距和边框圆角。 `toggleTheme()` 函数可在浅色和深色变量集之间进行切换。 图表 图表使用 Chart.js 初始化。图表的数据可以通过修改 `buildTimelineData()` 函数和其他图表初始化函数来更新。 👨‍💻 开发者 Afaq Ahmad 安全仪表板架构师与开发者 本项目作为一个现代安全监控界面的综合演示而设计和构建，结合了实时数据可视化与实用的 SOC 工作流。 📄 许可证 本项目在 MIT 许可证下发布。欢迎自由使用、修改和分发，但需注明适当的出处。

标签：Chart.js, HTML/CSS/JS, MTTR分析, SOC仪表盘, 仪表盘UI, 单页应用, 后端开发, 多模态安全, 威胁情报, 威胁热力图, 威胁监控, 安全告警, 安全运营中心, 实时时钟, 开发者工具, 开源安全项目, 攻击向量分析, 数据可视化, 检测规则, 深色主题, 网络安全态势感知, 网络拓扑图, 网络映射, 网络资产发现, 资产清单