企业官网建设流程全解析

WaveTerm 插件开发手把手：3 个案例做出你的专属终端面板

【免费下载链接】wavetermAn open-source, AI-integrated, cross-platform terminal for seamless workflows项目地址: https://gitcode.com/GitHub_Trending/wa/waveterm

WaveTerm 是一款开源跨平台终端，靠插件（Widget）配置扩展。加几行 JSON 就能从侧栏拉起 shell、监控面板或网页应用。读完这篇 WaveTerm 插件教程，你 30 分钟内能做出自己的终端扩展。

一张表看懂三种插件形态

做 WaveTerm 插件开发，先记住插件本质是一个"块"，靠meta里的view字段区分。常见的三种：

动手前只改这一个文件

先说环境：按 BUILD.md 编译好即可，终端能跑就行。 然后，WaveTerm 里所有插件只认同一个文件：<WAVETERM_HOME>/config/widgets.json，这份 widgets.json 配置是整个扩展的唯一入口。

1. 确认 WaveTerm 已装好并能启动。
2. 打开config/widgets.json，这是唯一的插件配置入口。
3. 把下面某个模板抄进去，起个不重名的 key。
4. 保存、重启终端，侧栏就会多出那个新图标。

5 分钟，让 CPU 曲线跑起来

从最简单的系统信息插件开始。把下面这段贴进 widgets.json：

"all-cpu": { "icon": "chart-scatter", "label": "all-cpu", "blockdef": { "meta": { "view": "sysinfo", "sysinfo:type": "All CPU" // 关键：显示哪组曲线，区分大小写 } } }

保存，面板就出来了。点侧栏图标，每个核心的使用率会实时滚动。想换内存？把sysinfo:type改成Mem即可。

全核 CPU 实时曲线

JSON 写不动的时候，上 Go

要每秒刷数据、画图、按钮有反应，JSON 就表达不了了。对需要动态数据的 WaveTerm 插件开发，Tsunami 是正解：用 Go 写插件，分三层——数据原子存状态、定时器驱动更新、vdom 画界面。

下面是一个 Tsunami 框架 Go 插件的核心骨架：

var cpuDataAtom = app.DataAtom("cpuData", []Point{}) // 关键：数据原子存状态 var App = app.DefineComponent("App", func(_ struct{}) any { app.UseTicker(time.Second, func() { // 关键：定时器每秒触发 cpuDataAtom.SetFn(func(old []Point) []Point { return append(old, sampleCPU()) }) }, []any{}) return vdom.H("div", map[string]any{"className": "p-6"}, // 关键：vdom 渲染界面 vdom.H("span", nil, cpuDataAtom.Get())) })

跑通示例在 tsunami 演示目录的cpuchart里，把采样函数换成你的逻辑就是一个自己的面板。

打包上架两条命令

开发完，用两条 wsh 命令打包并安装，这就是 wsh 打包命令最直接的用法：

wsh pack --name cpu-monitor --src ./cpuchart

这里有个小坑：--src要指向插件根目录（go.mod和app.go所在那层），指到上一层打包出来会没有app.go。

wsh install ./cpu-monitor.wp

装完，新插件直接出现在 WaveTerm 侧栏，这就是 WaveTerm 插件教程的最后一步。

再玩两个花样 & 遇到问题找这里

拖放是自带的。抓住任一 widget 的标题条拖动，会出现绿色预览，落点位置高亮成绿框。落在两块之间就从中分，落在另一块正上方就两块互换。

绿框即拖放落点

想让插件接上 WaveAI，就在 meta 里加一个cmd:jwt: true，它会把 JWT 注入启动环境，AI 就能读到这个块的数据。比如把waveai --interactive起成 cmd 插件，它能直接跟面板内容对话。

问：改了 widgets.json 图标不出来？ 答：保存后重启终端，再点侧栏刷新图标。

问：图标名去哪找？ 答：用 Font Awesome 的名字，如chart-scatter；品牌图标要加brands@前缀。

问：CPU 图是空的？ 答：sysinfo:type区分大小写，只能是CPU/Mem/CPU + Mem/All CPU四个值之一。

参考（仓库内相对路径）：

• 自定义 Widget 配置详解：docs/docs/customwidgets.mdx
• Tsunami Go 插件示例：tsunami/demo/
• Widget 行为说明：docs/docs/widgets.mdx

【免费下载链接】wavetermAn open-source, AI-integrated, cross-platform terminal for seamless workflows项目地址: https://gitcode.com/GitHub_Trending/wa/waveterm