PWT插件式工作台

框架式工作台 · 参考实现

一个把桌面小组件
当插件装的工作台

PWT(Workbench)把桌面小部件当作真正的插件来安装、运行与管理:自由画布随意摆放,每个插件同时拥有「精简组件」和「完整窗口」两种形态,同一个插件还能开多个窗口、各自独立。插件在清单里声明设置项,宿主自动渲染出设置界面。

  • React 18 + Vite 5 + TypeScript 5
  • Electron 桌面壳
  • 51 个单文件插件

实时预览

四页结构,一张自由画布

界面分桌面 / 插件 / 设置 / 我的四页,左侧菜单栏导航,左下角常驻登录状态。桌面本身是一块自由画布。

PWT Workbench — 桌面
PWT 工作台桌面页截图:自由画布上摆放着多个插件卡片,右下角是插件坞
  • 51个 plugin-lab 单文件桌面小工具
  • 23个 已镜像进工作台并带精简形态
  • 2种 渲染沙箱:ES Module 与 iframe
  • 多窗口独立 位置、尺寸、设置互不影响

核心特性

桌面该有的交互,一件都不少

从画布手势到插件协议,每一层都为「像用桌面一样用工作台」而设计。

自由画布

拖空白处平移、滚轮缩放、双击背景复位;拖卡片顶部栏移动,拖左右边缘调宽、拖下边缘调高、拖右下角同时调整。位置与尺寸都留在画布坐标系里。

双形态

每个插件同时拥有「精简组件」和「完整窗口」两种形态。精简形态是桌面上的小部件,点一下即展开成完整窗口;精简设置收在卡片设置的二级界面里,精简形态下默认展开。

多窗口独立

同一个插件可以开多个窗口,位置、尺寸、设置各自独立,关掉一个不影响另一个。开窗三个入口:右下角插件坞、卡片头的 ⧉、插件页的「+ 新建窗口」。

插件坞

位于右下角,是桌面唯一的「新建窗口」入口。最多同时显示 10 个,超出可搜索,还可以拖动排序,常用插件永远在手边。

声明式设置

插件在 manifest 里声明 settings.fields,支持 text / number / color / palette / font / select / cascade 七种字段,宿主自动渲染,不用改宿主源码。

背景样式

纯色、点阵、网格、光晕,或者换成自定义图片、自定义视频。桌面底色随你,插件永远清晰可读。

插件库

装、停用、隐藏、卸载

插件协议标准化(PluginManifest)。下面 12 个是已镜像进工作台、带精简形态的桌面小工具。

  • 药品管家精简形态 · 完整窗口
  • 喝水提醒精简形态 · 完整窗口
  • 番茄专注精简形态 · 完整窗口
  • 久坐管家精简形态 · 完整窗口
  • 待办清单精简形态 · 完整窗口
  • 倒数日精简形态 · 完整窗口
  • 快捷启动器拉取真实开始菜单应用
  • 音乐播放器精简形态 · 完整窗口
  • 世界时钟精简形态 · 完整窗口
  • 快速便签精简形态 · 完整窗口
  • 天气小部件精简形态 · 完整窗口
  • 习惯打卡精简形态 · 完整窗口

还有更多:桌面宠物、音量混合器、亮度色温…… plugin-lab 里共有 51 个单文件 HTML 桌面小工具,其中 23 个已镜像进工作台。快捷启动器能拉取系统开始菜单的真实应用(实测 164 个)并真正启动它们。

架构

插件协议 + 运行时 + 桌面交互

这是一个框架式工作台的参考实现,用来验证「插件协议 + 运行时 + 桌面交互」这套架构是否站得住。

插件协议 PluginManifest

每个插件用一份清单描述自己:标识、入口、渲染方式,以及声明式的设置字段。宿主只认协议,不认具体插件,因此新增插件不需要改动宿主源码。

settings.fields text / number / color palette / font / select / cascade

渲染层 IframeHost / ModuleHost

两种渲染方式各管一类插件:可信插件走 ES Module,由 ModuleHost 动态 import 直接跑;第三方插件走 iframe 沙箱,由 IframeHost 隔离,宿主与插件之间通过 postMessage 总线通信。

动态 import iframe 沙箱 postMessage 总线

刷新调度 Scheduler

所有插件的定时刷新统一交给 Scheduler 节流调度,避免几十个小部件各自 setInterval 抢主线程。桌面再拥挤,帧率也稳得住。

统一节流 单实例调度 多窗口共享

插件市场

一键装上一个新能力

插件页负责安装、停用、隐藏与卸载,也是「+ 新建窗口」的入口之一。

PWT Workbench — 插件市场
PWT 工作台插件市场页截图:插件卡片列表,带安装、停用、隐藏与新建窗口操作

现在就打开看看

不用安装,浏览器直接开。

在线试用