xiezhouwei
/
tokenFactory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

重新设计登录页面：采用分栏布局，左侧品牌展示区（深色背景+Logo+标语+色彩装饰），右侧登录表单区

This commit is contained in:
wangxiaoji 2026-06-29 17:05:08 +08:00
parent dc1ba114e5
commit dd1b881cf1
1 changed files with 50 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/src/components/auth/LoginForm.jsx
View File

@ -1077,18 +1077,41 @@ const LoginForm = () => {
);
};
const brandTagline = t('统一 AI 模型网关，聚合全球顶尖大模型，一站接入即刻使用');
return (
<div className='relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8'>
{/* 背景模糊晕染球 */}
<div className='flex min-h-screen'>
{/* 左侧品牌展示区 */}
<div className='hidden lg:flex lg:w-1/2 relative overflow-hidden bg-zinc-900 flex-col items-center justify-center px-12'>
<div
className='blur-ball blur-ball-indigo'
style={{ top: '-80px', right: '-80px', transform: 'none' }}
style={{ top: '-120px', right: '-120px', width: '400px', height: '400px' }}
/>
<div
className='blur-ball blur-ball-teal'
style={{ top: '50%', left: '-120px' }}
style={{ bottom: '-80px', left: '-80px', width: '350px', height: '350px' }}
/>
<div className='w-full max-w-sm mt-[60px]'>
<div className='relative z-10 text-center max-w-md'>
<img src={logo} alt='Logo' className='w-20 h-20 rounded-2xl mx-auto mb-8 shadow-2xl' />
<h1 className='text-4xl font-bold text-white mb-4 tracking-tight'>{systemName}</h1>
<p className='text-lg text-zinc-400 leading-relaxed'>{brandTagline}</p>
<div className='mt-12 flex gap-3 justify-center'>
<div className='w-12 h-1 rounded-full bg-emerald-400' />
<div className='w-8 h-1 rounded-full bg-blue-400' />
<div className='w-8 h-1 rounded-full bg-violet-400' />
<div className='w-6 h-1 rounded-full bg-amber-400' />
</div>
</div>
</div>
{/* 右侧登录表单区 */}
<div className='flex-1 flex items-center justify-center bg-white dark:bg-zinc-950 px-4 sm:px-6 lg:px-8 py-12'>
<div className='w-full max-w-sm'>
{/* 移动端显示 logo */}
<div className='lg:hidden flex items-center justify-center gap-2 mb-8'>
<img src={logo} alt='Logo' className='w-8 h-8 rounded-full' />
<span className='text-lg font-semibold'>{systemName}</span>
</div>
{showEmailLogin || !hasOAuthLoginOptions
? renderEmailLoginForm()
: renderOAuthOptions()}
@ -1107,6 +1130,7 @@ const LoginForm = () => {
)}
</div>
</div>
</div>
);
};