游戏化课堂 BinLe1988/gamify-edu

构建状态许可证 Node 版本 React

游戏化教育平台

一个使用 React、TypeScript 和 Vite 构建的现代化游戏化教育平台。该项目将传统学习转变为引人入胜的、类似游戏的体验。

DeepSeek Harness 客户端插件

本仓库还发布了浏览器端的 dsh 插件 @binle1988/dsh-gamify-edu。将其安装到 dsh web 配置中，并将该包添加到配置的 bundle 列表中；该插件会在空会话主界面中提供一个 Gamify Edu 启动器。该启动器无需 Host API 或 DeepSeek API 密钥即可打开教育界面。

dsh plugin --profile web add @binle1988/dsh-gamify-edu

独立预览仍可通过 npm run dev 使用。插件产物通过 npm run bundle 生成，而 npm run typecheck 用于验证 Client 入口边界。

截图

首页1 首页2 首页3

🎮 功能特性

- 游戏化学习体验：带有游戏机制的互动课程
- 现代化 UI/UX：使用 Radix UI 组件和 Tailwind CSS 构建
- 响应式设计：在所有设备上无缝运行
- 深色/浅色主题：在主题之间切换，以获得更好的用户体验
- 进度跟踪：可视化进度指示器和成就
- 互动组件：引人入胜的 UI 元素和动画

🚀 技术栈

- 前端：React 18、TypeScript、Vite
- 样式：Tailwind CSS、Radix UI
- 图标：Lucide React
- 图表：Recharts
- 动画：CSS 动画和过渡

📦 安装

1. 克隆仓库：
git clone https://github.com/BinLe1988/gamify-edu.git
cd gamify-edu

2. 安装依赖：
npm install

3. 启动开发服务器：
npm run dev

4. 打开浏览器并访问 http://localhost:3000

🛠️ 可用脚本

- npm run dev - 启动开发服务器
- npm run build - 构建生产版本
- npm run preview - 在本地预览生产构建

📁 项目结构

gamify-edu/
├── src/
│ ├── components/ # 可复用的 UI 组件 │ │ ├── ui/ # 基础 UI 组件（按钮、卡片等） │ │ ├── Header.tsx │ │ ├── Hero.tsx │ │ ├── FeaturedCourses.tsx │ │ ├── GameFeatures.tsx │ │ ├── Stats.tsx │ │ └── Footer.tsx │ ├── styles/ # 全局样式 │ ├── App.tsx # 主应用组件 │ ├── main.tsx # 应用入口点 │ └── index.css # 全局 CSS ├── public/ # 静态资源 ├── package.json └── README.md

🎨 设计本项目基于 Figma 设计：多游戏化教学网站设计

🤝 贡献指南

1. Fork 本仓库
2. 创建你的功能分支（git checkout -b feature/amazing-feature）
3. 提交你的更改（git commit -m 'Add some amazing feature'）
4. 推送到该分支（git push origin feature/amazing-feature）
5. 发起一个 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 详情请参阅 LICENSE 文件。

🙏 致谢

- 设计灵感来自 Figma 社区
- 使用现代 React 生态系统工具构建
- UI 组件由 Radix UI 提供支持