# 告别代码迷宫：用依赖图看透你的项目

## 你是否也曾迷失在“代码迷宫”里？

想象这个场景：

> 你接手了一个庞大而复杂的项目，或者你自己的项目经过长期迭代，已经变得像一团乱麻。现在，你想修改一个核心文件，比如 `PlayerManager.ts`。
>
> 你的心里充满了恐惧和不确定：
>
> - “到底有多少个文件引用了 `PlayerManager.ts`？”
> - “我改了这里，会不会导致其他十几个地方的功能都崩溃？”
> - “这个项目到底是怎么组织的？我感觉自己像在一个没有地图的迷宫里摸索。”

这种感觉，是许多开发者在面对复杂代码库时的噩梦。如果有一张“上帝视角”的地图，能让你瞬间看清整个项目的“代码骨架”，那该多好？

ArenaPro 内置的 **文件依赖图** 功能，就是你一直在寻找的、破解代码迷宫的“侦探地图”。

![文件依赖图](/QQ20250610-144132.png)

## 这张“侦探地图”能告诉你什么？

文件依赖图是一种可视化工具，它将项目中的每个文件作为一个“地点”，文件之间的 `import` 关系作为连接的“道路”，直观地展示出整个项目的结构。

有了这张地图，你立刻就能成为一名“代码侦探”，轻松发现：

| 你能发现...       | 它意味着什么...                                                            |
| ----------------- | -------------------------------------------------------------------------- |
| **📍 交通枢纽**   | 一个被大量文件引用的“核心模块”，修改它时需要格外小心。                     |
| **🚫 环形死路**   | 几个文件相互引用，形成了“循环依赖”，这是典型的“代码坏味道”，需要尽快重构。 |
| **🏝️ 孤岛代码**   | 某些文件没有被任何其他文件引用，它们可能是可以被安全删除的“废弃代码”。     |
| **🗺️ 清晰的蓝图** | 帮助团队新成员快速理解项目的宏观架构，而不是一头扎进代码细节里。           |

:::tip
**💡 核心优势**：我们内置了强大的 [Madge](https://github.com/pahen/madge) 库并为你完成了所有繁琐配置，让你无需任何额外操作，开箱即用地获得这张强大的“地图”。
:::

## 如何获取并使用你的“地图”

### 一键生成地图

我们提供了最便捷的 VS Code 命令链接，点击即可直接为你绘制出服务端的“代码地图”：

👉 **[绘制服务端代码依赖图](vscode://box3lab.box3arenapro/command?type=ap.file.server.script.graph)**

👉 **[绘制客户端代码依赖图](vscode://box3lab.box3arenapro/command?type=ap.file.client.script.graph)**

### 手动召唤地图

你也可以通过命令面板手动召唤：

1.  按下 `F1` (或 `Shift+Ctrl+P` / `Shift+Cmd+P`) 打开命令面板。
2.  输入 `Graph` 进行搜索。
3.  选择 `获取服务端/客户端入口文件依赖图` 选项。

### 地图交互指南

这张地图是完全可交互的：

| 操作类型        | 操作说明                                             |
| --------------- | ---------------------------------------------------- |
| **🔍 缩放**     | 使用鼠标滚轮可以自由缩放。                           |
| **🖐️ 移动**     | 按住并拖动“地点”或地图背景，可以调整布局。           |
| **ℹ️ 查看详情** | 鼠标悬停在“地点”上，可以查看文件的完整路径。         |
| **📝 快速传送** | **单击**任意“地点”，可以直接在编辑器中打开对应文件。 |

:::tip
**💡 侦探建议**：定期生成依赖图来“体检”你的项目。这有助于在早期发现结构性问题，让你的代码迷宫，逐渐变成一座规划整齐的城市。
:::
