From 18c9d9e040d86a269ae3ad7ee515dc9eec9ba627 Mon Sep 17 00:00:00 2001 From: yupeng12 Date: Tue, 19 Nov 2024 14:17:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=A8=E5=B1=80=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E5=8A=A8=E4=BD=9C=E4=BA=8B=E4=BB=B6=E9=85=8D=E7=BD=AE=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../scss/control/_event-action.scss | 3 + .../amis-editor-core/src/component/Editor.tsx | 8 +- packages/amis-editor-core/src/plugin.ts | 9 + packages/amis-editor/examples/Editor.tsx | 30 +- .../src/renderer/event-control/helper.tsx | 3 + .../src/renderer/event-control/index.tsx | 59 +- packages/amis-formula/src/doc.ts | 2076 ++++++++--------- 7 files changed, 1117 insertions(+), 1071 deletions(-) diff --git a/packages/amis-editor-core/scss/control/_event-action.scss b/packages/amis-editor-core/scss/control/_event-action.scss index b0686f43b..521a0a960 100644 --- a/packages/amis-editor-core/scss/control/_event-action.scss +++ b/packages/amis-editor-core/scss/control/_event-action.scss @@ -206,6 +206,9 @@ clip-path: inset(-5px 0px 0px 0px); } } + &-content-withglobalevent { + margin-top: 100px !important; + } .no-bd-btm { border-bottom: none; } diff --git a/packages/amis-editor-core/src/component/Editor.tsx b/packages/amis-editor-core/src/component/Editor.tsx index 95ffdcc88..0fc1ccfd2 100644 --- a/packages/amis-editor-core/src/component/Editor.tsx +++ b/packages/amis-editor-core/src/component/Editor.tsx @@ -6,7 +6,11 @@ import {MainStore, EditorStoreType} from '../store/editor'; import {EditorManager, EditorManagerConfig, PluginClass} from '../manager'; import {reaction} from 'mobx'; import {RenderOptions, closeContextMenus, toast} from 'amis'; -import {PluginEventListener, RendererPluginAction} from '../plugin'; +import { + PluginEventListener, + RendererPluginAction, + IGlobalEvent +} from '../plugin'; import {reGenerateID} from '../util'; import {SubEditor} from './SubEditor'; import Breadcrumb from './Breadcrumb'; @@ -110,6 +114,8 @@ export interface EditorProps extends PluginEventListener { customActionGetter?: (manager: EditorManager) => { [propName: string]: RendererPluginAction; }; + + globalEventGetter?: (manager: EditorManager) => IGlobalEvent[]; }; /** 上下文变量 */ diff --git a/packages/amis-editor-core/src/plugin.ts b/packages/amis-editor-core/src/plugin.ts index 05d96b80c..78e5a41fb 100644 --- a/packages/amis-editor-core/src/plugin.ts +++ b/packages/amis-editor-core/src/plugin.ts @@ -505,6 +505,15 @@ export interface RendererJSONSchemaResolveEventContext data: string; } +export interface IGlobalEvent { + name: string; // 事件名称，唯一 + description: string; // 事件描述 + mapping: Array<{ + key: string; // 入参名称 + type: string; // 入参类型 + }>; +} + /** * 右键菜单事件的上下文。 */ diff --git a/packages/amis-editor/examples/Editor.tsx b/packages/amis-editor/examples/Editor.tsx index 81534814f..55023276d 100644 --- a/packages/amis-editor/examples/Editor.tsx +++ b/packages/amis-editor/examples/Editor.tsx @@ -315,6 +315,33 @@ const editorLanguages = [ } ]; +const globalEvents = [ + { + name: 'globalEventA', + description: '全局事件动作A', + mapping: [ + { + key: 'name', + type: 'string' + }, + { + key: 'age', + type: 'number' + } + ] + }, + { + name: 'globalEventB', + description: '全局事件动作A', + mapping: [ + { + key: 'name', + type: 'string' + } + ] + } +]; + /** * 自定义渲染器示例 */ @@ -645,7 +672,8 @@ export default class AMisSchemaEditor extends React.Component { plugins={LayoutList} // 存放常见布局组件 $schemaUrl={`${location.protocol}//${location.host}/schema.json`} actionOptions={{ - showOldEntry: false + showOldEntry: false, + globalEventGetter: () => globalEvents }} amisEnv={ { diff --git a/packages/amis-editor/src/renderer/event-control/helper.tsx b/packages/amis-editor/src/renderer/event-control/helper.tsx index 450f02a16..3b5bdc76b 100644 --- a/packages/amis-editor/src/renderer/event-control/helper.tsx +++ b/packages/amis-editor/src/renderer/event-control/helper.tsx @@ -2966,6 +2966,8 @@ export const getEventControlConfig = ( const actionTree = manager?.config.actionOptions?.actionTreeGetter ? manager?.config.actionOptions?.actionTreeGetter(ACTION_TYPE_TREE(manager)) : ACTION_TYPE_TREE(manager); + const globalEvents = + manager?.config.actionOptions?.globalEventGetter?.(manager); const allComponents = manager?.store?.getComponentTreeSource(); const checkComponent = (node: any, action: RendererPluginAction) => { const actionType = action?.actionType; @@ -3007,6 +3009,7 @@ export const getEventControlConfig = ( events: manager?.pluginEvents, actionTree, commonActions, + globalEvents, owner: '', addBroadcast: manager?.addBroadcast, removeBroadcast: manager?.removeBroadcast, diff --git a/packages/amis-editor/src/renderer/event-control/index.tsx b/packages/amis-editor/src/renderer/event-control/index.tsx index 95002b2f7..1ad6bdb3f 100644 --- a/packages/amis-editor/src/renderer/event-control/index.tsx +++ b/packages/amis-editor/src/renderer/event-control/index.tsx @@ -43,18 +43,20 @@ import { PluginEvents, RendererPluginAction, RendererPluginEvent, - SubRendererPluginAction + SubRendererPluginAction, + IGlobalEvent } from 'amis-editor-core'; export * from './helper'; import {i18n as _i18n} from 'i18n-runtime'; -import type {VariableItem} from 'amis-ui/lib/components/formula/CodeEditor'; import {reaction} from 'mobx'; import {updateComponentContext} from 'amis-editor-core'; +import type {VariableItem} from 'amis-ui'; interface EventControlProps extends FormControlProps { actions: PluginActions; // 组件的动作列表 events: PluginEvents; // 组件的事件列表 actionTree: RendererPluginAction[]; // 动作树 + globalEvents?: IGlobalEvent[]; // 全局事件 commonActions?: {[propName: string]: RendererPluginAction}; // 公共动作Map value: ActionEventConfig; // 事件动作配置 onChange: ( @@ -277,6 +279,25 @@ export class EventControl extends React.Component< onChange && onChange(onEvent); } + addGlobalEvent(event: IGlobalEvent, disabled: boolean) { + const {onChange} = this.props; + let onEvent = { + ...this.state.onEvent + }; + if (disabled) { + return; + } + onEvent[`${event.name}`] = { + weight: 0, + actions: [] + }; + this.setState({ + onEvent: onEvent + }); + + onChange && onChange(onEvent); + } + activeEventDialog(eventInfo: EventDialogData) { eventInfo = cloneDeep(eventInfo); if (!eventInfo.debounce) { @@ -1043,6 +1064,7 @@ export class EventControl extends React.Component< getComponents, allComponents, render, + globalEvents, subscribeSchemaSubmit } = this.props; const { @@ -1135,11 +1157,42 @@ export class EventControl extends React.Component< popOverContainer: null // amis 渲染挂载节点会使用 this.target } )} + + {globalEvents + ? render( + 'dropdown', + { + type: 'dropdown-button', + level: 'enhance', + label: '添加全局事件', + disabled: false, + className: 'block w-full add-event-dropdown mt-2', + closeOnClick: true, + buttons: globalEvents.map(item => ({ + type: 'button', + disabledTip: '您已添加该事件', + tooltipPlacement: 'left', + disabled: Object.keys(onEvent).includes(item.name), + actionType: '', + label: item.name, + onClick: this.addGlobalEvent.bind( + this, + item, + Object.keys(onEvent).includes(item.name) + ) + })) + }, + { + popOverContainer: null // amis 渲染挂载节点会使用 this.target + } + ) + : null}