Priyankayenni/SecuraGuard-

# SecuraGuard 一个使用 React、TypeScript、Vite 和 Tailwind CSS v4 构建的高级深色主题网络安全门户。所有数据均为模拟——无需后端。 ## 功能特性 - **仪表盘** — 实时自动更新的安全事件订阅、威胁等级仪表、实时网络图表、系统资源监控 - **密码工具** — 包含熵值/破解时间分析的强度分析器、密码生成器、口令生成器、泄露检查器 - **漏洞扫描器** — 动画多步扫描、端口扫描结果、SSL 评级、CVE 查询、安全标头检查 - **网络监控** — 实时带宽图表（每 2 秒实时更新）、活动连接表、带开关的防火墙规则 - **事件响应** — 包含严重性/状态的事件表、时间线详情面板、创建新事件弹窗 - **威胁情报** — IP 信誉查询、IOC 订阅、威胁行为者档案 (APT29、Lazarus、Sandworm、FIN7)、CVE 订阅 - **报告** — 带有图表、分页和导出按钮的可筛选报告列表 - **设置** — 个人资料编辑器、通知偏好设置、2FA、API 密钥管理、集成、审计日志 ## 技术栈 - **React 19** + **TypeScript** - **Vite 7** — 构建工具 - **Tailwind CSS v4** — 样式（通过 `@tailwindcss/vite`） - **Recharts** — 图表和图形 - **Lucide React** — 图标 - **Wouter** — 客户端路由 - **TanStack Query** — 数据获取（准备好对接后端） - **Radix UI** — 无障碍的 headless 组件 - **Framer Motion** — 动画 ## 快速开始 ### 前置条件 - **Node.js** 20 或更高版本 — [nodejs.org](https://nodejs.org) - **npm**、**pnpm** 或 **yarn** ### 安装与运行 ``` # 安装依赖 npm install # 启动开发服务器（在 http://localhost:5173 打开） npm run dev ``` 或者使用 pnpm： ``` pnpm install pnpm dev ``` ### 生产环境构建 ``` npm run build # 输出位于 dist/ 文件夹 ``` ### VS Code 设置 在 VS Code 中打开项目，并按照提示安装推荐的扩展（`.vscode/extensions.json`）： - **Tailwind CSS IntelliSense** — Tailwind 类的自动补全 - **Prettier** — 代码格式化 - **ESLint** — 代码检查 - **Path IntelliSense** — `@/` 别名路径补全 ## 项目结构 ``` secura-guard/ ├── src/ │ ├── components/ │ │ ├── Layout.tsx # Sidebar + header shell │ │ └── ui/ # shadcn/ui component library │ ├── pages/ │ │ ├── Dashboard.tsx │ │ ├── PasswordTools.tsx │ │ ├── VulnerabilityScanner.tsx │ │ ├── NetworkMonitor.tsx │ │ ├── Incidents.tsx │ │ ├── ThreatIntel.tsx │ │ ├── Reports.tsx │ │ ├── Settings.tsx │ │ └── not-found.tsx │ ├── App.tsx # Router setup │ ├── main.tsx # Entry point │ └── index.css # Global styles + Tailwind theme ├── .vscode/ │ ├── settings.json # Editor settings │ ├── extensions.json # Recommended extensions │ └── launch.json # Chrome debugger config ├── index.html ├── vite.config.ts ├── tsconfig.json └── package.json ``` ## 自定义 - **颜色** — 所有主题颜色都是 `src/index.css` 中 `:root` 和 `.dark` 下的 CSS 自定义属性 - **模拟数据** — 每个页面都会生成自己的模拟数据。搜索 `useState` + `useEffect` 模式以替换为真实的 API 调用 - **路由** — 路由在 `src/App.tsx` 中使用 Wouter 的 `` / `` 定义 - **添加页面** — 在 `src/pages/` 中创建一个新文件，在 `App.tsx` 中导入它，并向 `src/components/Layout.tsx` 添加导航项

标签：APT防御, IP 地址批量处理, IT安全, IT运维, React, Recharts, Socks5代理, Syscalls, Tailwind CSS, TypeScript, Vite, 仪表盘, 前端项目, 威胁情报, 安全插件, 安全监控平台, 安全运营中心, 密码安全工具, 密码管理, 库, 应急响应, 开发者工具, 开源安全工具, 报告系统, 无线安全, 模拟数据, 网络安全, 网络映射, 自动化攻击, 逆向工程平台, 防火墙管理, 隐私保护