插件架构工具-免费版

提供免费版UI插件架构工具，支持视图注册、导航集成和侧边栏扩展，适合个人和小型项目使用。

概述

插件架构工具免费版为应用提供 UI 插件注册能力,允许插件在控制台侧边栏中注册自定义视图和导航标签页。通过简单的 API 调用,插件即可在主界面中展示自定义内容. 适合个人开发者扩展应用界面,或学习插件化架构设计.

核心能力

1. 视图注册

插件可通过 registerView API 注册自定义视图,视图会出现在控制台的侧边栏导航中.

处理: 解析视图注册的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回视图注册的响应数据,包含状态码、结果和日志.

2. 导航分组

支持将视图分配到不同的导航分组(如 Chat、Control、Agent、Settings),与内置功能有机融合.

处理: 解析导航分组的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回导航分组的响应数据,包含状态码、结果和日志.

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

3. 图标与排序

每个视图可配置图标、标签和排序位置,灵活控制界面布局.

处理: 解析图标与排序的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回图标与排序的响应数据,包含状态码、结果和日志.

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

依赖详情

提供详细的安装说明与参考代码,Agent 可按步骤完成安装.

处理: 解析依赖说明的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回依赖说明的响应数据,包含状态码、结果和日志.

• 执行此能力时使用input_params参数,支持创建/查询/导出操作 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：插件架构安装工具、支持自定义视图注、册与导航集成、适合个人项目扩展、免费版、面向个人开发者与、小型项目等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持.

使用场景

场景一:添加自定义数据面板

为应用添加一个自定义的数据展示面板. 用户可通过自然语言指令触发此场景，工具将自动执行相应操作并返回结构化结果.

输入格式

参数名	类型	必填	说明
input	string	是	插件架构工具-免费版处理的输入数据或指令
options	object	否	附加配置选项,如模式选择、格式偏好等
callback_url	string	否	异步处理完成后的回调通知URL

typescript

// 在插件的 register() 函数中注册视图
if (typeof api.registerView === "function") {
  api.registerView({
    id: "my-data-panel",
    label: "数据面板",
    subtitle: "自定义数据展示",
    icon: "chart-bar",
    group: "Control",
    position: 5,
  });
}

场景二:添加配置管理页

为插件添加一个配置管理界面.

typescript

api.registerView({
  id: "plugin-config",
  label: "插件配置",
  subtitle: "管理插件设置",
  icon: "settings",
  group: "Settings",
  position: 10,
});

场景三:添加 Agent 监控视图

在 Agent 分组中添加一个监控视图.

typescript

api.registerView({
  id: "agent-monitor",
  label: "Agent 监控",
  subtitle: "实时查看 Agent 状态",
  icon: "activity",
  group: "Agent",
  position: 3,
});

不适用场景

以下场景插件架构工具-免费版不适合处理：

• 3D建模和动画制作
• 照片级写实渲染
• 手绘原创插画

触发条件

、品牌视觉时使用。不适用于非本工具能力范围的需求.

快速开始

1. 阅读## 核心能力章节了解skill功能
2. 按## 依赖说明配置环境
3. 执行所需能力对应的命令
4. 参考## 错误处理章节处理异常
5. 查看## FAQ解答常见疑问

安装

安装过程需要 Agent 协助完成,向 Agent 发送以下指令:

text

请安装插件架构工具。读取 skill 目录中的 INSTALL_INSTRUCTIONS.md 文件,按步骤执行安装.

验证安装

typescript

// 在任意插件代码中测试注册功能
if (typeof api.registerView === "function") {
  console.log("插件架构已安装");
  api.registerView({
    id: "test-view",
    label: "测试视图",
    icon: "info",
    group: "Control",
    position: 99,
  });
}

响应解析: 完成完成后,查看输出响应确认任务状态。成功时输出包含解析摘要和响应数据;失败时根据错误信息排查问题,查阅错误解析章节获取恢复步骤.

示例

视图注册参数

typescript

interface ViewRegistration {
  id: string;          // 视图唯一标识
  label: string;       // 侧边栏显示名称
  subtitle?: string;   // 副标题描述
  icon: string;        // 图标名称
  group: "Chat" | "Control" | "Agent" | "Settings";  // 导航分组
  position: number;    // 组内排序
}

导航分组说明

分组	用途	典型场景
Chat	对话相关	自定义聊天界面、消息历史
Control	控制面板	数据展示、系统状态、管理操作
Agent	Agent 相关	Agent 监控、任务管理、日志查看
Settings	设置	配置管理、偏好设置、插件管理

图标可用列表

text

常用图标: chart-bar, settings, activity, info, database,
         server, cpu, globe, bell, shield, folder, file,
         user, users, message, calendar, clock, star

最佳实践

1. ID 唯一性:视图 ID 使用插件名前缀(如 myplugin-panel),避免与其他插件冲突
2. 合理排序:position 值间隔 5 或 10,便于后续插入新视图
3. 选择合适分组:按功能选择正确的导航分组,不要全部放在 Control
4. 简洁的标签:label 控制在 4 个字以内,subtitle 用于补充说明
5. 防御性编程:注册前检查 api.registerView 是否存在,确保向后兼容

常见问题

Q: 安装后注册的视图没有显示?

A: 检查以下几点:1) 视图 ID 是否唯一;2) group 值是否在允许的枚举内;3) icon 名称是否正确;4) 是否重启了应用。如仍不显示,查看浏览器控制台是否有报错.

Q: 多个插件的视图会冲突吗?

A: 不会。每个视图通过唯一的 id 标识,不同插件的视图会同时显示在侧边栏中。但同一 id 的视图后注册的会覆盖先注册的.

Q: 可以动态添加和移除视图吗?

A: 免费版支持在插件加载时注册视图。动态添加/移除需要调用 unregisterView(id) API,该能力在 PRO 版中更完善.

Q: 视图内容如何渲染?

A: 视图注册后,需要提供对应的 React 组件。当用户点击侧边栏标签时,框架会渲染该组件。组件通过 api.getComponent(id) 注册.

依赖说明

运行环境

• Agent平台: 支持 SKILL.md 的任意 AI Agent(Claude Code / Cursor / Codex / Gemini CLI 等)
• 操作系统: Windows / macOS / Linux
• 开发环境: Node.js 16+, TypeScript

第三方依赖

依赖项	类型	是否必需	获取方式
Node.js	运行时	必需	官方网站下载
TypeScript	开发语言	推荐	npm install typescript
React	UI框架	必需	npm install react
LLM API	API	必需	由Agent内置LLM提供

API Key 配置

• 本 Skill 无需 API Key
• 插件架构为本地安装,不涉及外部 API 调用

可用性分类

• 分类: MD+EXEC(Markdown指令 + 命令行执行)
• 说明: 通过自然语言指令驱动 Agent 完成插件架构安装与配置
• 限制: 免费版不支持插件市场、权限管控与热更新

错误处理

错误场景	原因	处理方式
配置错误	参数缺失或格式错误	检查依赖说明中的配置要求
运行时错误	运行环境不满足	确认运行环境符合依赖说明
网络错误	连接超时或不可达	执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案

已知限制

• 需LLM支持,无LLM环境不可用
• 复杂业务场景建议结合人工经验判断
• 执行效率受模型能力与网络环境影响
• 当前为免费版本,如需完整功能请升级到付费版获取全部能力

输出格式

json

{
  "success": true,
  "data": {
    "result": "插件架构工具-免费版处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "plugin arch"
    }
  },
  "execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
  "error": null
}