tamakyi/tamabox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

主题生成器：素材尺寸按视口自适应 + 导出画质可调

Browse Source 
- 尺寸单位 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 同步
This commit is contained in:
tamakyi
2026-10-20 17:51:31 +08:00
parent d2a5177afe
commit 4bd600fb46
7 changed files with 906 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev/theme-builder/index.html
+646 -78
View File
@@ -225,11 +225,16 @@
<section>
<h2>图片池 <span class="r"><button id="add-asset">上传</button></span></h2>
<div class="assets" id="assets"></div>
<p class="hint">透明底 PNG / WebP 最好。上传后自动转 WebP，画布尺寸即自然尺寸。</p>
<p class="hint">透明底 PNG / WebP 最好。上传后按下面的画质设置转 WebP。</p>
<input type="file" id="file" accept="image/*" multiple hidden>
<input type="file" id="projfile" accept=".json,application/json" hidden>
</section>
<section>
<h2>导出画质</h2>
<div id="export-editor"></div>
</section>
<section>
<h2>配色</h2>
<div class="pal" id="palette"></div>
@@ -298,7 +303,25 @@ const SCOPES = [
{k:'vote', label:'投票页', desc:'/vote/{token}', page:'vote'},
];
const SLOT = 10; // 装饰层槽位数，必须与 internal/theme.DecoSlots 一致
const VIEWPORTS = [1512, 1280, 1024, 820];
/* 视口预设带高度：桌面主题几乎全部按「宽」调，但装饰层的裁切是「高」决定的
—— 同一个 400px 立绘在 900 高的笔记本上占 44%，在 768 的旧笔电上占 52%，贴底时就开始吃人物。
列表里放一档真机竖屏尺寸，才能当场看见「手机上被裁成一条」。 */
const VIEWPORTS = [
{ w: 1512, h: 900, label: '1512×900 桌机' },
{ w: 1280, h: 800, label: '1280×800 笔记本' },
{ w: 1024, h: 768, label: '1024×768 小笔电' },
{ w: 820, h: 1180, label: '820×1180 平板竖' },
{ w: 390, h: 844, label: '390×844 手机' },
];
const vpOf = w => VIEWPORTS.find(v => v.w === w) || VIEWPORTS[0];
/* 自适应尺寸的设计基准视口高：`fit` 单位把「当前 h」当成 900 高下的效果，
视口更高就封顶、更矮就等比缩小（下限 55%），一次解决「小屏被裁、大屏太小」。 */
const DESIGN_H = 900;
/* `fitw` 按宽度自适应的基准视口宽（桌机档）。宽幅素材（横幅、整屏插画）只能按宽缩：
按高度缩的话宽度会跟着比例涨，1280 的笔记本上照样裁两侧。 */
const DESIGN_W = 1512;
const MOB_SCALE_DEFAULT = 0.62;
/* 默认配色/窄屏抽出来，「新建」时能原样还原；S 里存的是副本，不会被重置污染 */
const D = {
@@ -306,10 +329,13 @@ const D = {
bg:'#eef3f9', surface:'rgba(255,255,255,0.86)', navbar:'rgba(255,255,255,0.52)',
text:'#222d3b', primary:'#4a7fc1', border:'#d6e0ec',
},
/* 窄屏：手机是「卡片占满宽度」，桌面那套 16:9 场景会被 cover 裁成一条无意义纹理，
固定 px 的人物也会被卡片盖住。所以窄屏要么换竖版图，要么直接退场。
这一份是全局的（不分页面）—— 窄屏的问题是空间不够，各页面诉求差别不大。 */
narrow: { enabled: true, bg: null, hideDeco: true, maxWidth: 900 },
/* 窄屏：手机是「卡片占满宽度」，桌面那套 16:9 场景会被 cover 裁成一条无意义纹理。
这一份是全局的（不分页面）—— 窄屏的问题是空间不够，各页面诉求差别不大。
scale 是「每层策略选缩放」时的系数；hideDeco 是「一次全藏」的快捷开关。 */
narrow: { enabled: true, bg: null, hideDeco: false, maxWidth: 900, scale: MOB_SCALE_DEFAULT },
/* 导出画质：webp 体积 ≈ 像素数 × 质量。压体积最有效的不是 q，是先砍像素
—— CSS 里显示 400px 高的图，2 倍屏只需要 800px，上传 3000px 的立绘纯属白扛。 */
export: { quality: 0.88, maxSide: 1600 },
dark: {
bg:'#141a22', surface:'#1d2530', navbar:'#141a22',
text:'#e3eaf4', primary:'#6fa3e0', border:'#334052',
@@ -327,6 +353,7 @@ const S = {
scopes: {},
palette: Object.assign({}, D.palette),
narrow: Object.assign({}, D.narrow),
export: Object.assign({}, D.export),
dark: Object.assign({}, D.dark),
};
@@ -336,7 +363,8 @@ const PALETTE_KEYS = [
];
function blankScope(k){
return { inherit: k !== 'global', bg: null, pattern: null, patternSize: '320px 320px', layers: [] };
return { inherit: k !== 'global', bg: null, pattern: null, patternSize: '320px 320px',
bgPos: 'center center', layers: [] };
}
SCOPES.forEach(s => { S.scopes[s.k] = blankScope(s.k); });
@@ -371,17 +399,121 @@ function cfgOf(k){
/* ---------------------- 位置 / 尺寸 → CSS ---------------------- */
/* background-position 的百分比是相对 (容器 - 图片)，不是相对容器。
统一写成 calc(0%|50%|100% + Npx) 两值形式：0% = 左/上对齐，50% = 居中，100% = 右/下对齐。
统一写成 calc(0%|50%|100% ± N) 两值形式：0% = 左/上对齐，50% = 居中，100% = 右/下对齐。
不用 left/top 关键字，是因为「水平居中 + 垂直贴底」会变成三值/四值语法，
一旦不合规范整条声明作废，图层会静默掉到左上角。 */
function axisPos(anchor, off){
const unitOf = l => (l.unit === 'fit' || l.unit === 'vh') ? 'vh'
: (l.unit === 'fitw') ? 'vw' : 'px';
function axisPos(anchor, off, unit){
const pct = anchor === 'center' ? '50%' : (anchor === 'start' ? '0%' : '100%');
const n = Math.round(off);
// 自适应/视口单位下偏移也跟着缩：贴底 36px 在 844 高的手机上应该是 34px 左右，
// 写死 px 会让小屏的留白看起来突然大了一截
const base = unit === 'vw' ? DESIGN_W : DESIGN_H;
const vunit = unit === 'vw' ? 'vw' : 'vh';
const mag = (unit === 'vh' || unit === 'vw')
? (+(Math.abs(off) / base * 100).toFixed(2)) + vunit
: Math.abs(Math.round(off)) + 'px';
if (!off) return `calc(${pct} + 0px)`;
// 写成 calc(100% - 36px) 而不是 calc(100% + -36px)：后者虽然合法，
// 但用 calc 手算时容易被误读成「加负数」，见过的样式事故都出在这种地方。
return n < 0 ? `calc(${pct} - ${-n}px)` : `calc(${pct} + ${n}px)`;
return off < 0 ? `calc(${pct} - ${mag})` : `calc(${pct} + ${mag})`;
}
/** 横向偏移在 fitw 下按 vw 缩，其余情况跟纵向一起按 vh 缩。 */
const POS = l => {
const u = unitOf(l);
return `${axisPos(l.ah, l.dx, u === 'vw' ? 'vw' : u)} `
+ `${axisPos(l.av, l.dy, u === 'vw' ? 'vh' : u)}`;
};
/** 尺寸单位 → 某视口下应有的像素宽高。
layerSize 出 CSS、layerMetrics 出预览框，两者都从这里取值：
各算一套迟早会漂，表现就是「框显示没超、图已经被裁」。
下限取「基准的 55%」与「视口 - 24px」中更小的那个 —— 屏幕小到连 55% 都放不下时，
让位给视口，这样自适应单位永远不会把图撑出屏幕。 */
const FIT_PAD = 24;
function unitGeom(l, ratio, VW, VH){
const h0 = Math.max(1, Math.round(l.h) || 200);
const w0 = l.w > 0 ? Math.round(l.w) : Math.round(h0 * ratio);
if (l.unit === 'vh'){
const h = h0 / DESIGN_H * VH;
return { w: h * ratio, h };
}
if (l.unit === 'fit'){
const lo = Math.max(40, Math.min(h0 * 0.55, VH - FIT_PAD));
const h = Math.min(h0, Math.max(lo, h0 / DESIGN_H * VH));
return { w: h * ratio, h };
}
if (l.unit === 'fitw'){
const lo = Math.max(40, Math.min(w0 * 0.55, VW - FIT_PAD));
const w = Math.min(w0, Math.max(lo, w0 / DESIGN_W * VW));
return { w, h: w / ratio };
}
return { w: w0, h: h0 };
}
/** 尺寸 → background-size。
只定一个维度，另一个交给 `auto` 让浏览器按图片自身比例算：少一个可以填错的数，
也保证缩放时绝不发生横向拉伸。`px` 模式保留手填宽度（宽高比可以故意改）。 */
function layerSize(l, a){
const ratio = (a && a.h) ? (a.w / a.h) : 1;
const h0 = Math.max(1, Math.round(l.h) || 200);
const w0 = l.w > 0 ? Math.round(l.w) : Math.round(h0 * ratio);
if (l.unit === 'vh') return `auto ${+(h0 / DESIGN_H * 100).toFixed(2)}vh`;
if (l.unit === 'fit'){
const lo = Math.round(h0 * 0.55), hi = h0;
// clamp 的 min 若 ≥ max，浏览器按 min 处理 —— 图反而比设定值还大，所以先兜住
if (lo >= hi) return `auto ${hi}px`;
// 下限再和「视口高 - 24px」取小值：小屏上 55% 仍放不下时自动让位
return `auto clamp(min(calc(100vh - ${FIT_PAD}px), ${lo}px), `
+ `${+(h0 / DESIGN_H * 100).toFixed(2)}vh, ${hi}px)`;
}
if (l.unit === 'fitw'){
const lo = Math.round(w0 * 0.55), hi = w0;
if (lo >= hi) return `${hi}px auto`;
return `clamp(min(calc(100vw - ${FIT_PAD}px), ${lo}px), `
+ `${+(w0 / DESIGN_W * 100).toFixed(2)}vw, ${hi}px) auto`;
}
return l.w > 0 ? `${w0}px ${h0}px` : `auto ${h0}px`;
}
/** 某一层在给定视口下「实际占多大、落在哪」。拖拽框、溢出检测、导出 CSS 共用。 */
function layerMetrics(l, a, VW, VH){
const ratio = (a && a.h) ? (a.w / a.h) : 1;
const g = unitGeom(l, ratio, VW, VH);
const w = g.w, h = g.h;
const px = l.ah === 'center' ? 0.5 : (l.ah === 'start' ? 0 : 1);
const py = l.av === 'center' ? 0.5 : (l.av === 'start' ? 0 : 1);
const u = unitOf(l);
// 偏移与尺寸同单位缩放（fitw 横向按 vw、纵向按 vh）
const kx = u === 'vw' ? VW / DESIGN_W : (u === 'vh' ? VH / DESIGN_H : 1);
const ky = u === 'px' ? 1 : VH / DESIGN_H;
const left = (VW - w) * px + l.dx * kx;
const top = (VH - h) * py + l.dy * ky;
return {
w, h, left, top,
overL: Math.max(0, -left),
overR: Math.max(0, left + w - VW),
overT: Math.max(0, -top),
overB: Math.max(0, top + h - VH),
};
}
/** 一键按当前视口修好：改成固定 px，取「宽不超 96%、高不超 92%」的那个尺寸。
fit / fitw 只能按单一维度缩，遇到极端比例仍会裁；给一个算好的确定值，
比让人自己试 clamp 快得多。窄屏交给「窄屏」策略，不要指望一个 px 值通吃。 */
function fitToViewport(l, a, vp){
const ratio = a.w / a.h;
const h = Math.max(20, Math.min(Math.round(l.h) || 200,
Math.floor(vp.h * 0.92), Math.floor(vp.w * 0.96 / ratio)));
l.unit = 'px';
l.h = h;
if (l.w > 0) l.w = Math.round(h * ratio);
if (l.av !== 'center'){ l.av = 'center'; l.dy = 0; }
renderAll();
applyTheme();
log(`已按 ${vp.w}×${vp.h} 调整为 ${Math.round(h * ratio)}×${h}px（固定 px，更窄的屏请用「窄屏」策略）`, 'ok');
}
const POS = l => `${axisPos(l.ah, l.dx)} ${axisPos(l.av, l.dy)}`;
function rgba(hex, a){
const h = hex.replace('#','');
@@ -395,9 +527,7 @@ function layerCSS(l, preview){
const a = assetById(l.asset);
if (!a) return {image:'none', size:'auto', position:'left top'};
const url = preview ? a.dataURL : `/static/images/themes/${S.slug}/${a.id}.webp`;
const h = Math.round(l.h) || 200;
const w = l.w > 0 ? Math.round(l.w) : Math.round(a.w * h / a.h);
return { image:`url("${url}")`, size:`${w}px ${h}px`, position: POS(l) };
return { image:`url("${url}")`, size: layerSize(l, a), position: POS(l) };
}
if (l.kind === 'radial'){
const c = rgba(l.color, l.alpha);
@@ -418,6 +548,8 @@ function newLayer(kind){
id: uid('L'), kind,
ah:'center', av:'end', dx:0, dy:-40,
h:360, w:0, asset:null,
// unit 默认 fit：固定 px 的立绘在小屏必被裁，默认值就该是「不容易出错」的那个
unit:'fit', mob:'inherit',
color:'#fff8e4', alpha:0.55, r:320, cx:50, cy:50,
angle:112, stop:44,
};
@@ -435,14 +567,38 @@ function bgVars(cfg, preview){
` --tb-page-image: ${img ? `url("${urlOf(img, preview)}")` : 'none'};`,
` --tb-page-pattern: ${pat ? `url("${urlOf(pat, preview)}")` : 'none'};`,
` --tb-page-pattern-size: ${cfg.patternSize || '320px 320px'};`,
// 背景图是 cover：宽高比不匹配就必裁。焦点决定「裁掉哪一边」——
// 16:9 场景在竖屏上只能留中间一条，把焦点挪到人物那一侧才不至于裁到脸。
` --tb-page-position: ${cfg.bgPos || 'center center'};`,
].join('\n');
}
function decoVars(cfg, preview){
/** 窄屏下某一层的三个值（图片 / 尺寸 / 位置）。
策略来自图层自己的 mob，全局 hideDeco 高于一切（那是「一次全藏」的急停开关）。 */
function decoMobile(l){
if (!l) return null;
if (S.narrow.hideDeco) return null;
const mob = l.mob || 'inherit';
if (mob === 'hide') return null;
if (mob === 'scale' && l.kind === 'image'){
const s = clamp(Number(S.narrow.scale) || MOB_SCALE_DEFAULT, 0.2, 1);
return Object.assign({}, l, {
h: Math.max(1, Math.round((Math.round(l.h) || 200) * s)),
w: l.w > 0 ? Math.round(l.w * s) : 0,
dx: Math.round(l.dx * s),
dy: Math.round(l.dy * s),
});
}
return l;
}
function decoVars(cfg, preview, mobile){
const layers = cfg.layers.slice(0, SLOT);
const imgs = [], sizes = [], poss = [];
for (let i = 0; i < SLOT; i++){
const l = layers[i];
const raw = layers[i];
const l = mobile ? decoMobile(raw) : raw;
// 隐藏的层必须把 image 一起写成 none：只清 size 会留一张按 auto 尺寸铺开的原图
if (!l){ imgs.push('none'); sizes.push('auto'); poss.push('left top'); continue; }
const c = layerCSS(l, preview);
imgs.push(c.image); sizes.push(c.size); poss.push(c.position);
@@ -548,19 +704,34 @@ function buildCSS(preview){
// 窄屏段：只写浅色规则。深色块特异性更高（0,2,1 > 0,1,1），
// 本来就压住这里，不需要再为深色写一份 —— 少一层嵌套少一处出错。
// 注意 `fit` / `vh` 单位本身就是视口相对的，浏览器会自己缩，不需要这里插手；
// 这一段只负责「换竖版图」「某层要缩小或退场」这类必须改值的事。
const nb = S.narrow.bg ? assetById(S.narrow.bg) : null;
if (S.narrow.enabled && (nb || S.narrow.hideDeco)){
const hasMob = SCOPES.some(sc => {
const c = S.scopes[sc.k];
if (sc.k !== 'global' && c.inherit) return false;
return (c.layers || []).some(l => (l.mob || 'inherit') !== 'inherit');
});
if (S.narrow.enabled && (nb || S.narrow.hideDeco || hasMob)){
L.push('');
L.push('/* 窄屏：卡片占满宽度，两侧没有留白，桌面那套背景与装饰在这里只会被裁/被盖 */');
L.push('/* 窄屏：卡片几乎占满宽度，两侧没有留白，桌面那套背景与装饰在这里只会被裁/被盖。');
L.push(' 每个独立配置的页面都要写一条 —— 页面覆盖块特异性更高（0,2,1），');
L.push(' 只写 html[data-theme-style] 的话，独立配置的页面在手机上根本不生效。 */');
L.push(`@media (max-width: ${S.narrow.maxWidth || 900}px) {`);
L.push(` html[data-theme-style="${slug}"] {`);
if (nb) L.push(` --tb-page-image: url("${urlOf(nb, preview)}");`);
if (S.narrow.hideDeco){
L.push(' --tb-deco: ' + Array(SLOT).fill('none').join(', ') + ';');
L.push(' --tb-deco-size: ' + Array(SLOT).fill('auto').join(', ') + ';');
L.push(' --tb-deco-position: ' + Array(SLOT).fill('left top').join(', ') + ';');
for (const sc of SCOPES){
const cfg = S.scopes[sc.k];
if (sc.k !== 'global' && cfg.inherit) continue;
const sel = sc.k === 'global'
? `html[data-theme-style="${slug}"]`
: `html[data-theme-style="${slug}"][data-page-scope="${sc.k}"]`;
L.push(` ${sel} {`);
// 只替换「本来就有背景图」的页面：某页故意配成纯色（--tb-page-image: none），
// 手机上新塞一张竖图就是改了他的设计
if (nb && cfg.bg) L.push(` --tb-page-image: url("${urlOf(nb, preview)}");`);
if (cfg.bg) L.push(` --tb-page-position: ${nb ? 'center center' : (cfg.bgPos || 'center center')};`);
decoVars(cfg, preview, true).split('\n').forEach(line => L.push(' ' + line));
L.push(' }');
}
L.push(' }');
L.push('}');
}
return L.join('\n') + '\n';
@@ -628,18 +799,12 @@ function applyTheme(){
function guideGeom(l){
const a = assetById(l.asset);
if (!a) return null;
const h = Math.round(l.h) || 200;
const w = l.w > 0 ? Math.round(l.w) : Math.round(a.w * h / a.h);
const vw = doc.documentElement.clientWidth;
const vh = doc.documentElement.clientHeight;
const px = l.ah === 'center' ? 0.5 : (l.ah === 'start' ? 0 : 1);
const py = l.av === 'center' ? 0.5 : (l.av === 'start' ? 0 : 1);
// 与 background-position 完全一致的换算
return {
w, h,
left: Math.round((vw - w) * px + l.dx),
top: Math.round((vh - h) * py + l.dy),
};
// 与 background-size/position 走同一套换算式（layerMetrics），
// 否则 fit/vh 单位下框和实际图会错位
const m = layerMetrics(l, a, vw, vh);
return { w: m.w, h: m.h, left: Math.round(m.left), top: Math.round(m.top) };
}
function syncOverlay(){
@@ -685,10 +850,16 @@ function attachDrag(el, l){
e.preventDefault(); e.stopPropagation();
try { el.setPointerCapture(e.pointerId); } catch (_) {}
const sx = e.clientX, sy = e.clientY, dx0 = l.dx, dy0 = l.dy;
// 视口单位下 CSS 会把偏移按视口比缩放，鼠标的 1px 不等于 dx 的 1 —— 不除回来手感会发飘。
// fitw 横向按 vw、纵向仍按 vh，与 POS/axisPos 的规则一致。
const u0 = unitOf(l);
const kvx = u0 === 'vw' ? (doc.documentElement.clientWidth || DESIGN_W) / DESIGN_W
: u0 === 'vh' ? (doc.documentElement.clientHeight || DESIGN_H) / DESIGN_H : 1;
const kvy = u0 === 'px' ? 1 : (doc.documentElement.clientHeight || DESIGN_H) / DESIGN_H;
const move = ev => {
l.dx = Math.round(dx0 + (ev.clientX - sx));
l.dy = Math.round(dy0 + (ev.clientY - sy));
l.dx = Math.round(dx0 + (ev.clientX - sx) / kvx);
l.dy = Math.round(dy0 + (ev.clientY - sy) / kvy);
// 快速路径：只改 CSS + 蒙层位置，不重建 DOM（否则指针捕获会被打断）
const st = doc.getElementById('__tb_theme');
if (st) st.textContent = buildCSS(true);
@@ -713,12 +884,15 @@ function fitStage(){
const canvas = $('canvas');
const frame = $('frame');
const ifr = $('preview');
const k = Math.min(1, (canvas.clientWidth - 28) / S.viewport, (canvas.clientHeight - 28) / 900);
ifr.style.width = S.viewport + 'px';
ifr.style.height = '900px';
const vp = vpOf(S.viewport);
// 高度必须跟着预设走：裁切几乎全由「视口高」决定，
// 一律按 900 渲染的话，768 的旧笔电和 844 的手机根本模拟不出来
const k = Math.min(1, (canvas.clientWidth - 28) / vp.w, (canvas.clientHeight - 28) / vp.h);
ifr.style.width = vp.w + 'px';
ifr.style.height = vp.h + 'px';
ifr.style.transform = `scale(${k})`;
frame.style.width = Math.round(S.viewport * k) + 'px';
frame.style.height = Math.round(900 * k) + 'px';
frame.style.width = Math.round(vp.w * k) + 'px';
frame.style.height = Math.round(vp.h * k) + 'px';
}
/* ---------------------------- 面板渲染 ---------------------------- */
@@ -782,6 +956,31 @@ function renderBgEditor(){
mkPick('背景图', 'bg');
mkPick('平铺图案', 'pattern');
// 背景图是 cover 铺满：宽高比不匹配就必裁，焦点决定裁掉哪一边。
// 16:9 场景在竖屏上只剩中间一条，人物偏一侧时把焦点挪过去才不会裁到脸。
const frow = document.createElement('div');
frow.className = 'row';
const fs = document.createElement('span');
fs.textContent = '焦点';
const grid = document.createElement('div');
grid.className = 'grid9';
['top','center','bottom'].forEach(v => {
['left','center','right'].forEach(h => {
const val = h + ' ' + v;
const b = document.createElement('button');
b.title = val;
b.className = (cfg.bgPos || 'center center') === val ? 'on' : '';
b.onclick = () => {
ensureOwn(true);
S.scopes[S.scope].bgPos = val;
renderAll();
};
grid.appendChild(b);
});
});
frow.append(fs, grid);
el.appendChild(frow);
const row = document.createElement('div');
row.className = 'row';
const s = document.createElement('span');
@@ -981,10 +1180,66 @@ function renderLayerEditor(l){
if (l.kind === 'image'){
// 换图的下拉在图层行里，这里只放尺寸，避免同一件事有两个入口
const sel = (opts, val, on, title) => {
const s = document.createElement('select');
opts.forEach(([k, t]) => {
const o = document.createElement('option');
o.value = k; o.textContent = t;
s.appendChild(o);
});
s.value = val;
s.onchange = () => on(s.value);
if (title) s.title = title;
return s;
};
// 尺寸单位 = 「屏幕变矮/变窄时这张图怎么办」。固定 px 是绝大多数「被裁」的根源。
// 下拉的 value 必须用原始 l.unit（'fit'），不能过 unitOf —— 那会把 fit 归一成 vh，
// 于是选了「按视口高比例」却拿到 clamp 的输出，看起来像开关失灵。
row('尺寸单位', sel([['fit','自适应·按高度'],['fitw','自适应·按宽度'],['px','固定 px'],['vh','按视口高比例']],
l.unit || 'px', v => { l.unit = v; renderAll(); applyTheme(); },
'按高度：人物/竖幅用，屏幕更矮就等比缩（最低 55%）；' +
'按宽度：横幅/整屏插画用，屏幕更窄就等比缩（按高度缩的话宽度会跟着涨，窄屏照样裁）；' +
'按视口高比例：永远占同样比例的屏高，无下限'));
row('高度 px', numInput(l.h, 20, 4000, v => { l.h = v; renderAll(); }));
const wIn = numInput(l.w, 0, 4000, v => { l.w = v; renderAll(); });
wIn.title = '0 表示按图片原始比例自动算宽度';
row('宽度 0=自动', wIn);
if (unitOf(l) === 'px'){
const wIn = numInput(l.w, 0, 4000, v => { l.w = v; renderAll(); });
wIn.title = '0 表示按图片原始比例自动算宽度';
row('宽度 0=自动', wIn);
}
// 窄屏策略：手机上「全藏」太粗暴，缩小往往就够用
row('窄屏', sel([['inherit','原样'],['scale',`缩小到 ${Math.round((S.narrow.scale||MOB_SCALE_DEFAULT)*100)}%`],['hide','隐藏']],
l.mob || 'inherit', v => { l.mob = v; renderAll(); },
'只在 @media 断点以下生效；缩小是把高度与偏移一起乘系数，位置锚点不变'));
const a0 = assetById(l.asset);
if (a0){
const vp = vpOf(S.viewport);
const m = layerMetrics(l, a0, vp.w, vp.h);
const over = [];
if (m.overL > 0.5) over.push(`左 ${Math.round(m.overL)}px`);
if (m.overR > 0.5) over.push(`右 ${Math.round(m.overR)}px`);
if (m.overT > 0.5) over.push(`上 ${Math.round(m.overT)}px`);
if (m.overB > 0.5) over.push(`下 ${Math.round(m.overB)}px`);
const tip = document.createElement('p');
tip.className = 'hint';
if (over.length){
tip.style.color = '#e0a33e';
tip.textContent = `⚠ ${vp.w}×${vp.h}：${over.join(' / ')} 越界（显示 ${m.w}×${m.h}）`;
} else {
tip.textContent = `${vp.w}×${vp.h} 下显示 ${m.w}×${m.h}，完整可见（源 ${a0.w}×${a0.h}）`;
}
box.appendChild(tip);
if (over.length){
const fix = document.createElement('button');
fix.textContent = `按 ${vp.w}×${vp.h} 修好`;
fix.style.cssText = 'width:100%;margin-top:5px;font-size:11px';
fix.title = '改成固定 px，并取「宽 ≤96%、高 ≤92% 视口」的尺寸；更窄的屏请配合「窄屏」策略';
fix.onclick = () => fitToViewport(l, a0, vp);
box.appendChild(fix);
}
}
}
const g = document.createElement('div');
@@ -1119,6 +1374,21 @@ function renderNarrowEditor(){
row.append(sp, mw);
el.appendChild(row);
const rowS = document.createElement('div');
rowS.className = 'row';
const spS = document.createElement('span');
spS.textContent = '缩放系数';
const sc = document.createElement('input');
sc.type = 'number'; sc.min = 20; sc.max = 100; sc.step = 5;
sc.value = Math.round((n.scale || MOB_SCALE_DEFAULT) * 100);
sc.title = '图层「窄屏 = 缩小」时乘的系数。0.6 左右通常就够，太小会让装饰变成噪点';
sc.onchange = () => {
n.scale = clamp((Number(sc.value) || 62) / 100, 0.2, 1);
renderAll();
};
rowS.append(spS, sc);
el.appendChild(rowS);
const row2 = document.createElement('div');
row2.className = 'row';
const sp2 = document.createElement('span');
@@ -1131,15 +1401,104 @@ 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(); }));
const tip = document.createElement('p');
tip.className = 'hint';
tip.textContent = '手机上卡片几乎占满屏幕：16:9 的桌面场景会被裁成一条纹理，固定 px 的人物会被卡片盖住。' +
'要么换一张竖版图，要么让装饰退场。只写浅色规则——深色块特异性更高，本来就压住它。';
tip.textContent = '手机断点下卡片几乎占满宽度：16:9 的桌面场景会被裁成一条纹理。'
+ '三层优先级从高到低：这个「全部隐藏」→ 每层的窄屏策略（原样 / 缩小 / 隐藏）→ 图层的尺寸单位。'
+ '尺寸单位选「自适应 / 视口高比例」的层自己不依赖这段规则，浏览器会按视口缩。'
+ '只写浅色规则——深色块特异性更高，本来就压住它。';
el.appendChild(tip);
}
/* ---------------------- 导出画质 ---------------------- */
/* WebP 体积 ≈ 像素数 × 质量的乘积。真正的大头是像素：
CSS 里只显示 400px 高的立绘，2 倍屏也只要 800px，上传 3000px 纯属白扛。
所以这里给两个旋钮，先砍长边、再降质量，顺序别反。 */
function renderExportEditor(){
const el = $('export-editor');
if (!el) return;
el.innerHTML = '';
const row = () => {
const r = document.createElement('div');
r.className = 'row';
el.appendChild(r);
return r;
};
const label = (t, w) => {
const s = document.createElement('span');
s.textContent = t;
if (w) s.style.width = w;
return s;
};
// 质量滑块：松手（change）才重编码，拖动过程中不反复跑全量像素。
// 数值放进 label 里而不是单独一个 flex 项：面板只有 240px，三个 flex 项时
// range 的固有宽度会把数值顶出可视区（表现为"滑块没有数字"）。
const r1 = row();
const q = clamp(Number(S.export.quality) || 0.88, 0.5, 0.95);
const qlab = document.createElement('span');
qlab.innerHTML = '质量 <b>' + q.toFixed(2) + '</b>';
const qv = qlab.querySelector('b');
qv.style.cssText = 'color:var(--ui-main);font-weight:600';
const qr = document.createElement('input');
qr.type = 'range'; qr.min = 0.5; qr.max = 0.95; qr.step = 0.01; qr.value = q;
// width:0 + flex:1 1 0 是让 range 只吃「剩余空间」的标准写法：
// 光给 flex:1 时它的固有宽度（Chrome 约 129px）会撑破 240px 的面板。
qr.style.cssText = 'flex:1 1 0;width:0;min-width:0';
qr.title = '0.85~0.9 之间肉眼几乎看不出差别；低于 0.8 才会明显糊。上限 0.95 —— WebP 的 q=1 会切无损，体积反而失控';
qr.oninput = () => { qv.textContent = (+qr.value).toFixed(2); };
qr.onchange = async () => {
S.export.quality = clamp(+qr.value, 0.5, 0.95);
qv.textContent = S.export.quality.toFixed(2);
await applyQuality('质量 ' + S.export.quality.toFixed(2));
};
r1.append(qlab, qr);
const r2 = row();
const sides = [['0','不限制'],['2048','2048'],['1600','1600'],['1200','1200'],['800','800']];
const side = document.createElement('select');
side.innerHTML = sides.map(([v, t]) => `<option value="${v}">${t}</option>`).join('');
side.value = String(S.export.maxSide || 0);
side.title = '长边上限。整页背景图建议 1920/不限制；装饰人物 1200 就够（显示 400px × 2 倍屏）';
side.onchange = async () => {
S.export.maxSide = parseInt(side.value, 10) || 0;
await applyQuality('长边 ≤ ' + (S.export.maxSide || '不限'));
};
r2.append(label('长边上限', '62px'), side);
const stat = document.createElement('p');
stat.className = 'hint';
const total = S.assets.reduce((n, a) => n + (a.kb || 0), 0);
if (!S.assets.length){
stat.textContent = '还没有图片。上传时会按上面的设置直接编码。';
} else {
const big = S.assets.slice().sort((a, b) => b.kb - a.kb)[0];
stat.textContent = `${S.assets.length} 张，共 ${total >= 1024 ? (total / 1024).toFixed(1) + 'MB' : total + 'KB'}`
+ `；最大一张 ${big.id}.webp ${big.kb}KB（${big.w}×${big.h}）`;
}
el.appendChild(stat);
const tip = document.createElement('p');
tip.className = 'hint';
tip.textContent = '压体积的顺序：先砍长边，再降质量。改完按「原图 + 处理参数」重新编码全部素材，'
+ '不叠加压缩 —— 来回试不会越调越糊。注意平涂/线稿素材降质量可能反而变大（有损会引入噪点），'
+ '这类图优先调长边。';
el.appendChild(tip);
}
/** 改画质后重编全部素材，并把前后体积说清楚 —— 否则用户不知道有没有生效。 */
async function applyQuality(what){
if (!S.assets.length){ renderAll(); return; }
const { before, after } = await rebakeAll();
renderAll();
const fmt = kb => kb >= 1024 ? (kb / 1024).toFixed(1) + 'MB' : kb + 'KB';
log(`按「${what}」重编 ${S.assets.length} 张：${fmt(before)} → ${fmt(after)}`
+ (before > 0 && after < before ? `（省 ${Math.round((1 - after / before) * 100)}%）` : ''), 'ok');
}
function renderPalette(){
const wrap = $('palette');
wrap.innerHTML = '';
@@ -1166,11 +1525,12 @@ function renderPalette(){
function renderViewportBar(){
const vp = $('vps'); vp.innerHTML = '';
VIEWPORTS.forEach(w => {
VIEWPORTS.forEach(v => {
const b = document.createElement('button');
b.textContent = w;
b.className = w === S.viewport ? 'on' : '';
b.onclick = () => { S.viewport = w; renderViewportBar(); fitStage(); };
b.textContent = v.w;
b.title = v.label;
b.className = v.w === S.viewport ? 'on' : '';
b.onclick = () => { S.viewport = v.w; renderViewportBar(); renderLayers(); fitStage(); };
vp.appendChild(b);
});
const md = $('modes'); md.innerHTML = '';
@@ -1189,6 +1549,7 @@ function renderAll(){
renderBgEditor();
renderLayers();
renderAssets();
renderExportEditor();
renderNarrowEditor();
renderPalette();
applyTheme();
@@ -1203,7 +1564,7 @@ let saveTimer = null, draftWarned = false;
function toJSON(){
return {
v: 3,
v: 4,
savedAt: new Date().toISOString(),
slug: S.slug,
scope: S.scope,
@@ -1212,6 +1573,7 @@ function toJSON(){
palette: S.palette,
dark: S.dark,
narrow: S.narrow,
export: S.export,
// 图片内嵌 base64：少一层「图片放哪」的约定，导入时一个文件就够。
// 存的是 orig（原始字节）+ fx（处理参数），dataURL 只在真有处理时才存 ——
// 未处理时它必然等于 orig，再存一份等于让 json 平白翻倍。
@@ -1228,17 +1590,19 @@ function toJSON(){
function fromJSON(o){
// v2 是加图片处理之前的格式（只有 dataURL）：把 dataURL 当 orig 用，
// fx 全空，用户打开旧工程还能接着改参数。
if (!o || typeof o !== 'object' || (o.v !== 2 && o.v !== 3)){
throw new Error('不是本工具导出的工程文件（版本 ' + (o && o.v) + '，支持 2 / 3）');
// fx 全空，用户打开旧工程还能接着改参数。v4 只多了 export（画质）字段，缺了取默认。
if (!o || typeof o !== 'object' || (o.v !== 2 && o.v !== 3 && o.v !== 4)){
throw new Error('不是本工具导出的工程文件（版本 ' + (o && o.v) + '，支持 2 / 3 / 4）');
}
S.slug = o.slug || 'my-theme';
S.scope = SCOPES.some(x => x.k === o.scope) ? o.scope : 'global';
S.viewport = VIEWPORTS.indexOf(o.viewport) >= 0 ? o.viewport : 1512;
S.viewport = VIEWPORTS.some(v => v.w === o.viewport) ? o.viewport : 1512;
S.mode = o.mode === 'dark' ? 'dark' : 'light';
S.palette = Object.assign({}, S.palette, o.palette || {});
S.dark = Object.assign({}, S.dark, o.dark || {});
S.narrow = Object.assign({ enabled: true, bg: null, hideDeco: true, maxWidth: 900 }, o.narrow || {});
S.narrow = Object.assign({ enabled: true, bg: null, hideDeco: false, maxWidth: 900,
scale: MOB_SCALE_DEFAULT }, o.narrow || {});
S.export = Object.assign({}, D.export, o.export || {});
S.assets = (o.assets || []).map(a => {
const orig = a.orig || { dataURL: a.dataURL, w: a.w, h: a.h };
const dataURL = a.dataURL || orig.dataURL;
@@ -1286,6 +1650,7 @@ function resetAll(){
S.assets = [];
S.palette = Object.assign({}, D.palette);
S.narrow = Object.assign({}, D.narrow);
S.export = Object.assign({}, D.export);
S.dark = Object.assign({}, D.dark);
S.scopes = {};
SCOPES.forEach(sc => { S.scopes[sc.k] = blankScope(sc.k); });
@@ -1474,9 +1839,28 @@ ${own}
窄屏
----
${S.narrow.enabled
? `已导出 @media (max-width: ${S.narrow.maxWidth}px)：${S.narrow.bg ? '换成竖版背景图' : '背景沿用桌面'}${S.narrow.hideDeco ? ' + 隐藏全部装饰层' : ''}`
? `已导出 @media (max-width: ${S.narrow.maxWidth}px)：${S.narrow.bg ? '换成竖版背景图' : '背景沿用桌面'}`
+ `${S.narrow.hideDeco ? ' + 隐藏全部装饰层' : ''}`
+ `\n 缩放系数 ${Math.round((S.narrow.scale || MOB_SCALE_DEFAULT) * 100)}%（作用于策略为「缩小」的层）`
: '未导出窄屏规则（桌面装饰会在手机上被卡片盖住 / 背景被 cover 裁成一条）'}
尺寸适配
--------
尺寸单位（图层编辑器里选，本质是「屏幕变小时这张图怎么办」）：
fit 自适应·按高度 —— 人物/竖幅。按 ${DESIGN_H}px 高视口换算，屏幕更矮等比缩
（下限 55%，小到放不下时让位给视口），更高不超过设定值
fitw 自适应·按宽度 —— 横幅/场景。按 ${DESIGN_W}px 宽视口换算，同上。
宽幅素材必须用它：按高度缩的话宽度会跟着涨，窄屏照样裁两侧
vh 按视口高比例 —— 永远占同样比例的屏高，无下限
px 固定像素 —— 不随视口变，小屏容易裁
尺寸只定一个维度，另一个交给 auto 按图片比例算，缩放时不会拉伸。
每一层在编辑器里都会显示「当前视口下实际显示多大 / 是否越界」。
导出画质
--------
质量 ${(+S.export.quality).toFixed(2)}，长边上限 ${S.export.maxSide || '不限制'}
素材共 ${S.assets.reduce((n, a) => n + (a.kb || 0), 0)}KB（${S.assets.length} 张）
作用域由服务端按请求路径输出 <html data-page-scope="...">，
主题 CSS 用 html[data-theme-style="${slug}"][data-page-scope="xxx"] 覆盖。
没写覆盖块的作用域自动沿用全局，不会出现「某页装饰消失」。
@@ -1506,9 +1890,13 @@ function doExport(){
SCOPES.forEach(s => { if (s.k === 'global' || !S.scopes[s.k].inherit) collect(S.scopes[s.k]); });
const files = [{ name: `static/css/themes/${slug}.css`, data: enc(buildCSS(false)) }];
let imgKB = 0, imgN = 0;
for (const id of used){
const a = assetById(id);
if (a) files.push({ name: `static/images/themes/${slug}/${id}.webp`, data: dataURLToBytes(a.dataURL) });
if (a){
files.push({ name: `static/images/themes/${slug}/${id}.webp`, data: dataURLToBytes(a.dataURL) });
imgKB += a.kb || 0; imgN++;
}
}
// 工程文件也塞进包里：下次想改直接「打开工程」，不必从零重搭
files.push({ name: `theme-${slug}.json`, data: enc(JSON.stringify(toJSON())) });
@@ -1520,8 +1908,35 @@ function doExport(){
a.download = `theme-${slug}.zip`;
a.click();
setTimeout(() => URL.revokeObjectURL(a.href), 4000);
out(`已导出 theme-${slug}.zip（${files.length} 个文件，${Math.round(blob.size/1024)}KB）。\n` +
`解压到项目根，按 INSTALL-${slug}.txt 走三步；包里的 theme-${slug}.json 是工程源文件，下次用「打开工程」接着改。`, 'ok');
const fmt = kb => kb >= 1024 ? (kb / 1024).toFixed(2) + 'MB' : kb + 'KB';
const over = overflowReport();
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');
}
/** 全站扫一遍：哪些层在预设视口下会溢出被裁。
导出前提醒而不是硬拦 —— 有时故意让插画出血是想要的效果。 */
function overflowReport(){
const rows = [];
for (const sc of SCOPES){
const cfg = S.scopes[sc.k];
if (sc.k !== 'global' && cfg.inherit) continue;
(cfg.layers || []).forEach((l, i) => {
if (l.kind !== 'image' || !l.asset) return;
const a = assetById(l.asset);
if (!a) return;
const bad = VIEWPORTS.filter(v => {
const m = layerMetrics(l, a, v.w, v.h);
return m.overL > 1 || m.overR > 1 || m.overT > 1 || m.overB > 1;
});
if (bad.length) rows.push(`${sc.label} 第 ${i + 1} 层（${a.id}）：${bad.map(v => v.w + '×' + v.h).join('、')} 下超出视口`);
});
}
return rows;
}
/* ---------------------------- 图片处理 ---------------------------- */
@@ -1676,15 +2091,24 @@ function trimCanvas(cv){
return out;
}
/** 按 fx 出一张 canvas。maxW > 0 时先等比缩到该宽度（预览用，拖动滑杆才跟手）。 */
function renderFxCanvas(img, fx, maxW){
/** 按 fx 出一张 canvas。maxW > 0 时先等比缩到该宽度（预览用，拖动滑杆才跟手）；
limit > 0 时长边不超过 limit（导出画质用，压体积最有效的一刀在这里）。 */
function renderFxCanvas(img, fx, maxW, limit){
fx = normFx(fx);
const W0 = img.naturalWidth || img.width, H0 = img.naturalHeight || img.height;
const k = maxW && W0 > maxW ? maxW / W0 : 1;
let k = maxW && W0 > maxW ? maxW / W0 : 1;
if (limit > 0){
const k2 = Math.min(limit / W0, limit / H0, 1); // 长边上限：只缩不放
if (k2 < k) k = k2;
}
let cv = document.createElement('canvas');
cv.width = Math.max(1, Math.round(W0 * k));
cv.height = Math.max(1, Math.round(H0 * k));
const g = cv.getContext('2d');
// 缩小默认是双线性，一次缩太多会糊成一团；high 会走更好的降采样，
// 代价只有一次性耗时（2M 像素级别仍是毫秒级）
g.imageSmoothingEnabled = true;
g.imageSmoothingQuality = 'high';
g.drawImage(img, 0, 0, cv.width, cv.height);
// 没有任何处理时直接跳过 getImageData：2M 像素图省下的这一趟够明显
if (!fxIsEmpty(fx)){
@@ -1708,11 +2132,24 @@ async function decodeAsset(a){
return a._img;
}
/** 把处理结果写回 asset：dataURL/bytes/w/h/kb 全部换成处理后的。 */
/** 把处理结果写回 asset：dataURL/bytes/w/h/kb 全部换成处理后的。
每次都从 orig + fx + 当前画质设置重算，所以「先调 q 0.7 看看，再调回 0.88」
不会两代有损叠加 —— 这与 fx 的非破坏设计是同一条原则。 */
async function bakeAsset(a){
const img = await decodeAsset(a);
const cv = renderFxCanvas(img, a.fx);
Object.assign(a, canvasAsset(cv, 0.9));
const cv = renderFxCanvas(img, a.fx, 0, S.export.maxSide);
Object.assign(a, canvasAsset(cv, S.export.quality));
}
/** 画质/长边改了之后重编全部素材。返回前后体积对比，用来给一句「省了多少」。 */
async function rebakeAll(){
let before = 0, after = 0;
for (const a of S.assets){
before += a.kb || 0;
await bakeAsset(a);
after += a.kb || 0;
}
return { before, after };
}
function loadImage(file){
@@ -1734,9 +2171,13 @@ function readAsDataURL(file){
});
}
/** 画布尺寸 = 原图尺寸：不缩放、不留透明边，导出后的宽高比才与实际一致。 */
/** 画布尺寸 = 处理后的尺寸：不缩放、不留透明边，导出后的宽高比才与实际一致。
q 是 WebP 质量，体积与观感的唯一旋钮 —— 0.85~0.9 之间肉眼几乎看不出差别。
⚠️ 上限卡在 0.95：Skia 在 quality=1.0 时会切到 WebP 无损模式，实测输出反常
（同一张噪声图 q=1 只有 52KB，q=0.95 是 440KB），不能当「最高画质」用。 */
function canvasAsset(cv, q){
const url = cv.toDataURL('image/webp', q);
const qq = clamp(Number(q) || 0.88, 0.3, 0.95);
const url = cv.toDataURL('image/webp', qq);
const bytes = dataURLToBytes(url);
return { dataURL: url, bytes, w: cv.width, h: cv.height, kb: Math.round(bytes.length / 1024) };
}
@@ -1761,10 +2202,11 @@ async function addFiles(list){
fx: fxDefault(),
_img: img,
};
const cv = renderFxCanvas(img, a.fx);
Object.assign(a, canvasAsset(cv, 0.9));
const cv = renderFxCanvas(img, a.fx, 0, S.export.maxSide);
Object.assign(a, canvasAsset(cv, S.export.quality));
S.assets.push(a);
log(`加入 ${f.name} → ${id}.webp（${a.w}×${a.h}, ${a.kb}KB）`, 'ok');
log(`加入 ${f.name} → ${id}.webp（${a.w}×${a.h}, ${a.kb}KB`
+ (a.kb > 400 ? '，偏大：把「导出画质」的长边调小一档' : '') + '）', 'ok');
}
renderAll();
}
@@ -1792,7 +2234,7 @@ async function addUrlAsset(url, id){
orig: { dataURL: origURL, w: img.naturalWidth, h: img.naturalHeight },
fx: fxDefault(), _img: img,
};
Object.assign(a, canvasAsset(renderFxCanvas(img, a.fx), 0.9));
Object.assign(a, canvasAsset(renderFxCanvas(img, a.fx, 0, S.export.maxSide), S.export.quality));
S.assets.push(a);
return a;
}
@@ -2026,10 +2468,22 @@ function makeDemo(){
S.assets.push({ id:'bg', name:'示例背景', orig:{ dataURL:bgA.dataURL, w:bgA.w, h:bgA.h }, fx: fxDefault(), ...bgA });
S.assets.push({ id:'char', name:'示例人物', orig:{ dataURL:chA.dataURL, w:chA.w, h:chA.h }, fx: fxDefault(), ...chA });
// 竖版背景：手机上 16:9 会被 cover 裁成中间一条，示例里给一张竖图，
// 「窄屏」那一栏才有东西可演示、@media 段也才会真的生成
const mb = document.createElement('canvas');
mb.width = 1080; mb.height = 1920;
const mg = mb.getContext('2d');
const mgr = mg.createLinearGradient(0, 0, 0, 1920);
mgr.addColorStop(0, '#dfeaf6'); mgr.addColorStop(0.6, '#eef3f9'); mgr.addColorStop(1, '#f7f2e8');
mg.fillStyle = mgr; mg.fillRect(0, 0, 1080, 1920);
const mba = canvasAsset(mb, 0.8);
S.assets.push({ id:'bg-m', name:'示例竖版背景', orig:{ dataURL:mba.dataURL, w:mba.w, h:mba.h }, fx: fxDefault(), ...mba });
const gc = S.scopes.global;
gc.bg = 'bg';
gc.layers = [
Object.assign(newLayer('image'), { asset:'char', h:420, ah:'start', av:'end', dx:40, dy:-36 }),
Object.assign(newLayer('image'),
{ asset:'char', h:420, ah:'start', av:'end', dx:40, dy:-36, mob:'scale' }),
Object.assign(newLayer('radial'), { color:'#ffd9a0', alpha:0.42, r:320, cx:20, cy:86 }),
];
@@ -2043,9 +2497,10 @@ function makeDemo(){
S.scopes.question = blankScope('question');
S.scopes.profile = blankScope('profile');
S.scopes.vote = blankScope('vote');
S.narrow.bg = null;
S.narrow.bg = 'bg-m';
renderAll();
log('已载入示例。左侧切换页面看差异 —— 题目列表页是「独立配置」的例子。', 'ok');
log('已载入示例。左上角切换 1512 / 390 两个视口，能直接看到「被裁」与「自适应」的差别；'
+ '题目列表页是「独立配置」的例子。', 'ok');
}
/* ---------------------------- 初始化 ---------------------------- */
@@ -2342,6 +2797,119 @@ function boot(){
}
pre.textContent = JSON.stringify(r, null, 1);
})();
} else if (dump === 'fit'){
// 尺寸自适应自检：同一层在「桌机」与「手机」下的实际占用、溢出检测、
// 以及老工程（没有 unit 字段）的向后兼容
(async () => {
const r = {};
try {
makeDemo();
const l = S.scopes.global.layers[0];
const a = assetById('char');
const m900 = layerMetrics(l, a, 1512, 900);
const m844 = layerMetrics(l, a, 390, 844);
r.desktop = { w: Math.round(m900.w), h: Math.round(m900.h), overR: Math.round(m900.overR) };
r.mobile = { w: Math.round(m844.w), h: Math.round(m844.h), overR: Math.round(m844.overR) };
r.shorterSmaller = m844.h < m900.h;
const c0 = layerCSS(l, true);
r.size = c0.size;
r.pos = c0.position;
r.hasClamp = /clamp\(/.test(c0.size);
// 固定 px + 居中 + 高图：必须报上下溢出（这就是「像站在桌子上」那一类）
const big = Object.assign({}, l, { unit:'px', h:1200, w:0, ah:'center', dx:0 });
const mb = layerMetrics(big, a, 1512, 900);
r.pxOverflow = { overT: Math.round(mb.overT), overB: Math.round(mb.overB) };
r.pxDetected = mb.overT > 0 || mb.overB > 0;
// 老工程没有 unit/mob 字段：必须退回 px，不能算成 NaN
const legacy = Object.assign({}, l);
delete legacy.unit; delete legacy.mob;
r.legacyUnit = unitOf(legacy);
// fitw（按宽度自适应）：宽幅素材在窄屏必须跟着缩，且 55% 下限要让位给视口
const bgA = assetById('bg');
const wide = Object.assign({}, l, { unit:'fitw', h:600, w:0, ah:'center', av:'center', dx:0, dy:0 });
const wWide = [[1512,900],[1024,768],[390,844]]
.map(([W, H]) => Math.round(layerMetrics(wide, bgA, W, H).w));
r.fitw = wWide;
r.fitwCss = layerSize(wide, bgA);
r.fitwShrinks = wWide[0] > wWide[1];
r.fitwNoOverflow = wWide[2] <= 390;
// 窄屏策略
S.narrow.hideDeco = false;
S.narrow.scale = 0.62;
r.mobScaled = decoMobile(Object.assign({}, l, { mob:'scale' })).h;
r.mobHidden = decoMobile(Object.assign({}, l, { mob:'hide' }));
const inh = Object.assign({}, l, { mob:'inherit' });
r.mobInherit = decoMobile(inh) === inh; // 原样返回，不复制
r.media = /@media \(max-width: 900px\)/.test(buildCSS(false));
// 窄屏里独立配置的页面也必须有一条（否则特异性不够，规则不生效）
r.mediaAdmin = /@media[\s\S]*data-page-scope="admin"/.test(buildCSS(false));
r.ok = r.shorterSmaller && r.hasClamp && r.pxDetected && r.legacyUnit === 'px'
&& r.mobScaled === 260 && r.mobHidden === null && r.mobInherit
&& r.fitwShrinks && r.fitwNoOverflow
&& r.media && r.mediaAdmin;
} catch (e){
r.error = e.message + ' | ' + (e.stack || '').split('\n')[1];
r.ok = false;
}
pre.textContent = JSON.stringify(r, null, 1);
})();
} else if (dump === 'quality'){
// 画质自检：质量越低体积越小；长边上限必须真的把像素压下来。
// ⚠️ 必须用「有噪声」的图来验：平涂线稿在 WebP 下 q=1 常常比 q=0.6 还小
// （无损模式对纯色更高效，有损反而引入噪点），所以「降 q 一定省体积」不成立。
(async () => {
const r = {};
try {
const cv = document.createElement('canvas');
cv.width = 800; cv.height = 600;
const g = cv.getContext('2d');
const id = g.createImageData(800, 600);
let seed = 12345;
for (let i = 0; i < id.data.length; i += 4){
seed = (seed * 1103515245 + 12345) & 0x7fffffff;
id.data[i] = seed & 255;
id.data[i+1] = (seed >> 8) & 255;
id.data[i+2] = (seed >> 16) & 255;
id.data[i+3] = 255;
}
g.putImageData(id, 0, 0);
const q6 = canvasAsset(cv, 0.6), q9 = canvasAsset(cv, 0.95), q1 = canvasAsset(cv, 1);
r.kb60 = q6.kb; r.kb95 = q9.kb; r.kb1 = q1.kb;
r.monotonic = q6.bytes.length < q9.bytes.length;
// q=1 会被夹到 0.95，否则会走 Skia 的 WebP 无损路径，体积反而小得离谱
r.oneClamped = q1.bytes.length === q9.bytes.length;
// 平涂对照：只记录，不作为判定条件（有损对纯色会引入噪点，可能变大）
const flat = document.createElement('canvas');
flat.width = 800; flat.height = 600;
const fg = flat.getContext('2d');
fg.fillStyle = '#4a7fc1'; fg.fillRect(0, 0, 800, 600);
r.flat_kb60 = canvasAsset(flat, 0.6).kb;
r.flat_kb95 = canvasAsset(flat, 0.95).kb;
const img = await new Promise((res, rej) => {
const im = new Image();
im.onload = () => res(im);
im.onerror = () => rej(new Error('canvas → Image 失败'));
im.src = cv.toDataURL('image/png');
});
const lim = renderFxCanvas(img, fxDefault(), 0, 200);
r.limited = [lim.width, lim.height]; // 长边 200 → 200×150
const noLim = renderFxCanvas(img, fxDefault(), 0, 0);
r.unlimited = [noLim.width, noLim.height]; // 800×600
r.ok = r.monotonic && r.oneClamped && r.limited[0] === 200 && r.limited[1] === 150
&& r.unlimited[0] === 800;
} catch (e){
r.error = e.message + ' | ' + (e.stack || '').split('\n')[1];
r.ok = false;
}
pre.textContent = JSON.stringify(r, null, 1);
})();
} else {
const files = [{ name: `${S.slug}.css`, data: enc(buildCSS(false)) }];
const bytes = zipStore(files);