Tree 树形目录可视化生成器
建议反馈
react-app ├── config │   └── webpack.config.js ├── components │   ├── Modal │   ├── Form │   └── Table ├── pages │   ├── home │   ├── app │   └── help ├── package.json └── package-lock.json

树形目录结构生成器

功能简介

树形目录结构生成器是一个在线工具，可以将 Markdown 格式的列表转换为可视化的树形目录结构。这个工具特别适用于展示项目结构、文档目录等场景。

使用方法

  1. 在左侧输入框中输入 Markdown 格式的列表
  2. 使用 Tab 键进行缩进，Shift+Tab 减少缩进
  3. 右侧实时显示生成的树形结构
  4. 点击"复制"按钮可将生成的树形结构复制到剪贴板

示例

输入以下 Markdown 列表：

+ react-app
  + config
    + webpack.config.js
  + components
    + Modal
    + Form
    + Table
  + pages
    + home
    + app
    + help
  + package.json
  + package-lock.json

将生成如下树形结构：

react-app
├── config
│   └── webpack.config.js
├── components
│   ├── Modal
│   ├── Form
│   └── Table
├── pages
│   ├── home
│   ├── app
│   └── help
├── package.json
└── package-lock.json

技术实现

本工具主要使用 React 和 TypeScript 实现，核心功能包括：

  1. 实时解析和格式化输入的 Markdown 列表
  2. 处理 Tab 键事件实现缩进功能
  3. 使用 useMemo 优化性能，避免不必要的重复计算
  4. 集成 react-hot-toast 提供复制成功的反馈

API

目前本工具不提供 API 接口，仅作为在线工具使用。

注意事项

通过这个简单而强大的工具，您可以轻松创建美观的树形目录结构，提高文档的可读性和项目结构的可视化程度。