feat: 提取并重用 AuthHeader 组件,简化登录和重置密码页面

This commit is contained in:
2025-09-23 00:36:02 +08:00
parent b0b32c93d1
commit e1277ac9a7
3 changed files with 23 additions and 29 deletions

View File

@ -1,24 +1,12 @@
import Image from 'next/image'
import { Suspense } from 'react'
import { LoginForm } from '@/components/login/login-form'
import config from '@/config'
import { AuthHeader } from '@/components/common/auth-header'
function LoginPageContent() {
return (
<div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
<div className="flex w-full max-w-sm flex-col gap-6">
<a href="#" className="flex items-center gap-3 self-center font-bold text-2xl">
<div className="flex size-10 items-center justify-center rounded-full overflow-hidden border-2 border-gray-300 dark:border-gray-600">
<Image
src={config.metadata.icon}
alt="Logo"
width={40}
height={40}
className="rounded-full object-cover"
/>
</div>
<span className="font-bold text-2xl">{config.metadata.name}</span>
</a>
<AuthHeader />
<LoginForm />
</div>
</div>

View File

@ -1,23 +1,10 @@
import { AuthHeader } from "@/components/common/auth-header";
import { ResetPasswordForm } from "@/components/reset-password/reset-password-form";
import config from "@/config";
import Image from "next/image";
export default function Page() {
return (
<div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
<div className="flex w-full max-w-sm flex-col gap-6">
<a href="#" className="flex items-center gap-3 self-center font-bold text-2xl">
<div className="flex size-10 items-center justify-center rounded-full overflow-hidden border-2 border-gray-300 dark:border-gray-600">
<Image
src={config.metadata.icon}
alt="Logo"
width={40}
height={40}
className="rounded-full object-cover"
/>
</div>
<span className="font-bold text-2xl">{config.metadata.name}</span>
</a>
<AuthHeader />
<ResetPasswordForm />
</div>
</div>

View File

@ -0,0 +1,19 @@
import config from "@/config";
import Image from "next/image";
export function AuthHeader() {
return (
<div className="flex items-center gap-3 self-center font-bold text-2xl">
<div className="flex size-10 items-center justify-center rounded-full overflow-hidden border-2 border-gray-300 dark:border-gray-600">
<Image
src={config.metadata.icon}
alt="Logo"
width={40}
height={40}
className="rounded-full object-cover"
/>
</div>
<span className="font-bold text-2xl">{config.metadata.name}</span>
</div>
)
}