Smart Workbench Builder(单文件 Web 工作台生成器)
Overview
把一句话需求(「我想在手机上看每天要做什么、完成了多少」)变成一套完整交付:
- 资料库一张 database 表(结构化字段,见 references/database-schema.md);
- 单文件 HTML 工作台页面(看板分栏、进度登记、办结、编辑、统计、趋势、带色导出、只读分享,模板在 assets/workbench-template.html);
- 可选:每晚自动生成 Excel 日报的 Python 脚本(assets/build_daily_report.py)。
模板基于生产环境三个月迭代(约 60 条真实事项、每日滚入/续期稳定运行),所有踩坑结论已固化在 references/。
工作流(七步,按序执行)
Step 1 — 需求澄清(不要跳过)
问清四件事,答不上来就用默认值并明说:
| 项 | 默认值 |
|---|---|
| 跟踪什么 | 日常工作待办 |
| 怎么分类 | 分类(工作/个人/需学习)+ 来源(每日需做/临时新增/计划事项) |
| 特殊规则 | 「每日需做」办结后次日自动续期;任务日期晚于今天的事项到期才出现 |
| 要不要日报 | 要(每晚 22:30 邮件/文件) |
Step 2 — 建表
按 references/database-schema.md 的 15 字段建资料库 database(select 选项可调,务必包含「进展日期」「要求完成时间」),记录 DATABASE_ID。
Step 3 — 生成页面
- 复制 assets/workbench-template.html 到项目目录;
- 替换
YOUR_DATABASE_ID(JS 变量 + 所有 data-sp-database-id 属性)与EDIT_URL; - 按用户分类改
CATS(看板分栏)与SCHEMA_OPTIONS的默认选项; - 字段增删只改表结构 + 渲染处,统计/导出/脚本三处口径必须同步(database-schema.md 第五节铁律)。
页面架构、SDK 用法、事件委派、弹窗体系:先读 references/page-architecture.md 再动手。
Step 4 — 导出报表(如用户要)
按 references/spreadsheetml-export.md:SpreadsheetML 三要素、Width 单位是点、行高估算(全角 1 半角 0.5)、语义色体系。导出改动后必须跑该文档第六节的验证链(ElementTree 逐行比对 + SheetJS 读回 + openpyxl 读回)。
Step 5 — 日报脚本(如用户要)
复制 assets/build_daily_report.py,配置环境变量 WORKBENCH_DATABASE_ID / WB_LIBRARY_DB_DIR,统计口径与页面一致(脚本内 visible_open/compute 即页面口径,改一处必须同步另一处)。
Step 6 — 分享配置
按 references/share-readonly.md 告知用户三层用法(自己多终端 / 发布只读 / 邀请协作编辑)。模板已内置只读自适应(发布域名识别 + 401 降级),提醒用户:页面每次更新后要去分享面板重新发布(快照式)。
Step 7 — 验证与上线
严格按 references/verification-protocol.md:备份 v<N> → node --check / py_compile → DOM 存根装具(真实数据)→ 真实 API 联调(写操作改动时)→ 三道 lint → import_html 上线 → 记日志。验证不通过不上线。
硬规则(违背即返工)
- 单文件、ES5、无框架、无构建;JS 全在一个 IIFE 里。
- 写库的 select 值必须是 option id;读出来用 optText 转文本。
- 未来日期的事项不进当日视图/统计/导出(三处过滤一致)。
- 续期生成必须带并发防护三件套(运行锁 + 即时写 ALL_ROWS + 抑制通知)。
- 编辑弹窗不碰进度/状态/原因字段。
- 按钮状态重置放
.then,失败不能卡「保存中…」。 - 导出必须带 BOM + XML 声明 + mso PI + Workbook 根 + Styles;Width 是点。
- 绝不静默覆盖文件;每次改动先备份。
- 内联 JS 避免字面
//;单引号正则用\u0027。
Resources
- assets/workbench-template.html — 完整页面模板(约 64KB,含看板/登记/办结/编辑/统计/趋势/带色导出/只读自适应)。用法:整文件复制后替换 ID,不要从零写。
- assets/build_daily_report.py — 每晚日报脚本(3 sheet 带语义色 + 行高估算,口径与页面一致)。
- references/database-schema.md — 15 字段表结构(含「进展日期」「要求完成时间」)、进度/状态分离设计、三处口径铁律。
- references/page-architecture.md — SDK 五方法、init 链、过滤规则、续期并发防护、弹窗体系、CSS 基线。
- references/spreadsheetml-export.md — SpreadsheetML 三要素、单位坑、行高估算算法、语义色、验证链。
- references/share-readonly.md — 分享两种机制、发布 iframe 结构、匿名读写实测结论、只读三保险。
- references/verification-protocol.md — 备份规范、函数提取法、DOM 存根装具要点、真实 API 联调、三道 lint 命令、import_html、Playwright 用系统 Edge。