修 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 内容变了，必须换缓存键，否则浏览器还会用旧文件）
This commit is contained in:
tamakyi
@@ -216,6 +216,14 @@ INSTALL-<slug>.txt
|
||||
2. `internal/conf/static.go` 的 `StaticVersion` +1；
|
||||
3. `go build`（模板与静态资源都是编译期 embed，只重启不重编不会变）。
|
||||
|
||||
设置页下拉里显示的**就是 slug**。想要中文/日文名，到 `internal/i18n/dict_*.go` 加
|
||||
`theme.name.<slug>` 词条（四份词典都要加）。不加也不会露 key —— 模板走 `themeName`
|
||||
函数，缺词条时回退成 slug（见 `internal/theme.DisplayName`）。
|
||||
|
||||
⚠️ **窄屏段导出前先看一眼「窄屏隐藏全部装饰层」有没有勾着**：勾着的话 `@media` 会把
|
||||
10 个槽位全写成 `none`，桌面完全正常、手机上一个素材都没有 —— 这是「素材在窄屏下消失」
|
||||
最常见的来源。现在勾选时面板会给橙色警告、图层行标「窄屏隐藏」、加层和导出时也会再提醒一次。
|
||||
|
||||
## 它不做什么
|
||||
|
||||
- **不做复杂修图**：没有笔刷、蒙版、自由裁切、调色曲线 —— 这些该在专门的工具里做完再进来。
|
||||
@@ -231,6 +239,7 @@ INSTALL-<slug>.txt
|
||||
|
||||
```
|
||||
?demo=1 载入示例素材（canvas 画的背景 + 剪影人物）
|
||||
?narrow=hide 直接落在「窄屏隐藏全部装饰层」状态（复现「素材在手机上不见了」）
|
||||
?rows=2 加 2 层并依次绑到不同素材（截图多图层效果用）
|
||||
?scope=admin 直接落在某个作用域
|
||||
?fresh=1 忽略 localStorage 草稿，从空白开始
|
||||
|
||||
@@ -1091,6 +1091,9 @@ function renderLayers(){
|
||||
const d = document.createElement('div');
|
||||
d.className = 'ly' + (l.id === S.curLayer ? ' on' : '');
|
||||
const a = l.kind === 'image' ? assetById(l.asset) : null;
|
||||
// 窄屏下这一层会不会消失：全局「全藏」优先，其次是层自己的策略。
|
||||
// 标出来是因为「素材在手机上不见了」绝大多数就是这个，而桌面预览完全正常。
|
||||
const mobOff = S.narrow.enabled && (S.narrow.hideDeco || (l.mob || 'inherit') === 'hide');
|
||||
const color = l.kind === 'image' ? '#5b9bd5' : l.kind === 'radial' ? '#d8a657' : '#9b7fd0';
|
||||
const thumb = l.kind !== 'image'
|
||||
? `<span class="th no" style="color:${color}">～</span>`
|
||||
@@ -1099,7 +1102,7 @@ function renderLayers(){
|
||||
d.innerHTML = `<div class="top">
|
||||
<i class="dot" style="background:${color}"></i>${thumb}
|
||||
<span class="nm">${esc(layerName(l))}</span>
|
||||
<span class="k">${i === 0 ? '最上层' : '第 ' + (i + 1) + ' 层'}</span>
|
||||
<span class="k">${i === 0 ? '最上层' : '第 ' + (i + 1) + ' 层'}${mobOff ? ' · 窄屏隐藏' : ''}</span>
|
||||
<button class="ord" data-up title="上移一层（更靠前）" ${i === 0 ? 'disabled' : ''}>↑</button>
|
||||
<button class="ord" data-down title="下移一层（更靠后）" ${i === cfg.layers.length - 1 ? 'disabled' : ''}>↓</button>
|
||||
<button class="x" data-del title="删除">×</button>
|
||||
@@ -1212,6 +1215,14 @@ function renderLayerEditor(l){
|
||||
row('窄屏', sel([['inherit','原样'],['scale',`缩小到 ${Math.round((S.narrow.scale||MOB_SCALE_DEFAULT)*100)}%`],['hide','隐藏']],
|
||||
l.mob || 'inherit', v => { l.mob = v; renderAll(); },
|
||||
'只在 @media 断点以下生效；缩小是把高度与偏移一起乘系数，位置锚点不变'));
|
||||
// 全局「全藏」开着时这一项不生效 —— 不写出来，用户会以为自己设的缩小没起作用
|
||||
if (S.narrow.enabled && S.narrow.hideDeco){
|
||||
const ntip = document.createElement('p');
|
||||
ntip.className = 'hint';
|
||||
ntip.style.color = '#e0a33e';
|
||||
ntip.textContent = '↑ 被「窄屏隐藏全部装饰层」覆盖，这一项当前不生效';
|
||||
box.appendChild(ntip);
|
||||
}
|
||||
|
||||
const a0 = assetById(l.asset);
|
||||
if (a0){
|
||||
@@ -1402,7 +1413,25 @@ function renderNarrowEditor(){
|
||||
row2.append(sp2, sel);
|
||||
el.appendChild(row2);
|
||||
|
||||
el.appendChild(mk('隐藏全部装饰层（急停）', n.hideDeco, v => { n.hideDeco = v; renderAll(); }));
|
||||
el.appendChild(mk('窄屏隐藏全部装饰层', n.hideDeco, v => { n.hideDeco = v; renderAll(); }));
|
||||
|
||||
// 这个开关一旦勾上，用户新加的素材在手机上也一起消失，而桌面预览完全正常
|
||||
// —— 是「素材在窄屏下不见了」最常见的来源。所以勾上时必须当场把后果写出来，
|
||||
// 不能只靠一个复选框的标题。
|
||||
if (n.hideDeco){
|
||||
let cnt = 0;
|
||||
SCOPES.forEach(sc => {
|
||||
const c = S.scopes[sc.k];
|
||||
if (sc.k !== 'global' && c.inherit) return;
|
||||
cnt += (c.layers || []).length;
|
||||
});
|
||||
const warn = document.createElement('p');
|
||||
warn.className = 'hint';
|
||||
warn.style.color = '#e0a33e';
|
||||
warn.textContent = `⚠ 断点以下 ${cnt} 层全不显示，新加的层也一样。`
|
||||
+ '要在手机上保留素材：取消勾选，改用每层「窄屏」。';
|
||||
el.appendChild(warn);
|
||||
}
|
||||
|
||||
const tip = document.createElement('p');
|
||||
tip.className = 'hint';
|
||||
@@ -1832,6 +1861,9 @@ function installTxt(slug){
|
||||
然后重新 go build —— 模板与静态资源都是编译期 embed，只重启不重编不会变。
|
||||
|
||||
4) 箱主设置页 → 账号 → 外观，选择「${slug}」
|
||||
下拉里显示的就是 slug。想要中文/日文名，到 internal/i18n/dict_*.go 加
|
||||
theme.name.${slug} 词条（四份词典都要加）。不加也不会显示成 key ——
|
||||
模板函数 themeName 会回退成 slug。
|
||||
|
||||
页面作用域
|
||||
----------
|
||||
@@ -1841,8 +1873,11 @@ ${own}
|
||||
----
|
||||
${S.narrow.enabled
|
||||
? `已导出 @media (max-width: ${S.narrow.maxWidth}px)：${S.narrow.bg ? '换成竖版背景图' : '背景沿用桌面'}`
|
||||
+ `${S.narrow.hideDeco ? ' + 隐藏全部装饰层' : ''}`
|
||||
+ `\n 缩放系数 ${Math.round((S.narrow.scale || MOB_SCALE_DEFAULT) * 100)}%（作用于策略为「缩小」的层）`
|
||||
+ (S.narrow.hideDeco
|
||||
? '\n ⚠ 「窄屏隐藏全部装饰层」已勾选：断点以下所有素材都不显示（桌面正常）。\n'
|
||||
+ ' 想保留就把这个勾去掉，改用每层「窄屏 = 原样 / 缩小」。'
|
||||
: '')
|
||||
: '未导出窄屏规则（桌面装饰会在手机上被卡片盖住 / 背景被 cover 裁成一条）'}
|
||||
|
||||
尺寸适配
|
||||
@@ -1911,12 +1946,26 @@ function doExport(){
|
||||
setTimeout(() => URL.revokeObjectURL(a.href), 4000);
|
||||
const fmt = kb => kb >= 1024 ? (kb / 1024).toFixed(2) + 'MB' : kb + 'KB';
|
||||
const over = overflowReport();
|
||||
// 窄屏全藏是「素材不见了」的头号原因，导出时必须写进结果里 ——
|
||||
// 用户只看桌面预览是发现不了的。
|
||||
let narrowNote = '';
|
||||
if (S.narrow.enabled && S.narrow.hideDeco){
|
||||
let cnt = 0;
|
||||
SCOPES.forEach(sc => {
|
||||
const c = S.scopes[sc.k];
|
||||
if (sc.k !== 'global' && c.inherit) return;
|
||||
cnt += (c.layers || []).length;
|
||||
});
|
||||
narrowNote = `\n\n⚠ 窄屏规则（≤${S.narrow.maxWidth}px）会隐藏全部 ${cnt} 层装饰。`
|
||||
+ '这是「窄屏隐藏全部装饰层」勾选的结果；要在手机上保留素材就取消它，改用每层「窄屏」策略。';
|
||||
}
|
||||
out(`已导出 theme-${slug}.zip（${files.length} 个文件，${fmt(Math.round(blob.size / 1024))}；`
|
||||
+ `其中 ${imgN} 张图共 ${fmt(imgKB)}）。\n`
|
||||
+ `解压到项目根，按 INSTALL-${slug}.txt 走三步；包里的 theme-${slug}.json 是工程源文件，下次用「打开工程」接着改。`
|
||||
+ (over.length ? `\n\n⚠ ${over.length} 处素材在部分视口下会被裁（不阻止导出，供你判断）：\n`
|
||||
+ over.slice(0, 6).map(s => '· ' + s).join('\n')
|
||||
+ (over.length > 6 ? `\n…… 另有 ${over.length - 6} 处` : '') : ''), over.length ? 'w' : 'ok');
|
||||
+ (over.length > 6 ? `\n…… 另有 ${over.length - 6} 处` : '') : '')
|
||||
+ narrowNote, (over.length || narrowNote) ? 'w' : 'ok');
|
||||
}
|
||||
|
||||
/** 全站扫一遍：哪些层在预设视口下会溢出被裁。
|
||||
@@ -2553,6 +2602,9 @@ function boot(){
|
||||
if (kind === 'image' && !l.asset){
|
||||
log('新图层还没选图片 —— 在这一层的「图片」下拉里挑一张', 'w');
|
||||
}
|
||||
if (S.narrow.enabled && S.narrow.hideDeco){
|
||||
log('注意：「窄屏隐藏全部装饰层」开着 —— 这一层在手机/窄窗口下也不会显示', 'w');
|
||||
}
|
||||
};
|
||||
$('btn-save').onclick = () => {
|
||||
const errs = validate();
|
||||
@@ -2603,6 +2655,12 @@ function boot(){
|
||||
window.addEventListener('resize', fitStage);
|
||||
|
||||
if (params.get('demo')) makeDemo();
|
||||
// ?narrow=hide 直接落在「窄屏隐藏全部装饰层」状态：截图与回归用。
|
||||
// 这个状态是「素材在手机上不见了」最典型的来源，得能一键复现。
|
||||
if (params.get('narrow') === 'hide'){
|
||||
S.narrow.hideDeco = true;
|
||||
renderAll();
|
||||
}
|
||||
// ?rows=N 加 N 层并依次绑到不同素材（截图 / 人工核对多图层效果用）
|
||||
const rows = parseInt(params.get('rows') || '0', 10);
|
||||
for (let i = 0; i < rows; i++){
|
||||
|
||||
Reference in New Issue
Block a user