fix: 修复保存后刷新网页图层全变成1的问题

问题原因:
1. LogicFlow 的 render() 方法不会自动应用节点的 zIndex 属性
2. 切换标签时,LogicFlow Label 插件对空 _label 数组处理有误导致渲染失败
3. 渲染失败后节点 zIndex 被重置为默认值 1

解决方案:
1. 在 App.vue 中,render() 后立即从保存的数据中恢复每个节点的 zIndex
2. 在 normalizeGraphData() 中清理空的 _label 数组,避免 Label 插件报错
3. 简化 FlowEditor.vue 中的 normalizeAllNodes(),移除不必要的重新分配逻辑
4. 清理调试日志,保持代码整洁

测试:
- 添加节点并调整图层顺序
- 切换标签页
- 刷新浏览器
- 确认图层顺序保持不变
This commit is contained in:
2026-02-13 19:28:21 +08:00
parent 92aa4094f5
commit 9227a61c85
21 changed files with 3175 additions and 62 deletions

View File

@@ -23,7 +23,18 @@ const contentHeight = computed(() => `${windowHeight.value - toolbarHeight}px`);
const normalizeGraphData = (data: any) => {
if (data && Array.isArray((data as any).nodes) && Array.isArray((data as any).edges)) {
return data;
// 清理节点数据,移除可能导致 Label 插件出错的空 _label 数组
const cleanedData = {
...data,
nodes: data.nodes.map((node: any) => {
const cleanedNode = { ...node };
if (cleanedNode.properties && Array.isArray(cleanedNode.properties._label) && cleanedNode.properties._label.length === 0) {
delete cleanedNode.properties._label;
}
return cleanedNode;
})
};
return cleanedData;
}
return { nodes: [], edges: [] };
};
@@ -63,7 +74,21 @@ watch(
if (logicFlowInstance && currentTab?.graphRawData) {
try {
logicFlowInstance.render(normalizeGraphData(currentTab.graphRawData));
const graphData = normalizeGraphData(currentTab.graphRawData);
logicFlowInstance.render(graphData);
// 渲染后立即恢复 zIndex
if (graphData.nodes) {
graphData.nodes.forEach((nodeData: any) => {
if (nodeData.zIndex !== undefined) {
const model = logicFlowInstance.getNodeModelById(nodeData.id);
if (model) {
model.setZIndex(nodeData.zIndex);
}
}
});
}
logicFlowInstance.zoom(
currentTab.transform?.SCALE_X ?? 1,
[currentTab.transform?.TRANSLATE_X ?? 0, currentTab.transform?.TRANSLATE_Y ?? 0]
@@ -86,7 +111,22 @@ watch(
if (logicFlowInstance && currentTab?.graphRawData) {
try {
logicFlowInstance.render(normalizeGraphData(currentTab.graphRawData));
const graphData = normalizeGraphData(currentTab.graphRawData);
logicFlowInstance.render(graphData);
// 渲染后立即恢复 zIndex
if (graphData.nodes) {
graphData.nodes.forEach((nodeData: any) => {
if (nodeData.zIndex !== undefined) {
const model = logicFlowInstance.getNodeModelById(nodeData.id);
if (model) {
console.log(`[导入数据] 恢复节点 ${nodeData.id} 的 zIndex: ${nodeData.zIndex}`);
model.setZIndex(nodeData.zIndex);
}
}
});
}
logicFlowInstance.zoom(
currentTab.transform?.SCALE_X ?? 1,
[currentTab.transform?.TRANSLATE_X ?? 0, currentTab.transform?.TRANSLATE_Y ?? 0]