一个现代化的课表管理应用,支持Excel导入、课程管理和多课表切换,使用React + TypeScript构建的响应式Web应用。
- 用户系统:支持注册登录,用户数据本地保存
- 课表导入:支持从Excel文件导入课表数据
- 智能识别:自动解析课程名称、时间、地点、教师等信息
- 课表管理:可保存多个课表并在它们之间切换
- 课程编辑:支持添加、修改和删除课程
- 周数切换:可视化展示不同周数的课程安排
- 移动端适配:
- 日视图和周视图切换
- 课程点击显示详细信息
- 针对小屏幕优化的布局和交互
- 个性化设置:
- 自定义课表名称和周数
- 自定义背景图片(每个用户独立保存)
- 数据导出:支持将课表导出为Excel格式,按周分表
- 现代UI:玻璃态设计、动画效果和响应式布局
- React 18 + TypeScript
- Styled Components 进行CSS-in-JS样式管理
- XLSX 用于解析和导出Excel文件
- React Router v6 实现路由
- React Toastify 提供通知功能
- localStorage 本地数据持久化
- Vite 作为开发和构建工具
- 克隆仓库:
git clone https://github.com/git2968/SCHEDULE-IMPORT.git
cd student-schedule- 安装依赖:
npm install- 启动开发服务器:
npm run dev- 构建生产版本:
npm run build-
注册/登录账号
- 首次使用需要创建账号
- 所有数据保存在本地,无需互联网连接
-
导入课表
- 点击"课表导入"页面
- 上传符合格式的Excel课表文件
- 系统会自动解析并展示课表
-
查看和管理课表
- 在"当前课表"页面查看课程安排
- 使用顶部选项卡切换周数
- 点击"导出"按钮可将课表导出为Excel
- 在移动设备上可以切换日视图和周视图
- 点击或滑过课程可查看详细信息,包括上下课时间
-
课程管理
- 在"课程管理"页面添加、编辑或删除课程
- 修改课程时间、地点、教师等信息
-
个性化设置
- 在"设置"中自定义课表名称和周数
- 上传个性化背景图片
-
视图切换
- 在移动设备上可以切换"日视图"和"周视图"
- 日视图:显示单天完整课程,便于查看详细信息
- 周视图:紧凑展示整周课程安排,一览全局
-
课程详情
- 点击或滑过课程可显示详细信息
- 显示完整的课程名称、地点、教师和上下课时间
- 多节连堂课会显示从第一节开始到最后一节结束的完整时间范围
-
响应式布局
- 根据设备宽度自动调整布局和元素大小
- 针对触摸屏优化的交互体验
Excel文件应包含课程信息,每个单元格的课程信息格式如下:
[课程编号]课程名称 [周数范围][节次范围] 上课地点
支持的格式示例:
[28305041]工程综合识图 [1-16周][3-4节] 第三教学楼306-制图实训室
[28305052]建筑工程计量计价 [1-8,10-15周][7-8节] 第三教学楼307-制图实训室
[134952]形势与政策Ⅴ [5周][3-4节] 主教学楼D114
周数支持的格式:
- 单个周数:
[5周] - 连续周数:
[1-16周] - 不连续周数:
[1-3,5-16周] - 单双周:
[1-16单周]、[1-16双周]
student/
├── src/
│ ├── assets/ # 静态资源文件
│ ├── components/ # 可复用组件
│ │ ├── ScheduleTable.tsx # 响应式课表组件
│ │ ├── AnimatedPageTitle.tsx
│ │ └── ...
│ ├── context/ # React Context
│ ├── hooks/ # 自定义Hooks
│ ├── pages/ # 页面组件
│ ├── types/ # TypeScript类型定义
│ └── utils/ # 工具函数
├── public/ # 公共资源
└── backImg/ # 用户背景图片
应用使用浏览器的localStorage存储以下数据:
users: 用户账号信息currentUser: 当前登录用户schedules: 课表数据userSettings_[userId]: 用户特定设置(包括背景图片)
欢迎提交问题和功能建议,或者直接提交Pull Request。
MIT