From d41311d9fa493ff990865ce26853df79e8de4189 Mon Sep 17 00:00:00 2001
From: LuckyFBB <976060700@qq.com>
Date: Mon, 4 Aug 2025 11:29:46 +0800
Subject: [PATCH] feat(modal): change Modal.method to use dtinsightIcon and add
 Modal.delete

---
 src/index.ts               |  2 +-
 src/modal/demos/method.tsx | 64 ++++++++++++++++++++++++++++++++++++++
 src/modal/index.md         |  9 ++++++
 src/modal/index.scss       | 17 ++++++++++
 src/modal/index.tsx        | 50 ++++++++++++++++++++++++-----
 5 files changed, 133 insertions(+), 9 deletions(-)
 create mode 100644 src/modal/demos/method.tsx

diff --git a/src/index.ts b/src/index.ts
index 613a09772..4d612dd9b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -25,7 +25,7 @@ export { default as Image } from './image';
 export { default as Input } from './input';
 export { default as KeyEventListener } from './keyEventListener';
 export { default as MarkdownRender } from './markdownRender';
-export { default as Modal } from './modal/modal';
+export { default as Modal } from './modal';
 export { default as NotFound } from './notFound';
 export { default as ProgressBar } from './progressBar';
 export { default as ProgressLine } from './progressLine';
diff --git a/src/modal/demos/method.tsx b/src/modal/demos/method.tsx
new file mode 100644
index 000000000..b03f78394
--- /dev/null
+++ b/src/modal/demos/method.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+import { Modal } from 'dt-react-component';
+
+const info = () => {
+    Modal.info({
+        title: 'This is a notification message',
+        content: (
+            <div>
+                <p>some messages...some messages...</p>
+                <p>some messages...some messages...</p>
+            </div>
+        ),
+        onOk() {},
+    });
+};
+
+const success = () => {
+    Modal.success({
+        title: 'This is an success message',
+        content: 'some messages...some messages...',
+    });
+};
+
+const error = () => {
+    Modal.error({
+        title: 'This is an error message',
+        content: 'some messages...some messages...',
+    });
+};
+
+const warning = () => {
+    Modal.warning({
+        title: 'This is a warning message',
+        content: 'some messages...some messages...',
+    });
+};
+
+const confirm = () => {
+    Modal.confirm({
+        title: 'This is a confirm message',
+        content: 'some messages...some messages...',
+    });
+};
+
+const handleDelete = () => {
+    Modal.delete({
+        title: 'This is a delete message',
+        content: 'some messages...some messages...',
+    });
+};
+
+const Method: React.FC = () => (
+    <Space wrap>
+        <Button onClick={info}>Info</Button>
+        <Button onClick={success}>Success</Button>
+        <Button onClick={error}>Error</Button>
+        <Button onClick={warning}>Warning</Button>
+        <Button onClick={confirm}>Confirm</Button>
+        <Button onClick={handleDelete}>Delete</Button>
+    </Space>
+);
+
+export default Method;
diff --git a/src/modal/index.md b/src/modal/index.md
index 00309066b..71aa6d799 100644
--- a/src/modal/index.md
+++ b/src/modal/index.md
@@ -22,6 +22,7 @@ toc: content
 <code src="./demos/draggable.tsx" title="draggable"></code>
 <code src="./demos/resizable.tsx" title="resizable"></code>
 <code src="./demos/window.tsx" title="窗口模式即支持 draggable 同时也支持 resizable"></code>
+<code src="./demos/method.tsx" title="重写 Modal.method 的 icon"></code>
 
 ## API
 
