xiaoxia-saas/apps/web/src/pages/auth/Login.tsx

/**
 * 登录页面 - V21 完全对标
 */
import React from "react";
import { Form, Input, Checkbox, message } from "antd";
import { Link, useNavigate } from "react-router-dom";
import { useLogin } from "@/hooks/useAuth";
import "./Login.css";

interface LoginFormValues {
  email: string;
  password: string;
  remember: boolean;
}

const Login: React.FC = () => {
  const navigate = useNavigate();
  const loginMutation = useLogin();
  const [form] = Form.useForm();

  const onFinish = async (values: LoginFormValues) => {
    try {
      await loginMutation.mutateAsync({
        email: values.email,
        password: values.password,
      });
      message.success("登录成功！");
      navigate("/");
    } catch (error: unknown) {
      if (!(error as { __msgShown?: boolean })?.__msgShown)
        message.error("登录失败，请检查邮箱和密码");
    }
  };

  return (
    <div className="xx-auth-page">
      <div className="xx-auth-card">
        <div className="xx-auth-header">
          <div className="xx-logo-big">🦐</div>
          <h1>小虾自动剪辑</h1>
          <p>登录您的账户</p>
        </div>

        <Form
          form={form}
          name="login"
          onFinish={onFinish}
          autoComplete="off"
          layout="vertical"
        >
          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: "请输入邮箱" },
              { type: "email", message: "请输入有效的邮箱" },
            ]}
          >
            <Input placeholder="name@example.com" size="large" />
          </Form.Item>

          <Form.Item
            name="password"
            label="密码"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password placeholder="•••••••••" size="large" />
          </Form.Item>

          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>
            <Link
              to="/forgot-password"
              style={{ float: "right", fontSize: "12px" }}
            >
              忘记密码？
            </Link>
          </Form.Item>

          <Form.Item>
            <button
              type="submit"
              className="btn primary"
              style={{ width: "100%" }}
              disabled={loginMutation.isPending}
            >
              {loginMutation.isPending ? "登录中..." : "登录"}
            </button>
          </Form.Item>

          <div className="xx-auth-footer">
            还没有账号？ <Link to="/register">立即注册</Link>
          </div>
        </Form>
      </div>
    </div>
  );
};

export default Login;