style(frontend):优化前端效果
1.对于UI的配色和布局进行了优化
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import apiClient from '../../api/client';
|
||||
import { Zap, ArrowRight, ShieldCheck } from 'lucide-react';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
|
||||
interface AuthPageProps {
|
||||
onLoginSuccess: () => void;
|
||||
@@ -49,96 +49,109 @@ export function AuthPage({ onLoginSuccess }: AuthPageProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen w-full relative overflow-hidden">
|
||||
{/* Background decoration */}
|
||||
<div className="absolute inset-0 bg-bg-primary">
|
||||
<div className="absolute top-0 left-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-glow-purple/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex w-full items-center justify-center p-6">
|
||||
<div className="w-full max-w-md animate-fade-in-scale">
|
||||
{/* Logo */}
|
||||
<div className="flex flex-col items-center mb-8">
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-accent to-glow-purple flex items-center justify-center text-white shadow-xl shadow-accent/20 mb-5">
|
||||
<Zap size={28} fill="currentColor" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-text-primary tracking-tight">{t('app.name')}</h1>
|
||||
<p className="text-sm text-text-muted mt-1.5">{t('app.tagline')}</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-bg-card/80 backdrop-blur-xl rounded-2xl border border-border-primary shadow-xl shadow-black/5 p-8">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<ShieldCheck size={18} className="text-accent" />
|
||||
<h2 className="text-lg font-semibold text-text-primary">
|
||||
{isLogin ? t('auth.welcomeBack') : t('auth.createAccount')}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className={`mb-5 p-3 rounded-xl text-sm border ${error.includes('success') || error.includes('成功') ? 'bg-success-bg/50 text-success border-success/20' : 'bg-danger-bg/50 text-danger border-danger/20'}`}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('auth.username')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={userName}
|
||||
onChange={(e) => setUserName(e.target.value)}
|
||||
className="w-full px-4 py-2.5 bg-bg-input border border-border-primary rounded-xl focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent transition-all text-text-primary placeholder:text-text-muted/60 text-sm"
|
||||
placeholder={t('auth.usernamePlaceholder')}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('auth.password')}</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-4 py-2.5 bg-bg-input border border-border-primary rounded-xl focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent transition-all text-text-primary placeholder:text-text-muted/60 text-sm"
|
||||
placeholder={t('auth.passwordPlaceholder')}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-2.5 bg-accent text-white rounded-xl font-semibold hover:bg-accent-hover focus:outline-none focus:ring-2 focus:ring-accent/30 transition-all disabled:opacity-50 cursor-pointer text-sm flex items-center justify-center gap-2 group"
|
||||
>
|
||||
{loading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
{t('auth.processing')}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
{isLogin ? t('auth.signIn') : t('auth.signUp')}
|
||||
<ArrowRight size={16} className="transition-transform group-hover:translate-x-0.5" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center text-sm text-text-muted">
|
||||
{isLogin ? t('auth.noAccount') : t('auth.hasAccount')}{' '}
|
||||
<button
|
||||
onClick={() => { setIsLogin(!isLogin); setError(''); }}
|
||||
className="text-accent font-semibold hover:text-accent-hover transition-colors"
|
||||
>
|
||||
{isLogin ? t('auth.signUp') : t('auth.signIn')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-xs text-text-muted/60 mt-6">
|
||||
<div className="min-h-screen w-full bg-bg-primary flex items-center justify-center">
|
||||
<div className="flex items-center gap-[70px] w-[900px]">
|
||||
{/* Left: Brand */}
|
||||
<div className="flex-1">
|
||||
<div className="w-10 h-[3px] rounded-sm bg-gradient-to-r from-accent to-clay mb-6" />
|
||||
<h1 className="text-[40px] font-bold tracking-tight leading-tight mb-3 text-text-primary">
|
||||
Kilo<span className="not-italic text-accent">Star</span>
|
||||
</h1>
|
||||
<p className="text-[15px] text-text-muted leading-relaxed mb-8">
|
||||
{t('app.tagline')}
|
||||
</p>
|
||||
<div className="flex flex-col gap-2.5">
|
||||
<div className="flex items-center gap-2.5 text-[13px] text-text-muted">
|
||||
<div className="w-[5px] h-[5px] rounded-full bg-clay" />
|
||||
<span>Multi-Agent Orchestration</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2.5 text-[13px] text-text-muted">
|
||||
<div className="w-[5px] h-[5px] rounded-full bg-clay" />
|
||||
<span>Visual Pipeline Builder</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2.5 text-[13px] text-text-muted">
|
||||
<div className="w-[5px] h-[5px] rounded-full bg-clay" />
|
||||
<span>Intelligent Monitoring</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Card */}
|
||||
<div className="w-[380px] bg-bg-card rounded-[20px] p-10 shadow-[0_1px_3px_rgba(0,0,0,0.04),0_8px_24px_rgba(0,0,0,0.03)] border border-border-primary">
|
||||
<h2 className="text-xl font-semibold text-text-primary mb-1">
|
||||
{isLogin ? t('auth.welcomeBack') : t('auth.createAccount')}
|
||||
</h2>
|
||||
<p className="text-[13px] text-text-muted mb-7">
|
||||
{isLogin ? t('auth.enterCredentials') : t('auth.signUpToStart')}
|
||||
</p>
|
||||
|
||||
{error && (
|
||||
<div className={`mb-5 p-3 rounded-[10px] text-sm border ${error.includes('success') || error.includes('成功') ? 'bg-success-bg/50 text-success border-success/20' : 'bg-danger-bg/50 text-danger border-danger/20'}`}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-[18px]">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-text-muted mb-1.5">
|
||||
{t('auth.username')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={userName}
|
||||
onChange={(e) => setUserName(e.target.value)}
|
||||
className="w-full px-3.5 py-3 rounded-[10px] border border-border-primary bg-bg-primary text-sm text-text-primary placeholder:text-[#bbb5ae] outline-none transition-all focus:border-accent focus:shadow-[0_0_0_3px_rgba(156,175,136,0.1)]"
|
||||
placeholder={t('auth.usernamePlaceholder')}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-text-muted mb-1.5">
|
||||
{t('auth.password')}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-3.5 py-3 rounded-[10px] border border-border-primary bg-bg-primary text-sm text-text-primary placeholder:text-[#bbb5ae] outline-none transition-all focus:border-accent focus:shadow-[0_0_0_3px_rgba(156,175,136,0.1)]"
|
||||
placeholder={t('auth.passwordPlaceholder')}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-3 rounded-[10px] bg-accent text-white text-sm font-semibold hover:bg-accent-hover hover:-translate-y-px hover:shadow-[0_6px_20px_rgba(156,175,136,0.3)] transition-all disabled:opacity-50 cursor-pointer flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
{t('auth.processing')}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
{isLogin ? t('auth.signIn') : t('auth.signUp')}
|
||||
<ArrowRight size={16} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="flex items-center gap-3.5 my-5 text-[#bbb5ae] text-xs before:flex-1 before:h-px before:bg-border-primary after:flex-1 after:h-px after:bg-border-primary">
|
||||
or
|
||||
</div>
|
||||
|
||||
<p className="text-center text-[13px] text-text-muted">
|
||||
{isLogin ? t('auth.noAccount') : t('auth.hasAccount')}{' '}
|
||||
<button
|
||||
onClick={() => { setIsLogin(!isLogin); setError(''); }}
|
||||
className="text-accent font-medium hover:text-accent-hover transition-colors"
|
||||
>
|
||||
{isLogin ? t('auth.signUp') : t('auth.signIn')}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user