waleedsworld/cyberai

# PointBlank PointBlank 是一个极具杀伤力的网络安全产品网站。它将充满电影感和动画效果的前端营销页面与真正实用的**网站合规工作流**结合在一起：选择地区 → 提取适用法律 → 扫描您的 URL → 获取有证据支撑的报告。它还内置了 **API playground**，让您无需离开浏览器即可调用后端。 没有页面构建器的锁定，也没有晦涩难懂的配置 —— 只有 Vite、React、TypeScript 和 Tailwind，纯手工打造，随时可以进行二次开发。  ## 为什么它很酷 - **两种首屏风格，一键切换。** 充满活力的“SideWave”动画首屏，或者更宁静的浅色首屏 —— 由您的访客选择，并记录在 `localStorage` 中。 - **真正的合规工具，而非模型Demo。** `/compliance-check` 流程将引导您完成地区 → 法律 → URL 确认 → 扫描 → 结果展示，通过与实时 API 通信并轮询任务，直到报告生成。 - **内置 API playground。** `/api-test` 允许您直接向后端发送请求并检查响应 —— 非常适合调试和演示。 - **真正的响应式设计。** 标题、网格和合规向导在从 390px 的手机到超宽显示器上都能完美自适应。 - **无障碍访问、组件化的 UI。** 基于 Radix primitives + shadcn/ui 构建，因此键盘导航和焦点状态开箱即用。 ## 技术栈（毫不冷门，全皆现代） - **Vite 5** —— 即时的 dev server，敏捷的生产构建 - **React 18 + TypeScript** —— 类型化的组件，可预测的状态 - **Tailwind CSS** + **shadcn/ui** (Radix UI) —— 设计系统 - **React Router** —— 跨营销和工具页面的客户端路由 - **TanStack Query** —— 数据获取和缓存 - **lucide-react** —— 图标库 ## 快速开始（从零到运行约 2 分钟） **前置条件：** [Node.js](https://nodejs.org/) 18 或更高版本（会附带 `npm`）。通过以下命令进行检查： ``` node -v # should print v18.x or higher ``` **1. 获取代码** ``` git clone https://github.com/waleedsworld/cyberai.git cd cyberai ``` **2. 安装依赖** ``` npm install ``` **3. 启动 dev server** ``` npm run dev ``` Vite 会为您提供一个本地 URL（通常是 `http://localhost:8080`）。在浏览器中打开它，您就进入了项目。编辑内容会即时热重载 —— 无需繁琐的手动刷新。 ## 与后端通信 合规工作流和 API playground 会调用 REST 后端。前端默认配置为： ``` https://cyberaiapi.digitalsoftwaremarket.online ``` 想要指向您自己的后端？在构建时设置一个环境变量 —— 在项目根目录下创建一个 `.env` 文件： ``` # .env VITE_API_BASE_URL=https://your-backend.example.com ``` 没有 key，没有 secret，毫不费力 —— 只需一个公开的 base URL。 ## 实用脚本 | 命令 | 作用 | | ------------------- | ------------------------------------------------- | | `npm run dev` | 启动带热重载的 Vite dev server | | `npm run build` | 在 `dist/` 中生成优化的生产构建 | | `npm run build:dev` | 以开发模式构建（未压缩，更易于阅读） | | `npm run preview` | 在本地提供生产构建服务 | | `npm run lint` | 在整个项目中运行 ESLint | ## 项目概览 **合规工作流 —— 地区、法律、扫描、报告：**  **在手机上看起来同样清晰：**

**内置 API playground：**  ## 项目结构 ``` src/ ├── components/ # Header, Footer, hero variants, marketing sections, UI kit │ └── ui/ # shadcn/ui primitives (button, card, dialog, …) ├── pages/ │ ├── Index.tsx # the landing page │ ├── ComplianceCheck.tsx # the region → laws → scan → report wizard │ ├── ApiTest.tsx # the API playground │ ├── ServicePage.tsx # per-service detail pages │ └── NotFound.tsx # a friendly 404 ├── data/ # navigation + services content ├── hooks/ # auth, mobile detection, scroll animation, toasts └── lib/ # api-base + shared utilities ``` ## 在线演示 在线演示 —— 即将部署。 ## 许可证 基于 MIT 许可证发布。将其指向您的后端、重新设计样式、上线发布 —— 只需保留声明即可。 保持敏锐。🎯

标签：React, Syscalls, TypeScript, Web前端, 合规检测, 安全插件, 网络安全, 自动化攻击, 隐私保护