☰

GiteeTree

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

作者
Azad-sl
日安装量
0
总安装量
0
评分
0 0 0
版本
1.0
创建于
2025-08-14
更新于
2025-08-14
大小
59.1 KB
许可证
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, 语言等），生成包含项目二维码的分享卡片。
    • 四种优雅风格: 提供 macOS、Gitee、Material Design 和 Modern 四种精心设计的卡片样式，满足不同审美需求。
    • 高清图片下载: 可将生成的卡片下载为高清晰度 PNG 图片。
  • 🔐 安全令牌存储: Gitee 访问令牌将安全地保存在浏览器的 localStorage 中，仅用于 API 请求，不会上传至任何服务器。

🚀 在线体验

👉 点击这里，立即体验 GiteeTree

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

📘 使用指南

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

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

  1. 访问 Gitee 个人访问令牌 页面。
  2. 点击 “生成新令牌”。
  3. 为令牌添加描述（例如 GiteeTree）。
  4. 在权限选择中，务必勾选 user_info 和 projects 这两个权限。
  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