@tmagic/editor 1.5.0-beta.9 → 1.5.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.9",
+  "version": "1.5.1",
   "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.1",
+    "@tmagic/stage": "1.5.1",
+    "@tmagic/form": "1.5.1",
+    "@tmagic/table": "1.5.1",
+    "@tmagic/utils": "1.5.1"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -68,20 +70,20 @@
     "@types/node": "^18.19.0",
     "@types/serialize-javascript": "^5.0.1",
     "@types/sortablejs": "^1.15.8",
-    "@vitejs/plugin-vue": "^5.1.3",
-    "@vue/compiler-sfc": "^3.5.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/compiler-sfc": "^3.5.12",
     "@vue/test-utils": "^2.4.6",
     "rimraf": "^3.0.2",
-    "sass": "^1.78.0",
+    "sass": "^1.83.0",
     "tsc-alias": "^1.8.5",
     "type-fest": "^4.10.3",
-    "vite": "^5.4.3"
+    "vite": "^6.0.3"
   },
   "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.1"
   },
   "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>
@@ -92,9 +96,9 @@
         <PropsPanel
           :extend-state="extendFormState"
           :disabled-show-src="disabledShowSrc"
-          @mounted="(instance: any) => $emit('props-panel-mounted', instance)"
-          @form-error="(e: any) => $emit('props-form-error', e)"
-          @submit-error="(e: any) => $emit('props-submit-error', e)"
+          @mounted="propsPanelMountedHandler"
+          @form-error="propsPanelFormErrorHandler"
+          @submit-error="propsPanelSubmitErrorHandler"
         >
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
@@ -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>
@@ -129,7 +134,8 @@ import type { MApp } from '@tmagic/core';
 
 import Framework from './layouts/Framework.vue';
 import TMagicNavMenu from './layouts/NavMenu.vue';
-import PropsPanel from './layouts/PropsPanel.vue';
+import FormPanel from './layouts/props-panel/FormPanel.vue';
+import PropsPanel from './layouts/props-panel/PropsPanel.vue';
 import Sidebar from './layouts/sidebar/Sidebar.vue';
 import Workspace from './layouts/workspace/Workspace.vue';
 import codeBlockService from './services/codeBlock';
@@ -172,7 +178,7 @@ defineOptions({
 });
 
 const emit = defineEmits<{
-  'props-panel-mounted': [instance: InstanceType<typeof PropsPanel>];
+  'props-panel-mounted': [instance: InstanceType<typeof FormPanel>];
   'update:modelValue': [value: MApp | null];
   'props-form-error': [e: any];
   'props-submit-error': [e: any];
@@ -226,5 +232,17 @@ provide('stageOptions', stageOptions);
 
 provide<EventBus>('eventBus', new EventEmitter());
 
+const propsPanelMountedHandler = (e: InstanceType<typeof FormPanel>) => {
+  emit('props-panel-mounted', e);
+};
+
+const propsPanelSubmitErrorHandler = (e: any) => {
+  emit('props-submit-error', e);
+};
+
+const propsPanelFormErrorHandler = (e: any) => {
+  emit('props-form-error', e);
+};
+
 defineExpose(services);
 </script>

package/src/components/CodeBlockEditor.vue

@@ -59,11 +59,17 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, Ref, ref } from 'vue';
+import { computed, inject, Ref, ref, useTemplateRef } 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');
@@ -98,7 +104,7 @@ const { height: codeBlockEditorHeight } = useEditorContentHeight();
 const difVisible = ref(false);
 const { rect: windowRect } = useWindowRect();
 
-const magicVsEditor = ref<InstanceType<typeof CodeEditor>>();
+const magicVsEditor = useTemplateRef<InstanceType<typeof CodeEditor>>('magicVsEditor');
 
 const diffChange = () => {
   if (!magicVsEditor.value || !formBox.value?.form) {
@@ -209,16 +215,16 @@ 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) => {
   tMagicMessage.error(error.message);
 };
 
-const formBox = ref<InstanceType<typeof MFormBox>>();
+const formBox = useTemplateRef<InstanceType<typeof MFormBox>>('formBox');
 
 const changedValue = ref<CodeBlockContent>();
 const changeHandler = (values: CodeBlockContent) => {
@@ -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

@@ -11,9 +11,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, useTemplateRef } 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';
@@ -32,7 +32,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['change']);
 
