@tmagic/editor 1.5.0-beta.9 → 1.5.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.9",
+  "version": "1.5.0",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -32,6 +32,7 @@
     "node": ">=18"
   },
   "repository": {
+    "directory": "packages/editor",
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
@@ -48,6 +49,7 @@
     "@element-plus/icons-vue": "^2.3.1",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
+    "deep-object-diff": "^1.1.9",
     "emmet-monaco-es": "^5.3.0",
     "events": "^3.3.0",
     "gesto": "^1.19.1",
@@ -56,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/table": "1.5.0-beta.9",
-    "@tmagic/design": "1.5.0-beta.9",
-    "@tmagic/form": "1.5.0-beta.9",
-    "@tmagic/stage": "1.5.0-beta.9",
-    "@tmagic/utils": "1.5.0-beta.9"
+    "@tmagic/design": "1.5.0",
+    "@tmagic/form": "1.5.0",
+    "@tmagic/stage": "1.5.0",
+    "@tmagic/utils": "1.5.0",
+    "@tmagic/table": "1.5.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -69,19 +71,19 @@
     "@types/serialize-javascript": "^5.0.1",
     "@types/sortablejs": "^1.15.8",
     "@vitejs/plugin-vue": "^5.1.3",
-    "@vue/compiler-sfc": "^3.5.0",
+    "@vue/compiler-sfc": "^3.5.12",
     "@vue/test-utils": "^2.4.6",
     "rimraf": "^3.0.2",
     "sass": "^1.78.0",
     "tsc-alias": "^1.8.5",
     "type-fest": "^4.10.3",
-    "vite": "^5.4.3"
+    "vite": "^5.4.10"
   },
   "peerDependencies": {
     "monaco-editor": "^0.48.0",
     "typescript": "*",
-    "vue": "^3.5.0",
-    "@tmagic/core": "1.5.0-beta.9"
+    "vue": ">=3.5.0",
+    "@tmagic/core": "1.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -1,5 +1,9 @@
 <template>
-  <Framework :disabled-page-fragment="disabledPageFragment" :page-bar-sort-options="pageBarSortOptions">
+  <Framework
+    :disabled-page-fragment="disabledPageFragment"
+    :page-bar-sort-options="pageBarSortOptions"
+    :page-filter-function="pageFilterFunction"
+  >
     <template #header>
       <slot name="header"></slot>
     </template>
@@ -114,6 +118,7 @@
     </template>
 
     <template #page-bar><slot name="page-bar"></slot></template>
+    <template #page-bar-add-button><slot name="page-bar-add-button"></slot></template>
     <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
     <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
     <template #page-list-popover="{ list }"><slot name="page-list-popover" :list="list"></slot></template>

package/src/components/CodeBlockEditor.vue

@@ -63,7 +63,13 @@ import { computed, inject, Ref, ref } from 'vue';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
-import { type FormConfig, type FormState, MFormBox, type TableColumnConfig } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  type FormConfig,
+  type FormState,
+  MFormBox,
+  type TableColumnConfig,
+} from '@tmagic/form';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
@@ -88,7 +94,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  submit: [values: CodeBlockContent];
+  submit: [values: CodeBlockContent, eventData: ContainerChangeEventData];
 }>();
 
 const services = inject<Services>('services');
@@ -209,9 +215,9 @@ const functionConfig = computed<FormConfig>(() => [
   },
 ]);
 
