Karakeep 界面全景指南从首页到分享深入解析书签管理应用的核心功能模块【免费下载链接】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是一款可自托管的书签一切应用支持保存链接、笔记与图片并内置 AI 自动打标签与全文搜索能力。本文以官方文档中的界面截图为骨架结合仓库源码逐一拆解首页、标签、列表、书签预览、设置与分享等核心模块的布局结构、功能入口与底层实现帮助你在自托管部署后快速上手也为二次开发提供源码级导航。一、Homepage核心工作台的整体布局Karakeep 的首页Homepage是登录后的主工作台官方文档截图展示了三个核心区域顶部导航栏、左侧边栏与主内容卡片流。整个仪表盘的布局在 dashboard/layout.tsx 中定义由SidebarLayout包裹其中Sidebar接收两组导航项主导航Primary NavigationHome、Search、Tags、Highlights、Archive 五个入口分别对应/dashboard/bookmarks、/dashboard/search、/dashboard/tags、/dashboard/highlights与/dashboard/archive源码中以items(t)数组构建见 layout.tsx。其中 Search 入口由插件系统动态注入——只有当PluginManager.isRegistered(PluginType.Search)成立时才出现这正是 Karakeep 可插拔架构的直观体现列表区LISTS通过extraSections挂载AllLists组件展示All Lists、Favourites、In the News、Wishlist等列表及各自的书签数量支持折叠与共享列表分组见 AllLists.tsx。主内容区顶部是New Item快速输入框占位文本为Paste a link, write a note or drop an image...对应前端UploadDropzone组件支持粘贴链接、书写笔记或拖拽图片三种新建方式下方为书签卡片流每张卡片展示缩略图、标题、来源站点、标签与日期等元信息。截图底部可见版本号如 v0.32.0便于部署后核对版本。二、Homepage (Dark Mode)深色主题与视觉一致性深色模式截图与浅色模式完全同构仅在色彩上反转深色背景、浅色文字与图标。从源码结构看主题切换由 theme-provider.tsx 与 tooling/tailwind/web.ts 中的 CSS 变量体系支撑所有组件均通过bg-background、text-foreground、bg-muted/40等语义化 class 引用主题色例如 BookmarkPreview.tsx 中的bg-background与bg-muted/40因此主题切换无需改动任何业务组件。这一设计对需要长期阅读的用户与自托管场景下的夜间使用尤为重要也是二次开发自定义品牌色的入口。三、Tags标签体系与 AI 自动打标标签页是 Karakeep AI 自动打标能力的集中展示。截图头部工具栏包含Create Tag、Bulk Edit、Drag Drop Merging三个操作入口以及搜索框与 Sort by Usage 排序下拉框。页面内容被划分为两个明确分组Your Tags由用户手动附加的标签AI Tags由 AI 模型自动附加的标签截图中可见 Home Decor、Open Source、Read-it-later 等自动分类结果每个标签后标注使用计数。这种人工标签与AI 标签分离的模型让用户既能享受自动化的便利又能清晰区分标签来源。从数据模型看书签的标签关系及 AI 打标结果存储于 db/schema.ts 的标签相关表结构而批量编辑、合并等操作对应前端 tags/ 目录下的组件。标签页面路由位于/dashboard/tags见 layout.tsx。四、Lists列表管理与共享权限Lists 页面All Lists用于组织书签截图显示三个维度的信息头部标题、统计信息如 3 lists · 13 bookmarks与 New List 新建按钮Pinned Lists置顶列表区如 Favourites⭐️3 items与 Archive6 items附有描述性副标题All Lists全部列表区每个列表显示书签数量与可见性徽标Public / Private。源码层面列表的完整交互逻辑集中在 AllLists.tsx列表项支持拖放——将书签拖到列表项上即可完成归类通过useDropTarget与BOOKMARK_DRAG_MIME自定义 MIME 类型实现同时支持共享列表分组展示userRole区分 owner/editor/viewer见 AllLists.tsx 与 CollapsibleBookmarkLists这与截图中的 Public 徽标Mentions of Karakeep in the wild 等公开列表相对应说明列表既可私有也可对外分享协作。五、Bookmark Preview书签预览的阅读与元数据双栏书签预览是链接、笔记、图片三类书签的统一详情视图官方截图展示了其左内容右详情的双栏布局。前端核心实现是 BookmarkPreview.tsx值得关注的实现细节包括按书签类型分派内容渲染通过bookmark.content.type判断分别渲染LinkContentSection链接正文、TextContentSection笔记与AssetContentSection图片对应三种书签类型BookmarkTypes.LINK / TEXT / ASSET可折叠的详情侧栏右侧 1/3 宽度侧栏w-1/3 border-l bg-muted/40 p-5聚合了元数据、AI 摘要、标签、笔记、附件与高亮可点击PanelRightClose/PanelRightOpen图标折叠在窄屏下自动切换为 Content/Details 双 Tab 布局见 BookmarkPreview.tsx元数据展示BookmarkMetadata组件渲染创建时间fromNow相对时间 悬停显示完整时间、作者By ...、发布方Publisher与发布时间仅对 LINK 类型书签展示见 BookmarkPreview.tsxAI 摘要入口侧栏中的Summarize with AI按钮对应SummarizeBookmarkArea组件是 Karakeep AI 能力在阅读场景的直接体现详情区其余模块BookmarkTagsEditor标签编辑、NoteEditor笔记、AttachmentBox附件如 Banner Image、Full Page Archive、Screenshot、HighlightsBox高亮与底部ActionBar编辑、收藏、复制、分享等操作。右侧截图中展示的 Full Page Archive整页存档与 Screenshot截图正是爬虫/浏览器扩展在保存时生成的附件类型说明预览页是连接采集端与阅读端的关键枢纽。六、Settings用户设置与系统管理入口设置页Settings是账户与系统级配置的集中地。截图左侧导航菜单列出了全部设置分类User Info、Usage Statistics、AI Settings、RSS Subscriptions、Backups、Import/Export、API Keys、Broken Links、Webhooks、Rule Engine、Manage Assets。右侧面板展示了三类具体配置Basic Details姓名与邮箱等账号信息Security修改当前密码/新密码含明文切换的眼睛图标与保存按钮Options界面语言Interface Language默认 English与时区Timezone选择。这些分类与仓库目录高度对应RSS 订阅对应 feeds.ts 路由API Keys 对应 apiKeyScopes.ts 的密钥作用域校验Webhooks 对应 webhooks.tsRule Engine 对应 rules/ 组件。多语言切换则依赖 lib/i18n 下的 34 个语言 JSON 文件。也就是说设置页实际是 Karakeep 后端能力搜索、备份、自动化、集成的前端聚合入口自托管运维时建议逐一核对。七、Sharing移动端分享与快速收藏最后一张截图展示了 iOS 系统分享面板中的 Karakeep 扩展分享弹窗内可直接将网页加入书签Add Bookmark并显示书签标题、日期、阅读时长3 minute read与来源站点同时提供 Copy复制链接、Add to Reading List加入阅读列表等动作。这是 Karakeep 随处收藏体验的关键一环浏览器扩展与移动端分享扩展将采集入口嵌入系统级菜单。从仓库结构看移动端分享能力由 mobile/app/sharing.tsx 与 lib/shareBookmark.ts 实现桌面端浏览器扩展则位于 apps/browser-extension服务端对应的附件处理逻辑可参见 upload.ts。自托管部署后可分别安装浏览器扩展与移动端 App将系统分享菜单作为日常收藏入口。总结界面背后的架构脉络八张截图串起了 Karakeep 的完整用户旅程——采集分享/新建→ 组织标签与列表→ 阅读预览与 AI 摘要→ 管理设置与后台。与之对应的仓库路径分别为仪表盘布局 apps/web/app/dashboard/layout.tsx、列表交互 apps/web/components/dashboard/sidebar/AllLists.tsx、书签预览 apps/web/components/dashboard/preview/BookmarkPreview.tsx、移动端分享 apps/mobile/app/sharing.tsx 以及各业务路由 packages/api/routes。对照本文的界面截图与源码说明即可快速定位每个功能的前端组件与后端路由无论是日常使用、自托管排障还是二次开发都能按图索骥。【免费下载链接】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），仅供参考