feat:iframe接入事件动作 (#5754)

* feat:iframe接入事件动作

* feat:[#5462]alert action支持title设置

docs/zh-CN/components/iframe.md

@@ -90,29 +90,16 @@ window.addEventListener('message', e => {
 
 #### iframe 页面向 amis 通信
 
-1. 首先在 amis 的 iframe 配置项中配置 events 对象，指明 iframe 需要触发的 amis 行为
+可以通过以下两种方式实现 iframe 页面向 amis 通信：
 
-```json
-{
-  "type": "iframe",
-  "src": "http://www.xxx.com",
-  "events": {
-    "detail": {
-      "actionType": "dialog",
-      "dialog": {
-        "title": "弹框",
-        "body": "iframe 传给 amis 的 id 是：${iframeId}"
-      }
-    }
-  }
-}
-```
+- 方式一：通过 events 属性，基于[Action](./action)实现，有一定的局限性。
+- 方式二：通过 onEvent 属性，基于[事件动作](../../docs/concepts/event-action)实现，更灵活。
 
-上面 `events` 对象中配置了`detail`事件，该行为会触发 amis 弹框行为，并在弹框中渲染`"iframe 传给 amis 的 id 是：${iframeId}"`这段模板。`detail`支持多种动作配置，具体配置参考[Action](./action.md)的 actionType 部分。
+> 注意：如果同时配置了 events 和 onEvent，amis 都会执行，且 onEvent 配置的动作行为会先于 events 执行。
 
-那么要如何触发该事件和传递数据呢？
+步骤如下：
 
-2. iframe 页面中，获取父级 window，并使用`postMessage`传递数据，格式如下，：
+1. 在 iframe 页面中定义消息名称和需要传递的数据。获取父级 window，并使用`postMessage`传递数据，格式如下，：
 
 ```js
 window.parent.postMessage(
@@ -131,7 +118,52 @@ window.parent.postMessage(
 - `type`: 标识要触发的 amis 行为，请使用 `amis:xxx` 的格式，这里我们设置为配置好的`detail`事件
 - `data`: 传给 amis 的数据，amis 会将该数据与当前数据域进行合并进行使用
 
-这样 amis 弹框中就会渲染内容:`iframe 传给 amis 的 id 是：111`
+2. 在 amis 的 iframe 组件中指明需要监听的消息名称，以及需要执行的动作。
+
+```json
+// 方式一：即在 amis 的 iframe 配置项中配置 events 对象
+{
+  "type": "iframe",
+  "src": "http://www.xxx.com",
+  "events": {
+    "detail": {
+      "actionType": "dialog", // 弹窗动作
+      "dialog": {
+        "title": "弹框",
+        "body": "iframe 传给 amis 的 id 是：${iframeId}" // 在弹框中渲染`"iframe 传给 amis 的 id 是：${iframeId}"`这段模板，即111
+      }
+    }
+  }
+}
+
+// 方式二：即在 amis 的 iframe 配置项中配置 onEvent 对象
+{
+  "type": "iframe",
+  "src": "http://www.xxx.com",
+  "onEvent": {
+    "detail": {
+      "actions": [
+        // 动作 1，弹窗动作
+        {
+          "actionType": "dialog",
+          "dialog": {
+            "title": "弹框",
+            "body": "iframe 传给 amis 的 id 是：${iframeId}" // 在弹框中渲染`"iframe 传给 amis 的 id 是：${iframeId}"`这段模板，即111
+          }
+        },
+        // 动作 2，触发指定组件的特性动作
+        {
+          "actionType": "crud",
+          "componentId": "form01",
+          "data": {
+            "iframeId": "${iframeId}" // 刷新请求参数为`"iframe 传给 amis 的 id 是：${iframeId}"`这段模板，即111
+          }
+        }
+      ]
+    }
+  }
+}
+```
 
 ## 设置高度自适应
 

docs/zh-CN/concepts/event-action.md

@@ -590,6 +590,7 @@ run action ajax
             {
               actionType: 'alert',
               args: {
+                title: '提示',
                 msg: '<a href="http://www.baidu.com" target="_blank">${msg}~</a>'
               }
             }
@@ -605,9 +606,10 @@ run action ajax
 
 > `< 1.8.0 及以下版本`，以下属性与 args 同级。
 
-| 属性名 | 类型     | 默认值 | 说明           |
-| ------ | -------- | ------ | -------------- |
-| msg    | `string` | -      | 对话框提示内容 |
+| 属性名 | 类型     | 默认值   | 说明           |
+| ------ | -------- | -------- | -------------- |
+| title  | `string` | 系统提示 | 对话框标题     |
+| msg    | `string` | -        | 对话框提示内容 |
 
 #### 确认对话框
 

packages/amis-core/src/actions/DialogAction.ts

@@ -100,7 +100,7 @@ export class AlertAction implements RendererAction {
     renderer: ListenerContext,
     event: RendererEvent<any>
   ) {
-    event.context.env.alert?.(action.args?.msg);
+    event.context.env.alert?.(action.args?.msg, action.args?.title);
   }
 }
 

packages/amis-core/src/env.tsx

@@ -34,7 +34,7 @@ export interface RendererEnv {
   ) => void;
   notify: (type: ToastLevel, msg: any, conf?: ToastConf) => void;
   jumpTo: (to: string, action?: ActionObject, ctx?: object) => void;
-  alert: (msg: string) => void;
+  alert: (msg: string, title?: string) => void;
   confirm: (msg: string, title?: string) => Promise<boolean>;
   updateLocation: (location: any, replace?: boolean) => void;
 

packages/amis/src/renderers/IFrame.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import {Renderer, RendererProps} from 'amis-core';
+import {
+  createRendererEvent,
+  OnEventProps,
+  Renderer,
+  RendererProps,
+  runActions
+} from 'amis-core';
 import {filter} from 'amis-core';
 import {autobind, createObject} from 'amis-core';
 import {ScopedContext, IScopedContext} from 'amis-core';
@@ -27,6 +33,9 @@ export interface IFrameSchema extends BaseSchema {
     [eventName: string]: ActionSchema;
   };
 
+  // 事件动作
+  onEvent?: OnEventProps['onEvent'];
+
   width?: number | string;
   height?: number | string;
 
@@ -112,10 +121,10 @@ export default class IFrame extends React.Component<IFrameProps, object> {
   }
 
   @autobind
-  onMessage(e: MessageEvent) {
-    const {events, onAction, data} = this.props;
+  async onMessage(e: MessageEvent) {
+    const {events, onEvent, onAction, data} = this.props;
 
-    if (typeof e?.data?.type !== 'string' || !events) {
+    if (typeof e?.data?.type !== 'string') {
       return;
     }
 
@@ -131,8 +140,26 @@ export default class IFrame extends React.Component<IFrameProps, object> {
         height: e.data.data.height || '100%'
       });
     } else {
-      const action = events[type];
-      action && onAction(e, action, createObject(data, e.data.data));
+      const eventConfig: any = onEvent?.[type];
+
+      if (eventConfig && eventConfig.actions?.length) {
+        const rendererEvent = createRendererEvent(type, {
+          env: this.props?.env,
+          nativeEvent: e,
+          data: createObject(data, e.data.data),
+          scoped: this.context
+        });
+        await runActions(eventConfig.actions, this, rendererEvent);
+
+        if (rendererEvent.prevented) {
+          return;
+        }
+      }
+
+      if (events) {
+        const action = events[type];
+        action && onAction(e, action, createObject(data, e.data.data));
+      }
     }
   }