Hack2Dawn Front-end

## 📋 目录 - [🚀 快速开始](#-quick-start) - [🛠 技术栈](#-tech-stack) - [📂 项目结构](#-project-structure) - [📐 项目规范](#-convenciones-del-proyecto) ## 🚀 快速开始 按照以下步骤，在 5 分钟内运行项目。 ### 前置条件 - Node.js 20+（推荐：使用 `nvm`） - npm 10+ ### 安装说明 1. **克隆仓库：** git clone https://github.com/PawnGuard/hack2dawn-front-end.git cd hack2dawn-front-end 2. **设置环境变量：** cp .env.example .env # 打开 .env 文件并填写所需的密钥 3. **安装依赖项：** npm install 4. **启动开发服务器：** npm run dev # 用于本地运行 npm run dev --host # 如果您想在手机或电脑上查看，请使用此命令在您的网络中访问 访问 [http://localhost:3000](http://localhost:3000) 查看应用程序。 ## 🛠 技术栈 本项目使用现代的、基于组件的架构。 | 类别 | 技术 | 用途 | | :--- | :--- | :--- | | **核心** | Next.js 14 (App Router) | Fullstack React 框架 | | **样式** | Tailwind CSS | 实用优先的设计系统 | | **语言** | TypeScript | 严格的静态类型检查 | ## 📂 项目结构 ### 总体结构（未更新） ``` ├── app → Todas las páginas del proyecto (Next.js App Router) │ ├── (app) → Páginas privadas (requieren autenticación) │ ├── (public) → Páginas públicas (landing page, login, registro, etc.) │ ├── globals.css → Estilos globales de la aplicación │ ├── layout.tsx → Layout raíz de la aplicación │ └── not-found.tsx → Página 404 personalizada │ ├── components → Todos los componentes reutilizables de React │ ├── icons → Iconos en formato de componente React (convertir SVGs aquí y exportarlos en index.ts) │ ├── shared → Componentes usados en más de una página (Footer, Banner, Navbar, etc.) │ └── ui → Componentes genéricos de interfaz (botones, pills, inputs, modals, etc.) │ ├── data → Archivos de datos estáticos o configuración de contenido. │ └── footer.ts → Si necesitas editar el contenido del footer, hazlo aquí, NO en el componente. │ ├── lib → Utilidades, helpers y configuraciones del lado del cliente/servidor │ ├── auth.ts → Configuración y helpers de autenticación │ ├── ctf-state.ts → Estado global relacionado al CTF │ └── utils.ts → Funciones de utilidad general │ ├── public → Archivos estáticos públicos (imágenes, fuentes, etc.) │ ├── fonts → Fuentes tipográficas del proyecto │ └── lol → (descripción pendiente) │ └── types → Definiciones de tipos TypeScript compartidos en todo el proyecto ├── team.ts → Tipos relacionados a equipos └── user.ts → Tipos relacionados a usuarios ``` ### 页面结构 (app/) ``` app/ ├── (app)/ → Páginas privadas (requieren sesión activa) │ ├── api/ → API Routes del proyecto │ ├── challenges/ │ │ ├── page.tsx → Página principal de Challenges │ │ └── [slug]/ │ │ └── page.tsx → Página de detalle del Lab / Challenge (plantilla dinámica) │ ├── dashboard/ │ │ ├── layout.tsx → Layout compartido del dashboard │ │ ├── profile/ │ │ │ └── page.tsx → Página de perfil del usuario │ │ └── team/ │ │ ├── page.tsx → Página de dashboard del equipo │ │ └── select/ │ │ └── page.tsx → Página para unirse o seleccionar equipo (TeamUp) │ ├── home/ │ │ └── page.tsx → Página principal post-login (Home) │ └── layout.tsx → Layout de las páginas privadas │ └── (public)/ → Páginas públicas (sin autenticación requerida) ├── page.tsx → Landing page principal ├── login/ │ └── page.tsx → Página de inicio de sesión ├── register/ │ └── page.tsx → Página de registro de usuario ├── credits/ │ └── page.tsx → Página de créditos ├── faq/ │ └── page.tsx → Página de preguntas frecuentes ├── rules/ │ └── page.tsx → Página de reglas del CTF ├── scoreboard/ │ └── page.tsx → Página del scoreboard público └── layout.tsx → Layout de las páginas públicas ``` ## 📐 项目规范 ### 组件组织 最重要的规则是根据组件的范围决定其存放位置： 仅在单个页面中使用的组件 → 在该页面的文件夹内的 _components/ 子文件夹中创建 在 2 个或更多页面中使用的组件 → 将其移动到 components/shared/ 没有业务逻辑的通用 UI 组件（按钮、徽章、输入框） → 放在 components/ui/ 页面结构示例： ``` app/(app)/challenges/ ├── page.tsx └── _components/ ├── ChallengeCard.tsx → solo se usa en esta página └── ChallengeFilter.tsx → solo se usa en esta página ``` ### 数据管理 如果组件需要文本、链接、列表或其他可配置内容，请不要将其硬编码在组件内部。请在 data/ 目录下的文件中添加内容，并从那里导入。这样可以在不触及组件逻辑的情况下轻松进行更改。了解更多关于 ### 图标 当您向项目添加 SVG 图标时： 在 components/icons/ 中将其转换为 React 组件 从 components/icons/index.ts 中导出 切勿在组件中直接将 SVG 作为文件导入 — 始终使用生成的组件 ### 通用规则 不要将业务逻辑放入 components/ui/ 的组件中 — 它们仅用于展示展示 不要从 app/ 向 components/ 导入 — 依赖流向必须是单向的 如果需要在页面间共享状态，请使用 lib/ 集中管理该逻辑 在创建新组件之前，请检查 components/ui/ 或 components/shared/ 中是否已存在类似组件 ready v1.0.0

标签：Next.js, Syscall, Tailwind CSS, TypeScript, Web开发, 前端, 安全插件, 自动化攻击