ded10118f552cafc3f038996b6b3fcd93ee3351c
官网(`website/`)
- 首屏标题放大一档(`--fs-display` 上限 3.6rem → 4rem),第二行改成**整行渐变填色**,
照 ClassIsland 官网那种「大标题 + 中间一段渐变 + 一行副标 + 一排徽章 + 两个按钮」的写法;
- 标题下补一排 mono 芯片(版本 / Windows / Linux·Docker / 触摸屏),主按钮换成
「立即下载」+「GitHub 仓库」;
- 顶部导航与页脚补「文档站」入口;页脚原本指向 GitHub blob 的那三个链接改成指向文档站
—— 那几个文件已经移到 `docs/management/` 下,原链接是 404。
> ⚠ 渐变那一行**不参与逐字揭示**:`main.js` 的 `setupHeadlineReveal` 会跳过 `.reveal-grad`。
> 拆成 per-char 的 `inline-block` 之后每个字各自建一层合成,祖先的 `background-clip: text`
> 就穿不过去,渐变会整行失效 —— 所以它按整行入场(透明度 + 轻微上浮)。
站点发布(`.github/workflows/pages.yml`,取代 `docs.yml`)
- **一个仓库在 GitHub Pages 上只有一个站点**,所以官网与文档站拼成一份产物:
官网在根、文档站在 `/docs/` 下,组装逻辑在 `scripts/build-pages.mjs`;
- 站点根 404 由 `website/404.html` 提供(含 `{{BASE}}` 占位符,由脚本与 workflow 按仓库名注入);
- 官网目录里的 `serve.mjs` 与 `tools/` 是开发用的,不发布;
- `website/serve.mjs` 把 `../docs/_site` 挂在 `/docs/` 下,让本地预览与线上同形 ——
否则页脚那几个「文档站」链接在本地全是 404;
- 文档站模板顶栏补一个「官网」入口(`{{_rel}}../`)。
版本迭代
- `scripts/version.mjs` 补上**官网上手写的三处版本号**(顶栏徽标 / 首屏芯片 / 页脚)。
官网是纯静态站、没有构建步骤,没有哪段代码会去读 `package.json`,漏改的后果是
首页一直挂着旧版本号 —— 而那是别人看到的第一眼。落点从 10 处变成 13 处,
`AGENTS.md` §4.4 与 `docs/dev/release.md` 同步。
班级小助手
班级小助手是给中小学班级用的一套信息管理系统。
老师发一条通知,教室那台机器上的灵动岛和 ClassIsland 会同时弹出来;
学生打开客户端就能看到当天的课表和作业。
🚀 软件下载 | 📚 使用文档 | 🧭 完整参考 | 💬 反馈问题
它由什么组成
一份代码,四个交付物:
| 装在哪 | 是什么 | 谁在用 |
|---|---|---|
| 教师的电脑 / 学校服务器 | 服务端(Express + Prisma + Socket.IO),同时托管 Web 管理端 | 其它三端 |
| 浏览器(手机也行) | Web 管理端(Vue 3 + Element Plus,PWA 可安装) | 老师、班主任、管理员 |
| 教室那台机器 / 学生电脑 | 桌面客户端(Electron + Vue 3),含「灵动岛」浮窗、托盘、离线缓存 | 教室大屏、学生 |
| 教室机器上的 ClassIsland | 联动插件(.NET 8 / C#),上报课表与上课状态、把老师的提醒弹到大屏上 | 教室机器 |
老师在 Web 端发布内容 → 服务端落库并按班级房间广播 → 客户端与灵动岛实时更新; 落到 ClassIsland 上的那部分走设备令牌的独立通道,教室网络不好也不影响。
功能
Web 管理端(老师 / 管理员)
- 仪表盘:本班人数、课程、课表、作业、通知、成绩一屏概览
- 班级管理:建班自动生成班级码与班级密码,随时更换班主任、添加协作教师
- 学生 / 教师管理:单个录入或导入名单(xlsx / xls / csv / tsv)
- 课表管理:按周排课、单双周,可直接从 ClassIsland 档案导入课表与节次时间
- 作业发布:按「所属日期」归类,支持附件与未交名单
- 通知发布:三档优先级;在上课时段发紧急通知会被拦下来并要求二次确认
- 叫人:点名某位同学到办公室,分「普通」与「紧急」两级
- 成绩录入:单条 / 批量 / 表格导入,带等级分布与得分率统计
- ClassIsland 联动:签发设备令牌、下发提醒、把课表镜像回教室大屏
- 数据库管理:连接体检、备份与恢复、SQLite ⇄ MySQL 一键切换
- 手机小屏适配,可「添加到主屏幕」当应用用
教室里的桌面客户端
- 班级码登录 —— 学生没有个人账号,一台教室机器代表一个班
- 课表:「今天」时间轴(大时钟 + 正在上 / 下一节 + 距下课倒计时)与周视图
- 作业看板:按科目分卡、可全屏铺满、字号可调,也能切回列表
- 通知中心:未读红点、优先级标签、点击自动标为已读
- 成绩总览:全班成绩表格 + 柱状图 + 等级分布
- 教室机器可直接录入作业、勾选未交名单
- 离线优先:断网回退 IndexedDB 缓存,恢复连接后自动同步
- 浅色 / 深色主题,跟随系统
灵动岛(桌面通知浮窗)
- 通知、新作业、叫人都会上岛:先是胶囊,点开是详情卡
- 多条消息展开为竖排列表,按重要程度排序,放不下时提示去应用内看
- 上课时段不打扰:普通通知暂存到下课再弹;紧急通知与叫人立刻弹
- 尺寸、圆角、字号、主题色、停靠位置(顶部 / 底部 × 左 / 中 / 右)都可以调
- 纯黑 / 毛玻璃 / 主题色渐变三种底
- 触摸屏(希沃白板这类一体机)也能点开
ClassIsland 联动
- 教室机器上报课表与上课状态,Web 端能看到「现在在上什么」
- 老师发的提醒在教室大屏上全屏弹出,支持语音朗读,播完回执不重复弹
- 可以把班级小助手排好的课表镜像回 ClassIsland,不影响老师原有的课表
- 提醒弹在客户端还是 ClassIsland,由教室那台机器自己选
部署与运维
- Windows 一键安装:内置 Node 运行时,双击安装、开机自启、自动建库建号
- Linux 一键安装 +
classhelper运维命令(systemd 托管,升级 / 回滚 / 备份) - Docker Compose(MySQL 版与 SQLite 版各一份)
- SQLite 与 MySQL 一键切换,备份与跨库迁移共用同一份 JSON 快照
软件截图
下面这些图都是脚本把程序真的跑起来截的(
node website/tools/capture-shots.mjs与客户端冒烟),不是示意图。
Web 管理端
教室里的客户端
灵动岛
| 形态 | 截图 | 说明 |
|---|---|---|
| 新消息胶囊 | ![]() |
非上课时段直接出现,点一下展开 |
| 点开后的详情 | ![]() |
标题、内容、时间 + 打开应用 / 标为已读 / 知道了 |
| 多条消息列表 | ![]() |
按重要程度排序,默认显示三条 |
| 上课期间的紧急通知 | ![]() |
卡片内部红色呼吸光晕,无需点击 |
| 下课后补弹 | ![]() |
上课期间暂存的通知,下课后自动弹出来 |
| 老师叫人 | ![]() |
「请 XXX 同学找 XXX 老师」 |
| 新作业 | ![]() |
教室机器自己录的那条不会弹给自己 |
手机上
开始使用
| 装在哪 | 装什么 | 从 Releases 里拿 |
|---|---|---|
| 教师的电脑 / 学校服务器 | 服务端(内含 Web 管理端与 Node 运行时) | 班级小助手服务端-<版本>-x64-setup.exe |
| 教室机器 / 学生电脑 | 学生客户端 | 班级小助手-<版本>-x64-setup.exe,或 -portable.exe 免安装 |
| 教室机器的 ClassIsland | 联动插件 | ClassHelper.ClassIslandPlugin.cipx |
服务端装上就算跑起来了:双击安装程序,建库、建号、开机自启都由它自己办,
装完在浏览器打开 http://<服务器地址>:4000 就能登录。教师的电脑、学校的服务器、
一台常年开机的机器都可以装。
Linux 服务器有更省事的路子,一行命令装成 systemd 服务,并带上 classhelper 运维命令:
curl -fsSL -o /tmp/classhelper-install.sh https://raw.githubusercontent.com/LoveChengke/ClassHelper/master/deploy/install.sh && sudo bash /tmp/classhelper-install.sh
先体检、不改动系统的话,在末尾加上 --check。也可以走 Docker Compose,
完整步骤见部署指南与 Linux 运维手册。
获取帮助
- 使用文档:docs/ —— 分四块:第一次装、已经在用了、负责运维、要改代码
- 完整参考:docs/reference.md —— 功能口径、REST API、权限矩阵、验收证据
- 遇到问题 / 想提需求:提交 Issue
开发
| 层 | 选型 |
|---|---|
| 后端 | Node.js ≥ 20.19 + Express 5 + Prisma 7(SQLite / MySQL)+ Socket.IO |
| Web 管理端 | Vue 3 + Vite + Element Plus + Pinia |
| 桌面客户端 | Electron 44 + Vue 3 + IndexedDB 离线缓存(含独立的灵动岛渲染进程) |
| ClassIsland 插件 | .NET 8 / C# + Avalonia(ClassIsland 插件 API 2.0) |
| 共享契约 | packages/shared:类型、常量、权限矩阵、动效令牌 |
pnpm install
cp packages/server/.env.example packages/server/.env # 至少改 JWT_SECRET
pnpm db:generate
pnpm --filter @classhelper/server db:deploy # 根 scripts 里没有 db:deploy
pnpm build:shared # 三端与 seed 的前置产物
pnpm db:seed
pnpm dev # 后端 4000 + Web 端 5173
pnpm db:seed 会写一套演示数据(1 管理员 / 2 教师 / 3 个班 / 15 名学生 / 课表 / 作业 / 通知 / 成绩):
| 角色 | 账号 | 密码 |
|---|---|---|
| 管理员 | admin |
admin123 |
| 教师 | teacher1 |
teacher123 |
| 学生端(班级) | 班级码 G101 |
123456 |
- AGENTS.md —— 工程约定与本机踩坑,改代码前先读它
- docs/reference.md —— 完整参考(功能行为、接口、验收记录)
- docs/dev/architecture.md —— 架构总览
致谢
灵动岛的视觉与架构参考 WinIsland(Windows 上的动态岛); 动效语言取自 beUI;产品官网的版式参考 ClassIsland 官网。 三端的深色主题、图标与动效令牌都是照这些参考自己实现的,没有引入它们的运行时依赖。
如果这个项目对你有帮助,欢迎点亮 Star ⭐
Description
ClassHelper -是给中小学班级用的一套信息管理系统
https://lovechengke.github.io/ClassHelper/
20 MiB
1 Stars
1 Watchers
0 Forks
Languages
TypeScript
45.4%
Vue
27%
JavaScript
17.2%
CSS
4.6%
Shell
3.8%
Other
1.9%





















