Beekeeper Studio 插件视图Plugin Views开发指南Tab、Shell-Tab 与视图状态管理【免费下载链接】beekeeper-studioModern and easy to use SQL client for MySQL, Postgres, SQLite, SQL Server, and more. Linux, MacOS, and Windows.项目地址: https://gitcode.com/GitHub_Trending/be/beekeeper-studio本文是 Beekeeper Studio 插件开发体系中关于「视图」的实战指南完整讲解插件如何通过manifest.json声明base-tab、shell-tab与规划中的sidebar 视图以及如何使用getViewState/setViewState实现跨重启的视图状态持久化与实例隔离。读完本文你将能根据插件形态选择正确的视图类型、编写合法的 manifest 配置并理解视图状态在宿主应用中的底层存储机制。注意Beekeeper Studio 的插件系统目前仍处于 Beta 阶段自 Beekeeper Studio 5.3 提供官方欢迎社区反馈。视图类型总览插件通过「视图View」与 Beekeeper Studio 集成视图决定了插件界面在应用中出现的位置与形态。视图声明统一放在manifest.json的capabilities.views数组中每个视图由四个字段描述字段类型必填说明idstring是视图的唯一标识供菜单、命令等引用namestring是显示在标签页 / 侧边栏上的名称typeViewType是视图类型决定布局形态entrystring是相对插件根目录的 HTML 入口文件路径当前可用的视图类型如下类型状态说明shell-tab可用插件 iframe 位于上方、可折叠的结果表格位于下方的标签页base-tab可用占据整个标签页空间的独立界面primary-sidebar规划中主侧边栏面板secondary-sidebar规划中次级侧边栏面板其中「标签页视图」让插件像查询标签页一样出现在主工作区中是当前插件系统的主力形态侧边栏视图则面向「常驻面板」的使用场景目前仍在规划阶段。Tab 视图插件的主战场Tab 视图会让插件作为标签页出现在主工作区与查询标签页Query Tab及其他内容并列展示。Tab 视图又细分为两种布局。Base Tab全屏独立界面Base Tab 的插件界面会占据整个标签页空间适合工具型、面板型插件——所有内容都由插件自己的 HTML 自行组织宿主不附加任何特殊 UI。从源码看TabPluginBase.vue 的模板非常精简只在容器中渲染一个isolated-plugin-view即插件入口 HTML 的隔离 iframe没有任何多余外壳。Shell Tab上方控件 下方结果表Shell Tab 在底部提供一个可打开 / 关闭的结果表格面板插件 iframe 位于上方用户在上方操作插件控件查询或分析结果则以熟悉的表格格式显示在下方。这种布局非常适合「查询 / 分析类」插件——控制逻辑与数据查看分离交互效率高。Manifest 示例{ capabilities: { views: [ { id: data-analyzer, name: Data Analyzer, type: shell-tab, entry: index.html, } ] } }Shell Tab 的宿主实现原理从源码结构看Shell Tab 的实际承载组件是 TabPluginShell.vue。它的布局由split.js驱动Split([topPanel, bottomPanel], { direction: vertical, sizes: [100, 0] })建立垂直分割插件 iframeisolated-plugin-view在上、result-table在下初始状态下表格面板完全折叠占比 0%。其中expandTableResult()会把分割比例调整为[60, 40]即插件占 60%、结果表占 40%面板可见性判定存在 5% 的阈值VISIBLE_THRESHOLD 5底部占比超过 5% 才被视为可见用户可通过状态栏上的「Hide result / Show result」按钮手动折叠 / 展开表格。在 TabPluginShell.vue 的handleRequest中宿主为 Shell Tab 注册了runQuery、expandTableResult、setTabTitle、getViewState、setViewState、toggleStatusBarUI等请求处理这也是beekeeperstudio/plugin中对应 API 的落地通道。Sidebar 视图规划中Sidebar 视图将插件作为应用侧边栏中的常驻面板呈现在用户处理其他内容时保持可见适合「随时查阅」型功能例如 SQL 参考手册、速查表。官方计划支持primary-sidebar主侧边栏与secondary-sidebar次级侧边栏两种类型当前仍未开放。Manifest 示例规划中的声明格式{ capabilities: { views: [ { id: quick-reference, name: SQL Reference, type: secondary-sidebar, entry: sidebar.html, } ] } }一个插件声明多个视图单个插件可以在capabilities.views数组中声明任意多个视图每个视图拥有独立的id、name、type与entry。例如一个插件既提供主分析界面又提供一个快捷工具面板{ capabilities: { views: [ { id: main-interface, name: Data Processor, type: shell-tab, entry: main.html, }, { id: quick-tools, name: Quick Tools, type: secondary-sidebar, entry: tools.html, } ] } }视图声明完毕后可以通过capabilities.menus中的菜单项把视图暴露给用户例如placement: newTabDropdown让用户从「新建标签」下拉菜单中打开你的视图菜单项通过view字段引用视图的id。完整字段说明见 Manifest Reference。视图状态View State跨重启持久化每个插件视图都可以通过getViewState与setViewState两个 API 存取自己的状态状态在应用重启后依然保留。这在「保存会话」类功能中尤其有用例如 AI 助手保存对话记录、数据分析工具保存上次的筛选条件。典型用法示例// 用户交互时保存状态 await setViewState({ conversations: [ Ai: Hello, how can I help you today?, Human: Make a plain sandwich recipe using SQL., ] }); // 视图加载时恢复状态 const state await getViewState(); if (state) { setConversations(state.conversations); }API 签名详见 API Referenceasync function getViewStateT(): PromiseT; async function setViewStateT(state: T): Promisevoid;状态隔离规则视图状态按「视图实例」隔离遵循三条规则每个视图维护自己独立的状态视图之间无法互相访问对方的状态用户打开同一插件的多个标签页时每个标签页拥有完全独立的状态。例如用户创建了两个 AI Shell 标签页两个标签页各自保存互不相通的状态数据彼此无法读取对方存储的信息。这一隔离保证不会出现「一个标签页的会话串到另一个标签页」之类的串扰问题。源码视角状态是如何持久化的从源码看视图状态并非存放在插件 iframe 内部而是挂载在宿主侧的标签页上下文上。在 TabPluginShell.vue 与 TabPluginBase.vue 中两个组件的处理逻辑一致getViewState请求直接返回this.tab.context.statesetViewState请求把状态写入this.tab.context.state随后派发tabs/save动作保存标签页。由于标签页本身由 Beekeeper Studio 的标签持久化机制管理标签会跨重启恢复挂载在标签页上下文上的state也随之获得跨重启持久化能力。这也是「同一插件不同标签页状态独立」的根源——状态绑定在单个 tab 实例上而非绑定在插件全局。视图类型与 manifest 的进阶核对在 manifest.md 的ViewType表中可用类型明确列为shell-tab与base-tab同时源码 types.ts 也印证了这一点TabType只有shell | base两种取值视图类型即${TabType}-tab并注明shell-tab的宿主结构是「上方插件 iframe 下方可完全折叠的结果表」。需要留意的是manifest 文档「Type Definitions」一节中把全屏标签类型写作plain-tab与ViewType表及源码中的base-tab存在命名出入——开发时请以当前源码与ViewType表采用的base-tab为准。此外manifestVersion默认值为0旧版格式使用capabilities.views.tabTypes数组元素含kind: shell等字段新版请使用本文展示的manifestVersion: 1capabilities.views数组格式并在根目录放置manifest.json。延伸阅读创建你的第一个插件Creating Your First Plugin从零构建 Hello World 插件体验shell-tab视图与数据库交互Manifest Referencemanifest.json 完整参考capabilities.views、PluginMenuItem、PluginMenuItemPlacement等全部字段Plugin API Reference插件 API 参考getViewState/setViewState、expandTableResult、runQuery、broadcast等完整 API 清单【免费下载链接】beekeeper-studioModern and easy to use SQL client for MySQL, Postgres, SQLite, SQL Server, and more. Linux, MacOS, and Windows.项目地址: https://gitcode.com/GitHub_Trending/be/beekeeper-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Beekeeper Studio 插件视图（Plugin Views）开发指南：Tab、Shell-Tab 与视图状态管理
Beekeeper Studio 插件视图Plugin Views开发指南Tab、Shell-Tab 与视图状态管理【免费下载链接】beekeeper-studioModern and easy to use SQL client for MySQL, Postgres, SQLite, SQL Server, and more. Linux, MacOS, and Windows.项目地址: https://gitcode.com/GitHub_Trending/be/beekeeper-studio本文是 Beekeeper Studio 插件开发体系中关于「视图」的实战指南完整讲解插件如何通过manifest.json声明base-tab、shell-tab与规划中的sidebar 视图以及如何使用getViewState/setViewState实现跨重启的视图状态持久化与实例隔离。读完本文你将能根据插件形态选择正确的视图类型、编写合法的 manifest 配置并理解视图状态在宿主应用中的底层存储机制。注意Beekeeper Studio 的插件系统目前仍处于 Beta 阶段自 Beekeeper Studio 5.3 提供官方欢迎社区反馈。视图类型总览插件通过「视图View」与 Beekeeper Studio 集成视图决定了插件界面在应用中出现的位置与形态。视图声明统一放在manifest.json的capabilities.views数组中每个视图由四个字段描述字段类型必填说明idstring是视图的唯一标识供菜单、命令等引用namestring是显示在标签页 / 侧边栏上的名称typeViewType是视图类型决定布局形态entrystring是相对插件根目录的 HTML 入口文件路径当前可用的视图类型如下类型状态说明shell-tab可用插件 iframe 位于上方、可折叠的结果表格位于下方的标签页base-tab可用占据整个标签页空间的独立界面primary-sidebar规划中主侧边栏面板secondary-sidebar规划中次级侧边栏面板其中「标签页视图」让插件像查询标签页一样出现在主工作区中是当前插件系统的主力形态侧边栏视图则面向「常驻面板」的使用场景目前仍在规划阶段。Tab 视图插件的主战场Tab 视图会让插件作为标签页出现在主工作区与查询标签页Query Tab及其他内容并列展示。Tab 视图又细分为两种布局。Base Tab全屏独立界面Base Tab 的插件界面会占据整个标签页空间适合工具型、面板型插件——所有内容都由插件自己的 HTML 自行组织宿主不附加任何特殊 UI。从源码看TabPluginBase.vue 的模板非常精简只在容器中渲染一个isolated-plugin-view即插件入口 HTML 的隔离 iframe没有任何多余外壳。Shell Tab上方控件 下方结果表Shell Tab 在底部提供一个可打开 / 关闭的结果表格面板插件 iframe 位于上方用户在上方操作插件控件查询或分析结果则以熟悉的表格格式显示在下方。这种布局非常适合「查询 / 分析类」插件——控制逻辑与数据查看分离交互效率高。Manifest 示例{ capabilities: { views: [ { id: data-analyzer, name: Data Analyzer, type: shell-tab, entry: index.html, } ] } }Shell Tab 的宿主实现原理从源码结构看Shell Tab 的实际承载组件是 TabPluginShell.vue。它的布局由split.js驱动Split([topPanel, bottomPanel], { direction: vertical, sizes: [100, 0] })建立垂直分割插件 iframeisolated-plugin-view在上、result-table在下初始状态下表格面板完全折叠占比 0%。其中expandTableResult()会把分割比例调整为[60, 40]即插件占 60%、结果表占 40%面板可见性判定存在 5% 的阈值VISIBLE_THRESHOLD 5底部占比超过 5% 才被视为可见用户可通过状态栏上的「Hide result / Show result」按钮手动折叠 / 展开表格。在 TabPluginShell.vue 的handleRequest中宿主为 Shell Tab 注册了runQuery、expandTableResult、setTabTitle、getViewState、setViewState、toggleStatusBarUI等请求处理这也是beekeeperstudio/plugin中对应 API 的落地通道。Sidebar 视图规划中Sidebar 视图将插件作为应用侧边栏中的常驻面板呈现在用户处理其他内容时保持可见适合「随时查阅」型功能例如 SQL 参考手册、速查表。官方计划支持primary-sidebar主侧边栏与secondary-sidebar次级侧边栏两种类型当前仍未开放。Manifest 示例规划中的声明格式{ capabilities: { views: [ { id: quick-reference, name: SQL Reference, type: secondary-sidebar, entry: sidebar.html, } ] } }一个插件声明多个视图单个插件可以在capabilities.views数组中声明任意多个视图每个视图拥有独立的id、name、type与entry。例如一个插件既提供主分析界面又提供一个快捷工具面板{ capabilities: { views: [ { id: main-interface, name: Data Processor, type: shell-tab, entry: main.html, }, { id: quick-tools, name: Quick Tools, type: secondary-sidebar, entry: tools.html, } ] } }视图声明完毕后可以通过capabilities.menus中的菜单项把视图暴露给用户例如placement: newTabDropdown让用户从「新建标签」下拉菜单中打开你的视图菜单项通过view字段引用视图的id。完整字段说明见 Manifest Reference。视图状态View State跨重启持久化每个插件视图都可以通过getViewState与setViewState两个 API 存取自己的状态状态在应用重启后依然保留。这在「保存会话」类功能中尤其有用例如 AI 助手保存对话记录、数据分析工具保存上次的筛选条件。典型用法示例// 用户交互时保存状态 await setViewState({ conversations: [ Ai: Hello, how can I help you today?, Human: Make a plain sandwich recipe using SQL., ] }); // 视图加载时恢复状态 const state await getViewState(); if (state) { setConversations(state.conversations); }API 签名详见 API Referenceasync function getViewStateT(): PromiseT; async function setViewStateT(state: T): Promisevoid;状态隔离规则视图状态按「视图实例」隔离遵循三条规则每个视图维护自己独立的状态视图之间无法互相访问对方的状态用户打开同一插件的多个标签页时每个标签页拥有完全独立的状态。例如用户创建了两个 AI Shell 标签页两个标签页各自保存互不相通的状态数据彼此无法读取对方存储的信息。这一隔离保证不会出现「一个标签页的会话串到另一个标签页」之类的串扰问题。源码视角状态是如何持久化的从源码看视图状态并非存放在插件 iframe 内部而是挂载在宿主侧的标签页上下文上。在 TabPluginShell.vue 与 TabPluginBase.vue 中两个组件的处理逻辑一致getViewState请求直接返回this.tab.context.statesetViewState请求把状态写入this.tab.context.state随后派发tabs/save动作保存标签页。由于标签页本身由 Beekeeper Studio 的标签持久化机制管理标签会跨重启恢复挂载在标签页上下文上的state也随之获得跨重启持久化能力。这也是「同一插件不同标签页状态独立」的根源——状态绑定在单个 tab 实例上而非绑定在插件全局。视图类型与 manifest 的进阶核对在 manifest.md 的ViewType表中可用类型明确列为shell-tab与base-tab同时源码 types.ts 也印证了这一点TabType只有shell | base两种取值视图类型即${TabType}-tab并注明shell-tab的宿主结构是「上方插件 iframe 下方可完全折叠的结果表」。需要留意的是manifest 文档「Type Definitions」一节中把全屏标签类型写作plain-tab与ViewType表及源码中的base-tab存在命名出入——开发时请以当前源码与ViewType表采用的base-tab为准。此外manifestVersion默认值为0旧版格式使用capabilities.views.tabTypes数组元素含kind: shell等字段新版请使用本文展示的manifestVersion: 1capabilities.views数组格式并在根目录放置manifest.json。延伸阅读创建你的第一个插件Creating Your First Plugin从零构建 Hello World 插件体验shell-tab视图与数据库交互Manifest Referencemanifest.json 完整参考capabilities.views、PluginMenuItem、PluginMenuItemPlacement等全部字段Plugin API Reference插件 API 参考getViewState/setViewState、expandTableResult、runQuery、broadcast等完整 API 清单【免费下载链接】beekeeper-studioModern and easy to use SQL client for MySQL, Postgres, SQLite, SQL Server, and more. Linux, MacOS, and Windows.项目地址: https://gitcode.com/GitHub_Trending/be/beekeeper-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考