safety-eval-service-frontend/.cursor/skills/specs/09-弹窗规范/04-使用示例/SKILL.md

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

弹窗（Modal）规范

• 使用示例：

  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>
      </>
    );
  }