joemunene-by/sentinelpulse

# SentinelPulse **实时威胁情报仪表盘** 由 CEO Joe Munene 构建 SentinelPulse 是一款企业级网络安全威胁情报仪表盘，专为政府、非政府组织 (NGO)、企业和安全团队设计。它通过精致的深色模式优先界面，提供对全球网络威胁的实时可见性。 ## 功能特性 - 📊 **实时威胁订阅源** - 聚合网络安全新闻和事件 - 🗺️ **全球威胁热力图** - 按区域可视化事件密度 - 📈 **交互式时间轴** - 安全事件按时间顺序展示 - 🔍 **高级过滤** - 按时间范围、严重程度、区域、标签和关键词筛选 - 📱 **响应式设计** - 在桌面、平板和移动设备上无缝运行 - ♿ **无障碍访问** - 符合 WCAG 标准，支持键盘导航和屏幕阅读器 - 🎨 **深色模式** - 具有高对比度的战术控制室美学 ## 技术栈 - **React 18** - UI 框架 - **Vite** - 构建工具和开发服务器 - **Tailwind CSS** - 实用优先的样式框架 - **Framer Motion** - 流畅动画 - **Recharts** - 数据可视化 - **React Window** - 虚拟化列表以提升性能 ## 快速开始 ### 前置条件 - Node.js 18+ 和 npm ### 安装说明 1. 克隆或下载此仓库 2. 安装依赖： ``` npm install ``` 3. 启动开发服务器： ``` npm run dev ``` 4. 在浏览器中打开 `http://localhost:3000` 应用程序将自动在您的默认浏览器中打开。 ## 生产环境构建 创建生产构建： ``` npm run build ``` 优化后的文件将位于 `dist/` 目录中。 预览生产构建： ``` npm run preview ``` ## 部署 ### Vercel 1. 安装 Vercel CLI：`npm i -g vercel` 2. 在项目目录中运行 `vercel` 3. 按照提示进行部署 或者将您的 GitHub 仓库连接到 Vercel 以实现自动部署。 ### Netlify 1. 安装 Netlify CLI：`npm i -g netlify-cli` 2. 运行 `netlify deploy` 进行草稿部署，或运行 `netlify deploy --prod` 进行生产部署 3. 按照提示操作 或者将 `dist/` 文件夹拖放到 Netlify 的仪表盘中。 ### 其他平台 由于这是一个静态站点，您可以将其部署到任何静态托管服务： - GitHub Pages - AWS S3 + CloudFront - Azure Static Web Apps - Google Cloud Storage - 任何 CDN 或 Web 服务器 ## 集成真实 API 目前，应用程序使用模拟数据。要集成真实的威胁情报 API： 1. 阅读 API 集成指南：`src/api/README_API.md` 2. 将 API 密钥设置为环境变量（见下文） 3. 更新 `src/utils/mockApi.js` 以使用真实的 API 调用 4. 处理 CORS 问题（生产环境使用后端代理） ### 环境变量 在项目根目录创建 `.env` 文件： ``` # API Keys（替换为你的实际 keys） VITE_NEWSAPI_KEY=your_newsapi_key_here VITE_VIRUSTOTAL_KEY=your_virustotal_key_here VITE_MISP_BASE_URL=https://your-misp-instance.com VITE_MISP_API_KEY=your_misp_api_key VITE_RECORDEDFUTURE_TOKEN=your_rf_token # Feature flags VITE_USE_REAL_API=false ``` **重要提示**：切勿将 `.env` 文件提交到版本控制。将 `.env` 添加到 `.gitignore`。 ## 项目结构 ``` sentinelpulse/ ├── public/ # Static assets │ ├── index.html # HTML template │ ├── favicon.svg # Favicon │ └── manifest.json # PWA manifest ├── src/ │ ├── components/ # React components │ │ ├── Nav.jsx │ │ ├── HeroSummary.jsx │ │ ├── NewsFeed.jsx │ │ ├── ThreatCard.jsx │ │ ├── ArticleModal.jsx │ │ ├── FiltersPanel.jsx │ │ ├── MetricCounters.jsx │ │ ├── IncidentTimeline.jsx │ │ ├── HeatmapGlobe.jsx │ │ └── Footer.jsx │ ├── data/ # Mock data │ │ ├── sampleNews.json │ │ └── sampleIncidents.json │ ├── api/ # API integration docs │ │ └── README_API.md │ ├── utils/ # Utility functions │ │ ├── formatters.js │ │ └── mockApi.js │ ├── App.jsx # Main app component │ ├── main.jsx # Entry point │ └── index.css # Global styles ├── package.json ├── vite.config.js ├── tailwind.config.js └── README.md ``` ## 自定义 ### 联系信息 更新以下文件中的联系详情： - `src/components/Footer.jsx` - `src/components/App.jsx`（About 部分） - `public/index.html`（meta 标签） ### 颜色与样式 编辑 `tailwind.config.js` 以自定义调色板和字体。 ### 模拟数据 修改 `src/data/sampleNews.json` 和 `src/data/sampleIncidents.json` 以添加或更改模拟条目。 ## 无障碍性 - 语义化 HTML 元素 - ARIA 标签和角色 - 键盘导航支持 - 屏幕阅读器兼容性 - 减少动画支持 - 高对比度颜色 ## 性能 - 长列表虚拟化 - 重型组件延迟加载 - 使用 Vite 优化包体积 - 代码分割 - 图片优化 ## 浏览器支持 - Chrome/Edge（最新版） - Firefox（最新版） - Safari（最新版） - 移动浏览器（iOS Safari、Chrome Mobile） ## 许可证 本项目为 CEO Joe Munene 拥有的专有项目。 ## 支持 如有问题或需要支持： - 电子邮件：joemunene984@gmail.com - 电话：+254 718 733 968 ## 免责声明 本仪表盘使用模拟数据进行演示。所有威胁情报数据均为虚构，不得用于现实世界的安全决策。集成真实 API 时，请确保采取适当的数据验证和安全措施。 **由 CEO Joe Munene 用 ❤️ 构建**

标签：HTTP/HTTPS抓包, Open Source, React, Syscalls, Tailwind CSS, Vite, 交互式地图, 仪表盘, 企业安全, 威胁情报, 威胁热点图, 安全运营, 开发者工具, 态势感知, 态势感知大屏, 扫描框架, 政府安全, 暗黑模式, 网络安全, 网络资产管理, 自定义脚本, 隐私保护