feat(editor): 优化代码块编辑弹窗

packages/editor/src/components/CodeBlockEditor.vue

@@ -1,8 +1,15 @@
 <template>
   <!-- 代码块编辑区 -->
-  <FloatingBox v-model:visible="boxVisible" title="代码编辑" :position="boxPosition" :before-close="beforeClose">
+  <FloatingBox
+    v-model:visible="boxVisible"
+    v-model:width="width"
+    v-model:height="codeBlockEditorHeight"
+    :title="content.name ? `${disabled ? '查看' : '编辑'}${content.name}` : '新增代码'"
+    :position="boxPosition"
+    :before-close="beforeClose"
+  >
     <template #body>
-      <div ref="floatingBoxBody"></div>
+      <div ref="floatingBoxBody" style="height: 100%"></div>
     </template>
   </FloatingBox>
 
@@ -13,18 +20,17 @@
       label-width="80px"
       :close-on-press-escape="false"
       :title="content.name"
-      :width="size"
       :config="functionConfig"
       :values="content"
       :disabled="disabled"
+      :height="floatingBoxBody?.clientHeight"
       @change="changeHandler"
       @submit="submitForm"
       @error="errorHandler"
-      @open="openHandler"
       @closed="closedHandler"
     >
       <template #left>
-        <TMagicButton type="primary" link @click="difVisible = true">查看修改</TMagicButton>
+        <TMagicButton v-if="!disabled" type="primary" link @click="difVisible = true">查看修改</TMagicButton>
       </template>
     </MFormBox>
   </Teleport>
@@ -42,7 +48,7 @@
       language="json"
       :initValues="content.content"
       :modifiedValues="formBox?.form?.values.content"
-      :style="`height: ${height - 200}px`"
+      :style="`height: ${windowRect.height - 150}px`"
     ></CodeEditor>
 
     <template #footer>
@@ -55,13 +61,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, nextTick, onBeforeUnmount, ref } from 'vue';
+import { computed, inject, nextTick, ref } from 'vue';
 
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
 import { ColumnConfig, FormConfig, FormState, MFormBox } from '@tmagic/form';
 import type { CodeBlockContent } from '@tmagic/schema';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
+import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
+import { useWindowRect } from '@editor/hooks/use-window-rect';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
 import type { Services, SlideType } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
@@ -70,6 +78,9 @@ defineOptions({
   name: 'MEditorCodeBlockEditor',
 });
 
