Excalidraw新增收藏夹功能，重要画布快速访问

Excalidraw新增收藏夹功能，重要画布快速访问

在远程协作日益成为常态的今天，一个设计草图能否在五分钟内被团队成员找到，往往决定了会议是否要推迟半小时。Excalidraw 作为技术团队钟爱的手绘风白板工具，近年来用户创建的画布数量激增——从系统架构图到敏捷看板，再到临时头脑风暴的涂鸦，项目迭代留下的“数字足迹”越来越多。然而，当关键图表淹没在几十页滚动条之后，所谓的“高效协作”也就打了折扣。

正是在这种背景下，Excalidraw 推出了看似简单却直击痛点的新功能：收藏夹（Favorites）。它不炫技、不复杂，却实实在在地解决了“我刚才那个图放哪儿了？”这一高频困扰。这个功能背后的技术实现，远比表面上的“点个星标”来得讲究。

从一次误操作说起：为什么我们需要收藏？

设想这样一个场景：你刚用 AI 辅助生成了一份微服务通信流程图，结构清晰、标注完整，准备下周全员会上讲解。几天后打开 Excalidraw，却发现它混迹于二十多个未命名的测试画布中，标题还是默认的“Untitled-3”。手动翻找耗时不说，还可能因命名模糊而误删。

这正是信息过载下典型的“访问效率危机”。传统的解决方案无非三种：

• 文件夹分类：建立层级目录，但维护成本高，且容易陷入“该归到‘架构’还是‘服务治理’？”的哲学问题；
• 标签系统：灵活但依赖用户自觉打标，搜索仍需输入关键词；
• 最近使用列表：被动记录，无法保留长期价值资产。

而收藏夹走的是另一条路：主动标记 + 固定入口 + 极低认知负担。它不像文件夹那样要求你构建知识体系，也不像标签那样需要记忆规则，只需一次点击，就能把某个画布“钉”在最顺手的位置。

这种机制特别适合高频复用的核心资源，比如：
- 团队通用的技术栈示意图
- 新人入职必读的系统拓扑图
- 每周站会固定的看板模板

它们不需要复杂的组织逻辑，只需要“一眼可见”。

藏在哪里？前端状态与本地存储的默契配合

收藏夹的本质，并不是复制一份画布内容，而是对已有资源的元数据标注。换句话说，它只是给某个画布 ID 打了个“重点”标记，然后在特定位置集中展示这些被标记的对象。

整个流程可以拆解为四个关键环节：

1. 用户触发
   在画布列表或详情页点击“添加到收藏”按钮，前端捕获事件并提取当前画布的唯一标识（fileId）。

2. 状态更新
   应用内部的状态管理器（如 Zustand 或 React Context）接收到指令，将该fileId插入用户的“收藏列表”数组头部，并自动去重。

3. 持久化落地
   更新后的列表立即序列化为 JSON 字符串，写入浏览器的localStorage。这样即使刷新页面或重启浏览器，收藏状态依然存在。

4. 视图渲染
   主界面读取状态中的收藏列表，逐一请求对应画布的标题和缩略图（按需加载），并在侧边栏以链接形式呈现。

这里有个精巧的设计权衡：为什么不直接存整个画布数据？

答案是性能与适用性。如果收藏时复制画布内容，不仅占用更多存储空间，还会导致后续修改不同步。而仅保存 ID，则天然支持“动态引用”——无论原画布如何更新，收藏项始终指向最新版本。

此外，这种模式完美兼容 Excalidraw 的 P2P 共享特性。即便在无服务器部署环境下（如通过 WebSeed 分享链接），只要用户本地有记录，就能正常访问已收藏的离线画布。

多设备同步难题：最后写入优先的现实妥协

目前收藏状态仅存储在本地，这意味着如果你在公司电脑上收藏了一个画布，在家里的笔记本上是看不到的。这显然不符合现代工作流的需求。

那么，能不能做到跨设备同步？

技术上当然可行，但会引入新的复杂性。例如：

• 使用云端账户系统统一存储收藏列表；
• 在多端登录时监听状态变更，实现实时推送；
• 处理冲突：同一画布在一端被收藏、另一端被移除，该如何合并？

Excalidraw 当前采取了一种务实策略：暂不提供实时同步，但在未来可通过扩展支持“最后写入优先”（Last Write Wins, LWW）的合并逻辑。也就是说，当你下次登录时，客户端上传本地最新状态，覆盖服务器旧数据。

这种方式虽然不能保证强一致性，但对于低频变更的操作（谁会一天点几十次收藏？）来说，已经足够实用。更重要的是，它避免了早期就引入复杂的后端架构，保持了轻量化定位。

代码是怎么写的？一个 Zustand Store 的启示

以下是模拟 Excalidraw 收藏功能的核心状态管理模块，采用 TypeScript + React + Zustand 实现：