-const submitForm = (values: CodeBlockContent) => {
+const submitForm = (values: CodeBlockContent, data: ContainerChangeEventData) => {
   changedValue.value = undefined;
-  emit('submit', values);
+  emit('submit', values, data);
 };
 
 const errorHandler = (error: any) => {
@@ -238,7 +244,7 @@ const beforeClose = (done: (cancel?: boolean) => void) => {
       distinguishCancelAndClose: true,
     })
     .then(() => {
-      changedValue.value && submitForm(changedValue.value);
+      changedValue.value && submitForm(changedValue.value, { changeRecords: formBox.value?.form?.changeRecords });
       done();
     })
     .catch((action: string) => {

package/src/components/CodeParams.vue

@@ -13,7 +13,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 
-import { FormConfig, MForm } from '@tmagic/form';
+import { type ContainerChangeEventData, type FormConfig, type FormValue, MForm } from '@tmagic/form';
 
 import type { CodeParamStatement } from '@editor/type';
 import { error } from '@editor/utils';
@@ -59,10 +59,10 @@ const codeParamsConfig = computed(() =>
 /**
  * 参数值修改更新
  */
-const onParamsChangeHandler = async () => {
+const onParamsChangeHandler = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
     const value = await form.value?.submitForm(true);
-    emit('change', value);
+    emit('change', value, eventData);
   } catch (e) {
     error(e);
   }

package/src/editorProps.ts

@@ -1,4 +1,4 @@
-import type { DataSourceSchema, EventOption, Id, MApp, MNode } from '@tmagic/core';
+import type { DataSourceSchema, EventOption, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/core';
 import type { FormConfig, FormState } from '@tmagic/form';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
@@ -97,6 +97,8 @@ export interface EditorProps {
   extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   /** 页面顺序拖拽配置参数 */
   pageBarSortOptions?: PageBarSortOptions;
+  /** 页面搜索函数 */
+  pageFilterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
 }
 
 export const defaultEditorProps = {

package/src/fields/Code.vue

@@ -25,7 +25,7 @@ const emit = defineEmits<{
   change: [value: string | any];
 }>();
 
-const props = withDefaults(
+withDefaults(
   defineProps<
     FieldProps<
       {
@@ -44,7 +44,6 @@ const props = withDefaults(
 );
 
 const save = (v: string | any) => {
-  props.model[props.name] = v;
   emit('change', v);
 };
 </script>

package/src/fields/CodeSelect.vue

@@ -21,8 +21,8 @@ import { isEmpty } from 'lodash-es';
 
 import { HookCodeType, HookType } from '@tmagic/core';
 import { TMagicCard } from '@tmagic/design';
-import type { FieldProps, FormItem } from '@tmagic/form';
-import { FormState, MContainer } from '@tmagic/form';
+import type { ContainerChangeEventData, FieldProps, FormItem, GroupListConfig } from '@tmagic/form';
+import { MContainer } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
@@ -30,7 +30,9 @@ defineOptions({
   name: 'MFieldsCodeSelect',
 });
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+}>();
 
 const services = inject<Services>('services');
 
@@ -45,12 +47,12 @@ const props = withDefaults(
   {},
 );
 
-const codeConfig = computed(() => ({
+const codeConfig = computed<GroupListConfig>(() => ({
   type: 'group-list',
   name: 'hookData',
   enableToggleMode: false,
   expandAll: true,
-  title: (mForm: FormState, { model, index }: any) => {
+  title: (mForm, { model, index }: any) => {
     if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
       if (Array.isArray(model.codeId)) {
         if (model.codeId.length < 2) {
@@ -78,11 +80,13 @@ const codeConfig = computed(() => ({
             { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
           ],
           defaultValue: 'code',
-          onChange: (mForm: FormState, v: HookCodeType, { model }: any) => {
+          onChange: (mForm, v: HookCodeType, { model, prop, changeRecords }) => {
             if (v === HookCodeType.DATA_SOURCE_METHOD) {
               model.codeId = [];
+              changeRecords.push({ propPath: prop.replace('codeType', 'codeId'), value: [] });
             } else {
               model.codeId = '';
+              changeRecords.push({ propPath: prop.replace('codeType', 'codeId'), value: '' });
             }
 
             return v;
@@ -93,7 +97,7 @@ const codeConfig = computed(() => ({
           name: 'codeId',
           span: 18,
           labelWidth: 0,
-          display: (mForm: FormState, { model }: any) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
+          display: (mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !services?.codeBlockService.getEditStatus(),
         },
         {
@@ -101,7 +105,7 @@ const codeConfig = computed(() => ({
           name: 'codeId',
           span: 18,
           labelWidth: 0,
-          display: (mForm: FormState, { model }: any) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
+          display: (mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !services?.dataSourceService.get('editable'),
         },
       ],
@@ -126,7 +130,5 @@ watch(
   },
 );
 
-const changeHandler = async () => {
-  emit('change', props.model[props.name]);
-};
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => emit('change', v, eventData);
 </script>

package/src/fields/CodeSelectCol.vue

@@ -7,7 +7,7 @@
         :config="selectConfig"
         :model="model"
         :size="size"
-        @change="onParamsChangeHandler"
+        @change="onCodeIdChangeHandler"
       ></MContainer>
 
       <!-- 查看/编辑按钮 -->
@@ -41,7 +41,14 @@ import { isEmpty, map } from 'lodash-es';
 
 import type { Id } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  createValues,
+  type FieldProps,
+  filterFunction,
+  type FormState,
+  MContainer,
+} from '@tmagic/form';
 
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
@@ -55,7 +62,9 @@ defineOptions({
 const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
 const eventBus = inject<EventBus>('eventBus');
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+}>();
 
 const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
   disabled: false,
@@ -125,12 +134,30 @@ const selectConfig = {
   },
 };
 
+const onCodeIdChangeHandler = (value: any) => {
+  props.model.params = value.params;
+  emit('change', props.model, {
+    changeRecords: [
+      {
+        propPath: props.prop,
+        value: value[props.name],
+      },
+    ],
+  });
+};
+
 /**
  * 参数值修改更新
  */
-const onParamsChangeHandler = (value: any) => {
+const onParamsChangeHandler = (value: any, eventData: ContainerChangeEventData) => {
   props.model.params = value.params;
-  emit('change', props.model);
+  emit('change', props.model, {
+    ...eventData,
+    changeRecords: (eventData.changeRecords || []).map((item) => ({
+      prop: `${props.prop.replace(props.name, '')}${item.propPath}`,
+      value: item.value,
+    })),
+  });
 };
 
 const editCode = (id: string) => {

package/src/fields/CondOpSelect.vue

@@ -39,7 +39,10 @@ defineOptions({
   name: 'MFieldsCondOpSelect',
 });
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
+
 const { dataSourceService } = inject<Services>('services') || {};
 
 const props = defineProps<FieldProps<CondOpSelectConfig>>();
@@ -81,7 +84,7 @@ const options = computed(() => {
   return [...arrayOptions, ...eqOptions, ...numberOptions];
 });
 
-const fieldChangeHandler = (v: string[]) => {
+const fieldChangeHandler = (v: string) => {
   emit('change', v);
 };
 </script>

package/src/fields/DataSourceFields.vue

@@ -51,7 +51,13 @@ import { inject, Ref, ref } from 'vue';
 
 import type { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
-import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  type FieldProps,
+  type FormConfig,
+  type FormState,
+  MFormBox,
+} from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
@@ -75,7 +81,9 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [v: any, eventData?: ContainerChangeEventData];
+}>();
 
 const services = inject<Services>('services');
 
@@ -91,16 +99,29 @@ const newHandler = () => {
   addDialogVisible.value = true;
 };
 
-const fieldChange = ({ index, ...value }: Record<string, any>) => {
+const fieldChange = ({ index, ...value }: Record<string, any>, data: ContainerChangeEventData) => {
+  addDialogVisible.value = false;
+
   if (index > -1) {
-    props.model[props.name][index] = value;
+    emit('change', value, {
+      modifyKey: index,
+      changeRecords: (data.changeRecords || []).map((item) => ({
+        propPath: `${props.prop}.${index}.${item.propPath}`,
+        value: item.value,
+      })),
+    });
   } else {
-    props.model[props.name].push(value);
+    const modifyKey = props.model[props.name].length;
+    emit('change', value, {
+      modifyKey,
+      changeRecords: [
+        {
+          propPath: `${props.prop}.${modifyKey}`,
+          value,
+        },
+      ],
+    });
   }
-
-  addDialogVisible.value = false;
-
-  emit('change', props.model[props.name]);
 };
 
 const fieldColumns: ColumnConfig[] = [
@@ -310,11 +331,9 @@ const addFromJsonFromChange = ({ data }: { data: string }) => {
   try {
     const value = JSON.parse(data);
 
-    props.model[props.name] = getFieldsConfig(value, props.model[props.name]);
-
     addFromJsonDialogVisible.value = false;
 
-    emit('change', props.model[props.name]);
+    emit('change', getFieldsConfig(value, props.model[props.name]));
   } catch (e: any) {
     tMagicMessage.error(e.message);
   }

package/src/fields/DataSourceMethods.vue

@@ -21,14 +21,17 @@
 </template>
 
 <script setup lang="ts">
+import { nextTick, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
 import type { CodeBlockContent } from '@tmagic/core';
-import { TMagicButton } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
+import type { ContainerChangeEventData, FieldProps } from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
 import type { CodeParamStatement } from '@editor/type';
+import { getEditorConfig } from '@editor/utils/config';
 
 defineOptions({
   name: 'MFieldsDataSourceMethods',
@@ -47,7 +50,10 @@ const props = withDefaults(
 
 const emit = defineEmits(['change']);
 
-const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
+const codeConfig = ref<CodeBlockContent>();
+const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+
+let editIndex = -1;
 
 const methodColumns: ColumnConfig[] = [
   {
@@ -73,16 +79,31 @@ const methodColumns: ColumnConfig[] = [
     actions: [
       {
         text: '编辑',
-        handler: (row: CodeBlockContent) => {
-          editCode(props.model, row.name);
-          emit('change', props.model[props.name]);
+        handler: (method: CodeBlockContent, index: number) => {
+          let codeContent = method.content || `({ params, dataSource, app }) => {\n  // place your code here\n}`;
+
+          if (typeof codeContent !== 'string') {
+            codeContent = codeContent.toString();
+          }
+
+          codeConfig.value = {
+            ...cloneDeep(method),
+            content: codeContent,
+          };
+
+          editIndex = index;
+
+          nextTick(() => {
+            codeBlockEditor.value?.show();
+          });
         },
       },
       {
         text: '删除',
         buttonType: 'danger',
-        handler: (row: CodeBlockContent) => {
-          deleteCode(props.model, row.name);
+        handler: async (row: CodeBlockContent, index: number) => {
+          await tMagicMessageBox.confirm(`确定删除${row.name}?`, '提示');
+          props.model[props.name].splice(index, 1);
           emit('change', props.model[props.name]);
         },
       },
@@ -91,14 +112,51 @@ const methodColumns: ColumnConfig[] = [
 ];
 
 const createCodeHandler = () => {
-  createCode(props.model);
+  codeConfig.value = {
+    name: '',
+    content: `({ params, dataSource, app, flowState }) => {\n  // place your code here\n}`,
+    params: [],
+  };
+
+  editIndex = -1;
 
-  emit('change', props.model[props.name]);
+  nextTick(() => {
+    codeBlockEditor.value?.show();
+  });
 };
 
-const submitCodeHandler = (values: CodeBlockContent) => {
-  submitCode(values);
+const submitCodeHandler = (value: CodeBlockContent, data: ContainerChangeEventData) => {
+  if (value.content) {
+    // 在保存的时候转换代码内容
+    const parseDSL = getEditorConfig('parseDSL');
+    if (typeof value.content === 'string') {
+      value.content = parseDSL<(...args: any[]) => any>(value.content);
+    }
+  }
+  if (editIndex > -1) {
+    emit('change', value, {
+      modifyKey: editIndex,
+      changeRecords: (data.changeRecords || []).map((item) => ({
+        propPath: `${props.prop}.${editIndex}.${item.propPath}`,
+        value: item.value,
+      })),
+    });
+  } else {
+    const modifyKey = props.model[props.name].length;
+    emit('change', value, {
+      modifyKey,
+      changeRecords: [
+        {
+          propPath: `${props.prop}.${modifyKey}`,
+          value,
+        },
+      ],
+    });
+  }
+
+  editIndex = -1;
+  codeConfig.value = void 0;
 
-  emit('change', props.model[props.name]);
+  codeBlockEditor.value?.hide();
 };
 </script>

package/src/fields/DisplayConds.vue

@@ -17,6 +17,7 @@ import { computed, inject } from 'vue';
 
 import type { DisplayCond } from '@tmagic/core';
 import {
+  type ContainerChangeEventData,
   type FieldProps,
   type FilterFunction,
   filterFunction,
@@ -33,7 +34,7 @@ defineOptions({
 });
 
 const emit = defineEmits<{
-  change: [value: DisplayCond[]];
+  change: [value: DisplayCond[], eventData?: ContainerChangeEventData];
 }>();
 
 const props = withDefaults(
@@ -149,7 +150,11 @@ const config = computed<GroupListConfig>(() => ({
   ],
 }));
 
-const changeHandler = (v: DisplayCond[]) => {
-  emit('change', v);
+const changeHandler = (v: DisplayCond[], eventData?: ContainerChangeEventData) => {
+  if (!Array.isArray(props.model[props.name])) {
+    props.model[props.name] = [];
+  }
+
+  emit('change', v, eventData);
 };
 </script>

package/src/fields/EventSelect.vue

@@ -20,6 +20,7 @@
         :key="index"
         :disabled="disabled"
         :size="size"
+        :prop="`${prop}.${index}`"
         :config="actionsConfig"
         :model="cardItem"
         :label-width="config.labelWidth || '100px'"
@@ -32,7 +33,8 @@
             :model="cardItem"
             :disabled="disabled"
             :size="size"
-            @change="onChangeHandler"
+            :prop="`${prop}.${index}`"
+            @change="eventNameChangeHandler"
           ></MFormContainer>
           <TMagicButton
             style="color: #f56c6c"
@@ -56,12 +58,19 @@ import { has } from 'lodash-es';
 import type { EventOption, MComponent, MContainer } from '@tmagic/core';
 import { ActionType } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { CascaderOption, ChildConfig, FieldProps, FormState, PanelConfig } from '@tmagic/form';
+import type {
+  CascaderOption,
+  ChildConfig,
+  ContainerChangeEventData,
+  FieldProps,
+  FormState,
+  PanelConfig,
+} from '@tmagic/form';
 import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
-import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
-import { getCascaderOptionsFromFields, traverseNode } from '@editor/utils';
+import { getCascaderOptionsFromFields } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsEventSelect',
@@ -69,7 +78,9 @@ defineOptions({
 
 const props = defineProps<FieldProps<EventSelectConfig>>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [v: any, eventData?: ContainerChangeEventData];
+}>();
 
 const services = inject<Services>('services');
 
@@ -108,7 +119,7 @@ const eventNameConfig = computed(() => {
           if (pageFragment) {
             events = [
               {
-                label: pageFragment.name || '迭代器容器',
+                label: pageFragment.name || '页面片容器',
                 value: pageFragment.id,
                 children: events,
               },
@@ -355,21 +366,27 @@ const addEvent = () => {
     name: '',
     actions: [],
   };
+
   if (!props.model[props.name]) {
     props.model[props.name] = [];
   }
-  props.model[props.name].push(defaultEvent);
-  onChangeHandler();
+
+  emit('change', defaultEvent, {
+    modifyKey: props.model[props.name].length,
+  });
 };
 
 // 删除事件
 const removeEvent = (index: number) => {
   if (!props.name) return;
   props.model[props.name].splice(index, 1);
-  onChangeHandler();
+  emit('change', props.model[props.name]);
 };
 
-const onChangeHandler = () => {
-  emit('change', props.model);
+const eventNameChangeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model[props.name], eventData);
 };
+
+const onChangeHandler = (v: any, eventData: ContainerChangeEventData) =>
+  emit('change', props.model[props.name], eventData);
 </script>