feat(editor): customCreateMonacoEditor options中新增editorCustomType,可以用于创建不同的editor

packages/editor/src/fields/Code.vue

@@ -9,6 +9,7 @@
     }"
     :autosize="config.autosize"
     :parse="config.parse"
+    :editor-custom-type="config.mFormItemType"
     @save="save"
   ></MagicCodeEditor>
 </template>

packages/editor/src/fields/DataSourceFields.vue

@@ -234,6 +234,7 @@ const dataSourceFieldsConfig: FormConfig = [
     name: 'defaultValue',
     text: '默认值',
     parse: true,
+    mFormItemType: 'data-source-field-defaultValue',
     type: (mForm: FormState | undefined, { model }: any) => {
       if (model.type === 'number') return 'number';
       if (model.type === 'boolean') return 'select';

packages/editor/src/fields/KeyValue.vue

@@ -37,8 +37,9 @@
 
     <MagicCodeEditor
       v-if="config.advanced && showCode"
-      :init-values="model[name]"
+      editor-custom-type="m-fields-key-value"
       language="javascript"
+      :init-values="model[name]"
       :options="{
         readOnly: disabled,
       }"

packages/editor/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);

packages/editor/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

packages/editor/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"

packages/editor/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;
 }

packages/form-schema/src/editor.ts

@@ -43,6 +43,7 @@ export interface CodeConfig extends FormItem {
     minRows?: number;
     maxRows?: number;
   };
+  mFormItemType?: string;
 }
 
 export interface CodeLinkConfig extends FormItem {