教师课表倒计时悬浮窗 生成技能
为老师做一款「打开就能用」的课表倒计时桌面悬浮窗:无边框、透明、始终置顶、可拖动、离线运行。可选进阶为「班级管理版」和「在线同步版」。
一、先判断做哪种形态(别一上来就写代码)
先问清楚(或根据用户话术判断),三种形态差异很大:
| 形态 | 适用 | 技术 | 数据存储 | 能否手机用 |
|---|---|---|---|---|
| A. 教师个人课表版 | 只看"我自己的课" | Electron 桌面窗口 | 本地文件 | 否 |
| B. 班主任班级管理版 | 班主任管理全班 | Electron + 增功能 | 本地文件 | 否 |
| C. 在线同步版 | 手机电脑都要看/改 | 网页 + 云存储 | WorkBuddy 云数据库 | 能 |
- 用户说"桌面悬浮窗 / 挂在桌面 / 始终置顶 / 送人一份" → 做 A(或 B,若他是班主任)。
- 用户说"手机也能看 / 微信打开 / 电脑手机同步" → 只能做 C(Electron 桌面窗口手机跑不了,数据也碰不到)。
- 关键认知(务必记住,避免误导用户):
- Electron 窗口跑在 Windows 上,
file://加载,手机打不开、也没法同步。 - 手机微信 WorkBuddy 打开的其实是
index.html的网页预览,和桌面窗口是两份不同的东西,数据不互通。 - 要实现"手机↔电脑同步",唯一干净做法是都改用网页版 + 云存储,电脑用浏览器打开(可缩窗置顶)。
二、核心交付文件(Electron 桌面版)
floating-app/ 目录下 6 个文件:
package.json— Electron 项目配置(main: "main.js")main.js— 主进程:无边框、透明、置顶、可拖动;提供窗口控制 + 文件持久化 IPCpreload.js— contextBridge 暴露window.desktop安全 APIindex.html— 界面 + 全部逻辑,配置区放文件最开头,CSS/JS 全内联启动悬浮窗.bat— 一键启动使用说明.md— 改配置指引
完整模板见 assets/(三份:main.js、preload.js、index.html 骨架)。
8 项基础功能(个人版)
- 夏季/冬季双作息一键切换,节次/打卡/下班时间联动,选择本地记住
- 顶部栏:实时时钟 + 日期星期 + 作息名 + 切换按钮
- 当前状态卡:自动判断 上课中/课间/休息日/放学/待上课
- 下一节课卡:节次、科目班级、起止时间、开课倒计时(秒级)
- 打卡提醒:早入校/上午放学/下午入校/下午放学,临近高亮
- 下班进度条:已过百分比 + 距下班剩余
- 今日课程列表:正课+晚自习,当前节高亮、已过变暗
- 本周课表概览表:今天列高亮、当前节行高亮 + 班级图例
UI 约束(照抄)
紫蓝渐变 + 圆角半透明毛玻璃卡片 + 白字 + 琥珀强调;6 套预设主题(含浅色自动切深字)一键切换;支持自定义背景图(配置区填路径);无 emoji、无外部字体/CDN、CSS/JS 全内联、离线;overflow-x:hidden 防横向溢出。
三、填课表数据的铁律(血泪教训,务必执行)
- 必须先逐格读截图,不要凭印象填。截图里被高亮/盖住看不清的格子,留空并明确问用户,绝不猜。
- 填完必须用脚本统计格数核对:解析
timetable各天数组,统计每个"科目/班级"出现次数,与截图重数。曾因凭印象填错数学 10 节/语文 8 节,被脚本抓到实为数学 9/语文 9。 - 核对脚本必须只读:Node 脚本用
fs.readFileSync(源)+fs.writeFileSync(报告),process.argv[2]才是第一个参数(argv[0]=node、argv[1]=脚本本身)。曾因 argv 索引写错,把校验结果写回覆盖了 index.html——务必写进独立报告文件,绝不写源文件。 - 中文数据校验一律用 Node,不要用 PowerShell 正则处理中文(不可靠)。
四、班级管理版(B)的增量功能
在个人版基础上改:
- 每格显示「科目 + 任课老师」,按科目上色(数学橙/语文红/英语蓝/物理紫/化学青/生物黄绿/体育黄/班会粉)。颜色匹配函数从"按班级"改成"按科目"。
- 管理时段提醒:大课间锻炼、眼保健操(上下午)、午餐午休 → 状态卡到点自动切换,今日列表穿插显示(虚线弱化)。
- 早读 + 晚自习卡(按星期轮换人员):
CONFIG.morningReading/CONFIG.eveningStudy。 - 作业/通知便签:点「编辑」写内容,本地保存。
- 德育备忘(到点提醒):带 日期+时间+内容,支持「每周重复」(如每周一大扫除);到点前 15 分钟起顶部琥珀色高亮条「提醒中」。注意:Electron 轻量窗口不能弹窗/响铃,只能屏显高亮;需要强制提醒得加系统通知(单独问用户)。
- 标题栏显示「
高三(1)班 · 课表倒计时」/「陈老师 · 课表倒计时」(送人更有辨识度)。
五、数据持久化(重要,决定"时有时无"bug)
- 不要用
localStorage:file://协议下不稳定,多窗口会互相覆盖 → 用户会反馈"备忘时有时无"。 - 正确做法:用
preload暴露dataGet/dataSet,走ipcMain.handle写本地 JSON 文件(存app.getPath('userData')下)。见assets/main.js、assets/preload.js的data:get/data:set通道。 - store 是异步的:
ipcRenderer.invoke返回 Promise,get/set都要async/await,renderNote/renderReminds/init等调用点全部改 async。
六、在线同步版(C):WorkBuddy 云存储
仅当用户明确要"手机电脑同步"时做。步骤:
- 建表(PostgREST,key-value 共享结构,全班共享,无需登录):
sql CREATE TABLE widget_kv (id BIGINT GENERATED ALWAYS AS IDENTITY PRIMARY KEY, k TEXT NOT NULL UNIQUE, v JSONB, updated_at TIMESTAMPTZ NOT NULL DEFAULT now()); ALTER TABLE widget_kv ENABLE ROW LEVEL SECURITY; GRANT SELECT, INSERT, UPDATE, DELETE ON TABLE public.widget_kv TO authenticated, anon; CREATE POLICY widget_kv_all ON widget_kv FOR ALL TO authenticated, anon USING (true) WITH CHECK (true);
数据库工具:mcp__genie-baas__workbuddy_cloudservice_db_exec_sql(mode 用 migrate/write/read),需applicationId。 - 激活云服务:
workbuddy_cloud_service(action=activate, applicationMode=create)→ 拿publicConfig(endpoint + publishableKey)。 - 网页版接入 SDK:
index.html头部 CDN 加载 WorkBuddyCloud SDK,store改三层(云端优先 → 本地文件 → localStorage 兜底),加store.refresh()(30 秒定时重拉实现双向同步)+store.remove()。 - 发布:
workbuddy_sites_deploy(复用 applicationId 作 appId,保住域名和 Origin)→ 得https://xxx.app.workbuddy.host/链接,verified:true。 - 自测:exec_sql 写一条测试数据读回,再删;WebFetch 探测发布页正常加载。
关键风险(务必如实告知用户)
- 沙箱无法模拟手机真实打开的完整链路,匿名(anon)写入是否真正放行需用户实机测:手机打开链接 → 添加一条备忘 → 看是否保存成功。
- 若手机添加失败,多半是云服务要求先登录(匿名写受限),需加登录步骤。
- 桌面 Electron 版与网页版不互通;改用网页版后,桌面 bat 可废弃(可改成"打开这个网页"的快捷方式)。
七、语法校验 + 启动验证(每轮改动必做)
$node = "C:\Users\陈刘根\.workbuddy\binaries\node\versions\22.22.2-3\node.exe"
& $node --check "main.js" # 空输出 = 通过
& $node --check "preload.js"
# index.html 内联脚本:正则抽 <script>…</script> 拼成 _inline.js 再 --check
node --check通过时无输出,别用.Length判断,直接读文件看是否空。- 沙箱环境
ELECTRON_RUN_AS_NODE=1:electron.exe会强制走 Node 模式,require('electron')返回路径字符串、app为 undefined —— 这是测试环境假象,不是代码 bug;真实 Windows 桌面上双击 bat 正常。别被这个报错误导去改代码。
八、本机环境坑(务必记住)
- Bash 工具 Git Bash shim 不可用 → 命令走 PowerShell;PS 标准输出常不回显 → 结果写文件再 Read。
- 删除文件被安全机制拦截 → 用
[System.IO.File]::Delete($p),别用Remove-Item -Recurse。 - PowerShell 5.1 不支持三元
?:→ 用if/else。 - 控制台中文乱码 → 中文参数写进 UTF-8 文件,别直接拼命令行。
- 长 UTF-8 文件用 Edit 多次编辑有风险 → 大改动直接
Write整体重写更稳。
九、交付
present_files 传 index.html(+ 使用说明.md;发布版传链接 URL)。回复里用表格说明填入了哪些课表/功能、以及留空待确认的格子。