style(editor): 代码块编辑中代码编辑器高度自动设置保持表单不出现滚动条

packages/editor/src/components/CodeBlockEditor.vue

@@ -9,6 +9,7 @@
     :disabled="disabled"
     @submit="submitForm"
     @error="errorHandler"
+    @open="openHandler"
   ></MFormDrawer>
 </template>
 
@@ -37,7 +38,10 @@ const emit = defineEmits<{
 
 const services = inject<Services>('services');
 
-const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+const columnWidth = computed(() => services?.uiService.get('columnWidth'));
+const size = computed(() => (columnWidth.value ? columnWidth.value.center + columnWidth.value.right : 600));
+
+const codeEditorHeight = ref('600px');
 
 const defaultParamColConfig: ColumnConfig = {
   type: 'row',
@@ -104,6 +108,7 @@ const functionConfig = computed(() => [
     name: 'content',
     type: 'vs-code',
     options: inject('codeOptions', {}),
+    height: codeEditorHeight.value,
     onChange: (formState: FormState | undefined, code: string) => {
       try {
         // 检测js代码是否存在语法错误
@@ -129,6 +134,15 @@ const errorHandler = (error: any) => {
 
 const fomDrawer = ref<InstanceType<typeof MFormDrawer>>();
 
+const openHandler = () => {
+  setTimeout(() => {
+    if (fomDrawer.value) {
+      const height = fomDrawer.value?.bodyHeight - 468;
+      codeEditorHeight.value = `${height > 100 ? height : 600}px`;
+    }
+  });
+};
+
 defineExpose({
   show() {
     fomDrawer.value?.show();

packages/editor/src/fields/Code.vue

@@ -1,8 +1,8 @@
 <template>
   <MagicCodeEditor
-    :height="height"
+    :height="config.height"
     :init-values="model[name]"
-    :language="language"
+    :language="config.language"
     :options="{
       ...config.options,
       readOnly: disabled,
@@ -12,8 +12,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
 defineOptions({
@@ -41,9 +39,6 @@ const props = withDefaults(
   },
 );
 
-const language = computed(() => props.config.language || 'javascript');
-const height = computed(() => props.config.height || `${document.body.clientHeight - 168}px`);
-
 const save = (v: string) => {
   props.model[props.name] = v;
   emit('change', v);

packages/editor/src/index.ts

@@ -62,6 +62,7 @@ export { default as DataSourceMethodSelect } from './fields/DataSourceMethodSele
 export { default as EventSelect } from './fields/EventSelect.vue';
 export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
+export { default as CodeBlockListPanel } from './layouts/sidebar/code-block/CodeBlockListPanel.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';

packages/editor/src/layouts/CodeEditor.vue

@@ -3,7 +3,7 @@
     <Teleport to="body" :disabled="!fullScreen">
       <div
         :class="`magic-code-editor-wrapper${fullScreen ? ' full-screen' : ''}`"
-        :style="!fullScreen && height ? `height: ${height}` : ''"
+        :style="!fullScreen && height ? `height: ${height}` : '100%'"
       >
         <TMagicButton
           class="magic-code-editor-full-screen-icon"

packages/editor/src/layouts/Framework.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor">
+  <div class="m-editor" ref="content">
     <slot name="header"></slot>
 
     <slot name="nav"></slot>
@@ -67,6 +67,8 @@ const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
+const content = ref<HTMLDivElement>();
+
 const root = computed(() => editorService?.get('root'));
 
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
@@ -91,13 +93,15 @@ watch(
 
     columnWidth.value.left = left;
 
+    const container = content.value || document.body;
+
     if (length <= 0) {
       columnWidth.value.right = undefined;
-      columnWidth.value.center = globalThis.document.body.clientWidth - left;
+      columnWidth.value.center = container.clientWidth - left;
     } else {
       const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
       columnWidth.value.right = right;
-      columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
+      columnWidth.value.center = container.clientWidth - left - right;
     }
 
     uiService?.set('columnWidth', columnWidth.value as GetColumnWidth);

packages/form/src/FormDrawer.vue

@@ -9,12 +9,10 @@
     :close-on-click-modal="true"
     :size="width"
     :zIndex="zIndex"
+    @open="openHandler"
+    @opened="openedHandler"
   >
-    <div
+    <div v-if="visible" ref="drawerBody" class="m-drawer-body">
-      v-if="visible"
-      class="m-drawer-body"
-      :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`"
-    >
       <Form
         ref="form"
         :size="size"
@@ -47,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watchEffect } from 'vue';
 
 import { TMagicButton, TMagicCol, TMagicDrawer, TMagicRow } from '@tmagic/design';
 
@@ -78,12 +76,19 @@ withDefaults(
   },
 );
 
-const emit = defineEmits(['close', 'submit', 'error', 'change']);
+const emit = defineEmits(['close', 'submit', 'error', 'change', 'open', 'opened']);
 
 const form = ref<InstanceType<typeof Form>>();
+const drawerBody = ref<HTMLDivElement>();
 const visible = ref(false);
 const saveFetch = ref(false);
-const bodyHeight = ref(`${document.body.clientHeight - 194}px`);
+const bodyHeight = ref(0);
+
+watchEffect(() => {
+  if (drawerBody.value) {
+    bodyHeight.value = drawerBody.value.clientHeight;
+  }
+});
 
 const submitHandler = async () => {
   try {
@@ -98,6 +103,14 @@ const changeHandler = (value: any) => {
   emit('change', value);
 };
 
+const openHandler = (value: any) => {
+  emit('open', value);
+};
+
+const openedHandler = (value: any) => {
+  emit('opened', value);
+};
+
 const show = () => {
   visible.value = true;
 };
@@ -109,6 +122,7 @@ const hide = () => {
 defineExpose({
   form,
   saveFetch,
+  bodyHeight,
 
   show,
   hide,

packages/form/src/theme/form-drawer.scss

@@ -2,4 +2,10 @@
   .el-drawer__header {
     margin: 0;
   }
+
+  .m-drawer-body {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
 }