From b602181f3df2a99e4bb2e5b8bf55182d5f64dd1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E6=9C=B1?= <10714957+xiao-zhu245@user.noreply.gitee.com> Date: Sat, 12 Jul 2025 11:09:14 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- server/data/plugins/README.md | 216 +++++++++++++ server/data/plugins/example-plugin/index.html | 124 +++++++- .../data/plugins/example-plugin/plugin.json | 7 +- server/data/plugins/插件开发文档.md | 297 ++++++++++++++++++ server/data/plugins/插件模板.md | 259 +++++++++++++++ server/src/routes/pluginApi.ts | 72 ++++- 6 files changed, 964 insertions(+), 11 deletions(-) create mode 100644 server/data/plugins/README.md create mode 100644 server/data/plugins/插件开发文档.md create mode 100644 server/data/plugins/插件模板.md diff --git a/server/data/plugins/README.md b/server/data/plugins/README.md new file mode 100644 index 0000000..9bed368 --- /dev/null +++ b/server/data/plugins/README.md @@ -0,0 +1,216 @@ +# GSM3 插件目录 + +欢迎使用 GSM3 插件系统!这个目录包含了插件开发所需的所有资源和文档。 + +## 📁 目录结构 + +``` +plugins/ +├── README.md # 本文件 - 插件目录说明 +├── 插件开发文档.md # 完整的插件开发指南 +├── 插件模板.md # 快速开始模板 +└── example-plugin/ # 示例插件目录 + ├── plugin.json # 插件配置文件 + ├── index.html # 主界面文件 + └── gsm3-api.js # API客户端库 +``` + +## 🚀 快速开始 + +### 1. 查看示例插件 + +首先访问 `example-plugin` 目录,这是一个功能完整的示例插件,展示了: + +- 插件基本结构 +- API调用方法 +- 用户界面设计 +- 错误处理 +- 最佳实践 + +### 2. 阅读开发文档 + +查看 [插件开发文档.md](./插件开发文档.md) 了解: + +- 插件系统架构 +- 配置文件格式 +- 可用API列表 +- 开发最佳实践 +- 调试和测试方法 + +### 3. 使用模板快速开发 + +参考 [插件模板.md](./插件模板.md) 快速创建您的第一个插件: + +1. 复制模板代码 +2. 修改配置信息 +3. 自定义界面和功能 +4. 测试和调试 + +## 📚 文档说明 + +### 插件开发文档.md + +这是最完整的开发指南,包含: + +- **插件结构**: 文件组织和命名规范 +- **配置文件**: plugin.json 详细说明 +- **API参考**: 所有可用API方法和参数 +- **开发实践**: 代码规范和性能优化 +- **调试指南**: 常见问题和解决方案 + +### 插件模板.md + +提供了一个最小化的插件模板,适合: + +- 初学者快速上手 +- 创建简单功能插件 +- 作为新项目的起点 + +### 示例插件 (example-plugin) + +这是一个功能齐全的示例,展示了: + +- **系统信息API**: 获取系统状态和信息 +- **实例管理API**: 创建、启动、停止、删除实例 +- **文件操作API**: 读写文件、目录操作 +- **终端管理API**: 终端会话和进程管理 +- **用户界面**: 现代化的响应式设计 +- **错误处理**: 完善的异常处理机制 + +## 🛠️ 开发流程 + +### 第一步:环境准备 + +1. 确保 GSM3 服务器正在运行 +2. 在 `plugins` 目录下创建新的插件文件夹 +3. 从示例插件复制 `gsm3-api.js` 文件 + +### 第二步:创建插件 + +1. 创建 `plugin.json` 配置文件 +2. 创建 `index.html` 主界面文件 +3. 根据需要添加其他资源文件 + +### 第三步:开发和测试 + +1. 编写插件逻辑和界面 +2. 使用浏览器开发者工具调试 +3. 测试各种API调用和错误情况 + +### 第四步:优化和发布 + +1. 优化性能和用户体验 +2. 完善错误处理和用户提示 +3. 编写插件说明文档 + +## 🎯 API 功能概览 + +GSM3 插件系统提供了丰富的API接口: + +### 系统管理 +- `getSystemStatus()` - 获取系统状态 +- `getSystemInfo()` - 获取系统信息 +- `healthCheck()` - 健康检查 +- `getVersion()` - 获取版本信息 + +### 实例管理 +- `getInstances()` - 获取实例列表 +- `getInstance(id)` - 获取实例详情 +- `createInstance(config)` - 创建新实例 +- `startInstance(id)` - 启动实例 +- `stopInstance(id)` - 停止实例 +- `restartInstance(id)` - 重启实例 +- `deleteInstance(id)` - 删除实例 + +### 文件操作 +- `readFile(path)` - 读取文件 +- `writeFile(path, content)` - 写入文件 +- `listDirectory(path)` - 列出目录 +- `createDirectory(path)` - 创建目录 +- `deleteFile(path)` - 删除文件 +- `copy(src, dest)` - 复制文件 +- `move(src, dest)` - 移动文件 + +### 终端管理 +- `getTerminals()` - 获取终端列表 +- `getTerminalSessions()` - 获取终端会话 +- `getTerminalStats()` - 获取终端统计 +- `updateTerminalSessionName()` - 更新会话名称 + +## 🔧 开发工具 + +### 浏览器开发者工具 + +使用 F12 打开开发者工具: + +- **Console**: 查看日志和错误信息 +- **Network**: 监控API请求和响应 +- **Elements**: 调试HTML和CSS +- **Sources**: 调试JavaScript代码 + +### 调试技巧 + +```javascript +// 启用详细日志 +console.log('API调用参数:', params); +console.log('API响应结果:', result); + +// 错误处理 +try { + const result = await api.someMethod(); + console.log('成功:', result); +} catch (error) { + console.error('失败:', error); +} +``` + +## 📋 最佳实践 + +### 1. 代码组织 +- 保持文件结构清晰 +- 使用有意义的函数和变量名 +- 添加适当的注释 + +### 2. 错误处理 +- 为所有API调用添加错误处理 +- 提供用户友好的错误信息 +- 记录详细的调试信息 + +### 3. 用户体验 +- 使用响应式设计 +- 提供加载状态指示 +- 确保操作反馈及时 + +### 4. 性能优化 +- 避免频繁的API调用 +- 使用适当的缓存策略 +- 优化大数据的显示 + +## 🆘 常见问题 + +### Q: 插件不显示怎么办? +A: 检查 `plugin.json` 格式,确保 `enabled: true` 且文件路径正确。 + +### Q: API调用失败? +A: 检查网络连接,查看浏览器控制台错误信息,确认API方法名和参数正确。 + +### Q: 如何调试插件? +A: 使用浏览器开发者工具,查看控制台日志和网络请求。 + +### Q: 插件如何与主系统通信? +A: 通过 `gsm3-api.js` 提供的API方法,所有通信都通过HTTP请求完成。 + +## 📞 技术支持 + +如果您在开发过程中遇到问题: + +1. 查看示例插件的实现 +2. 阅读开发文档的相关章节 +3. 检查浏览器控制台的错误信息 +4. 联系GSM3开发团队获取支持 + +--- + +**祝您开发愉快!** 🎉 + +如果您创建了有趣的插件,欢迎分享给社区! \ No newline at end of file diff --git a/server/data/plugins/example-plugin/index.html b/server/data/plugins/example-plugin/index.html index 950879b..4e3acb7 100644 --- a/server/data/plugins/example-plugin/index.html +++ b/server/data/plugins/example-plugin/index.html @@ -242,6 +242,98 @@
欢迎使用 GSM3 插件系统演示
+ +这是一个完整的插件开发示例,展示了如何使用 GSM3 插件系统创建功能丰富的 Web 界面。
+ +复制这个示例插件作为模板,修改配置文件和界面即可创建您自己的插件。
+本示例展示了系统信息、实例管理、文件操作、终端管理等核心API的使用方法。
+这是我的第一个GSM3插件
+点击下面的按钮测试插件功能:
+ + + + + +这是一个基础的插件模板,您可以:
+