somegg90-blip/vyala-archon-brightdata-hackathon-web
GitHub: somegg90-blip/vyala-archon-brightdata-hackathon-web
一款企业级后量子密码学威胁情报仪表板前端，用于扫描并可视化展示供应链中的 PQC 漏洞。
Stars: 1 | Forks: 0
# Vyala Archon — PQC 情报仪表板
一款超高端的暗色模式企业安全仪表板，用于映射企业供应链中的后量子密码学漏洞。
## 技术栈
- **Next.js 14** (App Router)
- **Tailwind CSS**
- **TypeScript**
- **Lucide React** (图标)
- **Framer Motion** (动画)
## 快速开始
```
# 1. 安装 dependencies
npm install
# 2. 配置 backend URL（可选 — 默认为 localhost:8000）
cp .env.local.example .env.local
# 如有需要，请编辑 NEXT_PUBLIC_API_URL
# 3. 启动 dev server
npm run dev
```
在浏览器中打开 [http://localhost:3000](http://localhost:3000)。
## 后端契约
该仪表板连接到你的 Python 后端的 `POST /api/scan/domain` 接口。
**请求：**
```
{ "target": "core/tests", "scan_type": "local" }
```
**响应：** `CBOMReport` — 完整的 TypeScript 接口请参见 `lib/api.ts`。
## 文件结构
```
vyala_brightdata-web/
├── app/
│ ├── layout.tsx # Root layout, fonts, dark bg
│ ├── page.tsx # Main dashboard (Bento Grid)
│ └── globals.css # Tailwind + custom animations
│
├── components/
│ ├── layout/Header.tsx # Vyala branding + status bar
│ ├── dashboard/
│ │ ├── InvokeTerminal.tsx # Raycast-style command input
│ │ ├── StatCard.tsx # Premium metric cards
│ │ └── FindingsGrid.tsx # Grid of ThreatCards
│ ├── scan/ThreatCard.tsx # Luxury vulnerability card
│ └── ui/
│ ├── LoadingSpinner.tsx # Premium loading states
│ └── Badge.tsx # Severity/vuln class badges
│
├── lib/
│ ├── api.ts # TypeScript interfaces + fetch
│ └── utils.ts # Tailwind helpers + formatters
│
└── public/
└── vyala_logo.svg # Brand asset
```
标签：React, Syscalls, Tailwind CSS, TypeScript, Web前端, 后量子密码学, 威胁情报, 安全插件, 开发者工具, 自动化攻击