跳到正文
网页珍奇柜Web Curio

代达罗斯:浏览器里的桌面系统

daedalOS,Dustin Brett,2020 年

正在布展…

本柜的现场复刻:按原作的技术思路从零编写,不含原作的代码和素材。为什么不直接展出原作:原作打包了第三方游戏、系统镜像和模型(许可证混杂、约 406 MB),无法收录;这里从零写了一个现代风格的网页桌面 Atrium:极光动态壁纸、毛玻璃任务栏与可搜索的开始菜单、可拖动/缩放/最大化/最小化(带动画)的窗口、右键菜单,以及共享同一个内存文件系统的文件管理器、终端(ls/cd/cat/mkdir/touch/rm/echo >/tree/open 等)、文本编辑器、图片查看器和设置。离开即重置,不做任何存储。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步基于 BrowserFS 的虚拟文件系统,持久化到 IndexedDB
  2. 第 2 步窗口管理器用 React 组件实现拖拽、缩放、最小化与层级
  3. 第 3 步按文件扩展名分发给内置应用:js-dos、Webamp、v86、Monaco 编辑器等
  4. 第 4 步桌面壁纸用 Vanta 风格的 WebGL 动画在 OffscreenCanvas 中运行
  5. 第 5 步开始菜单、任务栏、右键菜单都仿照 Windows 的交互细节

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Build a window manager where each window is an absolutely positioned component with drag, resize, focus-to-front (z-index stack) and minimise-to-taskbar behaviour. Back it with a virtual filesystem (BrowserFS or an IndexedDB key-value store) and a registry that maps file extensions to app components. Embed existing web apps such as js-dos, Webamp or a code editor as those apps. Add a desktop icon grid with drag-and-drop from the real OS, a start menu, and an animated wallpaper rendered off the main thread.

档案

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Opened https://dustinbrett.com (200); repo DustinBrett/daedalOS exists, licence MIT via GitHub API.