GitHub PR Tree 用户指南：掌握文件树浏览、已查看文件跟踪与暗模式设置

GitHub PR Tree 用户指南：掌握文件树浏览、已查看文件跟踪与暗模式设置

【免费下载链接】github_pr_treeAdd a file tree to GitHub's Pull Request项目地址: https://gitcode.com/gh_mirrors/gi/github_pr_tree

GitHub PR Tree 是一款专为提升 GitHub 拉取请求（Pull Request）浏览体验设计的工具，它能为 PR 页面添加直观的文件树结构，帮助开发者更高效地进行代码审查和文件管理。无论是追踪已查看文件还是切换暗模式，这款工具都能让你的 PR 审查工作变得更加轻松。

🚀 核心功能概览

GitHub PR Tree 主要提供三大核心功能，让 PR 审查效率倍增：

• 文件树结构展示：将 PR 中的所有修改文件以树形结构清晰呈现，告别文件列表的混乱排列
• 已查看文件跟踪：自动记录并标记已查看的文件，避免重复审查
• 智能暗模式支持：根据系统设置自动切换明暗主题，提供舒适的视觉体验

图：GitHub PR Tree 在实际 PR 页面中展示的文件树结构，左侧为文件树导航，右侧为代码 diff 区域

🔍 文件树浏览：快速定位修改文件

文件树是 GitHub PR Tree 最核心的功能，它将原本平铺展示的修改文件组织成层级结构，让你能像浏览本地项目一样查看 PR 中的文件变更。

基本操作方法

1. 安装扩展后打开任意 PR 页面
2. 在页面左侧会自动出现文件树面板
3. 点击文件夹前的箭头可展开/折叠子目录
4. 点击文件名可直接跳转到该文件的 diff 视图
5. 文件旁会显示修改状态：绿色表示新增，红色表示删除，黄色表示修改

文件树的实现主要在 src/js/components/tree/index.jsx 中，通过解析 PR 页面的文件结构动态生成树形视图。

👀 已查看文件跟踪：避免重复审查

在大型 PR 中，很容易忘记哪些文件已经审查过。GitHub PR Tree 提供了智能的已查看文件跟踪功能，帮你记住审查进度。

如何使用已查看功能

1. 在文件树顶部的过滤栏中有"Filter viewed files"选项
2. 勾选"Hide viewed files"可隐藏已查看的文件
3. 已查看的文件会自动添加一个 ✓ 标记
4. 点击文件旁的复选框可手动标记/取消标记已查看状态

这一功能的实现逻辑可以在测试文件 src/js/tests/fixtures/pr.html 中找到相关的 UI 元素定义。

🌙 暗模式设置：保护眼睛的舒适体验

GitHub PR Tree 支持自动暗模式切换，会根据你的系统设置或 GitHub 主题自动调整界面样式。

暗模式的实现方式

暗模式的样式定义在 src/js/style.css 文件中，通过 CSS 媒体查询实现：

@media (prefers-color-scheme: dark) { .__better_github_pr { --bgpr-background: #0d1117; --bgpr-color: #bebebe; --bgpr-border: #484848; /* 更多暗模式样式定义 */ } }

当系统设置为深色模式时，文件树会自动应用深色背景和浅色文字，减少眼部疲劳。

💻 安装与使用方法

从源码安装

1. 克隆仓库：git clone https://gitcode.com/gh_mirrors/gi/github_pr_tree
2. 进入项目目录：cd github_pr_tree
3. 安装依赖：yarn install
4. 构建扩展：yarn build
5. 在浏览器中加载已解压的扩展（具体方法因浏览器而异）

浏览器扩展商店安装

GitHub PR Tree 也可以直接从 Chrome 和 Firefox 扩展商店安装：

• Chrome 用户：通过 deploy_chrome_store.sh 脚本打包的扩展
• Firefox 用户：通过 deploy_firefox_store.sh 脚本打包的扩展

⚙️ 自定义设置

GitHub PR Tree 提供了一些自定义选项，可以通过扩展选项页面进行配置：

1. 在浏览器扩展管理页面找到 GitHub PR Tree
2. 点击"选项"打开设置页面
3. 根据个人偏好调整文件树宽度、默认展开状态等

设置页面的实现代码位于 src/js/options.jsx，样式定义在 src/pages/options.css。

图：在浏览器中启用 GitHub PR Tree 扩展的界面

🎯 使用技巧

• 快捷键导航：在文件树中按/键可快速激活搜索框
• 调整宽度：拖动文件树右侧的边框可调整宽度
• 过滤文件：使用顶部搜索框可实时过滤文件树中的文件
• 上下文菜单：右键点击文件可打开上下文菜单，提供更多操作选项

📝 总结

GitHub PR Tree 是一款提升 GitHub PR 审查体验的实用工具，通过直观的文件树结构、已查看文件跟踪和智能暗模式等功能，帮助开发者更高效地进行代码审查。无论是日常开发还是开源项目贡献，这款工具都能成为你得力的助手。

如果你在使用过程中遇到任何问题，或者有功能改进建议，可以通过项目的 issue 系统提交反馈。

【免费下载链接】github_pr_treeAdd a file tree to GitHub's Pull Request项目地址: https://gitcode.com/gh_mirrors/gi/github_pr_tree