tamakyi
feb5b1f78d
- dev/theme-builder/index.html：单文件、不联网、图片本地转 WebP - 预览与线上同机制（pattern + 6 槽 deco + page-image），拖拽反解 calc(50% - Npx) - 导出 CSS + 图片 + 安装说明，CSS 通过 TestThemeCSSComplete - 自检：?selftest=1 吐 CSS/zip 字节，?demo=1 载入示例
2.3 KiB
2.3 KiB
主题生成器（本地单文件）
index.html 双击即用，不联网、不起服务、不传图片——所有处理都在浏览器本地完成。
用法
- 打开
dev/theme-builder/index.html（推荐 Chrome / Edge）。 - 填 slug（= css 文件名，小写字母/数字/连字符）。
- 传图：
- 背景图：任意尺寸，会按
cover裁成 1920×1080； - 人物：透明底 PNG/WebP，会按高度 1.5× 输出；
- 道具（可选）：透明底，会自动在底部烘一层接触阴影。
- 背景图：任意尺寸，会按
- 拖预览里的虚线框调位置，或右侧滑杆微调；切 1512 / 1280 / 1024 看不同视口。
- 点「导出 zip」→ 解压到项目根目录 → 按 zip 里的
INSTALL-<slug>.txt做三步（登记[theme] available、StaticVersion+1、重新编译）。
它做了什么
- 用和线上同一套机制渲染预览：
background-image: pattern, deco(6 层), page-image，background-size/background-position一一对应，不是另画一张示意图。 - 位置数学和 CSS 一致：
background-position的百分比是相对 (容器宽 − 图宽)， 所以工具里拖出来的「左沿像素」会被反解成calc(50% - Npx)，换视口不会跑位。 - 图片全部转 WebP 并按目标尺寸重采样，导出前就能看到 KB 数。
- 生成的 CSS 同时写浅色/深色两块（项目测试
TestThemeCSSComplete要求）， 10 个必需令牌齐全。
它不做什么
- 不抠图。人物/道具必须是透明底；白底图导出的主题会带一块白。
- 不做调色。想统一"雾度"（人物压白 16%、场景 30~38%）得在生成端做，
或用
docs/theme-shiroko-assets-spec.md里的公式自己处理。 - 不写
[theme] available。配置在conf/app.ini，导出包里只给了要粘贴的那一行。 - 不改代码。素材是编译期 embed，必须重新
go build才会生效。
自检
chrome --headless=old --dump-dom "file:///.../dev/theme-builder/index.html?selftest=1"
会把生成的 CSS 与 zip 字节以 JSON 塞进 <pre id="selftest">，可用于回归：
把 css 写成 static/css/themes/<slug>.css，跑 go test ./internal/theme -run TestThemeCSSComplete。
?demo=1 会直接载入示例素材（纯 canvas 画的渐变背景 + 一个剪影），没有图也能先看布局。