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

## 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` 的节点：
  ```typescript
  const visibleChildren = file.children?.filter(c => c.isDir)
  const showChildren = isDir && isExpanded && visibleChildren && visibleChildren.length > 0
  ```
- 在 `visibleChildren.map` 中渲染子节点，并基于 `visibleChildren.length` 来计算 `isLast`，确保树状图的连线完美闭合。

**2. 完善文件夹高亮逻辑 (在 `TreeNode` 组件中)**
- 修改 `isSelected` 的判断，使得当子文件（与文件夹同名的索引文档）被选中时，该文件夹节点也能呈现高亮状态：
  ```typescript
  const isSelected = selectedPath === file.relativePath || 
    (isDir && selectedPath === `${file.relativePath}/${file.name}.md`)
  ```

**3. 过滤根节点 (在 `DocTree` 组件中)**
- 在渲染根层级前过滤出文件夹：
  ```typescript
  const visibleFiles = files.filter(f => f.isDir)
  ```
- 基于 `visibleFiles` 遍历并传递正确的 `isLast` 属性。

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