JianFeeeee
ababe4ae56
用户报的：「webui 目前在壁纸底上叠了太多不透明层，导致壁纸效果很差，几乎看不出来」， 追问后补充：「不只是玻璃，而是很多界面是不透明的」。两句都成立，是两个叠加的原因。 ## ① 玻璃层层相乘 每层面板都吃同一个不透明度 a，两层就是 1-(1-a)²。a=0.82 时两层 0.97、三层 0.995 —— 壁纸在数学上被吃掉，而且每层各做一次 16px 模糊，图案被糊成灰块。 改法：玻璃只出现一次（外层 0.62 + 18px 模糊；嵌套层只留 0.3 色调且不再模糊； 第三层透明）。同时把遮罩 24%→12%、照片自身模糊 8→4px（那张被洗白的锅之一）。 ## ② 14 个浅色表面类根本没被接管（"很多界面是不透明的"就是这条） 旧规则只接管 white / gray-50 / slate-100，而源码里在用的是 gray-100(24 处)、blue-50(17)、red-50(13)、blue-100(8)、gray-200(8)、green-50(8)… —— 全是实心的，正好盖住壁纸。 清单改为**从源码用法生成**（`scripts/gen-background-takeover.mjs` → 生成的 CSS， 构建前自动跑），因为手写清单必然烂；判据保证"源码里出现的浅色表面类必须都被接管"， 并明确排除页面底（gray-50/slate-100 必须保持**全透明**，不能被改成半透明）。 按钮/徽标（*-600/700、chrome-600/700）**故意保持不透明**：小控件可读性优先 （index.css 里原有注释记着实测 4.46:1 的教训）。 ## 判据 - `test/background.test.mjs` 23 条（新增 8 条）：玻璃算式（两层 ≤0.85）、外层 ≤0.70、 嵌套规则存在、**判据自检**（旧值 0.82 必须算得出 >0.95）、表面类覆盖、页面底不得进清单、 清单非空跑。犯过一次错：第一版把判据追加在 `process.exit()` **之后** ⇒ 根本没执行， 从"测试数没变"才发现。 - `test/manual/wallpaper-layers-verify.mjs`（真实渲染，自带无头 Chromium）： 用**纯红壁纸读绿通道**测有效不透明度（纯色下 backdrop-filter 不影响读数）。 面板 p95：**修复前 82% → 修复后 62%**；反向对照（改回旧值）能分辨 ≥10 个百分点； 深色照片面上面板仍是浅底；关掉壁纸的同坐标对照更实。5/5。 过程中作废了两个指标：只看绿通道会把深色元素误判成"盖死"；"面积占比"类阈值 （Δ≥8/≥40）在 0.97 时仍会蹭过门槛，饱和而无分辨力 —— 同坐标比值才可信。 ## 交付 已部署（网关内嵌 WebUI 重建）：线上 CSS 已含 `--bg-glass-inner`、嵌套规则与 14 个接管类。
206 lines
8.8 KiB
JavaScript
206 lines
8.8 KiB
JavaScript
/**
|
||
* 自定义背景的结构性检查。
|
||
*
|
||
* 与 theme.test.mjs 同一风格：判据是「源码里存在/不存在某种形态」，不需要浏览器。
|
||
* 真正的视觉验收靠手工脚本（test/manual/）。
|
||
*
|
||
* 这些检查存在的理由：背景是**装饰层叠加在内容之下**，它的 bug 形态是
|
||
* 「正文读不动」和「背景根本没出现」，两者都不报错、不影响构建。
|
||
*/
|
||
import { readFileSync, readdirSync } from 'node:fs';
|
||
import { fileURLToPath } from 'node:url';
|
||
import { dirname, join } from 'node:path';
|
||
|
||
const here = dirname(fileURLToPath(import.meta.url));
|
||
const read = p => readFileSync(join(here, p), 'utf8');
|
||
|
||
let pass = 0;
|
||
let fail = 0;
|
||
const check = (name, ok, detail = '') => {
|
||
if (ok) {
|
||
pass++;
|
||
console.log(` 通过 ${name}`);
|
||
} else {
|
||
fail++;
|
||
console.log(` 失败 ${name}${detail ? ' — ' + detail : ''}`);
|
||
}
|
||
};
|
||
|
||
const css = read('../src/index.css').replace(/\/\*[\s\S]*?\*\//g, '');
|
||
const store = read('../src/stores/backgroundStore.ts');
|
||
const picker = read('../src/components/BackgroundPicker.tsx');
|
||
const main = read('../src/main.tsx');
|
||
|
||
const rootBlock = css.slice(css.indexOf(':root'), css.indexOf('.dark'));
|
||
const darkBlock = css.slice(css.indexOf('.dark {'));
|
||
|
||
// 1) 遮罩颜色必须两种主题各一份。
|
||
// 只有一个值时，深色模式下用白色遮罩会把照片洗成一块亮斑，正文完全读不动。
|
||
check(
|
||
'--bg-scrim 在浅色与深色下都有定义',
|
||
/--bg-scrim:\s*\d+\s+\d+\s+\d+/.test(rootBlock) && /--bg-scrim:\s*\d+\s+\d+\s+\d+/.test(darkBlock),
|
||
'深色缺少遮罩色时浅色照片会压不住'
|
||
);
|
||
|
||
// 2) 遮罩色必须是 RGB 三元组（与色板同一约定），否则 rgb(var() / var()) 无效。
|
||
check(
|
||
'--bg-scrim 存 RGB 三元组',
|
||
/--bg-scrim:\s*\d+\s+\d+\s+\d+;/.test(rootBlock) && !/--bg-scrim:\s*#/.test(css)
|
||
);
|
||
|
||
// 3) 背景层必须画在内容**之下**。
|
||
// z-index:0 / auto 的定位元素会画在常规流内容之上，把整个界面盖住。
|
||
check(
|
||
'背景层用负 z-index 且不吃点击',
|
||
/\.app-backdrop\s*\{[^}]*z-index:\s*-1/.test(css) &&
|
||
/\.app-backdrop\s*\{[^}]*pointer-events:\s*none/.test(css),
|
||
'z-index 不为负会盖住界面'
|
||
);
|
||
|
||
// 4) 背景开启时必须让出不透明的页面底，否则背景永远看不见。
|
||
// 这是最容易漏的一条：写好了渐变、挂好了层，却被 bg-gray-50 挡住。
|
||
//
|
||
// 正则要写成「选择器列表 … { 声明体 }」而不是 [^{]* 直接跨到声明：
|
||
// [^{] 遇 { 即停，而这里要跨过的正是选择器后面的那个 {。
|
||
check(
|
||
'data-bg=on 时页面底变透明',
|
||
/html\[data-bg='on'\]\s+body/.test(css) &&
|
||
/html\[data-bg='on'\][^{}]*\.bg-gray-50/.test(css) &&
|
||
/html\[data-bg='on'\][^{}]*\{[^}]*background-color:\s*transparent/.test(css)
|
||
);
|
||
|
||
// 5) 玻璃化只应在背景开启时生效。
|
||
// 若无条件给 .bg-white 加半透明/模糊，关闭背景的用户会看到一层发灰的卡片。
|
||
const glassRules = css.match(/html\[data-bg='on'\][^{]*\{[^}]*backdrop-filter/g) || [];
|
||
const bareGlass = /(^|\n)\s*\.bg-white\s*\{[^}]*backdrop-filter/.test(css);
|
||
check(
|
||
'backdrop-filter 仅在 data-bg=on 下使用',
|
||
glassRules.length > 0 && !bareGlass,
|
||
bareGlass ? '存在无条件的 .bg-white 模糊规则' : '未找到玻璃化规则'
|
||
);
|
||
|
||
// 6) 悬停态也要接管。
|
||
// 不接管的话鼠标一进面板就从不透明闪回，观感是明显的跳动。
|
||
check(
|
||
'悬停态一并在背景模式下接管',
|
||
/html\[data-bg='on'\][^{]*\.hover\\:bg-gray-50:hover/.test(css)
|
||
);
|
||
|
||
// 7) 预设渐变只能由 CSS 提供色值，组件里不得写死颜色。
|
||
// 写死十六进制会绕过主题变量 —— 深色模式下会原样落下浅色渐变。
|
||
const presetClasses = (css.match(/\.bg-preset-[a-z]+\s*\{/g) || []).length;
|
||
const hexInPicker = picker.match(/#[0-9a-fA-F]{3,6}\b/g) || [];
|
||
check(
|
||
'预设渐变定义在 CSS 且组件无写死颜色',
|
||
presetClasses >= 4 && hexInPicker.length === 0,
|
||
hexInPicker.length ? `组件含 ${hexInPicker.join(',')}` : `只找到 ${presetClasses} 个预设`
|
||
);
|
||
|
||
// 8) 预设必须复用调色板变量（因此自动随主题变），而不是字面色值。
|
||
check(
|
||
'预设渐变复用调色板变量',
|
||
/\.bg-preset-aurora\s*\{[^}]*rgb\(var\(--c-/.test(css)
|
||
);
|
||
|
||
// 9) 背景必须在 render 之前套用，且在 App 之外挂载。
|
||
// 挂在 App 内会只存在于主界面分支上，登录页/加载页没有背景。
|
||
check(
|
||
'启动时套用背景且挂在 App 之外',
|
||
/initBackground\(\)/.test(main) && /className="app-backdrop"/.test(main),
|
||
'缺少 initBackground 或背景层不在 App 外'
|
||
);
|
||
|
||
// 10) 存储键与归一化入口存在（旧数据/脏数据不能让页面白屏）。
|
||
check(
|
||
'有独立存储键与脏数据归一化',
|
||
/STORAGE_KEY\s*=\s*'agentmail\.background'/.test(store) && /normalizeBackground/.test(store)
|
||
);
|
||
|
||
// 11) 图片必须压缩后再存，且有明确上限。
|
||
// 手机直出照片 4–8MB，直接塞 localStorage 会超配额并抛异常 ——
|
||
// 用户看到的是「选了图片没反应」。
|
||
check(
|
||
'图片有缩放与体积上限',
|
||
/MAX_EDGE\s*=\s*\d+/.test(store) &&
|
||
/MAX_DATA_URL_BYTES\s*=\s*[\d_]+/.test(store) &&
|
||
/drawScaled/.test(store)
|
||
);
|
||
|
||
// 12) 失败必须给出原因，不能静默。
|
||
check(
|
||
'图片处理失败返回原因',
|
||
/ok:\s*false;\s*reason:\s*string/.test(store) && /role="alert"/.test(picker)
|
||
);
|
||
|
||
// 13) 背景是装饰偏好，写 DOM 失败不得抛出打断操作。
|
||
check(
|
||
'背景写入 DOM 前有环境判断',
|
||
/typeof document === 'undefined'/.test(css.slice(0, 0) + store)
|
||
);
|
||
|
||
// 14) 动效必须尊重 prefers-reduced-motion。
|
||
check(
|
||
'尊重 prefers-reduced-motion',
|
||
/@media\s*\(prefers-reduced-motion:\s*reduce\)/.test(css)
|
||
);
|
||
|
||
// 15) 组件里不得出现未映射色族（emerald/purple 等会绕过主题）。
|
||
const compDir = join(here, '../src/components');
|
||
const unmapped = [];
|
||
for (const f of readdirSync(compDir).filter(x => x.endsWith('.tsx'))) {
|
||
const src = readFileSync(join(compDir, f), 'utf8');
|
||
if (/(?:bg|text|border)-(?:emerald|purple)-\d+/.test(src)) unmapped.push(f);
|
||
}
|
||
check('新组件未使用未映射色族', unmapped.length === 0, unmapped.join(' '));
|
||
|
||
// 16) ★ 玻璃不得层层相乘（2026-09-13 用户报："壁纸底上叠了太多不透明层"）。
|
||
//
|
||
// 判据用**算式**而不是感觉：每层都吃同一个 a，两层就是 1-(1-a)²。
|
||
// 缺陷时 a=0.82 ⇒ 两层 0.97、三层 0.995（壁纸在数学上被吃掉）。真实渲染实测
|
||
// （纯红壁纸读绿通道）同样印证：修复前 p95 82%，修复后 62%。
|
||
const varOf = name => {
|
||
const mm = css.match(new RegExp(`--${name}:\\s*([0-9.]+);`)); // 第一次出现 = 浅色那组
|
||
return mm ? Number(mm[1]) : NaN;
|
||
};
|
||
const glass = varOf('bg-glass');
|
||
const inner = varOf('bg-glass-inner');
|
||
const composite = (base, nested, layers) => {
|
||
let opaque = base;
|
||
for (let i = 1; i < layers; i++) opaque = opaque + nested * (1 - opaque);
|
||
return opaque;
|
||
};
|
||
const stacked = composite(glass, inner, 2);
|
||
check('玻璃有"嵌套层"变量', Number.isFinite(glass) && Number.isFinite(inner), `glass=${glass} inner=${inner}`);
|
||
check('有"嵌套面板不再各叠一次"的规则', /\.bg-white \.bg-white \{/.test(css));
|
||
check('两层嵌套后的有效不透明度 ≤ 0.85', stacked <= 0.85, `实际 ${stacked.toFixed(3)}`);
|
||
check('外层玻璃 ≤ 0.70', glass <= 0.7, `实际 ${glass}`);
|
||
check('判据自检：旧值 0.82 层层叠必须算得出 >0.95', composite(0.82, 0.82, 2) > 0.95);
|
||
|
||
// 17) ★ 浅色表面类的接管清单必须跟着源码走。
|
||
//
|
||
// 缺陷的另一半：当时只接管了 white/gray-50/slate-100，而源码里在用的
|
||
// gray-100(24 处)、blue-50(17)、red-50(13)… 全是实心的，正好把壁纸盖住。
|
||
const gen = read('../src/background-takeover.generated.css');
|
||
const used = new Set();
|
||
const walk = dir => {
|
||
for (const e of readdirSync(dir, { withFileTypes: true })) {
|
||
const full = join(dir, e.name);
|
||
if (e.isDirectory()) walk(full);
|
||
else if (/\.(tsx?|jsx?)$/.test(e.name)) {
|
||
const src = readFileSync(full, 'utf8');
|
||
for (const mm of src.matchAll(/bg-[a-z]+-\d{2,3}/g)) {
|
||
if (/^bg-[a-z]+-(50|100|200)$/.test(mm[0])) used.add(mm[0]);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
walk(join(here, '../src'));
|
||
const PAGE_BASE = new Set(['bg-gray-50', 'bg-slate-100']); // 页面底必须保持全透明
|
||
const missing = [...used].filter(c => !PAGE_BASE.has(c) && !gen.includes(`.${c} {`));
|
||
check('源码里用到的浅色表面类全被接管', missing.length === 0, `漏了：${missing.join(', ')}`);
|
||
check('页面底没有被写进半透明清单', [...PAGE_BASE].every(b => !gen.includes(`.${b} {`)));
|
||
check('清单不是空跑（至少扫到 10 个类）', used.size >= 10, `实际 ${used.size}`);
|
||
|
||
console.log(`\n背景：${pass} 通过${fail ? `，${fail} 失败` : ''}`);
|
||
process.exit(fail ? 1 : 0);
|