bigcode
3f87153ce3
- 五主题 --container 令牌统一为 80rem(原 launchai 72 / ledger·devai 64 / findai 56) - loading 骨架、alternatives/comparison 视图页容器同步放宽 - 新增 verify-widths.ts 实测脚本(1440 视口下断言容器 1280px)
61 lines
2.5 KiB
TypeScript
61 lines
2.5 KiB
TypeScript
/**
|
||
* # 脚本 verify-widths
|
||
* 说明：验证五站 PC 端容器宽度统一为 80rem(1280px) > 1200px。
|
||
* 在 1440x900 视口下打开各站 /tools,测量:
|
||
* 1. .site-container 的 computed max-width(应为 1280px)
|
||
* 2. header 内 .site-container 的实际盒宽(应 1280px,且 > 1200)
|
||
* 3. 工具卡片网格的实际盒宽(应 1280px)
|
||
* 并整页截图供目检。
|
||
*/
|
||
import { chromium } from "playwright";
|
||
|
||
const SITES = [
|
||
{ name: "ai-stack", port: 3001 },
|
||
{ name: "launchai", port: 3002 },
|
||
{ name: "the-ai-ledger", port: 3003 },
|
||
{ name: "devai-tools", port: 3004 },
|
||
{ name: "findai", port: 3005 },
|
||
];
|
||
|
||
const browser = await chromium.launch({
|
||
executablePath: "/opt/brave.com/brave/brave",
|
||
args: ["--no-sandbox", "--disable-dev-shm-usage"],
|
||
});
|
||
|
||
let failed = false;
|
||
for (const site of SITES) {
|
||
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
|
||
await page.goto(`http://localhost:${site.port}/tools`, { waitUntil: "networkidle" });
|
||
const m = await page.evaluate(() => {
|
||
const cs = (el) => (el ? getComputedStyle(el).maxWidth : null);
|
||
const box = (el) => (el ? Math.round(el.getBoundingClientRect().width) : null);
|
||
const header = document.querySelector("header .site-container");
|
||
const grid = document.querySelector("header .site-container")
|
||
? null
|
||
: null;
|
||
// /tools 页内容列:找第一个 grid 布局的工具列表容器(向上找最近的 .site-container)
|
||
const all = [...document.querySelectorAll(".site-container")];
|
||
const widths = all.slice(0, 6).map((el) => ({
|
||
cls: el.className.split(" ").slice(0, 3).join(" "),
|
||
maxW: cs(el),
|
||
w: box(el),
|
||
}));
|
||
// 卡片网格实际宽度
|
||
const gridEl = [...document.querySelectorAll(".grid")].find((g) => g.children.length >= 8);
|
||
return { count: all.length, widths, gridW: box(gridEl) };
|
||
});
|
||
const okMax = m.widths.every((w) => parseFloat(w.maxW) === 1280);
|
||
const okBox = m.widths.every((w) => w.w > 1200);
|
||
// 网格为容器 px-4(16px×2) 内的内容宽,≥1200 即达标
|
||
const pass = okMax && okBox && m.gridW >= 1200;
|
||
console.log(
|
||
`${pass ? "PASS" : "FAIL"} ${site.name}: containers=${m.count} grid=${m.gridW}px\n` +
|
||
m.widths.map((w) => ` ${w.w}px (max ${w.maxW}) ${w.cls}`).join("\n")
|
||
);
|
||
if (!pass) failed = true;
|
||
await page.screenshot({ path: `/tmp/width-${site.name}.png`, fullPage: false });
|
||
await page.close();
|
||
}
|
||
await browser.close();
|
||
process.exit(failed ? 1 : 0);
|