fix: 编辑审批流溢出问题

src/views/flow/designer/DesignerCanvas.vue

@@ -90,6 +90,8 @@ function handleDragStart(e: DragEvent, node: any) {
 }
 .node-panel {
   width: 200px;
+  flex-shrink: 0;
+  box-sizing: border-box;
   border-right: 1px solid #dcdfe6;
   padding: 16px;
   background: #fafafa;
@@ -131,6 +133,7 @@ function handleDragStart(e: DragEvent, node: any) {
 }
 .canvas-area {
   flex: 1;
+  min-width: 0;
   position: relative;
   background: #f5f7fa;
   overflow: hidden;

src/views/flow/designer/DesignerPropertyPanel.vue

@@ -476,6 +476,8 @@ function handleDragEnd() {
 }
 .property-panel {
   width: 300px;
+  flex-shrink: 0;
+  box-sizing: border-box;
   border-left: 1px solid #dcdfe6;
   padding: 16px;
   background: #fafafa;

src/views/flow/designer/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="designer-container">
-    <!-- 流程信息栏（新增/编辑模式显示） -->
+  <div class="designer-container" :class="{ 'is-embedded': embedded }">
+    <!-- 流程信息栏（新增/编辑模式显示）：放在正常流里，内嵌时不再用绝对定位压住画布工具栏 -->
     <div v-if="flowInfoVisible" class="flow-info-bar">
       <el-tag v-if="mode === 'create'" type="primary">新增流程</el-tag>
       <el-tag v-else-if="mode === 'edit'" type="warning">编辑流程</el-tag>
@@ -9,41 +9,43 @@
       <span v-if="flowCategory" class="flow-info-item"><strong>分类：</strong>{{ flowCategory }}</span>
     </div>
 
-    <DesignerCanvas
-      :set-container="setContainer"
-      :lf="lfRef"
-      :selected-node="selectedNode"
-      :node-props="nodeProps"
-      :role-list="roleList"
-      :selected-sub-node-index="selectedSubNodeIndex"
-      :drawer-visible="drawerVisible"
-      @drop="handleDrop"
-      @save="handleSave"
-      @clear="handleClear"
-      @back="goBack"
-      @update:drawer-visible="drawerVisible = $event"
-      @select-sub-node="selectedSubNodeIndex = $event; drawerVisible = true"
-      @add-sub-node="addSubNodeFromCanvas"
-      @remove-sub-node="removeSubNodeFromCanvas"
-    />
+    <div class="designer-body">
+      <DesignerCanvas
+        :set-container="setContainer"
+        :lf="lfRef"
+        :selected-node="selectedNode"
+        :node-props="nodeProps"
+        :role-list="roleList"
+        :selected-sub-node-index="selectedSubNodeIndex"
+        :drawer-visible="drawerVisible"
+        @drop="handleDrop"
+        @save="handleSave"
+        @clear="handleClear"
+        @back="goBack"
+        @update:drawer-visible="drawerVisible = $event"
+        @select-sub-node="selectedSubNodeIndex = $event; drawerVisible = true"
+        @add-sub-node="addSubNodeFromCanvas"
+        @remove-sub-node="removeSubNodeFromCanvas"
+      />
 
-    <DesignerPropertyPanel
-      :selected-node="selectedNode"
-      :node-props="nodeProps"
-      :outgoing-edges="outgoingEdges"
-      :role-list="roleList"
-      :get-edge-target-name="getEdgeTargetName"
-      :update-node-name="updateNodeName"
-      :on-default-change="onDefaultChange"
-      :on-branch-blur="onBranchBlur"
-      :generate-sub-node-id="generateSubNodeId"
-      :save-current-node-props="saveCurrentNodeProps"
-      :selected-sub-node-index="selectedSubNodeIndex"
-      :drawer-visible="drawerVisible"
-      @update:selected-sub-node-index="selectedSubNodeIndex = $event"
-      @update:drawer-visible="drawerVisible = $event"
-      @delete-node="deleteSelectedNode"
-    />
+      <DesignerPropertyPanel
+        :selected-node="selectedNode"
+        :node-props="nodeProps"
+        :outgoing-edges="outgoingEdges"
+        :role-list="roleList"
+        :get-edge-target-name="getEdgeTargetName"
+        :update-node-name="updateNodeName"
+        :on-default-change="onDefaultChange"
+        :on-branch-blur="onBranchBlur"
+        :generate-sub-node-id="generateSubNodeId"
+        :save-current-node-props="saveCurrentNodeProps"
+        :selected-sub-node-index="selectedSubNodeIndex"
+        :drawer-visible="drawerVisible"
+        @update:selected-sub-node-index="selectedSubNodeIndex = $event"
+        @update:drawer-visible="drawerVisible = $event"
+        @delete-node="deleteSelectedNode"
+      />
+    </div>
 
     <DesignerSaveDialog
       :visible="saveDialogVisible"
@@ -70,6 +72,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import type { ComponentPublicInstance } from 'vue'
+import { isEmbedded } from '@/utils/auth'
 import { useFlowDesigner } from './useFlowDesigner'
 import DesignerCanvas from './DesignerCanvas.vue'
 import DesignerPropertyPanel from './DesignerPropertyPanel.vue'
@@ -123,6 +126,8 @@ const {
 
 const selectedSubNodeIndex = ref<number | null>(null)
 const drawerVisible = ref(false)
+// 被 SCRM 等宿主 iframe 内嵌时，顶部导航和左侧菜单都被隐藏，高度计算要去掉 Navbar
+const embedded = new URLSearchParams(window.location.search).get('embed') === '1' || isEmbedded()
 
 function addSubNodeFromCanvas() {
   if (!Array.isArray(nodeProps.subNodes)) {
@@ -170,25 +175,37 @@ watch(
 <style scoped>
 .designer-container {
   display: flex;
+  flex-direction: column;
+  /* Navbar 60px + el-main 上下 padding 40px */
   height: calc(100vh - 100px);
+  min-height: 0;
+  overflow: hidden;
   background: #fff;
+  box-sizing: border-box;
+}
+/* 内嵌时 Navbar 被隐藏，只剩 el-main 的上下 padding */
+.designer-container.is-embedded {
+  height: calc(100vh - 40px);
 }
 .flow-info-bar {
-  position: absolute;
-  top: 60px;
-  left: 220px;
-  right: 0;
-  height: 40px;
+  flex: 0 0 40px;
   background: #f0f9ff;
   border-bottom: 1px solid #d9ecff;
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 0 16px;
-  z-index: 100;
+  box-sizing: border-box;
 }
 .flow-info-item {
   font-size: 13px;
   color: #303133;
 }
+.designer-body {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  overflow: hidden;
+}
 </style>