Skip to content

Latest commit

 

History

History
492 lines (329 loc) · 15.9 KB

File metadata and controls

492 lines (329 loc) · 15.9 KB

文档树 / 笔记本树使用教程

用像文件夹一样清晰的结构,管理你的所有笔记。


目录

  1. 文档树是什么?
  2. 它适合管理什么?
  3. 创建第一个笔记本
  4. 创建子笔记本
  5. 在文档树中管理笔记
  6. 搜索、标签、收藏如何配合
  7. 个人空间和工作区里的文档树
  8. 移动端使用方法
  9. 最佳实践
  10. 常见问题
  11. 下一步推荐阅读

1. 文档树是什么?

文档树是 nowen-note 左侧面板中用来组织笔记的核心结构。

它长得像你电脑上的文件夹——你可以创建笔记本(相当于文件夹),在笔记本里创建笔记,还可以在笔记本里继续创建子笔记本,想嵌套多少层都行。

[截图:左侧文档树区域,展示多级笔记本结构]

和普通文件夹的区别:

特性 电脑文件夹 nowen-note 文档树
存放内容 文件、子文件夹 笔记、子笔记本
搜索 仅文件名 全文搜索(标题+正文)
标签 不支持 支持彩色标签
收藏 不支持 一键收藏
回收站 系统级 内置回收站,可恢复
图标 系统图标 自定义 Emoji 图标
排序 手动/名称 手动拖拽/时间/标题

2. 它适合管理什么?

文档树适合管理任何需要「分门别类」的内容:

  • 按项目分类:前端项目、后端项目、设计方案
  • 按知识领域:编程、读书笔记、英语学习
  • 按生活/工作分类:工作、生活、旅行、健康
  • 按资料类型:文章收藏、灵感记录、会议纪要

💡 小提示:笔记本只是组织方式,不是内容本身。同一篇笔记只能属于一个笔记本,但可以用标签实现「交叉分类」。


3. 创建第一个笔记本

步骤

  1. 打开 nowen-note,看左侧边栏
  2. 点击「笔记本」区域上方的 按钮
  3. 输入笔记本名称,例如「我的笔记」
  4. 按回车确认

[截图:点击左侧 + 创建笔记本]

创建完成后,你会在侧边栏看到新笔记本,左侧带有一个 📓 默认图标。

给笔记本换个图标

右键点击笔记本 → 选择「更换图标」→ 从 Emoji 面板里选一个你喜欢的。

[截图:Emoji 图标选择器]

常用图标推荐:

  • 📘 学习笔记
  • 💼 工作项目
  • 🎨 设计灵感
  • 📚 读书笔记
  • 🌱 个人成长

4. 创建子笔记本

子笔记本就是「笔记本里的笔记本」,帮你把大类再细分。

方法一:右键菜单

  1. 右键点击一个已有的笔记本
  2. 选择「新建子笔记本」
  3. 输入名称,按回车

[截图:右键菜单 - 新建子笔记本]

方法二:拖拽移动

你也可以把一个已有的笔记本拖到另一个笔记本下面,变成它的子笔记本。

  1. 按住一个笔记本
  2. 拖到目标笔记本上方
  3. 看到「放在此处作为子笔记本」提示后松手

[截图:拖拽笔记本到另一个笔记本下方]

💡 小提示:子笔记本可以无限嵌套。比如「学习」→「编程」→「前端」→「React」,想分多细都可以。


5. 在文档树中管理笔记

5.1 在笔记本里新建笔记

  1. 点击左侧的笔记本
  2. 中间笔记列表区域会出现「新建笔记」按钮
  3. 点击即可创建新笔记

[截图:选中笔记本后,笔记列表中的新建按钮]

你也可以右键点击笔记本 → 选择「新建笔记」,直接在该笔记本下创建。

5.2 移动笔记到其他笔记本

  1. 在笔记列表中右键点击一篇笔记
  2. 选择「移动到…」
  3. 在弹出的笔记本树中选择目标笔记本
  4. 点击「移动」

[截图:移动笔记弹窗,展示笔记本树形选择器]

5.3 拖拽笔记到笔记本

