fix(web): make login responsive

2026-07-21 13:04:57 +08:00
parent 90266f587d
commit 075d007358
3 changed files with 85 additions and 86 deletions
--- 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}`)
--- 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;
  }
 }
--- 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
            <Title heading={2}>森林AI</Title>
          </div>
          <Text className="login-slogan">私有部署 · 安全可控的智能协作平台</Text>
-          <Text type="secondary">知识沉淀 · 团队协作 · AI Agent</Text>
-          <Space className="login-footer-links" size={24}>
-            <Text type="secondary">v1.0.0</Text>
-            <Text type="secondary">隐私政策</Text>
-            <Text type="secondary">服务协议</Text>
-          </Space>
+          <Text type="secondary">知识沉淀 · 团队协作 · AI 助手</Text>
        </div>

        <div className="login-form-panel">
@@ -77,16 +68,6 @@ export function LoginPage({ onLogin }: { onLogin: (input: { server: string; emai
            </Button>
          </Form>
        </div>
-
-        <div className="login-value-panel">
-          <Title heading={3}>安全 · 专注 · 高效</Title>
-          <Paragraph>
-            森林AI 是面向知识工作者与内部团队的私有部署工作台，帮助团队在统一空间中收集信息、整理知识、协同决策。
-          </Paragraph>
-          <ValuePoint icon={<IconSafe />} title="私有部署，数据自有" desc="所有数据与模型运行在您的环境中，安全可控。" />
-          <ValuePoint icon={<IconBook />} title="知识沉淀，结构清晰" desc="从收集到整理，形成可复用的团队知识库。" />
-          <ValuePoint icon={<IconUserGroup />} title="协同高效，聚焦成果" desc="围绕项目与任务协同，减少沟通成本，专注交付。" />
-        </div>
      </Card>
    </section>
  )
@@ -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 (
-    <div className="value-point">
-      <span>{icon}</span>
-      <div>
-        <Text className="value-title">{title}</Text>
-        <Text type="secondary">{desc}</Text>
-      </div>
-    </div>
-  )
-}