amis 1.5.7 → 1.6.1

package/src/components/calendar/YearsView.tsx

@@ -4,7 +4,7 @@ import moment from 'moment';
 import React from 'react';
 import {LocaleProps, localeable} from '../../locale';
 import Picker from '../Picker';
-import {convertDateToObject, getRange, isMobile} from "../../utils/helper";
+import {getRange, isMobile} from '../../utils/helper';
 
 export class CustomYearsView extends YearsView {
   props: {
@@ -28,6 +28,8 @@ export class CustomYearsView extends YearsView {
     onConfirm?: (value: number[], types: string[]) => void;
     useMobileUI: boolean;
   } & LocaleProps;
+  state: {pickerValue: number[]};
+  setState: (arg0: any) => () => any;
   renderYears: (year: number) => JSX.Element;
   renderYear = (props: any, year: number) => {
     return (
@@ -37,29 +39,49 @@ export class CustomYearsView extends YearsView {
     );
   };
 
+  constructor(props: any) {
+    super(props);
+
+    const {selectedDate, viewDate} =  props;
+    const currentDate = (selectedDate || viewDate || moment());
+
+    this.state = {
+      pickerValue: currentDate.toObject().years
+    }
+  }
+
   onConfirm = (value: number[]) => {
-    this.props.onConfirm && this.props.onConfirm(value, ["year"])
+    this.props.onConfirm && this.props.onConfirm(value, ['year']);
+  };
+
+  onPickerChange = (value: number[]) => {
+    this.setState({pickerValue: value[0]});
   }
 
   renderYearPicker = () => {
-    const {minDate, maxDate, selectedDate, viewDate} =  this.props;
+    const {translate: __, minDate, maxDate, selectedDate, viewDate} = this.props;
     const year = (selectedDate || viewDate || moment()).year();
-    const maxYear = maxDate ? convertDateToObject(maxDate)!.year : year + 100;
-    const minYear = minDate ? convertDateToObject(minDate)!.year : year - 100;
-    
-    const columns = [{
-      options: getRange(minYear, maxYear, 1)
-    }];
+    const maxYear = maxDate ? maxDate.toObject().years : year + 100;
+    const minYear = minDate ? minDate.toObject().years : year - 100;
+    const title = __('Date.titleYear');
+
+    const columns = [
+      {
+        options: getRange(minYear, maxYear, 1)
+      }
+    ];
 
     return (
       <Picker
         translate={this.props.translate}
         locale={this.props.locale}
+        title={title}
         columns={columns}
-        value={[year]} 
+        value={this.state.pickerValue}
         onConfirm={this.onConfirm}
+        onChange={this.onPickerChange}
         onClose={this.props.onClose}
-        />
+      />
     );
   };
 
@@ -67,13 +89,8 @@ export class CustomYearsView extends YearsView {
     let year = this.props.viewDate.year();
     year = year - (year % 10);
     const __ = this.props.translate;
-    
     if (isMobile() && this.props.useMobileUI) {
-      return (
-        <div className="rdtYears">
-          {this.renderYearPicker()}
-        </div>
-      );
+      return <div className="rdtYears">{this.renderYearPicker()}</div>;
     }
     return (
       <div className="rdtYears">

package/src/components/condition-builder/Field.tsx

@@ -114,9 +114,7 @@ export class ConditionField extends React.Component<
               ref={ref}
               allowInput={false}
               result={
-                value
-                  ? findTree(options, item => item.name === value)?.label
-                  : ''
+                value ? findTree(options, item => item.name === value) : ''
               }
               onResultChange={noop}
               onResultClick={onClick}

package/src/components/condition-builder/Func.tsx

@@ -97,7 +97,7 @@ export class ConditionFunc extends React.Component<ConditionFuncProps> {
                 )}
                 ref={ref}
                 allowInput={false}
-                result={func?.label}
+                result={func}
                 onResultChange={noop}
                 onResultClick={onClick}
                 placeholder="请选择字段"

package/src/components/formula/Editor.tsx

@@ -45,6 +45,9 @@ export interface FormulaEditorProps extends ThemeProps, LocaleProps {
    */
   variables: Array<VariableItem>;
 
+  /**
+   * 变量展现模式，可选值：'tabs' ｜ 'tree'
+   */
   variableMode?: 'tabs' | 'tree';
 
   /**
@@ -216,17 +219,19 @@ export class FormulaEditor extends React.Component<
           'is-focused': focused
         })}
       >
-        <div className={cx(`FormulaEditor-header`)}>{header ?? '表达式'}</div>
-
-        <CodeMirrorEditor
-          className={cx('FormulaEditor-editor')}
-          value={value}
-          onChange={this.handleOnChange}
-          editorFactory={this.editorFactory}
-          editorDidMount={this.handleEditorMounted}
-          onFocus={this.handleFocus}
-          onBlur={this.handleBlur}
-        ></CodeMirrorEditor>
+        <div className={cx(`FormulaEditor-content`)}>
+          <div className={cx(`FormulaEditor-header`)}>{header ?? '表达式'}</div>
+
+          <CodeMirrorEditor
+            className={cx('FormulaEditor-editor')}
+            value={value}
+            onChange={this.handleOnChange}
+            editorFactory={this.editorFactory}
+            editorDidMount={this.handleEditorMounted}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+          ></CodeMirrorEditor>
+        </div>
 
         <div className={cx('FormulaEditor-settings')}>
           {Array.isArray(functions) && functions.length ? (

package/src/components/formula/FuncList.tsx

@@ -69,7 +69,9 @@ export function FuncList(props: FuncListProps) {
         <div className={cx('FormulaFuncList-column')}>
           {activeFunc ? (
             <div className={cx('FormulaFuncList-funcDetail')}>
-              <p>{activeFunc.example}</p>
+              <pre>
+                <code>{activeFunc.example}</code>
+              </pre>
               <div>{activeFunc.description}</div>
             </div>
           ) : null}

package/src/components/formula/Picker.tsx

@@ -1,7 +1,7 @@
 import {uncontrollable} from 'uncontrollable';
 import React from 'react';
 import {FormulaEditor, FormulaEditorProps} from './Editor';
-import {autobind} from '../../utils/helper';
+import {autobind, noop} from '../../utils/helper';
 import PickerContainer from '../PickerContainer';
 import Editor from './Editor';
 import ResultBox from '../ResultBox';
@@ -63,6 +63,7 @@ export class FormulaPicker extends React.Component<FormulaPickerProps> {
               rest.variables,
               rest.functions
             )}
+            onResultChange={noop}
             onResultClick={onClick}
             disabled={disabled}
             borderMode={borderMode}

package/src/components/formula/plugin.ts

@@ -13,8 +13,6 @@ export function editorFactory(
 ) {
   registerLaunguageMode(cm);
 
-  console.log('here', props.evalMode);
-
   return cm(dom, {
     value: props.value || '',
     autofocus: true,

package/src/components/icons.tsx

@@ -43,6 +43,7 @@ import ExchangeIcon from '../icons/exchange.svg';
 import ColmunsIcon from '../icons/columns.svg';
 import CalendarIcon from '../icons/calendar.svg';
 import ClockIcon from '../icons/clock.svg';
+import TreeDownIcon from '../icons/tree-down.svg';
 
 import CopyIcon from '../icons/copy.svg';
 import FilterIcon from '../icons/filter.svg';
@@ -176,6 +177,7 @@ registerIcon('alert-success', AlertSuccess);
 registerIcon('alert-info', AlertInfo);
 registerIcon('alert-warning', AlertWarning);
 registerIcon('alert-danger', AlertDanger);
+registerIcon('tree-down', TreeDownIcon);
 
 export function Icon({
   icon,

package/src/components/index.tsx

@@ -8,6 +8,7 @@ import NotFound from './404';
 import {default as Alert, alert, confirm, prompt} from './Alert';
 import {default as ContextMenu, openContextMenus} from './ContextMenu';
 import AsideNav from './AsideNav';
+import Avatar from './Avatar';
 import Button from './Button';
 import Checkbox from './Checkbox';
 import Checkboxes from './Selection';
@@ -60,6 +61,7 @@ export {
   NotFound,
   Alert as AlertComponent,
   alert,
+  Avatar,
   confirm,
   prompt,
   ContextMenu,

package/src/components/virtual-list/SizeAndPositionManager.ts

@@ -72,7 +72,8 @@ export default class SizeAndPositionManager {
     }
 
     if (index > this.lastMeasuredIndex) {
-      const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+      const lastMeasuredSizeAndPosition =
+        this.getSizeAndPositionOfLastMeasuredItem();
       let offset =
         lastMeasuredSizeAndPosition.offset + lastMeasuredSizeAndPosition.size;
 
@@ -109,7 +110,8 @@ export default class SizeAndPositionManager {
    * As items as measured the estimate will be updated.
    */
   getTotalSize(): number {
-    const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+    const lastMeasuredSizeAndPosition =
+      this.getSizeAndPositionOfLastMeasuredItem();
 
     return (
       lastMeasuredSizeAndPosition.offset +
@@ -232,7 +234,8 @@ export default class SizeAndPositionManager {
     // So make sure the offset is at least 0 or no match will be found.
     offset = Math.max(0, offset);
 
-    const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+    const lastMeasuredSizeAndPosition =
+      this.getSizeAndPositionOfLastMeasuredItem();
     const lastMeasuredIndex = Math.max(0, this.lastMeasuredIndex);
 
     if (lastMeasuredSizeAndPosition.offset >= offset) {

package/src/components/virtual-list/index.tsx

@@ -181,8 +181,8 @@ export default class VirtualList extends React.PureComponent<Props, State> {
     const itemsDom = this.rootNode.children[0].children;
     const scrollbarWidth =
       window.innerWidth - document.documentElement.clientWidth || 15;
-    const containerWidth = this.rootNode.parentElement!.getBoundingClientRect()
-      .width;
+    const containerWidth =
+      this.rootNode.parentElement!.getBoundingClientRect().width;
     let maxItemWidth = 0;
     for (let i = 0; i < itemsDom.length; i++) {
       let itemWidth = itemsDom[i].getBoundingClientRect().width;
@@ -427,10 +427,8 @@ export default class VirtualList extends React.PureComponent<Props, State> {
     }
 
     const {scrollDirection = DIRECTION.VERTICAL} = this.props;
-    const {
-      size,
-      offset
-    } = this.sizeAndPositionManager.getSizeAndPositionForIndex(index);
+    const {size, offset} =
+      this.sizeAndPositionManager.getSizeAndPositionForIndex(index);
 
     return (this.styleCache[index] = sticky
       ? {

package/src/env.tsx

@@ -6,6 +6,11 @@ import {RendererConfig} from './factory';
 import {ThemeInstance} from './theme';
 import {Action, Api, Payload, Schema} from './types';
 import hoistNonReactStatic from 'hoist-non-react-statics';
+import {
+  RendererEvent,
+  RendererEventListener,
+  EventListeners
+} from './utils/renderer-event';
 
 export interface RendererEnv {
   fetcher: (api: Api, data?: any, options?: object) => Promise<Payload>;
@@ -54,6 +59,23 @@ export interface RendererEnv {
   ) => Promise<React.ReactType> | React.ReactType | JSX.Element | void;
   loadChartExtends?: () => void | Promise<void>;
   useMobileUI?: boolean;
+  bindEvent: (context: any) => (() => void) | undefined;
+  dispatchEvent: (
+    e:
+      | string
+      | React.ClipboardEvent<any>
+      | React.DragEvent<any>
+      | React.ChangeEvent<any>
+      | React.KeyboardEvent<any>
+      | React.TouchEvent<any>
+      | React.WheelEvent<any>
+      | React.AnimationEvent<any>
+      | React.TransitionEvent<any>
+      | React.MouseEvent<any>,
+    context: any,
+    data: any
+  ) => Promise<RendererEvent<any> | undefined>;
+  rendererEventListeners: RendererEventListener[];
   [propName: string]: any;
 }
 

package/src/factory.tsx

@@ -4,6 +4,7 @@ import {getEnv, destroy} from 'mobx-state-tree';
 import {wrapFetcher} from './utils/api';
 import {normalizeLink} from './utils/normalizeLink';
 import {
+  createObject,
   findIndex,
   isObject,
   JSONTraverse,
@@ -33,6 +34,14 @@ import ScopedRootRenderer, {RootRenderProps} from './Root';
 import {HocStoreFactory} from './WithStore';
 import {EnvContext, RendererEnv} from './env';
 import {envOverwrite} from './envOverwrite';
+import {
+  EventListeners,
+  createRendererEvent,
+  RendererEventListener,
+  OnEventProps,
+  RendererEvent
+} from './utils/renderer-event';
+import {runActions} from './actions/Action';
 
 export interface TestFunc {
   (
@@ -63,7 +72,7 @@ export interface RendererBasicConfig {
   // [propName:string]:any;
 }
 
-export interface RendererProps extends ThemeProps, LocaleProps {
+export interface RendererProps extends ThemeProps, LocaleProps, OnEventProps {
   render: (region: string, node: SchemaNode, props?: any) => JSX.Element;
   env: RendererEnv;
   $path: string; // 当前组件所在的层级信息
@@ -257,7 +266,9 @@ const defaultOptions: RenderOptions = {
   affixOffsetTop: 0,
   affixOffsetBottom: 0,
   richTextToken: '',
+  useMobileUI: true, // 是否启用移动端原生 UI
   loadRenderer,
+  rendererEventListeners: [],
   fetcher() {
     return Promise.reject('fetcher is required');
   },
@@ -347,6 +358,82 @@ const defaultOptions: RenderOptions = {
   },
   // 用于跟踪用户在界面中的各种操作
   tracker(eventTrack: EventTrack, props: PlainObject) {},
+  // 返回解绑函数
+  bindEvent(renderer: any) {
+    const listeners: EventListeners = renderer.props.$schema.onEvent;
+    if (listeners) {
+      // 暂存
+      for (let key of Object.keys(listeners)) {
+        this.rendererEventListeners.push({
+          renderer,
+          type: key,
+          weight: listeners[key].weight || 0,
+          actions: listeners[key].actions
+        });
+      }
+
+      return () => {
+        this.rendererEventListeners = this.rendererEventListeners.filter(
+          (item: RendererEventListener) => item.renderer === renderer
+        );
+      };
+    }
+
+    return undefined;
+  },
+  async dispatchEvent(
+    e: string | React.MouseEvent<any>,
+    renderer: React.Component<RendererProps>,
+    data: any,
+    broadcast: RendererEvent<any>
+  ) {
+    const eventName = typeof e === 'string' ? e : e.type;
+    if (!broadcast) {
+      const eventConfig = renderer?.props?.onEvent?.[eventName];
+
+      if (!eventConfig) {
+        // 没命中也没关系
+        return Promise.resolve(undefined);
+      }
+    }
+
+    // 没有可处理的监听
+    if (!this.rendererEventListeners.length) {
+      return Promise.resolve();
+    }
+
+    // 如果是广播动作，就直接复用
+    const rendererEvent =
+      broadcast ||
+      createRendererEvent(eventName, {
+        env: this,
+        nativeEvent: e,
+        data
+      });
+
+    // 过滤&排序
+    const listeners = this.rendererEventListeners
+      .filter(
+        (item: RendererEventListener) =>
+          item.type === eventName &&
+          (broadcast ? true : item.renderer === renderer)
+      )
+      .sort(
+        (prev: RendererEventListener, next: RendererEventListener) =>
+          next.weight - prev.weight
+      );
+
+    for (let listener of listeners) {
+      await runActions(listener.actions, listener.renderer, rendererEvent);
+
+      // 停止后续监听器执行
+      if (rendererEvent.stoped) {
+        break;
+      }
+    }
+
+    return rendererEvent;
+  },
   rendererResolver: resolveRenderer,
   replaceTextIgnoreKeys: [
     'type',
@@ -410,6 +497,11 @@ export function render(
     env.locale = locale;
   }
 
+  // 默认将开启移动端原生 UI
+  if (typeof options.useMobileUI) {
+    props.useMobileUI = true;
+  }
+
   // 进行文本替换
   if (env.replaceText && isObject(env.replaceText)) {
     const replaceKeys = Object.keys(env.replaceText);

package/src/icons/tree-down.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024" width="30"
+    fill="currentColor">
+    <path d="M512 704L256 384h512z"></path>
+</svg>

package/src/index.tsx

@@ -41,6 +41,8 @@ import {
 
 import './locale/zh-CN';
 
+import './utils/debug';
+
 import animation from './utils/Animation';
 
 export * from './Schema';
@@ -165,6 +167,7 @@ import './renderers/Icon';
 import './renderers/Carousel';
 import './renderers/AnchorNav';
 import './renderers/Steps';
+import './renderers/Timeline';
 import './renderers/Markdown';
 import './renderers/TableView';
 import './renderers/Code';
@@ -211,6 +214,8 @@ import {
 } from './theme';
 const classPrefix = getClassPrefix();
 
+import './actions';
+
 export * from './components/index';
 
 export {

package/src/locale/de-DE.ts

@@ -6,6 +6,15 @@ register('de-DE', {
   'asc': 'Aufsteigend',
   'App.home': 'Startseite',
   'App.navigation': 'Navigation',
+  'Calendar.datepicker': 'Auswahl des Datums',
+  'Calendar.yearmonth': 'YYYY MM',
+  'Calendar.year': 'YYYY',
+  'Calendar.begin': 'beginnt',
+  'Calendar.end': 'ende',
+  'Calendar.beginAndEnd': 'b/e',
+  'Calendar.toast': 'Außerhalb des Datumsbereichs',
+  'Calendar.startPick': 'Wählen Sie Startzeit',
+  'Calendar.endPick': 'Wählen Sie Endzeit',
   'cancel': 'Abbrechen',
   'Card.dragTip': 'Obere Schaltfläche zum Sortieren ziehen',
   'Card.toggleDrag': 'Zum Sortieren umschalten',
@@ -34,6 +43,10 @@ register('de-DE', {
   'CRUD.paginationGoText': 'Wechseln zu',
   'CRUD.paginationPageText': 'Seite',
   'PaginationWrapper.placeholder': 'Textkörper konfigurieren',
+  'Date.titleYear': '',
+  'Date.titleMonth': '',
+  'Date.titleDate': '',
+  'Date.titleTime': '',
   'Date.daysago': 'Vor {{days}} Tag(en)',
   'Date.dayslater': '{{days}} Tag(e) später',
   'Date.endOfMonth': 'Letzter Tag des Monats',
@@ -215,7 +228,7 @@ register('de-DE', {
   'validate.minimum': 'Der Eingabewert ist kleiner als der Mindestwert von $1.',
   'validate.minLength': 'Geben Sie weitere Zeichen ein, mindestens $1.',
   'validate.notEmptyString': 'Geben Sie nicht nur Leerzeichen ein.',
-  'validateFailed': 'Fehler bei der Überprüfung,',
+  'validateFailed': 'Fehler bei der Überprüfung',
   'Wizard.configError': 'Konfigurationsfehler',
   'Wizard.finish': 'Ende',
   'Wizard.next': 'Weiter',
@@ -254,5 +267,7 @@ register('de-DE', {
   'Condition.cond_placeholder': 'Bedingung auswählen',
   'Condition.field_placeholder': 'Feld auswählen',
   'Condition.blank': 'leer',
-  'InputTable.uniqueError': 'Column `{{label}}` unique validate failed'
+  'InputTable.uniqueError': 'Column `{{label}}` unique validate failed',
+  'Timeline.collapseText': 'Entfalten',
+  'Timeline.expandText': 'Falten'
 });

package/src/locale/en-US.ts

@@ -6,6 +6,15 @@ register('en-US', {
   'App.home': 'Home',
   'App.navigation': 'Navigation',
   'asc': 'Asc',
+  'Calendar.datepicker': 'Date Picker',
+  'Calendar.yearmonth': 'YYYY MM',
+  'Calendar.year': 'YYYY',
+  'Calendar.begin': 'begin',
+  'Calendar.end': 'end',
+  'Calendar.beginAndEnd': 'b/e',
+  'Calendar.toast': 'Out of date range',
+  'Calendar.startPick': 'Select start time',
+  'Calendar.endPick': 'Select end time',
   'cancel': 'Cancel',
   'Card.dragTip': 'Drag top button to sort',
   'Card.toggleDrag': 'Toggle drag to sort',
@@ -34,6 +43,10 @@ register('en-US', {
   'CRUD.paginationGoText': 'Go to',
   'CRUD.paginationPageText': 'page',
   'PaginationWrapper.placeholder': 'please config body',
+  'Date.titleYear': 'select year',
+  'Date.titleMonth': 'select month and year',
+  'Date.titleDate': 'select month, year and day',
+  'Date.titleTime': 'select time',
   'Date.daysago': '{{days}} day(s) ago',
   'Date.dayslater': '{{days}} day(s) later',
   'Date.endOfMonth': 'last day of the month',
@@ -217,7 +230,7 @@ register('en-US', {
   'validate.minimum': 'The input value is lower than the minimum value of $1',
   'validate.minLength': 'Please enter more, at least $1 characters.',
   'validate.notEmptyString': 'Please do not enter all blank characters',
-  'validateFailed': 'Validate failed,',
+  'validateFailed': 'Validate failed',
   'Wizard.configError': 'Config error',
   'Wizard.finish': 'Finish',
   'Wizard.next': 'Next',
@@ -256,5 +269,7 @@ register('en-US', {
   'Condition.cond_placeholder': 'select condition',
   'Condition.field_placeholder': 'select field',
   'Condition.blank': 'blank',
-  'InputTable.uniqueError': 'Column `{{label}}` unique validate failed'
+  'InputTable.uniqueError': 'Column `{{label}}` unique validate failed',
+  'Timeline.collapseText': 'Unfold',
+  'Timeline.expandText': 'Fold'
 });

package/src/locale/zh-CN.ts

@@ -6,6 +6,15 @@ register('zh-CN', {
   'App.home': '首页',
   'App.navigation': '导航',
   'asc': '正序',
+  'Calendar.datepicker': '日期选择',
+  'Calendar.yearmonth': 'YYYY年MM月',
+  'Calendar.year': 'YYYY年',
+  'Calendar.begin': '开始',
+  'Calendar.end': '结束',
+  'Calendar.beginAndEnd': '始/终',
+  'Calendar.toast': '超出日期范围',
+  'Calendar.startPick': '选择开始时间',
+  'Calendar.endPick': '选择结束时间',
   'cancel': '取消',
   'Card.dragTip': '请拖动顶部的按钮进行排序',
   'Card.toggleDrag': '对卡片进行排序操作',
@@ -34,6 +43,10 @@ register('zh-CN', {
   'CRUD.paginationGoText': '前往',
   'CRUD.paginationPageText': '页',
   'PaginationWrapper.placeholder': '请配置内容',
+  'Date.titleYear': '选择年',
+  'Date.titleMonth': '选择年月',
+  'Date.titleDate': '选择年月日',
+  'Date.titleTime': '选择时间',
   'Date.daysago': '{{days}}天前',
   'Date.dayslater': '{{days}}天后',
   'Date.endOfMonth': '本月最后一天',
@@ -260,5 +273,7 @@ register('zh-CN', {
   'Condition.cond_placeholder': '请选择操作',
   'Condition.field_placeholder': '请选择字段',
   'Condition.blank': '空',
-  'InputTable.uniqueError': '列`{{label}}`没有通过唯一验证'
+  'InputTable.uniqueError': '列`{{label}}`没有通过唯一验证',
+  'Timeline.collapseText': '展开',
+  'Timeline.expandText': '折叠'
 });

package/src/renderers/Action.tsx

@@ -405,6 +405,7 @@ import {generateIcon} from '../utils/icon';
 import {BadgeSchema, withBadge} from '../components/Badge';
 import {normalizeApi, str2AsyncFunction} from '../utils/api';
 import {TooltipWrapper} from '../components/TooltipWrapper';
+import handleAction from '../utils/handleAction';
 
 // 构造一个假的 React 事件避免可能的报错，主要用于快捷键功能
 // 来自 https://stackoverflow.com/questions/27062455/reactjs-can-i-create-my-own-syntheticevent
@@ -828,8 +829,16 @@ export class ActionRenderer extends React.Component<
     }
 > {
   @autobind
-  handleAction(e: React.MouseEvent<any> | void | null, action: any) {
-    const {env, onAction, data, ignoreConfirm} = this.props;
+  async handleAction(e: React.MouseEvent<any> | void | null, action: any) {
+    const {env, onAction, data, ignoreConfirm, dispatchEvent} = this.props;
+
+    // 触发渲染器事件
+    const rendererEvent = await dispatchEvent(e as React.MouseEvent<any>, data);
+
+    // 阻止原有动作执行
+    if (rendererEvent?.prevented) {
+      return;
+    }
 
     if (!ignoreConfirm && action.confirmText && env.confirm) {
       env