项目截图、readme更新
This commit is contained in:
@@ -5,12 +5,24 @@ import { fileURLToPath } from 'node:url';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const outDir = path.join(__dirname, '..', 'docs', 'screenshots');
|
||||
const base = process.env.J13_URL || 'http://localhost:8080';
|
||||
/** 默认抓取在线演示站；本地可用 J13_URL=http://localhost:3000 */
|
||||
const base = (process.env.J13_URL || 'https://bbs.iioio.com').replace(/\/$/, '');
|
||||
|
||||
/** 用于发帖页截图的演示账号 */
|
||||
const DEMO_USER = { username: 'admin', password: 'admin123' };
|
||||
/** 富文本示例帖，用于详情页截图 */
|
||||
const DEMO_POST_ID = Number(process.env.J13_POST_ID || 36);
|
||||
/** 用于发帖页截图的演示账号（本地开发时填写） */
|
||||
const DEMO_USER = {
|
||||
username: process.env.J13_USER || 'admin',
|
||||
password: process.env.J13_PASS || 'admin123',
|
||||
};
|
||||
/** 帖子详情 / 富文本展示用帖 ID */
|
||||
const DEMO_POST_ID = Number(process.env.J13_POST_ID || 1);
|
||||
const RICH_POST_ID = Number(process.env.J13_RICH_POST_ID || 8);
|
||||
/** 演示站开启永久链接时带 .html */
|
||||
const permalinkExt = process.env.J13_PERMALINK_EXT || 'html';
|
||||
|
||||
function postPath(id) {
|
||||
const ext = permalinkExt ? `.${permalinkExt.replace(/^\./, '')}` : '';
|
||||
return `${base}/post/${id}${ext}`;
|
||||
}
|
||||
|
||||
async function shot(page, name, opts = {}) {
|
||||
const file = path.join(outDir, name);
|
||||
@@ -26,14 +38,25 @@ async function setTheme(page, theme) {
|
||||
}, theme);
|
||||
}
|
||||
|
||||
/** 通过登录页写入 Cookie，供发帖页等需登录场景使用 */
|
||||
async function waitFeed(page) {
|
||||
await page.waitForSelector('.feed-sort-bar, .virtual-post-list, .post-list', { timeout: 15000 });
|
||||
await page.waitForTimeout(1000);
|
||||
}
|
||||
|
||||
/** 通过登录页写入 Cookie；失败时返回 false（演示站无账号时跳过发帖页） */
|
||||
async function login(page) {
|
||||
await page.goto(`${base}/login`, { waitUntil: 'networkidle' });
|
||||
await page.fill('input[name="username"], #username, input[autocomplete="username"]', DEMO_USER.username);
|
||||
await page.fill('input[name="password"], #password, input[type="password"]', DEMO_USER.password);
|
||||
await page.click('button[type="submit"]');
|
||||
await page.waitForURL((url) => !url.pathname.endsWith('/login'), { timeout: 10000 });
|
||||
await page.waitForTimeout(600);
|
||||
try {
|
||||
await page.goto(`${base}/login`, { waitUntil: 'networkidle' });
|
||||
await page.fill('input[name="username"], #username, input[autocomplete="username"]', DEMO_USER.username);
|
||||
await page.fill('input[name="password"], #password, input[type="password"]', DEMO_USER.password);
|
||||
await page.click('button[type="submit"]');
|
||||
await page.waitForURL((url) => !url.pathname.endsWith('/login'), { timeout: 10000 });
|
||||
await page.waitForTimeout(600);
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.warn('login skipped:', err.message);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const browser = await chromium.launch();
|
||||
@@ -48,8 +71,7 @@ try {
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await setTheme(page, 'light');
|
||||
await page.goto(`${base}/`, { waitUntil: 'networkidle' });
|
||||
await page.waitForSelector('.feed-sort-bar, .virtual-post-list, .post-list', { timeout: 10000 });
|
||||
await page.waitForTimeout(1000);
|
||||
await waitFeed(page);
|
||||
await shot(page, 'home-light.png');
|
||||
await page.close();
|
||||
}
|
||||
@@ -60,54 +82,72 @@ try {
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await setTheme(page, 'dark');
|
||||
await page.goto(`${base}/`, { waitUntil: 'networkidle' });
|
||||
await page.waitForSelector('.feed-sort-bar, .virtual-post-list, .post-list', { timeout: 10000 });
|
||||
await page.waitForTimeout(1000);
|
||||
await waitFeed(page);
|
||||
await shot(page, 'home-dark.png');
|
||||
await page.close();
|
||||
}
|
||||
|
||||
// 帖子详情（富文本 + 楼层回复）
|
||||
// 帖子详情（介绍文 / 目录）
|
||||
{
|
||||
const page = await context.newPage();
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await setTheme(page, 'light');
|
||||
await page.goto(`${base}/post/${DEMO_POST_ID}`, { waitUntil: 'networkidle' });
|
||||
await page.waitForSelector('.post-detail-page, .post-detail-title', { timeout: 10000 });
|
||||
await page.goto(postPath(DEMO_POST_ID), { waitUntil: 'networkidle' });
|
||||
await page.waitForSelector('.post-detail-page, .post-detail-title, h1', { timeout: 15000 });
|
||||
await page.waitForTimeout(1200);
|
||||
await shot(page, 'post-detail.png');
|
||||
await page.close();
|
||||
}
|
||||
|
||||
// 发帖编辑器（需登录）
|
||||
// 富文本帖（图片 + 代码高亮，展示 TipTap 渲染）
|
||||
{
|
||||
const page = await context.newPage();
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await setTheme(page, 'light');
|
||||
await login(page);
|
||||
await page.goto(`${base}/compose`, { waitUntil: 'networkidle' });
|
||||
await page.waitForSelector('.compose-page, .compose-canvas, .article-editor', { timeout: 10000 });
|
||||
await page.fill('.compose-title', '分享你的技术见解');
|
||||
const editor = page.locator('.article-editor .ProseMirror, .article-editor [contenteditable="true"]').first();
|
||||
if (await editor.count()) {
|
||||
await editor.click();
|
||||
await editor.fill('支持 **粗体**、列表、代码块与图片上传的 TipTap 编辑器。');
|
||||
await page.goto(postPath(RICH_POST_ID), { waitUntil: 'networkidle' });
|
||||
await page.waitForSelector('.post-detail-page, .post-detail-title, h1', { timeout: 15000 });
|
||||
const img = page.locator('.article-img, .post-detail-page img, article img').first();
|
||||
if (await img.count()) {
|
||||
await img.scrollIntoViewIfNeeded();
|
||||
await page.waitForTimeout(400);
|
||||
}
|
||||
await page.waitForTimeout(800);
|
||||
await shot(page, 'compose.png', {
|
||||
clip: { x: 0, y: 56, width: 1440, height: 844 },
|
||||
});
|
||||
await shot(page, 'post-rich.png');
|
||||
await page.close();
|
||||
}
|
||||
|
||||
// 移动端
|
||||
// 发帖编辑器（需登录；演示站无账号时自动跳过）
|
||||
{
|
||||
const page = await context.newPage();
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await setTheme(page, 'light');
|
||||
const ok = await login(page);
|
||||
if (ok) {
|
||||
await page.goto(`${base}/compose`, { waitUntil: 'networkidle' });
|
||||
await page.waitForSelector('.compose-page, .compose-canvas, .article-editor', { timeout: 10000 });
|
||||
await page.fill('.compose-title', '分享你的技术见解');
|
||||
const editor = page.locator('.article-editor .ProseMirror, .article-editor [contenteditable="true"]').first();
|
||||
if (await editor.count()) {
|
||||
await editor.click();
|
||||
await editor.fill('支持 **粗体**、列表、代码块与图片上传的 TipTap 编辑器。');
|
||||
}
|
||||
await page.waitForTimeout(800);
|
||||
await shot(page, 'compose.png', {
|
||||
clip: { x: 0, y: 56, width: 1440, height: 844 },
|
||||
});
|
||||
} else {
|
||||
console.warn('compose.png 未生成：请设置 J13_USER / J13_PASS 后重试');
|
||||
}
|
||||
await page.close();
|
||||
}
|
||||
|
||||
// 移动端首页
|
||||
{
|
||||
const page = await context.newPage();
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await setTheme(page, 'light');
|
||||
await page.goto(`${base}/`, { waitUntil: 'networkidle' });
|
||||
await page.waitForSelector('.feed-sort-bar, .virtual-post-list, .post-list', { timeout: 10000 });
|
||||
await page.waitForTimeout(1000);
|
||||
await shot(page, 'mobile-home.png', { fullPage: true });
|
||||
await waitFeed(page);
|
||||
await shot(page, 'mobile-home.png');
|
||||
await page.close();
|
||||
}
|
||||
} finally {
|
||||
|
||||
Reference in New Issue
Block a user