Aahanaaa13/cybersecurity-dashboard

# 🛡️ CyberWatch — 实时网络安全威胁仪表盘 一个现代化的网络安全监控仪表盘，利用实时的 CVE 数据提供实时漏洞情报。 ## 🌐 实时仪表盘 使用 Next.js 14 构建并在 `localhost:3000` 上运行 ## 🎯 项目概述 该仪表盘是作为 Ultimez Technology 网络安全项目第一阶段的一部分构建的。它从 NVD/NIST 公共 API 获取实时的 CVE（通用漏洞披露）数据，并将其显示在交互式、可过滤的仪表盘中。 ## ✨ 功能 - 🔴 来自 NVD/NIST API 的实时 CVE 数据 - 📊 严重性分布饼图 - 📊 CVSS 分数柱状图 - 🔍 按 CVE ID 或关键字搜索 - 🔽 按严重性过滤（严重/高/中/低） - 🗂️ 按类别过滤（SQL 注入、缓冲区溢出等） - 📅 按日期范围过滤 - 🔄 每 5 分钟自动刷新 - 📱 完全响应式（桌面端、平板、移动端） - 🌙 暗色主题 UI ## 🛠️ 技术栈 - **框架：** Next.js 14 - **语言：** TypeScript - **样式：** Tailwind CSS - **图表：** Recharts - **API：** NVD CVE API (NIST) ## 📦 安装与设置 ### 1. 克隆仓库 ``` git clone https://github.com/Aahanaaa13/cybersecurity-dashboard.git ``` ### 2. 进入项目文件夹 ``` cd cybersecurity-dashboard ``` ### 3. 安装依赖 ``` npm install ``` ### 4. 运行开发服务器 ``` npm run dev ``` ### 5. 在浏览器中打开 ``` http://localhost:3000 ``` ## 📁 项目结构 ``` app/ ├── components/ │ ├── AutoRefresh.tsx # Auto-refresh timer component │ ├── DashboardLayout.tsx # Main layout wrapper │ ├── FilterBar.tsx # Search and filter controls │ ├── ScoreChart.tsx # CVSS score bar chart │ ├── SeverityChart.tsx # Severity pie chart │ ├── Sidebar.tsx # Navigation sidebar │ ├── StatCard.tsx # Summary stat cards │ └── ThreatFeed.tsx # CVE data table ├── lib/ │ └── nvdApi.ts # NVD API service layer ├── types/ │ └── index.ts # TypeScript type definitions ├── globals.css # Global styles ├── layout.tsx # Root layout └── page.tsx # Main dashboard page ``` ## 🔌 API 参考 数据来源于国家漏洞数据库： - **Base URL：** `https://services.nvd.nist.gov/rest/json/cves/2.0` - **认证：** 无需 API 密钥（公共 API） - **速率限制：** 每 30 秒 5 次请求 ## 📊 仪表盘板块 | 板块 | 描述 | |---|---| | 统计卡片 | CVE 总数、严重、高、本周计数 | | 严重性图表 | 显示严重性分布的饼图 | | 分数图表 | 显示 CVSS 分数范围的柱状图 | | 过滤栏 | 搜索和过滤控件 | | 威胁信息流 | CVE 漏洞的实时表格 | ## 👩‍💻 开发者 **Aahana Mittal** GitHub：[@Aahanaaa13](https://github.com/Aahanaaa13) ## 📄 许可证 MIT 许可证

标签：Tailwind CSS, TypeScript, Web仪表盘, 威胁情报监控, 安全插件, 自动化攻击