XCSDD/.trae/documents/hide_leaf_nodes_plan.md

隐藏层级树叶子节点实现计划

1. 目标概述

在 API 文档界面的左侧层级树（DocTree 组件）中，隐藏所有的叶子节点（即具体的 Markdown 文件），使目录树仅展示文件夹（目录）结构。

2. 现状分析

• 目前 src/components/DocTree.tsx 中的 DocTree 和 TreeNode 组件会无差别地渲染所有传入的节点（包含文件夹和文件）。
• 树状图的连线UI（如 ├─ 和 └─）依赖于数组的索引和长度（isLast 属性）。如果仅在渲染时隐式返回 null，会导致连线计算错误。
• 在当前的交互中，点击文件夹会默认打开与文件夹同名的 Markdown 索引文件（此时 selectedPath 是该 .md 文件的路径）。如果隐藏了文件节点，需要确保此时对应的文件夹能被正确高亮显示。

3. 具体修改方案

修改文件: src/components/DocTree.tsx

1. 过滤子节点并修复连线逻辑 (在 TreeNode 组件中)

• 在渲染子节点之前，先过滤出 isDir === true 的节点：

  const visibleChildren = file.children?.filter(c => c.isDir)
  const showChildren = isDir && isExpanded && visibleChildren && visibleChildren.length > 0
  

• 在 visibleChildren.map 中渲染子节点，并基于 visibleChildren.length 来计算 isLast，确保树状图的连线完美闭合。

2. 完善文件夹高亮逻辑 (在 TreeNode 组件中)

• 修改 isSelected 的判断，使得当子文件（与文件夹同名的索引文档）被选中时，该文件夹节点也能呈现高亮状态：

  const isSelected = selectedPath === file.relativePath || 
    (isDir && selectedPath === `${file.relativePath}/${file.name}.md`)
  

3. 过滤根节点 (在 DocTree 组件中)

• 在渲染根层级前过滤出文件夹：

  const visibleFiles = files.filter(f => f.isDir)
  

• 基于 visibleFiles 遍历并传递正确的 isLast 属性。

4. 影响与验证

• 影响：所有的独立 .md 文件将不再出现在左侧树中，用户需要通过点击目录（加载索引页）和页面内的文档链接来进行页面导航。
• 验证：保存修改后，左侧目录树将只显示文件夹图标/层级；连线正常；点击文件夹后，当前文件夹名称会变为高亮蓝色（text-blue-400）。