+ {/* 这里避免蒙层出现后，页面可以滚动 */}
+
+
{}}
+ />
+
+
+
+ {title}
+ {isClose && (
+
+ {closeIcon === undefined ? : closeIcon}
+
+ )}
+
+
{children}
+
+
+ {footer ? (
+
+
+
+
+
+ ) : (
+
{footer}
+ )}
+
+
+
+ );
+};
+export default ModalContent;
diff --git a/packages/design/components/Modal/index.scss b/packages/design/components/Modal/index.scss
new file mode 100644
index 0000000..a74e9da
--- /dev/null
+++ b/packages/design/components/Modal/index.scss
@@ -0,0 +1,76 @@
+@import '../constants.scss';
+@import '../common.scss';
+
+.#{$prefix}-modal {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 999;
+
+ .#{$prefix}-modal-mask {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 999;
+ background-color: rgba(0, 0, 0, 0.3);
+
+ &__hidden {
+ background-color: transparent;
+ }
+ }
+ .#{$prefix}-modal-card {
+ position: relative;
+ z-index: 1000;
+ padding: 24px;
+ margin: 80px auto;
+ height: auto;
+ width: 448px;
+ border-radius: 16px;
+ color: var(--semi-color-white);
+ background-color: var(--semi-color-bg-3);
+
+ .#{$prefix}-modal-cancel {
+ }
+ .#{$prefix}-modal-title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 1.5;
+ word-wrap: break-word;
+ }
+ .#{$prefix}-modal-footer {
+ position: relative;
+ .#{$prefix}-modal-col-footer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ }
+ .#{$prefix}-modal-row-footer {
+ display: flex;
+ justify-content: flex-end;
+ flex-wrap: nowrap;
+ margin-top: 24px;
+ gap: 16px;
+ }
+ }
+ .#{$prefix}-modal-content {
+ font-size: 14px;
+ line-height: 1.6;
+ white-space: pre-wrap;
+ word-break: break-all;
+ overflow: hidden;
+ }
+
+ .#{$prefix}-modal-cancel {
+ cursor: pointer;
+ }
+ }
+}
diff --git a/packages/design/components/Modal/index.tsx b/packages/design/components/Modal/index.tsx
new file mode 100644
index 0000000..13e1e7f
--- /dev/null
+++ b/packages/design/components/Modal/index.tsx
@@ -0,0 +1,52 @@
+import React, { Component, MouseEventHandler } from 'react';
+import { ModalProps } from 'pivot-design-props';
+import './index.scss';
+import ModalContent from './ModalContent';
+import { createPortal } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
+const ModalFC: React.FC
= (props) => {
+ const { open, children } = props;
+ return <>{open && createPortal({children}, document.body)};
+};
+
+class Modal extends Component {
+ static defaultProps = {
+ maskstyle: {},
+ open: false,
+ children: null,
+ hasMask: true,
+ maskClosable: true,
+ onCancel: () => {},
+ modalRender: null,
+ };
+
+ static show = (props: ModalProps) => {
+ const modalDiv = document.createElement('div');
+ const modalRoot = createRoot(modalDiv);
+ document.body.appendChild(modalDiv);
+
+ const destory = () => {
+ modalRoot.unmount();
+ modalDiv.parentNode?.removeChild(modalDiv);
+ };
+ const _onCancel: MouseEventHandler = (e) => {
+ props.onCancel?.(e);
+ destory();
+ };
+ const _onOk: MouseEventHandler = (e) => {
+ props.onOk?.(e);
+ destory();
+ };
+ modalRoot.render();
+ };
+
+ constructor(props: ModalProps) {
+ super(props);
+ }
+ render(): React.ReactNode {
+ return {this.props.children};
+ }
+}
+
+export default Modal;
diff --git a/packages/design/components/Skeleton/index.scss b/packages/design/components/Skeleton/index.scss
index c245f1c..f93319f 100644
--- a/packages/design/components/Skeleton/index.scss
+++ b/packages/design/components/Skeleton/index.scss
@@ -26,6 +26,21 @@
overflow: hidden;
border-radius: 50%;
}
+ li {
+ border-radius: 4px;
+ list-style: none;
+ display: block;
+ width: 100%;
+ height: calc(var(--skeleton-paragraph-size, 0.8)* 1rem);
+ &:first-child {
+ width: 30%;
+ }
+ &:nth-child(2) {
+ width: 60%;
+ }
+
+ }
+
}
// li {
// border-radius: 4px;
@@ -40,7 +55,6 @@
// width: 60%;
// }
// }
-
.#{$prefix}-skeleton-loading {
background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
@@ -50,6 +64,7 @@
animation: var(--skeleton-active, active) 1.4s ease infinite;
}
+
@keyframes active {
0% {
background-position: 100% 50%;
diff --git a/packages/design/index.ts b/packages/design/index.ts
index 013613e..2c29a92 100644
--- a/packages/design/index.ts
+++ b/packages/design/index.ts
@@ -13,9 +13,11 @@ export {
import Icon from './components/Icon';
import Input from './components/Input';
import Card from './components/Card';
+import Modal from './components/Modal';
import Skeleton from './components/Skeleton';
import Popover from './components/Popover/';
-export { Button, Icon, Input, Card, Skeleton, Popover };
+export * from './components/Modal';
+export { Button, Icon, Input, Card, Skeleton, Popover, Modal };
export const arrayMove = (array: any[], from: number, to: number) => {
const resArray = array.slice();
}
actions={