chore: pageModal 增加关闭按钮

packages/app/src/components/modal/PageModal.tsx

@@ -1,5 +1,7 @@
 import ReactModal from 'react-modal';
 import {ChildrenFC} from '@utils';
+import css from './index.module.css';
+import {CloseCircleFilled} from '@ant-design/icons';
 
 const styles: ReactModal.Styles = {
   content: {
@@ -26,7 +28,12 @@ const PageModal: ChildrenFC<Props> = function ({children, visible, onClose, test
       style={styles}
       closeTimeoutMS={200}
     >
-      {children}
+      <section className={css.pageDialog}>
+        <div className={css.pageDialogClose}>
+          <CloseCircleFilled className={css.pageDialogCloseIcon} onClick={onClose} />
+        </div>
+        <div className={css.pageDialogContent}>{children}</div>
+      </section>
     </ReactModal>
   );
 };

packages/app/src/components/modal/index.module.css

@@ -122,3 +122,37 @@
     height: 50px;
   }
 }
+
+.page-dialog {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.page-dialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: 40px;
+  padding: 0 10px;
+  margin-bottom: -24px;
+}
+
+.page-dialog-close-icon {
+  z-index: 2;
+  font-size: 24px;
+  color: #d7d7d7;
+  cursor: pointer;
+  transition: color 100ms linear;
+
+  &:hover {
+    color: #999;
+  }
+}
+
+.page-dialog-content {
+  flex: 1;
+  overflow: auto;
+}