// favoritesStore.ts import { create } from 'zustand'; interface Favorite { fileId: string; title: string; timestamp: number; } interface FavoritesState { favorites: Favorite[]; addFavorite: (file: Omit<Favorite, 'timestamp'>) => void; removeFavorite: (fileId: string) => void; isFavorited: (fileId: string) => boolean; } export const useFavoritesStore = create<FavoritesState>((set, get) => ({ favorites: JSON.parse(localStorage.getItem('excalidraw.favorites') || '[]'), addFavorite: (file) => { const newEntry = { ...file, timestamp: Date.now() }; const updated = [newEntry, ...get().favorites.filter(f => f.fileId !== file.fileId)]; localStorage.setItem('excalidraw.favorites', JSON.stringify(updated)); set({ favorites: updated }); }, removeFavorite: (fileId) => { const filtered = get().favorites.filter(f => f.fileId !== fileId); localStorage.setItem('excalidraw.favorites', JSON.stringify(filtered)); set({ favorites: filtered }); }, isFavorited: (fileId) => { return get().favorites.some(f => f.fileId === fileId); } }));

这段代码有几个值得借鉴的工程实践：

• 初始化容错：从localStorage恢复数据时，使用|| '[]'防止解析 null 报错；
• 自动去重：添加前先过滤同 ID 项，防止重复收藏污染列表；
• 时间戳记录：便于后续实现排序（如按收藏时间倒序）；
• 单一数据源：所有组件通过 Hook 订阅状态，确保视图一致性。

UI 层的消费也非常简洁：

// FavoritesSidebar.tsx import { useFavoritesStore } from './favoritesStore'; const FavoritesSidebar = () => { const { favorites } = useFavoritesStore(); if (favorites.length === 0) { return <p>暂无收藏画布</p>; } return ( <div className="favorites-list"> <h3>⭐ 我的收藏</h3> {favorites.map((fav) => ( <a key={fav.fileId} href={`/#/file/${fav.fileId}`} className="favorite-item"> {fav.title} </a> ))} </div> ); };

完全响应式，无需手动刷新，状态一变，视图即刻更新。

当 AI 遇见收藏夹：让智能产出不再“转瞬即逝”

如果说收藏夹是个小功能，那它真正发光的地方，是在与 AI 功能结合的场景中。

如今越来越多的团队开始使用 AI 自动生成图表——输入一段自然语言描述，几秒内就能输出一张初步架构草图。但问题也随之而来：AI 生成的内容太容易丢了。

没有命名、未归类、关闭即忘。很多高质量的输出就这样消失在历史记录的深处，下次还得重新生成一遍。

这时候，收藏夹就成了“成果固化”的锚点。

设想一个增强版工作流：

1. 用户输入：“画一个包含认证网关、订单服务和库存服务的分布式系统图。”
2. 系统调用内置 AI 模型（如 Mermaid 解析器或自研 SVG 生成器），生成初始布局；
3. 用户稍作调整后保存，并主动加入收藏夹；
4. 后续讨论直接从收藏夹调出，新人培训也可将其列为必读资料。

这样一来，AI 不再只是一个“临时助手”，其产出变成了可沉淀、可复用的知识资产。收藏夹则扮演了“价值筛选器”的角色——只有经过人工确认且被认为有价值的输出才会被保留。

更进一步，未来甚至可以实现：
-AI 主动推荐收藏：检测到某张图被多次访问或广泛引用，提示“是否加入收藏？”
-团队共享收藏集：创建“Onboarding Docs”、“核心架构”等公共收藏组，供全体成员查看；
-权限感知展示：私有画布的收藏仅对本人可见，公共画布则显示“已被 8 人收藏”。

这些扩展都将使收藏夹从个人工具升级为团队级知识管理组件。

工程落地中的那些细节考量

别看功能简单，真要做得好，还得考虑不少用户体验和性能边界的问题。

控制收藏数量，防“过度收藏症”

人性如此：一旦有了收藏功能，就忍不住想把所有东西都收进去。结果收藏夹变成第二个“全部文件”列表，失去了“高频直达”的意义。

建议设置软性上限，比如最多收藏 50 项。超过时弹出提醒：“您的收藏已达上限，请清理不再常用项。”既不限制自由，又引导理性使用。

移动端体验优化

手机屏幕寸土寸守，侧边栏常被折叠。此时可将收藏入口收进一个星形图标按钮，点击后浮层展开，避免挤占绘图区域。

权限与隐私处理

若某画布为私有链接，其收藏行为不应暴露给他人；而对于公开画布，可适度展示社交信号，如“XX 已收藏”，增强信任感。

未来的进化方向

• 支持分组分类：如“架构图”、“流程图”、“会议模板”等标签式分组；
• 智能排序：结合访问频率、最近使用时间、AI 评分等因素动态排序；
• 与全局搜索联动：在搜索结果中标记“已收藏”，提升辨识度。

小功能，大价值：好的设计往往是克制的

Excalidraw 的收藏夹没有花哨的动画，也没有复杂的权限体系，但它精准命中了一个真实而普遍的痛点：如何让重要的东西永远不丢？

它的技术实现极为克制：前端状态 + 本地存储 + 扁平列表。没有引入数据库、不需要用户登录、不影响现有架构。这种“最小可行方案”恰恰体现了优秀工程文化的精髓——用最简单的手段解决最实际的问题。

更重要的是，它为未来的协作范式打开了新思路：在 AI 加速内容生成的时代，我们面临的不再是“会不会画”，而是“画完之后怎么办”。收藏夹虽小，却是连接“智能生成”与“长期复用”的关键桥梁。

对于开发者而言，这个功能也是一次生动的教学案例：不必追求大而全，只要洞察用户真实场景，哪怕是一个星标按钮，也能成为提升生产力的关键拼图。

或许，真正优秀的工具，就是那些让你用了很久才意识到“原来我一直离不开它”的存在。