Initial commit

src/components/auth/Login.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { BrainCircuit } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+interface LoginProps {
+  onLoginSuccess: (token: string) => void;
+}
+
+export function Login({ onLoginSuccess }: LoginProps) {
+  const [username, setUsername] = useState('admin');
+  const [password, setPassword] = useState('123456');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        onLoginSuccess(data.token);
+      } else {
+        const errData = await response.json();
+        setError(errData.error || '登录失败');
+      }
+    } catch (err) {
+      setError('网络异常，无法连接到后端验证');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-[#0a0a0a] text-gray-200">
+      <div className="absolute inset-0 z-0 opacity-10 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-cyan-500 via-[#0a0a0a] to-transparent pointer-events-none"></div>
+      
+      <div className="relative z-10 w-full max-w-md p-8 bg-[#111] border border-white/5 rounded-2xl shadow-2xl scale-in shadow-black/50">
+        <div className="flex flex-col items-center mb-8">
+          <div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center text-cyan-500 shadow-lg shadow-cyan-500/20 mb-4 overflow-hidden border border-white/10">
+            <img src="/Logo.png" alt="Logo" className="w-full h-full object-cover" />
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-wider mb-2">欢迎登录协同工作站</h1>
+          <p className="text-sm text-gray-500">AI 智能切分与多模态数据标注系统</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label className="block text-xs font-medium text-gray-400 uppercase tracking-widest mb-2">账号</label>
+            <input 
+              type="text" 
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="w-full bg-[#1a1a1a] border border-white/10 rounded-lg px-4 py-3 text-sm focus:outline-none focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/50 transition-all font-mono"
+              placeholder="输入账号"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-gray-400 uppercase tracking-widest mb-2">密码</label>
+            <input 
+              type="password" 
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full bg-[#1a1a1a] border border-white/10 rounded-lg px-4 py-3 text-sm focus:outline-none focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/50 transition-all font-mono"
+              placeholder="输入密码"
+            />
+          </div>
+
+          {error && <div className="text-red-400 text-sm font-medium p-3 bg-red-400/10 rounded-lg border border-red-500/20 text-center">{error}</div>}
+
+          <button 
+            type="submit" 
+            disabled={isLoading}
+            className={cn(
+              "w-full py-3.5 rounded-lg flex items-center justify-center gap-2 transition-all shadow-lg font-bold tracking-wider text-sm",
+              isLoading ? "bg-cyan-500/50 cursor-not-allowed" : "bg-cyan-500 hover:bg-cyan-400 text-black shadow-cyan-500/20 hover:shadow-cyan-500/40"
+            )}
+          >
+            {isLoading ? '验证中...' : '安全登录'}
+          </button>
+        </form>
+        
+        <div className="mt-8 pt-6 border-t border-white/5 text-center px-4">
+           <p className="text-[10px] text-gray-600">系统受准入受控环境保护。所有流转数据与标注资产将进行端到端加密与访问溯源审计。</p>
+        </div>
+      </div>
+    </div>
+  );
+}