在知识库里直接跑Web应用Cabinet嵌入式HTML App的妙用与实现【免费下载链接】cabinetAI-first knowledge base and startup OS项目地址: https://gitcode.com/gh_mirrors/cabinet3/cabinetCabinet 是一个 AI-first 的自托管知识库与创业操作系统你的文件、AI 代理全部以 Markdown 文件形式保存在本地磁盘上。它还有一个常被忽略的隐藏能力在知识库里直接运行 Web 应用——把一个.html文件放进目录Cabinet 就会把它当作一个实时网页渲染出来而不是一堆代码。为什么要在知识库里跑 Web 应用大多数笔记和知识库工具只处理文本而 Cabinet 的设计哲学是一切皆文件详见 README.md。这意味着零部署一个独立的 HTML 文件就是一个可运行的页面不需要服务器、不需要构建工具️与文档同目录管理你的看板、小工具、表单可以直接和笔记放在一起被 AI 代理看到、编辑、版本化管理目录即 Git 仓库AI 可参与AI 代理可以直接读取和修改这些 HTML 应用相当于让 AI 帮你维护一个内部系统快速上手3 步在知识库里打开 HTML 应用放置文件把任何独立的.html/.htm文件放进你的 Cabinet 目录例如dashboard/index.html侧边栏打开在左侧文件树中点击该文件它会默认以网页预览模式打开而不是源码随时切换顶部工具栏提供Preview / Source分段按钮一键在渲染的网页和高亮源码之间切换也可以在侧边栏文件上右键切换显示模式这个按文件记忆你的偏好的逻辑写在 src/lib/ui/html-view-mode.ts每个文件的显示模式preview或source按路径持久化到localStorage并通过自定义事件实时广播给已打开的查看器。核心判断就一行isHtmlPath()用正则/\.html?$/i识别 HTML 文件因此独立 HTML 文件默认进入网页预览源码只需一次点击即可看到src/lib/ui/html-view-mode.ts。实现原理一个沙箱 iframe 搞定整个预览功能的核心在 src/components/editor/source-viewer.tsxiframe src{assetUrl} sandboxallow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation-by-user-activation /几个关键设计本地资产服务预览请求的是/api/assets/{path}由 src/app/api/assets/[...path]/route.ts 提供。该路由内置了完整的 MIME 类型表正确地把.html以text/html返回因此页面里的相对路径 CSS、JS、图片都能正常加载沙箱隔离sandbox属性精确放开了脚本、同源、表单、弹窗权限HTML 应用可以完整交互但被限制在 iframe 内与知识库主界面隔离源码模式同样好用切到 Source 后HTML 会以xml语法高亮、带行号显示并支持复制、换行、下载和查看原始文件侧边栏右键菜单的渲染为网页 / 显示源码切换逻辑位于 src/components/sidebar/tree-node.tsx。进阶在 Markdown 文档里嵌入外部页面除了独立 HTML 文件Cabinet 的 Markdown 编辑器还支持把外部网页/视频嵌入到文档中。实现见 src/components/editor/extensions/embed-extension.tsx粘贴 YouTube、Vimeo、Twitter、Spotify 等链接时会自动识别并转为内嵌块代码里通过detectEmbed(url)检测提供商未识别的链接会渲染为通用iframe嵌入块宽度自适应、支持 16:9 比例嵌入块可选中、拖拽悬停时还有一键转为普通链接的按钮src/components/editor/extensions/embed-extension.tsx实用场景清单场景做法数据看板让 AI 生成一个只读静态 HTML放在知识库里随时打开交互式表单/问卷单文件 HTML 表单直接在预览中填写可视化原型设计稿以 HTML 形式存档与 PRD 文档同目录管理演示素材用嵌入块把视频、外部页面插进项目文档快速开始Cabinet 完全通过npx运行无需全局安装npx create-cabinetlatest cd cabinet npm run dev:all打开 http://localhost:4000 完成 5 个问题的引导流程即可。完整 CLI 参考见 docs/CABINETAI.md编辑器能力总览见 docs/EDITOR.md。延伸阅读 编辑器设计docs/EDITOR.md 嵌入扩展源码src/components/editor/extensions/embed-extension.tsx HTML 预览查看器src/components/editor/source-viewer.tsx 本地资产路由src/app/api/assets/[...path]/route.ts 小提示因为知识库目录本身就是一个 Git 仓库你放进来的 HTML 应用会随每次编辑自动提交版本历史——改坏了也能一键回滚。【免费下载链接】cabinetAI-first knowledge base and startup OS项目地址: https://gitcode.com/gh_mirrors/cabinet3/cabinet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考