39 lines
2.3 KiB
Markdown
39 lines
2.3 KiB
Markdown
|
# 隐藏层级树叶子节点实现计划
|
|||
|
|
|
|||
|
|
## 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`）。
|