feat: 修改系统设置里的Modal

react-ui/src/components/IconSelector/IconPicSearcher.tsx

@@ -1,6 +1,7 @@
+import KFModal from '@/components/KFModal';
 import * as AntdIcons from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Modal, Popover, Progress, Result, Spin, Tooltip, Upload } from 'antd';
+import { Popover, Progress, Result, Spin, Tooltip, Upload } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
 import './style.less';
 
@@ -134,7 +135,7 @@ const PicSearcher: React.FC = () => {
       >
         <AntdIcons.CameraOutlined className="icon-pic-btn" onClick={toggleModal} />
       </Popover>
-      <Modal
+      <KFModal
         title={intl.formatMessage({
           id: 'app.docs.components.icon.pic-searcher.title',
           defaultMessage: '信息',
@@ -228,7 +229,7 @@ const PicSearcher: React.FC = () => {
             )}
           </div>
         </Spin>
-      </Modal>
+      </KFModal>
     </div>
   );
 };

react-ui/src/components/KFModal/index.less

@@ -1,29 +1,29 @@
 .kf-modal {
   .ant-modal-content {
-    padding: 20px 67px;
+    padding: 40px 67px;
     background-image: url(/assets/images/modal-back.png);
     background-repeat: no-repeat;
     background-position: top center;
     background-size: 100%;
-    border-radius: 21px;
+    border-radius: 20px;
   }
   .ant-modal-header {
-    margin: 20px 0 30px;
+    margin-bottom: 30px;
     background-color: transparent;
   }
   .ant-modal-footer {
     display: flex;
     justify-content: center;
-    margin: 40px 0 20px 0;
+    margin-top: 40px;
 
     .ant-btn {
       height: 40px;
       padding: 0 30px;
-      font-size: 16px;
+      font-size: @font-size-content;
       border-radius: 10px;
     }
     .ant-btn-default {
-      color: #1d1d20;
+      color: @text-color;
       background: rgba(22, 100, 255, 0.06);
       border-color: transparent;
     }
@@ -31,10 +31,4 @@
       margin-left: 20px;
     }
   }
-  .ant-modal-close {
-    top: 27px;
-    right: 27px;
-    width: 26px;
-    height: 26px;
-  }
 }

react-ui/src/components/KFModal/index.tsx

