chrome-extension/.history/entrypoints/popup/pages/Login_20250812095156.tsx

// entrypoints/popup/pages/Login.tsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Input, Message, Card, Form } from '@alifd/next';

export default function Login({ setIsLoggedIn }: { setIsLoggedIn: (loggedIn: boolean) => void }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [errors, setErrors] = useState<{username?: string, password?: string}>({});
  const navigate = useNavigate();

  const validateForm = () => {
    const newErrors: {username?: string, password?: string} = {};
    
    if (!username.trim()) {
      newErrors.username = '请输入用户名';
    }
    
    if (!password) {
      newErrors.password = '请输入密码';
    } else if (password.length < 6) {
      newErrors.password = '密码长度至少为6位';
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!validateForm()) {
      return;
    }
    
    setLoading(true);
    
    // 模拟登录请求
    setTimeout(() => {
      // 这里添加实际的登录逻辑
      if (username && password) {
        // 模拟登录成功
        localStorage.setItem('isLoggedIn', 'true');
        setIsLoggedIn(true);
        // 跳转到首页
        navigate('/');
        Message.success('登录成功');
      } else {
        Message.error('登录失败，请检查用户名和密码');
      }
      setLoading(false);
    }, 1000);
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-50 p-4">
      <Card className="w-full max-w-md">
        <div className="text-center mb-6">
          <h1 className="text-2xl font-bold text-gray-800">系统登录</h1>
          <p className="text-gray-500 mt-2">请输入您的账号和密码</p>
        </div>
        
        <Form onSubmit={handleLogin}>
          <Form.Item 
            label="用户名" 
            required
            help={errors.username}
            validateState={errors.username ? 'error' : undefined}
          >
            <Input
              placeholder="请输入用户名"
              value={username}
              onChange={(value) => {
                setUsername(value);
                if (errors.username) {
                  setErrors({...errors, username: undefined});
                }
              }}
              disabled={loading}
            />
          </Form.Item>
          
          <Form.Item 
            label="密码" 
            required
            help={errors.password}
            validateState={errors.password ? 'error' : undefined}
          >
            <Input
              htmlType="password"
              placeholder="请输入密码"
              value={password}
              onChange={(value) => {
                setPassword(value);
                if (errors.password) {
                  setErrors({...errors, password: undefined});
                }
              }}
              disabled={loading}
            />
          </Form.Item>
          
          <Form.Item>
            <Button 
              type="primary" 
              htmlType="submit" 
              loading={loading}
              className="w-full"
            >
              {loading ? '登录中...' : '登录'}
            </Button>
          </Form.Item>
        </Form>
        
        <div className="mt-4 text-center text-sm text-gray-500">
          <p>忘记密码？请联系管理员</p>
        </div>
      </Card>
    </div>
  );
}