📚 课堂记录工作台

一、这是什么？

一套纯前端、永久免费托管在 Cloudflare Pages 的课堂记录工作台，包含完整功能（与原版完全一致）：

配套能力：数据自动保存本机 · 跨设备同步 · Excel 导入/导出 · 离线可用 · 永久免费 HTTPS 网址 · 全球 CDN 加速。

为什么不依赖后端？ 数据存本机浏览器（localStorage + IndexedDB），所以无需服务器、无需绑卡、无需担心数据上传到云端泄露——数据永远在你自己电脑上。

二、两种搭建方式

方式 A · 让 AI 一键帮你搭建（最省事，推荐）

把下面"AI 通用指令"整段复制，发送给任意 AI（WorkBuddy / ChatGPT / Claude / 文心 / 豆包…）。然后按 AI 的引导一步步操作。

⚠ 全程只需你提供 2 个东西：

1. 一个邮箱（用于注册 Cloudflare 账号，完全免费、不绑信用卡）
2. 一个想要的网址前缀（例如 zhang-math），最终网址是 https://zhang-math.pages.dev

方式 B · 自己用命令行搭建

B1. 打开 https://dash.cloudflare.com/sign-up ，输入邮箱、密码注册（免费、不绑信用卡），验证邮箱后登录。

B2. 安装 Node.js：访问 https://nodejs.org 下载 LTS 版本，验证：终端运行 node -v。

B3. 拿到工作台代码：让 AI 生成 / 让同事发给你 / 自己写。保存到本地任意目录，例如 ~/my-workbench/workbench.html。

B4. 一键部署：

cd ~/my-workbench

# 第一次需要登录 Cloudflare（弹出浏览器授权）
npx wrangler login

# 创建项目（子域名前缀必须 6 字符以上，全网唯一）
npx wrangler pages project create zhang-math
# （如果问要不要 Git 集成，回车跳过即可）

# 部署
npx wrangler pages deploy . --project-name zhang-math

# 看到以下即成功：
# ✨ Deployment complete!
# https://zhang-math.pages.dev

三、首次访问设置

打开网址后，会自动弹出"工作台设置"：

填好后点 💾 保存。之后再点侧边栏头像或 ⚙️ 设置工作台 按钮可随时修改。

四、跨设备同步

每个工作台都内置 🔗 同步 按钮：

1. 在主设备（如家里电脑）点 🔗 同步 → 生成同步链接 → 复制链接
2. 在副设备（如学校电脑）打开同一工作台网址 → 点 🔗 同步 → 粘贴同步链接 → 连接
3. 之后两边数据自动每 3 分钟同步一次（jsonblob 24h 有效，到期自动重建）

💡 不同同事的工作台完全不互通——除非你主动把同步链接发给对方。

五、日常使用速查

六、常见问题

Q：网址会不会过期？
A：不会。Cloudflare Pages 永久免费托管，不限期、不限流量。只要你不删项目，xxx.pages.dev 永久是你的。

Q：Cloudflare 账号会不会被回收？
A：只有长时间不登录（一般 1 年以上）才会被回收。日常偶尔登录就永远没问题。

Q：数据会不会丢？
A：所有数据优先存本机浏览器，再异步同步到云端。即使 Cloudflare 挂了或换电脑，数据仍在你旧电脑里——"导出报告"中的"备份全部数据"功能是终极备份。

Q：不同同事的工作台互相看得到吗？
A：看不到。每个工作台的数据完全独立，互不干扰。

Q：手机能用吗？
A：能。响应式自适应，手机浏览器直接打开即可。

Q：之前用的 Surge.sh 工作台还能访问吗？
A：能。已部署的旧工作台不受影响。但新同事请用本页面的 Cloudflare Pages 方式。

七、AI 通用指令（核心 · 已切换 Cloudflare Pages）

请帮我搭建一份独立专属的"课堂记录工作台"，要求：
1) 功能与示范站 https://taolulisha-workbench-template.surge.sh 完全一致
2) 数据 / 头像 / 老师姓名 / Slogan / 网址都是我独立专属的

请你一步步引导我完成。我会按你的提示回复信息。

我会提供这些信息（按你提示给）：
1) 我想要的子域名前缀（最终是 xxx.pages.dev，全网唯一）
2) 我的名字、副标题、Slogan、头像（可选）
3) 一个 Cloudflare 账号（如果我没有，会请我注册 https://dash.cloudflare.com/sign-up）

【重要变更：部署平台已从 Surge.sh 改用 Cloudflare Pages】
原因：Surge.sh 当前关闭新用户注册。
Cloudflare Pages 优势：完全免费、不绑信用卡、无限带宽、全球 CDN、自动 SSL、子域名 .pages.dev 与 Surge 的 .surge.sh 用法相同。

你的工作流程：
1. 告诉我注册 Cloudflare 账号的方法（如果我没有）——访问 https://dash.cloudflare.com/sign-up，用邮箱注册即可（不绑卡），然后验证邮箱登录
2. 让我选一个 pages.dev 子域名前缀（xxx.pages.dev，全网唯一，建议 6 字符以上）
3. 准备一份"基础版"工作台代码（与示范站功能完全一致），要求：
   - EMBEDDED_DEFAULT_DATA 只保留 4 个空班级 A/B/C/D（无学生）
   - 老师姓名/头像/Slogan/副标题改为首次访问引导设置（localStorage 键 wb_teacher_profile_v1）
   - 默认头像用 SVG data URI（按姓名首字母生成），不依赖任何外部图片
   - 首次访问自动弹出"⚙️ 设置工作台"对话框（maybePromptFirstTime()）
   - 严禁包含示范站原作者的姓名/邮箱/学生姓名等任何个人信息
4. 告诉我 Cloudflare Pages 部署步骤：
   a) 安装 Node.js（https://nodejs.org）
   b) 把 workbench.html 放进一个目录
   c) 在该目录运行：
      npx wrangler login           # 首次会弹出浏览器授权
      npx wrangler pages project create <我的子域名前缀>
      npx wrangler pages deploy . --project-name <我的子域名前缀>
   d) 部署成功后会显示 "https://我的子域名前缀.pages.dev"
5. 部署成功后告诉我网址和首次访问设置步骤
6. 提醒我开启"🔗 同步"实现跨设备数据同步

代码要求：
- 单文件 HTML（workbench.html），约 6000 行，纯前端
- 不依赖任何 /api/data、default-data.json 等外部资源
- localStorage 键：teach_workbench_v12（主数据）、wb_teacher_profile_v1（老师信息）
- IndexedDB：库名 workbench_files，存储名 files（存等级线图片、试卷等）
- CDN 库：html2canvas@1.4.1 + xlsx@0.18.5

本地开发目录：
  my-workbench/
  ├── workbench.html   (主程序)
  └── index.html       (可选：根路径自动跳转 workbench.html)

请从第一步开始：问我是否已有 Cloudflare 账号。

八、自己改功能

代码是单文件 HTML，目录结构：

my-workbench/
├── workbench.html      ← 主程序（≈ 6 千行）
└── index.html          ← 可选，根路径跳转

修改 + 重新部署流程：

1. 用 VSCode / 记事本打开 workbench.html
2. 搜索关键字修改（改班级颜色、增删字段等）
3. 保存后重新部署：

   cd ~/my-workbench
   npx wrangler pages deploy . --project-name zhang-math

⚠ 不要修改 localStorage 键（teach_workbench_v12、wb_teacher_profile_v1），改了会丢数据！

更新部署平台对照表

祝你工作愉快 🎉 · 基础版基于 v12 数据模型 · 永久免费 · Cloudflare Pages 全球 CDN 加速