88 lines
3.8 KiB
TypeScript
88 lines
3.8 KiB
TypeScript
|
import type { ReactElement } from 'react'
|
|||
|
|
import { useState } from 'react'
|
|||
|
|
import { Button, Card, Form, Input, Space, Typography } from '@arco-design/web-react'
|
|||
|
|
import { IconBook, IconCheckCircleFill, IconLaunch, IconSafe, IconUserGroup } from '@arco-design/web-react/icon'
|
|||
|
|
|
|||
|
|
const { Title, Text, Paragraph } = Typography
|
|||
|
|
|
|||
|
|
export function LoginPage({ onLogin }: { onLogin: () => void }) {
|
|||
|
|
const [server, setServer] = useState('https://10.0.0.15:8080')
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section className="login-screen">
|
|||
|
|
<Card className="login-card" bordered>
|
|||
|
|
<div className="login-brand-panel">
|
|||
|
|
<div className="brand-lockup large">
|
|||
|
|
<span className="brand-symbol">S</span>
|
|||
|
|
<Title heading={2}>SenlinAI</Title>
|
|||
|
|
</div>
|
|||
|
|
<Text className="login-slogan">私有部署 · 安全可控的智能协作平台</Text>
|
|||
|
|
<Text type="secondary">知识沉淀 · 团队协作 · AI 助理</Text>
|
|||
|
|
<Space className="login-footer-links" size={24}>
|
|||
|
|
<Text type="secondary">v1.0.0</Text>
|
|||
|
|
<Text type="secondary">隐私政策</Text>
|
|||
|
|
<Text type="secondary">服务协议</Text>
|
|||
|
|
<Text type="secondary">关于 SenlinAI</Text>
|
|||
|
|
</Space>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="login-form-panel">
|
|||
|
|
<Title heading={4}>登录到您的 SenlinAI</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 />} />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label="账号">
|
|||
|
|
<Input placeholder="请输入用户名或邮箱" />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label="密码">
|
|||
|
|
<Input.Password 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}>
|
|||
|
|
登录
|
|||
|
|
</Button>
|
|||
|
|
<div className="connection-card">
|
|||
|
|
<IconCheckCircleFill />
|
|||
|
|
<div>
|
|||
|
|
<Text className="connection-title">连接正常</Text>
|
|||
|
|
<Text type="secondary">已连接到 {server}</Text>
|
|||
|
|
</div>
|
|||
|
|
<Button type="text" size="mini">更换服务器</Button>
|
|||
|
|
</div>
|
|||
|
|
</Form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="login-value-panel">
|
|||
|
|
<Title heading={3}>安全 · 专注 · 高效</Title>
|
|||
|
|
<Paragraph>
|
|||
|
|
SenlinAI 是面向知识工作者与内部团队的私有部署工作台，帮助团队在统一空间中收集信息、整理知识、协同决策。
|
|||
|
|
</Paragraph>
|
|||
|
|
<ValuePoint icon={<IconSafe />} title="私有部署，数据自有" desc="所有数据与模型运行在您的环境中，安全可控。" />
|
|||
|
|
<ValuePoint icon={<IconBook />} title="知识沉淀，结构清晰" desc="从收集到整理，形成可复用的团队知识库。" />
|
|||
|
|
<ValuePoint icon={<IconUserGroup />} title="协同高效，聚焦成果" desc="围绕项目与任务协同，减少沟通成本，专注交付。" />
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</section>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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>
|
|||
|
|
)
|
|||
|
|
}
|