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

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();