拼图怪 UI 全面改版记 — 从灰色到纯白，七次迭代找到真相

这是一份完整的工作日报，有详细的迭代记录、技术分析、决策清单。

一天做了什么#

帮拼图怪（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 有没有覆盖。就这么简单。

拼图怪线上地址： 👉 collage-maker2.pages.dev