tamakyi/tamabox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
95 Commits 1 Branch 0 Tags
734aa7b8c370c9e8b62b734bba40f76dfa90b034
Commit Graph
10 Commits
Author SHA1 Message Date
tamakyi 6c21184733 主题生成器支持素材前缀（主题素材可放 R2/OSS） 
主题素材只有一处引用：主题 css 的 url()（分享卡是 Go 用 imaging 画的，不读素材），
所以只要让 CSS 里的地址指向对象存储即可。

- 导出面板新增「素材前缀」：空 = /static/images/themes/<slug>/（图片随二进制发布，与以前一致）；
  填 https://cdn.example.com/themes = CSS 写绝对 URL，zip 里的图片改为「上传用」
- 地址统一由 urlOf() 决定。修了一个重复实现：layerCSS 里复制过一份路径拼接，
  只改 urlOf 会出现「背景走 CDN、装饰还指本地」
- 前缀随意切换不影响预览（预览恒用内联 dataURL）；存进工程 json；?assetbase= 可自检
- INSTALL 文案按是否托管分叉，写清图片传到哪、换域名要重新导出
- 新增 docs/theme-assets-cdn.md：三种做法（生成器前缀 / 应用内 301 / 边缘改写）、
  缓存与 ?v=、CORS 不需要、深色无素材、迁移用的 sed 命令
- README 更新；UI 修正：240px 面板里 4 字标签会被 flex 压窄，需 flex:0 0 auto + 84px
 2026-10-21 19:32:55 +08:00
tamakyi 27856dd4a2 字号阶梯收尾 + 主色补到 WCAG AA（新增 --tb-on-primary） 
一号事项（剩余令牌化）：
- templates/user/profile.html 20 处、base.css 9 处 font-size 全部落到 --tb-fs-*
- base.css 导航四档（0.95/0.88/0.82/0.78）合并成「桌面 md → ≤1000 xs」；logo 三档统一 lg
- 有理由保留的：.tb-pin-flag / .md-body code 的 0.9em（相对父级）、验证码 1.4/1.2rem（等宽字形）、
  chat 关闭按钮 40px、password 页 3em、mail/*（邮件客户端不保证 var()）；行内 12px/0.75rem 等值顺手换掉

二号事项（主色对比度）：
- base/default #1e87f0(3.42) → #0e6fd0(4.70)；shiroko #4a7fc1(3.69) → #3b6dac(4.74)；
  sakura #e5678f(2.80) → #ba3e66(4.70，饱和度压到 .5 保持柔和)。同色相只压亮度，目标 4.7 留余量
- 深色块 muted 之前只对 --tb-bg 算（4.7 以为过了），对压平后的卡片其实 4.31/4.17 → 提到 #a18790 / #7f8ea1
- 新增 --tb-on-primary（亮 #ffffff / 暗 #0b1016）：深色模式主色偏亮，白字只有 2.2~3.1:1，
  用同一个令牌兼顾「链接色要深」和「按钮底要深」是矛盾的。.uk-button-primary 与
  .uk-label:not(语义色) 改吃它 → 深色按钮变成浅底深字（6.10 / 8.65 / 7.27）
- 顺手封掉几处主色泄漏：header 验证码 focus、profile .feat-day.is-on、explore 随机投票的 JS outline、
  vote-results 行内色，全部改成令牌（否则换主题时不跟着变）

生成器同步：paletteVars 导出 --tb-on-primary（白字/深字择优）；?dump=palette 增加
onPrimaryCr / onPrimaryPickedBest / warnings —— 主色卡中间调时只警告不判失败；
配色面板给橙色提示。_scaffold 令牌 29 → 30。StaticVersion → 20261021c。

验证：TestSwatch 断言同步为 #ba3e66；8 种组合（base 亮暗 + 三主题亮暗）对比度全部 ≥4.5；
go test internal/{theme,templates,conf,i18n} 全绿；生成器 validate/fit/quality/palette/layers/fx/fxpipe 全过。
 2026-10-21 18:39:08 +08:00
tamakyi db4b3fa095 主题体系跟上设计令牌化：派生文字色按对比度下限、主题 muted 补到 AA 
生成器（dev/theme-builder）：
- paletteVars 的 text-secondary/text-muted 从「往底色混 36%/55%」改成 mixToContrast(5.5/4.5)：二分找最淡且达标的位置，文字本身不达标就原样返回
- 半透明卡片先 flatten 压平到底色再算对比度；参考背景取「页面底色 + 压平后的卡片」中更不利的
- 配色面板加读数（正文/次要/淡文字/主色），低于 4.5 变橙；默认 primary #4a7fc1(3.69) → #3d6fac(4.63)
- 新增 ?dump=palette 四种配色回归；README 补配色一节

主题/base（含用户本轮 base.css 改动）：
- sakura muted #a08c94(2.8:1) → #78696e(4.61)、shiroko #8794a7(2.76:1) → #656e7a(4.63)：主题覆盖令牌，基座的 AA 修复到不了主题页
- 深色顶栏链接补 secondary 覆盖：亮色块已是次要文字色，深色块原来 !important 定成正文色，同一顶栏权重跳一档
- _scaffold.css 令牌清单 23 → 29（补 fs 阶梯与 page-position），muted 说明 AA 下限
- StaticVersion 20261021a → 20261021b
 2026-10-21 17:42:43 +08:00
tamakyi 6c014b3ad2 修 test01：窄屏装饰全藏导致素材消失、主题名显示成 i18n key 
- 生成器：勾「窄屏隐藏全部装饰层」时给橙色警告（几层会消失）、图层行标「窄屏隐藏」、加层与导出结果再提醒；「窄屏」下拉在被全藏覆盖时标注不生效
- 新增 ?narrow=hide 复现该状态（这是「素材在手机上看不到」的头号来源：@media 把 10 槽全写 none，桌面完全正常）
- 主题名：新增 theme.DisplayName + 模板函数 themeName，i18n 未登记 theme.name.<slug> 时回退 slug；原来模板直接调用 i18n.T，缺词条就显示 "theme.name.test01"
- test01.css 删掉 @media 全 none 段：装饰是 fit 单位，浏览器会自己按视口缩，不需要这段
- StaticVersion → 20261020g（主题 css 内容变了，必须换缓存键，否则浏览器还会用旧文件）
 2026-10-20 18:23:21 +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 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