feat: add Modal component

src/Modal/demos/Method.tsx

@@ -0,0 +1,113 @@
+import { Button, Modal, Space } from '@yuntijs/ui';
+import { useState } from 'react';
+
+export default () => {
+  const [open, setOpen] = useState<boolean>(false);
+  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
+  return (
+    <Space>
+      <Button
+        onClick={() => {
+          Modal.info({
+            title: 'YuntiUI Modal.info',
+            content: (
+              <div>
+                The YuntiUI components are inspired by LobeUI and developed based on Antd
+                components, fully compatible with Antd components, and it is recommended to use
+                antd-style as the default css-in-js styling solution.
+              </div>
+            ),
+            onOk() {},
+          });
+        }}
+      >
+        Info
+      </Button>
+      <Button
+        onClick={() => {
+          Modal.success({
+            title: 'YuntiUI Modal.success',
+            content: (
+              <div>
+                The YuntiUI components are inspired by LobeUI and developed based on Antd
+                components, fully compatible with Antd components, and it is recommended to use
+                antd-style as the default css-in-js styling solution.
+              </div>
+            ),
+            onOk() {},
+          });
+        }}
+      >
+        Success
+      </Button>
+      <Button
+        onClick={() => {
+          Modal.error({
+            title: 'YuntiUI Modal.error',
+            content: (
+              <div>
+                The YuntiUI components are inspired by LobeUI and developed based on Antd
+                components, fully compatible with Antd components, and it is recommended to use
+                antd-style as the default css-in-js styling solution.
+              </div>
+            ),
+            onOk() {},
+          });
+        }}
+      >
+        Error
+      </Button>
+      <Button
+        onClick={() => {
+          Modal.warning({
+            title: 'YuntiUI Modal.warning',
+            content: (
+              <div>
+                The YuntiUI components are inspired by LobeUI and developed based on Antd
+                components, fully compatible with Antd components, and it is recommended to use
+                antd-style as the default css-in-js styling solution.
+              </div>
+            ),
+            onOk() {},
+          });
+        }}
+      >
+        Warning
+      </Button>
+      <Button
+        onClick={() => {
+          Modal.warn({
+            title: 'YuntiUI Modal.warn',
+            content: (
+              <div>
+                The YuntiUI components are inspired by LobeUI and developed based on Antd
+                components, fully compatible with Antd components, and it is recommended to use
+                antd-style as the default css-in-js styling solution.
+              </div>
+            ),
+            onOk() {},
+          });
+        }}
+      >
+        Warn
+      </Button>
+      <Button
+        onClick={() => {
+          Modal.confirm({
+            title: 'YuntiUI Modal.confirm',
+            content: (
+              <div>
+                The YuntiUI components are inspired by LobeUI and developed based on Antd
+                components, fully compatible with Antd components, and it is recommended to use
+                antd-style as the default css-in-js styling solution.
+              </div>
+            ),
+            onOk() {},
+          });
+        }}
+      >
+        Confirm
+      </Button>
+    </Space>
+  );
+};

src/Modal/demos/Playground.tsx

@@ -0,0 +1,49 @@
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import type { ModalProps } from '@yuntijs/ui';
+import { Button, Modal } from '@yuntijs/ui';
+import { useState } from 'react';
+
+export default () => {
+  const store = useCreateStore();
+  const [open, setOpen] = useState<boolean>(false);
+  const control: ModalProps | any = useControls(
+    {
+      width: 520,
+      title: 'YuntiUI Modal',
+      children:
+        'The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.',
+      cancelText: '取消',
+      okText: '确定',
+      okType: 'primary',
+      confirmLoading: false,
+      mask: true,
+      maskClosable: true,
+      centered: false,
+      keyboard: true,
+      focusTriggerAfterClose: true,
+      destroyOnClose: false,
+      zIndex: 1000,
+      borderd: true,
+    },
+    { store }
+  );
+  return (
+    <StoryBook levaStore={store}>
+      <Button
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        Open Modal
+      </Button>
+      <Modal
+        {...control}
+        onCancel={() => setOpen(false)}
+        onOk={() => {
+          setOpen(false);
+        }}
+        open={open}
+      />
+    </StoryBook>
+  );
+};

src/Modal/demos/index.tsx

@@ -0,0 +1,31 @@
+import { Button, Modal } from '@yuntijs/ui';
+import { useState } from 'react';
+
+export default () => {
+  const [open, setOpen] = useState<boolean>(false);
+  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        Open Modal
+      </Button>
+      <Modal
+        confirmLoading={confirmLoading}
+        onCancel={() => setOpen(false)}
+        onOk={() => {
+          setConfirmLoading(true);
+        }}
+        open={open}
+        title="YuntiUI Modal"
+      >
+        The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully
+        compatible with Antd components, and it is recommended to use antd-style as the default
+        css-in-js styling solution.
+      </Modal>
+    </>
+  );
+};

src/Modal/index.md

