# GiteeTree

**Repository Path**: azad-sl/GiteeTree

## Basic Information

- **Project Name**: GiteeTree
- **Description**: 优雅的Gitee仓库目录树和分享卡片生成工具
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://giteetree.azad.asia/
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-08-11
- **Last Updated**: 2025-08-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

![版本](https://img.shields.io/badge/version-v1.0.0-blue)
![技术栈](https://img.shields.io/badge/tech-JS%20%7C%20TailwindCSS%20%7C%20Gitee%20API-brightgreen)
![许可证](https://img.shields.io/badge/license-MIT-success)
[![Gitee Stars](https://gitee.com/azad-sl/GiteeTree/badge/star.svg?theme=dark)](https://gitee.com/azad-sl/GiteeTree/stargazers)

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

---

### 🎬 效果演示
| 页面 | 目录树导出图片效果 |
| :---: | :---: |
|![页面](https://img.aihub.ren/i/2025/08/11/otqhli.png)|![azad-sl-GiteeTree-directory](https://img.aihub.ren/i/2025/08/11/ouhaxx.png) |


#### 多风格分享卡片
| macOS 风格 | Gitee 风格 |
| :---: | :---: |
| ![macOS Card](https://img.aihub.ren/i/2025/08/11/ouzx7s.png) | ![Gitee Card](https://img.aihub.ren/i/2025/08/11/ov01e5.png) |
| **Material 风格** | **Modern 风格** |
| ![Material Card](https://img.aihub.ren/i/2025/08/11/ov02i4.png) | ![Modern Card](https://img.aihub.ren/i/2025/08/11/ouzwq8.png) |

---

### ✨ 功能亮点

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

### 🚀 在线体验

**[👉 点击这里，立即体验 GiteeTree](https://giteetree.azad.asia/)**

*(请注意：请先在工具中设置你的 Gitee 个人访问令牌————请访问 <a href="https://gitee.com/profile/personal_access_tokens" target="_blank" >Gitee 个人访问令牌页面 </a> 生成令牌，确保勾选 <code>user_info</code> 和 <code>projects</code> 权限。)*

---

### 📘 使用指南

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

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

1.  访问 **[Gitee 个人访问令牌](https://gitee.com/profile/personal_access_tokens)** 页面。
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](https://tailwindcss.com/)** 构建，配合自定义 CSS，实现了高度可定制和响应式的界面。
-   **Gitee API**: 通过 `fetch` 调用 Gitee API v5 获取项目元数据和目录内容。
-   **图片生成**:
    -   **[html2canvas.js](https://html2canvas.hertzen.com/)**: 用于将 HTML 元素（目录树和分享卡片）精准地渲染成 Canvas，并导出为图片。
-   **二维码生成**:
    -   **[qrcode.js](https://github.com/davidshimjs/qrcodejs)**: 在分享卡片中动态生成指向项目主页的二维码。

### ❤️ 致谢

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

如果您觉得这个工具对您有帮助，请给这个仓库点一个 **Star** ⭐  或者请作者喝杯咖啡☕~
<p align="center">  
<img src="https://github.com/user-attachments/assets/e9eecbdd-f266-467e-b615-71b67d8e8f17" alt="Donation" width="360" />
</p>