feat: add frontend auth shell

frontend/src/features/auth/LoginPage.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react'
+import { AlertCircle, LockKeyhole, UserRound } from 'lucide-react'
+
+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 { Label } from '@/components/ui/label'
+
+import { useAuth } from './AuthProvider'
+
+export function LoginPage() {
+  const { login } = useAuth()
+  const [username, setUsername] = React.useState('admin')
+  const [password, setPassword] = React.useState('admin123')
+  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)_440px]">
+        <section className="hidden border-r border-border bg-surface px-10 py-8 lg:flex lg:flex-col lg:justify-between">
+          <div>
+            <div className="inline-flex h-10 items-center rounded-md border border-border bg-background px-3 text-sm font-semibold">
+              AI 工单平台
+            </div>
+            <div className="mt-20 max-w-2xl">
+              <p className="text-sm font-medium text-primary">企业后台治理基座</p>
+              <h1 className="mt-4 text-4xl font-semibold leading-tight tracking-normal text-foreground">
+                统一登录、菜单权限与工单运营入口
+              </h1>
+              <p className="mt-4 max-w-xl text-base leading-7 text-muted-foreground">
+                面向企业技术支持团队，先建立稳定的管理后台体验，再承接工单、知识库和智能处理能力。
+              </p>
+            </div>
+          </div>
+          <div className="grid max-w-xl grid-cols-3 gap-3 text-sm">
+            {['用户与角色', '菜单权限', '工单治理'].map((item) => (
+              <div key={item} className="rounded-md border border-border bg-background px-3 py-2 text-muted-foreground">
+                {item}
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="flex min-h-screen items-center justify-center px-5 py-8">
+          <Card className="w-full max-w-[400px]">
+            <CardHeader>
+              <CardTitle>登录平台</CardTitle>
+              <CardDescription>使用管理员账号进入企业后台</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form className="grid gap-4" onSubmit={handleSubmit}>
+                {error ? (
+                  <Alert variant="destructive">
+                    <AlertCircle className="size-4" />
+                    <AlertTitle>无法登录</AlertTitle>
+                    <AlertDescription>{error}</AlertDescription>
+                  </Alert>
+                ) : null}
+                <div className="grid gap-2">
+                  <Label htmlFor="username">账号</Label>
+                  <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"
+                      className="pl-9"
+                      value={username}
+                      onChange={(event) => setUsername(event.target.value)}
+                    />
+                  </div>
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="password">密码</Label>
+                  <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"
+                      className="pl-9"
+                      value={password}
+                      onChange={(event) => setPassword(event.target.value)}
+                    />
+                  </div>
+                </div>
+                <Button type="submit" className="mt-1 w-full" disabled={submitting}>
+                  {submitting ? '登录中...' : '登录'}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+        </section>
+      </div>
+    </main>
+  )
+}