xiaoxia-saas/apps/web/src/components/auth/BindContactModal/index.tsx

import React from "react"
import { Modal, Tabs, Form, Input, Button } from "antd"
import { useBindContactForm } from "./hooks/useBindContactForm"
import type { BindContactModalProps } from "./types"

const BindContactModal: React.FC<BindContactModalProps> = ({ open, onSuccess, onCancel }) => {
  const {
    activeTab,
    setActiveTab,
    form,
    loading,
    codeLoading,
    countdown,
    codeDisabled,
    handleSendCode,
    handleSubmit,
  } = useBindContactForm({ open, onSuccess, onCancel })

  return (
    <Modal
      title="绑定联系方式"
      open={open}
      onCancel={onCancel}
      footer={null}
      destroyOnHidden
      maskClosable={false}
    >
      <p style={{ color: "#666", marginBottom: 16 }}>为了保障账号安全，请绑定您的邮箱或手机号</p>

      <Tabs
        activeKey={activeTab}
        onChange={(key) => setActiveTab(key as "email" | "phone")}
        items={[
          {
            key: "email",
            label: "邮箱绑定",
            children: (
              <Form form={form} layout="vertical">
                <Form.Item
                  name="email"
                  label="邮箱"
                  rules={[
                    { required: true, message: "请输入邮箱" },
                    { type: "email", message: "请输入有效的邮箱地址" },
                  ]}
                >
                  <Input placeholder="请输入邮箱地址" size="large" />
                </Form.Item>
                <Form.Item
                  name="email_code"
                  label="验证码"
                  rules={[{ required: true, message: "请输入验证码" }]}
                >
                  <div style={{ display: "flex", gap: 8 }}>
                    <Input placeholder="请输入验证码" size="large" style={{ flex: 1 }} />
                    <Button
                      size="large"
                      onClick={handleSendCode}
                      loading={codeLoading}
                      disabled={codeDisabled}
                    >
                      {countdown > 0 ? `${countdown}s 后重发` : "发送验证码"}
                    </Button>
                  </div>
                </Form.Item>
              </Form>
            ),
          },
          {
            key: "phone",
            label: "手机绑定",
            children: (
              <Form form={form} layout="vertical">
                <Form.Item
                  name="phone"
                  label="手机号"
                  rules={[
                    { required: true, message: "请输入手机号" },
                    { pattern: /^1[3-9]\d{9}$/, message: "请输入有效的手机号" },
                  ]}
                >
                  <Input placeholder="请输入手机号" size="large" />
                </Form.Item>
                <Form.Item
                  name="phone_code"
                  label="验证码"
                  rules={[{ required: true, message: "请输入验证码" }]}
                >
                  <div style={{ display: "flex", gap: 8 }}>
                    <Input placeholder="请输入验证码" size="large" style={{ flex: 1 }} />
                    <Button
                      size="large"
                      onClick={handleSendCode}
                      loading={codeLoading}
                      disabled={codeDisabled}
                    >
                      {countdown > 0 ? `${countdown}s 后重发` : "发送验证码"}
                    </Button>
                  </div>
                </Form.Item>
              </Form>
            ),
          },
        ]}
      />

      <div style={{ marginTop: 16 }}>
        <Button type="primary" block size="large" loading={loading} onClick={handleSubmit}>
          确认绑定
        </Button>
      </div>
    </Modal>
  )
}

export default BindContactModal
export type { BindContactModalProps } from "./types"