kate522andClaude Opus 5
d07cffe99e
首轮实机体验暴露的问题： - 投稿页仍在渲染主题头部的 all_top_fluid 挂件区、页脚与浮动入口， 与工作台顶栏重复。header.php / footer.php 新增 jio_render_header、 jio_render_footer、jio_render_fluid_widgets 过滤器，工作台模式下全部关闭 - 区块 Inspector 被写在 BlockList 之后，作为正文流的一部分渲染出 一个巨大的「未选择区块」白框；移除内联 Inspector（区块设置改由 行内工具栏的区块菜单提供） - 中文正文被 wordcount 的 'words' 口径算成「字数：1」；改用 characters_excluding_spaces，与前台 TinyMCE 字数一致 - 行宽 820px、标题 34px 偏松散；收窄到 720px / 27px，正文 16px/1.85， 段落间距与选区描边收敛，行内工具栏改为深色圆角悬浮条 新增本地视觉验收脚本（不参与运行时）： - scripts/preview.cjs：用模拟 bootstrap 生成离线预览页 - scripts/shoot.cjs：桌面/移动端截图与控制台错误采集 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
76 lines
2.7 KiB
JavaScript
76 lines
2.7 KiB
JavaScript
/**
|
|
* 截图：打开预览页并保存桌面 / 移动端截图，同时把配色、字体与布局尺寸打印出来。
|
|
*/
|
|
const fs = require('fs');
|
|
const puppeteer = require('puppeteer-core');
|
|
|
|
const CANDIDATES = [
|
|
process.env.JIO_BROWSER,
|
|
'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
|
|
'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
|
|
'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
|
|
'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
|
|
].filter(Boolean);
|
|
const BROWSER = CANDIDATES.find((p) => fs.existsSync(p));
|
|
|
|
const URL = process.argv[2] || 'https://localhost/jio-preview.html';
|
|
const PREFIX = process.argv[3] || 'C:/Users/Xing/Desktop/WP-Date/data/wordpress/shot';
|
|
|
|
(async () => {
|
|
if (!BROWSER) {
|
|
console.error('no browser');
|
|
process.exit(1);
|
|
}
|
|
const browser = await puppeteer.launch({
|
|
executablePath: BROWSER,
|
|
headless: 'new',
|
|
ignoreHTTPSErrors: true,
|
|
args: ['--disable-gpu', '--no-sandbox'],
|
|
});
|
|
|
|
for (const [name, viewport] of [
|
|
['desktop', { width: 1440, height: 1000 }],
|
|
['mobile', { width: 390, height: 844, isMobile: true, hasTouch: true }],
|
|
]) {
|
|
const page = await browser.newPage();
|
|
await page.setViewport(viewport);
|
|
await page.goto(URL, { waitUntil: 'networkidle2', timeout: 60000 });
|
|
await new Promise((r) => setTimeout(r, 2000));
|
|
await page.screenshot({ path: `${PREFIX}-${name}.png` });
|
|
|
|
const metrics = await page.evaluate(() => {
|
|
const pick = (sel) => {
|
|
const el = document.querySelector(sel);
|
|
if (!el) return null;
|
|
const cs = getComputedStyle(el);
|
|
const r = el.getBoundingClientRect();
|
|
return {
|
|
text: (el.textContent || '').trim().slice(0, 40),
|
|
font: `${cs.fontSize}/${cs.lineHeight} ${cs.fontFamily.split(',')[0]}`,
|
|
weight: cs.fontWeight,
|
|
color: cs.color,
|
|
bg: cs.backgroundColor,
|
|
pad: cs.padding,
|
|
box: `${Math.round(r.width)}x${Math.round(r.height)}`,
|
|
};
|
|
};
|
|
return {
|
|
bar: pick('.jio-creator__bar'),
|
|
title: pick('.jio-creator__title textarea'),
|
|
excerpt: pick('.jio-creator__excerpt textarea'),
|
|
canvas: pick('.jio-creator__canvas'),
|
|
para: pick('.block-editor-block-list__block'),
|
|
appender: pick('.block-editor-default-block-appender'),
|
|
primaryBtn: pick('.jio-creator__primary'),
|
|
ghostBtn: pick('.jio-creator__ghost'),
|
|
pageBg: getComputedStyle(document.body).backgroundColor,
|
|
};
|
|
});
|
|
console.log(`=== ${name} ===`);
|
|
console.log(JSON.stringify(metrics, null, 2));
|
|
await page.close();
|
|
}
|
|
|
|
await browser.close();
|
|
})();
|