diff --git a/README.md b/README.md index 91bcadf..dc41552 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ 姜十三论坛首页 - 浅色主题三栏布局 -浅色主题 · V2EX/NGA 风格三栏布局 · 虚拟滚动帖列表 +浅色主题 · 三栏布局 · Feed 排序 · 虚拟滚动帖列表
@@ -43,7 +43,7 @@ 浅色主题首页
浅色主题
- 左栏板块导航 · 中间帖列表 · 右栏热门/动态/在线 + 左栏板块导航 · Feed 排序切换 · 右栏热门/动态/在线 暗色主题首页 @@ -55,19 +55,19 @@ 帖子详情页
帖子详情
- 楼层式回复 · 引用回复 · 登录可见内容 + TipTap 富文本渲染 · 标签展示 · 点赞收藏互动 移动端首页
移动端适配
- 侧栏自动收起 · 触控友好 · 板块快捷筛选 + 板块快捷筛选 · Feed 排序 · 触控友好列表

发帖页 -
发帖 — TipTap 富文本编辑器，支持本地上传图片 +
发帖 — 板块胶囊选择 · TipTap 工具栏 · 本地上传图片

--- @@ -191,6 +191,7 @@ make dev # Linux / macOS - 修改 Go 代码、HTML 模板、embed 静态资源 → `go build` / `make build` - 发布单二进制前 → `npm run build` + `make build` +- 更新 README 界面截图 → 启动服务后执行 `node scripts/capture-screenshots.mjs` > 直接访问 `:3000` 看到的是上次 build 嵌入的前端；开发时请用 `:5173`。 diff --git a/docs/screenshots/compose.png b/docs/screenshots/compose.png index 5ee246d..9e8bc27 100644 Binary files a/docs/screenshots/compose.png and b/docs/screenshots/compose.png differ diff --git a/docs/screenshots/home-dark.png b/docs/screenshots/home-dark.png index 729e952..0604ce9 100644 Binary files a/docs/screenshots/home-dark.png and b/docs/screenshots/home-dark.png differ diff --git a/docs/screenshots/home-light.png b/docs/screenshots/home-light.png index 2d27755..c4d17d6 100644 Binary files a/docs/screenshots/home-light.png and b/docs/screenshots/home-light.png differ diff --git a/docs/screenshots/mobile-home.png b/docs/screenshots/mobile-home.png index 8b63ce1..43a7ce6 100644 Binary files a/docs/screenshots/mobile-home.png and b/docs/screenshots/mobile-home.png differ diff --git a/docs/screenshots/post-detail.png b/docs/screenshots/post-detail.png index a8239ed..029075b 100644 Binary files a/docs/screenshots/post-detail.png and b/docs/screenshots/post-detail.png differ diff --git a/scripts/capture-screenshots.mjs b/scripts/capture-screenshots.mjs index 7d6fa04..36ba587 100644 --- a/scripts/capture-screenshots.mjs +++ b/scripts/capture-screenshots.mjs @@ -7,6 +7,11 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url)); const outDir = path.join(__dirname, '..', 'docs', 'screenshots'); const base = process.env.J13_URL || 'http://localhost:8080'; +/** 用于发帖页截图的演示账号 */ +const DEMO_USER = { username: 'admin', password: 'admin123' }; +/** 富文本示例帖，用于详情页截图 */ +const DEMO_POST_ID = Number(process.env.J13_POST_ID || 36); + async function shot(page, name, opts = {}) { const file = path.join(outDir, name); await page.screenshot({ path: file, type: 'png', ...opts }); @@ -21,6 +26,16 @@ async function setTheme(page, theme) { }, theme); } +/** 通过登录页写入 Cookie，供发帖页等需登录场景使用 */ +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); +} + const browser = await chromium.launch(); const context = await browser.newContext({ deviceScaleFactor: 2 }); @@ -33,7 +48,8 @@ try { await page.setViewportSize({ width: 1440, height: 900 }); await setTheme(page, 'light'); await page.goto(`${base}/`, { waitUntil: 'networkidle' }); - await page.waitForTimeout(800); + await page.waitForSelector('.feed-sort-bar, .virtual-post-list, .post-list', { timeout: 10000 }); + await page.waitForTimeout(1000); await shot(page, 'home-light.png'); await page.close(); } @@ -44,30 +60,42 @@ try { await page.setViewportSize({ width: 1440, height: 900 }); await setTheme(page, 'dark'); await page.goto(`${base}/`, { waitUntil: 'networkidle' }); - await page.waitForTimeout(800); + await page.waitForSelector('.feed-sort-bar, .virtual-post-list, .post-list', { timeout: 10000 }); + await page.waitForTimeout(1000); 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/2`, { waitUntil: 'networkidle' }); - await page.waitForTimeout(1000); + await page.goto(`${base}/post/${DEMO_POST_ID}`, { waitUntil: 'networkidle' }); + await page.waitForSelector('.post-detail-page, .post-detail-title', { timeout: 10000 }); + await page.waitForTimeout(1200); await shot(page, 'post-detail.png'); await page.close(); } - // 发帖编辑器 + // 发帖编辑器（需登录） { 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.waitForTimeout(800); - await shot(page, 'compose.png'); + await shot(page, 'compose.png', { + clip: { x: 0, y: 56, width: 1440, height: 844 }, + }); await page.close(); } @@ -77,7 +105,8 @@ try { await page.setViewportSize({ width: 390, height: 844 }); await setTheme(page, 'light'); await page.goto(`${base}/`, { waitUntil: 'networkidle' }); - await page.waitForTimeout(800); + 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 page.close(); }