目录树生成器

目录结构转可折叠、可搜索、可点击的交互式HTML目录树

【简介】

项目文档、代码仓库、知识库的目录结构展示是个看似简单但实际困扰很多人的问题。纯文本的 tree 输出无法折叠，大项目看起来非常乱；没有文件类型图标无法快速区分文件类型；静态截图一经生成就无法更新，更无法交互操作。

本 Skill 将目录结构转化为可折叠、可搜索、可点击的交互式 HTML 页面。支持 7 种展示风格（资源管理器、思维导图、旭日图、紧凑列表、带注释型、筛选型、大小可视化），内置文件类型配色和统计面板，让目录树从静态截图升级为动态工具。

---

Tree View Craft — 目录树生成器 Skill

将项目目录结构转化为可折叠、可搜索、可点击的交互式目录树 HTML。

作者：wuwenbin-beijing-st

使用说明

运行此 Skill 后，按以下步骤操作：

1. 输入目录结构：粘贴 tree 命令输出、find 输出，或手动描述目录层级
2. 选择展示风格：从映射表中选择最适合的呈现方式
3. 选择配色方案：选择文件类型配色主题
4. 生成目录树：输出交互式单文件 HTML

输入格式建议

text

project/
├── src/
│   ├── index.js
│   └── utils.js
├── docs/
│   └── README.md
└── package.json

或直接粘贴 tree -L 3 命令的输出。

场景-模式映射表

项目类型	推荐模式	特点
代码项目	explorer（资源管理器）	类似 VS Code 侧栏，文件类型图标，可折叠
知识库/文档	mindmap（思维导图）	放射状布局，适合展示知识结构
存储分析	sunburst（旭日图）	展示各目录文件大小占比
快速参考	compact（紧凑列表）	纯文本风格，节省空间
架构文档	annotated（带注释）	每个节点可添加说明文字
审计/排查	filtered（按类型筛选）	按 .js/.md/.json 等类型快速筛选
存储管理	size-chart（大小可视化）	文件大小+数量统计可视化

配色方案库

文件类型配色

• 代码文件（.js, .ts, .py, .java）：#2563eb 蓝
• 文档文件（.md, .txt, .pdf, .doc）：#d97706 黄
• 配置文件（.json, .yaml, .toml, .env）：#6b7280 灰
• 媒体文件（.png, .jpg, .mp4, .mp3）：#7c3aed 紫
• 样式文件（.css, .scss, .less）：#db2777 粉
• 数据文件（.csv, .xlsx, .db, .sql）：#059669 绿

4 套主题配色

1. 浅色经典

text

--bg: #ffffff
--text: #1f2937
--node-hover: #f3f4f6
--node-active: #e5e7eb
--border: #d1d5db
--folder: #f59e0b

2. 深色专业

text

--bg: #0f172a
--text: #e2e8f0
--node-hover: #1e293b
--node-active: #334155
--border: #475569
--folder: #fbbf24

3. 清爽绿

text

--bg: #f0fdf4
--text: #14532d
--node-hover: #dcfce7
--node-active: #bbf7d0
--border: #86efac
--folder: #22c55e

4. 暗紫科技

text

--bg: #1e1b4b
--text: #e0e7ff
--node-hover: #312e81
--node-active: #3730a3
--border: #4338ca
--folder: #a78bfa

交互增强包列表

基础交互

• 节点折叠/展开
• 搜索过滤（实时高亮匹配项）
• 文件类型图例
• 统计信息面板（总文件数、目录数、文件类型分布）

高级交互

• 按文件类型筛选
• 按大小/名称排序
• 复制文件路径
• 导出结构文本（方便嵌入 Markdown）
• 展开/折叠全部

限制说明

• 单文件 HTML：所有输出均为单一 HTML 文件，CSS 和 JS 全部内联
• 零外部依赖：不加载任何 CDN 资源、字体、图标库
• 文件类型图标：纯 CSS 绘制，无需图标库
• 系统字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif
• 浏览器兼容：Chrome/Firefox/Safari/Edge 最新两版
• 响应式布局：桌面和移动端均可正常浏览

命令定义

/tree-view

主入口命令。输入目录结构后生成可折叠交互式目录树 HTML。

/tree-stats

生成带统计信息的目录分析页。包含文件数量、类型分布、目录深度等统计面板。

文件结构

text

skills/tree-view-craft/
├── SKILL.md
├── patterns/
│   ├── explorer.json        # 文件资源管理器风格
│   ├── mindmap.json         # 思维导图风格
│   ├── sunburst.json        # 旭日图（大小占比）
│   ├── compact.json         # 紧凑列表
│   ├── annotated.json       # 带注释说明
│   ├── filtered.json        # 按类型筛选
│   └── size-chart.json      # 文件大小可视化
└── templates/
    ├── base.html
    ├── explorer.html
    ├── mindmap.html
    ├── sunburst.html
    ├── compact.html
    ├── annotated.html
    ├── filtered.html
    └── size-chart.html