深入解析 Redis Insight Workbench 插件体系从安装部署、可视化开发到源码级实现【免费下载链接】RedisInsightRedis GUI by Redis项目地址: https://gitcode.com/GitHub_Trending/re/RedisInsightRedis 可以承载字符串、哈希、列表、集合、流、JSON 等多种数据类型如何将这些数据以最便于验证与调试的形式呈现给开发者是数据库可视化工具的核心价值所在。Redis Insight 提供了一套完整的Workbench 插件Plugin体系允许你独立扩展其核心功能针对特定 Redis 命令构建自定义的数据可视化。本文以 插件介绍文档 为主线完整覆盖插件的安装流程、package.json清单结构、核心渲染脚本开发、与主应用的通信 SDK并结合仓库中后端插件发现服务与官方clients-list示例包的源码实现带你从使用到原理全链路掌握 Redis Insight 插件开发。一、为什么需要插件按命令驱动的可视化扩展Redis 的数据类型丰富且命令语义各异官方内置的结果展示方式无法满足所有场景。Redis Insight 插件机制的设计目标就是让可视化能力与具体 Redis 命令一一对应插件的可视化结果渲染在 Workbench 的结果区域Workbench results area并且基于被执行的命令决定展示哪种可视化——即某个特定的 Redis 命令可以生成其专属的自定义数据可视化。也就是说插件的触发条件是命令本身。例如仓库内置的官方示例插件 clients-list当你在 Workbench 中执行CLIENT LIST命令时该插件的 Table 可视化会把命令输出以表格形式呈现比纯文本响应更易阅读同时它还针对JSON.GET、JSON.MGET、GET命令提供 JSON 高亮视图。这套机制让插件的扩展点非常聚焦你只需要关心某类命令的结果应该如何展示无需改动 Redis Insight 主应用。二、工作原理概览插件可视化在 Workbench 中通过Iframe 渲染以达到封装插件脚本与样式、与主应用隔离的目的。开发文档 Plugin development 明确指出插件的脚本核心脚本与样式表若在package.json中指定被注入到 iframe 中iframe 内同时包含基础样式渲染后的 iframe 会在body上携带theme_DARK或theme_LIGHTclassName用于标识 Redis Insight 当前使用的主题插件可据此适配明暗两种配色。从后端实现来看插件并非编译进主程序而是运行时扫描。服务端模块 plugin.service.ts 的getAll()方法会扫描两个目录默认插件目录PATH_CONFIG.defaultPlugins对应SERVER_CONFIG.defaultPluginsUri标记为 internal自定义插件目录PATH_CONFIG.customPlugins即用户安装目录。每个子文件夹必须包含package.json清单文件服务端读取并校验后计算出插件的主脚本 URL、样式 URL 与静态资源baseUrl最终通过GET /plugins接口见 plugin.controller.ts返回给前端渲染。前端拿到插件清单后才会在命令结果区域按需加载对应的 iframe 可视化。三、插件的安装与使用3.1 安装步骤按照 Plugin installation Usage 文档安装只需三步下载插件获取为 Workbench 开发的插件包找到plugins目录将插件文件夹放入以下路径之一——macOSusersHomeDir/.redis-insight/pluginsWindowsC:/Users/{Username}/.redis-insight/pluginsLinuxusersHomeDir/.redis-insight/plugins放入插件文件夹将包含插件全部文件的文件夹添加进plugins目录。安装完成后重新加载 Workbench 页面然后运行与该插件可视化对应的 Redis 命令即可在结果区域看到新的可视化视图。⚠️安全警告官方文档原文强调在向 Workbench 添加新插件时只使用可信作者提供的文件以避免恶意代码被自动执行。插件脚本会在本地以 iframe 形式运行安装来源不明的插件存在脚本自动执行风险务必谨慎。3.2 使用步骤一个插件可能为不同的 Redis 命令提供多种可视化使用流程为打开 Redis Insight打开一个已添加的数据库打开 Workbench运行与插件可视化相关的 Redis 命令在结果区域选择要展示结果的插件可视化若该可视化未被设置为默认。值得注意的是package.json清单中的visualizations数组支持default: true字段——被标记为默认的可视化会自动应用无需手动选择而多个可视化匹配同一命令时你可以在下拉中手动切换。四、插件结构与package.json清单4.1 目录组织每个插件应拥有唯一名称其全部文件放置于plugins默认目录下的独立文件夹中。官方开发文档 Plugin development 规定了如下文件结构pluginName/package.json必需—— 插件清单Manifest必须位于插件文件夹根目录pluginName/{anyName}.js必需—— 插件核心脚本pluginName/{anyName}.css可选—— 插件可视化的样式文件pluginName/{anyFileOrFolder}可选—— 其他任何文件或子文件夹供核心脚本使用例如pluginName/images/image.png。除package.json外的所有文件都可以放在子文件夹中清单文件是插件的入口与描述。4.2package.json必填字段字段说明name插件名称官方建议与文件夹名保持一致main核心脚本的相对路径例如./dist/index.jsvisualizations可视化对象数组用于在 Workbench 中渲染结果visualizations数组内每个可视化对象包含以下必填字段id—— 可视化 IDname—— 可视化名称显示在 Workbench 中activationMethod—— 导出函数的名称当该可视化在 Workbench 中被选中时调用matchCommands—— 使用该可视化的命令数组支持正则字符串例如[CLIENT LIST, FT.*]FT.*即可匹配所有 RediSearch 命令。除必填字段外清单还支持styles字段指定 CSS 文件路径若指定该文件会被包含进插件 iframe。从服务端校验类 plugin.response.ts 可以看到更完整的可选字段matchQuery含anyRegex/noneRegex的命令匹配增强、default是否默认可视化、iconDark/iconLight明暗主题下的图标路径等。4.3 官方示例清单文档给出的含必填与可选字段的完整示例{ author: { name: Redis Ltd., email: supportredis.com, url: https://redis.com/redis-enterprise/redis-insight }, description: Show client list as table, styles: ./dist/styles.css, main: ./dist/index.js, name: client-list, version: 0.0.1, scripts: {}, visualizations: [ { id: clients-list, name: Table, activationMethod: renderClientsList, matchCommands: [CLIENT LIST], description: Example of client list plugin, default: true } ], devDependencies: {}, dependencies: {} }仓库中的真实示例 clients-list/package.json 更为完整它同时注册了三个可视化——clients-listTable匹配CLIENT LIST、json-viewJSON匹配JSON.GET/JSON.MGET、json-string-viewJSON匹配GET并为每个可视化提供了明暗两套图标与default: true标记可作为你编写清单的参照模板。五、核心脚本开发从 Props 到渲染5.1 Props 接口核心脚本是定义可视化方法的必需脚本。它导出函数多可视化时导出多个当对应可视化在 Workbench 中被选中时被调用。文档定义的入参接口如下interface Props { command: string; // executed command data: Result[]; // array of results (one item for Standalone) } interface Result { response: any; // response of the executed command status: success | fail; // response status of the executed command } const renderVisualization (props: Props) { // Do your magic }; export default { renderVisualization };要点command是被执行的命令data是结果数组Standalone 单机模式下数组仅含一项Cluster 集群模式下可能包含多项每个节点一项Result.response为命令原始响应Result.status为success | fail。export default { renderVisualization }是必需的导出形式——导出对象中的属性名必须与清单中visualizations[].activationMethod一一对应。5.2 渲染机制插件 iframe 会生成基础 HTML随后被注入相关脚本与样式。渲染 HTML 时可以直接使用已存在的 DOM 元素#app也可以自行创建 DOM 元素。iframe 的body会带有theme_DARK或theme_LIGHTclassName 标识当前应用主题便于插件做主题适配。纯 JavaScript 示例来自开发文档const renderVisualization (props) { const { command, data [] } props; const [{ result, status }] data; document.getElementById(app).innerHTML h3Executed command:h3 p${command}/p h4Result of the command/h4 p${result}/p h4Status of the command/h4 p${status}/p ; }; export default { renderVisualization };React 示例推荐做法需使用react-dom的render方法import { render } from react-dom; import App from ./App; const renderVisualization (props) { const { command, data [] } props; const [{ result, status }] data; render( App command{command} response{result} status{status} /, document.getElementById(app), ); }; // This is a required action - export the main function for execution of the visualization export default { renderVisualization };5.3 可用参数window.state除函数入参外插件 iframe 还可以通过window.state获取额外信息const { config, modules } window.state; const { baseUrl, appVersion } config; // modules - the list of modules of the current database // baseUrl - url for your plugin folder - can be used to include your assets // appVersion - version of the Redis Insight applicationmodules—— 当前数据库已加载的 Redis 模块列表可用于按模块能力动态渲染config.baseUrl—— 插件文件夹的访问 URL用于加载插件的静态资源图片等config.appVersion—— Redis Insight 应用版本号。从后端 plugin.service.ts 的实现看baseUrl由服务端拼装path.posix.join(urlPrefix, pluginFolder, /)即插件资源 URL 前缀 插件文件夹名因此你在插件中引用的相对资源都会被解析到该 URL 之下。5.4 样式与 UI 一致性每个插件 iframe 自带 Redis Insight 的基础样式包括字体与配色方案。官方建议使用 React 与 Elastic UIEUI库保持插件可视化与整个应用的一致性。仓库中 clients-list 的依赖 即包含elastic/eui、react、react-dom、classnames、json-bigint等可直接参考其工程化配置其构建脚本使用vite -c ../vite.config.mjs。六、插件与主应用通信redisinsight-plugin-sdk插件运行在 iframe 沙箱中与主应用通信需要借助第三方库redisinsight-plugin-sdk。安装方式npm install redisinsight-plugin-sdk其完整方法说明位于仓库内 redisinsight-plugin-sdk/README.md主要 API 如下setHeaderText(text)设置命令结果头部header的自定义文本例如setHeaderText(Matched: 10)。import { setHeaderText } from redisinsight-plugin-sdk; setHeaderText(Matched: 10);executeRedisCommand(command)在插件内执行 Redis 命令目前仅支持只读命令。返回Promise[{ response, status }]。import { executeRedisCommand } from redisinsight-plugin-sdk; try { const result await executeRedisCommand(GET foo); const [{ response, status }] result; if (status success) { // Do smth } } catch (e) { console.error(e); }getState() / setState(state)setState(state)保存当前命令可视化的状态任意数据getState()返回已保存的状态若未保存则抛出错误。二者配合可用于记忆用户偏好、分页位置等交互状态。import { getState, setState } from redisinsight-plugin-sdk; // 保存状态 await setState({ a: 1, b: 2 }); // 读取状态 const result await getState();formatRedisReply(response, command)将 Redis 响应解析为 CLI 风格字符串的工具函数便于直接展示原始回复文本。import { formatRedisReply } from redisinsight-plugin-sdk; try { const parsedReply await formatRedisReply(data[0].response, command); // parsedReply 示例 // 1) 1) COUNT(a) // 2) 1) 1) 0 // 3) 1) Cached execution: 1 // 2) Query internal execution time: 3.134125 milliseconds } catch (e) { console.error(e); }七、后端插件发现机制源码级解析理解了前端插件协议后再看服务端如何找到并校验插件能帮助你避免踩坑。7.1 扫描与校验流程plugin.service.ts 的核心逻辑getAll()合并两类插件的扫描结果并返回静态资源根路径staticscanPluginsFolder()遍历pluginsFolder下的每个子目录读取其中的package.json使用plainToInstance(Plugin, manifest)将清单映射为PluginDTO 对象调用validator.validateOrReject(plugin, { whitelist: true })进行运行时校验——这正是上一节提到的必填字段name、main、visualizations、matchCommands等真正生效的地方校验通过后服务端拼装baseUrl、mainurlPrefix pluginFolder manifest.main、styles若存在等 URL 字段校验失败或读取异常时日志记录错误并跳过该插件返回undefined后被filter过滤。这意味着清单字段缺失、matchCommands为空数组、main为空等都会导致插件在扫描阶段被静默剔除前端根本看不到该插件。开发时若插件消失应优先检查清单字段是否齐全、JSON 是否合法。7.2 校验规则一览从 plugin.response.ts 的 DTO 装饰器可以整理出完整的校验规则Plugin.nameIsNotEmpty()IsString()Plugin.mainIsNotEmpty()IsString()Plugin.visualizationsIsDefined()IsArray()ArrayNotEmpty()且每个元素需通过PluginVisualization的嵌套校验PluginVisualization.id/name/activationMethod均需非空字符串PluginVisualization.matchCommandsIsDefined()IsArray()ArrayNotEmpty()可选字段styles、default、iconDark、iconLight、matchQueryanyRegex/noneRegex数组需满足各自类型约束。7.3 HTTP 接口plugin.controller.ts 暴露GET /plugins接口返回结构为PluginsResponsestatic插件静态资源 URI与plugins可用插件列表含internal标识区分内置/自定义插件。八、动手实践建议结合以上内容开发一个 Workbench 插件的最小路径是在plugins目录或仓库内redisinsight/ui/src/packages/下创建以插件名命名的文件夹编写根目录package.json声明name、main、visualizations至少一个可视化含id、name、activationMethod、matchCommands按需添加styles与default编写核心脚本export default { renderVisualization }函数名对应activationMethod在函数内读取props.command与props.data向#app渲染内容如需与主应用交互自定义头部、执行只读命令、持久化状态、格式化响应安装并引入redisinsight-plugin-sdk重新加载 Workbench执行匹配的命令并验证可视化若未出现检查清单校验规则与服务端日志。仓库中的 clients-list 是一个可直接研读的端到端范例其src/下包含table-view表格与json-viewJSON 高亮两组组件、utils/parseResponse.ts响应解析工具及配套测试文件如JSONView.spec.tsx、TableView.spec.tsx完整展示了命令匹配 → 数据解析 → 组件渲染 → 主题适配的插件开发全流程适合作为你第一个插件的起点。总结Redis Insight 的 Workbench 插件体系由三部分组成运行时目录扫描与清单校验后端PluginService、iframe 隔离渲染协议#app挂载点、window.state、theme_DARK/LIGHT、主应用通信 SDKredisinsight-plugin-sdk。理解这三层你就能以极低的侵入成本为任意 Redis 命令打造专属的高质量数据可视化让 Workbench 真正服务于你自己的调试与验证工作流。【免费下载链接】RedisInsightRedis GUI by Redis项目地址: https://gitcode.com/GitHub_Trending/re/RedisInsight创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 深入解析 Redis Insight Workbench 插件体系：从安装部署、可视化开发到源码级实现
深入解析 Redis Insight Workbench 插件体系从安装部署、可视化开发到源码级实现【免费下载链接】RedisInsightRedis GUI by Redis项目地址: https://gitcode.com/GitHub_Trending/re/RedisInsightRedis 可以承载字符串、哈希、列表、集合、流、JSON 等多种数据类型如何将这些数据以最便于验证与调试的形式呈现给开发者是数据库可视化工具的核心价值所在。Redis Insight 提供了一套完整的Workbench 插件Plugin体系允许你独立扩展其核心功能针对特定 Redis 命令构建自定义的数据可视化。本文以 插件介绍文档 为主线完整覆盖插件的安装流程、package.json清单结构、核心渲染脚本开发、与主应用的通信 SDK并结合仓库中后端插件发现服务与官方clients-list示例包的源码实现带你从使用到原理全链路掌握 Redis Insight 插件开发。一、为什么需要插件按命令驱动的可视化扩展Redis 的数据类型丰富且命令语义各异官方内置的结果展示方式无法满足所有场景。Redis Insight 插件机制的设计目标就是让可视化能力与具体 Redis 命令一一对应插件的可视化结果渲染在 Workbench 的结果区域Workbench results area并且基于被执行的命令决定展示哪种可视化——即某个特定的 Redis 命令可以生成其专属的自定义数据可视化。也就是说插件的触发条件是命令本身。例如仓库内置的官方示例插件 clients-list当你在 Workbench 中执行CLIENT LIST命令时该插件的 Table 可视化会把命令输出以表格形式呈现比纯文本响应更易阅读同时它还针对JSON.GET、JSON.MGET、GET命令提供 JSON 高亮视图。这套机制让插件的扩展点非常聚焦你只需要关心某类命令的结果应该如何展示无需改动 Redis Insight 主应用。二、工作原理概览插件可视化在 Workbench 中通过Iframe 渲染以达到封装插件脚本与样式、与主应用隔离的目的。开发文档 Plugin development 明确指出插件的脚本核心脚本与样式表若在package.json中指定被注入到 iframe 中iframe 内同时包含基础样式渲染后的 iframe 会在body上携带theme_DARK或theme_LIGHTclassName用于标识 Redis Insight 当前使用的主题插件可据此适配明暗两种配色。从后端实现来看插件并非编译进主程序而是运行时扫描。服务端模块 plugin.service.ts 的getAll()方法会扫描两个目录默认插件目录PATH_CONFIG.defaultPlugins对应SERVER_CONFIG.defaultPluginsUri标记为 internal自定义插件目录PATH_CONFIG.customPlugins即用户安装目录。每个子文件夹必须包含package.json清单文件服务端读取并校验后计算出插件的主脚本 URL、样式 URL 与静态资源baseUrl最终通过GET /plugins接口见 plugin.controller.ts返回给前端渲染。前端拿到插件清单后才会在命令结果区域按需加载对应的 iframe 可视化。三、插件的安装与使用3.1 安装步骤按照 Plugin installation Usage 文档安装只需三步下载插件获取为 Workbench 开发的插件包找到plugins目录将插件文件夹放入以下路径之一——macOSusersHomeDir/.redis-insight/pluginsWindowsC:/Users/{Username}/.redis-insight/pluginsLinuxusersHomeDir/.redis-insight/plugins放入插件文件夹将包含插件全部文件的文件夹添加进plugins目录。安装完成后重新加载 Workbench 页面然后运行与该插件可视化对应的 Redis 命令即可在结果区域看到新的可视化视图。⚠️安全警告官方文档原文强调在向 Workbench 添加新插件时只使用可信作者提供的文件以避免恶意代码被自动执行。插件脚本会在本地以 iframe 形式运行安装来源不明的插件存在脚本自动执行风险务必谨慎。3.2 使用步骤一个插件可能为不同的 Redis 命令提供多种可视化使用流程为打开 Redis Insight打开一个已添加的数据库打开 Workbench运行与插件可视化相关的 Redis 命令在结果区域选择要展示结果的插件可视化若该可视化未被设置为默认。值得注意的是package.json清单中的visualizations数组支持default: true字段——被标记为默认的可视化会自动应用无需手动选择而多个可视化匹配同一命令时你可以在下拉中手动切换。四、插件结构与package.json清单4.1 目录组织每个插件应拥有唯一名称其全部文件放置于plugins默认目录下的独立文件夹中。官方开发文档 Plugin development 规定了如下文件结构pluginName/package.json必需—— 插件清单Manifest必须位于插件文件夹根目录pluginName/{anyName}.js必需—— 插件核心脚本pluginName/{anyName}.css可选—— 插件可视化的样式文件pluginName/{anyFileOrFolder}可选—— 其他任何文件或子文件夹供核心脚本使用例如pluginName/images/image.png。除package.json外的所有文件都可以放在子文件夹中清单文件是插件的入口与描述。4.2package.json必填字段字段说明name插件名称官方建议与文件夹名保持一致main核心脚本的相对路径例如./dist/index.jsvisualizations可视化对象数组用于在 Workbench 中渲染结果visualizations数组内每个可视化对象包含以下必填字段id—— 可视化 IDname—— 可视化名称显示在 Workbench 中activationMethod—— 导出函数的名称当该可视化在 Workbench 中被选中时调用matchCommands—— 使用该可视化的命令数组支持正则字符串例如[CLIENT LIST, FT.*]FT.*即可匹配所有 RediSearch 命令。除必填字段外清单还支持styles字段指定 CSS 文件路径若指定该文件会被包含进插件 iframe。从服务端校验类 plugin.response.ts 可以看到更完整的可选字段matchQuery含anyRegex/noneRegex的命令匹配增强、default是否默认可视化、iconDark/iconLight明暗主题下的图标路径等。4.3 官方示例清单文档给出的含必填与可选字段的完整示例{ author: { name: Redis Ltd., email: supportredis.com, url: https://redis.com/redis-enterprise/redis-insight }, description: Show client list as table, styles: ./dist/styles.css, main: ./dist/index.js, name: client-list, version: 0.0.1, scripts: {}, visualizations: [ { id: clients-list, name: Table, activationMethod: renderClientsList, matchCommands: [CLIENT LIST], description: Example of client list plugin, default: true } ], devDependencies: {}, dependencies: {} }仓库中的真实示例 clients-list/package.json 更为完整它同时注册了三个可视化——clients-listTable匹配CLIENT LIST、json-viewJSON匹配JSON.GET/JSON.MGET、json-string-viewJSON匹配GET并为每个可视化提供了明暗两套图标与default: true标记可作为你编写清单的参照模板。五、核心脚本开发从 Props 到渲染5.1 Props 接口核心脚本是定义可视化方法的必需脚本。它导出函数多可视化时导出多个当对应可视化在 Workbench 中被选中时被调用。文档定义的入参接口如下interface Props { command: string; // executed command data: Result[]; // array of results (one item for Standalone) } interface Result { response: any; // response of the executed command status: success | fail; // response status of the executed command } const renderVisualization (props: Props) { // Do your magic }; export default { renderVisualization };要点command是被执行的命令data是结果数组Standalone 单机模式下数组仅含一项Cluster 集群模式下可能包含多项每个节点一项Result.response为命令原始响应Result.status为success | fail。export default { renderVisualization }是必需的导出形式——导出对象中的属性名必须与清单中visualizations[].activationMethod一一对应。5.2 渲染机制插件 iframe 会生成基础 HTML随后被注入相关脚本与样式。渲染 HTML 时可以直接使用已存在的 DOM 元素#app也可以自行创建 DOM 元素。iframe 的body会带有theme_DARK或theme_LIGHTclassName 标识当前应用主题便于插件做主题适配。纯 JavaScript 示例来自开发文档const renderVisualization (props) { const { command, data [] } props; const [{ result, status }] data; document.getElementById(app).innerHTML h3Executed command:h3 p${command}/p h4Result of the command/h4 p${result}/p h4Status of the command/h4 p${status}/p ; }; export default { renderVisualization };React 示例推荐做法需使用react-dom的render方法import { render } from react-dom; import App from ./App; const renderVisualization (props) { const { command, data [] } props; const [{ result, status }] data; render( App command{command} response{result} status{status} /, document.getElementById(app), ); }; // This is a required action - export the main function for execution of the visualization export default { renderVisualization };5.3 可用参数window.state除函数入参外插件 iframe 还可以通过window.state获取额外信息const { config, modules } window.state; const { baseUrl, appVersion } config; // modules - the list of modules of the current database // baseUrl - url for your plugin folder - can be used to include your assets // appVersion - version of the Redis Insight applicationmodules—— 当前数据库已加载的 Redis 模块列表可用于按模块能力动态渲染config.baseUrl—— 插件文件夹的访问 URL用于加载插件的静态资源图片等config.appVersion—— Redis Insight 应用版本号。从后端 plugin.service.ts 的实现看baseUrl由服务端拼装path.posix.join(urlPrefix, pluginFolder, /)即插件资源 URL 前缀 插件文件夹名因此你在插件中引用的相对资源都会被解析到该 URL 之下。5.4 样式与 UI 一致性每个插件 iframe 自带 Redis Insight 的基础样式包括字体与配色方案。官方建议使用 React 与 Elastic UIEUI库保持插件可视化与整个应用的一致性。仓库中 clients-list 的依赖 即包含elastic/eui、react、react-dom、classnames、json-bigint等可直接参考其工程化配置其构建脚本使用vite -c ../vite.config.mjs。六、插件与主应用通信redisinsight-plugin-sdk插件运行在 iframe 沙箱中与主应用通信需要借助第三方库redisinsight-plugin-sdk。安装方式npm install redisinsight-plugin-sdk其完整方法说明位于仓库内 redisinsight-plugin-sdk/README.md主要 API 如下setHeaderText(text)设置命令结果头部header的自定义文本例如setHeaderText(Matched: 10)。import { setHeaderText } from redisinsight-plugin-sdk; setHeaderText(Matched: 10);executeRedisCommand(command)在插件内执行 Redis 命令目前仅支持只读命令。返回Promise[{ response, status }]。import { executeRedisCommand } from redisinsight-plugin-sdk; try { const result await executeRedisCommand(GET foo); const [{ response, status }] result; if (status success) { // Do smth } } catch (e) { console.error(e); }getState() / setState(state)setState(state)保存当前命令可视化的状态任意数据getState()返回已保存的状态若未保存则抛出错误。二者配合可用于记忆用户偏好、分页位置等交互状态。import { getState, setState } from redisinsight-plugin-sdk; // 保存状态 await setState({ a: 1, b: 2 }); // 读取状态 const result await getState();formatRedisReply(response, command)将 Redis 响应解析为 CLI 风格字符串的工具函数便于直接展示原始回复文本。import { formatRedisReply } from redisinsight-plugin-sdk; try { const parsedReply await formatRedisReply(data[0].response, command); // parsedReply 示例 // 1) 1) COUNT(a) // 2) 1) 1) 0 // 3) 1) Cached execution: 1 // 2) Query internal execution time: 3.134125 milliseconds } catch (e) { console.error(e); }七、后端插件发现机制源码级解析理解了前端插件协议后再看服务端如何找到并校验插件能帮助你避免踩坑。7.1 扫描与校验流程plugin.service.ts 的核心逻辑getAll()合并两类插件的扫描结果并返回静态资源根路径staticscanPluginsFolder()遍历pluginsFolder下的每个子目录读取其中的package.json使用plainToInstance(Plugin, manifest)将清单映射为PluginDTO 对象调用validator.validateOrReject(plugin, { whitelist: true })进行运行时校验——这正是上一节提到的必填字段name、main、visualizations、matchCommands等真正生效的地方校验通过后服务端拼装baseUrl、mainurlPrefix pluginFolder manifest.main、styles若存在等 URL 字段校验失败或读取异常时日志记录错误并跳过该插件返回undefined后被filter过滤。这意味着清单字段缺失、matchCommands为空数组、main为空等都会导致插件在扫描阶段被静默剔除前端根本看不到该插件。开发时若插件消失应优先检查清单字段是否齐全、JSON 是否合法。7.2 校验规则一览从 plugin.response.ts 的 DTO 装饰器可以整理出完整的校验规则Plugin.nameIsNotEmpty()IsString()Plugin.mainIsNotEmpty()IsString()Plugin.visualizationsIsDefined()IsArray()ArrayNotEmpty()且每个元素需通过PluginVisualization的嵌套校验PluginVisualization.id/name/activationMethod均需非空字符串PluginVisualization.matchCommandsIsDefined()IsArray()ArrayNotEmpty()可选字段styles、default、iconDark、iconLight、matchQueryanyRegex/noneRegex数组需满足各自类型约束。7.3 HTTP 接口plugin.controller.ts 暴露GET /plugins接口返回结构为PluginsResponsestatic插件静态资源 URI与plugins可用插件列表含internal标识区分内置/自定义插件。八、动手实践建议结合以上内容开发一个 Workbench 插件的最小路径是在plugins目录或仓库内redisinsight/ui/src/packages/下创建以插件名命名的文件夹编写根目录package.json声明name、main、visualizations至少一个可视化含id、name、activationMethod、matchCommands按需添加styles与default编写核心脚本export default { renderVisualization }函数名对应activationMethod在函数内读取props.command与props.data向#app渲染内容如需与主应用交互自定义头部、执行只读命令、持久化状态、格式化响应安装并引入redisinsight-plugin-sdk重新加载 Workbench执行匹配的命令并验证可视化若未出现检查清单校验规则与服务端日志。仓库中的 clients-list 是一个可直接研读的端到端范例其src/下包含table-view表格与json-viewJSON 高亮两组组件、utils/parseResponse.ts响应解析工具及配套测试文件如JSONView.spec.tsx、TableView.spec.tsx完整展示了命令匹配 → 数据解析 → 组件渲染 → 主题适配的插件开发全流程适合作为你第一个插件的起点。总结Redis Insight 的 Workbench 插件体系由三部分组成运行时目录扫描与清单校验后端PluginService、iframe 隔离渲染协议#app挂载点、window.state、theme_DARK/LIGHT、主应用通信 SDKredisinsight-plugin-sdk。理解这三层你就能以极低的侵入成本为任意 Redis 命令打造专属的高质量数据可视化让 Workbench 真正服务于你自己的调试与验证工作流。【免费下载链接】RedisInsightRedis GUI by Redis项目地址: https://gitcode.com/GitHub_Trending/re/RedisInsight创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考