【动手做出原型——新项目搭建】

项目介绍：智学伴侣 (SmartStudy)

学习参考：https://easy-vibe.datawhale.cc/zh-cn/stage-1/1.2-building-prototype/

智学伴侣 是一款专注于沉浸式学习体验的智能学习平台，旨在通过视频学习、笔记记录和数据可视化等功能，帮助学生提升学习效率和专注度。

核心功能模块

1. 沉浸式双向学习舱 (/learning-cabin)

   • 左侧视频播放：支持播放/暂停、进度控制，记录专注时长。
   • 右侧笔记记录：集成 Markdown 编辑器，支持实时记录学习心得。
   • 灵活布局：支持拖拽调整左右分屏比例，适应不同学习习惯。

2. 学科掌握度仪表盘 (/dashboard)

   • 多维雷达图：展示知识点覆盖度、专注稳定性、测验准确率等维度的能力模型。
   • 学情热力图：仿 GitHub 贡献墙风格，直观展示每日学习活跃度。

3. 动态任务看板 (/task-board)

   • 分类管理：覆盖中考、高考、考研、考公等不同阶段的学习任务。
   • 智能标记：支持 AI 推荐标记，帮助用户识别高优先级任务。

技术栈概览

前端 (Frontend)

• 核心框架：React 18 + TypeScript 5
• 构建工具：Vite 5
• 样式方案：TailwindCSS 3 + PostCSS
• 状态管理：Zustand
• 路由管理：React Router 7
• UI 组件库：Recharts (图表), Lucide React (图标), @uiw/react-md-editor (Markdown 编辑器)

后端 (Backend)

• 运行环境：Node.js
• Web 框架：Express + TypeScript
• 功能：提供 API 接口服务（运行在 3001 端口）

演示