mirror of
https://github.com/GSManagerXZ/GameServerManager.git
synced 2025-10-04 22:02:03 +08:00
259 lines
No EOL
6.9 KiB
Markdown
259 lines
No EOL
6.9 KiB
Markdown
# GSM3 插件模板
|
||
|
||
这是一个简化的插件模板，帮助您快速开始插件开发。
|
||
|
||
## 基础模板结构
|
||
|
||
```
|
||
my-plugin/
|
||
├── plugin.json # 插件配置文件
|
||
├── index.html # 主界面文件
|
||
└── gsm3-api.js # API客户端库（从示例插件复制）
|
||
```
|
||
|
||
## 1. 创建 plugin.json
|
||
|
||
```json
|
||
{
|
||
"name": "my-plugin",
|
||
"displayName": "我的插件",
|
||
"description": "这是我的第一个GSM3插件",
|
||
"version": "1.0.0",
|
||
"author": "您的名字",
|
||
"enabled": true,
|
||
"hasWebInterface": true,
|
||
"entryPoint": "index.html",
|
||
"icon": "cog",
|
||
"category": "工具"
|
||
}
|
||
```
|
||
|
||
## 2. 创建 index.html
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>我的插件 - GSM3</title>
|
||
<script src="gsm3-api.js"></script>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
margin: 0;
|
||
}
|
||
|
||
.container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 10px;
|
||
color: #ffd700;
|
||
}
|
||
|
||
.card {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 15px;
|
||
padding: 30px;
|
||
margin-bottom: 20px;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.btn {
|
||
padding: 12px 24px;
|
||
border: none;
|
||
border-radius: 25px;
|
||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||
color: white;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
margin: 5px;
|
||
}
|
||
|
||
.btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.result {
|
||
background: rgba(0, 0, 0, 0.2);
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
margin-top: 15px;
|
||
font-family: 'Courier New', monospace;
|
||
white-space: pre-wrap;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>🔧 我的插件</h1>
|
||
<p>这是我的第一个GSM3插件</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>功能演示</h3>
|
||
<p>点击下面的按钮测试插件功能：</p>
|
||
|
||
<button class="btn" onclick="testSystemInfo()">获取系统信息</button>
|
||
<button class="btn" onclick="testInstances()">获取实例列表</button>
|
||
<button class="btn" onclick="testHealthCheck()">健康检查</button>
|
||
|
||
<div id="result" class="result">
|
||
点击按钮查看结果...
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>开发说明</h3>
|
||
<p>这是一个基础的插件模板，您可以：</p>
|
||
<ul>
|
||
<li>修改界面样式和布局</li>
|
||
<li>添加更多功能按钮</li>
|
||
<li>调用更多GSM3 API</li>
|
||
<li>集成第三方服务</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 初始化API
|
||
const api = new GSM3API();
|
||
|
||
// 显示结果
|
||
function showResult(title, data) {
|
||
const resultDiv = document.getElementById('result');
|
||
resultDiv.textContent = `${title}:\n${JSON.stringify(data, null, 2)}`;
|
||
}
|
||
|
||
// 显示错误
|
||
function showError(title, error) {
|
||
const resultDiv = document.getElementById('result');
|
||
resultDiv.textContent = `${title} 失败:\n${error.message}`;
|
||
}
|
||
|
||
// 测试系统信息
|
||
async function testSystemInfo() {
|
||
try {
|
||
await api.initialize();
|
||
const info = await api.getSystemInfo();
|
||
showResult('系统信息', info);
|
||
} catch (error) {
|
||
showError('获取系统信息', error);
|
||
}
|
||
}
|
||
|
||
// 测试实例列表
|
||
async function testInstances() {
|
||
try {
|
||
await api.initialize();
|
||
const instances = await api.getInstances();
|
||
showResult('实例列表', instances);
|
||
} catch (error) {
|
||
showError('获取实例列表', error);
|
||
}
|
||
}
|
||
|
||
// 测试健康检查
|
||
async function testHealthCheck() {
|
||
try {
|
||
await api.initialize();
|
||
const health = await api.healthCheck();
|
||
showResult('健康检查', health);
|
||
} catch (error) {
|
||
showError('健康检查', error);
|
||
}
|
||
}
|
||
|
||
// 插件加载完成
|
||
console.log('我的插件已加载');
|
||
|
||
// 等待API准备就绪
|
||
api.onReady(() => {
|
||
console.log('GSM3 API已准备就绪');
|
||
showResult('插件状态', { status: 'ready', message: 'API已初始化' });
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
## 3. 复制API文件
|
||
|
||
从示例插件目录复制 `gsm3-api.js` 文件到您的插件目录。
|
||
|
||
## 4. 测试插件
|
||
|
||
1. 将插件目录放置在 `server/data/plugins/` 下
|
||
2. 重新加载GSM3面板
|
||
3. 在插件列表中找到您的插件
|
||
4. 点击进入插件页面
|
||
|
||
## 5. 自定义开发
|
||
|
||
### 修改样式
|
||
|
||
在 `<style>` 标签中修改CSS样式，自定义插件外观。
|
||
|
||
### 添加功能
|
||
|
||
在JavaScript部分添加新的函数，调用GSM3 API实现更多功能。
|
||
|
||
### 常用API示例
|
||
|
||
```javascript
|
||
// 文件操作
|
||
api.readFile('/path/to/file')
|
||
api.writeFile('/path/to/file', 'content')
|
||
api.listDirectory('/path/to/dir')
|
||
|
||
// 实例管理
|
||
api.createInstance({ name: '实例名', ... })
|
||
api.startInstance('instance-id')
|
||
api.stopInstance('instance-id')
|
||
|
||
// 终端操作
|
||
api.getTerminals()
|
||
api.getTerminalSessions()
|
||
```
|
||
|
||
## 6. 发布插件
|
||
|
||
完成开发后，您可以：
|
||
|
||
1. 打包插件目录
|
||
2. 分享给其他用户
|
||
3. 提交到插件市场（如果有）
|
||
|
||
## 常见问题
|
||
|
||
**Q: 插件不显示怎么办？**
|
||
A: 检查 `plugin.json` 格式是否正确，`enabled` 是否为 `true`。
|
||
|
||
**Q: API调用失败怎么办？**
|
||
A: 检查浏览器控制台错误信息，确保 `gsm3-api.js` 正确加载。
|
||
|
||
**Q: 如何调试插件？**
|
||
A: 使用浏览器开发者工具，查看控制台日志和网络请求。
|
||
|
||
---
|
||
|
||
更多详细信息请参考 [插件开发文档.md](./插件开发文档.md) |