From 1ec5d5213baf315a817a7685f59db717133549f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=8E=E8=BF=82=E8=BF=82?= <yangwei1@outlook.com>
Date: Thu, 7 Mar 2024 14:23:37 +0800
Subject: [PATCH 1/4] fix(modal): improve modal's size

---
 src/modal/__tests__/__snapshots__/modal.test.tsx.snap |  2 +-
 src/modal/__tests__/modal.test.tsx                    | 10 +++++++++-
 src/modal/components/modal/index.tsx                  |  5 +++--
 src/modal/demos/basic/size.tsx                        | 11 ++++++++++-
 src/modal/index.md                                    |  8 ++++----
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/modal/__tests__/__snapshots__/modal.test.tsx.snap b/src/modal/__tests__/__snapshots__/modal.test.tsx.snap
index 6a7bce918..c1df09f75 100644
--- a/src/modal/__tests__/__snapshots__/modal.test.tsx.snap
+++ b/src/modal/__tests__/__snapshots__/modal.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`Test Modal Component Should Match snapshot 1`] = `
         aria-modal="true"
         class="ant-modal dt-modal"
         role="dialog"
-        style="width: 640px;"
+        style="width: 520px;"
       >
         <div
           aria-hidden="true"
diff --git a/src/modal/__tests__/modal.test.tsx b/src/modal/__tests__/modal.test.tsx
index 97742b4b2..b7a4cebfa 100644
--- a/src/modal/__tests__/modal.test.tsx
+++ b/src/modal/__tests__/modal.test.tsx
@@ -26,7 +26,7 @@ describe('Test Modal Component', () => {
                 test
             </Modal>
         );
-        expect(modal.query(container)?.style.width).toBe('640px');
+        expect(modal.query(container)?.style.width).toBe('520px');
 
         // small size
         rerender(
@@ -36,6 +36,14 @@ describe('Test Modal Component', () => {
         );
         expect(modal.query(container)?.style.width).toBe('400px');
 
+        // middle size
+        rerender(
+            <Modal visible title="title" getContainer={false} size="middle">
+                test
+            </Modal>
+        );
+        expect(modal.query(container)?.style.width).toBe('640px');
+
         // large size
         rerender(
             <Modal visible title="title" getContainer={false} size="large">
diff --git a/src/modal/components/modal/index.tsx b/src/modal/components/modal/index.tsx
index 2e3e8fe54..eea83f833 100644
--- a/src/modal/components/modal/index.tsx
+++ b/src/modal/components/modal/index.tsx
@@ -5,14 +5,15 @@ import { omit } from 'lodash';
 import './index.scss';
 
 export interface IModalProps extends ModalProps {
-    size?: 'small' | 'default' | 'large';
+    size?: 'small' | 'default' | 'middle' | 'large';
     banner?: AlertProps['message'] | Omit<AlertProps, 'banner'>;
 }
 
 const getWidthFromSize = (size: IModalProps['size']) => {
     if (size === 'small') return 400;
+    if (size === 'middle') return 640;
     if (size === 'large') return 900;
-    return 640;
+    return 520;
 };
 
 const isValidBanner = (banner: IModalProps['banner']): banner is AlertProps['message'] => {
diff --git a/src/modal/demos/basic/size.tsx b/src/modal/demos/basic/size.tsx
index 57727e05e..8035535a7 100644
--- a/src/modal/demos/basic/size.tsx
+++ b/src/modal/demos/basic/size.tsx
@@ -26,7 +26,16 @@ export default function Size() {
                         setSize('default');
                     }}
                 >
-                    正常尺寸
+                    默认尺寸
+                </Button>
+                <Button
+                    type="primary"
+                    onClick={() => {
+                        setVisible(true);
+                        setSize('middle');
+                    }}
+                >
+                    中等尺寸
                 </Button>
                 <Button
                     type="primary"
diff --git a/src/modal/index.md b/src/modal/index.md
index 1e376142f..2002a2e73 100644
--- a/src/modal/index.md
+++ b/src/modal/index.md
@@ -21,10 +21,10 @@ toc: content
 
 [AlertProps](https://4x-ant-design.antgroup.com/components/alert-cn/#API)
 
-| 参数   | 说明 | 类型                              | 默认值    |
-| ------ | ---- | --------------------------------- | --------- |
-| size   | 尺寸 | `'small' \| 'default' \| 'large'` | `default` |
-| banner | 提示 | `React.ReactNode \| AlertProps`   |           |
+| 参数   | 说明 | 类型                                          | 默认值    |
+| ------ | ---- | --------------------------------------------- | --------- |
+| size   | 尺寸 | `'small' \| 'default' \| 'middle' \| 'large'` | `default` |
+| banner | 提示 | `React.ReactNode \| AlertProps`               |           |
 
 :::info
 其余参数继承 antd4.x 的 [Modal](https://4x.ant.design/components/modal-cn/#API)

From 77f73db2d47a320be79c3a905ed19cb2c1d39f14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=8E=E8=BF=82=E8=BF=82?= <yangwei1@outlook.com>
Date: Thu, 7 Mar 2024 16:14:04 +0800
Subject: [PATCH 2/4] fix(Modal): improve calc maxHeight for modal's body

---
 src/modal/components/modal/index.scss | 29 ++++++++++++++++++---------
 src/modal/components/modal/index.tsx  |  4 +++-
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/modal/components/modal/index.scss b/src/modal/components/modal/index.scss
index e45f80a94..6be8f163e 100644
--- a/src/modal/components/modal/index.scss
+++ b/src/modal/components/modal/index.scss
@@ -1,13 +1,24 @@
-$modal-height: 600px;
-$modal-header: 55px;
-$modal-footer: 53px;
+$modal-max-height: 600px;
 
 .dt-modal {
-    .ant-modal-body {
-        max-height: calc($modal-height - $modal-header - $modal-footer);
-        overflow-y: auto;
-    }
-    &-body {
-        padding: 16px;
+    .ant-modal-content {
+        max-height: $modal-max-height;
+        display: flex;
+        flex-direction: column;
+        .ant-modal-body {
+            overflow: hidden;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            .dt-modal-body {
+                flex: 1;
+                padding: 16px;
+                overflow-y: auto;
+            }
+        }
+        .ant-modal-header,
+        .ant-modal-footer {
+            flex: 0 1 auto;
+        }
     }
 }
diff --git a/src/modal/components/modal/index.tsx b/src/modal/components/modal/index.tsx
index eea83f833..65dd6a5a0 100644
--- a/src/modal/components/modal/index.tsx
+++ b/src/modal/components/modal/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Alert, type AlertProps, Modal, type ModalProps } from 'antd';
+import classNames from 'classnames';
 import { omit } from 'lodash';
 
 import './index.scss';
@@ -27,13 +28,14 @@ export default function InternalModal({
     size = 'default',
     children,
     width,
+    className,
     ...rest
 }: IModalProps) {
     const finalWidth = width ?? getWidthFromSize(size);
 
     return (
         <Modal
-            className="dt-modal"
+            className={classNames('dt-modal', className)}
             bodyStyle={{ padding: 0, ...bodyStyle }}
             width={finalWidth}
             {...rest}

From 8b1fa6fb85a7fc12cc60124dad5fb49f7be7e1aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=8E=E8=BF=82=E8=BF=82?= <yangwei1@outlook.com>
Date: Fri, 8 Mar 2024 10:43:19 +0800
Subject: [PATCH 3/4] fix(Modal): fix incorrect padding for Modal

---
 src/modal/components/modal/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modal/components/modal/index.scss b/src/modal/components/modal/index.scss
index 6be8f163e..388a8663d 100644
--- a/src/modal/components/modal/index.scss
+++ b/src/modal/components/modal/index.scss
@@ -12,7 +12,7 @@ $modal-max-height: 600px;
             flex-direction: column;
             .dt-modal-body {
                 flex: 1;
-                padding: 16px;
+                padding: 16px 24px;
                 overflow-y: auto;
             }
         }

From a6082b5de45fdca8ecffa21956b6e1734638633e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=8E=E8=BF=82=E8=BF=82?= <yangwei1@outlook.com>
Date: Tue, 3 Sep 2024 17:27:46 +0800
Subject: [PATCH 4/4] feat(modal): update modal's max height

---
 src/modal/components/modal/index.scss | 3 ++-
 src/modal/demos/basic/basic.tsx       | 4 ++--
 src/modal/index.md                    | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/modal/components/modal/index.scss b/src/modal/components/modal/index.scss
index 388a8663d..0df691039 100644
--- a/src/modal/components/modal/index.scss
+++ b/src/modal/components/modal/index.scss
@@ -1,4 +1,4 @@
-$modal-max-height: 600px;
+$modal-max-height: 80vh;
 
 .dt-modal {
     .ant-modal-content {
@@ -14,6 +14,7 @@ $modal-max-height: 600px;
                 flex: 1;
                 padding: 16px 24px;
                 overflow-y: auto;
+                min-height: 0;
             }
         }
         .ant-modal-header,
diff --git a/src/modal/demos/basic/basic.tsx b/src/modal/demos/basic/basic.tsx
index 826c3b1f0..32a039878 100644
--- a/src/modal/demos/basic/basic.tsx
+++ b/src/modal/demos/basic/basic.tsx
@@ -8,7 +8,7 @@ export default function Basic() {
     return (
         <>
             <Modal
-                title="最大高度限制 600px"
+                title="最大高度限制"
                 visible={visible}
                 onCancel={() => setVisible(false)}
                 onOk={() => setVisible(false)}
@@ -22,7 +22,7 @@ export default function Basic() {
                 </ul>
             </Modal>
             <Button type="primary" onClick={() => setVisible(true)}>
-                最大高度限制 600px
+                最大高度限制
             </Button>
         </>
     );
diff --git a/src/modal/index.md b/src/modal/index.md
index 2002a2e73..f626b034d 100644
--- a/src/modal/index.md
+++ b/src/modal/index.md
@@ -10,7 +10,7 @@ toc: content
 
 ## 示例
 
-<code src="./demos/basic/basic.tsx" title="高度限制 600px"></code>
+<code src="./demos/basic/basic.tsx" title="最大高度限制"></code>
 <code src="./demos/basic/size.tsx" title="尺寸"></code>
 <code src="./demos/basic/banner.tsx" title="支持 banner"></code>
 <code src="./demos/basic/bannerProps.tsx" title="支持传 banner 的 Props 属性"></code>