lix/mnote

Files

T

lix-2026 96e03645f7 chore: 收口 review 执行清单与 runtime 验证

- 补齐 design/10-review 执行清单、验收标准与相关设计治理记录

- 迁移已完成的 tree、mindmap、runtime fallback、AI kernel 等设计和缺陷条目

- 推进 Rust Web runtime、tree/sidebar、page aggregate、mindmap 与 OnlyOffice 路由侧验证支撑

- 增加 task177-task180 smoke/audit 脚本及前端相关测试覆盖

2026-05-14 05:52:08 +08:00

6.4 KiB

Raw Permalink Blame History

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风格页面树

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的性能与安全优势。

6.4 KiB Raw Permalink Blame History Unescape Escape