@tmagic/editor 1.7.5-beta.1 → 1.7.6

package/src/hooks/use-stage.ts

@@ -8,7 +8,7 @@ import editorService from '@editor/services/editor';
 import uiService from '@editor/services/ui';
 import type { StageOptions } from '@editor/type';
 import { H_GUIDE_LINE_STORAGE_KEY, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY } from '@editor/utils/const';
-import { getGuideLineFromCache } from '@editor/utils/editor';
+import { buildChangeRecords, getGuideLineFromCache } from '@editor/utils/editor';
 
 const root = computed(() => editorService.get('root'));
 const page = computed(() => editorService.get('page'));
@@ -94,7 +94,15 @@ export const useStage = (stageOptions: StageOptions) => {
       return;
     }
 
-    editorService.update(ev.data.map((data) => ({ id: getIdFromEl()(data.el) || '', style: data.style })));
+    // 为每个元素单独更新，确保 changeRecords 与对应的元素关联
+    ev.data.forEach((data) => {
+      const id = getIdFromEl()(data.el);
+      if (!id) return;
+
+      const { style = {} } = data;
+
+      editorService.update({ id, style }, { changeRecords: buildChangeRecords(style, 'style') });
+    });
   });
 
   stage.on('sort', (ev: SortEventData) => {

package/src/layouts/CodeEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`magic-code-editor`">
+  <div class="magic-code-editor">
     <Teleport to="body" :disabled="!fullScreen">
       <div :class="{ 'magic-code-editor-wrapper': true, 'full-screen': fullScreen }" :style="{ height: computeHeight }">
         <TMagicButton
@@ -47,6 +47,7 @@ const props = withDefaults(
       minRows?: number;
       maxRows?: number;
     };
+    editorCustomType?: string;
   }>(),
   {
     initValues: '',
@@ -63,6 +64,7 @@ const props = withDefaults(
 const emit = defineEmits(['initd', 'save']);
 
 const autoHeight = ref<string>('');
+let cachedExtraHeight: number | null = null;
 
 const computeHeight = computed(() => {
   if (fullScreen.value) {
@@ -80,6 +82,41 @@ const computeHeight = computed(() => {
   return '100%';
 });
 
+const calculateExtraHeight = (): number => {
+  let extraHeight = 10; // 默认值
+
+  if (vsEditor && codeEditorEl.value) {
+    try {
+      // 获取编辑器容器的总高度和内容区域高度
+      const editorElement = codeEditorEl.value.querySelector('.monaco-editor');
+      const scrollableElement = codeEditorEl.value.querySelector('.monaco-scrollable-element');
+
+      if (editorElement && scrollableElement) {
+        const editorRect = editorElement.getBoundingClientRect();
+        const scrollableRect = scrollableElement.getBoundingClientRect();
+
+        // 计算编辑器的边框、内边距等额外高度
+        extraHeight = Math.max(editorRect.height - scrollableRect.height, 0);
+
+        // 如果无法获取到有效的差值，使用编辑器配置中的相关选项
+        if (extraHeight === 0) {
+          const editorOptions = vsEditor.getOptions();
+          const scrollBeyondLastLine = editorOptions.get(monaco.editor.EditorOption.scrollBeyondLastLine);
+          const padding = editorOptions.get(monaco.editor.EditorOption.padding);
+          const lineHeight = editorOptions.get(monaco.editor.EditorOption.lineHeight) || 20;
+
+          extraHeight = (scrollBeyondLastLine ? lineHeight : 0) + (padding?.top || 0) + (padding?.bottom || 0) + 10; // 基础边距
+        }
+      }
+    } catch (error) {
+      // 如果获取失败，保持默认值
+      console.warn('Failed to calculate editor extra height:', error);
+    }
+  }
+
+  return extraHeight;
+};
+
 const setAutoHeight = (v = '') => {
   let lines = Math.max(v.split('\n').length, props.autosize?.minRows || 1);
   if (v) {
@@ -95,7 +132,12 @@ const setAutoHeight = (v = '') => {
     lineHeight = editorOptions.get(monaco.editor.EditorOption.lineHeight) || 20;
   }
 
-  const newHeight = `${lines * lineHeight + 10}px`;
+  // 获取缓存的额外高度，如果没有缓存则计算并缓存
+  if (cachedExtraHeight === null) {
+    cachedExtraHeight = calculateExtraHeight();
+  }
+
+  const newHeight = `${lines * lineHeight + cachedExtraHeight}px`;
 
   // 只有当高度真正改变时才更新
   if (autoHeight.value !== newHeight) {
@@ -210,10 +252,14 @@ const init = async () => {
     await nextTick();
   }
 
+  // 重置缓存的额外高度，因为编辑器重新初始化
+  cachedExtraHeight = null;
+
   const options = {
     value: values.value,
     language: props.language,
     theme: 'vs-dark',
+    editorCustomType: props.editorCustomType,
     ...props.options,
   };
 
@@ -297,6 +343,9 @@ onBeforeUnmount(() => {
 
   vsEditor = null;
   vsDiffEditor = null;
+
+  // 重置缓存
+  cachedExtraHeight = null;
 });
 onUnmounted(() => {
   codeEditorEl.value?.removeEventListener('keydown', handleKeyDown);

package/src/layouts/Framework.vue

@@ -7,7 +7,13 @@
     <slot name="content-before"></slot>
 
     <slot name="src-code" v-if="showSrc">
-      <CodeEditor class="m-editor-content" :init-values="root" :options="codeOptions" @save="saveCode"></CodeEditor>
+      <CodeEditor
+        class="m-editor-content"
+        editor-custom-type="m-editor-content"
+        :init-values="root"
+        :options="codeOptions"
+        @save="saveCode"
+      ></CodeEditor>
     </slot>
 
     <SplitView

package/src/layouts/props-panel/FormPanel.vue

@@ -32,6 +32,7 @@
     <CodeEditor
       v-if="showSrc"
       class="m-editor-props-panel-src-code"
+      editor-custom-type="m-editor-props-panel-src-code"
       :height="`${editorContentHeight}px`"
       :init-values="codeValueKey ? values[codeValueKey] : values"
       :options="codeOptions"

package/src/type.ts

@@ -123,12 +123,12 @@ export interface EditorInstallOptions {
   customCreateMonacoEditor: (
     monaco: typeof Monaco,
     codeEditorEl: HTMLElement,
-    options: Monaco.editor.IStandaloneEditorConstructionOptions,
+    options: Monaco.editor.IStandaloneEditorConstructionOptions & { editorCustomType?: string },
   ) => Monaco.editor.IStandaloneCodeEditor;
   customCreateMonacoDiffEditor: (
     monaco: typeof Monaco,
     codeEditorEl: HTMLElement,
-    options: Monaco.editor.IStandaloneEditorConstructionOptions,
+    options: Monaco.editor.IStandaloneEditorConstructionOptions & { editorCustomType?: string },
   ) => Monaco.editor.IStandaloneDiffEditor;
   [key: string]: any;
 }

package/src/utils/data-source/index.ts

@@ -1,11 +1,6 @@
 import { DataSchema, DataSourceFieldType, DataSourceSchema } from '@tmagic/core';
 import { CascaderOption, FormConfig, FormState } from '@tmagic/form';
-import {
-  DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX,
-  dataSourceTemplateRegExp,
-  getKeysArray,
-  isNumber,
-} from '@tmagic/utils';
+import { dataSourceTemplateRegExp, getKeysArray, isNumber } from '@tmagic/utils';
 
 import BaseFormConfig from './formConfigs/base';
 import HttpFormConfig from './formConfigs/http';
@@ -211,41 +206,44 @@ export const getCascaderOptionsFromFields = (
   fields: DataSchema[] = [],
   dataSourceFieldType: DataSourceFieldType[] = ['any'],
 ): CascaderOption[] => {
-  const child: CascaderOption[] = [];
-  fields.forEach((field) => {
-    if (!dataSourceFieldType.length) {
-      dataSourceFieldType.push('any');
-    }
-
-    let children: CascaderOption[] = [];
-    if (field.type && ['any', 'array', 'object'].includes(field.type)) {
-      children = getCascaderOptionsFromFields(field.fields, dataSourceFieldType);
-    }
+  const typeSet = new Set(dataSourceFieldType.length ? dataSourceFieldType : ['any']);
+  const includesAny = typeSet.has('any');
 
-    const item = {
-      label: `${field.title || field.name}(${field.type})`,
-      value: field.name,
-      children,
-    };
+  const result: CascaderOption[] = [];
 
+  for (const field of fields) {
     const fieldType = field.type || 'any';
-    if (dataSourceFieldType.includes('any') || dataSourceFieldType.includes(fieldType)) {
-      child.push(item);
-      return;
-    }
+    const isContainerType = fieldType === 'any' || fieldType === 'array' || fieldType === 'object';
 
-    if (!dataSourceFieldType.includes(fieldType) && !['array', 'object', 'any'].includes(fieldType)) {
-      return;
-    }
+    const children = isContainerType ? getCascaderOptionsFromFields(field.fields, dataSourceFieldType) : [];
+
+    const matchesType = includesAny || typeSet.has(fieldType);
 
-    if (!children.length && ['object', 'array', 'any'].includes(field.type || '')) {
-      return;
+    if (matchesType || (isContainerType && children.length)) {
+      result.push({
+        label: `${field.title || field.name}(${field.type})`,
+        value: field.name,
+        children,
+      });
     }
+  }
 
-    child.push(item);
-  });
-  return child;
+  return result;
 };
 
-export const removeDataSourceFieldPrefix = (id?: string) =>
-  id?.replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, '') || '';
+export const getFieldType = (ds: DataSourceSchema | undefined, fieldNames: string[]) => {
+  let fields = ds?.fields;
+  let type = '';
+
+  for (const fieldName of fieldNames) {
+    if (!fields?.length) return '';
+
+    const field = fields.find((f) => f.name === fieldName);
+    if (!field) return '';
+
+    type = field.type || '';
+    fields = field.fields;
+  }
+
+  return type;
+};

package/src/utils/editor.ts

@@ -411,3 +411,28 @@ export const isIncludeDataSource = (node: MNode, oldNode: MNode) => {
 
   return isIncludeDataSource;
 };
+
+export const buildChangeRecords = (value: any, basePath: string) => {
+  const changeRecords: { propPath: string; value: any }[] = [];
+
+  // 递归构建 changeRecords
+  const buildChangeRecords = (obj: any, basePath: string) => {
+    Object.entries(obj).forEach(([key, value]) => {
+      if (value !== undefined) {
+        const currentPath = basePath ? `${basePath}.${key}` : key;
+
+        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+          // 递归处理嵌套对象
+          buildChangeRecords(value, currentPath);
+        } else {
+          // 处理基础类型值
+          changeRecords.push({ propPath: currentPath, value });
+        }
+      }
+    });
+  };
+
+  buildChangeRecords(value, basePath);
+
+  return changeRecords;
+};

package/types/index.d.ts

@@ -900,8 +900,12 @@ type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 interface EditorInstallOptions {
     parseDSL: <T = any>(dsl: string) => T;
-    customCreateMonacoEditor: (monaco: typeof monaco, codeEditorEl: HTMLElement, options: monaco.editor.IStandaloneEditorConstructionOptions) => monaco.editor.IStandaloneCodeEditor;
-    customCreateMonacoDiffEditor: (monaco: typeof monaco, codeEditorEl: HTMLElement, options: monaco.editor.IStandaloneEditorConstructionOptions) => monaco.editor.IStandaloneDiffEditor;
+    customCreateMonacoEditor: (monaco: typeof monaco, codeEditorEl: HTMLElement, options: monaco.editor.IStandaloneEditorConstructionOptions & {
+        editorCustomType?: string;
+    }) => monaco.editor.IStandaloneCodeEditor;
+    customCreateMonacoDiffEditor: (monaco: typeof monaco, codeEditorEl: HTMLElement, options: monaco.editor.IStandaloneEditorConstructionOptions & {
+        editorCustomType?: string;
+    }) => monaco.editor.IStandaloneDiffEditor;
     [key: string]: any;
 }
 interface Services {
@@ -1610,6 +1614,10 @@ declare const fixNodePosition: (config: MNode, parent: MContainer, stage: StageC
 declare const serializeConfig: (config: any) => string;
 declare const moveItemsInContainer: (sourceIndices: number[], parent: MContainer, targetIndex: number) => void;
 declare const isIncludeDataSource: (node: MNode, oldNode: MNode) => boolean;
+declare const buildChangeRecords: (value: any, basePath: string) => {
+    propPath: string;
+    value: any;
+}[];
 
 /**
  * 粘贴前置操作：返回分配了新id以及校准了坐标的配置
@@ -1638,7 +1646,7 @@ declare const getDisplayField: (dataSources: DataSourceSchema[], key: string) =>
     type: "var" | "text";
 }[];
 declare const getCascaderOptionsFromFields: (fields?: DataSchema[], dataSourceFieldType?: DataSourceFieldType[]) => CascaderOption[];
-declare const removeDataSourceFieldPrefix: (id?: string) => string;
+declare const getFieldType: (ds: DataSourceSchema | undefined, fieldNames: string[]) => string;
 
 interface IdleTaskEvents {
     finish: [];
@@ -2480,6 +2488,7 @@ type __VLS_Props$u = {
         minRows?: number;
         maxRows?: number;
     };
+    editorCustomType?: string;
 };
 declare const __VLS_export$w: _vue_runtime_core.DefineComponent<__VLS_Props$u, {
     values: _vue_reactivity.Ref<string, string>;
@@ -3881,5 +3890,5 @@ declare const _default: {
     install: (app: App, opt?: Partial<EditorInstallOptions | DesignPluginOptions | FormInstallOptions>) => void;
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _default$8 as CodeBlockEditor, _default$j as CodeBlockList, _default$i as CodeBlockListPanel, CodeDeleteErrorType, _default$u as CodeSelect, _default$t as CodeSelectCol, ColumnLayout, _default$w as ComponentListPanel, _default$2 as CondOpSelect, _default$c as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, _default$g as DataSourceAddButton, _default$h as DataSourceConfigPanel, _default$m as DataSourceFieldSelect, _default$s as DataSourceFields, _default$p as DataSourceInput, _default$n as DataSourceMethodSelect, _default$q as DataSourceMethods, _default$r as DataSourceMocks, _default$o as DataSourceSelect, _default$3 as DisplayConds, DragType, _default$l as EventSelect, Fixed2Other, _default$7 as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _default$b as Icon, IdleTask, KeyBindingCommand, _default$k as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, _default$v as LayerPanel, Layout, _default$a as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, _default$4 as PageFragmentSelect, _default$e as PropsFormPanel, _default$f as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, _default$9 as Resizer, ScrollViewer, SideItemKey, _default$a as SplitView, _default$1 as StyleSetter, _default$x as TMagicCodeEditor, _default$y as TMagicEditor, _default$d as ToolButton, _default$6 as Tree, _default$5 as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, _default$I as codeBlockService, _default$H as dataSourceService, debug, _default as default, _default$G as depService, displayTabConfig, _default$F as editorService, eqOptions, error, eventTabConfig, _default$E as eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, _default$D as historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, _default$C as propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, _default$B as stageOverlayService, _default$A as storageService, styleTabConfig, _default$z as uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _default$8 as CodeBlockEditor, _default$j as CodeBlockList, _default$i as CodeBlockListPanel, CodeDeleteErrorType, _default$u as CodeSelect, _default$t as CodeSelectCol, ColumnLayout, _default$w as ComponentListPanel, _default$2 as CondOpSelect, _default$c as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, _default$g as DataSourceAddButton, _default$h as DataSourceConfigPanel, _default$m as DataSourceFieldSelect, _default$s as DataSourceFields, _default$p as DataSourceInput, _default$n as DataSourceMethodSelect, _default$q as DataSourceMethods, _default$r as DataSourceMocks, _default$o as DataSourceSelect, _default$3 as DisplayConds, DragType, _default$l as EventSelect, Fixed2Other, _default$7 as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _default$b as Icon, IdleTask, KeyBindingCommand, _default$k as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, _default$v as LayerPanel, Layout, _default$a as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, _default$4 as PageFragmentSelect, _default$e as PropsFormPanel, _default$f as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, _default$9 as Resizer, ScrollViewer, SideItemKey, _default$a as SplitView, _default$1 as StyleSetter, _default$x as TMagicCodeEditor, _default$y as TMagicEditor, _default$d as ToolButton, _default$6 as Tree, _default$5 as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, change2Fixed, _default$I as codeBlockService, _default$H as dataSourceService, debug, _default as default, _default$G as depService, displayTabConfig, _default$F as editorService, eqOptions, error, eventTabConfig, _default$E as eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, _default$D as historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, _default$C as propsService, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, _default$B as stageOverlayService, _default$A as storageService, styleTabConfig, _default$z as uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };
 export type { AddMNode, AddPrefixToObject, AsyncAfterHook, AsyncBeforeHook, AsyncHookPlugin, BeforeAdd, CodeBlockListPanelSlots, CodeBlockListSlots, CodeDslItem, CodeParamStatement, CodeRelation, CodeState, CombineInfo, ComponentGroup, ComponentGroupState, ComponentItem, ComponentListPanelSlots, CustomContentMenuFunction, DataSourceListSlots, DatasourceTypeOption, EditorInstallOptions, EditorNodeInfo, EditorSlots, EventBus, EventBusEvent, FrameworkSlots, GetColumnWidth, GetConfig, HistoryState, IdleTaskEvents, KeyBindingCacheItem, KeyBindingItem, LayerNodeSlots, LayerNodeStatus, LayerPanelSlots, ListState, MenuBarData, MenuButton, MenuComponent, MenuItem, PageBarSortOptions, PartSortableOptions, PastePosition, PropsFormConfigFunction, PropsFormValueFunction, PropsPanelSlots, PropsState, ScrollViewerEvent, Services, SetColumnWidth, SideBarData, SideComponent, SideItem, SidebarSlots, StageOptions, StageOverlayState, StageRect, StepValue, StoreState, StoreStateKey, SyncAfterHook, SyncBeforeHook, SyncHookPlugin, TreeNodeData, UiState, WorkspaceSlots };