-const form = ref<InstanceType<typeof MForm>>();
+const form = useTemplateRef<InstanceType<typeof MForm>>('form');
 
 const getFormConfig = (items: FormConfig = []) => [
   {
@@ -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/components/ContentMenu.vue

@@ -6,6 +6,7 @@
       ref="menu"
       :style="menuStyle"
       @mouseenter="mouseenterHandler()"
+      @contextmenu.prevent
     >
       <slot name="title"></slot>
       <div>
@@ -36,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
 
 import { useZIndex } from '@tmagic/design';
 
@@ -68,9 +69,9 @@ const emit = defineEmits<{
   mouseenter: [];
 }>();
 
-const menu = ref<HTMLDivElement>();
-const buttons = ref<InstanceType<typeof ToolButton>[]>();
-const subMenu = ref<any>();
+const menu = useTemplateRef<HTMLDivElement>('menu');
+const buttons = useTemplateRef<InstanceType<typeof ToolButton>[]>('buttons');
+const subMenu = useTemplateRef<any>('subMenu');
 const visible = ref(false);
 const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
 const zIndex = useZIndex();
@@ -82,8 +83,8 @@ const menuPosition = ref({
 });
 
 const menuStyle = computed(() => ({
-  top: `${menuPosition.value.top}px`,
-  left: `${menuPosition.value.left}px`,
+  top: `${menuPosition.value.top + 2}px`,
+  left: `${menuPosition.value.left + 2}px`,
   zIndex: curZIndex.value,
 }));
 
@@ -98,10 +99,12 @@ const hide = () => {
   emit('hide');
 };
 
-const clickHandler = () => {
+const clickHandler = (event: MouseEvent) => {
   if (!props.autoHide) return;
 
-  hide();
+  if (event.button === 0) {
+    hide();
+  }
 };
 
 const outsideClickHideHandler = (e: MouseEvent) => {
@@ -132,18 +135,15 @@ const setPosition = (e: { clientY: number; clientX: number }) => {
 };
 
 const show = (e?: { clientY: number; clientX: number }) => {
-  // 加setTimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
-  setTimeout(() => {
-    visible.value = true;
+  visible.value = true;
 
-    nextTick(() => {
-      e && setPosition(e);
+  nextTick(() => {
+    e && setPosition(e);
 
-      curZIndex.value = zIndex.nextZIndex();
+    curZIndex.value = zIndex.nextZIndex();
 
-      emit('show');
-    });
-  }, 300);
+    emit('show');
+  });
 };
 
 const showSubMenu = (item: MenuButton | MenuComponent, index: number) => {
@@ -166,7 +166,7 @@ const showSubMenu = (item: MenuButton | MenuComponent, index: number) => {
         y = rect.top;
       }
       subMenu.value?.show({
-        clientX: menu.value.offsetLeft + menu.value.clientWidth,
+        clientX: menu.value.offsetLeft + menu.value.clientWidth - 2,
         clientY: y,
       });
     }

package/src/components/FloatingBox.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onBeforeUnmount, provide, ref, watch } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, provide, ref, useTemplateRef, watch } from 'vue';
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
@@ -47,8 +47,8 @@ const props = withDefaults(
   },
 );
 
-const target = ref<HTMLDivElement>();
-const titleEl = ref<HTMLDivElement>();
+const target = useTemplateRef<HTMLDivElement>('target');
+const titleEl = useTemplateRef<HTMLDivElement>('titleEl');
 
 const zIndex = useZIndex();
 const curZIndex = ref<number>(0);

package/src/components/Resizer.vue

@@ -1,11 +1,11 @@
 <template>
-  <span ref="target" class="m-editor-resizer" :class="{ 'm-editor-resizer-draging': isDraging }">
+  <span ref="target" class="m-editor-resizer" :class="{ 'm-editor-resizer-dragging': isDragging }">
     <slot></slot>
   </span>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { useTemplateRef } from 'vue';
 import type { OnDrag } from 'gesto';
 
 import { useGetSo } from '@editor/hooks/use-getso';
@@ -18,6 +18,6 @@ const emit = defineEmits<{
   change: [e: OnDrag];
 }>();
 
-const target = ref<HTMLSpanElement>();
-const { isDraging } = useGetSo(target, emit);
+const target = useTemplateRef<HTMLSpanElement>('target');
+const { isDragging } = useGetSo(target, emit);
 </script>

package/src/components/ScrollBar.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
 import Gesto from 'gesto';
 
 defineOptions({
@@ -21,8 +21,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['scroll']);
 
-const bar = ref<HTMLDivElement>();
-const thumb = ref<HTMLDivElement>();
+const bar = useTemplateRef<HTMLDivElement>('bar');
+const thumb = useTemplateRef<HTMLDivElement>('thumb');
 
 const thumbSize = computed(() => props.size * (props.size / props.scrollSize));
 const thumbPos = computed(() => (props.pos / props.scrollSize) * props.size);

package/src/components/ScrollViewer.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 
 import { isNumber } from '@tmagic/utils';
 
@@ -63,8 +63,8 @@ const props = withDefaults(
   },
 );
 
-const container = ref<HTMLDivElement>();
-const el = ref<HTMLDivElement>();
+const container = useTemplateRef<HTMLDivElement>('container');
+const el = useTemplateRef<HTMLDivElement>('el');
 const style = computed(
   () => `
         width: ${isNumber(`${props.width}`) ? `${props.width}px` : props.width};

package/src/components/SplitView.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watchEffect } from 'vue';
 import { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
@@ -51,7 +51,7 @@ const props = withDefaults(
   },
 );
 
-const el = ref<HTMLElement>();
+const el = useTemplateRef<HTMLElement>('el');
 
 const hasLeft = computed(() => typeof props.left !== 'undefined');
 const hasRight = computed(() => typeof props.right !== 'undefined');

package/src/components/ToolButton.vue

@@ -131,7 +131,8 @@ const mousedownHandler = (item: MenuButton | MenuComponent, event: MouseEvent) =
 
 const mouseupHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
   if (props.eventType !== 'mouseup') return;
-  if (item.type === 'button') {
+
+  if (item.type === 'button' && event.button === 0) {
     buttonHandler(item, event);
   }
 };

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,
@@ -13,6 +13,7 @@ import { getIdFromEl } from '@tmagic/utils';
 
 import type {
   ComponentGroup,
+  CustomContentMenuFunction,
   DatasourceTypeOption,
   MenuBarData,
   MenuButton,
@@ -93,10 +94,12 @@ export interface EditorProps {
   /** 用于设置画布上的dom是否可以被拖入其中 */
   isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
   /** 用于自定义组件树与画布的右键菜单 */
-  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  customContentMenu?: CustomContentMenuFunction;
   extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   /** 页面顺序拖拽配置参数 */
   pageBarSortOptions?: PageBarSortOptions;
+  /** 页面搜索函数 */
+  pageFilterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
 }
 
 export const defaultEditorProps = {
@@ -121,4 +124,5 @@ export const defaultEditorProps = {
   canSelect: (el: HTMLElement) => Boolean(getIdFromEl()(el)),
   isContainer: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
   codeOptions: () => ({}),
+  customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
 };

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>