@@ -0,0 +1,59 @@
+---
+nav: Components
+group: Feedback
+title: Modal
+description: Display a modal dialog box, providing a title, content area, and action buttons.
+---
+
+## Usage
+
+based on antd [Modal](https://ant.design/components/modal-cn/) component.
+
+### Simple usage
+
+```jsx | pureimport { Button, Modal } from '@yuntijs/ui';
+import { useState } from 'react';
+
+export default () => {
+  const [open, setOpen] = useState < boolean > false;
+  const [confirmLoading, setConfirmLoading] = useState < boolean > false;
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        Open Modal
+      </Button>
+      <Modal
+        title="YuntiUI Modal"
+        open={open}
+        confirmLoading={confirmLoading}
+        onCancel={() => setOpen(false)}
+        onOk={() => {
+          setConfirmLoading(true);
+        }}
+      >
+        The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully
+        compatible with Antd components, and it is recommended to use antd-style as the default
+        css-in-js styling solution.
+      </Modal>
+    </>
+  );
+};
+```
+
+<code src="./demos/index.tsx" center></code>
+
+### Modal.method usage
+
+<code src="./demos/Method.tsx" center></code>
+
+## Playground
+
+<code src="./demos/Playground.tsx" nopadding></code>
+
+## APIs
+
+<API></API>

src/Modal/index.tsx

@@ -0,0 +1,41 @@
+import {
+  Modal as AntdModal,
+  type ModalFuncProps as AntdModalFuncProps,
+  type ModalProps as AntdModalProps,
+} from 'antd';
+import React from 'react';
+
+import { useStyles } from './style';
+
+export type ModalFuncProps = AntdModalFuncProps;
+interface CustomModalProps {
+  /**
+   * @description Whether support border-bottom of header and border-top of footer.
+   * @default 'true'
+   */
+  borderd?: boolean;
+}
+export interface ModalProps extends AntdModalProps, CustomModalProps {}
+
+const OriginModal: React.FC<ModalProps> = props => {
+  const { className, borderd = true, ...otherProps } = props;
+
+  const { styles, cx } = useStyles(otherProps);
+
+  return <AntdModal {...otherProps} className={cx(styles.custom, className)} />;
+};
+
+type ModalType = typeof AntdModal;
+export const Modal = OriginModal as ModalType;
+Modal.useModal = AntdModal.useModal;
+Modal.destroyAll = AntdModal.destroyAll;
+Modal.config = AntdModal.config;
+Modal._InternalPanelDoNotUseOrYouWillBeFired = AntdModal._InternalPanelDoNotUseOrYouWillBeFired;
+Modal.info = AntdModal.info;
+Modal.success = AntdModal.success;
+Modal.error = AntdModal.error;
+Modal.warning = AntdModal.warning;
+Modal.warn = AntdModal.warn;
+Modal.confirm = AntdModal.confirm;
+
+export default Modal;

src/Modal/style.ts

@@ -0,0 +1,45 @@
+import { createStyles } from 'antd-style';
+
+import { ModalProps } from './index';
+
+export const useStyles = createStyles(
+  ({ css, prefixCls }, { borderd = true, footer }: ModalProps) => {
+    const noFooter = footer === null || (Array.isArray(footer) && footer.length === 0);
+    const borderdStyle = css`
+      .${prefixCls}-modal-header::after {
+        content: ' ';
+
+        position: absolute;
+        top: 56px;
+        left: 0;
+
+        width: 100%;
+        height: 1px;
+
+        background: rgba(5, 5, 5, 0.06);
+      }
+      .${prefixCls}-modal-body {
+        margin-top: 40px;
+        margin-bottom: ${noFooter ? 0 : '40px'};
+      }
+      .${prefixCls}-modal-body::after {
+        content: ' ';
+
+        position: absolute;
+        bottom: 72px;
+        left: 0;
+
+        width: 100%;
+        height: ${noFooter ? 0 : '1px'};
+
+        background: rgba(5, 5, 5, 0.06);
+      }
+    `;
+    return {
+      custom: css`
+        ${borderd && borderdStyle}
+      `,
+    };
+  },
+  { hashPriority: 'low' }
+);

src/index.ts

@@ -11,6 +11,7 @@ export * from './Card';
 export * from './Descriptions';
 export * from './Divider';
 export * from './Drawer';
+export * from './Modal';
 
 // ~ antd
 export {
@@ -48,10 +49,43 @@ export {
   type DatePickerProps,
   Dropdown,
   type DropDownProps,
+  Empty,
+  type EmptyProps,
   Flex,
   type FlexProps,
+  FloatButton,
+  type FloatButtonProps,
+  Form,
+  type FormInstance,
+  type FormItemProps,
+  type FormListFieldData,
+  type FormListOperation,
+  type FormProps,
+  type FormRule,
+  Grid,
+  Image,
+  ImageProps,
+  Input,
+  InputNumber,
+  type InputNumberProps,
+  type InputProps,
+  type InputRef,
+  Layout,
+  type LayoutProps,
+  List,
+  type ListProps,
+  type MentionProps,
+  Mentions,
+  Menu,
+  type MenuItemProps,
+  type MenuProps,
+  type MenuRef,
+  type MenuTheme,
+  message,
+  type MessageArgsProps,
   Space,
   type SpaceProps,
+  type SubMenuProps,
 } from 'antd';
 
 // ~ @lobehub/ui