117 lines
4.3 KiB
TypeScript
117 lines
4.3 KiB
TypeScript
import { useEffect, useState } from 'react'
|
||
import { Button, Card, Form, Input, Space, Typography } from '@arco-design/web-react'
|
||
import {
|
||
IconCheckCircleFill,
|
||
IconCloseCircleFill,
|
||
IconLaunch,
|
||
IconLoading,
|
||
} from '@arco-design/web-react/icon'
|
||
|
||
const { Title, Text } = Typography
|
||
|
||
type ConnectionStatus = 'checking' | 'online' | 'offline'
|
||
|
||
export function LoginPage({ onLogin }: { onLogin: (input: { server: string; email: string; password: string }) => void }) {
|
||
const [server, setServer] = useState('http://localhost:9150')
|
||
const [email, setEmail] = useState('demo@senlin.ai')
|
||
const [password, setPassword] = useState('password123')
|
||
const [status, setStatus] = useState<ConnectionStatus>('checking')
|
||
|
||
useEffect(() => {
|
||
const controller = new AbortController()
|
||
const timer = window.setTimeout(() => {
|
||
void checkServerStatus(server, controller.signal, setStatus)
|
||
}, 300)
|
||
|
||
return () => {
|
||
controller.abort()
|
||
window.clearTimeout(timer)
|
||
}
|
||
}, [server])
|
||
|
||
return (
|
||
<section className="login-screen">
|
||
<Card className="login-card" bordered>
|
||
<div className="login-brand-panel">
|
||
<div className="brand-lockup large">
|
||
<img className="brand-icon" src="/senlinai-icon.svg" alt="" />
|
||
<Title heading={2}>森林AI</Title>
|
||
</div>
|
||
<Text className="login-slogan">私有部署 · 安全可控的智能协作平台</Text>
|
||
<Text type="secondary">知识沉淀 · 团队协作 · AI 助手</Text>
|
||
</div>
|
||
|
||
<div className="login-form-panel">
|
||
<Title heading={4}>登录到您的森林AI</Title>
|
||
<Text type="secondary">连接私有工作台</Text>
|
||
<Form layout="vertical" className="login-form">
|
||
<Form.Item label="服务器地址（IP 或域名优先）">
|
||
<Input value={server} onChange={setServer} placeholder="例如：https://10.0.0.15:8080" suffix={<IconLaunch />} />
|
||
<ConnectionCard status={status} onCheck={() => checkServerStatus(server, undefined, setStatus)} />
|
||
</Form.Item>
|
||
|
||
<Form.Item label="账号">
|
||
<Input value={email} onChange={setEmail} placeholder="请输入用户名或邮箱" />
|
||
</Form.Item>
|
||
<Form.Item label="密码">
|
||
<Input.Password value={password} onChange={setPassword} placeholder="请输入密码" />
|
||
</Form.Item>
|
||
<div className="login-row">
|
||
<Space size={8}>
|
||
<span className="check-dot" />
|
||
<Text>记住服务器地址</Text>
|
||
</Space>
|
||
<Button type="text" size="mini">无法连接?</Button>
|
||
</div>
|
||
<Button type="primary" long size="large" onClick={() => onLogin({ server, email, password })}>
|
||
登录
|
||
</Button>
|
||
</Form>
|
||
</div>
|
||
</Card>
|
||
</section>
|
||
)
|
||
}
|
||
|
||
function ConnectionCard({ status, onCheck }: { status: ConnectionStatus; onCheck: () => void }) {
|
||
const icon = status === 'checking' ? <IconLoading /> : status === 'online' ? <IconCheckCircleFill /> : <IconCloseCircleFill />
|
||
const title = status === 'checking' ? '正在检查' : status === 'online' ? '连接正常' : '连接异常'
|
||
|
||
return (
|
||
<div className={`connection-card ${status}`}>
|
||
{icon}
|
||
<div>
|
||
<Text className="connection-title">{title}</Text>
|
||
</div>
|
||
<Button type="text" size="mini" loading={status === 'checking'} onClick={onCheck}>
|
||
重新检查
|
||
</Button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
async function checkServerStatus(
|
||
server: string,
|
||
signal: AbortSignal | undefined,
|
||
setStatus: (status: ConnectionStatus) => void,
|
||
) {
|
||
const baseUrl = normalizeBaseUrl(server)
|
||
setStatus('checking')
|
||
|
||
try {
|
||
const response = await fetch(`${baseUrl}/api/status`, { signal })
|
||
if (!response.ok) throw new Error(`HTTP ${response.status}`)
|
||
const payload = await response.json() as { timestamp_ms?: number }
|
||
if (typeof payload.timestamp_ms !== 'number') throw new Error('invalid status payload')
|
||
setStatus('online')
|
||
} catch (error) {
|
||
if (error instanceof DOMException && error.name === 'AbortError') return
|
||
setStatus('offline')
|
||
}
|
||
}
|
||
|
||
function normalizeBaseUrl(value: string) {
|
||
const trimmed = value.trim()
|
||
return trimmed.endsWith('/') ? trimmed.slice(0, -1) : trimmed
|
||
}
|