Amardeep-prog/socverse-ai

# SOCVerse AI — SOC 分析师职业模拟器 (React) SOCVerse AI 的完整 React + Vite 构建版本，采用与 AttackSurface AI 仪表板相同的架构和打磨标准构建：React Router 页面、共享的玻璃面板设计系统、Framer Motion 过渡、Recharts 以及实时 Three.js 3D 地球仪——而不是单一静态 HTML 文件。 ## 技术栈 - React 19 + Vite 5 - React Router 7（多页面应用，而非单滚动页面） - Tailwind CSS（自定义 SOC 主题：信号青色 / 严重红色 / 警告琥珀色 / 安全绿色 / AI 紫色，`Orbitron` + `Rajdhani` + `JetBrains Mono` 字体系统） - Framer Motion（面板入场动画） - Recharts（队列风险分布） - Three.js（实时旋转的 3D 攻击面地球仪） - lucide-react 图标 ## 运行 ``` npm install npm run dev # local dev server npm run build # production build to dist/ npm run preview # preview the production build ``` ## 页面 - **落地页** (`/`) — 英雄区、功能网格、客户名单、“打卡上班” CTA - **仪表板** (`/dashboard`) — 统计卡片、实时 3D 地球仪、队列风险饼图、首要待处理警报、实时班次时间轴 - **警报队列** (`/alerts`) — 完整的程序化生成队列 - **调查** (`/investigation/:id`) — 核心游戏循环：阶段，Overview / Log Explorer / EDR / Email / Firewall-Cloud 标签页，AI 助手，以及四个案例操作（Contain & Resolve, Advance Phase, False Positive, Escalate to L2） - **用户工单** (`/tickets`) — 一些是常规工单，一些隐藏着真实的安全事件 - **AI 威胁情报** (`/threat-intel`) — 全局 Copilot + 实时 IOC 订阅源 - **MITRE ATT&CK 地图** (`/mitre`) — 按战术分组的技术覆盖范围 - **职业发展** (`/career`) — SOC 实习生 → CISO 晋升阶梯 + 认证 - **成就** (`/achievements`) - **排行榜** (`/leaderboard`) - **设置** (`/settings`) — 重置已保存的进度 ## 架构 所有游戏状态（XP、等级、收入/信任度/停机时间、实时警报队列、工单、MITRE 覆盖范围、成就、班次时间轴流）都存在于单个 React context — `src/state/GameProvider.jsx` — 中，因此每个页面都会读取并修改同一个实时游戏，并且进度会自动持久化到 `localStorage`。新警报会像真实的值班班次一样，按固定的时间间隔不断进入队列。 3D 地球仪 (`src/components/SocGlobe3D.jsx`) 使用纯粹的 `three`（没有额外的场景图框架），由 `src/data/mock.js` 的地理数据驱动——与 AttackSurface AI 项目模式相同，因此很容易在风格上保持两者同步。 ## 备注 这是一个功能完备的前端。没有后端——“实时”警报生成、AI 助手回复和排行榜都是在客户端模拟的，随时准备好以后替换为真实的 endpoint。

标签：React, Syscalls, 安全教育, 安全运营, 扫描框架, 模拟训练, 网络安全, 自定义脚本, 隐私保护