feat(core,editor,data-source,form,schema): 新增数据源方法配置,支持事件联动数据源方法

packages/core/src/App.ts

@@ -31,6 +31,7 @@ import {
   CodeBlockDSL,
   CodeItemConfig,
   CompItemConfig,
+  DataSourceItemConfig,
   DeprecatedEventConfig,
   EventConfig,
   Id,
@@ -321,6 +322,28 @@ class App extends EventEmitter {
     }
   }
 
+  public async dataSourceActionHandler(eventConfig: DataSourceItemConfig) {
+    const { dataSourceMethod = [], params = {} } = eventConfig;
+
+    const [id, methodName] = dataSourceMethod;
+
+    if (!id || !methodName) return;
+
+    const dataSource = this.dataSourceManager?.get(id);
+
+    if (!dataSource) return;
+
+    const methods = dataSource.getMethods() || [];
+
+    const method = methods.find((item) => item.name === methodName);
+
+    if (!method) return;
+
+    if (typeof method.content === 'function') {
+      await method.content({ app: this, params, dataSource });
+    }
+  }
+
   public compiledNode(node: MNode, content: DataSourceManagerData, sourceId?: Id) {
     return compiledNode(
       (value: any) => {
@@ -364,6 +387,8 @@ class App extends EventEmitter {
         } else if (actionItem.actionType === ActionType.CODE) {
           // 执行代码块
           await this.codeActionHandler(actionItem as CodeItemConfig);
+        } else if (actionItem.actionType === ActionType.DATA_SOURCE) {
+          await this.dataSourceActionHandler(actionItem as DataSourceItemConfig);
         }
       }
     } else {

packages/core/src/Node.ts

@@ -102,8 +102,11 @@ class Node extends EventEmitter {
     if (this.data[hook]?.hookType !== HookType.CODE || isEmpty(this.app.codeDsl)) return;
     for (const item of this.data[hook].hookData) {
       const { codeId, params = {} } = item;
-      if (this.app.codeDsl![codeId] && typeof this.app.codeDsl![codeId]?.content === 'function') {
-        await this.app.codeDsl![codeId].content({ app: this.app, params });
+
+      const functionContent = this.app.codeDsl?.[codeId]?.content;
+
+      if (typeof functionContent === 'function') {
+        await functionContent({ app: this.app, params });
       }
     }
   }

packages/data-source/src/data-sources/Base.ts

@@ -17,7 +17,7 @@
  */
 import EventEmitter from 'events';
 
-import type { DataSchema } from '@tmagic/schema';
+import type { CodeBlockContent, DataSchema } from '@tmagic/schema';
 
 import type { DataSourceOptions } from '@data-source/types';
 import { getDefaultValueFromFields } from '@data-source/util';
@@ -35,12 +35,14 @@ export default class DataSource extends EventEmitter {
   public data: Record<string, any> = {};
 
   private fields: DataSchema[] = [];
+  private methods: CodeBlockContent[] = [];
 
   constructor(options: DataSourceOptions) {
     super();
 
     this.id = options.schema.id;
     this.setFields(options.schema.fields);
+    this.setMethods(options.schema.methods || []);
 
     this.updateDefaultData();
   }
@@ -49,6 +51,14 @@ export default class DataSource extends EventEmitter {
     this.fields = fields;
   }
 
+  public setMethods(methods: CodeBlockContent[]) {
+    this.methods = methods;
+  }
+
+  public getMethods() {
+    return this.methods;
+  }
+
   public setData(data: Record<string, any>) {
     // todo: 校验数据，看是否符合 schema
     this.data = data;

packages/editor/src/Editor.vue

@@ -40,10 +40,6 @@
           <template #code-block-panel-tool="{ id, data }">
             <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
           </template>
-
-          <template #code-block-edit-panel-header="{ id }">
-            <slot name="code-block-edit-panel-header" :id="id"></slot>
-          </template>
         </Sidebar>
       </slot>
     </template>

packages/editor/src/components/CodeBlockEditor.vue

@@ -0,0 +1,141 @@
+<template>
+  <MFormDrawer
+    ref="fomDrawer"
+    label-width="80px"
+    :title="content.name"
+    :width="size"
+    :config="functionConfig"
+    :values="content"
+    :disabled="disabled"
+    @submit="submitForm"
+    @error="errorHandler"
+  ></MFormDrawer>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+
+import { tMagicMessage } from '@tmagic/design';
+import { ColumnConfig, FormState, MFormDrawer } from '@tmagic/form';
+import type { CodeBlockContent } from '@tmagic/schema';
+
+import type { Services } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
+
+defineOptions({
+  name: 'MEditorCodeBlockEditor',
+});
+
+defineProps<{
+  content: CodeBlockContent;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  submit: [values: CodeBlockContent];
+}>();
+
+const services = inject<Services>('services');
+
+const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+
+const defaultParamColConfig: ColumnConfig = {
+  type: 'row',
+  label: '参数类型',
+  items: [
+    {
+      text: '参数类型',
+      labelWidth: '70px',
+      type: 'select',
+      name: 'type',
+      options: [
+        {
+          text: '数字',
+          label: '数字',
+          value: 'number',
+        },
+        {
+          text: '字符串',
+          label: '字符串',
+          value: 'text',
+        },
+        {
+          text: '组件',
+          label: '组件',
+          value: 'ui-select',
+        },
+      ],
+    },
+  ],
+};
+
+const functionConfig = computed(() => [
+  {
+    text: '名称',
+    name: 'name',
+  },
+  {
+    text: '注释',
+    name: 'desc',
+  },
+  {
+    type: 'table',
+    border: true,
+    text: '参数',
+    enableFullscreen: false,
+    name: 'params',
+    maxHeight: '300px',
+    dropSort: false,
+    items: [
+      {
+        type: 'text',
+        label: '参数名',
+        name: 'name',
+      },
+      {
+        type: 'text',
+        label: '注释',
+        name: 'extra',
+      },
+      services?.codeBlockService.getParamsColConfig() || defaultParamColConfig,
+    ],
+  },
+  {
+    name: 'content',
+    type: 'vs-code',
+    options: inject('codeOptions', {}),
+    onChange: (formState: FormState | undefined, code: string) => {
+      try {
+        // 检测js代码是否存在语法错误
+        getConfig('parseDSL')(code);
+
+        return code;
+      } catch (error: any) {
+        tMagicMessage.error(error.message);
+
+        throw error;
+      }
+    },
+  },
+]);
+
+const submitForm = async (values: CodeBlockContent) => {
+  emit('submit', values);
+};
+
+const errorHandler = (error: any) => {
+  tMagicMessage.error(error.message);
+};
+
+const fomDrawer = ref<InstanceType<typeof MFormDrawer>>();
+
+defineExpose({
+  show() {
+    fomDrawer.value?.show();
+  },
+
+  hide() {
+    fomDrawer.value?.hide();
+  },
+});
+</script>