2026-05-04-02-38-48 记录前端项目代码基线

WebSite/src/components/Login.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { motion } from 'motion/react';
+import { Layout, Lock, User, CheckCircle2 } from 'lucide-react';
+
+interface LoginProps {
+  onLogin: () => void;
+}
+
+export default function Login({ onLogin }: LoginProps) {
+  const [username, setUsername] = useState('admin');
+  const [password, setPassword] = useState('123456');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setTimeout(() => {
+      onLogin();
+      setLoading(false);
+    }, 800);
+  };
+
+  return (
+    <div className="min-h-screen bg-neutral-50 flex items-center justify-center p-4">
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="w-full max-w-md"
+      >
+        <div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-neutral-200">
+          <div className="bg-blue-600 p-8 text-white text-center">
+            <div className="inline-flex items-center justify-center w-16 h-16 bg-white/20 rounded-2xl mb-4 backdrop-blur-sm">
+              <Layout size={32} />
+            </div>
+            <h1 className="text-xl font-bold leading-tight px-4">基于模型逆向体素化及DICOM分割标注系统</h1>
+            <p className="text-blue-100 mt-2 font-medium">模型逆向系统</p>
+          </div>
+          
+          <form onSubmit={handleSubmit} className="p-8 space-y-6">
+            <div className="space-y-4">
+              <div>
+                <label className="text-sm font-medium text-neutral-700 block mb-1">账号</label>
+                <div className="relative">
+                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
+                    <User size={18} />
+                  </span>
+                  <input 
+                    type="text"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    className="w-full pl-10 pr-4 py-2 bg-neutral-50 border border-neutral-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none"
+                    placeholder="请输入账号"
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-neutral-700 block mb-1">密码</label>
+                <div className="relative">
+                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
+                    <Lock size={18} />
+                  </span>
+                  <input 
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="w-full pl-10 pr-4 py-2 bg-neutral-50 border border-neutral-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all outline-none"
+                    placeholder="请输入密码"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors flex items-center justify-center gap-2"
+            >
+              {loading ? (
+                <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+              ) : (
+                '立即登录'
+              )}
+            </button>
+          </form>
+        </div>
+        
+      </motion.div>
+    </div>
+  );
+}