feat: rebuild support workspace frontend

frontend/src/features/auth/LoginPage.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react'
-import { AlertCircle, LockKeyhole, UserRound } from 'lucide-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, CardHeader, CardTitle } from '@/components/ui/card'
+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('admin')
-  const [password, setPassword] = React.useState('admin12345')
+  const [username, setUsername] = React.useState('')
+  const [password, setPassword] = React.useState('')
   const [error, setError] = React.useState('')
   const [submitting, setSubmitting] = React.useState(false)
 
@@ -20,89 +20,37 @@ export function LoginPage() {
     event.preventDefault()
     setError('')
     setSubmitting(true)
-    try {
-      await login(username, password)
-    } catch {
-      setError('登录失败，请检查账号、密码或后端服务状态。')
-    } finally {
-      setSubmitting(false)
-    }
+    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>
+      <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">
-          <Card className="w-full max-w-[400px]">
-            <CardHeader>
-              <CardTitle>登录平台</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <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)}
-                    />
-                  </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)}
-                    />
-                  </div>
-                </AppField>
-                <Button type="submit" className="mt-1 w-full" disabled={submitting}>
-                  {submitting ? '登录中...' : '登录'}
-                </Button>
-              </form>
-            </CardContent>
-          </Card>
+        <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>