MHHaque90/Sentinel-AI

# SentinelAI — 企业级 AI 恶意软件扫描器 ## 项目概述 SentinelAI 是一款由 Machine Learning 驱动的企业级恶意软件分析应用程序。前端提供了一个综合性的网络安全仪表盘，具备实时威胁监控、文件扫描、隔离管理和详细分析功能——所有这些都封装在高级的“网络智能”设计系统中。 **前端版本：** v1.0.0 **状态：** 生产就绪 **架构：** 带有 TypeScript 的 Next.js 15 App Router **后端状态：** 准备开发（所有 UI 均已适配 API 并提供模拟数据） ## 功能 ### 核心页面（共 12 个） | 页面 | 路由 | 用途 | |------|-------|---------| | Dashboard | `/` | KPI 概览、图表、活动流、威胁监控 | | 扫描文件 | `/scan` | 拖放上传、扫描配置、进度追踪 | | 扫描结果 | `/results` | AI 威胁评分、SHAP 分析、MITRE 映射、IOC 表格 | | 威胁情报 | `/intelligence` | 全球威胁态势、恶意软件家族、CVE 追踪 | | 扫描历史 | `/history` | 搜索、过滤和导出历史扫描数据 | | 隔离区 | `/quarantine` | 隔离文件管理、策略、存储分析 | | 报告 | `/reports` | 报告生成、模板、调度、分析 | | 设置 | `/settings` | 外观、偏好设置、通知、键盘快捷键 | | AI 助手 | `/assistant` | 未来由 LLM 驱动分析的占位符 | | 登录 | `/login` | 使用邮箱/密码进行身份验证 | | 注册 | `/register` | 带验证的账户创建 | | 修改密码 | `/change-password` | 带强度要求的密码更新 | ### 设计系统 - **主题：** 网络智能（深色企业界面） - **Glassmorphism：** `backdrop-blur-xl` 与细微边框 - **霓虹强调色：** 青色 (#00F5FF)、紫色 (#7B61FF)、绿色 (#00FF88) - **动画：** Framer Motion 弹簧过渡、淡入效果 - **字体：** Space Grotesk（标题）、Inter（正文）、IBM Plex Mono（数据） - **响应式：** 桌面、平板和移动端布局 ### 技术特性 - 带有 Server Components 的 React 19 - TypeScript 严格模式 - 带有自定义设计 token 的 Tailwind CSS - shadcn/ui 组件系统 - React Hook Form + Zod 验证 - 用于数据可视化的 Recharts - Framer Motion 动画 - localStorage/sessionStorage 认证持久化 - 前端路由保护 (AuthGuard) - 带有登出功能的个人资料下拉菜单 ## 技术栈 | 技术 | 版本 | 用途 | |------------|---------|---------| | Next.js | 15.5.20 | React 框架 (App Router) | | React | 19.0.0 | UI 库 | | TypeScript | 5.7.3 | 类型安全 | | Tailwind CSS | 3.4.17 | 实用优先的样式 | | Framer Motion | 12.0.5 | 动画 | | Recharts | 2.15.0 | 图表和数据可视化 | | Lucide React | 0.474.0 | 图标 | | React Hook Form | 7.54.2 | 表单管理 | | Zod | 3.24.1 | Schema 验证 | | Radix UI | 各类版本 | 无障碍基础组件 | | next-themes | 0.4.4 | 深色/浅色主题 | ## 文件夹结构 ``` sentinelai/ ├── app/ # Next.js App Router pages │ ├── (auth)/ # Authentication routes (no AppShell) │ │ ├── layout.tsx # Auth layout (standalone) │ │ ├── login/page.tsx # Login page │ │ ├── register/page.tsx # Registration page │ │ └── change-password/ # Password change page │ ├── (main)/ # Protected routes (with AppShell) │ │ ├── layout.tsx # Main layout (AuthGuard + AppShell) │ │ ├── page.tsx # Dashboard │ │ ├── scan/page.tsx # File scanning │ │ ├── results/page.tsx # Scan results │ │ ├── intelligence/ # Threat intelligence │ │ ├── history/page.tsx # Scan history │ │ ├── quarantine/page.tsx # Quarantine management │ │ ├── reports/page.tsx # Reports center │ │ ├── settings/page.tsx # Application settings │ │ └── assistant/page.tsx # AI Assistant placeholder │ ├── layout.tsx # Root layout (fonts, ThemeProvider, AuthProvider) │ ├── globals.css # Design tokens, glassmorphism, animations │ └── loading.tsx # Global loading skeleton │ ├── components/ │ ├── auth/ # Authentication components │ │ ├── auth-layout.tsx # Full-screen auth backdrop │ │ ├── auth-card.tsx # Glassmorphism card container │ │ ├── auth-header.tsx # Logo, brand, title │ │ ├── auth-footer.tsx # Version badge │ │ ├── auth-guard.tsx # Route protection │ │ ├── password-input.tsx # Show/hide password toggle │ │ ├── password-strength.tsx # Strength meter + requirements │ │ └── social-divider.tsx # "or continue with" divider │ │ │ ├── layout/ # Application shell │ │ ├── app-shell.tsx # Sidebar + Navbar + Main content │ │ ├── sidebar.tsx # Fixed desktop sidebar │ │ ├── sidebar-nav.tsx # Navigation list with active states │ │ ├── navbar.tsx # Sticky top navbar │ │ ├── mobile-nav.tsx # Mobile sheet navigation │ │ ├── brand.tsx # SentinelAI wordmark + glyph │ │ ├── profile-menu.tsx # User dropdown (Profile, Settings, Logout) │ │ ├── theme-provider.tsx # next-themes wrapper │ │ ├── theme-toggle.tsx # Dark/light toggle │ │ └── providers.tsx # Client-side providers wrapper │ │ │ ├── ui/ # Reusable UI primitives │ │ ├── avatar.tsx # Radix Avatar │ │ ├── badge.tsx # Status badges │ │ ├── button.tsx # Button variants │ │ ├── card.tsx # Card container │ │ ├── form.tsx # React Hook Form integration │ │ ├── input.tsx # Text input │ │ ├── label.tsx # Form labels │ │ ├── scroll-area.tsx # Custom scrollbar │ │ ├── separator.tsx # Horizontal/vertical divider │ │ ├── skeleton.tsx # Loading skeleton │ │ ├── toggle.tsx # Switch toggle │ │ └── tooltip.tsx # Radix Tooltip │ │ │ ├── dashboard/ # Dashboard page components │ ├── scan/ # Scan page components │ ├── results/ # Results page components │ ├── intelligence/ # Threat intelligence components │ ├── history/ # History page components │ ├── quarantine/ # Quarantine page components │ ├── reports/ # Reports page components │ └── settings/ # Settings page components │ ├── hooks/ # Custom React hooks │ ├── use-count-up.ts # Animated number counter │ ├── use-media-query.ts # CSS media query subscription │ └── use-mounted.ts # Client hydration guard │ ├── lib/ # Utilities and configuration │ ├── utils.ts # cn(), formatNumber, formatBytes, etc. │ ├── constants.ts # NAV_ITEMS, APP_NAME, AppRole types │ └── auth-context.tsx # Auth context with persistence │ ├── services/ # API service layer │ ├── api.ts # API-ready service layer │ └── mock-data.ts # Comprehensive mock data │ ├── types/ # TypeScript type definitions │ └── index.ts # All domain models │ ├── tailwind.config.ts # Theme configuration ├── tsconfig.json # TypeScript configuration ├── next.config.mjs # Next.js configuration └── package.json # Dependencies and scripts ``` ## 项目架构 ### 布局层级 ``` RootLayout (fonts, ThemeProvider, AuthProvider) ├── (auth) Layout → AuthLayout (standalone, no shell) │ ├── /login │ ├── /register │ └── /change-password │ └── (main) Layout → AuthGuard → AppShell (sidebar + navbar) ├── / (Dashboard) ├── /scan ├── /results ├── /intelligence ├── /history ├── /quarantine ├── /reports ├── /settings └── /assistant ``` ### 组件架构 - **布局组件：** 拥有应用程序外壳（sidebar、navbar、mobile nav） - **功能组件：** 按功能组织的特定页面组件 - **UI 组件：** 可复用的基础组件（button、card、input 等） - **认证组件：** 与认证相关的 UI（登录表单、guards、菜单） ### 数据流 ``` services/mock-data.ts → services/api.ts → components (via props) ↓ hooks (useCountUp, useMediaQuery) ↓ lib/utils.ts (formatting) ``` ## 设计系统 ### 调色板 | Token | 十六进制 | 用法 | |-------|-----|-------| | Background | #050816 | 页面背景 | | Primary | #00F5FF | 霓虹青色（按钮、链接、强调色） | | Secondary | #7B61FF | 紫色强调色 | | Success | #00FF88 | 正面状态、无威胁判定 | | Warning | #FFA500 | 警告状态 | | Danger | #FF3D71 | 破坏性操作、威胁 | | Card | #0A0F1E | Card 表面 | ### 字体排版 | 字体 | 变量 | 用法 | |------|----------|-------| | Space Grotesk | `--font-space-grotesk` | 标题、卡片标题 | | Inter | `--font-inter` | 正文、UI 元素 | | IBM Plex Mono | `--font-ibm-plex-mono` | 数据值、时间戳、哈希 | ### 动画 | Class | 描述 | |-------|-------------| | `animate-fade-in` | 从 8px 淡入 (0.4s ease-out) | | `animate-fade-in-sm` | 简单淡入 (0.3s ease-out) | | `animate-pulse-glow` | 透明度脉冲 (2.4s infinite) | | `animate-shimmer` | 水平闪烁 (1.6s infinite) | ### Glassmorphism | Class | 效果 | |-------|--------| | `glass` | `border border-white/5 bg-card/50 backdrop-blur-xl` | | `glass-strong` | `border border-white/10 bg-card/70 backdrop-blur-2xl` | ## 路由 ### 路由组 - **`(auth)`** — 身份验证页面（绕过 AppShell） - **`(main)`** — 受保护的应用程序页面（带有 AppShell） ### 导航项 | 标签 | 路由 | 图标 | |-------|-------|------| | Dashboard | `/` | LayoutDashboard | | 扫描文件 | `/scan` | FileScan | | 威胁情报 | `/intelligence` | ShieldAlert | | 报告 | `/reports` | FileBarChart | | 历史 | `/history` | History | | 隔离区 | `/quarantine` | Biohazard | | AI 助手 | `/assistant` | Bot | | 设置 | `/settings` | Settings | ## 模拟数据策略 所有数据均为模拟数据且已适配 API： - **`services/mock-data.ts`** — 978 行具有类型的 fixture - **`services/api.ts`** — 带有 350ms 模拟延迟的服务层 - **`types/index.ts`** — 563 行领域模型 投入生产使用： 1. 设置 `NEXT_PUBLIC_API_BASE_URL` 环境变量 2. 将 `api.ts` 中的模拟解析替换为真实的 `fetch()` 调用 3. 无需更改 UI 组件 ## 安装 ``` # Clone the repository git clone cd sentinelai # Install dependencies npm install # Start development server npm run dev # Open in browser http://localhost:3000 ``` ## 开发命令 | 命令 | 描述 | |---------|-------------| | `npm run dev` | 启动开发服务器 | | `npm run build` | 生产构建 | | `npm run start` | 启动生产服务器 | | `npm run lint` | 运行 ESLint | | `npm run typecheck` | 运行 TypeScript 类型检查 | ## 性能 - **静态生成：** 所有页面预渲染为静态内容 - **懒加载：** 通过 `next/dynamic` 加载图表，设置 `ssr: false` - **Bundle 优化：** Tree-shaking，按路由进行代码分割 - **字体优化：** Google Fonts 使用 `display: "swap"` - **动画：** 硬件加速的 Framer Motion 弹簧动画 ## 无障碍设计 - **键盘导航：** 所有交互元素均可聚焦 - **可见聚焦：** 聚焦时的环状指示器 (`focus-visible:ring-2`) - **ARIA 标签：** 按钮、输入框和菜单上的描述性标签 - **语义化 HTML：** 正确的标题层级、landmark - **颜色对比度：** 符合 WCAG AA 标准的颜色比例 - **减少动态效果：** 动画中支持 `prefers-reduced-motion` ## 未来的后端集成 ### 后端技术栈（计划中） - **FastAPI** — Python 异步 API 框架 - **PostgreSQL** — 关系型数据库 - **SQLAlchemy** — ORM ### ML 技术栈（计划中） - **Scikit-learn** — 经典 ML 模型 - **XGBoost** — 梯度提升 - **SHAP** — 模型可解释性 ### 集成步骤 1. 将 `NEXT_PUBLIC_API_BASE_URL` 设置为后端 URL 2. 在 `services/api.ts` 中实现 JWT 认证 3. 将模拟数据调用替换为真实的 API endpoint 4. 添加 WebSocket 用于实时扫描进度 5. 连接 ML 预测 endpoint ## 许可证 SentinelAI — 企业网络防御平台 版权所有 © 2026 SentinelAI。保留所有权利。

标签：DAST, 仪表盘, 威胁情报, 开发者工具, 恶意软件分析, 网络安全, 自动化攻击, 隐私保护