diff --git a/src/components/pages/HierarchyAnalysisResult.vue b/src/components/pages/HierarchyAnalysisResult.vue index f0849b0..3bcd0b5 100644 --- a/src/components/pages/HierarchyAnalysisResult.vue +++ b/src/components/pages/HierarchyAnalysisResult.vue @@ -73,11 +73,26 @@

层级树状结构

-
-
-
+
+
+
+
@@ -237,6 +252,7 @@ const hierarchyData = computed(() => { }) + const getSafetyLabel = (safety) => { const labels = { safe: '安全', @@ -246,13 +262,58 @@ const getSafetyLabel = (safety) => { return labels[safety] || safety } +// 修复父子关系判断 const getParentId = (component) => { - // 简单实现:找到同级别中level-1的组件 - const parentLevel = component.level - 1 - if (parentLevel < 0) return null + // 如果有 parent_id 字段直接使用 + if (component.parent_id) return component.parent_id - const parent = hierarchyData.value.find(comp => comp.level === parentLevel) - return parent ? parent.id : null + // 根据 path 推断父组件 + if (component.path) { + const pathParts = component.path.split('/') + if (pathParts.length > 1) { + const parentPath = pathParts.slice(0, -1).join('/') + const parent = hierarchyData.value.find(c => c.path === parentPath) + return parent ? parent.id : null + } + } + + return null +} + +// 对组件按路径排序(路径自然包含了层级关系) +const sortedHierarchyData = computed(() => { + return [...hierarchyData.value].sort((a, b) => { + // 直接按路径排序,这样父子组件会自然相邻 + const pathA = a.path || a.id || '' + const pathB = b.path || b.id || '' + return pathA.localeCompare(pathB) + }) +}) + +// 判断节点是否有子节点 +const hasChildren = (nodeId) => { + return hierarchyData.value.some(comp => getParentId(comp) === nodeId) +} + +// 检查节点是否应该显示(所有祖先节点都已展开) +const shouldShowNode = (component) => { + // 根节点始终显示 + if (component.level === 0) return true + + // 检查所有祖先节点是否都已展开 + let current = component + while (current && current.level > 0) { + const parentId = getParentId(current) + if (!parentId) return false // 找不到父节点 + + // 如果父节点没有展开,则不显示 + if (!expandedNodes.value.has(parentId)) return false + + // 继续向上查找 + current = hierarchyData.value.find(c => c.id === parentId) + } + + return true } const toggleNode = (component) => { @@ -571,6 +632,16 @@ const continueToDeleteConfig = () => { transform: rotate(90deg); } +.node-toggle-placeholder { + width: 20px; + height: 20px; + margin-right: var(--spacing-sm); +} + +.node-toggle.has-children { + cursor: pointer; +} + .node-icon { width: 24px; height: 24px;