diff --git a/apps/web_v1/scripts/visual-check.mjs b/apps/web_v1/scripts/visual-check.mjs index 341c0c3..9064ca8 100644 --- a/apps/web_v1/scripts/visual-check.mjs +++ b/apps/web_v1/scripts/visual-check.mjs @@ -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}`) diff --git a/apps/web_v1/src/App.css b/apps/web_v1/src/App.css index 8804efe..bfa51ac 100644 --- a/apps/web_v1/src/App.css +++ b/apps/web_v1/src/App.css @@ -59,8 +59,10 @@ } .login-card.arco-card { - width: min(1180px, 96vw); + width: min(960px, 100%); min-height: 430px; + display: grid; + grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); overflow: hidden; border-color: var(--color-border); border-radius: var(--radius-control); @@ -68,20 +70,19 @@ } .login-card .arco-card-body { - display: grid; - grid-template-columns: 1fr 1.1fr 1fr; + display: contents; padding: 0; } .login-brand-panel, -.login-form-panel, -.login-value-panel { +.login-form-panel { + min-width: 0; min-height: 430px; padding: 42px; + box-sizing: border-box; } -.login-brand-panel, -.login-form-panel { +.login-brand-panel { border-right: 1px solid var(--color-border); } @@ -125,16 +126,6 @@ font-weight: 600; } -.login-footer-links { - align-self: end; - flex-wrap: wrap; - margin-top: 72px; -} - -.login-footer-links .arco-typography { - white-space: nowrap; -} - .login-form-panel { display: grid; align-content: center; @@ -144,6 +135,12 @@ margin-top: 20px; } +.login-form .arco-input-wrapper, +.login-form .arco-input-password, +.login-form > .arco-btn { + width: 100%; +} + .login-row { display: flex; align-items: center; @@ -179,35 +176,6 @@ font-weight: 600; } -.login-value-panel { - display: grid; - align-content: center; - gap: 18px; -} - -.value-point { - display: grid; - grid-template-columns: 42px 1fr; - gap: var(--space-3); - align-items: center; -} - -.value-point > span { - width: 42px; - height: 42px; - display: grid; - place-items: center; - border-radius: 999px; - background: var(--color-soft-blue); - color: var(--color-primary); - font-size: 22px; -} - -.value-title { - display: block; - font-weight: 700; -} - .workbench-shell { height: 100vh; display: grid; @@ -2029,23 +1997,47 @@ padding-top: 14px; } -@media (max-width: 1180px) { - .workbench-shell { - min-width: 1180px; +@media (max-width: 760px) { + .login-screen { + place-items: start stretch; + padding: 16px; } - .login-card .arco-card-body { + .login-card.arco-card { grid-template-columns: 1fr; + min-height: 0; } .login-brand-panel, .login-form-panel { min-height: auto; + padding: 24px; + } + + .login-brand-panel { border-right: 0; border-bottom: 1px solid var(--color-border); } - .login-value-panel { - min-height: auto; + .login-row, + .connection-card { + grid-template-columns: 1fr; + } + + .login-row { + align-items: stretch; + flex-direction: column; + gap: var(--space-2); + } + + .login-row .arco-btn, + .connection-card .arco-btn { + width: 100%; + } +} + +@media (max-width: 1180px) { + .workbench-shell { + min-width: 1180px; } } diff --git a/apps/web_v1/src/pages/login.tsx b/apps/web_v1/src/pages/login.tsx index f5ba0bd..21aaf17 100644 --- a/apps/web_v1/src/pages/login.tsx +++ b/apps/web_v1/src/pages/login.tsx @@ -1,17 +1,13 @@ -import type { ReactElement } from 'react' import { useEffect, useState } from 'react' import { Button, Card, Form, Input, Space, Typography } from '@arco-design/web-react' import { - IconBook, IconCheckCircleFill, IconCloseCircleFill, IconLaunch, IconLoading, - IconSafe, - IconUserGroup, } from '@arco-design/web-react/icon' -const { Title, Text, Paragraph } = Typography +const { Title, Text } = Typography type ConnectionStatus = 'checking' | 'online' | 'offline' @@ -42,12 +38,7 @@ export function LoginPage({ onLogin }: { onLogin: (input: { server: string; emai 森林AI 私有部署 · 安全可控的智能协作平台 - 知识沉淀 · 团队协作 · AI Agent - - v1.0.0 - 隐私政策 - 服务协议 - + 知识沉淀 · 团队协作 · AI 助手
@@ -77,16 +68,6 @@ export function LoginPage({ onLogin }: { onLogin: (input: { server: string; emai
- -
- 安全 · 专注 · 高效 - - 森林AI 是面向知识工作者与内部团队的私有部署工作台,帮助团队在统一空间中收集信息、整理知识、协同决策。 - - } title="私有部署,数据自有" desc="所有数据与模型运行在您的环境中,安全可控。" /> - } title="知识沉淀,结构清晰" desc="从收集到整理,形成可复用的团队知识库。" /> - } title="协同高效,聚焦成果" desc="围绕项目与任务协同,减少沟通成本,专注交付。" /> -
) @@ -133,15 +114,3 @@ function normalizeBaseUrl(value: string) { const trimmed = value.trim() return trimmed.endsWith('/') ? trimmed.slice(0, -1) : trimmed } - -function ValuePoint({ icon, title, desc }: { icon: ReactElement; title: string; desc: string }) { - return ( -
- {icon} -
- {title} - {desc} -
-
- ) -}