+const width = defineModel<number>('width', { default: 670 });
+const boxVisible = defineModel<boolean>('visible', { default: false });
+
 const props = defineProps<{
   content: CodeBlockContent;
   disabled?: boolean;
@@ -84,18 +95,10 @@ const emit = defineEmits<{
 
 const services = inject<Services>('services');
 
+const { height: codeBlockEditorHeight } = useEditorContentHeight();
+
 const difVisible = ref(false);
-const height = ref(globalThis.innerHeight);
-
-const windowResizeHandler = () => {
-  height.value = globalThis.innerHeight;
-};
-
-globalThis.addEventListener('resize', windowResizeHandler);
-
-onBeforeUnmount(() => {
-  globalThis.removeEventListener('resize', windowResizeHandler);
-});
+const { rect: windowRect } = useWindowRect();
 
 const magicVsEditor = ref<InstanceType<typeof CodeEditor>>();
 
@@ -109,13 +112,6 @@ const diffChange = () => {
   difVisible.value = false;
 };
 
-const columnWidth = computed(() => services?.uiService.get('columnWidth'));
-const size = computed(() =>
-  columnWidth.value ? columnWidth.value.center + columnWidth.value.right - (props.isDataSource ? 100 : 0) : 600,
-);
-
-const codeEditorHeight = ref('600px');
-
 const defaultParamColConfig: ColumnConfig = {
   type: 'row',
   label: '参数类型',
@@ -199,7 +195,7 @@ const functionConfig = computed<FormConfig>(() => [
     name: 'content',
     type: 'vs-code',
     options: inject('codeOptions', {}),
-    height: codeEditorHeight.value,
+    height: '500px',
     onChange: (formState: FormState | undefined, code: string) => {
       try {
         // 检测js代码是否存在语法错误
@@ -226,15 +222,6 @@ const errorHandler = (error: any) => {
 
 const formBox = ref<InstanceType<typeof MFormBox>>();
 
-const openHandler = () => {
-  setTimeout(() => {
-    if (formBox.value) {
-      const height = formBox.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0);
-      codeEditorHeight.value = `${height > 100 ? height : 600}px`;
-    }
-  });
-};
-
 const changedValue = ref<CodeBlockContent>();
 const changeHandler = (values: CodeBlockContent) => {
   changedValue.value = values;
@@ -270,7 +257,6 @@ const closedHandler = () => {
   changedValue.value = undefined;
 };
 
-const boxVisible = ref<boolean>(false);
 const editVisible = ref<boolean>(false);
 const floatingBoxBody = ref<HTMLDivElement>();
 

packages/editor/src/components/FloatingBox.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body" v-if="visible">
     <div ref="target" class="m-editor-float-box" :style="{ ...style, zIndex: curZIndex }" @mousedown="nextZIndex">
-      <div ref="dragTarget" class="m-editor-float-box-title">
+      <div ref="titleEl" class="m-editor-float-box-title">
         <slot name="title">
           <span>{{ title }}</span>
         </slot>
@@ -9,7 +9,7 @@
           <TMagicButton link size="small" :icon="Close" @click="closeHandler"></TMagicButton>
         </div>
       </div>
-      <div class="m-editor-float-box-body">
+      <div class="m-editor-float-box-body" :style="{ height: `${bodyHeight}px` }">
         <slot name="body"></slot>
       </div>
     </div>
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
@@ -28,54 +28,46 @@ interface Position {
   top: number;
 }
 
-interface Rect {
-  width: number | string;
-  height: number | string;
-}
+const width = defineModel<number>('width', { default: 0 });
+const height = defineModel<number>('height', { default: 0 });
+const visible = defineModel<boolean>('visible', { default: false });
 
 const props = withDefaults(
   defineProps<{
-    visible: boolean;
     position?: Position;
-    rect?: Rect;
     title?: string;
     beforeClose?: (done: (cancel?: boolean) => void) => void;
   }>(),
   {
-    visible: false,
     title: '',
     position: () => ({ left: 0, top: 0 }),
-    rect: () => ({ width: 'auto', height: 'auto' }),
   },
 );
 
-const emit = defineEmits<{
-  'update:visible': [boolean];
-}>();
-
 const target = ref<HTMLDivElement>();
-const dragTarget = ref<HTMLDivElement>();
+const titleEl = ref<HTMLDivElement>();
 
 const zIndex = useZIndex();
 const curZIndex = ref<number>(zIndex.nextZIndex());
 
-const rect = ref({
-  width: props.rect.width,
-  height: props.rect.height,
-});
+const titleHeight = ref(0);
+const bodyHeight = computed(() => {
+  if (height.value) {
+    return height.value - titleHeight.value;
+  }
 
-watchEffect(() => {
-  rect.value = {
-    width: props.rect.width,
-    height: props.rect.height,
-  };
+  if (target.value) {
+    return target.value.clientHeight - titleHeight.value;
+  }
+
+  return 'auto';
 });
 
 const style = computed(() => ({
   left: `${props.position.left}px`,
   top: `${props.position.top}px`,
-  width: typeof rect.value.width === 'string' ? rect.value.width : `${rect.value.width}px`,
-  height: typeof rect.value.height === 'string' ? rect.value.height : `${rect.value.height}px`,
+  width: width.value ? `${width.value}px` : 'auto',
+  height: height.value ? `${height.value}px` : 'auto',
 }));
 
 let moveable: VanillaMoveable | null = null;
@@ -90,7 +82,7 @@ const initMoveable = () => {
     keepRatio: false,
     origin: false,
     snappable: true,
-    dragTarget: dragTarget.value,
+    dragTarget: titleEl.value,
     dragTargetSelf: false,
     linePadding: 10,
     controlPadding: 10,
@@ -98,12 +90,14 @@ const initMoveable = () => {
   });
 
   moveable.on('drag', (e) => {
+    width.value = e.width;
+    height.value = e.height;
     e.target.style.transform = e.transform;
   });
 
   moveable.on('resize', (e) => {
-    rect.value.width = e.width;
-    rect.value.height = e.height;
+    width.value = e.width;
+    height.value = e.height;
     e.target.style.width = `${e.width}px`;
     e.target.style.height = `${e.height}px`;
     e.target.style.transform = e.drag.transform;
@@ -116,11 +110,22 @@ const destroyMoveable = () => {
 };
 
 watch(
-  () => props.visible,
+  visible,
   async (visible) => {
     if (visible) {
       await nextTick();
-      initMoveable();
+
+      const targetRect = target.value?.getBoundingClientRect();
+      if (targetRect) {
+        width.value = targetRect.width;
+        height.value = targetRect.height;
+        initMoveable();
+      }
+
+      if (titleEl.value) {
+        const titleRect = titleEl.value.getBoundingClientRect();
+        titleHeight.value = titleRect.height;
+      }
     } else {
       destroyMoveable();
     }
@@ -136,7 +141,7 @@ onBeforeUnmount(() => {
 
 const hide = (cancel?: boolean) => {
   if (cancel !== false) {
-    emit('update:visible', false);
+    visible.value = false;
   }
 };
 
@@ -153,6 +158,8 @@ const nextZIndex = () => {
 };
 
 defineExpose({
+  bodyHeight,
   target,
+  titleEl,
 });
 </script>

packages/editor/src/hooks/index.ts

@@ -20,3 +20,5 @@ export * from './use-code-block-edit';
 export * from './use-data-source-method';
 export * from './use-stage';
 export * from './use-float-box';
+export * from './use-window-rect';
+export * from './use-editor-content-height';

packages/editor/src/hooks/use-code-block-edit.ts

@@ -20,7 +20,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
     }
 
     codeConfig.value = {
-      name: '代码块',
+      name: '',
       content: `({app, params}) => {\n  // place your code here\n}`,
       params: [],
     };

packages/editor/src/hooks/use-editor-content-height.ts

@@ -0,0 +1,20 @@
+import { computed, inject, ref, watchEffect } from 'vue';
+
+import type { Services } from '@editor/type';
+
+export const useEditorContentHeight = () => {
+  const services = inject<Services>('services');
+  const frameworkHeight = computed(() => services?.uiService.get('frameworkRect').height || 0);
+  const navMenuHeight = computed(() => services?.uiService.get('navMenuRect').height || 0);
+  const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
+
+  const height = ref(0);
+  watchEffect(() => {
+    if (height.value > 0) return;
+    height.value = editorContentHeight.value;
+  });
+
+  return {
+    height,
+  };
+};

packages/editor/src/hooks/use-float-box.ts

@@ -26,34 +26,34 @@ export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
   const showingBoxKeys = computed(() =>
     Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status),
   );
-  const isDraging = ref(false);
+  const isDragging = ref(false);
 
-  const dragstartHandler = () => (isDraging.value = true);
+  const dragstartHandler = () => (isDragging.value = true);
   const dragendHandler = (key: string, e: DragEvent) => {
     floatBoxStates.value[key] = {
       left: e.clientX,
       top: e.clientY,
       status: true,
     };
-    isDraging.value = false;
+    isDragging.value = false;
   };
 
   document.body.addEventListener('dragover', (e: DragEvent) => {
-    if (!isDraging.value) return;
+    if (!isDragging.value) return;
     e.preventDefault();
   });
 
   watch(
     () => slideKeys.value,
-    () => {
-      for (const key in slideKeys.value) {
-        if (floatBoxStates.value[key]) continue;
+    (slideKeys) => {
+      slideKeys.forEach((key) => {
+        if (floatBoxStates.value[key]) return;
         floatBoxStates.value[key] = {
           status: false,
           top: 0,
           left: 0,
         };
-      }
+      });
     },
     {
       deep: true,

packages/editor/src/hooks/use-window-rect.ts

@@ -0,0 +1,20 @@
+import { onBeforeUnmount, reactive } from 'vue';
+
+export const useWindowRect = () => {
+  const rect = reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
+
+  const windowResizeHandler = () => {
+    rect.width = globalThis.innerWidth;
+    rect.height = globalThis.innerHeight;
+  };
+
+  globalThis.addEventListener('resize', windowResizeHandler);
+
+  onBeforeUnmount(() => {
+    globalThis.removeEventListener('resize', windowResizeHandler);
+  });
+
+  return {
+    rect,
+  };
+};

packages/editor/src/layouts/sidebar/Sidebar.vue

@@ -111,6 +111,8 @@
         :key="config.$key ?? index"
         v-if="floatBoxStates[config.$key]?.status"
         v-model:visible="floatBoxStates[config.$key].status"
+        :width="columnLeftWitch"
+        :height="600"
         :title="config.text"
         :position="{
           left: floatBoxStates[config.$key].left,
@@ -139,14 +141,15 @@ import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import MIcon from '@editor/components/Icon.vue';
 import { useFloatBox } from '@editor/hooks/use-float-box';
-import type {
-  MenuButton,
-  MenuComponent,
-  Services,
-  SideBarData,
-  SidebarSlots,
-  SideComponent,
-  SideItem,
+import {
+  ColumnLayout,
+  type MenuButton,
+  type MenuComponent,
+  type Services,
+  type SideBarData,
+  type SidebarSlots,
+  type SideComponent,
+  type SideItem,
 } from '@editor/type';
 
 import CodeBlockListPanel from './code-block/CodeBlockListPanel.vue';
@@ -173,6 +176,8 @@ const props = withDefaults(
 
 const services = inject<Services>('services');
 
+const columnLeftWitch = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
+
 const activeTabName = ref(props.data?.status);
 
 const getItemConfig = (data: SideItem): SideComponent => {

packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -2,6 +2,7 @@
   <TMagicTooltip v-if="page && buttonVisible" content="点击查看当前位置下的组件">
     <div ref="button" class="m-editor-stage-float-button" @click="visible = true">可选组件</div>
   </TMagicTooltip>
+
   <FloatingBox
     v-if="page && nodeStatusMap && buttonVisible"
     ref="box"

packages/editor/src/theme/code-block.scss

@@ -17,9 +17,4 @@
   .el-drawer__body {
     padding: 10px 20px;
   }
-
-  &.m-form-box {
-    width: 100%;
-    min-width: 872px;
-  }
 }

packages/editor/src/theme/floating-box.scss

@@ -21,9 +21,9 @@
   }
 
   .m-editor-float-box-body {
-    padding: 5px;
-    flex: 1;
     overflow: auto;
+    flex: 1;
+    padding: 0 16px;
   }
 }
 

packages/editor/src/type.ts

@@ -246,6 +246,12 @@ export interface UiState {
     width: number;
     height: number;
   };
+  frameworkRect: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  };
 }
 
 export interface EditorNodeInfo {

packages/form/src/FormBox.vue

@@ -1,56 +1,57 @@
 <template>
-  <div class="m-form-box">
-    <div ref="boxBody" class="m-box-body">
-      <Form
-        ref="form"
-        :size="size"
-        :disabled="disabled"
-        :config="config"
-        :init-values="values"
-        :parent-values="parentValues"
-        :label-width="labelWidth"
-        :label-position="labelPosition"
-        :inline="inline"
-        @change="changeHandler"
-      ></Form>
-      <slot></slot>
+  <div class="m-form-box" :style="style">
+    <div class="m-box-body" :style="bodyHeight ? { height: `${bodyHeight}px` } : {}">
+      <TMagicScrollbar>
+        <Form
+          ref="form"
+          :size="size"
+          :disabled="disabled"
+          :config="config"
+          :init-values="values"
+          :parent-values="parentValues"
+          :label-width="labelWidth"
+          :label-position="labelPosition"
+          :inline="inline"
+          @change="changeHandler"
+        ></Form>
+        <slot></slot>
+      </TMagicScrollbar>
     </div>
 
-    <TMagicRow class="dialog-footer">
-      <TMagicCol :span="12" style="text-align: left">
-        <div style="min-height: 1px">
-          <slot name="left"></slot>
-        </div>
-      </TMagicCol>
-      <TMagicCol :span="12">
+    <div class="dialog-footer" :style="`height: ${footerHeight}px`">
+      <div>
+        <slot name="left"></slot>
+      </div>
+      <div>
         <slot name="footer">
-          <TMagicButton type="primary" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
+          <TMagicButton type="primary" :size="size" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
             confirmText
           }}</TMagicButton>
         </slot>
-      </TMagicCol>
-    </TMagicRow>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 
-import { TMagicButton, TMagicCol, TMagicRow } from '@tmagic/design';
+import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
 
 import Form from './Form.vue';
 import type { FormConfig } from './schema';
 
 defineOptions({
-  name: 'MFormDialog',
+  name: 'MFormBox',
 });
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     config?: FormConfig;
     values?: Object;
     parentValues?: Object;
-    width?: string | number;
+    width?: number;
+    height?: number;
     labelWidth?: string;
     disabled?: boolean;
     size?: 'small' | 'default' | 'large';
@@ -67,15 +68,29 @@ withDefaults(
 
 const emit = defineEmits(['submit', 'change', 'error']);
 
+const footerHeight = 60;
+
+const style = computed(() => {
+  const style: { width?: string; height?: string } = {};
+  if (typeof props.width === 'number') {
+    style.width = `${props.width}px`;
+  }
+  if (typeof props.height === 'number') {
+    style.height = `${props.height}px`;
+  }
+  return style;
+});
+
 const form = ref<InstanceType<typeof Form>>();
-const boxBody = ref<HTMLDivElement>();
 const saveFetch = ref(false);
+
 const bodyHeight = ref(0);
 
 watchEffect(() => {
-  if (boxBody.value) {
-    bodyHeight.value = boxBody.value.clientHeight;
+  if (!props.height) {
+    return;
   }
+  bodyHeight.value = props.height - footerHeight;
 });
 
 const submitHandler = async () => {
@@ -98,7 +113,6 @@ const hide = () => {};
 defineExpose({
   form,
   saveFetch,
-  bodyHeight,
 
   show,
   hide,

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

@@ -1,18 +1,13 @@
 .m-form-box {
   display: flex;
   flex-direction: column;
-  padding: 16px;
-  box-sizing: border-box;
   .el-box__header {
     margin: 0;
   }
 
-  .m-box-body {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
   .dialog-footer {
-    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 }