这是一份完整的工作日报，有详细的迭代记录、技术分析、决策清单。 推荐查看 完整 HTML 版本（含时间线视图），排版更清晰，包含交互式表格和代码高亮。
一天做了什么
帮拼图怪（collage-maker-zh）做了一次比较彻底的 UI 翻新。一开始只是想调大字体，结果一路挖下去，改了七八样东西。
1. 文字颜色 — 最根本的问题
发现所有文字看着是白的，其实是用 rgba(var(--paper-rgb), .92) 算出来的灰色（实际 ≈ rgb(210,210,212)）。一直觉得”哪里不对”但从来没真正追究过。
改了一行：--text: #fff。整个界面亮了。
2. 撤销/重做按钮 — 改了七次
这个环节最折腾。从透明边框到实心底色到 ghost button，前前后后改了六次 CSS，按钮还是看不见。第七次才发现——JS 里有一行 updateUndoButtons() 设了 .style.opacity = '.3'。inline style 优先级高于一切 CSS，前六次全是白改。
3. 画布拖拽调换
图库拖到画布正常，但画布内互换完全不触发的 bug。根因是 HTML5 Drag & Drop 规范里 effectAllowed（dragstart 设）和 dropEffect（dragover 设）必须兼容。代码三处硬编码了 dropEffect = 'copy'，但 cell 拖拽设了 effectAllowed = 'move'，浏览器直接丢弃 drop，没有任何错误提示。
4. 其他小功能
- Canvas 尺寸实时显示（ResizeObserver）
- 导出目录记忆（
showSaveFilePicker加id参数） - 35+ 控件的 tooltip 提示系统
- 部署到 Cloudflare Pages
最大的教训
那行 opacity: 0.3 让我想了很多。一个系统里总有些你看不到的变量在控制结果——你改表面改一百次都没用，得找到那个隐藏的变量。
CSS 不生效 → 先查 JS 有没有覆盖。就这么简单。
完整的工作日报（含时间线、迭代表、tooltip 清单、决策记录）：
👉 /work-log/2026-05-14-collage-tool-ui-overhaul.html
拼图怪线上地址：
👉 collage-maker2.pages.dev