GiteeTree

Gitee目录树生成与卡片化分享

安装此脚本？

访问作者的支持站点，提供反馈或发表评价，或举报此脚本。

作者

Azad-sl

日安装量

总安装量

评分

0 0 0

版本

1.0

创建于

2025-08-14

更新于

2025-08-14

大小

59.1 KB

许可证

MIT

适用于

gitee.com

GiteeTree - Gitee 仓库目录树生成 & 卡片化分享

GiteeTree 是一款专业、优雅且高效的在线工具，旨在帮助 Gitee 用户快速生成项目目录树，并一键创建精美的项目分享卡片。只需输入项目地址，即可轻松展示和分享您的代码结构与项目信息。

🎬 效果演示

页面	目录树导出图片效果

多风格分享卡片

macOS 风格	Gitee 风格

Material 风格	Modern 风格

✨ 功能亮点

🌳 智能目录树生成: 快速抓取 Gitee 仓库的目录结构，并以清晰的树形格式展示。
⚙️ 高级自定义选项:
- 目录深度控制：自由选择要展示的目录层级。
- 内容视图过滤：可选择展示完整目录，或仅显示文件夹结构。
🖼️ 多种导出格式:
- 复制文本/Markdown: 一键复制纯文本或 Markdown 格式的目录树，方便粘贴到文档或 README 中。
- 导出精美图片: 将目录树渲染为带有 macOS 窗口风格的图片，视觉效果出众，适合社交分享。
- 下载结构脚本: 生成 .sh (Linux/Mac) 或 .bat (Windows) 脚本，用于在本地快速重建项目目录结构。
💳 项目分享卡片:
- 一键生成: 自动获取项目信息（Star, Fork, 语言等），生成包含项目二维码的分享卡片。
- 四种优雅风格: 提供 macOS、Gitee、Material Design 和 Modern 四种精心设计的卡片样式，满足不同审美需求。
- 高清图片下载: 可将生成的卡片下载为高清晰度 PNG 图片。
🔐 安全令牌存储: Gitee 访问令牌将安全地保存在浏览器的 localStorage 中，仅用于 API 请求，不会上传至任何服务器。

🚀 在线体验

👉 点击这里，立即体验 GiteeTree

(请注意：请先在工具中设置你的 Gitee 个人访问令牌————请访问 Gitee 个人访问令牌页面生成令牌，确保勾选 user_info 和 projects 权限。)

📘 使用指南

1. 设置 Gitee 个人访问令牌（Token）

为了能够访问 Gitee API 获取项目信息（特别是私有仓库），您需要先进行一次性设置。

访问 Gitee 个人访问令牌 页面。
点击 “生成新令牌”。
为令牌添加描述（例如 GiteeTree）。
在权限选择中，务必勾选 user_info 和 projects 这两个权限。
点击“提交”，复制生成好的令牌字符串。
回到 GiteeTree 工具页面，在“API 访问令牌设置”中粘贴您的令牌并点击“保存”。

2. 生成目录树

在“项目地址”输入框中，输入目标仓库地址，支持以下格式：
- owner/repo (例如: azad-sl/GiteeTree)
- gitee.com/owner/repo
在“高级选项”中，根据需要选择 目录深度 和 显示内容。
点击 “生成目录树” 按钮。
在生成的结果区域，您可以使用上方的按钮进行复制、导出图片 或 下载脚本 操作。

3. 生成分享卡片

输入项目地址。
点击 “生成分享卡片” 按钮。
在结果区域，您可以切换不同的 卡片风格 来预览效果。
点击 “下载卡片” 将当前风格的卡片保存为图片。

🛠️ 技术实现

核心框架: 原生 JavaScript (ES6+)，无现代前端框架依赖，轻量快速。
UI 样式: 使用 Tailwind CSS 构建，配合自定义 CSS，实现了高度可定制和响应式的界面。
Gitee API: 通过 fetch 调用 Gitee API v5 获取项目元数据和目录内容。
图片生成:
- html2canvas.js: 用于将 HTML 元素（目录树和分享卡片）精准地渲染成 Canvas，并导出为图片。
二维码生成:
- qrcode.js: 在分享卡片中动态生成指向项目主页的二维码。

❤️ 致谢

感谢所有为本项目提供灵感和技术支持的开源社区。

如果您觉得这个工具对您有帮助，请给这个仓库点一个 Star ⭐ 或者请作者喝杯咖啡☕~

Donation