用像文件夹一样清晰的结构,管理你的所有笔记。
文档树是 nowen-note 左侧面板中用来组织笔记的核心结构。
它长得像你电脑上的文件夹——你可以创建笔记本(相当于文件夹),在笔记本里创建笔记,还可以在笔记本里继续创建子笔记本,想嵌套多少层都行。
[截图:左侧文档树区域,展示多级笔记本结构]
和普通文件夹的区别:
| 特性 | 电脑文件夹 | nowen-note 文档树 |
|---|---|---|
| 存放内容 | 文件、子文件夹 | 笔记、子笔记本 |
| 搜索 | 仅文件名 | 全文搜索(标题+正文) |
| 标签 | 不支持 | 支持彩色标签 |
| 收藏 | 不支持 | 一键收藏 |
| 回收站 | 系统级 | 内置回收站,可恢复 |
| 图标 | 系统图标 | 自定义 Emoji 图标 |
| 排序 | 手动/名称 | 手动拖拽/时间/标题 |
文档树适合管理任何需要「分门别类」的内容:
- 按项目分类:前端项目、后端项目、设计方案
- 按知识领域:编程、读书笔记、英语学习
- 按生活/工作分类:工作、生活、旅行、健康
- 按资料类型:文章收藏、灵感记录、会议纪要
💡 小提示:笔记本只是组织方式,不是内容本身。同一篇笔记只能属于一个笔记本,但可以用标签实现「交叉分类」。
- 打开 nowen-note,看左侧边栏
- 点击「笔记本」区域上方的 + 按钮
- 输入笔记本名称,例如「我的笔记」
- 按回车确认
[截图:点击左侧 + 创建笔记本]
创建完成后,你会在侧边栏看到新笔记本,左侧带有一个 📓 默认图标。
右键点击笔记本 → 选择「更换图标」→ 从 Emoji 面板里选一个你喜欢的。
[截图:Emoji 图标选择器]
常用图标推荐:
- 📘 学习笔记
- 💼 工作项目
- 🎨 设计灵感
- 📚 读书笔记
- 🌱 个人成长
子笔记本就是「笔记本里的笔记本」,帮你把大类再细分。
- 右键点击一个已有的笔记本
- 选择「新建子笔记本」
- 输入名称,按回车
[截图:右键菜单 - 新建子笔记本]
你也可以把一个已有的笔记本拖到另一个笔记本下面,变成它的子笔记本。
- 按住一个笔记本
- 拖到目标笔记本上方
- 看到「放在此处作为子笔记本」提示后松手
[截图:拖拽笔记本到另一个笔记本下方]
💡 小提示:子笔记本可以无限嵌套。比如「学习」→「编程」→「前端」→「React」,想分多细都可以。
- 点击左侧的笔记本
- 中间笔记列表区域会出现「新建笔记」按钮
- 点击即可创建新笔记
[截图:选中笔记本后,笔记列表中的新建按钮]
你也可以右键点击笔记本 → 选择「新建笔记」,直接在该笔记本下创建。
- 在笔记列表中右键点击一篇笔记
- 选择「移动到…」
- 在弹出的笔记本树中选择目标笔记本
- 点击「移动」
[截图:移动笔记弹窗,展示笔记本树形选择器]
你也可以直接把笔记拖到左侧的某个笔记本上:
- 从笔记列表中按住一篇笔记
- 拖到左侧目标笔记本
- 松手即可
[截图:拖拽笔记到笔记本]
笔记列表支持多种排序方式:
- 手动排序:拖拽笔记调整顺序(默认)
- 按更新时间:最近修改的排在前面
- 按创建时间:最新创建的排在前面
- 按标题:按标题字母/拼音排序
在笔记列表顶部点击排序按钮切换。
[截图:排序选项下拉菜单]
- 点击笔记本左侧的 ▸ 箭头,折叠子级
- 点击 ▾ 箭头,展开子级
折叠后文档树更清爽,适合笔记本很多的场景。
如果想把一个笔记本(及其所有子笔记本和笔记)移动到另一个位置:
- 右键点击笔记本
- 选择「移动至…」
- 在弹窗中选择新的父级笔记本,或选择「移动到根级」
- 点击「移动」
[截图:移动笔记本弹窗]
右键点击笔记本 → 选择「重命名」→ 输入新名称 → 按回车。
右键点击笔记本 → 选择「删除笔记本」→ 确认。
⚠️ 注意:删除笔记本后,该笔记本及其所有子笔记本下的笔记都会进入回收站。你可以在侧边栏底部的「回收站」中恢复它们。
右键点击笔记本 → 选择「导出为 Markdown」,可将整个笔记本的所有笔记导出为 Markdown 文件。
文档树是主要的组织方式,但不是唯一的。你可以结合以下功能让笔记管理更灵活。
在侧边栏顶部的搜索框中输入关键词,会同时搜索笔记标题和正文内容。
[截图:搜索框和搜索结果]
搜索结果会高亮显示匹配的文字,点击即可跳转到对应笔记。
标签是独立于文档树的另一种分类方式。
给笔记添加标签:
- 打开一篇笔记
- 在编辑器顶部的标签区域,输入标签名称
- 可以选择标签颜色
[截图:编辑器顶部标签区域]
查看某个标签下的所有笔记:
- 在侧边栏底部的「标签」区域,点击一个标签
- 中间列表会显示所有带该标签的笔记
💡 文档树 vs 标签:文档树解决「这篇笔记属于哪个分类」(一对一),标签解决「这篇笔记涉及哪些主题」(多对多)。两者配合使用效果最佳。
在笔记列表中右键点击笔记 → 选择「收藏」。或者在编辑器中点击标题栏的 ⭐ 按钮。
点击侧边栏的「收藏」入口,可以看到所有收藏的笔记。
- 置顶:右键笔记 → 「置顶」,该笔记会固定在列表最上方
- 锁定:右键笔记 → 「锁定笔记」,锁定后无法编辑,防止误改
nowen-note 支持「个人空间」和「团队工作区」两种模式。
默认就是你的个人空间。所有笔记本和笔记只有你自己能看到。
工作区是团队共享的空间。你可以在侧边栏顶部的工作区切换器中:
- 切换到已有工作区
- 创建新工作区
- 通过邀请码加入工作区
[截图:工作区切换器下拉菜单]
切换到某个工作区后,左侧文档树会显示该工作区下的笔记本。个人空间和工作区的笔记本完全隔离,互不影响。
- 工作区中的笔记本和笔记由团队成员共享
- 不同成员可以有不同的角色(管理员/编辑/评论/查看)
- 每个成员可以独立收藏工作区中的笔记
nowen-note 的移动端(Android App / 手机浏览器)完整支持文档树功能。
在移动端,点击左上角的 ☰ 菜单按钮,即可打开侧边栏,查看完整文档树。
[截图:移动端侧边栏]
| 操作 | 桌面端 | 移动端 |
|---|---|---|
| 打开笔记本 | 单击 | 单击 |
| 新建笔记本 | 顶部 + 按钮 | 顶部 + 按钮 |
| 更多操作 | 右键菜单 | 长按菜单 |
| 移动笔记 | 拖拽 | 长按 → 移动到… |
[截图:移动端长按笔记本弹出菜单]
💡 小提示:移动端侧边栏会以抽屉形式从左侧滑出,点击笔记后自动收起,给你更大的编辑空间。
适合需要围绕具体项目工作的场景:
工作项目
├── 前端重构
│ ├── 需求文档
│ ├── 技术方案
│ └── 会议记录
├── 后端优化
└── 产品设计
适合长期积累知识的场景:
学习笔记
├── 编程
│ ├── JavaScript
│ ├── Python
│ └── 数据库
├── 读书笔记
└── 英语学习
适合日常记录:
生活
├── 旅行计划
├── 健康记录
├── 理财笔记
└── 影评书评
文档树解决「属于哪里」,标签解决「涉及什么」。
例如一篇「React 性能优化」的笔记:
- 文档树位置:
学习笔记 → 编程 → 前端 - 标签:
#性能#React#优化
这样你可以:
- 从文档树找到它(按知识领域)
- 从标签
#性能找到它(跨领域查找性能相关内容)
虽然 nowen-note 支持无限层级,但建议保持在 2~4 层。层级太深会导致:
- 找笔记时需要点很多次
- 侧边栏横向滚动
如果发现自己建了超过 4 层,考虑用标签替代深层分类。
不可以。每篇笔记只能属于一个笔记本。但你可以用标签实现「多分类」——给笔记打上多个标签,从不同标签入口都能找到它。
笔记本删除后,该笔记本(及其所有子笔记本)下的笔记会进入回收站。你可以在侧边栏底部的「回收站」中恢复它们。
回收站中的笔记会一直保留,直到你手动「清空回收站」。
没有。理论上可以无限嵌套。但建议保持 2~4 层以获得最佳使用体验。
会。手动排序后,排序结果会同步到你登录的所有设备。
不会。个人空间和工作区的笔记本完全隔离。切换工作区后,侧边栏只显示当前空间的笔记本。
在笔记列表中,按住 Ctrl/Cmd 点击多篇笔记(或 Shift 点击范围选择),然后右键选择「移动到…」。
右键点击笔记本 → 选择「更换图标」→ 在 Emoji 面板中选择喜欢的图标。
- AI 助手:用 AI 总结笔记、生成标题、推荐标签、知识问答
- 思维导图:将笔记内容一键转为思维导图
- 说说:类似朋友圈的时间线式短内容记录
- 待办任务:内置任务清单和看板视图
- 文件管理:独立的文件管理器,管理所有上传的附件
- 版本历史:查看和回滚笔记的历史版本
- 分享协作:将笔记分享给他人,支持评论和协作编辑
- 多端同步:桌面端、移动端、浏览器数据实时同步
- 浏览器剪藏:使用浏览器扩展一键保存网页到 nowen-note
以下内容面向开发者和贡献者,普通用户可跳过。
| 功能 | 状态 | 说明 |
|---|---|---|
| 创建笔记本 | ✅ | 支持 |
| 创建子笔记本 | ✅ | 无限层级,parentId 自引用 |
| 重命名笔记本 | ✅ | 行内编辑 |
| 删除笔记本 | ✅ | 软删除,笔记进回收站 |
| 拖拽排序笔记本 | ✅ | 拖拽改变顺序 |
| 拖拽移动笔记本 | ✅ | 拖到目标笔记本上 |
| 移动笔记本弹窗 | ✅ | 树形选择器 |
| Emoji 图标 | ✅ | 右键更换,5 组分类 |
| 笔记本颜色 | ✅ | color 字段 |
| 折叠/展开 | ✅ | isExpanded 字段 |
| 笔记本笔记计数 | ✅ | 递归口径,含子笔记本笔记 |
| 导出为 Markdown | ✅ | 右键菜单 |
| 拖拽笔记到笔记本 | ✅ | 跨笔记本移动 |
| 全文搜索 | ✅ | FTS5 虚拟表 |
| 标签系统 | ✅ | 多对多,彩色标签 |
| 收藏 | ✅ | per-user 收藏表 |
| 回收站 | ✅ | 软删除 + 清空 + 恢复 |
| 置顶笔记 | ✅ | isPinned 字段 |
| 锁定笔记 | ✅ | isLocked 字段 |
| 个人空间 | ✅ | 默认空间 |
| 工作区 | ✅ | 团队协作空间 |
| 工作区隔离 | ✅ | 笔记本/笔记按 workspaceId 隔离 |
| 移动端侧边栏 | ✅ | 抽屉式 |
| 笔记排序 | ✅ | 手动/时间/标题 |
| 批量操作 | ✅ | 多选移动、AI 批量标签 |
| 笔记本内展开笔记 | ✅ | 侧边栏直接显示笔记列表 |
新建笔记本 → 创建子笔记本 → 新建笔记 → 编辑笔记
↓ ↓ ↓ ↓
右键菜单 右键菜单 笔记列表 编辑器
选择图标 拖拽排序 拖拽移动 收藏/置顶
设置颜色 移动位置 排序筛选 标签管理
| 组件 | 路径 | 职责 |
|---|---|---|
| Sidebar | frontend/src/components/Sidebar.tsx |
侧边栏主组件,文档树渲染 |
| NoteList | frontend/src/components/NoteList.tsx |
笔记列表,过滤和排序 |
| EditorPane | frontend/src/components/EditorPane.tsx |
笔记编辑器 |
| WorkspaceSwitcher | frontend/src/components/WorkspaceSwitcher.tsx |
工作区切换器 |
| NavRail | frontend/src/components/NavRail.tsx |
导航轨道(桌面端侧边导航) |
| AppContext | frontend/src/store/AppContext.tsx |
全局状态管理 |
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | /api/notebooks |
获取笔记本树(支持 workspaceId) |
| POST | /api/notebooks |
创建笔记本 |
| PUT | /api/notebooks/:id |
更新笔记本 |
| DELETE | /api/notebooks/:id |
删除笔记本(软删除) |
| PUT | /api/notebooks/:id/move |
移动笔记本 |
| PUT | /api/notebooks/reorder/batch |
批量排序 |
| GET | /api/notes |
获取笔记列表 |
| GET | /api/search |
全文搜索 |
| GET | /api/tags |
获取标签列表 |
notebooks 表:
| 字段 | 类型 | 说明 |
|---|---|---|
| id | TEXT (PK) | UUID |
| userId | TEXT | 所属用户 |
| workspaceId | TEXT | 所属工作区(NULL = 个人空间) |
| parentId | TEXT | 父笔记本 ID(NULL = 根级) |
| name | TEXT | 笔记本名称 |
| icon | TEXT | Emoji 图标 |
| color | TEXT | 颜色 |
| sortOrder | INTEGER | 排序序号 |
| isExpanded | INTEGER | 是否展开 |
| isDeleted | INTEGER | 软删除标记 |
- SEO Title: 文档树使用教程 - nowen-note 笔记管理指南
- Meta Description: 了解如何使用 nowen-note 的文档树功能管理笔记。支持无限层级笔记本、拖拽排序、标签、收藏、全文搜索、工作区协作。
- Keywords: nowen-note, 文档树, 笔记本, 笔记管理, 知识库, 标签, 收藏, 工作区, 私有部署
- Slug: /docs/tree-tutorial
- OpenGraph Title: 文档树使用教程 - 用文件夹的方式管理所有笔记
- OpenGraph Description: nowen-note 文档树功能详解:创建多级笔记本、拖拽排序、标签分类、全文搜索、团队协作。从零开始管理你的知识。
- README 摘要: 📂 文档树使用教程 - 学习如何用无限层级笔记本管理你的笔记