lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 13 Activity

目录结构与表单组件结构调整

Browse Source
This commit is contained in:
luorijun
2025-03-24 12:29:52 +08:00
parent 60155e9d9d
commit e16ef8e509
9 changed files with 530 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/app/(auth)/login/page.tsx
View File

@@ -14,11 +14,7 @@ import {
} from '@/components/ui/card'
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form'
import {zodResolver} from '@hookform/resolvers/zod'
import {useForm} from 'react-hook-form'
@@ -29,6 +25,7 @@ import {login} from '@/actions/auth/login'
import {useRouter} from 'next/navigation'
import {toast} from 'sonner'
import {ApiResponse} from '@/lib/api'
import {Label} from '@/components/ui/label'
export type LoginPageProps = {}
@@ -38,6 +35,7 @@ const formSchema = zod.object({
password: zod.string().min(1, '请输入验证码'),
remember: zod.boolean().default(false),
})
type FormValues = zod.infer<typeof formSchema>
export default function LoginPage(props: LoginPageProps) {
@@ -202,89 +200,70 @@ export default function LoginPage(props: LoginPageProps) {
</CardHeader>
<CardContent className={`px-8`}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
control={form.control}
name="username"
render={({field}) => (
<FormItem>
<FormLabel>手机号码</FormLabel>
<FormControl>
<Input
{...field}
type="tel"
placeholder="请输入手机号码"
autoComplete="tel-national"
/>
</FormControl>
<FormMessage/>
</FormItem>
)}
/>
<Form<FormValues> className="space-y-6" onSubmit={onSubmit} form={form}>
<FormField name="username" label={`手机号码`}>
{({id, field}) => (
<Input
{...field}
id={id}
type="tel"
placeholder="请输入手机号码"
autoComplete="tel-national"
/>
)}
</FormField>
<FormField
control={form.control}
name="password"
render={({field}) => (
<FormItem>
<FormLabel>验证码</FormLabel>
<div className="flex space-x-4">
<FormControl>
<Input
{...field}
className="h-12"
placeholder="请输入验证码"
/>
</FormControl>
<Button
type="button"
variant="outline"
className="whitespace-nowrap h-12"
onClick={checkUsername}
disabled={countdown > 0}
>
{countdown > 0 ? `${countdown}秒后重发` : '获取验证码'}
</Button>
</div>
<FormMessage/>
</FormItem>
)}
/>
<FormField name="password" label={`验证码`}>
{({id, field}) => (
<div className="flex space-x-4">
<Input
{...field}
id={id}
className="h-12"
placeholder="请输入验证码"
/>
<Button
type="button"
variant="outline"
className="whitespace-nowrap h-12"
onClick={checkUsername}
disabled={countdown > 0}
>
{countdown > 0 ? `${countdown}秒后重发` : '获取验证码'}
</Button>
</div>
)}
</FormField>
<FormField
control={form.control}
name="remember"
render={({field}) => (
<FormItem className="flex flex-row items-start space-x-2 space-y-0">
<FormControl>
<Checkbox
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel>保持登录</FormLabel>
</div>
</FormItem>
)}
/>
<FormField name="remember">
{({id, field}) => (
<div className="flex flex-row items-start space-x-2 space-y-0">
<Checkbox
id={id}
checked={field.value}
onCheckedChange={field.onChange}
/>
<div className="space-y-1 leading-none">
<Label>保持登录</Label>
</div>
</div>
)}
</FormField>
<div className="flex flex-col gap-3">
<Button
className="w-full h-12 text-lg"
type="submit"
variant="gradient"
disabled={submitting}
>
{submitting ? '登录中...' : '注册 / 登录'}
</Button>
<div className="flex flex-col gap-3">
<Button
className="w-full h-12 text-lg"
type="submit"
variant="gradient"
disabled={submitting}
>
{submitting ? '登录中...' : '注册 / 登录'}
</Button>
<p className="text-xs text-center text-gray-500">
登录即表示您同意<a href="#" className="text-blue-600 hover:text-blue-500">《用户协议》</a>和<a href="#" className="text-blue-600 hover:text-blue-500">《隐私政策》</a>
</p>
</div>
</form>
<p className="text-xs text-center text-gray-500">
登录即表示您同意<a href="#" className="text-blue-600 hover:text-blue-500">《用户协议》</a>和<a href="#" className="text-blue-600 hover:text-blue-500">《隐私政策》</a>
</p>
</div>
</Form>
</CardContent>
</Card>