fix(embed): adapt toolbar and canvas sizing inside modal

src/YysEditorEmbed.vue

@@ -16,14 +16,14 @@
       />
 
       <!-- 主内容区 -->
-      <div class="editor-content" :style="{ height: contentHeight }">
+      <div class="editor-content">
         <!-- 左侧组件库 -->
         <ComponentsPanel v-if="showComponentPanel" />
 
         <!-- 中间画布 + 右侧属性面板 -->
         <FlowEditor
           ref="flowEditorRef"
-          :height="contentHeight"
+          height="100%"
         />
       </div>
     </template>
@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { createPinia, setActivePinia } from 'pinia'
 import LogicFlow from '@logicflow/core'
 import '@logicflow/core/lib/style/index.css'
@@ -151,14 +151,11 @@ const containerHeight = computed(() => {
   return typeof props.height === 'number' ? `${props.height}px` : props.height
 })
 
-const contentHeight = computed(() => {
+const triggerEditorResize = () => {
-  if (props.showToolbar) {
+  nextTick(() => {
-    const toolbarHeight = 48
+    (flowEditorRef.value as any)?.resizeCanvas?.()
-    const totalHeight = typeof props.height === 'number' ? props.height : 600
-    return `${totalHeight - toolbarHeight}px`
-  }
-  return containerHeight.value
   })
+}
 
 const destroyPreviewMode = () => {
   if (previewLf.value) {
@@ -243,7 +240,8 @@ const setGraphData = (data: GraphData) => {
 
 defineExpose({
   getGraphData,
-  setGraphData
+  setGraphData,
+  resizeCanvas: triggerEditorResize
 })
 
 // 监听 data 变化
@@ -262,6 +260,7 @@ watch(() => props.mode, (newMode) => {
     }, 100)
   } else {
     destroyPreviewMode()
+    triggerEditorResize()
   }
 })
 
@@ -277,17 +276,28 @@ watch(
   { deep: true }
 )
 
+watch(
+  [() => props.width, () => props.height, () => props.showToolbar, () => props.showComponentPanel],
+  () => {
+    if (props.mode === 'edit') {
+      triggerEditorResize()
+    }
+  }
+)
+
 // 初始化
 onMounted(() => {
   if (props.mode === 'preview') {
     initPreviewMode()
   } else if (props.mode === 'edit') {
+    triggerEditorResize()
     // 编辑模式由 FlowEditor 组件初始化
     // 等待 FlowEditor 初始化完成后加载数据
     setTimeout(() => {
       if (props.data) {
         setGraphData(props.data)
       }
+      triggerEditorResize()
     }, 500)
   }
 })
@@ -311,6 +321,7 @@ onBeforeUnmount(() => {
 .editor-content {
   display: flex;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
 }
 

src/components/Toolbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toolbar">
+  <div class="toolbar" :class="{ 'toolbar--embed': props.isEmbed }">
     <div>
       <el-button icon="Upload" type="primary" @click="handleImport">{{ t('import') }}</el-button>
       <el-button icon="Download" type="primary" @click="handleExport">{{ t('export') }}</el-button>
@@ -486,6 +486,13 @@ const handleClose = (done) => {
   z-index: 100;
 }
 
+.toolbar--embed {
+  position: relative;
+  top: auto;
+  left: auto;
+  right: auto;
+}
+
 .toolbar-controls {
   display: flex;
   align-items: center;

src/components/flow/FlowEditor.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import LogicFlow, { EventType } from '@logicflow/core';
 import type { Position, NodeData, EdgeData, BaseNodeModel, GraphModel, GraphData } from '@logicflow/core';
 import '@logicflow/core/lib/style/index.css';
@@ -116,6 +116,23 @@ const selectedNode = ref<any>(null);
 const copyBuffer = ref<GraphData | null>(null);
 let nextPasteDistance = COPY_TRANSLATION;
 
+const resizeCanvas = () => {
+  const lfInstance = lf.value as any;
+  const container = containerRef.value;
+  if (!lfInstance || !container || typeof lfInstance.resize !== 'function') {
+    return;
+  }
+  const width = container.clientWidth;
+  const height = container.clientHeight;
+  if (width > 0 && height > 0) {
+    lfInstance.resize(width, height);
+  }
+};
+
+const handleWindowResize = () => {
+  resizeCanvas();
+};
+
 function isInputLike(event?: KeyboardEvent) {
   const target = event?.target as HTMLElement | null;
   if (!target) return false;
@@ -969,6 +986,11 @@ onMounted(() => {
 
   lfInstance.on('selection:selected', () => updateSelectedCount());
   lfInstance.on('selection:drop', () => updateSelectedCount());
+
+  nextTick(() => {
+    resizeCanvas();
+  });
+  window.addEventListener('resize', handleWindowResize);
 });
 
 watch(selectionEnabled, (enabled) => {
@@ -987,8 +1009,22 @@ watch(snaplineEnabled, (enabled) => {
   }
 });
 
+watch(
+  () => props.height,
+  () => {
+    nextTick(() => {
+      resizeCanvas();
+    });
+  }
+);
+
+defineExpose({
+  resizeCanvas
+});
+
 // 销毁 LogicFlow
 onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleWindowResize);
   lf.value?.destroy();
   lf.value = null;
   destroyLogicFlowInstance();