---
name: jjb-modal-example
description: 定义 JJB 项目弹窗使用示例。在实现 Modal、InjectContext、Form 或 styles.body 时参考。
---

# 弹窗（Modal）规范

- **使用示例**：
  ```javascript
  import { useContext, useState } from 'react';
  import { Modal, Form, Input } from 'antd';
  import { InjectContext } from '~/enumerate/context';

  function UserList({ createUserAction }) {
    const context = useContext(InjectContext);
    const [form] = Form.useForm();
    const [modalOpen, setModalOpen] = useState(false);

    const handleSubmit = async (values) => {
      await createUserAction(values);
      context.message.success('创建成功！');
      setModalOpen(false);
    };

    return (
      <>
        <button onClick={() => setModalOpen(true)}>新增用户</button>
        {/* ✅ 正确：使用 <Modal> 组件标签 */}
        <Modal
          open={modalOpen}
          title="新增用户"
          onCancel={() => setModalOpen(false)}
          footer={null}
          styles={{
            body: {
              maxHeight: 'calc(100vh - 200px)',
              overflow: 'auto'
            }
          }}
        >
          <Form form={form} layout="vertical" onFinish={handleSubmit}>
            <Form.Item name="name" label="用户名">
              <Input placeholder="请输入用户名" allowClear />
            </Form.Item>
            <Form.Item name="email" label="邮箱">
              <Input placeholder="请输入邮箱" allowClear />
            </Form.Item>
          </Form>
        </Modal>
      </>
    );
  }
  ```