@@ -36,3 +37,11 @@ toc: content
 | onPositionChange | 位置变化时的回调                          | `(data: { x: number; y: number}) => void`                    |           |
 | onRectChange     | 尺寸变化时的回调                          | `(data: { width: number; height: number }) => void`          |           |
 | ...rest          | 其他继承自 antd Modal 的属性              | [ModalProps](https://4x.ant.design/components/modal-cn/#API) |           |
+
+## Modal.method
+
+新增: Modal.delete
+
+:::info
+其余和 antd4.x 的 [Modal.method](<https://4x.ant.design/components/modal-cn/#Modal.method()>) 一致
+:::
diff --git a/src/modal/index.scss b/src/modal/index.scss
index db75dff2e..1858ea414 100644
--- a/src/modal/index.scss
+++ b/src/modal/index.scss
@@ -40,4 +40,21 @@ $modal-max-height: 80vh;
             flex: 0 1 auto;
         }
     }
+    .ant-modal-confirm-body {
+        .dtstack-icon {
+            float: left;
+            margin-right: 8px;
+            font-size: 20px;
+        }
+        .ant-modal-confirm-title {
+            color: #3D446E;
+            line-height: 20px;
+            font-size: 14px;
+        }
+        .ant-modal-confirm-content {
+            margin: 8px 0 16px 30px;
+            color: #8B8FA8;
+            line-height: 20px;
+        }
+    }
 }
diff --git a/src/modal/index.tsx b/src/modal/index.tsx
index 000817bfa..c42392724 100644
--- a/src/modal/index.tsx
+++ b/src/modal/index.tsx
@@ -1,26 +1,60 @@
-import { Modal as AntdModal } from 'antd';
-import { ModalStaticFunctions } from 'antd/lib/modal/confirm';
+import React from 'react';
+import { CheckFilled, CloseFilled, InformationFilled, WarningFilled } from '@dtinsight/react-icons';
+import { Modal as AntdModal, ModalFuncProps } from 'antd';
+import { ModalFunc, ModalStaticFunctions } from 'antd/lib/modal/confirm';
 
 import InternalModal from './modal';
 
+const OK_TEXT = '确认';
+
 type ModalType = typeof InternalModal &
     ModalStaticFunctions & {
         useModal: typeof AntdModal.useModal;
         destroyAll: () => void;
         config: typeof AntdModal.config;
+        delete: (props: ModalFuncProps) => void;
     };
 
 const { useModal, info, success, error, warning, confirm, destroyAll, config } = AntdModal;
 
-const Modal = InternalModal as ModalType;
+const customProps: Record<
+    | keyof Pick<ModalStaticFunctions, 'info' | 'success' | 'error' | 'warning' | 'confirm'>
+    | 'delete',
+    ModalFuncProps
+> = {
+    info: { icon: <InformationFilled color="#1D78FF" />, okText: OK_TEXT },
+    success: { icon: <CheckFilled color="#11D7B2" />, okText: OK_TEXT },
+    error: {
+        icon: <CloseFilled color="#F96C5B" />,
+        okText: OK_TEXT,
+        okButtonProps: { danger: true },
+    },
+    warning: { icon: <WarningFilled color="#FBB310" />, okText: OK_TEXT },
+    confirm: { icon: <WarningFilled color="#FBB310" />, okText: OK_TEXT, cancelText: '取消' },
+    delete: {
+        icon: <CloseFilled color="#F96C5B" />,
+        okButtonProps: { danger: true },
+        okText: OK_TEXT,
+        cancelText: '暂不',
+    },
+};
+
+function withCustomIcon(fn: ModalFunc, type: keyof typeof customProps) {
+    return (props: ModalFuncProps) =>
+        fn({ ...customProps[type], wrapClassName: 'dtc-modal', ...props });
+}
+
+const Modal = InternalModal as unknown as ModalType;
 
 Object.assign(Modal, {
+    InternalModal,
     useModal,
-    info,
-    success,
-    error,
-    warning,
-    confirm,
+    info: withCustomIcon(info, 'info'),
+    success: withCustomIcon(success, 'success'),
+    error: withCustomIcon(error, 'error'),
+    warning: withCustomIcon(warning, 'warning'),
+    confirm: withCustomIcon(confirm, 'confirm'),
+    delete: withCustomIcon(confirm, 'delete'),
     destroyAll,
     config,
 });