GSM3 插件模板

这是一个简化的插件模板，帮助您快速开始插件开发。

基础模板结构

my-plugin/
├── plugin.json          # 插件配置文件
├── index.html           # 主界面文件
└── gsm3-api.js         # API客户端库（从示例插件复制）

1. 创建 plugin.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

<!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. 测试插件

将插件目录放置在 server/data/plugins/ 下
重新加载GSM3面板
在插件列表中找到您的插件
点击进入插件页面

5. 自定义开发

修改样式

在 <style> 标签中修改CSS样式，自定义插件外观。

添加功能

在JavaScript部分添加新的函数，调用GSM3 API实现更多功能。

常用API示例

// 文件操作
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. 发布插件

完成开发后，您可以：

打包插件目录
分享给其他用户
提交到插件市场（如果有）

常见问题

Q: 插件不显示怎么办？ A: 检查 plugin.json 格式是否正确，enabled 是否为 true。

Q: API调用失败怎么办？ A: 检查浏览器控制台错误信息，确保 gsm3-api.js 正确加载。

Q: 如何调试插件？ A: 使用浏览器开发者工具，查看控制台日志和网络请求。

更多详细信息请参考插件开发文档.md

6.9 KiB Raw Permalink Blame History Unescape Escape