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。
This commit is contained in:
@@ -51,6 +51,14 @@ http://127.0.0.1:8777/dev/theme-builder/
|
||||
默认全部「跟随全局」;勾掉就变成独立配置,导出时才会产出覆盖块。
|
||||
没配的页面自动沿用全局,不会出现「某页装饰消失」。
|
||||
|
||||
以前「跟随全局」时背景下拉和「加一层」都是 disabled —— 用户在箱主页看到背景还在、
|
||||
又点不动,这就是「背景图关不掉」的来源。现在:
|
||||
|
||||
- 「加一层」「改背景」永远可点,**一改就自动把这一页切成独立配置**,并把全局当前值复制过来当起点
|
||||
(改背景不会顺带把图案和图层弄丢;图层重新发 id,避免两个作用域共用一批 id,拖拽/高亮会串);
|
||||
- 这种状态下图层列表不展示全局的层、也不给拖拽框 —— 否则一拖就改到全局去了;
|
||||
- 想主动切换用「跟随全局」复选框,或用列表里的「改为独立配置」按钮。
|
||||
|
||||
(首页 `/` 与 `/explore` 不列出来 —— 全站公开页不注入 `ThemeSlug`,不加载主题 css,配了也没效果。)
|
||||
|
||||
**装饰图层** —— 每个作用域最多 10 层,三种类型:
|
||||
@@ -61,6 +69,11 @@ http://127.0.0.1:8777/dev/theme-builder/
|
||||
|
||||
锚点用 9 宫格 + 像素偏移,生成 `calc(0% + 40px) calc(100% - 36px)` 这种两值形式。
|
||||
|
||||
**每一行都能直接换图**:行里带缩略图 + 「图片」下拉,一眼看到这层用的是哪张。
|
||||
之前换图的下拉只出现在「选中那一层」的编辑器里,加上新层又默认绑第一张素材,
|
||||
连加三层就全是同一张图,看起来像「每层只能显示这张、换不了」。
|
||||
现在新加的层**不会**自动绑第一张(只有素材池只剩一张时才绑),行里显示「(选图片)」等你选。
|
||||
|
||||
**↑ / ↓ 调层级**。顺序就是层级:`background-image` 的第一层画在最上面,
|
||||
所以「谁挡住谁」是靠顺序定的(shiroko 里自行车被人挡住就是这么来的)。
|
||||
|
||||
@@ -98,6 +111,8 @@ http://127.0.0.1:8777/dev/theme-builder/
|
||||
|
||||
调主题是连续几十次的活,所以配置必须留得住:
|
||||
|
||||
- **新建**:顶栏按钮,清空当前工程并删掉浏览器草稿(有二次确认)。
|
||||
之前只有 `?fresh=1` 这个隐藏参数 —— 用户看到「上次的数据」一直在,就会以为关不掉。
|
||||
- **自动草稿**:每次改动后 700ms 存进 `localStorage`,下次打开自动恢复。
|
||||
图片多到顶破 5MB 配额时会提示改用 json(只提示一次)。
|
||||
- **保存工程 / 打开工程**:`theme-<slug>.json`,图片以 base64 内嵌,一个文件就能带走;
|
||||
@@ -139,6 +154,7 @@ INSTALL-<slug>.txt
|
||||
|
||||
```
|
||||
?demo=1 载入示例素材(canvas 画的背景 + 剪影人物)
|
||||
?rows=2 加 2 层并依次绑到不同素材(截图多图层效果用)
|
||||
?scope=admin 直接落在某个作用域
|
||||
?fresh=1 忽略 localStorage 草稿,从空白开始
|
||||
?dump=css 把最终 CSS 写进 <pre id="dump">
|
||||
@@ -147,6 +163,7 @@ INSTALL-<slug>.txt
|
||||
?dump=install 把安装说明写进 <pre id="dump">
|
||||
?dump=fx 跑处理算法自检(13 个断言,输出 JSON)
|
||||
?dump=fxpipe 跑弹窗链路冒烟(打开→改参→预览→落盘→无改动不重编码)
|
||||
?dump=layers 图层/作用域回归(加层默认不绑图、行内换图、自动切独立、新建清空)
|
||||
?dump=fxkey 端到端去白底:载入白底图,统计透明像素比例
|
||||
?loadurl=/static/images/x.webp&fx=x
|
||||
直接把项目里的图当素材载入(不必先下载再上传),fx= 打开处理面板
|
||||
|
||||
Reference in New Issue
Block a user