From 8f64f8bb66c14495badd42224316adc2327265f9 Mon Sep 17 00:00:00 2001
From: "weifang.jiagweifan" <weifang.jiagweifan@antgroup.com>
Date: Wed, 28 Aug 2024 16:04:52 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20modal=20=E6=8C=89=E9=92=AE=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=20&&=20button=E7=BB=84=E4=BB=B6=E7=9A=84=E5=9C=86?=
 =?UTF-8?q?=E8=A7=92=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 compiled/alipay/demo/pages/Modal/index.axml |  56 +++--------
 compiled/alipay/demo/pages/Modal/index.js   |  29 +++---
 compiled/alipay/src/Button/index.less       |   2 +-
 compiled/alipay/src/Modal/index.axml        | 103 ++++----------------
 compiled/alipay/src/Modal/index.less        |  63 ++++--------
 compiled/alipay/src/Modal/index.ts          |   8 ++
 compiled/alipay/src/Modal/props.ts          |  51 ++++++++--
 compiled/wechat/demo/pages/Modal/index.js   |  29 +++---
 compiled/wechat/demo/pages/Modal/index.wxml |  57 +++--------
 compiled/wechat/src/Button/index.wxss       |   2 +-
 compiled/wechat/src/Modal/index.js          |   8 ++
 compiled/wechat/src/Modal/index.wxml        |  86 ++++------------
 compiled/wechat/src/Modal/index.wxss        |  97 ++++--------------
 compiled/wechat/src/Modal/props.js          |   4 +
 demo/pages/Modal/index.axml                 |  61 ++++--------
 demo/pages/Modal/index.ts                   |  29 +++---
 mini.project.json                           |   2 +-
 src/Button/index.less                       |   2 +-
 src/Modal/index.axml                        |  93 ++++--------------
 src/Modal/index.less                        |  63 ++++--------
 src/Modal/index.ts                          |   8 ++
 src/Modal/props.ts                          |  51 ++++++++--
 22 files changed, 322 insertions(+), 582 deletions(-)

diff --git a/compiled/alipay/demo/pages/Modal/index.axml b/compiled/alipay/demo/pages/Modal/index.axml
index 5df5369d1..55a48d5a8 100644
--- a/compiled/alipay/demo/pages/Modal/index.axml
+++ b/compiled/alipay/demo/pages/Modal/index.axml
@@ -2,82 +2,60 @@
   content="人在天边月上明"
   visible="{{basicVisible}}"
   onClose="handleClose"
+  footer="{{footer1}}"
+  onButtonTap="onButtonTap"
   primaryButtonText="我知道了"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
 ></ant-modal>
 <ant-modal
   title="带标题的弹窗"
   content="人在天边月上明"
+  onButtonTap="onButtonTap"
   visible="{{withTitleVisible}}"
   onClose="handleClose"
-  primaryButtonText="我知道了"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
+  footer="{{footer1}}"
 ></ant-modal>
 <ant-modal
   title="确定删除吗？"
   content="删除后无法恢复"
   visible="{{basicTwoVisible}}"
   onClose="handleClose"
-  primaryButtonText="确定"
-  secondaryButtonText="取消"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap"
+  onButtonTap="onButtonTap"
+  footer="{{footer2}}"
 ></ant-modal>
 <ant-modal
   title="标题"
   content="人在天边月上明"
   visible="{{basicThreeVisible}}"
   onClose="handleClose"
-  primaryButtonText="主按钮"
-  secondaryButtonText="更多"
-  cancelButtonText="取消"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap"
-  onCancelButtonTap="handleCancelButtonTap"
+  onButtonTap="onButtonTap"
+  footer="{{footer3}}"
 ></ant-modal>
 <ant-modal
   title="强调模式"
   content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
   type="focus"
+  onButtonTap="onButtonTap"
   visible="{{focusOneVisible}}"
   onClose="handleClose"
-  primaryButtonText="我知道了"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
+  footer="{{footer1}}"
 ></ant-modal>
 <ant-modal
   title="强调模式"
   content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
   type="focus"
+  onButtonTap="onButtonTap"
   visible="{{focusTwoVisible}}"
   onClose="handleClose"
-  primaryButtonText="我知道了"
-  secondaryButtonText="辅助操作"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap"
+  footer="{{footer2}}"
 ></ant-modal>
 <ant-modal
   title="强调模式"
   content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
   type="focus"
+  onButtonTap="onButtonTap"
   visible="{{focusThreeVisible}}"
   onClose="handleClose"
-  primaryButtonText="我知道了"
-  secondaryButtonText="辅助操作"
-  cancelButtonText="取消"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap"
-  onCancelButtonTap="handleCancelButtonTap"
-></ant-modal>
-<ant-modal
-  title="确定删除吗？"
-  content="删除后无法恢复"
-  visible="{{customVisible}}"
-  onClose="handleClose"
-  primaryButtonText="删除"
-  primaryButtonStyle="color:red;"
-  secondaryButtonText="取消"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap"
+  footer="{{footer3}}"
 ></ant-modal>
 <ant-modal
   visible="{{customBodyVisible}}"
@@ -153,12 +131,6 @@
   title="自定义"
   className="list"
 >
-  <ant-button
-    data-field="customVisible"
-    onTap="handleOpen"
-  >
-    自定义按钮样式
-  </ant-button>
   <ant-button
     data-field="customBodyVisible"
     onTap="handleOpen"
