GiteeTree

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

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला Tampermonkey, Greasemonkey किंवा Violentmonkey यासारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

You will need to install an extension such as Tampermonkey to install this script.

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला Tampermonkey किंवा Violentmonkey यासारखे एक्स्टेंशन इंस्टॉल करावे लागेल..

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला Tampermonkey यासारखे एक्स्टेंशन इंस्टॉल करावे लागेल..

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्क्रिप्ट व्यवस्थापक एक्स्टेंशन इंस्टॉल करावे लागेल.

(माझ्याकडे आधीच युझर स्क्रिप्ट व्यवस्थापक आहे, मला इंस्टॉल करू द्या!)

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला Stylus सारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला Stylus सारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला Stylus सारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्टाईल व्यवस्थापक इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्टाईल व्यवस्थापक इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्टाईल व्यवस्थापक इंस्टॉल करावे लागेल.

(माझ्याकडे आधीच युझर स्टाईल व्यवस्थापक आहे, मला इंस्टॉल करू द्या!)

लेखक
Azad-sl
दैनिक इंस्टॉल
0
एकूण इंस्टॉल
0
रेटिंग
0 0 0
आवृत्ती
1.0
बनवली
2025-08-14
अपडेट केली
2025-08-14
आकार
59.1 KB
License
MIT
यांवर लागू होते:

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

版本 技术栈 许可证 Gitee Stars

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


🎬 效果演示

页面 目录树导出图片效果
页面 azad-sl-GiteeTree-directory

多风格分享卡片

macOS 风格 Gitee 风格
macOS Card Gitee Card
Material 风格 Modern 风格
Material Card Modern Card

✨ 功能亮点

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

🚀 在线体验

👉 点击这里,立即体验 GiteeTree

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


📘 使用指南

1. 设置 Gitee 个人访问令牌(Token)

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

  1. 访问 Gitee 个人访问令牌 页面。
  2. 点击 “生成新令牌”
  3. 为令牌添加描述(例如 GiteeTree)。
  4. 在权限选择中,务必勾选 user_infoprojects 这两个权限。
  5. 点击“提交”,复制生成好的令牌字符串。
  6. 回到 GiteeTree 工具页面,在“API 访问令牌设置”中粘贴您的令牌并点击“保存”。

2. 生成目录树

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

3. 生成分享卡片

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

🛠️ 技术实现

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

❤️ 致谢

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

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

Donation