18152827937/AOUN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2025.11.27.22.40

Browse Source
This commit is contained in:
RUI
2025-11-27 22:43:24 +08:00
parent 5dbb30b32c
commit 0d73d0c63b
20 changed files with 1154 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/pages/auth/login.tsx
View File

@@ -4,7 +4,7 @@ import Link from 'next/link';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Loader2 } from 'lucide-react';
import { Loader2, Mail, Lock, ArrowRight, Sparkles } from 'lucide-react';
import { useAuth } from '@/hooks/useAuth';
import { Button } from '@/components/ui/button';
@@ -17,7 +17,7 @@ import {
FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
const formSchema = z.object({
email: z.string().email({ message: "请输入有效的邮箱地址" }),
@@ -69,25 +69,59 @@ export default function LoginPage() {
}
return (
<div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
<Card className="w-full max-w-md">
<CardHeader className="space-y-1">
<CardTitle className="text-2xl font-bold text-center">登录账号</CardTitle>
<CardDescription className="text-center">
请输入您的邮箱和密码进行登录
</CardDescription>
</CardHeader>
<CardContent>
<div className="min-h-screen grid lg:grid-cols-2">
{/* Left Panel - Visual & Branding */}
<div className="hidden lg:flex flex-col justify-between bg-black text-white p-12 relative overflow-hidden">
{/* Abstract Background */}
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')] bg-cover bg-center opacity-40"></div>
<div className="absolute inset-0 bg-linear-to-br from-black via-black/80 to-transparent"></div>
{/* Content */}
<div className="relative z-10">
<div className="flex items-center gap-2 text-2xl font-bold">
<div className="w-8 h-8 rounded-lg bg-white text-black flex items-center justify-center">
<Sparkles className="w-5 h-5" />
</div>
AOUN AI
</div>
</div>
<div className="relative z-10 space-y-6 max-w-lg">
<h1 className="text-5xl font-bold leading-tight tracking-tight">
释放您的<br />
<span className="text-transparent bg-clip-text bg-linear-to-r from-blue-400 to-purple-400">无限创意潜能</span>
</h1>
<p className="text-lg text-gray-300 leading-relaxed">
加入数万名创作者的行列，利用最先进的 AI 技术，将您的想法瞬间转化为现实。
</p>
</div>
<div className="relative z-10 text-sm text-gray-400">
© 2024 AOUN AI. All rights reserved.
</div>
</div>
{/* Right Panel - Login Form */}
<div className="flex items-center justify-center p-8 bg-white">
<div className="w-full max-w-md space-y-8">
<div className="text-center space-y-2">
<h2 className="text-3xl font-bold tracking-tight text-gray-900">欢迎回来</h2>
<p className="text-gray-500">请输入您的账号信息以继续</p>
</div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>邮箱</FormLabel>
<FormLabel>邮箱地址</FormLabel>
<FormControl>
<Input placeholder="name@example.com" {...field} />
<div className="relative">
<Mail className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
<Input placeholder="name@example.com" className="pl-10 h-11" {...field} />
</div>
</FormControl>
<FormMessage />
</FormItem>
@@ -100,33 +134,67 @@ export default function LoginPage() {
<FormItem>
<FormLabel>密码</FormLabel>
<FormControl>
<Input type="password" placeholder="******" {...field} />
<div className="relative">
<Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
<Input type="password" placeholder="******" className="pl-10 h-11" {...field} />
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<Checkbox id="remember" />
<label
htmlFor="remember"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-gray-500"
>
记住我
</label>
</div>
<Link href="#" className="text-sm font-medium text-primary hover:underline">
忘记密码？
</Link>
</div>
{error && (
<div className="text-sm text-destructive text-center">{error}</div>
<div className="p-3 rounded-md bg-red-50 text-red-500 text-sm text-center font-medium">
{error}
</div>
)}
<Button type="submit" className="w-full" disabled={isLoading}>
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
登录
<Button type="submit" className="w-full h-11 text-base" disabled={isLoading}>
{isLoading ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<span className="flex items-center gap-2">
立即登录 <ArrowRight className="w-4 h-4" />
</span>
)}
</Button>
</form>
</Form>
</CardContent>
<CardFooter className="flex justify-center">
<p className="text-sm text-muted-foreground">
还没有账号？{' '}
<Link href="/auth/register" className="text-primary hover:underline">
立即注册
<div className="relative">
<div className="absolute inset-0 flex items-center">
<span className="w-full border-t border-gray-100" />
</div>
<div className="relative flex justify-center text-xs uppercase">
<span className="bg-white px-2 text-gray-500">
还没有账号？
</span>
</div>
</div>
<div className="text-center">
<Link href="/auth/register" className="text-primary font-semibold hover:underline">
免费注册账号
</Link>
</p>
</CardFooter>
</Card>
</div>
</div>
</div>
</div>
);
}