diff --git a/compiled/alipay/demo/pages/Modal/index.js b/compiled/alipay/demo/pages/Modal/index.js
index 770dbd4f1..aeddff22b 100644
--- a/compiled/alipay/demo/pages/Modal/index.js
+++ b/compiled/alipay/demo/pages/Modal/index.js
@@ -7,8 +7,22 @@ Page({
         focusOneVisible: false,
         focusTwoVisible: false,
         focusThreeVisible: false,
-        customVisible: false,
         customBodyVisible: false,
+        footer1: {
+            buttons: [{ text: '我知道了' }],
+        },
+        footer2: {
+            buttons: [{ text: '取消', type: 'default' }, { text: '确定', type: 'primary' }],
+            layout: 'horizontal',
+        },
+        footer3: {
+            buttons: [{ text: '主按钮', type: 'primary' }, { text: '更多', type: 'default' }, { text: '取消', type: 'text' }],
+        },
+    },
+    onButtonTap(buttonItem) {
+        console.log('点击的按钮: ', buttonItem);
+        this.showToast(`点击了${buttonItem.text}`);
+        this.handleClose();
     },
     handleOpen(e) {
         const { field } = e.target.dataset;
@@ -23,22 +37,9 @@ Page({
             focusOneVisible: false,
             focusTwoVisible: false,
             focusThreeVisible: false,
-            customVisible: false,
             customBodyVisible: false,
         });
     },
-    handlePrimaryButtonTap() {
-        this.handleClose();
-        this.showToast('点击主要按钮');
-    },
-    handleSecondaryButtonTap() {
-        this.handleClose();
-        this.showToast('点击辅助按钮');
-    },
-    handleCancelButtonTap() {
-        this.handleClose();
-        this.showToast('点击取消按钮');
-    },
     showToast(content) {
         my.showToast({ content, duration: 1000 });
     },
diff --git a/compiled/alipay/src/Button/index.less b/compiled/alipay/src/Button/index.less
index f054626f1..d7fec761c 100644
--- a/compiled/alipay/src/Button/index.less
+++ b/compiled/alipay/src/Button/index.less
@@ -11,7 +11,7 @@
   height: auto;
   line-height: normal;
   padding: @button-padding;
-  border-radius: @button-corner-radius;
+  border-radius: 50vh;
   border: 0 none;
   box-sizing: border-box;
   font-size: 36 * @rpx;
diff --git a/compiled/alipay/src/Modal/index.axml b/compiled/alipay/src/Modal/index.axml
index eaeee9b8a..d53a7ebd3 100644
--- a/compiled/alipay/src/Modal/index.axml
+++ b/compiled/alipay/src/Modal/index.axml
@@ -37,92 +37,29 @@
           {{content}}
         </view>
       </slot>
+      <slot name="extra"></slot>
       <slot name="footer">
-        <view
-          a:if="{{type === 'focus'}}"
-          class="ant-modal-body-footer-focus"
-        >
-          <ant-button
-            type="primary"
-            className="ant-modal-body-footer-focus-primary"
-            style="{{primaryButtonStyle || ''}}"
-            onTap="onPrimaryButtonTap"
-          >
-            {{primaryButtonText}}
-          </ant-button>
-          <view
-            a:if="{{secondaryButtonText}}"
-            class="ant-modal-body-footer-focus-secondary"
-            style="{{secondaryButtonStyle || ''}}"
-            onTap="onSecondaryButtonTap"
-          >
-            {{secondaryButtonText}}
-          </view>
-          <view
-            a:if="{{cancelButtonText}}"
-            class="ant-modal-body-footer-focus-cancel"
-            style="{{cancelButtonStyle || ''}}"
-            onTap="onCancelButtonTap"
-          >
-            {{cancelButtonText}}
-          </view>
-        </view>
-        <view
-          a:elif="{{utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'horizontal'}}"
-          class="ant-modal-body-footer-horizontal"
-        >
-          <view
-            a:if="{{cancelButtonText}}"
-            class="ant-modal-body-footer-horizontal-cancel"
-            style="{{cancelButtonStyle || ''}}"
-            onTap="onCancelButtonTap"
-          >
-            {{cancelButtonText}}
-          </view>
-          <view
-            a:if="{{secondaryButtonText}}"
-            class="ant-modal-body-footer-horizontal-secondary"
-            style="{{secondaryButtonStyle || ''}}"
-            onTap="onSecondaryButtonTap"
-          >
-            {{secondaryButtonText}}
-          </view>
-          <view
-            a:if="{{primaryButtonText}}"
-            class="ant-modal-body-footer-horizontal-primary"
-            style="{{primaryButtonStyle || ''}}"
-            onTap="onPrimaryButtonTap"
-          >
-            {{primaryButtonText}}
-          </view>
-        </view>
-        <view
-          a:elif="{{utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'vertical'}}"
-          class="ant-modal-body-footer-vertical"
-        >
-          <view
-            a:if="{{primaryButtonText}}"
-            class="ant-modal-body-footer-vertical-primary"
-            style="{{primaryButtonStyle || ''}}"
-            onTap="onPrimaryButtonTap"
-          >
-            {{primaryButtonText}}
-          </view>
-          <view
-            a:if="{{secondaryButtonText}}"
-            class="ant-modal-body-footer-vertical-secondary"
-            style="{{secondaryButtonStyle || ''}}"
-            onTap="onSecondaryButtonTap"
-          >
-            {{secondaryButtonText}}
-          </view>
+        <view class="ant-modal-body-footer ant-modal-body-footer-{{footer.layout}}">
           <view
-            a:if="{{cancelButtonText}}"
-            class="ant-modal-body-footer-vertical-cancel"
-            style="{{cancelButtonStyle || ''}}"
-            onTap="onCancelButtonTap"
+            data-item="{{item}}"
+            onTap="onButtonTap"
+            style="flex: 1;"
+            a:for="{{footer.buttons}}"
+            a:for-index="index"
+            a:for-item="item"
           >
-            {{cancelButtonText}}
+            <ant-button
+              disabled="{{item.disabled}}"
+              danger="{{item.danger}}"
+              icon="{{item.icon}}"
+              size="{{item.size}}"
+              style="{{item.style}}"
+              activeClassName="{{item.activeClassName}}"
+              className="{{item.className}}"
+              type="{{item.type || 'primary'}}"
+            >
+              {{item.text}}
+            </ant-button>
           </view>
         </view>
       </slot>
diff --git a/compiled/alipay/src/Modal/index.less b/compiled/alipay/src/Modal/index.less
index 31faccf33..6e7677a07 100644
--- a/compiled/alipay/src/Modal/index.less
+++ b/compiled/alipay/src/Modal/index.less
@@ -7,69 +7,42 @@
   &-body {
     width: 560 * @rpx;
     background-color: @modal-background-color;
-    border-radius: @modal-radius;
-    padding-top: 40 * @rpx;
+    padding: 48 * @rpx 44 * @rpx;
     display: flex;
     flex-direction: column;
+    border-radius: 48 * @rpx;
     &-title {
-      font-size: @font-size-title;
-      line-height: 50 * @rpx;
+      line-height: 56 * @rpx;
       text-align: center;
       color: @modal-title-color;
-      margin: 0 24 * @rpx 16 * @rpx;
+      padding-bottom: 32 * @rpx;
+
+      font-weight: 500;
+      font-size: 40 * @rpx;
     }
 
     &-content {
       line-height: 42 * @rpx;
-      font-size: @modal-content-size;
+      padding-bottom: 24 * @rpx;
+      font-size: 32 * @rpx;
       color: @modal-content-color;
       text-align: center;
-      margin: 0 24 * @rpx 40 * @rpx;
     }
     &-footer {
-      &-focus {
-        padding: 0 24 * @rpx 24 * @rpx;
-        &-secondary,
-        &-cancel {
-          color: @COLOR_BRAND1;
-          text-align: center;
-          font-size: 36 * @rpx;
-          margin-top: 16 * @rpx;
-          padding-top: 24 * @rpx;
-        }
-      }
+      padding: 48 * @rpx 4 * @rpx 0 4 * @rpx;
       &-vertical {
-        padding: 0 0 24 * @rpx;
-        &-primary,
-        &-secondary,
-        &-cancel {
-          color: @COLOR_BRAND1;
-          text-align: center;
-          font-size: 36 * @rpx;
-          margin-top: 16 * @rpx;
-          padding-top: 24 * @rpx;
-          position: relative;
-          .hairline('top');
-        }
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: column;
+        gap: 24 * @rpx;
       }
       &-horizontal {
         display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 24 * @rpx;
         flex-direction: row;
-        position: relative;
-        .hairline('top');
-        &-primary,
-        &-secondary,
-        &-cancel {
-          position: relative;
-          flex: 1;
-          color: @COLOR_BRAND1;
-          text-align: center;
-          font-size: 36 * @rpx;
-          padding: 24 * @rpx 0;
-          &:nth-child(1) {
-            .hairline('right');
-          }
-        }
       }
     }
   }
diff --git a/compiled/alipay/src/Modal/index.ts b/compiled/alipay/src/Modal/index.ts
index bbb6e81f8..df7e7fccc 100644
--- a/compiled/alipay/src/Modal/index.ts
+++ b/compiled/alipay/src/Modal/index.ts
@@ -1,3 +1,4 @@
+import get from '../_util/get';
 import { Component, triggerEventOnly } from '../_util/simply';
 import { ModalFunctionalProps } from './props';
 
@@ -10,6 +11,13 @@ Component(ModalFunctionalProps, {
       triggerEventOnly(this, 'close');
     }
   },
+  onButtonTap(e) {
+    // 按钮点击没有回调的场景直接关闭弹框
+    if (!this.props.onButtonTap) {
+      return this.onClose();
+    }
+    this.props.onButtonTap(get(e, 'currentTarget.dataset.item'));
+  },  
   onPrimaryButtonTap() {
     triggerEventOnly(this, 'primaryButtonTap');
   },
diff --git a/compiled/alipay/src/Modal/props.ts b/compiled/alipay/src/Modal/props.ts
index 88f05ae16..60159d24b 100644
--- a/compiled/alipay/src/Modal/props.ts
+++ b/compiled/alipay/src/Modal/props.ts
@@ -1,8 +1,39 @@
 import { IBaseProps } from '../_util/base';
+
 /**
  * @description 对话框，当应用中需要比较明显的对用户当前的操作行为进行警示或提醒时，可以使用对话框。用户需要针对对话框进行操作后方可结束。
  */
 
+export interface Button {
+  /**
+   * @description 按钮名称
+   */
+  text: string;
+  /**
+   * @description 按钮样式
+   * @default primary
+   */
+  type: string;
+  /**
+   * @description 按钮置灰
+   * @default false
+   */
+  disabled: boolean;
+  /**
+   * @description 按钮唯一标识
+   */
+  id: string;
+}
+export interface Footer {
+  /**
+   * @description 按钮列表
+   */
+  buttons: Button[];
+  /**
+   * @description 按钮布局方式
+   */
+  layout: 'vertical' | 'horizontal';
+}
 export interface IModalProps extends IBaseProps {
   /**
    * @description Modal body类名
@@ -88,21 +119,17 @@ export interface IModalProps extends IBaseProps {
    */
   cancelButtonStyle: string;
   /**
-   * @description 触发关闭时回调
+   * @description 底部按钮列表
    */
-  onClose: () => void;
-  /**
-   * @description 主按钮点击事件
-   */
-  onPrimaryButtonTap: () => void;
+  footer: Footer;
   /**
-   * @description 次要按钮点击事件
+   * @description 触发关闭时回调
    */
-  onSecondaryButtonTap: () => void;
+  onClose: () => void;
   /**
-   * @description 取消按钮点击事件
+   * @description 按钮点击事件
    */
-  onCancelButtonTap: () => void;
+  onButtonTap?: (buttonItem) => void;
 }
 
 export const ModalDefaultProps: Partial<IModalProps> = {
@@ -136,4 +163,8 @@ export const ModalFunctionalProps: Partial<IModalProps> = {
   primaryButtonStyle: '',
   secondaryButtonStyle: '',
   cancelButtonStyle: '',
+  footer: {
+    buttons: [],
+    layout: 'vertical',
+  },
 };
diff --git a/compiled/wechat/demo/pages/Modal/index.js b/compiled/wechat/demo/pages/Modal/index.js
index bf50b43a3..6be7fcf1e 100644
--- a/compiled/wechat/demo/pages/Modal/index.js
+++ b/compiled/wechat/demo/pages/Modal/index.js
@@ -7,8 +7,22 @@ Page({
         focusOneVisible: false,
         focusTwoVisible: false,
         focusThreeVisible: false,
-        customVisible: false,
         customBodyVisible: false,
+        footer1: {
+            buttons: [{ text: '我知道了' }],
+        },
+        footer2: {
+            buttons: [{ text: '取消', type: 'default' }, { text: '确定', type: 'primary' }],
+            layout: 'horizontal',
+        },
+        footer3: {
+            buttons: [{ text: '主按钮', type: 'primary' }, { text: '更多', type: 'default' }, { text: '取消', type: 'text' }],
+        },
+    },
+    onButtonTap(buttonItem) {
+        console.log('点击的按钮: ', buttonItem);
+        this.showToast(`点击了${buttonItem.text}`);
+        this.handleClose();
     },
     handleOpen(e) {
         const { field } = e.target.dataset;
@@ -23,22 +37,9 @@ Page({
             focusOneVisible: false,
             focusTwoVisible: false,
             focusThreeVisible: false,
-            customVisible: false,
             customBodyVisible: false,
         });
     },
-    handlePrimaryButtonTap() {
-        this.handleClose();
-        this.showToast('点击主要按钮');
-    },
-    handleSecondaryButtonTap() {
-        this.handleClose();
-        this.showToast('点击辅助按钮');
-    },
-    handleCancelButtonTap() {
-        this.handleClose();
-        this.showToast('点击取消按钮');
-    },
     showToast(content) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
diff --git a/compiled/wechat/demo/pages/Modal/index.wxml b/compiled/wechat/demo/pages/Modal/index.wxml
index 7d064260b..440b6d992 100644
--- a/compiled/wechat/demo/pages/Modal/index.wxml
+++ b/compiled/wechat/demo/pages/Modal/index.wxml
@@ -2,82 +2,60 @@
   content="人在天边月上明"
   visible="{{basicVisible}}"
   bind:close="handleClose"
+  footer="{{footer1}}"
+  onButtonTap="onButtonTap"
   primaryButtonText="我知道了"
-  bind:primarybuttontap="handlePrimaryButtonTap"
 ></ant-modal>
 <ant-modal
   title="带标题的弹窗"
   content="人在天边月上明"
+  onButtonTap="onButtonTap"
   visible="{{withTitleVisible}}"
   bind:close="handleClose"
-  primaryButtonText="我知道了"
-  bind:primarybuttontap="handlePrimaryButtonTap"
+  footer="{{footer1}}"
 ></ant-modal>
 <ant-modal
   title="确定删除吗？"
   content="删除后无法恢复"
   visible="{{basicTwoVisible}}"
   bind:close="handleClose"
-  primaryButtonText="确定"
-  secondaryButtonText="取消"
-  bind:primarybuttontap="handlePrimaryButtonTap"
-  bind:secondarybuttontap="handleSecondaryButtonTap"
+  onButtonTap="onButtonTap"
+  footer="{{footer2}}"
 ></ant-modal>
 <ant-modal
   title="标题"
   content="人在天边月上明"
   visible="{{basicThreeVisible}}"
   bind:close="handleClose"
-  primaryButtonText="主按钮"
-  secondaryButtonText="更多"
-  cancelButtonText="取消"
-  bind:primarybuttontap="handlePrimaryButtonTap"
-  bind:secondarybuttontap="handleSecondaryButtonTap"
-  bind:cancelbuttontap="handleCancelButtonTap"
+  onButtonTap="onButtonTap"
+  footer="{{footer3}}"
 ></ant-modal>
 <ant-modal
   title="强调模式"
   content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
   type="focus"
+  onButtonTap="onButtonTap"
   visible="{{focusOneVisible}}"
   bind:close="handleClose"
-  primaryButtonText="我知道了"
-  bind:primarybuttontap="handlePrimaryButtonTap"
+  footer="{{footer1}}"
 ></ant-modal>
 <ant-modal
   title="强调模式"
   content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
   type="focus"
+  onButtonTap="onButtonTap"
   visible="{{focusTwoVisible}}"
   bind:close="handleClose"
-  primaryButtonText="我知道了"
-  secondaryButtonText="辅助操作"
-  bind:primarybuttontap="handlePrimaryButtonTap"
-  bind:secondarybuttontap="handleSecondaryButtonTap"
+  footer="{{footer2}}"
 ></ant-modal>
 <ant-modal
   title="强调模式"
   content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
   type="focus"
+  onButtonTap="onButtonTap"
   visible="{{focusThreeVisible}}"
   bind:close="handleClose"
-  primaryButtonText="我知道了"
-  secondaryButtonText="辅助操作"
-  cancelButtonText="取消"
-  bind:primarybuttontap="handlePrimaryButtonTap"
-  bind:secondarybuttontap="handleSecondaryButtonTap"
-  bind:cancelbuttontap="handleCancelButtonTap"
-></ant-modal>
-<ant-modal
-  title="确定删除吗？"
-  content="删除后无法恢复"
-  visible="{{customVisible}}"
-  bind:close="handleClose"
-  primaryButtonText="删除"
-  primaryButtonStyle="color:red;"
-  secondaryButtonText="取消"
-  bind:primarybuttontap="handlePrimaryButtonTap"
-  bind:secondarybuttontap="handleSecondaryButtonTap"
+  footer="{{footer3}}"
 ></ant-modal>
 <ant-container
   title="基础用法"
@@ -120,9 +98,4 @@
 <ant-container
   title="自定义"
   className="list"
->
-  <ant-button
-    data-field="customVisible"
-    bind:tap="handleOpen"
-  >自定义按钮样式</ant-button>
-</ant-container>
\ No newline at end of file
+></ant-container>
\ No newline at end of file
diff --git a/compiled/wechat/src/Button/index.wxss b/compiled/wechat/src/Button/index.wxss
index 78ccaec91..c0b378a3d 100644
--- a/compiled/wechat/src/Button/index.wxss
+++ b/compiled/wechat/src/Button/index.wxss
@@ -7,7 +7,7 @@
   height: auto;
   line-height: normal;
   padding: 12px;
-  border-radius: 4px;
+  border-radius: 50vh;
   border: 0 none;
   box-sizing: border-box;
   font-size: 18px;
diff --git a/compiled/wechat/src/Modal/index.js b/compiled/wechat/src/Modal/index.js
index f5375e087..c3cfc30fd 100644
--- a/compiled/wechat/src/Modal/index.js
+++ b/compiled/wechat/src/Modal/index.js
@@ -1,3 +1,4 @@
+import get from '../_util/get';
 import { Component, triggerEventOnly } from '../_util/simply';
 import { ModalFunctionalProps } from './props';
 Component(ModalFunctionalProps, {
@@ -9,6 +10,13 @@ Component(ModalFunctionalProps, {
             triggerEventOnly(this, 'close');
         }
     },
+    onButtonTap: function (e) {
+        // 按钮点击没有回调的场景直接关闭弹框
+        if (!this.props.onButtonTap) {
+            return this.onClose();
+        }
+        this.props.onButtonTap(get(e, 'currentTarget.dataset.item'));
+    },
     onPrimaryButtonTap: function () {
         triggerEventOnly(this, 'primaryButtonTap');
     },
diff --git a/compiled/wechat/src/Modal/index.wxml b/compiled/wechat/src/Modal/index.wxml
index 242ce40af..a2a13446b 100644
--- a/compiled/wechat/src/Modal/index.wxml
+++ b/compiled/wechat/src/Modal/index.wxml
@@ -36,74 +36,26 @@
       name="content"
       wx:else
     ></slot>
-    <view
-      wx:if="{{type === 'focus'}}"
-      class="ant-modal-body-footer-focus"
-    >
-      <ant-button
-        type="primary"
-        className="ant-modal-body-footer-focus-primary"
-        style="{{primaryButtonStyle || ''}}"
-        bind:tap="onPrimaryButtonTap"
-      >{{primaryButtonText}}</ant-button>
-      <view
-        wx:if="{{secondaryButtonText}}"
-        class="ant-modal-body-footer-focus-secondary"
-        style="{{secondaryButtonStyle || ''}}"
-        bind:tap="onSecondaryButtonTap"
-      >{{secondaryButtonText}}</view>
-      <view
-        wx:if="{{cancelButtonText}}"
-        class="ant-modal-body-footer-focus-cancel"
-        style="{{cancelButtonStyle || ''}}"
-        bind:tap="onCancelButtonTap"
-      >{{cancelButtonText}}</view>
-    </view>
-    <view
-      wx:elif="{{utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'horizontal'}}"
-      class="ant-modal-body-footer-horizontal"
-    >
-      <view
-        wx:if="{{cancelButtonText}}"
-        class="ant-modal-body-footer-horizontal-cancel"
-        style="{{cancelButtonStyle || ''}}"
-        bind:tap="onCancelButtonTap"
-      >{{cancelButtonText}}</view>
-      <view
-        wx:if="{{secondaryButtonText}}"
-        class="ant-modal-body-footer-horizontal-secondary"
-        style="{{secondaryButtonStyle || ''}}"
-        bind:tap="onSecondaryButtonTap"
-      >{{secondaryButtonText}}</view>
-      <view
-        wx:if="{{primaryButtonText}}"
-        class="ant-modal-body-footer-horizontal-primary"
-        style="{{primaryButtonStyle || ''}}"
-        bind:tap="onPrimaryButtonTap"
-      >{{primaryButtonText}}</view>
-    </view>
-    <view
-      wx:elif="{{utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'vertical'}}"
-      class="ant-modal-body-footer-vertical"
-    >
-      <view
-        wx:if="{{primaryButtonText}}"
-        class="ant-modal-body-footer-vertical-primary"
-        style="{{primaryButtonStyle || ''}}"
-        bind:tap="onPrimaryButtonTap"
-      >{{primaryButtonText}}</view>
-      <view
-        wx:if="{{secondaryButtonText}}"
-        class="ant-modal-body-footer-vertical-secondary"
-        style="{{secondaryButtonStyle || ''}}"
-        bind:tap="onSecondaryButtonTap"
-      >{{secondaryButtonText}}</view>
+    <view class="ant-modal-body-footer ant-modal-body-footer-{{footer.layout}}">
       <view
-        wx:if="{{cancelButtonText}}"
-        class="ant-modal-body-footer-vertical-cancel"
-        style="{{cancelButtonStyle || ''}}"
-        bind:tap="onCancelButtonTap"
-      >{{cancelButtonText}}</view>
+        data-item="{{item}}"
+        bind:tap="onButtonTap"
+        style="flex: 1;"
+        wx:for="{{footer.buttons}}"
+        wx:for-index="index"
+        wx:for-item="item"
+      >
+        <ant-button
+          disabled="{{item.disabled}}"
+          danger="{{item.danger}}"
+          icon="{{item.icon}}"
+          size="{{item.size}}"
+          style="{{item.style}}"
+          activeClassName="{{item.activeClassName}}"
+          className="{{item.className}}"
+          type="{{item.type || 'primary'}}"
+        >{{item.text}}</ant-button>
+      </view>
     </view>
   </view>
   <ant-icon
diff --git a/compiled/wechat/src/Modal/index.wxss b/compiled/wechat/src/Modal/index.wxss
index 06f475828..c4b313f0e 100644
--- a/compiled/wechat/src/Modal/index.wxss
+++ b/compiled/wechat/src/Modal/index.wxss
@@ -1,103 +1,42 @@
 .ant-modal-body {
   width: 280px;
   background-color: #ffffff;
-  border-radius: 8px;
-  padding-top: 20px;
+  padding: 24px 22px;
   display: flex;
   flex-direction: column;
+  border-radius: 24px;
 }
 .ant-modal-body-title {
-  font-size: 18px;
-  line-height: 25px;
+  line-height: 28px;
   text-align: center;
   color: #333333;
-  margin: 0 12px 8px;
+  padding-bottom: 16px;
+  font-weight: 500;
+  font-size: 20px;
 }
 .ant-modal-body-content {
   line-height: 21px;
-  font-size: 15px;
+  padding-bottom: 12px;
+  font-size: 16px;
   color: #333333;
   text-align: center;
-  margin: 0 12px 20px;
 }
-.ant-modal-body-footer-focus {
-  padding: 0 12px 12px;
-}
-.ant-modal-body-footer-focus-secondary,
-.ant-modal-body-footer-focus-cancel {
-  color: #1677ff;
-  text-align: center;
-  font-size: 18px;
-  margin-top: 8px;
-  padding-top: 12px;
+.ant-modal-body-footer {
+  padding: 24px 2px 0 2px;
 }
 .ant-modal-body-footer-vertical {
-  padding: 0 0 12px;
-}
-.ant-modal-body-footer-vertical-primary,
-.ant-modal-body-footer-vertical-secondary,
-.ant-modal-body-footer-vertical-cancel {
-  color: #1677ff;
-  text-align: center;
-  font-size: 18px;
-  margin-top: 8px;
-  padding-top: 12px;
-  position: relative;
-}
-.ant-modal-body-footer-vertical-primary::before,
-.ant-modal-body-footer-vertical-secondary::before,
-.ant-modal-body-footer-vertical-cancel::before {
-  content: '';
-  position: absolute;
-  background-color: #eeeeee;
-  display: block;
-  top: 0;
-  right: 0;
-  bottom: auto;
-  left: 0;
-  height: 1px;
-  transform: scaleY(0.5);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: column;
+  gap: 12px;
 }
 .ant-modal-body-footer-horizontal {
   display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 12px;
   flex-direction: row;
-  position: relative;
-}
-.ant-modal-body-footer-horizontal::before {
-  content: '';
-  position: absolute;
-  background-color: #eeeeee;
-  display: block;
-  top: 0;
-  right: 0;
-  bottom: auto;
-  left: 0;
-  height: 1px;
-  transform: scaleY(0.5);
-}
-.ant-modal-body-footer-horizontal-primary,
-.ant-modal-body-footer-horizontal-secondary,
-.ant-modal-body-footer-horizontal-cancel {
-  position: relative;
-  flex: 1;
-  color: #1677ff;
-  text-align: center;
-  font-size: 18px;
-  padding: 12px 0;
-}
-.ant-modal-body-footer-horizontal-primary:nth-child(1)::after,
-.ant-modal-body-footer-horizontal-secondary:nth-child(1)::after,
-.ant-modal-body-footer-horizontal-cancel:nth-child(1)::after {
-  content: '';
-  position: absolute;
-  background-color: #eeeeee;
-  display: block;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: auto;
-  width: 1px;
-  transform: scaleX(0.5);
 }
 .ant-modal-close {
   position: absolute;
diff --git a/compiled/wechat/src/Modal/props.js b/compiled/wechat/src/Modal/props.js
index ce5deb9c4..a51f6e1ba 100644
--- a/compiled/wechat/src/Modal/props.js
+++ b/compiled/wechat/src/Modal/props.js
@@ -28,4 +28,8 @@ export var ModalFunctionalProps = {
     primaryButtonStyle: '',
     secondaryButtonStyle: '',
     cancelButtonStyle: '',
+    footer: {
+        buttons: [],
+        layout: 'vertical',
+    },
 };
diff --git a/demo/pages/Modal/index.axml b/demo/pages/Modal/index.axml
index d42e11d88..270414aa4 100644
--- a/demo/pages/Modal/index.axml
+++ b/demo/pages/Modal/index.axml
@@ -2,75 +2,61 @@
   content="人在天边月上明"
   visible="{{ basicVisible }}"
   onClose="handleClose"
+  footer="{{ footer1 }}"
+  onButtonTap="onButtonTap"
   primaryButtonText="我知道了"
-  onPrimaryButtonTap="handlePrimaryButtonTap" />
+  />
 <ant-modal
   title="带标题的弹窗"
   content="人在天边月上明"
+  onButtonTap="onButtonTap"
   visible="{{ withTitleVisible }}"
   onClose="handleClose"
-  primaryButtonText="我知道了"
-  onPrimaryButtonTap="handlePrimaryButtonTap" />
+  footer="{{ footer1 }}"
+  />
 <ant-modal
   title="确定删除吗？"
   content="删除后无法恢复"
   visible="{{ basicTwoVisible }}"
   onClose="handleClose"
-  primaryButtonText="确定"
-  secondaryButtonText="取消"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap" />
+  onButtonTap="onButtonTap"
+  footer="{{ footer2 }}"
+  />
 <ant-modal
   title="标题"
   content="人在天边月上明"
   visible="{{ basicThreeVisible }}"
   onClose="handleClose"
-  primaryButtonText="主按钮"
-  secondaryButtonText="更多"
-  cancelButtonText="取消"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap"
-  onCancelButtonTap="handleCancelButtonTap" />
+  onButtonTap="onButtonTap"
+  footer="{{ footer3 }}"
+  />
 <ant-modal
   title="强调模式"
   content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
   type="focus"
+  onButtonTap="onButtonTap"
   visible="{{ focusOneVisible }}"
   onClose="handleClose"
-  primaryButtonText="我知道了"
-  onPrimaryButtonTap="handlePrimaryButtonTap" />
+  footer="{{ footer1 }}"
+  />
 <ant-modal
   title="强调模式"
   content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
   type="focus"
+  onButtonTap="onButtonTap"
   visible="{{ focusTwoVisible }}"
   onClose="handleClose"
-  primaryButtonText="我知道了"
-  secondaryButtonText="辅助操作"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap" />
+  footer="{{ footer2 }}"
+  />
 <ant-modal
   title="强调模式"
   content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
   type="focus"
+  onButtonTap="onButtonTap"
   visible="{{ focusThreeVisible }}"
   onClose="handleClose"
-  primaryButtonText="我知道了"
-  secondaryButtonText="辅助操作"
-  cancelButtonText="取消"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap"
-  onCancelButtonTap="handleCancelButtonTap" />
-<ant-modal
-  title="确定删除吗？"
-  content="删除后无法恢复"
-  visible="{{ customVisible }}"
-  onClose="handleClose"
-  primaryButtonText="删除"
-  primaryButtonStyle="color:red;"
-  secondaryButtonText="取消"
-  onPrimaryButtonTap="handlePrimaryButtonTap"
-  onSecondaryButtonTap="handleSecondaryButtonTap" />
+  footer="{{ footer3 }}"
+  />
 <!-- #if ALIPAY -->
 <ant-modal
   visible="{{ customBodyVisible }}"
@@ -135,11 +121,6 @@
 <ant-container
   title="自定义"
   className="list">
-  <ant-button
-    data-field="customVisible"
-    onTap="handleOpen">
-    自定义按钮样式
-  </ant-button>
   <!-- #if ALIPAY -->
   <ant-button
     data-field="customBodyVisible"
diff --git a/demo/pages/Modal/index.ts b/demo/pages/Modal/index.ts
index 7b53dfe14..b779df32b 100644
--- a/demo/pages/Modal/index.ts
+++ b/demo/pages/Modal/index.ts
@@ -7,8 +7,22 @@ Page({
     focusOneVisible: false,
     focusTwoVisible: false,
     focusThreeVisible: false,
-    customVisible: false,
     customBodyVisible: false,
+    footer1: {
+      buttons: [{ text: '我知道了' }],
+    },
+    footer2: {
+      buttons: [{ text: '取消', type: 'default' }, { text: '确定', type: 'primary' }],
+      layout: 'horizontal',
+    },
+    footer3: {
+      buttons: [{ text: '主按钮', type: 'primary' }, { text: '更多', type: 'default' }, { text: '取消', type: 'text' }],
+    },
+  },
+  onButtonTap(buttonItem) {
+    console.log('点击的按钮: ', buttonItem);
+    this.showToast(`点击了${buttonItem.text }`);
+    this.handleClose();
   },
   handleOpen(e) {
     const { field } = e.target.dataset;
@@ -23,22 +37,9 @@ Page({
       focusOneVisible: false,
       focusTwoVisible: false,
       focusThreeVisible: false,
-      customVisible: false,
       customBodyVisible: false,
     });
   },
-  handlePrimaryButtonTap() {
-    this.handleClose();
-    this.showToast('点击主要按钮');
-  },
-  handleSecondaryButtonTap() {
-    this.handleClose();
-    this.showToast('点击辅助按钮');
-  },
-  handleCancelButtonTap() {
-    this.handleClose();
-    this.showToast('点击取消按钮');
-  },
 
   showToast(content: string) {
     /// #if ALIPAY
diff --git a/mini.project.json b/mini.project.json
index 29b1d9d53..4446302aa 100644
--- a/mini.project.json
+++ b/mini.project.json
@@ -16,4 +16,4 @@
     "sourcemap": false,
     "lazyCompile": true
   }
-}
+}
\ No newline at end of file
diff --git a/src/Button/index.less b/src/Button/index.less
index 49f081fbc..1251eee16 100644
--- a/src/Button/index.less
+++ b/src/Button/index.less
@@ -11,7 +11,7 @@
   height: auto;
   line-height: normal;
   padding: @button-padding;
-  border-radius: @button-corner-radius;
+  border-radius: 50vh;
   border: 0 none;
   box-sizing: border-box;
   font-size: 36 * @rpx;
diff --git a/src/Modal/index.axml b/src/Modal/index.axml
index 94e5c5def..d0d88d1aa 100644
--- a/src/Modal/index.axml
+++ b/src/Modal/index.axml
@@ -59,83 +59,30 @@
           {{ content }}
         </view>
       </slot>
+      <slot name="extra" />
       <!-- #endif -->
       <!-- #if ALIPAY -->
       <slot name="footer">
       <!-- #endif -->
-        <view
-          a:if="{{ type === 'focus' }}"
-          class="ant-modal-body-footer-focus">
-          <ant-button
-            type="primary"
-            className="ant-modal-body-footer-focus-primary"
-            style="{{ primaryButtonStyle || '' }}"
-            onTap="onPrimaryButtonTap">
-            {{ primaryButtonText }}
-          </ant-button>
-          <view
-            a:if="{{ secondaryButtonText }}"
-            class="ant-modal-body-footer-focus-secondary"
-            style="{{ secondaryButtonStyle || '' }}"
-            onTap="onSecondaryButtonTap">
-            {{ secondaryButtonText }}
-          </view>
-          <view
-            a:if="{{ cancelButtonText }}"
-            class="ant-modal-body-footer-focus-cancel"
-            style="{{ cancelButtonStyle || '' }}"
-            onTap="onCancelButtonTap">
-            {{ cancelButtonText }}
-          </view>
-        </view>
-        <view
-          a:elif="{{ utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'horizontal' }}"
-          class="ant-modal-body-footer-horizontal">
-          <view
-            a:if="{{ cancelButtonText }}"
-            class="ant-modal-body-footer-horizontal-cancel"
-            style="{{ cancelButtonStyle || '' }}"
-            onTap="onCancelButtonTap">
-            {{ cancelButtonText }}
-          </view>
-          <view
-            a:if="{{ secondaryButtonText }}"
-            class="ant-modal-body-footer-horizontal-secondary"
-            style="{{ secondaryButtonStyle || '' }}"
-            onTap="onSecondaryButtonTap">
-            {{ secondaryButtonText }}
-          </view>
-          <view
-            a:if="{{ primaryButtonText }}"
-            class="ant-modal-body-footer-horizontal-primary"
-            style="{{ primaryButtonStyle || '' }}"
-            onTap="onPrimaryButtonTap">
-            {{ primaryButtonText }}
-          </view>
-        </view>
-        <view
-          a:elif="{{ utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'vertical' }}"
-          class="ant-modal-body-footer-vertical">
-          <view
-            a:if="{{ primaryButtonText }}"
-            class="ant-modal-body-footer-vertical-primary"
-            style="{{ primaryButtonStyle || '' }}"
-            onTap="onPrimaryButtonTap">
-            {{ primaryButtonText }}
-          </view>
-          <view
-            a:if="{{ secondaryButtonText }}"
-            class="ant-modal-body-footer-vertical-secondary"
-            style="{{ secondaryButtonStyle || '' }}"
-            onTap="onSecondaryButtonTap">
-            {{ secondaryButtonText }}
-          </view>
-          <view
-            a:if="{{ cancelButtonText }}"
-            class="ant-modal-body-footer-vertical-cancel"
-            style="{{ cancelButtonStyle || '' }}"
-            onTap="onCancelButtonTap">
-            {{ cancelButtonText }}
+        <view class="ant-modal-body-footer ant-modal-body-footer-{{ footer.layout }}">
+          <view 
+            a:for="{{ footer.buttons }}" 
+            data-item="{{ item }}"
+            onTap="onButtonTap" 
+            style="flex: 1;"
+          >
+            <ant-button
+              disabled="{{ item.disabled }}"
+              danger="{{ item.danger }}"
+              icon="{{ item.icon }}"
+              size="{{ item.size }}"
+              style="{{ item.style }}"
+              activeClassName="{{ item.activeClassName }}"
+              className="{{ item.className }}"
+              type="{{ item.type || 'primary' }}"
+            >
+              {{ item.text }}
+            </ant-button>
           </view>
         </view>
       <!-- #if ALIPAY -->
diff --git a/src/Modal/index.less b/src/Modal/index.less
index 31faccf33..6e7677a07 100644
--- a/src/Modal/index.less
+++ b/src/Modal/index.less
@@ -7,69 +7,42 @@
   &-body {
     width: 560 * @rpx;
     background-color: @modal-background-color;
-    border-radius: @modal-radius;
-    padding-top: 40 * @rpx;
+    padding: 48 * @rpx 44 * @rpx;
     display: flex;
     flex-direction: column;
+    border-radius: 48 * @rpx;
     &-title {
-      font-size: @font-size-title;
-      line-height: 50 * @rpx;
+      line-height: 56 * @rpx;
       text-align: center;
       color: @modal-title-color;
-      margin: 0 24 * @rpx 16 * @rpx;
+      padding-bottom: 32 * @rpx;
+
+      font-weight: 500;
+      font-size: 40 * @rpx;
     }
 
     &-content {
       line-height: 42 * @rpx;
-      font-size: @modal-content-size;
+      padding-bottom: 24 * @rpx;
+      font-size: 32 * @rpx;
       color: @modal-content-color;
       text-align: center;
-      margin: 0 24 * @rpx 40 * @rpx;
     }
     &-footer {
-      &-focus {
-        padding: 0 24 * @rpx 24 * @rpx;
-        &-secondary,
-        &-cancel {
-          color: @COLOR_BRAND1;
-          text-align: center;
-          font-size: 36 * @rpx;
-          margin-top: 16 * @rpx;
-          padding-top: 24 * @rpx;
-        }
-      }
+      padding: 48 * @rpx 4 * @rpx 0 4 * @rpx;
       &-vertical {
-        padding: 0 0 24 * @rpx;
-        &-primary,
-        &-secondary,
-        &-cancel {
-          color: @COLOR_BRAND1;
-          text-align: center;
-          font-size: 36 * @rpx;
-          margin-top: 16 * @rpx;
-          padding-top: 24 * @rpx;
-          position: relative;
-          .hairline('top');
-        }
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: column;
+        gap: 24 * @rpx;
       }
       &-horizontal {
         display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 24 * @rpx;
         flex-direction: row;
-        position: relative;
-        .hairline('top');
-        &-primary,
-        &-secondary,
-        &-cancel {
-          position: relative;
-          flex: 1;
-          color: @COLOR_BRAND1;
-          text-align: center;
-          font-size: 36 * @rpx;
-          padding: 24 * @rpx 0;
-          &:nth-child(1) {
-            .hairline('right');
-          }
-        }
       }
     }
   }
diff --git a/src/Modal/index.ts b/src/Modal/index.ts
index 494d85d76..a351bcfce 100644
--- a/src/Modal/index.ts
+++ b/src/Modal/index.ts
@@ -1,3 +1,4 @@
+import get from '../_util/get';
 import { Component, triggerEventOnly } from '../_util/simply';
 import { ModalFunctionalProps } from './props';
 
@@ -17,6 +18,13 @@ Component(ModalFunctionalProps, {
     }
     /// #endif
   },
+  onButtonTap(e) {
+    // 按钮点击没有回调的场景直接关闭弹框
+    if (!this.props.onButtonTap) {
+      return this.onClose();
+    }
+    this.props.onButtonTap(get(e, 'currentTarget.dataset.item'));
+  },  
   onPrimaryButtonTap() {
     triggerEventOnly(this, 'primaryButtonTap');
   },
diff --git a/src/Modal/props.ts b/src/Modal/props.ts
index 88f05ae16..60159d24b 100644
--- a/src/Modal/props.ts
+++ b/src/Modal/props.ts
@@ -1,8 +1,39 @@
 import { IBaseProps } from '../_util/base';
+
 /**
  * @description 对话框，当应用中需要比较明显的对用户当前的操作行为进行警示或提醒时，可以使用对话框。用户需要针对对话框进行操作后方可结束。
  */
 
+export interface Button {
+  /**
+   * @description 按钮名称
+   */
+  text: string;
+  /**
+   * @description 按钮样式
+   * @default primary
+   */
+  type: string;
+  /**
+   * @description 按钮置灰
+   * @default false
+   */
+  disabled: boolean;
+  /**
+   * @description 按钮唯一标识
+   */
+  id: string;
+}
+export interface Footer {
+  /**
+   * @description 按钮列表
+   */
+  buttons: Button[];
+  /**
+   * @description 按钮布局方式
+   */
+  layout: 'vertical' | 'horizontal';
+}
 export interface IModalProps extends IBaseProps {
   /**
    * @description Modal body类名
@@ -88,21 +119,17 @@ export interface IModalProps extends IBaseProps {
    */
   cancelButtonStyle: string;
   /**
-   * @description 触发关闭时回调
+   * @description 底部按钮列表
    */
-  onClose: () => void;
-  /**
-   * @description 主按钮点击事件
-   */
-  onPrimaryButtonTap: () => void;
+  footer: Footer;
   /**
-   * @description 次要按钮点击事件
+   * @description 触发关闭时回调
    */
-  onSecondaryButtonTap: () => void;
+  onClose: () => void;
   /**
-   * @description 取消按钮点击事件
+   * @description 按钮点击事件
    */
-  onCancelButtonTap: () => void;
+  onButtonTap?: (buttonItem) => void;
 }
 
 export const ModalDefaultProps: Partial<IModalProps> = {
@@ -136,4 +163,8 @@ export const ModalFunctionalProps: Partial<IModalProps> = {
   primaryButtonStyle: '',
   secondaryButtonStyle: '',
   cancelButtonStyle: '',
+  footer: {
+    buttons: [],
+    layout: 'vertical',
+  },
 };

From f04b94331cfcfee33bd408c69857de0a30b8655e Mon Sep 17 00:00:00 2001
From: "weifang.jiagweifan" <weifang.jiagweifan@antgroup.com>
Date: Thu, 29 Aug 2024 11:07:00 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E5=BC=B1=E6=B0=9B=E5=9B=B4?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 compiled/alipay/demo/pages/Modal/index.axml | 96 ++++++++++++---------
 compiled/alipay/demo/pages/Modal/index.js   | 12 ++-
 compiled/alipay/demo/pages/Modal/index.less | 57 ++++++++++++
 compiled/alipay/src/Modal/index.axml        | 15 +++-
 compiled/alipay/src/Modal/index.less        | 30 ++++---
 compiled/alipay/src/Modal/props.ts          | 10 +--
 compiled/wechat/demo/pages/Modal/index.js   | 12 ++-
 compiled/wechat/demo/pages/Modal/index.wxml | 88 ++++++++++---------
 compiled/wechat/demo/pages/Modal/index.wxss | 53 ++++++++++++
 compiled/wechat/src/Modal/index.wxml        | 13 ++-
 compiled/wechat/src/Modal/index.wxss        | 28 ++++--
 compiled/wechat/src/Modal/props.js          |  2 -
 demo/pages/Modal/index.axml                 | 88 ++++++++++---------
 demo/pages/Modal/index.less                 | 57 ++++++++++++
 demo/pages/Modal/index.ts                   | 12 ++-
 src/Modal/index.axml                        | 10 ++-
 src/Modal/index.less                        | 30 ++++---
 src/Modal/props.ts                          | 10 +--
 18 files changed, 442 insertions(+), 181 deletions(-)

diff --git a/compiled/alipay/demo/pages/Modal/index.axml b/compiled/alipay/demo/pages/Modal/index.axml
index 55a48d5a8..068a582d0 100644
--- a/compiled/alipay/demo/pages/Modal/index.axml
+++ b/compiled/alipay/demo/pages/Modal/index.axml
@@ -2,6 +2,7 @@
   content="人在天边月上明"
   visible="{{basicVisible}}"
   onClose="handleClose"
+  closable="{{false}}"
   footer="{{footer1}}"
   onButtonTap="onButtonTap"
   primaryButtonText="我知道了"
@@ -14,6 +15,16 @@
   onClose="handleClose"
   footer="{{footer1}}"
 ></ant-modal>
+<!--TODO：图片替换-->
+<ant-modal
+  title="带头图"
+  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*TNzGR7QtN0MAAAAAAAAAAAAADiWwAQ/original"
+  content="人在天边月上明"
+  onButtonTap="onButtonTap"
+  visible="{{withImageVisible}}"
+  onClose="handleClose"
+  footer="{{footer1}}"
+></ant-modal>
 <ant-modal
   title="确定删除吗？"
   content="删除后无法恢复"
@@ -31,34 +42,43 @@
   footer="{{footer3}}"
 ></ant-modal>
 <ant-modal
-  title="强调模式"
-  content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
-  type="focus"
-  onButtonTap="onButtonTap"
-  visible="{{focusOneVisible}}"
-  onClose="handleClose"
-  footer="{{footer1}}"
-></ant-modal>
-<ant-modal
-  title="强调模式"
-  content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
-  type="focus"
-  onButtonTap="onButtonTap"
-  visible="{{focusTwoVisible}}"
+  title="签到成功!获得积分奖励"
+  content="积分可用于好礼兑换"
+  visible="{{slotWeakVisible}}"
   onClose="handleClose"
-  footer="{{footer2}}"
-></ant-modal>
-<ant-modal
-  title="强调模式"
-  content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
-  type="focus"
+  className="activity-modal"
   onButtonTap="onButtonTap"
-  visible="{{focusThreeVisible}}"
-  onClose="handleClose"
-  footer="{{footer3}}"
-></ant-modal>
+>
+  <image
+    slot="header"
+    mode="widthFix"
+    class="activity-modal-header-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*HTNoQoZlIfAAAAAAAAAAAAAADiWwAQ/original"
+  ></image>
+  <image
+    slot="content-extra"
+    mode="widthFix"
+    class="activity-modal-content-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*DNXISIKmwBUAAAAAAAAAAAAADiWwAQ/original"
+  ></image>
+  <view
+    slot="footer"
+    class="activity-modal-footer"
+  >
+    <view
+      class="activity-modal-footer-button"
+      onTap="onClickActivityModalButton"
+    >
+      开心收下
+    </view>
+    <view class="activity-modal-footer-extra">
+      奖品可在我的奖品中查看
+    </view>
+  </view>
+</ant-modal>
 <ant-modal
   visible="{{customBodyVisible}}"
+  closable="{{false}}"
   onClose="handleClose"
 >
   <view class="body">
@@ -91,40 +111,34 @@
   >
     带有标题
   </ant-button>
+  <ant-button
+    data-field="withImageVisible"
+    onTap="handleOpen"
+  >
+    带头图
+  </ant-button>
   <ant-button
     data-field="basicTwoVisible"
     onTap="handleOpen"
   >
-    带辅助按钮
+    两个按钮 横排
   </ant-button>
   <ant-button
     data-field="basicThreeVisible"
     onTap="handleOpen"
   >
-    带辅助和取消按钮
+    三个按钮 竖排
   </ant-button>
 </ant-container>
 <ant-container
-  title="强调模式"
+  title="局部插槽"
   className="list"
 >
   <ant-button
-    data-field="focusOneVisible"
-    onTap="handleOpen"
-  >
-    只有主按钮
-  </ant-button>
-  <ant-button
-    data-field="focusTwoVisible"
-    onTap="handleOpen"
-  >
-    带辅助按钮
-  </ant-button>
-  <ant-button
-    data-field="focusThreeVisible"
+    data-field="slot"
     onTap="handleOpen"
   >
-    带辅助和取消按钮
+    弱活动氛围弹框
   </ant-button>
 </ant-container>
 <ant-container
diff --git a/compiled/alipay/demo/pages/Modal/index.js b/compiled/alipay/demo/pages/Modal/index.js
index aeddff22b..353d92fd0 100644
--- a/compiled/alipay/demo/pages/Modal/index.js
+++ b/compiled/alipay/demo/pages/Modal/index.js
@@ -6,8 +6,10 @@ Page({
         basicThreeVisible: false,
         focusOneVisible: false,
         focusTwoVisible: false,
-        focusThreeVisible: false,
         customBodyVisible: false,
+        withImageVisible: false,
+        slotWeakVisible: false,
+        slotStrongVisible: false,
         footer1: {
             buttons: [{ text: '我知道了' }],
         },
@@ -19,6 +21,10 @@ Page({
             buttons: [{ text: '主按钮', type: 'primary' }, { text: '更多', type: 'default' }, { text: '取消', type: 'text' }],
         },
     },
+    onClickActivityModalButton() {
+        this.showToast(`点击了活动弹框「开心收下」`);
+        this.handleClose();
+    },
     onButtonTap(buttonItem) {
         console.log('点击的按钮: ', buttonItem);
         this.showToast(`点击了${buttonItem.text}`);
@@ -36,8 +42,10 @@ Page({
             basicThreeVisible: false,
             focusOneVisible: false,
             focusTwoVisible: false,
-            focusThreeVisible: false,
             customBodyVisible: false,
+            withImageVisible: false,
+            slotWeakVisible: false,
+            slotStrongVisible: false,
         });
     },
     showToast(content) {
diff --git a/compiled/alipay/demo/pages/Modal/index.less b/compiled/alipay/demo/pages/Modal/index.less
index 933aabbd6..421145aec 100644
--- a/compiled/alipay/demo/pages/Modal/index.less
+++ b/compiled/alipay/demo/pages/Modal/index.less
@@ -13,3 +13,60 @@
 .list button {
   margin-bottom: 8px;
 }
+
+.activity-modal {
+  .ant-modal-body  {
+    background-image: linear-gradient(0deg, #FFFFFF 75%, rgba(255,255,255,0.95) 91%, rgba(255,242,218,0.93) 100%);
+    box-shadow: 0 2px 56px 0 rgba(0,0,0,0.18);
+  }
+  .ant-modal-body-title {
+    padding-bottom: 10rpx;
+  }
+  .ant-modal-body-content {
+    color: #999999;
+    padding-bottom: 0rpx;
+  }
+  &-header-image {
+    width: 250rpx;
+    height: 250rpx;
+    position: relative;
+    margin-top: -220rpx;
+    margin-left: 50%;
+    margin-bottom: 21rpx;
+    transform: translateX(-50%);
+  }
+  &-content-image {
+    width: 516rpx;
+    margin: 64rpx auto 0 auto;
+  }
+  &-footer {
+    padding-top: 64rpx;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+    &-button {
+      background: #FF4000;
+      border-radius: 55rpx;
+      font-weight: 500;
+      font-size: 36rpx;
+      line-height: 50rpx;
+      color: #FFFFFF;
+      text-align: center;
+      width: 360rpx;
+      height: 96rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    &-extra {
+      font-size: 24rpx;
+      color: #999999;
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 36rpx;
+      padding-top: 20rpx;
+    }
+  }
+}
+
diff --git a/compiled/alipay/src/Modal/index.axml b/compiled/alipay/src/Modal/index.axml
index d53a7ebd3..7ce62bf94 100644
--- a/compiled/alipay/src/Modal/index.axml
+++ b/compiled/alipay/src/Modal/index.axml
@@ -21,6 +21,12 @@
       style="{{bodyStyle || ''}}"
     >
       <slot name="header"></slot>
+      <image
+        a:if="{{headerImage}}"
+        class="ant-modal-body-header"
+        mode="widthFix"
+        src="{{headerImage}}"
+      ></image>
       <slot name="title">
         <view
           a:if="{{title}}"
@@ -37,12 +43,13 @@
           {{content}}
         </view>
       </slot>
-      <slot name="extra"></slot>
+      <slot name="content-extra"></slot>
       <slot name="footer">
-        <view class="ant-modal-body-footer ant-modal-body-footer-{{footer.layout}}">
+        <view class="ant-modal-body-footer ant-modal-body-footer-{{footer.layout || 'vertical'}}">
           <view
             data-item="{{item}}"
             onTap="onButtonTap"
+            class="ant-modal-body-footer-button"
             style="flex: 1;"
             a:for="{{footer.buttons}}"
             a:for-index="index"
@@ -66,8 +73,8 @@
     </view>
   </slot>
   <ant-icon
-    a:if="{{type === 'focus' && closable}}"
-    type="CloseOutline"
+    a:if="{{closable}}"
+    type="CloseCircleOutline"
     onTap="onClose"
     className="ant-modal-close"
   ></ant-icon>
diff --git a/compiled/alipay/src/Modal/index.less b/compiled/alipay/src/Modal/index.less
index 6e7677a07..aeab4b5f7 100644
--- a/compiled/alipay/src/Modal/index.less
+++ b/compiled/alipay/src/Modal/index.less
@@ -11,6 +11,12 @@
     display: flex;
     flex-direction: column;
     border-radius: 48 * @rpx;
+    &-header {
+      width: calc(100% + 88 * @rpx);
+      border-top-left-radius: 48 * @rpx;
+      border-top-right-radius: 48 * @rpx;
+      margin: -48 * @rpx -44 * @rpx 36 *@rpx -44 * @rpx;
+    }
     &-title {
       line-height: 56 * @rpx;
       text-align: center;
@@ -36,6 +42,9 @@
         align-items: center;
         flex-direction: column;
         gap: 24 * @rpx;
+        .ant-modal-body-footer-button {
+          width: 100%;
+        }
       }
       &-horizontal {
         display: flex;
@@ -43,21 +52,22 @@
         align-items: center;
         gap: 24 * @rpx;
         flex-direction: row;
+        .ant-modal-body-footer-button {
+          flex: 1;
+        }
       }
     }
   }
   &-close {
-    position: absolute;
-    right: 16 * @rpx;
-    top: 13 * @rpx;
+    top: 72rpx;
+    position: relative;
+    left: 50%;
+    margin-left: -30 * @rpx;;
     z-index: 3;
-    width: 52 * @rpx;
-    height: 58 * @rpx;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 36 * @rpx;
-    color: @COLOR_TEXT_ASSIST;
+    width: 60 * @rpx;
+    height: 60 * @rpx;
+    font-size: 72 * @rpx;
+    color: #999999;
   }
   .ant-popup-content.ant-popup-center {
     min-height: 0;
diff --git a/compiled/alipay/src/Modal/props.ts b/compiled/alipay/src/Modal/props.ts
index 60159d24b..68b7724db 100644
--- a/compiled/alipay/src/Modal/props.ts
+++ b/compiled/alipay/src/Modal/props.ts
@@ -56,10 +56,6 @@ export interface IModalProps extends IBaseProps {
    * @default true
    */
   maskClosable: boolean;
-  /**
-   * @description 类型
-   */
-  type: 'default' | 'focus';
   /**
    * @description 是否显示右上角的关闭按钮。只有在 type 为 focus 生效
    */
@@ -122,6 +118,10 @@ export interface IModalProps extends IBaseProps {
    * @description 底部按钮列表
    */
   footer: Footer;
+  /**
+   * @description 正常模式下 弹框头图, 氛围弹框场景下此图片不展示
+   */
+  headerImage: string;
   /**
    * @description 触发关闭时回调
    */
@@ -136,7 +136,6 @@ export const ModalDefaultProps: Partial<IModalProps> = {
   visible: false,
   maskClosable: true,
   closable: true,
-  type: 'default',
   duration: 200,
   animation: true,
   zIndex: 998,
@@ -148,7 +147,6 @@ export const ModalFunctionalProps: Partial<IModalProps> = {
   maskClassName: '',
   maskStyle: '',
   maskClosable: true,
-  type: 'default',
   closable: true,
   duration: 200,
   animation: true,
diff --git a/compiled/wechat/demo/pages/Modal/index.js b/compiled/wechat/demo/pages/Modal/index.js
index 6be7fcf1e..e0ca552ea 100644
--- a/compiled/wechat/demo/pages/Modal/index.js
+++ b/compiled/wechat/demo/pages/Modal/index.js
@@ -6,8 +6,10 @@ Page({
         basicThreeVisible: false,
         focusOneVisible: false,
         focusTwoVisible: false,
-        focusThreeVisible: false,
         customBodyVisible: false,
+        withImageVisible: false,
+        slotWeakVisible: false,
+        slotStrongVisible: false,
         footer1: {
             buttons: [{ text: '我知道了' }],
         },
@@ -19,6 +21,10 @@ Page({
             buttons: [{ text: '主按钮', type: 'primary' }, { text: '更多', type: 'default' }, { text: '取消', type: 'text' }],
         },
     },
+    onClickActivityModalButton() {
+        this.showToast(`点击了活动弹框「开心收下」`);
+        this.handleClose();
+    },
     onButtonTap(buttonItem) {
         console.log('点击的按钮: ', buttonItem);
         this.showToast(`点击了${buttonItem.text}`);
@@ -36,8 +42,10 @@ Page({
             basicThreeVisible: false,
             focusOneVisible: false,
             focusTwoVisible: false,
-            focusThreeVisible: false,
             customBodyVisible: false,
+            withImageVisible: false,
+            slotWeakVisible: false,
+            slotStrongVisible: false,
         });
     },
     showToast(content) {
diff --git a/compiled/wechat/demo/pages/Modal/index.wxml b/compiled/wechat/demo/pages/Modal/index.wxml
index 440b6d992..72f340848 100644
--- a/compiled/wechat/demo/pages/Modal/index.wxml
+++ b/compiled/wechat/demo/pages/Modal/index.wxml
@@ -2,6 +2,7 @@
   content="人在天边月上明"
   visible="{{basicVisible}}"
   bind:close="handleClose"
+  closable="{{false}}"
   footer="{{footer1}}"
   onButtonTap="onButtonTap"
   primaryButtonText="我知道了"
@@ -14,6 +15,16 @@
   bind:close="handleClose"
   footer="{{footer1}}"
 ></ant-modal>
+<!--TODO：图片替换-->
+<ant-modal
+  title="带头图"
+  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*TNzGR7QtN0MAAAAAAAAAAAAADiWwAQ/original"
+  content="人在天边月上明"
+  onButtonTap="onButtonTap"
+  visible="{{withImageVisible}}"
+  bind:close="handleClose"
+  footer="{{footer1}}"
+></ant-modal>
 <ant-modal
   title="确定删除吗？"
   content="删除后无法恢复"
@@ -31,32 +42,36 @@
   footer="{{footer3}}"
 ></ant-modal>
 <ant-modal
-  title="强调模式"
-  content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
-  type="focus"
-  onButtonTap="onButtonTap"
-  visible="{{focusOneVisible}}"
+  title="签到成功!获得积分奖励"
+  content="积分可用于好礼兑换"
+  visible="{{slotWeakVisible}}"
   bind:close="handleClose"
-  footer="{{footer1}}"
-></ant-modal>
-<ant-modal
-  title="强调模式"
-  content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
-  type="focus"
-  onButtonTap="onButtonTap"
-  visible="{{focusTwoVisible}}"
-  bind:close="handleClose"
-  footer="{{footer2}}"
-></ant-modal>
-<ant-modal
-  title="强调模式"
-  content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
-  type="focus"
+  className="activity-modal"
   onButtonTap="onButtonTap"
-  visible="{{focusThreeVisible}}"
-  bind:close="handleClose"
-  footer="{{footer3}}"
-></ant-modal>
+>
+  <image
+    slot="header"
+    mode="widthFix"
+    class="activity-modal-header-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*HTNoQoZlIfAAAAAAAAAAAAAADiWwAQ/original"
+  ></image>
+  <image
+    slot="content-extra"
+    mode="widthFix"
+    class="activity-modal-content-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*DNXISIKmwBUAAAAAAAAAAAAADiWwAQ/original"
+  ></image>
+  <view
+    slot="footer"
+    class="activity-modal-footer"
+  >
+    <view
+      class="activity-modal-footer-button"
+      bind:tap="onClickActivityModalButton"
+    >开心收下</view>
+    <view class="activity-modal-footer-extra">奖品可在我的奖品中查看</view>
+  </view>
+</ant-modal>
 <ant-container
   title="基础用法"
   className="list"
@@ -69,32 +84,23 @@
     data-field="withTitleVisible"
     bind:tap="handleOpen"
   >带有标题</ant-button>
+  <ant-button
+    data-field="withImageVisible"
+    bind:tap="handleOpen"
+  >带头图</ant-button>
   <ant-button
     data-field="basicTwoVisible"
     bind:tap="handleOpen"
-  >带辅助按钮</ant-button>
+  >两个按钮 横排</ant-button>
   <ant-button
     data-field="basicThreeVisible"
     bind:tap="handleOpen"
-  >带辅助和取消按钮</ant-button>
+  >三个按钮 竖排</ant-button>
 </ant-container>
 <ant-container
-  title="强调模式"
+  title="局部插槽"
   className="list"
->
-  <ant-button
-    data-field="focusOneVisible"
-    bind:tap="handleOpen"
-  >只有主按钮</ant-button>
-  <ant-button
-    data-field="focusTwoVisible"
-    bind:tap="handleOpen"
-  >带辅助按钮</ant-button>
-  <ant-button
-    data-field="focusThreeVisible"
-    bind:tap="handleOpen"
-  >带辅助和取消按钮</ant-button>
-</ant-container>
+></ant-container>
 <ant-container
   title="自定义"
   className="list"
diff --git a/compiled/wechat/demo/pages/Modal/index.wxss b/compiled/wechat/demo/pages/Modal/index.wxss
index 4df97caf5..0f7c0118f 100644
--- a/compiled/wechat/demo/pages/Modal/index.wxss
+++ b/compiled/wechat/demo/pages/Modal/index.wxss
@@ -12,3 +12,56 @@
 .list button {
   margin-bottom: 8px;
 }
+.activity-modal .ant-modal-body {
+  background-image: linear-gradient(0deg, #FFFFFF 75%, rgba(255, 255, 255, 0.95) 91%, rgba(255, 242, 218, 0.93) 100%);
+  box-shadow: 0 2px 56px 0 rgba(0, 0, 0, 0.18);
+}
+.activity-modal .ant-modal-body-title {
+  padding-bottom: 10rpx;
+}
+.activity-modal .ant-modal-body-content {
+  color: #999999;
+  padding-bottom: 0rpx;
+}
+.activity-modal-header-image {
+  width: 250rpx;
+  height: 250rpx;
+  position: relative;
+  margin-top: -220rpx;
+  margin-left: 50%;
+  margin-bottom: 21rpx;
+  transform: translateX(-50%);
+}
+.activity-modal-content-image {
+  width: 516rpx;
+  margin: 64rpx auto 0 auto;
+}
+.activity-modal-footer {
+  padding-top: 64rpx;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: column;
+}
+.activity-modal-footer-button {
+  background: #FF4000;
+  border-radius: 55rpx;
+  font-weight: 500;
+  font-size: 36rpx;
+  line-height: 50rpx;
+  color: #FFFFFF;
+  text-align: center;
+  width: 360rpx;
+  height: 96rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.activity-modal-footer-extra {
+  font-size: 24rpx;
+  color: #999999;
+  letter-spacing: 0;
+  text-align: center;
+  line-height: 36rpx;
+  padding-top: 20rpx;
+}
diff --git a/compiled/wechat/src/Modal/index.wxml b/compiled/wechat/src/Modal/index.wxml
index a2a13446b..db44b45a3 100644
--- a/compiled/wechat/src/Modal/index.wxml
+++ b/compiled/wechat/src/Modal/index.wxml
@@ -20,6 +20,12 @@
     style="{{bodyStyle || ''}}"
   >
     <slot name="header"></slot>
+    <image
+      wx:if="{{headerImage}}"
+      class="ant-modal-body-header"
+      mode="widthFix"
+      src="{{headerImage}}"
+    ></image>
     <view
       wx:if="{{title}}"
       class="ant-modal-body-title"
@@ -36,10 +42,11 @@
       name="content"
       wx:else
     ></slot>
-    <view class="ant-modal-body-footer ant-modal-body-footer-{{footer.layout}}">
+    <view class="ant-modal-body-footer ant-modal-body-footer-{{footer.layout || 'vertical'}}">
       <view
         data-item="{{item}}"
         bind:tap="onButtonTap"
+        class="ant-modal-body-footer-button"
         style="flex: 1;"
         wx:for="{{footer.buttons}}"
         wx:for-index="index"
@@ -59,8 +66,8 @@
     </view>
   </view>
   <ant-icon
-    wx:if="{{type === 'focus' && closable}}"
-    type="CloseOutline"
+    wx:if="{{closable}}"
+    type="CloseCircleOutline"
     bind:tap="onClose"
     className="ant-modal-close"
   ></ant-icon>
diff --git a/compiled/wechat/src/Modal/index.wxss b/compiled/wechat/src/Modal/index.wxss
index c4b313f0e..6bbae8947 100644
--- a/compiled/wechat/src/Modal/index.wxss
+++ b/compiled/wechat/src/Modal/index.wxss
@@ -6,6 +6,12 @@
   flex-direction: column;
   border-radius: 24px;
 }
+.ant-modal-body-header {
+  width: calc(100% + 88 * 0.5px);
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
+  margin: -24px -22px 18px -22px;
+}
 .ant-modal-body-title {
   line-height: 28px;
   text-align: center;
@@ -31,6 +37,9 @@
   flex-direction: column;
   gap: 12px;
 }
+.ant-modal-body-footer-vertical .ant-modal-body-footer-button {
+  width: 100%;
+}
 .ant-modal-body-footer-horizontal {
   display: flex;
   justify-content: flex-start;
@@ -38,17 +47,18 @@
   gap: 12px;
   flex-direction: row;
 }
+.ant-modal-body-footer-horizontal .ant-modal-body-footer-button {
+  flex: 1;
+}
 .ant-modal-close {
-  position: absolute;
-  right: 8px;
-  top: 6.5px;
+  top: 72rpx;
+  position: relative;
+  left: 50%;
+  margin-left: -15px;
   z-index: 3;
-  width: 26px;
-  height: 29px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 18px;
+  width: 30px;
+  height: 30px;
+  font-size: 36px;
   color: #999999;
 }
 .ant-modal .ant-popup-content.ant-popup-center {
diff --git a/compiled/wechat/src/Modal/props.js b/compiled/wechat/src/Modal/props.js
index a51f6e1ba..bf65ba0ad 100644
--- a/compiled/wechat/src/Modal/props.js
+++ b/compiled/wechat/src/Modal/props.js
@@ -2,7 +2,6 @@ export var ModalDefaultProps = {
     visible: false,
     maskClosable: true,
     closable: true,
-    type: 'default',
     duration: 200,
     animation: true,
     zIndex: 998,
@@ -13,7 +12,6 @@ export var ModalFunctionalProps = {
     maskClassName: '',
     maskStyle: '',
     maskClosable: true,
-    type: 'default',
     closable: true,
     duration: 200,
     animation: true,
diff --git a/demo/pages/Modal/index.axml b/demo/pages/Modal/index.axml
index 270414aa4..8896ec4d1 100644
--- a/demo/pages/Modal/index.axml
+++ b/demo/pages/Modal/index.axml
@@ -2,6 +2,7 @@
   content="人在天边月上明"
   visible="{{ basicVisible }}"
   onClose="handleClose"
+  closable="{{ false }}"
   footer="{{ footer1 }}"
   onButtonTap="onButtonTap"
   primaryButtonText="我知道了"
@@ -14,6 +15,16 @@
   onClose="handleClose"
   footer="{{ footer1 }}"
   />
+  <!-- TODO：图片替换 --> 
+<ant-modal
+  title="带头图"
+  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*TNzGR7QtN0MAAAAAAAAAAAAADiWwAQ/original"
+  content="人在天边月上明"
+  onButtonTap="onButtonTap"
+  visible="{{ withImageVisible }}"
+  onClose="handleClose"
+  footer="{{ footer1 }}"
+  />
 <ant-modal
   title="确定删除吗？"
   content="删除后无法恢复"
@@ -31,35 +42,36 @@
   footer="{{ footer3 }}"
   />
 <ant-modal
-  title="强调模式"
-  content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
-  type="focus"
-  onButtonTap="onButtonTap"
-  visible="{{ focusOneVisible }}"
+  title="签到成功!获得积分奖励"
+  content="积分可用于好礼兑换"
+  visible="{{ slotWeakVisible }}"
   onClose="handleClose"
-  footer="{{ footer1 }}"
-  />
-<ant-modal
-  title="强调模式"
-  content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
-  type="focus"
-  onButtonTap="onButtonTap"
-  visible="{{ focusTwoVisible }}"
-  onClose="handleClose"
-  footer="{{ footer2 }}"
-  />
-<ant-modal
-  title="强调模式"
-  content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
-  type="focus"
+  className="activity-modal"
   onButtonTap="onButtonTap"
-  visible="{{ focusThreeVisible }}"
-  onClose="handleClose"
-  footer="{{ footer3 }}"
-  />
+>
+  <image 
+    slot="header"
+    mode="widthFix" 
+    class="activity-modal-header-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*HTNoQoZlIfAAAAAAAAAAAAAADiWwAQ/original" />
+  <image 
+    slot="content-extra" 
+    mode="widthFix" 
+    class="activity-modal-content-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*DNXISIKmwBUAAAAAAAAAAAAADiWwAQ/original" />
+  <view slot="footer"  class="activity-modal-footer">
+    <view class="activity-modal-footer-button" onTap="onClickActivityModalButton">
+      开心收下
+    </view>
+    <view class="activity-modal-footer-extra">
+      奖品可在我的奖品中查看
+    </view>
+  </view>
+</ant-modal>
 <!-- #if ALIPAY -->
 <ant-modal
   visible="{{ customBodyVisible }}"
+  closable="{{ false }}"
   onClose="handleClose">
   <view class="body">
     <image
@@ -88,36 +100,34 @@
     onTap="handleOpen">
     带有标题
   </ant-button>
+  <ant-button
+    data-field="withImageVisible"
+    onTap="handleOpen">
+    带头图
+  </ant-button>
   <ant-button
     data-field="basicTwoVisible"
     onTap="handleOpen">
-    带辅助按钮
+    两个按钮 横排
   </ant-button>
   <ant-button
     data-field="basicThreeVisible"
     onTap="handleOpen">
-    带辅助和取消按钮
+    三个按钮 竖排
   </ant-button>
 </ant-container>
 <ant-container
-  title="强调模式"
+  title="局部插槽"
   className="list">
+  <!-- #if ALIPAY -->
   <ant-button
-    data-field="focusOneVisible"
-    onTap="handleOpen">
-    只有主按钮
-  </ant-button>
-  <ant-button
-    data-field="focusTwoVisible"
-    onTap="handleOpen">
-    带辅助按钮
-  </ant-button>
-  <ant-button
-    data-field="focusThreeVisible"
+    data-field="slot"
     onTap="handleOpen">
-    带辅助和取消按钮
+    弱活动氛围弹框
   </ant-button>
+  <!-- #endif -->
 </ant-container>
+
 <ant-container
   title="自定义"
   className="list">
diff --git a/demo/pages/Modal/index.less b/demo/pages/Modal/index.less
index 933aabbd6..421145aec 100644
--- a/demo/pages/Modal/index.less
+++ b/demo/pages/Modal/index.less
@@ -13,3 +13,60 @@
 .list button {
   margin-bottom: 8px;
 }
+
+.activity-modal {
+  .ant-modal-body  {
+    background-image: linear-gradient(0deg, #FFFFFF 75%, rgba(255,255,255,0.95) 91%, rgba(255,242,218,0.93) 100%);
+    box-shadow: 0 2px 56px 0 rgba(0,0,0,0.18);
+  }
+  .ant-modal-body-title {
+    padding-bottom: 10rpx;
+  }
+  .ant-modal-body-content {
+    color: #999999;
+    padding-bottom: 0rpx;
+  }
+  &-header-image {
+    width: 250rpx;
+    height: 250rpx;
+    position: relative;
+    margin-top: -220rpx;
+    margin-left: 50%;
+    margin-bottom: 21rpx;
+    transform: translateX(-50%);
+  }
+  &-content-image {
+    width: 516rpx;
+    margin: 64rpx auto 0 auto;
+  }
+  &-footer {
+    padding-top: 64rpx;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+    &-button {
+      background: #FF4000;
+      border-radius: 55rpx;
+      font-weight: 500;
+      font-size: 36rpx;
+      line-height: 50rpx;
+      color: #FFFFFF;
+      text-align: center;
+      width: 360rpx;
+      height: 96rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    &-extra {
+      font-size: 24rpx;
+      color: #999999;
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 36rpx;
+      padding-top: 20rpx;
+    }
+  }
+}
+
diff --git a/demo/pages/Modal/index.ts b/demo/pages/Modal/index.ts
index b779df32b..fbac62607 100644
--- a/demo/pages/Modal/index.ts
+++ b/demo/pages/Modal/index.ts
@@ -6,8 +6,10 @@ Page({
     basicThreeVisible: false,
     focusOneVisible: false,
     focusTwoVisible: false,
-    focusThreeVisible: false,
     customBodyVisible: false,
+    withImageVisible: false,
+    slotWeakVisible: false,
+    slotStrongVisible: false,
     footer1: {
       buttons: [{ text: '我知道了' }],
     },
@@ -19,6 +21,10 @@ Page({
       buttons: [{ text: '主按钮', type: 'primary' }, { text: '更多', type: 'default' }, { text: '取消', type: 'text' }],
     },
   },
+  onClickActivityModalButton() {
+    this.showToast(`点击了活动弹框「开心收下」`);
+    this.handleClose();
+  },
   onButtonTap(buttonItem) {
     console.log('点击的按钮: ', buttonItem);
     this.showToast(`点击了${buttonItem.text }`);
@@ -36,8 +42,10 @@ Page({
       basicThreeVisible: false,
       focusOneVisible: false,
       focusTwoVisible: false,
-      focusThreeVisible: false,
       customBodyVisible: false,
+      withImageVisible: false,
+      slotWeakVisible: false,
+      slotStrongVisible: false,
     });
   },
 
diff --git a/src/Modal/index.axml b/src/Modal/index.axml
index d0d88d1aa..cb2ecfb60 100644
--- a/src/Modal/index.axml
+++ b/src/Modal/index.axml
@@ -21,6 +21,7 @@
       class="ant-modal-body {{ bodyClassName || '' }}"
       style="{{ bodyStyle || '' }}">
       <slot name="header" />
+      <image a:if="{{ headerImage }}" class="ant-modal-body-header" mode="widthFix" src="{{ headerImage }}" />
       <!-- #if WECHAT -->
       <view
         wx:if="{{ title }}"
@@ -59,16 +60,17 @@
           {{ content }}
         </view>
       </slot>
-      <slot name="extra" />
+      <slot name="content-extra" />
       <!-- #endif -->
       <!-- #if ALIPAY -->
       <slot name="footer">
       <!-- #endif -->
-        <view class="ant-modal-body-footer ant-modal-body-footer-{{ footer.layout }}">
+        <view class="ant-modal-body-footer ant-modal-body-footer-{{ footer.layout || 'vertical' }}">
           <view 
             a:for="{{ footer.buttons }}" 
             data-item="{{ item }}"
             onTap="onButtonTap" 
+            class="ant-modal-body-footer-button"
             style="flex: 1;"
           >
             <ant-button
@@ -94,8 +96,8 @@
   <!-- #endif -->
 
   <ant-icon
-    a:if="{{ type === 'focus' && closable }}"
-    type="CloseOutline"
+    a:if="{{ closable }}"
+    type="CloseCircleOutline"
     onTap="onClose"
     className="ant-modal-close" />
 </ant-popup>
diff --git a/src/Modal/index.less b/src/Modal/index.less
index 6e7677a07..aeab4b5f7 100644
--- a/src/Modal/index.less
+++ b/src/Modal/index.less
@@ -11,6 +11,12 @@
     display: flex;
     flex-direction: column;
     border-radius: 48 * @rpx;
+    &-header {
+      width: calc(100% + 88 * @rpx);
+      border-top-left-radius: 48 * @rpx;
+      border-top-right-radius: 48 * @rpx;
+      margin: -48 * @rpx -44 * @rpx 36 *@rpx -44 * @rpx;
+    }
     &-title {
       line-height: 56 * @rpx;
       text-align: center;
@@ -36,6 +42,9 @@
         align-items: center;
         flex-direction: column;
         gap: 24 * @rpx;
+        .ant-modal-body-footer-button {
+          width: 100%;
+        }
       }
       &-horizontal {
         display: flex;
@@ -43,21 +52,22 @@
         align-items: center;
         gap: 24 * @rpx;
         flex-direction: row;
+        .ant-modal-body-footer-button {
+          flex: 1;
+        }
       }
     }
   }
   &-close {
-    position: absolute;
-    right: 16 * @rpx;
-    top: 13 * @rpx;
+    top: 72rpx;
+    position: relative;
+    left: 50%;
+    margin-left: -30 * @rpx;;
     z-index: 3;
-    width: 52 * @rpx;
-    height: 58 * @rpx;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 36 * @rpx;
-    color: @COLOR_TEXT_ASSIST;
+    width: 60 * @rpx;
+    height: 60 * @rpx;
+    font-size: 72 * @rpx;
+    color: #999999;
   }
   .ant-popup-content.ant-popup-center {
     min-height: 0;
diff --git a/src/Modal/props.ts b/src/Modal/props.ts
index 60159d24b..68b7724db 100644
--- a/src/Modal/props.ts
+++ b/src/Modal/props.ts
@@ -56,10 +56,6 @@ export interface IModalProps extends IBaseProps {
    * @default true
    */
   maskClosable: boolean;
-  /**
-   * @description 类型
-   */
-  type: 'default' | 'focus';
   /**
    * @description 是否显示右上角的关闭按钮。只有在 type 为 focus 生效
    */
@@ -122,6 +118,10 @@ export interface IModalProps extends IBaseProps {
    * @description 底部按钮列表
    */
   footer: Footer;
+  /**
+   * @description 正常模式下 弹框头图, 氛围弹框场景下此图片不展示
+   */
+  headerImage: string;
   /**
    * @description 触发关闭时回调
    */
@@ -136,7 +136,6 @@ export const ModalDefaultProps: Partial<IModalProps> = {
   visible: false,
   maskClosable: true,
   closable: true,
-  type: 'default',
   duration: 200,
   animation: true,
   zIndex: 998,
@@ -148,7 +147,6 @@ export const ModalFunctionalProps: Partial<IModalProps> = {
   maskClassName: '',
   maskStyle: '',
   maskClosable: true,
-  type: 'default',
   closable: true,
   duration: 200,
   animation: true,

From 05ee446a8c3c151dbd39a32873b298ba732933ca Mon Sep 17 00:00:00 2001
From: "weifang.jiagweifan" <weifang.jiagweifan@antgroup.com>
Date: Thu, 29 Aug 2024 11:43:50 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E5=BC=BA=E6=B0=9B=E5=9B=B4?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 compiled/alipay/demo/pages/Modal/index.axml | 46 +++++++++++++++++++--
 compiled/alipay/demo/pages/Modal/index.less | 22 ++++++++++
 compiled/alipay/src/Modal/index.axml        |  1 +
 compiled/wechat/demo/pages/Modal/index.wxml | 34 ++++++++++++++-
 compiled/wechat/demo/pages/Modal/index.wxss | 19 +++++++++
 compiled/wechat/src/Modal/index.wxml        |  1 +
 demo/pages/Modal/index.axml                 | 40 ++++++++++++++++--
 demo/pages/Modal/index.less                 | 22 ++++++++++
 src/Modal/index.axml                        |  1 +
 9 files changed, 177 insertions(+), 9 deletions(-)

diff --git a/compiled/alipay/demo/pages/Modal/index.axml b/compiled/alipay/demo/pages/Modal/index.axml
index 068a582d0..6cf65bee1 100644
--- a/compiled/alipay/demo/pages/Modal/index.axml
+++ b/compiled/alipay/demo/pages/Modal/index.axml
@@ -15,10 +15,9 @@
   onClose="handleClose"
   footer="{{footer1}}"
 ></ant-modal>
-<!--TODO：图片替换-->
 <ant-modal
   title="带头图"
-  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*TNzGR7QtN0MAAAAAAAAAAAAADiWwAQ/original"
+  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Q5ekTJUJW8IAAAAAAAAAAAAADiWwAQ/original"
   content="人在天边月上明"
   onButtonTap="onButtonTap"
   visible="{{withImageVisible}}"
@@ -76,6 +75,41 @@
     </view>
   </view>
 </ant-modal>
+<ant-modal
+  title="恭喜获得出行红包"
+  content="出行打车小程序专用"
+  visible="{{slotStrongVisible}}"
+  onClose="handleClose"
+  className="activity-modal activity-modal-strong"
+  onButtonTap="onButtonTap"
+>
+  <image
+    slot="modal-top"
+    mode="widthFix"
+    class="activity-modal-strong-header-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Sp52SL4mObQAAAAAAAAAAAAADiWwAQ/original"
+  ></image>
+  <image
+    slot="content-extra"
+    mode="widthFix"
+    class="activity-modal-content-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Oju8Q4diuA0AAAAAAAAAAAAADiWwAQ/original"
+  ></image>
+  <view
+    slot="footer"
+    class="activity-modal-footer"
+  >
+    <view
+      class="activity-modal-footer-button"
+      onTap="onClickActivityModalButton"
+    >
+      去使用
+    </view>
+    <view class="activity-modal-footer-extra">
+      奖品可在我的奖品中查看
+    </view>
+  </view>
+</ant-modal>
 <ant-modal
   visible="{{customBodyVisible}}"
   closable="{{false}}"
@@ -135,11 +169,17 @@
   className="list"
 >
   <ant-button
-    data-field="slot"
+    data-field="slotWeakVisible"
     onTap="handleOpen"
   >
     弱活动氛围弹框
   </ant-button>
+  <ant-button
+    data-field="slotStrongVisible"
+    onTap="handleOpen"
+  >
+    强活动氛围弹框
+  </ant-button>
 </ant-container>
 <ant-container
   title="自定义"
diff --git a/compiled/alipay/demo/pages/Modal/index.less b/compiled/alipay/demo/pages/Modal/index.less
index 421145aec..40e410d79 100644
--- a/compiled/alipay/demo/pages/Modal/index.less
+++ b/compiled/alipay/demo/pages/Modal/index.less
@@ -70,3 +70,25 @@
   }
 }
 
+.activity-modal-strong {
+  &-header-image {
+    width: 100%;
+    position: absolute;
+    top: -160rpx;
+    left: 0;
+    z-index: -1;
+  }
+  .activity-modal-footer {
+    padding-top: 75rpx;
+  }
+  .activity-modal-content-image {
+    width: 528rpx;
+    margin-top: 60rpx;
+  }
+  .ant-modal-body  {
+    background-image: linear-gradient(180deg, rgba(255,255,255,0.57) 0%, rgba(255,255,255,0.91) 8%, #FFFFFF 17%);
+    box-shadow: 0;
+    padding-top: 30rpx;
+  }
+}
+
diff --git a/compiled/alipay/src/Modal/index.axml b/compiled/alipay/src/Modal/index.axml
index 7ce62bf94..3d5a4fd47 100644
--- a/compiled/alipay/src/Modal/index.axml
+++ b/compiled/alipay/src/Modal/index.axml
@@ -15,6 +15,7 @@
   destroyOnClose="{{destroyOnClose}}"
   onClose="onMaskClose"
 >
+  <slot name="modal-top"></slot>
   <slot>
     <view
       class="ant-modal-body {{bodyClassName || ''}}"
diff --git a/compiled/wechat/demo/pages/Modal/index.wxml b/compiled/wechat/demo/pages/Modal/index.wxml
index 72f340848..54dbd402f 100644
--- a/compiled/wechat/demo/pages/Modal/index.wxml
+++ b/compiled/wechat/demo/pages/Modal/index.wxml
@@ -15,10 +15,9 @@
   bind:close="handleClose"
   footer="{{footer1}}"
 ></ant-modal>
-<!--TODO：图片替换-->
 <ant-modal
   title="带头图"
-  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*TNzGR7QtN0MAAAAAAAAAAAAADiWwAQ/original"
+  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Q5ekTJUJW8IAAAAAAAAAAAAADiWwAQ/original"
   content="人在天边月上明"
   onButtonTap="onButtonTap"
   visible="{{withImageVisible}}"
@@ -72,6 +71,37 @@
     <view class="activity-modal-footer-extra">奖品可在我的奖品中查看</view>
   </view>
 </ant-modal>
+<ant-modal
+  title="恭喜获得出行红包"
+  content="出行打车小程序专用"
+  visible="{{slotStrongVisible}}"
+  bind:close="handleClose"
+  className="activity-modal activity-modal-strong"
+  onButtonTap="onButtonTap"
+>
+  <image
+    slot="modal-top"
+    mode="widthFix"
+    class="activity-modal-strong-header-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Sp52SL4mObQAAAAAAAAAAAAADiWwAQ/original"
+  ></image>
+  <image
+    slot="content-extra"
+    mode="widthFix"
+    class="activity-modal-content-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Oju8Q4diuA0AAAAAAAAAAAAADiWwAQ/original"
+  ></image>
+  <view
+    slot="footer"
+    class="activity-modal-footer"
+  >
+    <view
+      class="activity-modal-footer-button"
+      bind:tap="onClickActivityModalButton"
+    >去使用</view>
+    <view class="activity-modal-footer-extra">奖品可在我的奖品中查看</view>
+  </view>
+</ant-modal>
 <ant-container
   title="基础用法"
   className="list"
diff --git a/compiled/wechat/demo/pages/Modal/index.wxss b/compiled/wechat/demo/pages/Modal/index.wxss
index 0f7c0118f..f56710640 100644
--- a/compiled/wechat/demo/pages/Modal/index.wxss
+++ b/compiled/wechat/demo/pages/Modal/index.wxss
@@ -65,3 +65,22 @@
   line-height: 36rpx;
   padding-top: 20rpx;
 }
+.activity-modal-strong-header-image {
+  width: 100%;
+  position: absolute;
+  top: -160rpx;
+  left: 0;
+  z-index: -1;
+}
+.activity-modal-strong .activity-modal-footer {
+  padding-top: 75rpx;
+}
+.activity-modal-strong .activity-modal-content-image {
+  width: 528rpx;
+  margin-top: 60rpx;
+}
+.activity-modal-strong .ant-modal-body {
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.57) 0%, rgba(255, 255, 255, 0.91) 8%, #FFFFFF 17%);
+  box-shadow: 0;
+  padding-top: 30rpx;
+}
diff --git a/compiled/wechat/src/Modal/index.wxml b/compiled/wechat/src/Modal/index.wxml
index db44b45a3..e5eab879d 100644
--- a/compiled/wechat/src/Modal/index.wxml
+++ b/compiled/wechat/src/Modal/index.wxml
@@ -15,6 +15,7 @@
   destroyOnClose="{{destroyOnClose}}"
   bind:close="onMaskClose"
 >
+  <slot name="modal-top"></slot>
   <view
     class="ant-modal-body {{bodyClassName || ''}}"
     style="{{bodyStyle || ''}}"
diff --git a/demo/pages/Modal/index.axml b/demo/pages/Modal/index.axml
index 8896ec4d1..28f356e9e 100644
--- a/demo/pages/Modal/index.axml
+++ b/demo/pages/Modal/index.axml
@@ -15,10 +15,9 @@
   onClose="handleClose"
   footer="{{ footer1 }}"
   />
-  <!-- TODO：图片替换 --> 
 <ant-modal
   title="带头图"
-  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*TNzGR7QtN0MAAAAAAAAAAAAADiWwAQ/original"
+  headerImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Q5ekTJUJW8IAAAAAAAAAAAAADiWwAQ/original"
   content="人在天边月上明"
   onButtonTap="onButtonTap"
   visible="{{ withImageVisible }}"
@@ -59,7 +58,7 @@
     mode="widthFix" 
     class="activity-modal-content-image"
     src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*DNXISIKmwBUAAAAAAAAAAAAADiWwAQ/original" />
-  <view slot="footer"  class="activity-modal-footer">
+  <view slot="footer" class="activity-modal-footer">
     <view class="activity-modal-footer-button" onTap="onClickActivityModalButton">
       开心收下
     </view>
@@ -68,6 +67,34 @@
     </view>
   </view>
 </ant-modal>
+
+<ant-modal
+  title="恭喜获得出行红包"
+  content="出行打车小程序专用"
+  visible="{{ slotStrongVisible }}"
+  onClose="handleClose"
+  className="activity-modal activity-modal-strong"
+  onButtonTap="onButtonTap"
+>
+  <image 
+    slot="modal-top"
+    mode="widthFix" 
+    class="activity-modal-strong-header-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Sp52SL4mObQAAAAAAAAAAAAADiWwAQ/original" />
+  <image 
+    slot="content-extra" 
+    mode="widthFix" 
+    class="activity-modal-content-image"
+    src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Oju8Q4diuA0AAAAAAAAAAAAADiWwAQ/original" />
+  <view slot="footer" class="activity-modal-footer">
+    <view class="activity-modal-footer-button" onTap="onClickActivityModalButton">
+      去使用
+    </view>
+    <view class="activity-modal-footer-extra">
+      奖品可在我的奖品中查看
+    </view>
+  </view>
+</ant-modal>
 <!-- #if ALIPAY -->
 <ant-modal
   visible="{{ customBodyVisible }}"
@@ -121,10 +148,15 @@
   className="list">
   <!-- #if ALIPAY -->
   <ant-button
-    data-field="slot"
+    data-field="slotWeakVisible"
     onTap="handleOpen">
     弱活动氛围弹框
   </ant-button>
+  <ant-button
+    data-field="slotStrongVisible"
+    onTap="handleOpen">
+    强活动氛围弹框
+  </ant-button>
   <!-- #endif -->
 </ant-container>
 
diff --git a/demo/pages/Modal/index.less b/demo/pages/Modal/index.less
index 421145aec..40e410d79 100644
--- a/demo/pages/Modal/index.less
+++ b/demo/pages/Modal/index.less
@@ -70,3 +70,25 @@
   }
 }
 
+.activity-modal-strong {
+  &-header-image {
+    width: 100%;
+    position: absolute;
+    top: -160rpx;
+    left: 0;
+    z-index: -1;
+  }
+  .activity-modal-footer {
+    padding-top: 75rpx;
+  }
+  .activity-modal-content-image {
+    width: 528rpx;
+    margin-top: 60rpx;
+  }
+  .ant-modal-body  {
+    background-image: linear-gradient(180deg, rgba(255,255,255,0.57) 0%, rgba(255,255,255,0.91) 8%, #FFFFFF 17%);
+    box-shadow: 0;
+    padding-top: 30rpx;
+  }
+}
+
diff --git a/src/Modal/index.axml b/src/Modal/index.axml
index cb2ecfb60..0fb4382a3 100644
--- a/src/Modal/index.axml
+++ b/src/Modal/index.axml
@@ -14,6 +14,7 @@
   zIndex="{{ zIndex }}"
   destroyOnClose="{{ destroyOnClose }}"
   onClose="onMaskClose">
+  <slot name="modal-top" />
   <!-- #if ALIPAY -->
   <slot>
   <!-- #endif -->