senlinai/agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): make login responsive

Browse Source
This commit is contained in:
yanweidong
2026-07-21 13:04:57 +08:00
parent 90266f587d
commit 075d007358
3 changed files with 85 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/web_v1/scripts/visual-check.mjs
View File

@@ -17,10 +17,22 @@ await server.listen()
const browser = await chromium.launch({ headless: true })
const page = await browser.newPage({ viewport: { width: 1440, height: 1024 }, deviceScaleFactor: 1 })
const errors = []
const failures = []
page.on('console', (message) => {
if (message.type() === 'error') errors.push(message.text())
})
const collectLoginMetrics = async () => page.evaluate(() => {
const loginCard = document.querySelector('.login-card')
return {
overflowX: document.documentElement.scrollWidth > document.documentElement.clientWidth,
title: document.title,
width: loginCard?.getBoundingClientRect().width ?? 0,
columns: loginCard ? getComputedStyle(loginCard).gridTemplateColumns : 'none',
}
})
const collectMetrics = async () => page.evaluate(() => {
const statusbar = document.querySelector('.statusbar')
const statusName = document.querySelector('.status-name')
@@ -105,6 +117,33 @@ const collectMetrics = async () => page.evaluate(() => {
await page.goto(`http://127.0.0.1:${port}/`, { waitUntil: 'networkidle' })
await page.screenshot({ path: 'test-results/login-react-acro.png', fullPage: true })
const desktopLoginMetrics = await collectLoginMetrics()
if (desktopLoginMetrics.overflowX) failures.push('login must not overflow horizontally')
if (desktopLoginMetrics.title !== '森林AI') failures.push(`unexpected title ${desktopLoginMetrics.title}`)
await page.setViewportSize({ width: 390, height: 844 })
await page.screenshot({ path: 'test-results/login-react-acro-mobile.png', fullPage: true })
const mobileLoginMetrics = await collectLoginMetrics()
const mobileColumnCount = mobileLoginMetrics.columns === 'none'
? 0
: mobileLoginMetrics.columns.split(' ').filter(Boolean).length
if (mobileLoginMetrics.overflowX) failures.push('mobile login must not overflow horizontally')
if (mobileLoginMetrics.width > 390) failures.push(`mobile login card must fit viewport, got ${mobileLoginMetrics.width}`)
if (mobileColumnCount !== 1) failures.push(`mobile login must use one column, got ${mobileLoginMetrics.columns}`)
if (failures.length) {
throw new Error(failures.join('\n'))
}
if (process.env.VISUAL_CHECK_SCOPE === 'login') {
console.log(JSON.stringify({ desktopLoginMetrics, mobileLoginMetrics, errors }, null, 2))
await browser.close()
await server.close()
if (failures.length) throw new Error(failures.join('\n'))
process.exit(0)
}
await page.setViewportSize({ width: 1440, height: 1024 })
await page.locator('.login-form-panel .arco-btn-primary').click()
await page.waitForSelector('.workbench-shell')
await page.waitForTimeout(700)
@@ -168,7 +207,6 @@ console.log(JSON.stringify({
errors,
}, null, 2))
const failures = []
const metrics = workspaceMetrics
if (errors.length) failures.push(`console errors: ${errors.join('; ')}`)
if (metrics.statusbarHeight !== 32) failures.push(`expected statusbar height 32, got ${metrics.statusbarHeight}`)