Commit Graph
8 Commits
Author SHA1 Message Date
tamakyi 1b027df62e 生成器:实测尺寸取整显示,去掉面板里放不下的源图尺寸 2026-10-20 17:53:10 +08:00
tamakyi 4bd600fb46 主题生成器:素材尺寸按视口自适应 + 导出画质可调
- 尺寸单位 4 档:fit(按高)/fitw(按宽)/px/vh,输出 auto clamp(min(calc(100vh-24px),55%),基准,上限),下限让位视口 → 自适应单位永不把图撑出屏幕
- fitw 补上宽幅素材:fit 只按高度缩,16:9 素材在 390 竖屏仍出 1001px 宽(照裁)
- 视口预设带高度(含 390×844);layerMetrics 统一出 CSS/预览框/溢出检测,图层编辑区显示实测尺寸并报越界,可一键按当前视口修好
- 窄屏每层策略(原样/缩小/隐藏)+ 缩放系数;修 @media 只覆盖全局、独立配置页面在手机上从不生效的特异性 bug
- 导出画质:质量滑块(上限 0.95,Skia 在 q=1 切无损会反常)+ 长边上限,改动后从原图重算
- base.css 新增 --tb-page-position(默认 center center,旧主题不受影响),StaticVersion +1
- 新增 ?dump=fit / ?dump=quality 自检,README 与 _scaffold.css 同步
2026-10-20 17:51:31 +08:00
tamakyi 937a8901b2 fix(theme-builder): 图层换不了图、背景关不掉、草稿清不掉
三个问题都是交互设计造成的,核心逻辑其实没坏(实测换图是生效的):

1. 「每层都只有这张图、换不了」
   - 加层时 l.asset 默认绑 S.assets[0],连加三层全是同一张;
   - 换图的下拉只在「选中那一层」的编辑器里,用户根本看不出每层能各自换。
   改为:新层不自动绑图(素材池只剩一张时才绑),每行带缩略图 + 「图片」下拉直接换。

2. 「背景图一直保留、关不掉」
   - 「跟随全局」状态下背景下拉是 disabled,用户在箱主页看到背景还在又点不动。
   改为:一律可点,一改就自动把这一页切成独立配置,并把全局当前值复制过来当起点
   (改背景不会顺带把图案和图层弄丢;图层重新发 id,避免两个作用域共用一批 id)。

3. 「上次的数据关闭后还在」
   - 之前只能靠隐藏参数 ?fresh=1 绕过 localStorage 草稿,UI 上没有出口。
   顶栏加「新建」:清空工程 + 删草稿,二次确认。

顺带:
- 「加一层」不再因 inherit 而 disabled(点了自动切独立),改为独立后若全局层数已达 10 会明确提示;
- 跟随全局时不给拖拽框 —— 那时 cfgOf 返回的是 global 对象,一拖就改到全局去了;
- 编辑器里删掉重复的图片下拉,只留尺寸。

回归:?dump=layers 全绿 —— 加层后 asset 为 [null,null]、行内下拉 2 个、
换第 2 层后 [null,blue] 且 CSS 只出现 blue;box 页 inherit 时 addDisabled/bgDisabled 均为 false;
在 box 加层后 inherit=false、本页 3 层而 **全局仍是 2 层**(没被污染);
新建后 assets 0、层 0、草稿删除、scope 回 global。
另外 ?dump=fx 13 项、?dump=validate 空、生成的 CSS 过 TestThemeCSSComplete + TestDecoSlotCount。
2026-10-20 15:56:59 +08:00
tamakyi c3d34b53d2 feat(theme-builder): 图片处理——透明度 / 压白 / 去色 / 裁边 / 去白底
素材卡片左上角 fx 按钮进处理面板,非破坏:
- orig 存上传时的原始字节(不重编码),fx 只存参数,每次从 orig 重算。
  「压白 16% → 20%」不会叠加两次压缩;打开看一眼就关一个像素都不动
  (参数没变直接跳过,有损编码反复走会累积模糊)。
- 预览按 420px 宽算(滑杆要跟手),完成时用全分辨率重算;加了序号丢弃过期结果,
  否则快速拖动时旧渲染会覆盖新的。

功能:
- 不透明度 0~100%(CSS 背景图没法单独设 opacity,只能烘焙)
- 压白 v×(1-k)+255×k,与主题里场景的雾度同一公式
- 去色、裁掉透明边
- 去白底:四边漫水 + 封闭白孔检测 + 可选 1px 收边

去白底两个坑(都写进注释了):
- 手内侧 / 两腿之间是闭合白区,四边漫水进不去,得按连通域单独掏(面积≥24)
- 容差默认 16 而不是 22:背景 253、白袜子 237 只差 16,
  容差 30 会把袜子吃穿成一个透明洞

验证(都是跑出来的,不是看缩略图):
- ?dump=fx 13 项算法断言全过:封闭孔开/关、容差 16 保袜子/30 吃穿、
  收边后轮廓 1px、alpha 50%→128、压白 20% 时 237→241、去色后 R=G=B、裁边 80×40
- ?dump=fxpipe 链路:弹窗开关、预览 300×960、参数重开后仍在、
  改参后 dataURL 变、无改动时 dataURL 一个字节不变
