Karakeep 界面全景导览从主页到分享面板的开源书签管理 UI 详解【免费下载链接】hoarderA self-hostable bookmark-everything app (links, notes and images) with AI-based automatic tagging and full text search项目地址: https://gitcode.com/GitHub_Trending/ho/hoarderKarakeep前身 Hoarder是一个以自托管为首要设计目标的开源 Bookmark Everything 应用支持收藏链接、笔记、图片与 PDF并借助 AI 自动打标签、全文检索等能力组织内容。本文以 v0.31.0 版本文档中的截图集为线索逐屏拆解其 Web 端的核心界面——主页、暗色模式、标签、列表、书签预览、设置与移动端分享面板——并结合 apps/web 的源码结构说明每个界面背后的实现模块与交互逻辑。读完本文你将能快速定位 Karakeep 的各个功能入口并理解其界面与代码组织方式之间的对应关系。界面总览布局与导航结构在进入具体截图之前先建立整体认知。Karakeep 的 Web 前端基于 Next.js 构建所有 Dashboard 页面共用同一个布局文件 apps/web/app/dashboard/layout.tsx它决定了整个应用的导航骨架侧边栏主功能区从该布局源码可见左侧导航按顺序渲染 Home、Search、Tags、Highlights、Archive 五个入口分别使用 Home、Search、Tag、Highlighter、Archive 图标来自lucide-react。其中 Search 入口被PluginManager.isRegistered(PluginType.Search)条件包裹——也就是说只有当系统启用了搜索插件如 packages/plugins/search-meilisearch时搜索页才会出现在侧边栏中。列表区主功能区下方通过AllLists组件apps/web/components/dashboard/sidebar/AllLists.tsx渲染用户创建的全部列表列表数据通过api.lists.list()从服务端预取。移动端侧边栏MobileSidebar在主功能区的五项之外额外把 All Lists 入口也放入导航对应/dashboard/lists页面。顶部工具栏截图右侧可见全局搜索框、设置入口、新建入口与用户头像与 apps/web/components/dashboard/header 目录下的头部组件对应。主内容区采用响应式网格展示书签卡片核心组件位于 apps/web/components/dashboard/bookmarks 目录其中BookmarksGrid.tsx负责网格布局、BookmarkCard.tsx负责单张卡片渲染、LinkCard.tsx/TextCard.tsx/AssetCard.tsx分别处理链接、笔记与图片/附件三类内容的差异化展示。Homepage主页与快捷新建入口主页是登录后的默认落地页路由为/dashboard/bookmarks。从截图可以看到三大区域快捷新建卡片NEW ITEM顶部提供 Paste a link, write a note or drop an image... 的输入框与 Save 按钮对应源码中的EditorCard.tsx与 UploadDropzone.tsx——后者意味着该区域同时支持拖拽文件上传图片、PDF 等附件可以直接拖入保存。书签卡片网格每张卡片展示内容预览图、标题、来源站点与日期、标签以及收藏星标和更多操作三点菜单按钮。标签渲染逻辑位于 TagList.tsx收藏状态对应BookmarkActionBar.tsx中的星标动作。可展开卡片部分内容如带步骤的食谱支持展开/折叠对应BookmarkLayoutAdaptingCard.tsx与NotePreview.tsx的预览逻辑让笔记类书签在网格内直接呈现结构化内容。卡片网格整体由BookmarksGrid.tsx渲染加载态由BookmarksGridSkeleton.tsx提供骨架屏当列表为空时NoBookmarksBanner.tsx会引导用户新建第一条书签。Homepage (Dark Mode)暗色模式同一主页在暗色模式下呈现为深灰背景、高对比度文字与更柔和的卡片层次。Karakeep 的暗色模式由 apps/web/components/theme-provider.tsx 驱动主题状态持久化在用户本地设置中见 apps/web/lib/userLocalSettings并在 Dashboard 布局的UserSettingsContextProvider中注入全局上下文。暗色模式的意义不止于视觉偏好对于以稍后阅读和长期收藏为核心场景的书签工具夜间使用是高频场景卡片与文字的反差直接影响阅读舒适度。从截图可以看出暗色模式下标签、星标与操作按钮均保持了可辨识的对比度说明主题变量在 tooling/tailwind 的设计令牌体系中是全局统一的而非逐组件硬编码。Tags标签管理与 AI 自动打标标签页/dashboard/tags承担两类标签的集中管理Your Tags用户手动创建的标签如截图中的 Youtube。AI Tags由 AI 自动生成的标签如 Home Decor、Open Source、Bookmark manager每个标签旁标注了使用次数。这正是项目AI-based automatic tagging能力的直接体现——系统在后台对收藏内容进行推断并打标相关推断逻辑可在 packages/shared/inference.ts 中查看它支持 OpenAI 兼容接口以及通过 Ollama 接入本地模型详见 docs/docs/03-configuration/02-different-ai-providers.md。页面顶部提供三个核心操作 Create Tag手动新建标签Bulk Edit批量编辑对应 apps/web/components/dashboard/tags 下的批量操作组件Drag Drop Merging标签拖拽合并用于清理语义重复的标签。此外页面还提供标签搜索框与 Sort by Usage按使用频率排序下拉方便在标签数量增长后快速定位。点击任一标签即可跳转到该标签下的书签列表路由/dashboard/tags/[tag]。Lists列表与协作列表页/dashboard/lists将书签组织成可分享的集合页面顶部显示列表总数与书签总数右侧提供 New List按钮。截图中的列表被分为两个分区Pinned固定的常用列表如 Favourites、Archive可附带描述Things I keep coming back toAll全部列表每项标注可见性Public / Private与包含的书签数量。列表的可见性支持公开分享这为协作场景提供了基础——公开列表可生成分享链接其他用户或未登录访客可以浏览该列表内容。列表相关的服务端逻辑位于 packages/api/routes/lists.tsWeb 端的列表管理与成员操作组件位于 apps/web/components/dashboard/lists。列表在侧边栏中也会实时展示通过 Dashboard 布局中的AllLists组件因此创建列表后无需进入列表页即可在任意页面切换上下文。Bookmark Preview书签预览与阅读视图点击任意书签卡片会进入预览页/dashboard/preview/[id]这是 Karakeep 信息密度最高的界面采用双栏结构左侧内容阅读区。默认呈现网页正文的净化阅读视图Reader View对应 apps/web/components/dashboard/preview/ReaderView.tsx页面顶部提供Reader View切换开关与阅读设置字号、字体等见ReaderSettingsPopover.tsx设置通过 apps/web/lib/readerSettings.tsx 持久化。正文的提取与净化逻辑在服务端完成见 packages/api/utils/readableContent.ts。不同内容类型链接 / 笔记 / 附件分别由LinkContentSection.tsx、TextContentSection.tsx、AssetContentSection.tsx渲染。右侧信息与操作面板从上到下包含标题与来源原始 URL 与站点信息链接到原文元数据作者、发布时间、标签如截图中的 TechCrunch、apps、productivitySummarize with AI一键调用 AI 生成摘要对应 SummarizeBookmarkArea.tsx笔记输入框为书签附加个人笔记NoteEditor.tsx附件区展示 Banner Image、Screenshot 等已归档资产AttachmentBox.tsx这与项目完整页面归档能力对应——通过 monolith 保存整页 HTML 以防链接失效link rot高亮区HighlightsBox.tsx展示从正文中标记保存的高亮片段高亮功能的后端路由在 packages/api/routes/highlights.ts。预览页还有一个容易被忽略的能力AI 摘要。启用 AI 后服务端会基于 packages/shared/prompts.ts 中的提示词模板对正文做摘要与标签推断同一套推断服务同时驱动了标签页中的 AI Tags。Settings用户设置中心设置页/dashboard/settings采用左侧菜单 右侧表单的经典布局从截图可见左侧菜单项与源码目录 apps/web/app/settings 一一对应设置项源码路由功能说明User Infoinfo基本信息、安全、语言与时区Usage Statisticsstats使用统计AI SettingsaiAI 提供商与模型配置RSS SubscriptionsfeedsRSS 订阅源管理Backupsbackups备份与恢复Import/Exportimport从 Chrome、Pocket 等导入API Keysapi-keysAPI 密钥管理Broken Linksbroken-links失效链接检测Webhookswebhooks事件通知Rule Enginerules规则引擎Manage Assetsassets资产存储管理右侧表单在截图示例中展示的是Basic Details / Security / Options分组Basic Details姓名与邮箱Security修改密码Current Password、New Password、Confirm New Password带密码可见性切换Options界面语言多语言支持见 apps/web/lib/i18n与时区底部Save按钮统一提交用户设置的服务端持久化逻辑见 packages/api/routes/users.ts。设置页还包含订阅管理入口subscription用于连接自托管的计费/订阅插件属于可选模块未启用时不影响其他设置项。Sharing移动端分享面板最后一张截图展示的是移动端场景下的分享面板用户在浏览器或系统分享菜单中选择将当前页面保存到 Karakeep。面板中可见Add Bookmark操作、页面预览卡片标题 来源 封面图以及与其他应用如 News、Messages、Reminders并列的应用快捷入口。这一交互对应两条产品路径移动端 AppKarakeep 提供 iOS 与 Android 客户端源码在 apps/mobile分享接入逻辑见 apps/mobile/lib/shareBookmark.ts系统级分享菜单可以直接把链接投递给 App 保存浏览器扩展桌面端则主要通过 Chrome 扩展 / Firefox 插件完成一键收藏源码在 apps/browser-extension扩展的保存页SavePage.tsx会在截图前自动抓取页面标题、描述与图片。无论是哪种客户端最终都通过同一套 packages/api 提供的 REST / tRPC 接口入库因此移动端分享、浏览器扩展与 Web 端手动添加三种入口保存的书签在数据上是完全一致的。结语从主页卡片网格到预览页双栏阅读从 AI 自动打标到移动端分享面板Karakeep 的界面设计始终围绕快速收纳 后续检索这一核心循环展开侧边栏保证全局导航可达快捷新建入口降低保存成本AI Tags 减少人工整理负担阅读视图与高亮则服务稍后读的深度使用。如果你想进一步对照界面与实现可以继续阅读以下源码入口布局与导航apps/web/app/dashboard/layout.tsx书签卡片与网格apps/web/components/dashboard/bookmarks预览页阅读视图apps/web/components/dashboard/preview设置页各模块apps/web/app/settingsAI 推断与打标packages/shared/inference.ts界面截图对应的原始图片均位于 docs/static/img/screenshots 目录本文档页面对应的版本化源文件为 docs/versioned_docs/version-v0.31.0/01-getting-started/02-screenshots.md。【免费下载链接】hoarderA self-hostable bookmark-everything app (links, notes and images) with AI-based automatic tagging and full text search项目地址: https://gitcode.com/GitHub_Trending/ho/hoarder创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考