最近写插件确实遇到了很多问题，有看到有很多小伙伴让我出一些插件的教程，那既然插件开发这么困难，为什么不搞一个简单的插件开发系统呢，所以我这两天研究了一下插件然后开始做了一个Nexus这个插件。
先看一下界面
我实现了一个这样的界面，按照以前来说创建好插件后做一个这样的也不复杂，就是需要你稍微熟悉一下html+css也能做出来，但是很多人对web不熟悉，那如果我告诉你以后只需要写ts就能写出这样的界面呢。
而且代码只需要这样，这是我初步实现的效果，后面只需要加入更多的组件，比如表格，列表等等，就可以大大减少开发插件的难度。
/**
* 主面板
*/
@Panel({
title: "NexusDemo 主面板",
width: 600,
height: 400,
dockable: true,
resizable: true
})
export class NexusDemoPanel extends NexusPanel {
private inputText = "Hello Nexus!";
private isEnabled = true;
public onInit(): void {
console.log("NexusDemo 主面板初始化");
}
public onGUI(): void {
// 标题
NexusGUI.Label("欢迎使用 Nexus 框架！", NexusStyles.Title);
NexusGUI.Separator();
// 垂直布局
NexusGUI.BeginVertical({ spacing: 10 });
// 输入框演示
this.inputText = NexusGUI.TextField(this.inputText, (value) => {
this.inputText = value;
});
this.isEnabled = NexusGUI.Toggle(this.isEnabled, "启用功能", (value) => {
this.isEnabled = value;
});
// 按钮组
NexusGUI.BeginHorizontal({ spacing: 10 });
NexusGUI.Button("保存", () => {
console.log("保存数据:", { inputText: this.inputText, isEnabled: this.isEnabled });
});
NexusGUI.Button("重置", () => {
this.inputText = "Hello Nexus!";
this.isEnabled = true;
});
NexusGUI.EndHorizontal();
NexusGUI.Space(10);
// 面板跳转按钮
NexusGUI.Button("打开表格面板", () => {
NexusGUI.OpenPanel("nexus-demo.table");
}, {
...NexusStyles.Button,
backgroundColor: NexusStyles.Colors.Blue
});
NexusGUI.Space(10);
NexusGUI.Separator();
// 信息显示
NexusGUI.Label(`插件: NexusDemo`, NexusStyles.Label);
NexusGUI.Label(`状态: ${this.isEnabled ? '启用' : '禁用'}`, NexusStyles.Label);
NexusGUI.EndVertical();
}
public onDestroy(): void {
console.log("NexusDemo 主面板销毁");
}
}
还有属性的显示
代码如下
点击按钮后显示
这个插件我还在开发当中，目前就是这个完成度，你觉得这样的插件对大家会有帮助吗？如果你也感兴趣可以加群等插件上架后在群里通知可以第一时间来体验：481923584
