CyberLions/CCSO-Site

# CCSO 网站 一个现代的全栈网站，专为**宾州州立大学竞技网络安全组织 (CCSO)** 打造，提供活动管理、成员资源以及 CTF 比赛信息。 ## 🚀 概述 CCSO 网站是一个综合平台，用于展示该组织的活动、事件和资源。它采用现代 Web 技术构建，为对网络安全竞赛和教育感兴趣的成员、赞助商和访客提供了引人入胜的体验。 ## ✨ 功能 - **活动管理**：带有倒计时的动态活动页面（例如 SillyCTF） - **活动展示**：展示组织活动的交互式翻转卡片 - **日历集成**：即将举行的活动日历小部件 - **响应式设计**：使用 Tailwind CSS 的移动优先方案 - **内容管理**：与 Strapi 集成的 Headless CMS - **Discord 集成**：指向社区 Discord 服务器的直接链接 - **现代 UI/UX**：动画背景、平滑的过渡和引人入胜的视觉效果 ## 🛠️ 技术栈 ### 前端 - **框架**：[Nuxt 3](https://nuxt.com/) (Vue.js) - **样式**：[Tailwind CSS](https://tailwindcss.com/) - **图标**：[Heroicons](https://heroicons.com/) - **图片优化**：[@nuxt/image](https://image.nuxtjs.org/) - **图表**：[Chart.js](https://www.chartjs.org/) - **地图**：[Leaflet](https://leafletjs.com/) - **TypeScript**：完全的类型安全支持 ### 后端 - **CMS**：[Strapi 5.20.0](https://strapi.io/) - **数据库**：PostgreSQL - **插件**： - 用于富文本编辑的 CKEditor - SEO 插件 - 文档插件 - 用户与权限 ## 📁 项目结构 ``` . ├── frontend/ # Nuxt 3 frontend application │ ├── assets/ # Static assets (CSS, images) │ ├── components/ # Vue components │ ├── composables/ # Vue composables │ ├── pages/ # Application pages/routes │ ├── utils/ # Utility functions │ └── public/ # Public static files │ └── backend/ # Strapi CMS backend ├── config/ # Strapi configuration ├── database/ # Database migrations ├── src/ # Strapi source code └── public/ # Public files ``` ## 🚦 入门指南 ### 前置条件 - **Node.js**：>=18.0.0 <=22.x.x - **npm**：>=6.0.0 - **PostgreSQL**：用于后端数据库 ### 安装 1. **克隆仓库** git clone cd 2. **安装前端依赖** cd frontend npm install 3. **安装后端依赖** cd ../backend npm install 4. **配置环境变量** 在 `frontend` 目录中创建一个 `.env` 文件： NUXT_PUBLIC_API_BASE=http://localhost:1337 在 `backend` 目录中创建一个包含您的 Strapi 配置的 `.env` 文件： DATABASE_CLIENT=postgres DATABASE_HOST=localhost DATABASE_PORT=5432 DATABASE_NAME=ccso_db DATABASE_USERNAME=your_username DATABASE_PASSWORD=your_password ### 开发 1. **启动后端** cd backend npm run develop Strapi 管理面板将在 `http://localhost:1337/admin` 提供 2. **启动前端** cd frontend npm run dev 该网站将在 `http://localhost:8080` 提供 ### 构建生产版本 **前端：** ``` cd frontend npm run build npm run preview ``` **后端：** ``` cd backend npm run build npm run start ``` ## 📄 可用脚本 ### 前端 - `npm run dev` - 启动开发服务器 - `npm run build` - 构建生产版本 - `npm run generate` - 生成静态站点 - `npm run preview` - 预览生产构建 - `npm run lint` - 运行 ESLint - `npm run format` - 使用 Prettier 格式化代码 ### 后端 - `npm run develop` - 以开发模式启动 Strapi - `npm run start` - 以生产模式启动 Strapi - `npm run build` - 构建 Strapi 管理面板 - `npm run strapi` - 运行 Strapi CLI 命令 ## 🎯 核心页面 - **主页** (`/`) - 组织概述与活动 - **关于** (`/about`) - 关于 CCSO 的信息 - **活动** (`/events/*`) - 包括 SillyCTF 在内的活动页面 - **赞助我们** (`/sponsor-us`) - 赞助信息 ## 🎨 设计特性 - **动画背景**：熔岩灯风格的渐变动画 - **响应式布局**：带断点的移动优先设计 - **平滑过渡**：页面切换和组件动画 - **现代 UI 组件**：翻转卡片、日历小部件、旋转图库 ## 📝 许可证 本项目为私有项目，版权归宾州州立大学竞技网络安全组织所有。 ## 🔗 链接 - **Discord**：[加入我们的 Discord 服务器](https://discord.gg/NhN5RpBXkm) - **组织**：宾州州立大学竞技网络安全组织 ## 👥 维护者 宾州州立大学竞技网络安全组织 (CCSO) **注意**：本网站由 CCSO 开发团队维护。如有任何问题或疑问，请通过 Discord 或其他官方渠道联系该组织。

标签：Nuxt 3, Strapi, Syscall, Web开发, 无头CMS, 测试用例