feat: 事件动作支持上报埋点 (#9205)

* feat: 事件动作支持上报埋点

* bugfix

* bugfix

---------

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>

packages/amis-core/src/types.ts

@@ -1,7 +1,7 @@
 // https://json-schema.org/draft-07/json-schema-release-notes.html
 import type {JSONSchema7} from 'json-schema';
 import {ListenerAction} from './actions/Action';
-import {debounceConfig} from './utils/renderer-event';
+import {debounceConfig, trackConfig} from './utils/renderer-event';
 
 export interface Option {
   /**
@@ -452,7 +452,8 @@ export interface EventTrack {
     | 'tabChange'
     | 'pageLoaded'
     | 'pageHidden'
-    | 'pageVisible';
+    | 'pageVisible'
+    | string;
 
   /**
    * 事件数据
@@ -612,6 +613,7 @@ export interface BaseSchemaWithoutType {
       weight?: number; // 权重
       actions: ListenerAction[]; // 执行的动作集
       debounce?: debounceConfig;
+      track?: trackConfig;
     };
   };
   /**

packages/amis-core/src/utils/renderer-event.ts

@@ -10,10 +10,16 @@ export interface debounceConfig {
   leading?: boolean;
   trailing?: boolean;
 }
+
+export interface trackConfig {
+  id: string;
+  name: string;
+}
 // 事件监听器
 export interface EventListeners {
   [propName: string]: {
     debounce?: debounceConfig;
+    track?: trackConfig;
     weight?: number; // 权重
     actions: ListenerAction[]; // 执行的动作集
   };
@@ -26,6 +32,7 @@ export interface OnEventProps {
       weight?: number; // 权重
       actions: ListenerAction[]; // 执行的动作集,
       debounce?: debounceConfig;
+      track?: trackConfig;
     };
   };
 }
@@ -36,6 +43,7 @@ export interface RendererEventListener {
   type: string;
   weight: number;
   debounce: debounceConfig | null;
+  track: trackConfig | null;
   actions: ListenerAction[];
   executing?: boolean;
   debounceInstance?: any;
@@ -118,6 +126,7 @@ export const bindEvent = (renderer: any) => {
             renderer,
             type: key,
             debounce: listener.debounce || null,
+            track: listeners[key].track || null,
             weight: listener.weight || 0,
             actions: listener.actions
           });
@@ -127,6 +136,7 @@ export const bindEvent = (renderer: any) => {
           renderer,
           type: key,
           debounce: listeners[key].debounce || null,
+          track: listeners[key].track || null,
           weight: listeners[key].weight || 0,
           actions: listeners[key].actions
         });
@@ -245,6 +255,17 @@ export async function dispatchEvent(
       checkExecuted();
     }
 
+    if (listener?.track) {
+      const {id: trackId, name: trackName} = listener.track;
+      renderer?.props?.env?.tracker({
+        eventType: listener.type,
+        eventData: {
+          trackId,
+          trackName
+        }
+      });
+    }
+
     // 停止后续监听器执行
     if (rendererEvent.stoped) {
       break;

packages/amis-editor/src/renderer/event-control/index.tsx

@@ -71,6 +71,11 @@ interface EventDialogData {
     open: boolean;
     wait?: number;
   };
+  trackConfig?: {
+    open: boolean;
+    id: string;
+    name: string;
+  };
   [propName: string]: any;
 }
 
@@ -219,6 +224,16 @@ export class EventControl extends React.Component<
         ...eventInfo.debounce
       };
     }
+    if (!eventInfo.track) {
+      eventInfo.track = {
+        open: false
+      };
+    } else {
+      eventInfo.track = {
+        open: true,
+        ...eventInfo.track
+      };
+    }
     this.setState({
       eventDialogData: eventInfo,
       showEventDialog: true
@@ -227,11 +242,11 @@ export class EventControl extends React.Component<
 
   eventDialogSubmit(formData: any) {
     const {onChange} = this.props;
-    const {eventName, debounce = {}} = formData;
+    const {eventName, debounce = {}, track = {}} = formData;
     let onEvent = {
       ...this.state.onEvent
     };
-    let eventConfig = onEvent[`${eventName}`];
+    let eventConfig = {...onEvent[`${eventName}`]};
     if (!debounce.open) {
       delete eventConfig.debounce;
     } else {
@@ -242,6 +257,18 @@ export class EventControl extends React.Component<
         }
       };
     }
+    if (!track.open) {
+      delete eventConfig.track;
+    } else {
+      eventConfig = {
+        ...eventConfig,
+        track: {
+          id: track.id,
+          name: track.name
+        }
+      };
+    }
+
     onEvent[`${eventName}`] = {
       ...eventConfig
     };
@@ -1141,6 +1168,27 @@ export class EventControl extends React.Component<
                         max: 10000,
                         min: 0,
                         type: 'input-number'
+                      },
+                      {
+                        label: '事件埋点',
+                        type: 'switch',
+                        name: 'track.open',
+                        description:
+                          '开启事件埋点后，每次事件触发都会发送埋点数据到后台'
+                      },
+                      {
+                        label: 'track-id',
+                        required: true,
+                        hiddenOn: '!track.open',
+                        name: 'track.id',
+                        type: 'input-text'
+                      },
+                      {
+                        label: 'track-name',
+                        required: true,
+                        hiddenOn: '!track.open',
+                        name: 'track.name',
+                        type: 'input-text'
                       }
                     ],
                     onSubmit: this.eventDialogSubmit.bind(this)

packages/amis-editor/src/renderer/event-control/types.ts

@@ -13,6 +13,10 @@ export interface ActionEventConfig {
     debounce?: {
       wait: number;
     };
+    track?: {
+      id: string;
+      name: string;
+    };
   };
 }