@@ -10,7 +10,7 @@ import classNames from 'classnames';
 import './index.less';
 
 export interface KFModalProps extends ModalProps {
-  image: string;
+  image?: string;
 }
 function KFModal({ title, image, children, className = '', ...rest }: KFModalProps) {
   return (

react-ui/src/components/ModalTitle/index.tsx

@@ -18,7 +18,7 @@ type ModalTitleProps = {
 function ModalTitle({ title, image, style, className }: ModalTitleProps) {
   return (
     <div className={classNames(styles['modal-title'], className)} style={style}>
-      <img className={styles['modal-title__image']} src={image} alt="" />
+      {image && <img className={styles['modal-title__image']} src={image} alt="" />}
       {title}
     </div>
   );

react-ui/src/global.less

@@ -82,90 +82,6 @@ body {
   height: 100vh;
   overflow-y: hidden;
 }
-.ant-modal-confirm .ant-modal-confirm-paragraph {
-  margin: 54px 0 auto;
-  text-align: center;
-}
-.ant-modal-confirm-confirm .ant-modal-confirm-body > .anticon {
-  display: none;
-}
-.ant-modal-confirm .ant-modal-confirm-btns {
-  margin-top: 30px;
-  text-align: center;
-}
-.ant-modal-confirm-btns .ant-btn-default {
-  width: 110px;
-  height: 40px;
-  margin-right: 10px;
-  // color: @text-color;
-  font-size: 18px;
-  background: rgba(22, 100, 255, 0.06);
-  border-color: transparent;
-  border-radius: 10px;
-}
-.ant-modal-confirm-btns .ant-btn-default:hover {
-  background: rgba(22, 100, 255, 0.06);
-  border-color: transparent;
-}
-.ant-modal-confirm-btns .ant-btn-primary {
-  width: 110px;
-  height: 40px;
-  font-size: 18px;
-  border-radius: 10px;
-  border-radius: 10px;
-}
-.ant-modal .ant-input-affix-wrapper {
-  height: 46px;
-  padding: 1px 11px;
-}
-.ant-input-textarea-affix-wrapper.ant-input-affix-wrapper {
-  padding: 0;
-}
-.ant-modal .ant-select-single {
-  height: 46px;
-}
-.ant-modal .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
-  line-height: 46px;
-}
-.ant-modal .ant-modal-close-x {
-  width: 26px;
-  height: 26px;
-  color: @text-color-secondary;
-  border: 2px solid @text-color-secondary;
-  border-radius: 50%;
-
-  &:hover {
-    color: #272536;
-    border: 2px solid #272536;
-  }
-}
-.ant-modal .ant-modal-close:hover {
-  background-color: transparent;
-}
-.ant-modal .ant-modal-close:active {
-  background-color: transparent;
-}
-.ant-modal-content {
-  margin-top: 50px;
-  margin-left: -130px;
-}
-.ant-modal .ant-modal-content {
-  padding: 0;
-}
-.ant-modal-confirm-body-wrapper {
-  height: 303px;
-  background-image: url(/assets/images/modal-back.png);
-  background-repeat: no-repeat;
-  background-position: top center;
-  background-size: 100%;
-  border-radius: 0;
-}
-.ant-modal .ant-modal-content {
-  border-radius: 20px;
-}
-.ant-modal .ant-modal-footer > .ant-btn + .ant-btn {
-  margin-left: 20px;
-}
 .ant-pagination .ant-pagination-item.ant-pagination-item-active {
   background: @primary-color;
   border-width: 0;

react-ui/src/overrides.less

@@ -56,3 +56,84 @@
 .ant-pro-page-container {
   overflow-y: auto;
 }
+
+// Input
+.ant-input-textarea-affix-wrapper.ant-input-affix-wrapper {
+  padding: 0;
+}
+
+// Modal
+.ant-modal {
+  .ant-modal-close {
+    top: 27px;
+    right: 27px;
+    width: 26px;
+    height: 26px;
+    color: @text-color-secondary;
+    border: 2px solid @text-color-secondary;
+    border-radius: 50%;
+
+    &:hover,
+    &:active {
+      color: #272536;
+      background-color: transparent;
+      border: 2px solid #272536;
+    }
+  }
+
+  .ant-input-affix-wrapper {
+    height: 46px;
+    padding: 1px 11px;
+  }
+
+  .ant-select-single {
+    height: 46px;
+  }
+
+  .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+    line-height: 46px;
+  }
+}
+
+// Confirm Modal
+.ant-modal-confirm {
+  .ant-modal-content {
+    padding: 40px 67px;
+    background-image: url(/assets/images/modal-back.png);
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-size: 100%;
+    border-radius: 20px;
+  }
+  .ant-modal-confirm-body {
+    .anticon {
+      display: none;
+    }
+  }
+
+  .ant-modal-confirm-paragraph {
+    max-width: 100%;
+    margin-top: 27px;
+    text-align: center;
+  }
+
+  .ant-modal-confirm-btns {
+    margin-top: 40px;
+    text-align: center;
+
+    .ant-btn {
+      height: 40px;
+      padding: 0 30px;
+      font-size: @font-size-content;
+      border-radius: 10px;
+    }
+    .ant-btn-default {
+      color: @text-color;
+      background: rgba(22, 100, 255, 0.06);
+      border-color: transparent;
+    }
+    .ant-btn + .ant-btn {
+      margin-left: 20px;
+    }
+  }
+}

react-ui/src/pages/Monitor/Job/detail.tsx

@@ -1,9 +1,9 @@
 import { DictValueEnumObj } from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
 import { getValueEnumLabel } from '@/utils/options';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Button, Descriptions, Modal } from 'antd';
+import { Button, Descriptions } from 'antd';
 import React, { useEffect } from 'react';
-
 /* *
  *
  * @author whiteshader@163.com
@@ -39,7 +39,7 @@ const OperlogForm: React.FC<OperlogFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={800}
       title={intl.formatMessage({
         id: 'monitor.job.detail',
@@ -124,7 +124,7 @@ const OperlogForm: React.FC<OperlogFormProps> = (props) => {
           {values.invokeTarget}
         </Descriptions.Item>
       </Descriptions>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/Monitor/Job/edit.tsx

@@ -11,7 +11,7 @@ import {
 import { FormattedMessage, useIntl } from '@umijs/max';
 import { Form, Modal } from 'antd';
 import React, { useEffect } from 'react';
-
+import KFModal from '@/components/KFModal';
 /**
  * 定时任务调度 Edit Form
  *
@@ -66,7 +66,7 @@ const JobForm: React.FC<JobFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'monitor.job.title',
@@ -238,7 +238,7 @@ const JobForm: React.FC<JobFormProps> = (props) => {
           ]}
         />
       </ProForm>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/Monitor/JobLog/detail.tsx

@@ -1,16 +1,10 @@
 import { DictValueEnumObj } from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
 import { getValueEnumLabel } from '@/utils/options';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Descriptions, Modal } from 'antd';
+import { Descriptions } from 'antd';
 import React, { useEffect } from 'react';
 
-/* *
- *
- * @author whiteshader@163.com
- * @datetime  2021/09/16
- *
- * */
-
 export type JobLogFormValueType = Record<string, unknown> & Partial<API.Monitor.JobLog>;
 
 export type JobLogFormProps = {
@@ -33,7 +27,7 @@ const JobLogDetailForm: React.FC<JobLogFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'monitor.job.log.title',
@@ -95,7 +89,7 @@ const JobLogDetailForm: React.FC<JobLogFormProps> = (props) => {
           {getValueEnumLabel(statusOptions, values.status, '未知')}
         </Descriptions.Item>
       </Descriptions>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/Config/edit.tsx

@@ -1,4 +1,5 @@
 import { DictValueEnumObj } from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
 import {
   ProForm,
   ProFormDigit,
@@ -7,9 +8,8 @@ import {
   ProFormTextArea,
 } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
 import React, { useEffect } from 'react';
-
 export type ConfigFormData = Record<string, unknown> & Partial<API.System.Config>;
 
 export type ConfigFormProps = {
@@ -53,7 +53,7 @@ const ConfigForm: React.FC<ConfigFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'system.config.title',
@@ -166,7 +166,7 @@ const ConfigForm: React.FC<ConfigFormProps> = (props) => {
           ]}
         />
       </ProForm>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/Dept/edit.tsx

@@ -1,4 +1,5 @@
 import { DictValueEnumObj } from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
 import {
   ProForm,
   ProFormDigit,
@@ -7,10 +8,9 @@ import {
   ProFormTreeSelect,
 } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
 import { DataNode } from 'antd/es/tree';
 import React, { useEffect } from 'react';
-
 export type DeptFormData = Record<string, unknown> & Partial<API.System.Dept>;
 
 export type DeptFormProps = {
@@ -59,7 +59,7 @@ const DeptForm: React.FC<DeptFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'system.dept.title',
@@ -204,7 +204,7 @@ const DeptForm: React.FC<DeptFormProps> = (props) => {
           ]}
         />
       </ProForm>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/Dict/edit.tsx

@@ -1,4 +1,5 @@
 import { DictValueEnumObj } from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
 import {
   ProForm,
   ProFormDigit,
@@ -7,9 +8,8 @@ import {
   ProFormTextArea,
 } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
 import React, { useEffect } from 'react';
-
 export type DictTypeFormData = Record<string, unknown> & Partial<API.System.DictType>;
 
 export type DictTypeFormProps = {
@@ -52,7 +52,7 @@ const DictTypeForm: React.FC<DictTypeFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'system.dict.title',
@@ -146,7 +146,7 @@ const DictTypeForm: React.FC<DictTypeFormProps> = (props) => {
           ]}
         />
       </ProForm>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/DictData/edit.tsx

@@ -1,4 +1,5 @@
 import { DictValueEnumObj } from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
 import {
   ProForm,
   ProFormDigit,
@@ -8,9 +9,8 @@ import {
   ProFormTextArea,
 } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
 import React, { useEffect } from 'react';
-
 export type DataFormData = Record<string, unknown> & Partial<API.System.DictData>;
 
 export type DataFormProps = {
@@ -58,7 +58,7 @@ const DictDataForm: React.FC<DataFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'system.dict.data.title',
@@ -246,7 +246,7 @@ const DictDataForm: React.FC<DataFormProps> = (props) => {
           ]}
         />
       </ProForm>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/Logininfor/edit.tsx

@@ -1,4 +1,5 @@
 import { DictValueEnumObj } from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
 import {
   ProForm,
   ProFormDigit,
@@ -7,9 +8,8 @@ import {
   ProFormTimePicker,
 } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
 import React, { useEffect } from 'react';
-
 export type LogininforFormData = Record<string, unknown> & Partial<API.Monitor.Logininfor>;
 
 export type LogininforFormProps = {
@@ -53,7 +53,7 @@ const LogininforForm: React.FC<LogininforFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'system.logininfor.title',
@@ -209,7 +209,7 @@ const LogininforForm: React.FC<LogininforFormProps> = (props) => {
           ]}
         />
       </ProForm>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/Menu/edit.tsx

@@ -1,5 +1,6 @@
 import { DictValueEnumObj } from '@/components/DictTag';
 import IconSelector from '@/components/IconSelector';
+import KFModal from '@/components/KFModal';
 import { createIcon } from '@/utils/IconUtil';
 import {
   ProForm,
@@ -10,7 +11,7 @@ import {
   ProFormTreeSelect,
 } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
 import { DataNode } from 'antd/es/tree';
 import React, { useEffect, useState } from 'react';
 
@@ -73,7 +74,7 @@ const MenuForm: React.FC<MenuFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'system.menu.title',
@@ -367,7 +368,7 @@ const MenuForm: React.FC<MenuFormProps> = (props) => {
           }}
         />
       </ProForm>
-      <Modal
+      <KFModal
         width={800}
         open={iconSelectorOpen}
         onCancel={() => {
@@ -382,8 +383,8 @@ const MenuForm: React.FC<MenuFormProps> = (props) => {
             setIconSelectorOpen(false);
           }}
         />
-      </Modal>
-    </Modal>
+      </KFModal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/Notice/edit.tsx

@@ -1,4 +1,5 @@
 import { DictValueEnumObj } from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
 import {
   ProForm,
   ProFormDigit,
@@ -8,9 +9,8 @@ import {
   ProFormTextArea,
 } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
 import React, { useEffect } from 'react';
-
 export type NoticeFormData = Record<string, unknown> & Partial<API.System.Notice>;
 
 export type NoticeFormProps = {
@@ -55,7 +55,7 @@ const NoticeForm: React.FC<NoticeFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'system.notice.title',
@@ -168,7 +168,7 @@ const NoticeForm: React.FC<NoticeFormProps> = (props) => {
           ]}
         />
       </ProForm>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/Operlog/detail.tsx

@@ -1,9 +1,9 @@
 import { DictValueEnumObj } from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
 import { getValueEnumLabel } from '@/utils/options';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Descriptions, Modal } from 'antd';
+import { Descriptions } from 'antd';
 import React from 'react';
-
 export type OperlogFormData = Record<string, unknown> & Partial<API.Monitor.Operlog>;
 
 export type OperlogFormProps = {
@@ -28,7 +28,7 @@ const OperlogDetailForm: React.FC<OperlogFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'monitor.operlog.title',
@@ -107,7 +107,7 @@ const OperlogDetailForm: React.FC<OperlogFormProps> = (props) => {
           {values.operTime?.toString()}
         </Descriptions.Item>
       </Descriptions>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/Post/edit.tsx

@@ -1,4 +1,5 @@
 import { DictValueEnumObj } from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
 import {
   ProForm,
   ProFormDigit,
@@ -7,9 +8,8 @@ import {
   ProFormTextArea,
 } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
 import React, { useEffect } from 'react';
-
 export type PostFormData = Record<string, unknown> & Partial<API.System.Post>;
 
 export type PostFormProps = {
@@ -53,7 +53,7 @@ const PostForm: React.FC<PostFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'system.post.title',
@@ -160,7 +160,7 @@ const PostForm: React.FC<PostFormProps> = (props) => {
           ]}
         />
       </ProForm>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/Role/components/DataScope.tsx

@@ -1,10 +1,10 @@
+import KFModal from '@/components/KFModal';
 import { Key, ProForm, ProFormDigit, ProFormSelect, ProFormText } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Checkbox, Col, Form, Modal, Row, Tree } from 'antd';
+import { Checkbox, Col, Form, Row, Tree } from 'antd';
 import { CheckboxValueType } from 'antd/es/checkbox/Group';
 import { DataNode } from 'antd/es/tree';
 import React, { useEffect, useState } from 'react';
-
 /* *
  *
  * @author whiteshader@163.com
@@ -90,7 +90,7 @@ const DataScopeForm: React.FC<DataScopeFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'system.user.auth.role',
@@ -234,7 +234,7 @@ const DataScopeForm: React.FC<DataScopeFormProps> = (props) => {
           </Row>
         </ProForm.Item>
       </ProForm>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/Role/components/UserSelectorModal.tsx

@@ -1,4 +1,5 @@
 import DictTag from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
 import { getDictValueEnum } from '@/services/system/dict';
 import {
   ActionType,
@@ -8,9 +9,7 @@ import {
   RequestData,
 } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Modal } from 'antd';
 import React, { useEffect, useRef, useState } from 'react';
-
 /* *
  *
  * @author whiteshader@163.com
@@ -90,7 +89,7 @@ const UserSelectorModal: React.FC<DataScopeFormProps> = (props) => {
   ];
 
   return (
-    <Modal
+    <KFModal
       width={800}
       title={intl.formatMessage({
         id: 'system.role.auth.user',
@@ -122,7 +121,7 @@ const UserSelectorModal: React.FC<DataScopeFormProps> = (props) => {
           },
         }}
       />
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/Role/edit.tsx

@@ -1,4 +1,5 @@
 import { DictValueEnumObj } from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
 import {
   ProForm,
   ProFormDigit,
@@ -7,10 +8,9 @@ import {
   ProFormTextArea,
 } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
 import Tree, { DataNode } from 'antd/es/tree';
 import React, { useEffect, useState } from 'react';
-
 export type RoleFormData = Record<string, unknown> & Partial<API.System.Role>;
 
 export type RoleFormProps = {
@@ -61,7 +61,7 @@ const RoleForm: React.FC<RoleFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'system.role.title',
@@ -198,7 +198,7 @@ const RoleForm: React.FC<RoleFormProps> = (props) => {
           ]}
         />
       </ProForm>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/User/components/AuthRole.tsx

@@ -1,15 +1,8 @@
+import KFModal from '@/components/KFModal';
 import { ProForm, ProFormSelect } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
 import React, { useEffect } from 'react';
-
-/* *
- *
- * @author whiteshader@163.com
- * @datetime  2023/02/06
- *
- * */
-
 export type FormValueType = any & Partial<API.System.Dept>;
 
 export type AuthRoleFormProps = {
@@ -40,7 +33,7 @@ const AuthRoleForm: React.FC<AuthRoleFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'system.user.auth.role',
@@ -74,7 +67,7 @@ const AuthRoleForm: React.FC<AuthRoleFormProps> = (props) => {
           rules={[{ required: true, message: '请选择角色!' }]}
         />
       </ProForm>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/User/components/ResetPwd.tsx

@@ -1,15 +1,9 @@
+import KFModal from '@/components/KFModal';
 import { ProForm, ProFormText } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
 import React from 'react';
 
-/* *
- *
- * @author whiteshader@163.com
- * @datetime  2023/02/06
- *
- * */
-
 export type FormValueType = any & Partial<API.System.User>;
 
 export type UpdateFormProps = {
@@ -44,7 +38,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'system.user.reset.password',
@@ -88,7 +82,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
           ]}
         />
       </ProForm>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/System/User/edit.tsx

@@ -1,4 +1,5 @@
 import { DictValueEnumObj } from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
 import {
   ProForm,
   ProFormRadio,
@@ -8,17 +9,10 @@ import {
   ProFormTreeSelect,
 } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
 import { DataNode } from 'antd/es/tree';
 import React, { useEffect } from 'react';
 
-/* *
- *
- * @author whiteshader@163.com
- * @datetime  2023/02/06
- *
- * */
-
 export type UserFormData = Record<string, unknown> & Partial<API.System.User>;
 
 export type UserFormProps = {
@@ -74,7 +68,7 @@ const UserForm: React.FC<UserFormProps> = (props) => {
   };
 
   return (
-    <Modal
+    <KFModal
       width={640}
       title={intl.formatMessage({
         id: 'system.user.title',
@@ -260,7 +254,7 @@ const UserForm: React.FC<UserFormProps> = (props) => {
           ]}
         />
       </ProForm>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/Tool/Gen/components/PreviewCode.tsx

@@ -1,10 +1,10 @@
+import KFModal from '@/components/KFModal';
 import { useIntl } from '@umijs/max';
 import type { TabsProps } from 'antd';
-import { Modal, Tabs } from 'antd';
+import { Tabs } from 'antd';
 import 'highlight.js/styles/base16/material.css';
 import React, { useEffect } from 'react';
 import Highlight from 'react-highlight';
-
 interface PreviewTableProps {
   open: boolean;
   data?: any;
@@ -26,7 +26,7 @@ const PreviewTableCode: React.FC<PreviewTableProps> = (props) => {
   useEffect(() => {}, []);
 
   return (
-    <Modal
+    <KFModal
       width={900}
       title={intl.formatMessage({
         id: 'gen.preview',
@@ -43,7 +43,7 @@ const PreviewTableCode: React.FC<PreviewTableProps> = (props) => {
       }}
     >
       <Tabs defaultActiveKey="1" items={panes}></Tabs>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/pages/User/Center/components/AvatarCropper/index.tsx

@@ -1,3 +1,4 @@
+import KFModal from '@/components/KFModal';
 import { uploadAvatar } from '@/services/system/user';
 import {
   MinusOutlined,
@@ -7,7 +8,7 @@ import {
   UploadOutlined,
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Col, Modal, Row, Space, Upload, message } from 'antd';
+import { Button, Col, Row, Space, Upload, message } from 'antd';
 import React, { useEffect, useRef, useState } from 'react';
 import { Cropper } from 'react-cropper';
 import './cropper.css';
@@ -88,7 +89,7 @@ const AvatarCropperForm: React.FC<AvatarCropperProps> = (props) => {
     };
   };
   return (
-    <Modal
+    <KFModal
       width={800}
       title={intl.formatMessage({
         id: 'system.user.modify_avatar',
@@ -137,7 +138,7 @@ const AvatarCropperForm: React.FC<AvatarCropperProps> = (props) => {
           </Space>
         </Col>
       </Row>
-    </Modal>
+    </KFModal>
   );
 };
 

react-ui/src/utils/ui.tsx

@@ -12,6 +12,8 @@ import { Modal, type ModalFuncProps, type UploadFile } from 'antd';
 export function modalConfirm({ title, content, onOk, ...rest }: ModalFuncProps) {
   Modal.confirm({
     ...rest,
+    width: 600,
+    centered: true,
     title: (
       <div>
         <img