KukeMC Website

一个基于现代 Web 技术栈构建的 Minecraft 服务器门户网站。融合了极致的视觉体验、丝滑的交互动画与强大的功能模块，为玩家提供一站式的服务器服务体验。

✨ 项目特色

本项目采用前沿的前端技术栈，致力于打造具有现代化视觉风格和卓越用户体验的 Minecraft 服务器官网。

🎨 现代化视觉设计

• 沉浸式体验：采用新拟态与玻璃态设计语言，配合暗黑模式，营造高端视觉质感。
• 丝滑动画：深度集成 Framer Motion，实现 60fps 的流畅过渡与交互动画。
• 响应式布局：基于 Tailwind CSS 构建，完美适配桌面端、平板与移动端设备。

🚀 核心功能模块

• 首页 (Home)：服务器概览与特色展示。
• 新闻中心 (News)：支持 Markdown 渲染的动态公告系统。
• 服务器监控 (Monitor)：实时展示服务器状态与在线人数。
• 玩家中心：
  • 个人资料 (Profile)：玩家数据展示与管理。
  • 皮肤管理 (Skin)：可视化的皮肤预览与更换。
  • 封禁列表 (BanList)：公开透明的违规公示。
  • 玩家列表 (PlayerList)：活跃玩家展示。
• 工单系统 (Tickets)：高效的客服支持与问题反馈。
• 数据统计 (Stats)：服务器各项趣味数据统计。

🛠️ 技术栈

本项目基于以下主流技术构建：

• 核心框架: React 18 + TypeScript
• 构建工具: Vite - 极速冷启动与热更新
• 样式方案: Tailwind CSS - 原子化 CSS 框架
• 动画引擎: Framer Motion - 生产级 React 动画库
• 路由管理: React Router v7
• 图标库: Lucide React
• HTTP 客户端: Axios
• Markdown 渲染: React Markdown

📦 快速开始

环境要求

• Node.js >= 18.0.0
• npm 或 yarn / pnpm

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5173 即可预览项目。

构建生产版本

npm run build

构建产物将生成在 dist 目录下。

📂 目录结构

src/
├── components/   # 公共组件 (Layout, Navbar, Footer等)
├── context/      # 全局状态管理 (Auth, Theme)
├── hooks/        # 自定义 Hooks
├── pages/        # 页面视图组件
├── types/        # TypeScript 类型定义
├── utils/        # 工具函数与 API 封装
├── App.tsx       # 应用入口与路由配置
└── main.tsx      # 渲染入口

🤝 贡献指南

欢迎各位提交 Issue 或 Pull Request 来改进这个项目。在提交代码前，请确保通过了 Lint 检查。

npm run lint

📄 许可证

AGPL-3.0 license