校内课时申报与审批演示系统

项目简介

这是一个基于原生 HTML + CSS + JavaScript 的前端演示系统，用于模拟学校内部课时申报与审批流程。系统当前不依赖后端数据库，所有演示数据都保存在浏览器本地 localStorage 中，适合：

• 做产品演示
• 做需求澄清和流程确认
• 作为后续正式系统开发前的原型基础

本次更新摘要

这次重构重点处理了体验、风控和联动稳定性问题，主要包括：

• 修复页面频繁闪烁问题

  • 去掉了整页反复动画带来的视觉闪烁
  • 将提示反馈改为局部更新，避免提示消失时整页重绘
  • 勾选记录这类小交互改为局部同步，不再整页刷新

• 补全关键操作反馈

  • 登录失败会立即提示原因
  • 密码错误会提示剩余可尝试次数
  • 注册、提交、审批、导入、导出、提醒、课程模式增删都会给出明确反馈

• 新增登录失败次数限制

  • 同一角色下同一用户名连续输错 5 次后锁定 10 分钟
  • 锁定时间和剩余次数会显示在登录页

• 修复业务联动问题

  • 只有 待审批 记录才能执行审批动作
  • 已退回 记录必须由教师重新提交后，管理员才能再次审批
  • 相同学期 + 课程代码 + 教学班的重复申报被阻止
  • 批量审批后会自动清理已处理的勾选状态

• 新增更成熟的必要功能

  • 教师申报草稿自动保存
  • 管理员最近操作日志
  • 额外课时/调整系数变更时，强制填写备注依据
  • 注册页增加确认密码
  • 登录/注册页增加密码显隐

• 重做页面视觉和响应式布局

  • 全站切换为冷色系
  • 首页、登录页、教师端、管理员端全部重做为更产品化的卡片工作台风格
  • 兼容 PC 和手机端

角色与功能

教师端

• 教师登录
• 教师注册申请
• 自动恢复未提交草稿
• 课时申报表单
• 实时预估折算课时与课时费
• 查看个人申报记录
• 编辑 待审批 / 已退回 记录并重新提交
• 查看最近反馈与审批状态

管理员端

• 管理员登录
• 管理员注册
• 筛选和检索申报记录
• 单条审批通过 / 退回
• 批量审批通过
• 导出所选记录
• 导出当前筛选结果
• 邮件提醒教师处理申报
• 教师账号审核
• CSV 批量导入教师账号
• 课程模式、课时系数、单价维护
• 最近操作日志查看

关键规则

1. 登录安全

• 连续输错密码 5 次后锁定 10 分钟
• 教师账号未审核通过时不可登录

2. 申报校验

• 课程名称、课程代码、教学班名称不能为空
• 学生人数必须大于 0
• 授课周数必须在 1 到 30 之间
• 周学时必须大于 0 且不超过 12
• 额外课时必须在 0 到 120 之间
• 调整系数必须在 0.5 到 2 之间

3. 审核联动

• 管理员只能处理 待审批 记录
• 已退回记录需要教师修改后重新提交
• 已通过记录不会再次进入审批按钮逻辑

4. 重复申报控制

• 同一教师在同一学期内，课程代码 + 教学班 组合不允许重复申报

5. 备注依据要求

• 如果填写了额外课时
• 或者调整系数不是 1
• 则备注说明至少需要 6 个字

演示账号

教师

• 用户名：zhang.teacher
• 密码：Demo123!

管理员

• 用户名：admin
• 密码：Demo123!

快速使用

方式一：直接打开

直接打开项目根目录下的 index.html 即可体验。

方式二：使用 Docker

如果希望像网站一样运行：

docker build -t teaching-demo .
docker run -p 8080:80 teaching-demo

然后访问：

http://localhost:8080

主要文件

• index.html：页面入口
• assets/app.js：前端业务逻辑
• assets/style.css：页面样式
• Dockerfile：容器部署文件

当前技术特点

• 无需 Node 环境即可直接运行
• 纯前端静态方案，便于演示和交付原型
• 浏览器本地存储，刷新页面后数据仍可保留
• 无后端依赖，适合前期快速迭代

注意事项

• 数据存储在当前浏览器本地，不会跨设备同步
• 清除浏览器缓存或本地存储后，演示数据会丢失
• 当前为演示版，不适合作为正式生产系统直接上线

如果后续要做正式系统，建议优先补齐

• 后端接口
• 数据库持久化
• 学校统一身份认证
• 更细粒度的权限模型
• 审批流配置
• 操作审计日志
• 正式的消息/邮件服务

验证说明

本次改动后，已针对以下内容做过基础检查：

• 首页桌面端渲染
• 首页移动端渲染
• 登录页桌面端渲染
• 前端脚本可在无头浏览器中成功加载并生成页面截图

如果后续需要，我可以继续往下补：

• 更完整的自动化回归脚本
• 接口化改造
• 多级审批流程
• 正式权限体系