Modal 对话框组件 #

import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Button,
  useDisclosure,
} from '@chakra-ui/react'

function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <>
      <Button onClick={onOpen}>打开对话框</Button>

      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>对话框标题</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            对话框内容
          </ModalBody>
          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              关闭
            </Button>
            <Button variant="ghost">其他操作</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )
}

<Modal size="xs">超小</Modal>
<Modal size="sm">小</Modal>
<Modal size="md">中等（默认）</Modal>
<Modal size="lg">大</Modal>
<Modal size="xl">超大</Modal>
<Modal size="full">全屏</Modal>

<Modal isCentered>
  {/* 内容 */}
</Modal>

<Modal scrollBehavior="inside">
  {/* 内容超出时可滚动 */}
</Modal>

function ConfirmModal({ isOpen, onClose, onConfirm, title, message }) {
  return (
    <Modal isOpen={isOpen} onClose={onClose} isCentered>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>{title}</ModalHeader>
        <ModalCloseButton />
        <ModalBody>{message}</ModalBody>
        <ModalFooter>
          <Button variant="ghost" mr={3} onClick={onClose}>
            取消
          </Button>
          <Button colorScheme="red" onClick={onConfirm}>
            确认
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}

function FormModal({ isOpen, onClose }) {
  const [formData, setFormData] = useState({ name: '', email: '' })

  const handleSubmit = () => {
    console.log(formData)
    onClose()
  }

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>添加用户</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <VStack spacing={4}>
            <FormControl>
              <FormLabel>姓名</FormLabel>
              <Input
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              />
            </FormControl>
            <FormControl>
              <FormLabel>邮箱</FormLabel>
              <Input
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
              />
            </FormControl>
          </VStack>
        </ModalBody>
        <ModalFooter>
          <Button variant="ghost" mr={3} onClick={onClose}>
            取消
          </Button>
          <Button colorScheme="blue" onClick={handleSubmit}>
            保存
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}