59 lines
5.2 KiB
TypeScript
59 lines
5.2 KiB
TypeScript
import * as React from 'react'
|
||
import { AlertCircle, CheckCircle2, LockKeyhole, Sparkles, UserRound, Workflow } from 'lucide-react'
|
||
|
||
import { AppField } from '@/components/app/AppField'
|
||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Input } from '@/components/ui/input'
|
||
|
||
import { useAuth } from './AuthProvider'
|
||
|
||
export function LoginPage() {
|
||
const { login } = useAuth()
|
||
const [username, setUsername] = React.useState('')
|
||
const [password, setPassword] = React.useState('')
|
||
const [error, setError] = React.useState('')
|
||
const [submitting, setSubmitting] = React.useState(false)
|
||
|
||
async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||
event.preventDefault()
|
||
setError('')
|
||
setSubmitting(true)
|
||
try { await login(username, password) }
|
||
catch { setError('登录失败，请检查账号、密码或后端服务状态。') }
|
||
finally { setSubmitting(false) }
|
||
}
|
||
|
||
return (
|
||
<main className="min-h-screen bg-background text-foreground">
|
||
<div className="grid min-h-screen lg:grid-cols-[minmax(0,1fr)_480px]">
|
||
<section className="relative hidden overflow-hidden bg-primary px-12 py-10 text-primary-foreground lg:flex lg:flex-col lg:justify-between">
|
||
<div className="absolute inset-0 opacity-20 [background-image:radial-gradient(circle_at_20%_20%,white_0,transparent_34%),linear-gradient(120deg,transparent_45%,white_46%,transparent_47%)]" />
|
||
<div className="relative flex items-center gap-3"><span className="flex size-10 items-center justify-center rounded-xl bg-white/15 ring-1 ring-white/25"><Workflow /></span><div><p className="font-semibold">智服台</p><p className="text-xs text-white/70">AI 技术支持工作台</p></div></div>
|
||
<div className="relative max-w-2xl"><span className="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs ring-1 ring-white/20"><Sparkles className="size-3.5" />知识与工单协同</span><h1 className="mt-5 text-4xl font-semibold leading-tight tracking-[-0.035em]">让每一次技术支持<br />都有清晰依据与下一步</h1><p className="mt-5 max-w-xl text-base leading-7 text-white/72">统一管理工单、解决方案和知识资产，通过结构化 Agent 工作区辅助排查与沟通。</p></div>
|
||
<div className="relative grid max-w-2xl grid-cols-3 gap-3">{['集中处理待办', '复用解决方案', '追踪审计记录'].map((item) => <div key={item} className="flex items-center gap-2 rounded-lg bg-white/10 px-3 py-3 text-sm ring-1 ring-white/15"><CheckCircle2 className="size-4" />{item}</div>)}</div>
|
||
</section>
|
||
|
||
<section className="flex min-h-screen items-center justify-center px-5 py-8 sm:px-10">
|
||
<div className="w-full max-w-[400px]">
|
||
<div className="mb-7 flex items-center gap-3 lg:hidden"><span className="flex size-10 items-center justify-center rounded-xl bg-primary text-primary-foreground"><Workflow /></span><div><p className="font-semibold">智服台</p><p className="text-xs text-muted-foreground">AI 技术支持工作台</p></div></div>
|
||
<Card className="gap-5 py-6 app-panel-shadow">
|
||
<CardHeader className="px-6"><CardTitle className="text-xl">登录工作台</CardTitle><CardDescription>使用企业账号进入技术支持工作区</CardDescription></CardHeader>
|
||
<CardContent className="px-6">
|
||
<form className="grid gap-4" onSubmit={handleSubmit}>
|
||
{error ? <Alert variant="destructive"><AlertCircle className="size-4" /><AlertTitle>无法登录</AlertTitle><AlertDescription>{error}</AlertDescription></Alert> : null}
|
||
<AppField label="账号" htmlFor="username" invalid={Boolean(error)} required><div className="relative"><UserRound className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" /><Input id="username" autoComplete="username" aria-invalid={Boolean(error)} className="pl-9" value={username} onChange={(event) => setUsername(event.target.value)} placeholder="请输入账号" /></div></AppField>
|
||
<AppField label="密码" htmlFor="password" invalid={Boolean(error)} required><div className="relative"><LockKeyhole className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" /><Input id="password" type="password" autoComplete="current-password" aria-invalid={Boolean(error)} className="pl-9" value={password} onChange={(event) => setPassword(event.target.value)} placeholder="请输入密码" /></div></AppField>
|
||
<Button type="submit" size="lg" className="mt-1 w-full" disabled={submitting || !username || !password}>{submitting ? '登录中...' : '登录'}</Button>
|
||
{import.meta.env.DEV ? <div className="rounded-lg bg-muted px-3 py-2 text-xs leading-5 text-muted-foreground"><strong className="text-foreground">本地开发演示：</strong> admin / admin12345</div> : null}
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
)
|
||
}
|