你也可以直接把笔记拖到左侧的某个笔记本上:

  1. 从笔记列表中按住一篇笔记
  2. 拖到左侧目标笔记本
  3. 松手即可

[截图:拖拽笔记到笔记本]

5.4 笔记排序

笔记列表支持多种排序方式:

  • 手动排序:拖拽笔记调整顺序(默认)
  • 按更新时间:最近修改的排在前面
  • 按创建时间:最新创建的排在前面
  • 按标题:按标题字母/拼音排序

在笔记列表顶部点击排序按钮切换。

[截图:排序选项下拉菜单]

5.5 折叠和展开笔记本

  • 点击笔记本左侧的 箭头,折叠子级
  • 点击 箭头,展开子级

折叠后文档树更清爽,适合笔记本很多的场景。

5.6 移动笔记本

如果想把一个笔记本(及其所有子笔记本和笔记)移动到另一个位置:

  1. 右键点击笔记本
  2. 选择「移动至…」
  3. 在弹窗中选择新的父级笔记本,或选择「移动到根级」
  4. 点击「移动」

[截图:移动笔记本弹窗]

5.7 重命名笔记本

右键点击笔记本 → 选择「重命名」→ 输入新名称 → 按回车。

5.8 删除笔记本

右键点击笔记本 → 选择「删除笔记本」→ 确认。

⚠️ 注意:删除笔记本后,该笔记本及其所有子笔记本下的笔记都会进入回收站。你可以在侧边栏底部的「回收站」中恢复它们。

5.9 导出笔记本

右键点击笔记本 → 选择「导出为 Markdown」,可将整个笔记本的所有笔记导出为 Markdown 文件。


6. 搜索、标签、收藏如何配合

文档树是主要的组织方式,但不是唯一的。你可以结合以下功能让笔记管理更灵活。

6.1 全文搜索

在侧边栏顶部的搜索框中输入关键词,会同时搜索笔记标题和正文内容。

[截图:搜索框和搜索结果]

搜索结果会高亮显示匹配的文字,点击即可跳转到对应笔记。

6.2 标签

标签是独立于文档树的另一种分类方式。

给笔记添加标签:

  1. 打开一篇笔记
  2. 在编辑器顶部的标签区域,输入标签名称
  3. 可以选择标签颜色

[截图:编辑器顶部标签区域]

查看某个标签下的所有笔记:

  • 在侧边栏底部的「标签」区域,点击一个标签
  • 中间列表会显示所有带该标签的笔记

💡 文档树 vs 标签:文档树解决「这篇笔记属于哪个分类」(一对一),标签解决「这篇笔记涉及哪些主题」(多对多)。两者配合使用效果最佳。

6.3 收藏

在笔记列表中右键点击笔记 → 选择「收藏」。或者在编辑器中点击标题栏的 ⭐ 按钮。

点击侧边栏的「收藏」入口,可以看到所有收藏的笔记。

6.4 置顶和锁定

  • 置顶:右键笔记 → 「置顶」,该笔记会固定在列表最上方
  • 锁定:右键笔记 → 「锁定笔记」,锁定后无法编辑,防止误改

7. 个人空间和工作区里的文档树

nowen-note 支持「个人空间」和「团队工作区」两种模式。

7.1 个人空间

默认就是你的个人空间。所有笔记本和笔记只有你自己能看到。

7.2 工作区

工作区是团队共享的空间。你可以在侧边栏顶部的工作区切换器中:

  • 切换到已有工作区
  • 创建新工作区
  • 通过邀请码加入工作区

[截图:工作区切换器下拉菜单]

切换到某个工作区后,左侧文档树会显示该工作区下的笔记本。个人空间和工作区的笔记本完全隔离,互不影响。

7.3 工作区中的协作

  • 工作区中的笔记本和笔记由团队成员共享
  • 不同成员可以有不同的角色(管理员/编辑/评论/查看)
  • 每个成员可以独立收藏工作区中的笔记

8. 移动端使用方法

nowen-note 的移动端(Android App / 手机浏览器)完整支持文档树功能。

8.1 打开侧边栏

