Skip to content

git2968/SCHEDULE-IMPORT

Repository files navigation

课表管理系统

一个现代化的课表管理应用,支持Excel导入、课程管理和多课表切换,使用React + TypeScript构建的响应式Web应用。

功能特点

  • 用户系统:支持注册登录,用户数据本地保存
  • 课表导入:支持从Excel文件导入课表数据
  • 智能识别:自动解析课程名称、时间、地点、教师等信息
  • 课表管理:可保存多个课表并在它们之间切换
  • 课程编辑:支持添加、修改和删除课程
  • 周数切换:可视化展示不同周数的课程安排
  • 移动端适配
    • 日视图和周视图切换
    • 课程点击显示详细信息
    • 针对小屏幕优化的布局和交互
  • 个性化设置
    • 自定义课表名称和周数
    • 自定义背景图片(每个用户独立保存)
  • 数据导出:支持将课表导出为Excel格式,按周分表
  • 现代UI:玻璃态设计、动画效果和响应式布局

技术栈

  • React 18 + TypeScript
  • Styled Components 进行CSS-in-JS样式管理
  • XLSX 用于解析和导出Excel文件
  • React Router v6 实现路由
  • React Toastify 提供通知功能
  • localStorage 本地数据持久化
  • Vite 作为开发和构建工具

安装与运行

  1. 克隆仓库:
git clone https://github.com/git2968/SCHEDULE-IMPORT.git
cd student-schedule
  1. 安装依赖:
npm install
  1. 启动开发服务器:
npm run dev
  1. 构建生产版本:
npm run build

使用指南

快速开始

  1. 注册/登录账号

    • 首次使用需要创建账号
    • 所有数据保存在本地,无需互联网连接
  2. 导入课表

    • 点击"课表导入"页面
    • 上传符合格式的Excel课表文件
    • 系统会自动解析并展示课表
  3. 查看和管理课表

    • 在"当前课表"页面查看课程安排
    • 使用顶部选项卡切换周数
    • 点击"导出"按钮可将课表导出为Excel
    • 在移动设备上可以切换日视图和周视图
    • 点击或滑过课程可查看详细信息,包括上下课时间
  4. 课程管理

    • 在"课程管理"页面添加、编辑或删除课程
    • 修改课程时间、地点、教师等信息
  5. 个性化设置

    • 在"设置"中自定义课表名称和周数
    • 上传个性化背景图片

移动端功能

  1. 视图切换

    • 在移动设备上可以切换"日视图"和"周视图"
    • 日视图:显示单天完整课程,便于查看详细信息
    • 周视图:紧凑展示整周课程安排,一览全局
  2. 课程详情

    • 点击或滑过课程可显示详细信息
    • 显示完整的课程名称、地点、教师和上下课时间
    • 多节连堂课会显示从第一节开始到最后一节结束的完整时间范围
  3. 响应式布局

    • 根据设备宽度自动调整布局和元素大小
    • 针对触摸屏优化的交互体验

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

About

一个现代化的课表管理应用,支持Excel导入、课程管理和多课表切换,使用React + TypeScript构建的响应式Web应用。

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors