对齐 Wolai 侧栏体验并收拢设计入库
This commit is contained in:
lix-2026
@@ -0,0 +1,84 @@
|
||||
# 90-1 参考资料：文件树 Rust 生态调研
|
||||
|
||||
是的，Rust生态中有多个类似VSCode文件树的实现，涵盖**终端(TUI)组件**、**GUI组件**和**独立应用**三类，均支持文件/目录的层级展示、折叠展开与交互操作。
|
||||
|
||||
---
|
||||
|
||||
### 一、终端(TUI)领域：VSCode风格文件树组件/应用
|
||||
|
||||
#### 1. filetree (ft) - 最接近VSCode文件树的TUI实现
|
||||
- 仓库：https://github.com/nyanko3141592/filetree
|
||||
- 版本：v0.3.5（2026年3月）
|
||||
- 核心特性：
|
||||
- VSCode风格界面，支持文件/目录层级展示与折叠
|
||||
- Git状态集成（修改、未跟踪、忽略文件颜色标记）
|
||||
- Vim键绑定(hjkl导航)与鼠标支持
|
||||
- 系统剪贴板集成，支持文件复制/剪切/粘贴
|
||||
- 可通过cargo直接安装：`cargo install filetree`
|
||||
|
||||
#### 2. fileview - 轻量级VSCode风格文件树TUI
|
||||
- 仓库：https://crates.io/crates/fileview
|
||||
- 版本：v1.8.1（2026年2月）
|
||||
- 特点：
|
||||
- 极简设计，启动迅速，无需配置
|
||||
- 支持图像预览(Kitty/iTerm2/Sixel)与语法高亮
|
||||
- 模糊查找功能，快速定位文件
|
||||
- 多文件选择与批量操作
|
||||
|
||||
#### 3. 通用TUI文件树组件库
|
||||
| 库名称 | 适用框架 | 核心特点 |
|
||||
|--------|----------|----------|
|
||||
| tui-file-explorer | Ratatui | 双面板布局，独立左右浏览窗格，Tab切换 |
|
||||
| tui-tree-widget | Ratatui | 通用树视图组件，支持自定义数据结构 |
|
||||
| ratatui-explorer | Ratatui | 高度可定制，支持键盘输入处理 |
|
||||
| ratkit | Ratatui | 包含树视图在内的综合组件库，支持可调整大小的分割面板 |
|
||||
|
||||
---
|
||||
|
||||
### 二、GUI领域：Rust图形界面文件树组件
|
||||
|
||||
#### 1. iced_file_tree - Iced GUI框架的文件树组件
|
||||
- 仓库：https://crates.io/crates/iced_file_tree
|
||||
- 适配Iced跨平台GUI库（受Elm启发）
|
||||
- 支持文件系统导航与层级展示，可集成到桌面应用中
|
||||
|
||||
#### 2. Tauri应用中的文件树实现
|
||||
- Tauri（Rust+WebView）可通过Rust后端+前端组件实现VSCode风格文件树
|
||||
- 后端：使用`std::fs::read_dir`读取目录内容，返回`(path, is_directory)`元组
|
||||
- 前端：创建嵌套HTML列表(ul/li)表示文件夹结构，添加VSCode风格图标与交互
|
||||
|
||||
---
|
||||
|
||||
### 三、使用场景与选择建议
|
||||
|
||||
| 使用场景 | 推荐选择 | 理由 |
|
||||
|----------|----------|------|
|
||||
| 快速体验VSCode风格文件树 | filetree(ft) | 开箱即用，VSCode界面风格，Git集成 |
|
||||
| 集成到Ratatui终端应用 | tui-file-explorer | 专为Ratatui设计，双面板布局，功能完善 |
|
||||
| 构建跨平台GUI应用 | iced_file_tree | 适配Iced框架，原生GUI体验 |
|
||||
| 开发Tauri桌面应用 | 自定义实现 | 结合Rust后端与Web前端，灵活性最高 |
|
||||
|
||||
---
|
||||
|
||||
### 四、快速上手示例
|
||||
|
||||
使用filetree(ft)快速体验VSCode风格文件树：
|
||||
```bash
|
||||
# 安装
|
||||
cargo install filetree
|
||||
|
||||
# 运行（当前目录）
|
||||
ft
|
||||
|
||||
# 常用操作
|
||||
hjkl - 导航（Vim风格）
|
||||
g/G - 跳至顶部/底部
|
||||
Enter - 打开文件/文件夹
|
||||
dd - 删除文件/文件夹
|
||||
yy - 复制，p - 粘贴
|
||||
:q - 退出
|
||||
```
|
||||
|
||||
如果你需要将文件树组件集成到自己的Rust项目中，建议根据应用类型（终端/GUI）选择对应的组件库，或参考filetree的实现方式进行定制开发。
|
||||
|
||||
需要我给你一份在 Ratatui 中快速集成 tui-file-explorer 实现 VSCode 风格单面板文件树的最小可运行代码示例吗？
|
||||
@@ -0,0 +1,147 @@
|
||||
# 90-2 参考资料：页面树 Rust 生态调研
|
||||
|
||||
是的，Rust生态中有多种类似Notion页面树的实现，覆盖**数据结构库**、**UI组件库**（终端/桌面）和**完整应用**三类，均支持层次化文档管理、折叠展开、节点操作等核心功能。Notion页面树的关键特性是**块级编辑+嵌套页面+树形导航**，以下是Rust中的对应方案。
|
||||
|
||||
---
|
||||
|
||||
### 一、核心数据结构库：构建页面树的基础
|
||||
|
||||
这些库提供树状数据结构，可作为Notion风格页面树的底层存储，支持节点增删改查、层级管理等操作。
|
||||
|
||||
| 库名称 | 核心特点 | 适用场景 |
|
||||
|--------|----------|----------|
|
||||
| **easy-tree** | 轻量级树结构，深度优先遍历，支持并行迭代 | 快速构建简单页面树，文件系统映射 |
|
||||
| **tree-ds** | 支持节点插入/删除/移动，整树枚举，子树修剪与嫁接 | 复杂层次结构管理，需要灵活节点操作 |
|
||||
| **treelog** | 自定义树渲染，支持多种样式(Unicode/ASCII/Box) | 命令行工具中展示页面树结构 |
|
||||
| **ptree** | 美观的树状结构打印，支持自定义节点显示 | 调试或展示页面树层级关系 |
|
||||
|
||||
---
|
||||
|
||||
### 二、UI组件库：实现页面树的可视化与交互
|
||||
|
||||
这些组件库提供现成的树形UI，支持折叠展开、拖拽、键盘导航等Notion页面树关键交互功能。
|
||||
|
||||
#### 1. 终端(TUI)组件库
|
||||
|
||||
| 组件库 | 适配框架 | 核心特性 |
|
||||
|--------|----------|----------|
|
||||
| **tui-file-explorer** | Ratatui | 双面板布局，文件/目录层级展示，支持Git状态标记 |
|
||||
| **ratatui-toolkit** | Ratatui | 包含树视图组件，支持自定义渲染与交互 |
|
||||
| **cursive-tree** | Cursive | 支持"<>"/"↑↓"导航，鼠标点击切换折叠状态，多选择模式 |
|
||||
|
||||
#### 2. 桌面(GUI)组件库
|
||||
|
||||
| 组件库 | 适配框架 | 核心特性 |
|
||||
|--------|----------|----------|
|
||||
| **gpui-component::tree** | GPUI | 支持折叠/展开、键盘导航、自定义项渲染，适合文件浏览器和导航菜单 |
|
||||
| **fyrox::gui::tree** | Fyrox | 内置选择控制，支持Ctrl+Click多选，Alt+Click拖拽 |
|
||||
| **iced_file_tree** | Iced | 适配Iced跨平台GUI框架，支持文件系统导航与层级展示 |
|
||||
| **egui-tree-view** | egui | 纯Rust即时模式GUI，支持嵌套节点，折叠展开，拖拽排序 |
|
||||
|
||||
---
|
||||
|
||||
### 三、完整应用：Notion风格页面树的直接体验
|
||||
|
||||
这些应用提供完整的Notion-like体验，包含页面树导航+块级编辑器，可直接使用或作为参考实现。
|
||||
|
||||
| 应用名称 | 技术栈 | 页面树特性 |
|
||||
|----------|--------|------------|
|
||||
| **Rustree** | Rust | 分层结构存储HTML文本，支持节点引用，类似Treepad |
|
||||
| **TauriNote** | Tauri(Rust+WebView) | 仿Notion块级编辑器，文件树管理，支持创建/删除笔记 |
|
||||
| **Ferrite** | Rust+egui | 轻量级文本编辑器，支持Markdown，内置文档结构导航 |
|
||||
| **ylin** | Tauri 2+Rust | 文件树侧边栏，支持Markdown编辑，实时预览 |
|
||||
|
||||
---
|
||||
|
||||
### 四、Notion页面树核心功能的Rust实现方案
|
||||
|
||||
#### 1. 块级编辑+页面树结合
|
||||
|
||||
Notion的核心是**块级内容+嵌套页面**，Rust中可通过以下方式实现：
|
||||
- 后端：使用`tree-ds`或`easy-tree`存储块/页面层次结构，每个节点包含内容类型(文本/标题/列表等)和子节点列表
|
||||
- 前端：使用GPUI/egui/Iced的树组件渲染页面树，块编辑器可集成`rust-markdown`或自定义块解析器
|
||||
|
||||
#### 2. 拖拽调整页面顺序
|
||||
|
||||
拖拽是Notion页面树的重要交互，Rust GUI框架中实现方式：
|
||||
- **egui**：通过`egui::DragValue`和自定义状态管理实现节点拖拽排序
|
||||
- **Fyrox**：内置`Tree`组件支持Alt+Click拖拽，无需额外实现
|
||||
- **Tauri**：结合Rust后端与前端拖拽库(如SortableJS)，通过IPC同步节点位置
|
||||
|
||||
#### 3. 动态加载与懒渲染
|
||||
|
||||
大型页面树需要懒加载优化，Rust中可通过：
|
||||
- 使用`TreeBackend`按需加载子节点（如`cursive-tree`的实现）
|
||||
- 在Tauri应用中，Rust后端监听节点展开事件，读取子页面数据并返回给前端
|
||||
|
||||
---
|
||||
|
||||
### 五、使用场景与选择建议
|
||||
|
||||
| 使用场景 | 推荐选择 | 理由 |
|
||||
|----------|----------|------|
|
||||
| 快速体验Notion风格页面树 | TauriNote/Rustree | 开箱即用，完整UI体验，支持块编辑与页面树导航 |
|
||||
| 集成到Ratatui终端应用 | tui-file-explorer | 专为Ratatui设计，双面板布局，功能完善 |
|
||||
| 构建跨平台GUI应用 | egui-tree-view/iced_file_tree | 纯Rust实现，原生GUI体验，无需WebView |
|
||||
| 开发Tauri桌面应用 | 自定义实现+前端组件 | 结合Rust后端性能与前端交互灵活性，最接近Notion体验 |
|
||||
| 仅需页面树数据结构 | easy-tree/tree-ds | 轻量级，API简单，适合快速开发 |
|
||||
|
||||
---
|
||||
|
||||
### 六、快速上手示例：egui-tree-view实现Notion风格页面树
|
||||
|
||||
```rust
|
||||
use egui::{CentralPanel, Context, TopBottomPanel};
|
||||
use egui_tree_view::{TreeView, TreeViewState};
|
||||
|
||||
struct PageNode {
|
||||
title: String,
|
||||
children: Vec<PageNode>,
|
||||
expanded: bool,
|
||||
}
|
||||
|
||||
impl PageNode {
|
||||
fn new(title: &str) -> Self {
|
||||
Self {
|
||||
title: title.to_string(),
|
||||
children: Vec::new(),
|
||||
expanded: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn main() -> eframe::Result<()> {
|
||||
let mut tree_state = TreeViewState::default();
|
||||
let mut root_node = PageNode::new("Notion Style Page Tree");
|
||||
root_node.children.push(PageNode::new("Getting Started"));
|
||||
root_node.children.push({
|
||||
let mut node = PageNode::new("Advanced Features");
|
||||
node.children.push(PageNode::new("Block Editing"));
|
||||
node.children.push(PageNode::new("Page Nesting"));
|
||||
node
|
||||
});
|
||||
|
||||
eframe::run_simple_native("Notion Page Tree Demo", Default::default(), move |ctx, _frame| {
|
||||
TopBottomPanel::top("menu").show(ctx, |ui| {
|
||||
ui.heading("Notion Style Editor");
|
||||
});
|
||||
|
||||
CentralPanel::default().show(ctx, |ui| {
|
||||
TreeView::new("page_tree", &mut tree_state)
|
||||
.with_nodes(&mut root_node.children, |ui, node, _depth| {
|
||||
ui.checkbox(&mut node.expanded, &node.title);
|
||||
node.expanded
|
||||
})
|
||||
.show(ui);
|
||||
});
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 七、总结
|
||||
|
||||
Rust生态中已有丰富的工具可构建Notion风格页面树，从底层数据结构到完整应用全覆盖。若需快速开发，可选择现成组件库或应用；若需高度定制，可基于树结构库+UI框架组合实现，充分发挥Rust的性能与安全优势。
|
||||
|
||||
需要我给你一份在 Tauri 中结合 Rust 后端与前端实现可拖拽 Notion 风格页面树的最小可运行示例吗？
|
||||
Reference in New Issue
Block a user