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

/**
 * 忘记密码页面 - V21 完全对标
 */
import React, { useState } from "react"
import { Form, Input, Button, Result, message } from "antd"
import { MailOutlined } from "@ant-design/icons"
import { Link } from "react-router-dom"
import { useMutation } from "@tanstack/react-query"
import { requestPasswordReset } from "@/api/auth"
import "./ForgotPassword.css"

const ForgotPassword: React.FC = () => {
  const [form] = Form.useForm()
  const [emailSent, setEmailSent] = useState(false)

  const resetMutation = useMutation({
    mutationFn: (email: string) => requestPasswordReset(email),
    onSuccess: () => {
      setEmailSent(true)
      message.success("重置邮件已发送！")
    },
    onError: (error: unknown) => {
      if (!(error as { __msgShown?: boolean })?.__msgShown) message.error("发送失败，请重试")
    },
  })

  const onFinish = (values: { email: string }) => {
    resetMutation.mutate(values.email)
  }

  if (emailSent) {
    return (
      <div className="xx-result-page">
        <div className="xx-result-card">
          <Result
            status="success"
            title="重置邮件已发送"
            subTitle="请检查您的邮箱，点击邮件中的链接重置密码。"
            extra={[
              <Link to="/login" key="login">
                <Button type="primary">返回登录</Button>
              </Link>,
            ]}
          />
        </div>
      </div>
    )
  }

  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>

        <p
          style={{
            marginBottom: "24px",
            color: "#64748b",
            fontSize: "14px",
            textAlign: "center",
          }}
        >
          请输入您的邮箱地址，我们将发送重置密码的链接到您的邮箱。
        </p>

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

          <Form.Item>
            <button
              type="submit"
              className="btn primary"
              style={{ width: "100%" }}
              disabled={resetMutation.isPending}
            >
              {resetMutation.isPending ? "发送中..." : "发送重置邮件"}
            </button>
          </Form.Item>

          <div className="xx-auth-footer">
            <Link to="/login">返回登录</Link>
          </div>
        </Form>
      </div>
    </div>
  )
}

export default ForgotPassword