# ai-course **Repository Path**: des4554/ai-course ## Basic Information - **Project Name**: ai-course - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-07-12 - **Last Updated**: 2025-07-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 蜗牛AI在线课堂系统 基于 Vue 3 + TypeScript + Ant Design Vue 构建的现代化在线教育平台，集成了AI智能助手、游戏化学习、智能作业批改等功能。 ## 📸 项目展示 ### 首页展示 ![首页展示](./screenshots/homepage.png) ### 课程排行榜 ![课程排行榜](./screenshots/course-ranking.png) ### AI智能助手 ![AI智能助手](./screenshots/ai-assistant.png) ### 游戏化学习中心 ![游戏化学习](./screenshots/game-center.png) ### 用户中心 ![用户中心](./screenshots/user-center.png) ### 管理后台 ![管理后台](./screenshots/admin-dashboard.png) ## 🚀 主要功能 ### 用户端功能 #### 🏠 首页模块 - **轮播图展示** - 精选课程和活动推广 - **课程分类** - 体系课程、实战课程、就业课程分类展示 - **热门课程排行榜** - 销量榜、好评榜、学习榜，支持分页浏览 - **个性化推荐** - 基于用户行为的智能推荐 - **AI智能助手** - 固定在右下角的悬浮图标，支持智能对话 #### 🎮 游戏化学习系统 - **等级系统** - 15个等级，从新手到至尊 - **积分系统** - 完成任务获得积分，可在积分商城兑换 - **任务系统** - 每日任务、每周任务，支持奖励领取 - **成就系统** - 8种成就类型，解锁特殊奖励 - **排行榜** - 积分榜、连续学习榜，激励用户学习 - **积分商城** - 课程优惠券、VIP体验、学习资料等商品 #### 📚 课程学习 - **课程列表** - 分类筛选、搜索、排序功能 - **课程详情** - 详细介绍、目录、笔记、源码下载 - **视频学习** - 在线视频播放、进度记录 - **学习笔记** - 实时笔记同步、AI辅助总结 - **源码下载** - 课程相关代码资源 #### 👤 用户中心 - **个人信息** - 头像、昵称、学习统计 - **我的课程** - 已购课程、学习进度、证书 - **我的作业** - AI智能作业、提交记录、成绩查看 - **我的考试** - 在线考试、成绩查询、错题分析 - **我的积分** - 积分明细、获取记录、消费记录 - **我的订单** - 购买记录、订单状态、发票管理 #### 🤖 AI智能助手 - **智能对话** - 自然语言交互，支持多轮对话 - **学习指导** - 课程推荐、学习计划制定 - **问题解答** - 技术概念解释、学习资料推荐 - **进度查询** - 学习统计、成绩分析 - **快捷建议** - 常用问题一键询问 ### 管理端功能 #### 📊 数据概览 - **实时统计** - 用户数量、课程数量、收入统计 - **增长趋势** - 用户增长、收入增长图表 - **热门数据** - 热门课程、活跃用户排行 #### 📚 课程管理 - **课程CRUD** - 创建、编辑、删除课程 - **分类管理** - 课程分类设置和管理 - **状态控制** - 上架、下架、审核状态 - **内容管理** - 视频、文档、源码上传 #### 👥 用户管理 - **用户信息** - 查看用户详细信息 - **角色权限** - 管理员、教师、学生角色管理 - **状态管理** - 启用、禁用、封禁用户 - **学习统计** - 用户学习数据统计 #### 📝 作业管理 - **AI生成作业** - 基于课程内容自动生成作业 - **批量批改** - 智能批改、成绩统计 - **作业模板** - 多种题型模板 - **成绩分析** - 成绩分布、错题统计 #### 🎯 考试管理 - **考试创建** - 设置考试时间、题目、分值 - **在线考试** - 防作弊、自动提交 - **成绩管理** - 自动评分、成绩统计 - **试卷分析** - 难度分析、知识点覆盖 #### 💰 订单管理 - **订单查询** - 订单状态、支付记录 - **退款处理** - 退款申请、审核流程 - **收入统计** - 收入分析、财务报表 ## 🛠️ 技术栈 ### 前端技术 - **框架**: Vue 3.4+ (Composition API) - **语言**: TypeScript 5.0+ - **UI组件**: Ant Design Vue 4.x - **路由**: Vue Router 4.x - **状态管理**: Pinia 2.x - **构建工具**: Vite 5.x - **包管理**: npm 9.x ### 开发工具 - **代码规范**: ESLint + Prettier - **类型检查**: TypeScript - **版本控制**: Git - **开发服务器**: Vite Dev Server ## 📦 安装和运行 ### 环境要求 - Node.js >= 18.0.0 - npm >= 9.0.0 - Git >= 2.0.0 ### 快速开始 1. **克隆项目** ```bash git clone https://github.com/your-username/ai-course.git cd ai-course ``` 2. **安装依赖** ```bash npm install ``` 3. **启动开发服务器** ```bash npm run dev ``` 4. **访问应用** 打开浏览器访问 `http://localhost:5173` ### 其他命令 ```bash # 构建生产版本 npm run build # 预览生产构建 npm run preview # 代码检查 npm run lint # 类型检查 npm run type-check ``` ## 🎯 页面路由 ### 用户端页面 | 路由 | 页面 | 功能描述 | | ------------------- | -------- | ------------------------------------------ | | `/` | 首页 | 轮播图、课程分类、排行榜、AI助手 | | `/course` | 课程列表 | 分类筛选、搜索、排序 | | `/course/:id` | 课程详情 | 介绍、目录、笔记、源码 | | `/course/:id/learn` | 课程学习 | 视频播放、笔记、AI助手 | | `/user` | 用户中心 | 个人信息、我的课程、作业、考试、积分、订单 | | `/login` | 登录页面 | 用户登录、记住密码 | | `/register` | 注册页面 | 用户注册、验证码 | ### 管理端页面 | 路由 | 页面 | 功能描述 | | -------------------- | -------- | ------------------ | | `/admin` | 管理首页 | 数据概览、统计图表 | | `/admin/courses` | 课程管理 | 课程CRUD、分类管理 | | `/admin/users` | 用户管理 | 用户信息、角色权限 | | `/admin/assignments` | 作业管理 | AI生成、批量批改 | | `/admin/exams` | 考试管理 | 考试创建、成绩管理 | | `/admin/orders` | 订单管理 | 订单查询、退款处理 | ## 🎨 核心特性 ### 1. 🏆 热门课程排行榜 - **多维度排序** - 销量榜、好评榜、学习榜 - **分页浏览** - 每页5条记录，支持快速跳转 - **动态排名** - 根据排序方式实时调整排名 - **视觉突出** - 前三名特殊标识和背景色 - **趋势指示** - 显示课程热度变化趋势 ### 2. 🤖 AI智能助手 - **悬浮图标** - 固定在右下角，带脉冲动画 - **智能对话** - 支持多轮对话，保存聊天历史 - **快捷建议** - 常用问题一键询问 - **学习指导** - 课程推荐、学习计划制定 - **问题解答** - 技术概念解释、资料推荐 ### 3. 🎮 游戏化学习 - **等级系统** - 15个等级，经验值升级 - **积分系统** - 完成任务获得积分奖励 - **任务系统** - 每日任务、每周任务 - **成就系统** - 8种成就类型，解锁奖励 - **排行榜** - 积分榜、连续学习榜 - **积分商城** - 6种商品，积分兑换 ### 4. 📊 学习数据分析 - **学习统计** - 学习时长、完成课程数 - **进度追踪** - 实时学习进度记录 - **成绩分析** - 作业成绩、考试成绩统计 - **学习建议** - 基于数据的个性化建议 ## 📱 响应式设计 系统采用响应式设计，完美支持： - **桌面端** (≥1200px) - 完整功能展示 - **平板端** (768px-1199px) - 适配平板布局 - **移动端** (<768px) - 移动端优化 ## 🔧 开发指南 ### 项目结构 ``` src/ ├── components/ # 公共组件 │ ├── course/ # 课程相关组件 │ │ ├── CourseGrid.vue # 课程网格组件 │ │ └── CourseCard.vue # 课程卡片组件 │ └── common/ # 通用组件 ├── views/ # 页面组件 │ ├── HomeView.vue # 首页 │ ├── course/ # 课程相关页面 │ │ ├── CourseList.vue # 课程列表 │ │ ├── CourseDetail.vue # 课程详情 │ │ └── CourseLearn.vue # 课程学习 │ ├── user/ # 用户中心页面 │ │ ├── UserCenter.vue # 用户中心 │ │ ├── MyCourses.vue # 我的课程 │ │ ├── MyPoints.vue # 我的积分 │ │ ├── GameCenter.vue # 游戏化学习 │ │ └── MyOrders.vue # 我的订单 │ ├── admin/ # 管理端页面 │ │ ├── AdminLayout.vue # 管理端布局 │ │ ├── AdminDashboard.vue # 数据概览 │ │ ├── CourseManagement.vue # 课程管理 │ │ ├── UserManagement.vue # 用户管理 │ │ └── AssignmentManagement.vue # 作业管理 │ └── auth/ # 认证页面 │ ├── LoginView.vue # 登录页面 │ └── RegisterView.vue # 注册页面 ├── router/ # 路由配置 │ └── index.ts # 路由定义 ├── stores/ # 状态管理 │ ├── counter.ts # 计数器状态 │ └── gameStore.ts # 游戏化学习状态 ├── utils/ # 工具函数 │ └── gameUtils.ts # 游戏化学习工具 ├── assets/ # 静态资源 │ ├── base.css # 基础样式 │ ├── main.css # 主样式 │ └── logo.svg # Logo ├── App.vue # 根组件 └── main.ts # 入口文件 ``` ### 组件开发规范 - **使用 Composition API** - 优先使用 ` ``` ## 🚀 部署说明 ### 开发环境 ```bash # 启动开发服务器 npm run dev # 访问地址 http://localhost:5173 ``` ### 生产环境 ```bash # 构建生产版本 npm run build # 预览构建结果 npm run preview # 访问地址 http://localhost:4173 ``` ### Docker 部署 ```dockerfile # Dockerfile FROM node:18-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci --only=production COPY . . RUN npm run build FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` ```bash # 构建镜像 docker build -t ai-course . # 运行容器 docker run -p 80:80 ai-course ``` ### Nginx 配置 ```nginx # nginx.conf server { listen 80; server_name localhost; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend-server; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` ## 📄 许可证 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 ## 🤝 贡献指南 我们欢迎所有形式的贡献！ ### 贡献流程 1. **Fork 项目** - 点击右上角的 Fork 按钮 2. **创建分支** - `git checkout -b feature/AmazingFeature` 3. **提交更改** - `git commit -m 'Add some AmazingFeature'` 4. **推送分支** - `git push origin feature/AmazingFeature` 5. **创建 PR** - 打开 Pull Request ### 贡献类型 - 🐛 **Bug 修复** - 修复现有功能的问题 - ✨ **新功能** - 添加新的功能特性 - 📝 **文档更新** - 改进或添加文档 - 🎨 **UI/UX 改进** - 改进用户界面和体验 - ⚡ **性能优化** - 提升应用性能 - 🔧 **代码重构** - 改进代码结构和质量 ### 开发环境设置 ```bash # 1. Fork 并克隆项目 git clone https://github.com/your-username/ai-course.git cd ai-course # 2. 安装依赖 npm install # 3. 启动开发服务器 npm run dev # 4. 创建功能分支 git checkout -b feature/your-feature # 5. 提交更改 git add . git commit -m "feat: add your feature" # 6. 推送分支 git push origin feature/your-feature ``` ## 📞 联系方式 - **项目地址**: [GitHub Repository](https://gitee.com/des4554/ai-course) - **问题反馈**: [Issues](https://gitee.com/des4554/ai-course/issues) - **邮箱**: 2980871635@qq.com ## 🙏 致谢 感谢所有为这个项目做出贡献的开发者！ ### 主要依赖 - [Vue 3](https://vuejs.org/) - 渐进式 JavaScript 框架 - [Ant Design Vue](https://antdv.com/) - 企业级 UI 设计语言 - [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集 - [Vite](https://vitejs.dev/) - 下一代前端构建工具 - [Pinia](https://pinia.vuejs.org/) - Vue 的状态管理库 --- **蜗牛AI在线课堂** - 让学习更智能、更有趣！ 🚀 > 如果这个项目对您有帮助，请给我们一个 ⭐ Star！