feat(frontend):优化前端页面设计

frontend/src/components/Auth/AuthPage.tsx

@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import apiClient from '../../api/client';
-import { Activity } from 'lucide-react';
+import { Zap, ArrowRight, ShieldCheck } from 'lucide-react';
 
 interface AuthPageProps {
   onLoginSuccess: () => void;
 }
 
 export function AuthPage({ onLoginSuccess }: AuthPageProps) {
+  const { t } = useTranslation();
   const [isLogin, setIsLogin] = useState(true);
   const [userName, setUserName] = useState('');
   const [password, setPassword] = useState('');
@@ -20,28 +22,22 @@ export function AuthPage({ onLoginSuccess }: AuthPageProps) {
 
     try {
       if (isLogin) {
-        // Login
         const response = await apiClient.post('/api/v1/auth/login', {
           user_name: userName,
           password: password,
         });
-
         if (response.data.token) {
           localStorage.setItem('token', response.data.token);
           onLoginSuccess();
         }
       } else {
-        // Register
         const response = await apiClient.post('/api/v1/auth/register', {
           user_name: userName,
           password: password,
         });
-
-        // After successful register, we can automatically log them in
-        // or just show a message and switch to login. Let's switch to login.
         if (response.data.message === 'success') {
           setIsLogin(true);
-          setError('Registration successful. Please log in.');
+          setError(t('auth.registerSuccess'));
         }
       }
     } catch (err: any) {
@@ -53,70 +49,97 @@ export function AuthPage({ onLoginSuccess }: AuthPageProps) {
   };
 
   return (
-    <div className="flex min-h-screen w-full items-center justify-center bg-slate-50">
-      <div className="w-full max-w-md bg-white rounded-xl shadow-lg p-8 border border-slate-100">
-        <div className="flex flex-col items-center mb-8">
-          <div className="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white mb-4 shadow-md shadow-blue-200">
-            <Activity size={24} />
+    <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>
-          <h2 className="text-2xl font-bold text-slate-800">
-            {isLogin ? 'Welcome Back' : 'Create Account'}
-          </h2>
-          <p className="text-slate-500 mt-2 text-sm">
-            {isLogin ? 'Enter your credentials to access your account' : 'Sign up to start using the platform'}
+
+          <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="Enter your username"
+                  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="Enter your password"
+                  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">
+            KiloStar Distributed Multi-Agent System
           </p>
         </div>
-
-        {error && (
-          <div className={`mb-4 p-3 rounded-lg text-sm ${error.includes('successful') ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
-            {error}
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">Username</label>
-            <input
-              type="text"
-              value={userName}
-              onChange={(e) => setUserName(e.target.value)}
-              className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
-              required
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">Password</label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
-              required
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors disabled:opacity-50"
-          >
-            {loading ? 'Processing...' : (isLogin ? 'Sign In' : 'Sign Up')}
-          </button>
-        </form>
-
-        <div className="mt-6 text-center text-sm text-slate-500">
-          {isLogin ? "Don't have an account? " : "Already have an account? "}
-          <button
-            onClick={() => {
-              setIsLogin(!isLogin);
-              setError('');
-            }}
-            className="text-blue-600 font-medium hover:text-blue-700 focus:outline-none"
-          >
-            {isLogin ? 'Sign up' : 'Sign in'}
-          </button>
-        </div>
       </div>
     </div>
   );