146 lines
6.4 KiB
Markdown
146 lines
6.4 KiB
Markdown
|
# 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的性能与安全优势。
|