- ?dump=fxkey 端到端:白底立绘去白底后透明占比 46.3%,
  与手写 floodfill 抠的 46.6% 差 0.3%
- 生成 CSS 仍通过 TestThemeCSSComplete + TestDecoSlotCount

顺带:工程文件升到 v3(存 orig + fx,未处理时不重复存 dataURL),
读 v2 旧工程时把 dataURL 当 orig 用。新增 ?loadurl= 把项目里的图直接当素材载入。
2026-10-20 14:52:36 +08:00
tamakyi bf1c994c8f docs(memory): 生成器 P0 四项的实现要点与踩到的坑 2026-10-20 13:33:17 +08:00
tamakyi 8ffa7b0ba7 feat(theme-builder): 补 P0 四项——配置留得住、图层可排序、窄屏段、导出前校验
之前只能算「试一次」,关掉标签页全部配置丢失,导出的主题在手机上也是废的。

1) 配置持久化
- 每次改动 700ms 后写 localStorage,打开自动恢复;?fresh=1 从空白开始
- 「保存工程 / 打开工程」落成 theme-<slug>.json(图片 base64 内嵌,单文件可带走)
- zip 里也带一份 json,下次改不用从零搭
- 配额超了只提示一次,并指向 json

2) 图层上移/下移
顺序就是层级(background-image 第一层在最上),配反了以前只能删了重加。
列表标注「最上层 / 第 N 层」。

3) 窄屏段
新增窄屏配置:竖版背景图、隐藏装饰层、断点(默认 900px),导出生成 @media 块。
只写浅色规则——深色块特异性 0,2,1 > 0,1,1,本来就压住它。
实测 390 视口下首层装饰从 url(char.webp) 变成 none,1512 下不变。

4) 导出前校验
slug、图片层是否选了图、是否引用已删素材、层数是否超 10、
生成 CSS 的每处装饰是否真的 10 个值(和 Go 的 TestDecoSlotCount 同规则)。
有问题直接列出来,不用导出后再等 go test。

顺带:面板按使用频率重排(图层→背景→窄屏→图片池→配色);
拖拽框改成虚线+左上角标签,不再用半透明填充罩住人物;示例重复载入不再叠加素材。

验证:示例 CSS 通过 TestThemeCSSComplete + TestDecoSlotCount(27 处声明);
草稿往返(带 demo 保存 → 不带 demo 打开仍 validate 为空)实测通过。
2026-10-20 13:32:26 +08:00
tamakyi ddee221de2 feat(theme): 主题支持按页面分别配装饰,生成器改用真实页面画布
原来的生成器只能配「背景 + 人物 + 道具」三件套,预览还是自己画的仿制页面 ——
跟真实页面不像,也没法给不同页面配不同内容。

机制层:
- internal/context.pageScope() 按路径归类,输出 <html data-page-scope>:
  box / question / admin / profile / vote(首页与 /explore 不加载主题,不列)
- /user/questions 单独归为 admin:题目列表信息密,和设置表单的装饰诉求不同
- base.css 装饰槽位 6 -> 10,背景 8 层 -> 12 层;主题按作用域覆盖时同样写满 10 个
- 新增 TestDecoSlotCount:逐文件逐声明检查 10 个值。少写一个不报错,
  只会让图层与 size/position 错位(整页重复同一张图 / 人物跑到左上角),注释守不住

生成器:
- 画板改成 iframe 加载 outputs/preview-*.html(真实模板渲染),配 serve.py 起本地服务
  解决 file:// 下父页面读不到 iframe DOM 的问题
- 八个页面作用域(去掉不生效的首页/探索),每个可独立配背景与最多 10 层装饰
- 图层类型:图片 / 径向光斑 / 线性光;9 宫格锚点 + 像素偏移,可在画板上直接拖
- 位置统一写 calc(0%|50%|100% ± Npx):百分比是相对 (容器-图片),
  不用 left/bottom 关键字混搭,避免三值语法非法导致整条声明作废
- 配色只填 6 个基础色,其余 4 个必需令牌按方向派生(surface-2 往 text 靠,
  浅色变深、深色变亮,方向自动正确)

配套:
- zz_preview_test.go 增加单题页 / 题目列表 / 投票页预览,作为生成器画板
- docs/theme-page-scope.md 记录作用域取值、选择器特异性与 10 槽位约束
- StaticVersion 20261020e(base.css 变了)

验证:生成器导出的 CSS 通过 TestThemeCSSComplete + TestDecoSlotCount;
真实箱主页计算样式为 12 层对齐;临时主题验证「question 覆盖为 none」生效、
未覆盖时回退全局。
2026-10-20 10:53:44 +08:00
tamakyi feb5b1f78d feat(dev): 主题生成器——选图/拖位置/导出 zip
- dev/theme-builder/index.html:单文件、不联网、图片本地转 WebP
- 预览与线上同机制(pattern + 6 槽 deco + page-image),拖拽反解 calc(50% - Npx)
- 导出 CSS + 图片 + 安装说明,CSS 通过 TestThemeCSSComplete
- 自检:?selftest=1 吐 CSS/zip 字节,?demo=1 载入示例
2026-10-20 10:24:35 +08:00