树形目录结构生成器

功能简介

树形目录结构生成器是一个在线工具，可以在 Markdown 格式的列表和 ASCII 树形结构之间进行双向转换。这个工具特别适用于展示项目结构、文档目录等场景。

使用方法

1. 双向转换：在左侧编辑 Markdown 格式，在右侧编辑 ASCII 格式，内容会自动同步转换
2. Markdown 编辑：
   • 在左侧输入框中输入 Markdown 格式的列表
   • 使用 Tab 键进行缩进，Shift+Tab 减少缩进
   • 每行使用 + 或 - 作为列表项标记
3. ASCII 编辑：
   • 在右侧直接编辑 ASCII 树形结构
   • 修改后左侧会自动更新为对应的 Markdown 格式
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 列表和 ASCII 树形结构
2. 处理 Tab 键事件实现缩进功能
3. 使用 useMemo 和 useCallback 优化性能，避免不必要的重复计算
4. 集成 react-hot-toast 提供复制成功的反馈
5. 使用 useLocalStorage 持久化存储用户输入，保留上次编辑内容

API

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

注意事项

• 输入的 Markdown 列表不应以空格开头
• 使用 Tab 键可以方便地调整缩进级别
• 生成的树形结构会自动忽略空行
• 可以从任意一侧进行编辑，另一侧会自动更新

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