在移动端,点击左上角的 菜单按钮,即可打开侧边栏,查看完整文档树。

[截图:移动端侧边栏]

8.2 操作方式

操作 桌面端 移动端
打开笔记本 单击 单击
新建笔记本 顶部 + 按钮 顶部 + 按钮
更多操作 右键菜单 长按菜单
移动笔记 拖拽 长按 → 移动到…

[截图:移动端长按笔记本弹出菜单]

💡 小提示:移动端侧边栏会以抽屉形式从左侧滑出,点击笔记后自动收起,给你更大的编辑空间。


9. 最佳实践

9.1 按项目分类

适合需要围绕具体项目工作的场景:

工作项目
├── 前端重构
│   ├── 需求文档
│   ├── 技术方案
│   └── 会议记录
├── 后端优化
└── 产品设计

9.2 按知识领域分类

适合长期积累知识的场景:

学习笔记
├── 编程
│   ├── JavaScript
│   ├── Python
│   └── 数据库
├── 读书笔记
└── 英语学习

9.3 按生活/工作分类

适合日常记录:

生活
├── 旅行计划
├── 健康记录
├── 理财笔记
└── 影评书评

9.4 配合标签做交叉管理

文档树解决「属于哪里」,标签解决「涉及什么」。

例如一篇「React 性能优化」的笔记:

  • 文档树位置:学习笔记 → 编程 → 前端
  • 标签:#性能 #React #优化

这样你可以:

  • 从文档树找到它(按知识领域)
  • 从标签 #性能 找到它(跨领域查找性能相关内容)

9.5 不要建太深的层级

虽然 nowen-note 支持无限层级,但建议保持在 2~4 层。层级太深会导致:

  • 找笔记时需要点很多次
  • 侧边栏横向滚动

如果发现自己建了超过 4 层,考虑用标签替代深层分类。


10. 常见问题

Q:一个笔记可以放在多个笔记本里吗?

不可以。每篇笔记只能属于一个笔记本。但你可以用标签实现「多分类」——给笔记打上多个标签,从不同标签入口都能找到它。

Q:删除笔记本后,笔记还在吗?

笔记本删除后,该笔记本(及其所有子笔记本)下的笔记会进入回收站。你可以在侧边栏底部的「回收站」中恢复它们。

回收站中的笔记会一直保留,直到你手动「清空回收站」。

Q:子笔记本有层数限制吗?

没有。理论上可以无限嵌套。但建议保持 2~4 层以获得最佳使用体验。

Q:拖拽排序的顺序会同步到其他设备吗?

会。手动排序后,排序结果会同步到你登录的所有设备。

Q:工作区里的笔记本和个人空间的笔记本会混在一起吗?

不会。个人空间和工作区的笔记本完全隔离。切换工作区后,侧边栏只显示当前空间的笔记本。

Q:如何批量移动笔记到另一个笔记本?

在笔记列表中,按住 Ctrl/Cmd 点击多篇笔记(或 Shift 点击范围选择),然后右键选择「移动到…」。

Q:如何给笔记本更换图标?

右键点击笔记本 → 选择「更换图标」→ 在 Emoji 面板中选择喜欢的图标。


11. 下一步推荐阅读

  • 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 全局状态管理

相关 API

方法 路径 说明
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 元信息

  • SEO Title: 文档树使用教程 - nowen-note 笔记管理指南
  • Meta Description: 了解如何使用 nowen-note 的文档树功能管理笔记。支持无限层级笔记本、拖拽排序、标签、收藏、全文搜索、工作区协作。
  • Keywords: nowen-note, 文档树, 笔记本, 笔记管理, 知识库, 标签, 收藏, 工作区, 私有部署
  • Slug: /docs/tree-tutorial
  • OpenGraph Title: 文档树使用教程 - 用文件夹的方式管理所有笔记
  • OpenGraph Description: nowen-note 文档树功能详解:创建多级笔记本、拖拽排序、标签分类、全文搜索、团队协作。从零开始管理你的知识。
  • README 摘要: 📂 文档树使用教程 - 学习如何用无限层级笔记本管理你的笔记