fix: 调整节点视图自动适配行为

修改 VueFlow 初始适配视图为 false,改为手动控制适配
优化根节点添加时的视图适配,增加缩放效果
调整子节点适配逻辑,包含所有子节点并允许更大缩放
This commit is contained in:
liuziting
2026-01-22 13:12:36 +08:00
parent a66dc9b42d
commit 407f884e84
2 changed files with 10 additions and 4 deletions

View File

@@ -156,7 +156,7 @@ const fitToView = () => {
<div class="flex-grow relative">
<VueFlow
:default-edge-options="{ type: config.edgeType }"
:fit-view-on-init="true"
:fit-view-on-init="false"
class="bg-white"
:class="{ 'space-pressed': isSpacePressed }"
:pan-on-drag="panOnDrag"

View File

@@ -920,6 +920,11 @@ export function useThinkFlow({ t, locale }: { t: Translate; locale: Ref<string>
targetPosition: Position.Left
})
// 初始添加根节点时进行一次较大的缩放,突出根节点
setTimeout(() => {
fitView({ nodes: [rootId], padding: 0.4, duration: 600, maxZoom: 1.2 })
}, 50)
ideaInput.value = ''
} else {
const node = flowNodes.value.find(n => n.id === parentNode.id)
@@ -990,12 +995,13 @@ export function useThinkFlow({ t, locale }: { t: Translate; locale: Ref<string>
const childEdges = flowEdges.value.filter(e => e.source === currentParentId)
const childIds = childEdges.map(e => e.target)
const nodesToFit = [currentParentId, ...childIds.slice(0, 3)]
const nodesToFit = [currentParentId, ...childIds]
fitView({
nodes: nodesToFit,
padding: 0.25,
duration: 1000
padding: 0.15, // 极小边距,使内容充满屏幕
duration: 1000,
maxZoom: 1.2 // 允许更大的缩放
})
}, 100)
}