Beekeeper Studio JSON Sidebar 完全指南任意行转 JSON、内联外键展开与正则过滤【免费下载链接】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-studioBeekeeper Studio本仓库 README.md 定位为 Modern and easy to use SQL client在数据表视图中内置了一个 JSON SidebarJSON 侧边栏它能把任意一条数据库记录渲染成标准 JSON 文本并支持内联展开外键关联记录、文本/正则过滤、长文本截断与二进制字段编码查看。读完本文你将掌握如何在任何数据表中打开该侧边栏、如何利用它在宽表与复杂嵌套结构中快速定位数据、如何在 JSON 视图里一键展开外键关系以及它的过滤语法与底层实现原理。打开 JSON Sidebar 的两种方式官方文档 json-sidebar.md 给出了两种打开方式二者均可作用于任意数据表右键任意行在上下文菜单中选择See Details查看详情点击应用标题栏右侧的停靠面板图标:material-dock-right:直接切换出次侧边栏。从源码结构看第二种方式对应 CoreInterface.vue 中的toggleOpenJsonViewer()它会同时完成两件事展开次侧边栏handleToggleOpenSecondarySidebar并通过AppEvent.selectSecondarySidebarTab事件把活动标签切换到json-viewertoggleOpenJsonViewer() { this.handleToggleOpenSecondarySidebar() this.trigger(AppEvent.selectSecondarySidebarTab, json-viewer) },侧边栏标签本身在 SidebarModule.ts 中注册默认即包含一个 id 为json-viewer、标题为JSON Viewer的标签并由 SecondarySidebar.vue 挂载对应的 JsonViewerSidebar.vue 组件。也就是说JSON Sidebar 是次侧边栏Secondary Sidebar的第一个内建标签它和表格、查询结果视图是同一套事件总线上的协作组件。需要留意的是该功能在 Community社区版中受商业授权限制JsonViewerUpsell 组件 在$store.getters.isCommunity为真时渲染“Upgrade required to use the JSON Row Viewer”提示fk_click.ts 中也能看到社区版用户经由外键打开 JSON Viewer 每月仅一次的限制逻辑。任意记录渲染为可复制、可折叠的标准 JSON侧边栏的核心能力是把当前选中行转换为 JSON 并展示。其数据流如下表格组件查询结果使用 ResultTable.vue表数据视图使用 TableTable.vue在行选中、范围变化、标签激活时把dataId、value行数据对象、expandablePaths、editablePaths、signs打包成UpdateOptions通过AppEvent.updateJsonViewerSidebar定义于 AppEvent.ts广播出去JsonViewerSidebar.vue 监听该事件并调用update(options)更新自己的value、expandablePaths等状态最终由 JsonViewer.vue 渲染它借助json-source-map对 JSON 对象做stringify(obj, null, 2)得到带源码位置映射的文本再交给 ui-kit 的TextEditorCodeMirror 6 封装language-idjson进行高亮显示。由于输出的是标准 JSON 文本你随时可以一键复制使用——官方文档强调 its normal JSON!。侧边栏头部右上角的more_vert菜单JsonViewer.vue提供了五个实用操作菜单项行为Copy Visible把当前可见的 JSON 文本写入剪贴板走$native.clipboard.writeTextCollapse all/Expand all触发编辑器的折叠/展开适合快速概览或看全嵌套结构Always Expand Foreign Keys切换“默认展开外键”勾选后新选中的行会自动展开第一层外键见下文Wrap Text切换长行自动换行避免横向滚动折叠状态并非一次性编辑器通过persistJsonFold()扩展在文本变化时保存折叠位置JsonViewer.vue切回同一标签后折叠状态得以保留。长文本截断与二进制字段编码宽表里常有大段文本、bytea/BLOB等二进制字段JSON Sidebar 对此做了两项优化实现位于 jsonViewer.ts长字符串截断超过globals.maxDetailViewTextLengthglobals.ts 中定义为 30 字符的字符串值在视图中被截断并渲染成带Show more链接的truncatable-value装饰createTruncatableElement点击后该路径被加入restoredTruncatedPaths值恢复完整显示。二进制编码replacer函数把Uint8Array等类型化数组按$bksConfig.ui.general.binaryEncoding配置转成字符串十六进制或 base64且该转换在过滤视图与未过滤视图中保持一致见processedValue与filteredValue的注释说明因为JsonSourceMap.stringify不支持 replacer 函数需先转换再序列化。JSON 列的原生解析对于JSON/JSONB类型的列parseRowDataForJsonViewer 会把字符串形式的 JSON 解析为真正的嵌套对象再交给侧边栏渲染对于非 JSON 类型的列如果字符串以{/[开头并以}/]结尾也会被尝试解析。这样 PostgreSQL 的jsonb、MySQL 的json等字段在 JSON Sidebar 里呈现为可折叠的层级结构而不是一行难以阅读的字符串。在 JSON 视图内联展开外键关系官方文档将“点击外键、就地展开关联记录”作为 JSON Sidebar 的标志性能力特别强调它适用于连接表join tables以及 Rails 这类大量使用关联组织的 schema。交互与渲染当行数据存在外键时TableTable.vue 会为每个外键生成一条ExpandablePathpath为外键列路径tableKey携带目标表、目标列信息并随UpdateOptions一并下发。JsonViewer 侧会在对应键值上绘制可点击装饰createExpandableElement带keyboard_arrow_down图标点击后通过AppEvent.jsonViewerSidebarExpandPath事件回传给表格组件。展开背后的查询expandForeignKeyTableTable.vue实际执行了一次connection.selectTop以当前行外键值作为过滤条件、限定 1 条记录从目标表取回关联行并写回selectedRowData的对应路径_.set(selectedRowData, path, table.result[0])随后为目标表继续计算其自身的外键把新一级ExpandablePath追加进列表——因此可以逐级向下钻取形成多层内联展开从可展开列表中移除已展开的路径调用updateJsonViewerSidebar()刷新侧边栏。如果勾选了“Always Expand Foreign Keys”在dataId变化即切换选中行时侧边栏会自动展开所有第一层外键JsonViewer.vue省去逐个点击的重复操作。另外表格网格本身的外键图标跳转由 fk_click.ts 实现点击外键图标会基于目标表、主键信息加载目标记录并在允许的情况下自动打开 JSON Viewer 标签selectSecondarySidebarTab: json-viewer。官方还提供了演示视频位于仓库docs/assets/videos/下文档通过video标签内嵌内联展开外键docs/assets/videos/json-sidebar-fks.mp4顶部搜索框模糊文本与正则表达式搜索框位于侧边栏头部占位提示为Filter keys by text or /regex/即支持两种过滤模式模糊文本直接输入关键字按路径key 路径如a.b.c做不区分大小写的包含匹配正则表达式输入以/包裹的格式如/^user_.*/按正则匹配路径。其底层实现在 jsonViewer.ts 的deepFilterObjectProps中先用 toRegexSafe 解析输入——若匹配/pattern/flags形式则编译为正则编译失败返回null回退到文本匹配否则当作普通文本随后遍历对象的所有路径筛选出匹配的路径并基于_.pick生成过滤后的对象JSON 文本随之重算。因此过滤是针对键路径而非值的目的是快速定位感兴趣的字段哪怕对象嵌套很深。值得注意的交互细节输入框采用了 500ms 防抖debouncedFilterJsonViewer.vue避免每敲一个字符都重算整棵 JSON 树输入框右侧出现cancel按钮可一键清空过滤。官方演示视频正则过滤搜索docs/assets/videos/json-sidebar-regex.mp4过滤状态按标签持久化从 JsonViewerSidebar.vue 可以看到过滤关键字会以jsonViewerSidebar-${tab.id}为键写入SmartLocalStoragelocalStorage 封装。切换标签时清空当前行数据、恢复该标签上次保存的过滤词关闭标签则清理对应持久化状态。也就是说你在某个查询/表标签里设置的过滤词下次切回该标签时依然生效而不同标签之间的过滤词互不干扰。组件与事件关系小结从源码结构可以把 JSON Sidebar 的完整调用链归纳如下环节组件/模块关键点入口CoreInterface.vue标题栏图标 → 展开次侧边栏 激活 json-viewer 标签标签注册SidebarModule.tstabs: [{ id: json-viewer, label: JSON Viewer }]挂载SecondarySidebar.vue按tab.id json-viewer渲染JsonViewerSidebar数据源ResultTable.vue / TableTable.vue选中行 →AppEvent.updateJsonViewerSidebar事件定义AppEvent.tsupdateJsonViewerSidebar/jsonViewerSidebarExpandPath/jsonViewerSidebarValueChange展示JsonViewer.vuejson-source-map 序列化 CodeMirror 文本编辑器 装饰与折叠数据加工jsonViewer.ts路径遍历、过滤、截断、二进制 replacer、外键路径标记仓库中还保留了对应的端到端测试骨架 apps/studio/e2e/tests/jsonSideBar.test.ts它会在 PostgreSQL 上执行SELECT * FROM actor WHERE actor_id IN (1, 2);并断言结果面板可见当前对 JSON 侧边栏的用例以test.skip标注说明该功能已具备自动化验证的接入点但用例仍在完善中。适用场景与使用建议综合官方文档与源码实现JSON Sidebar 最适合以下场景宽表wide tables单行有几十上百列时表格横向滚动难以比较JSON 视图把整行折叠在侧边栏中一目了然复杂/嵌套 schemajson/jsonb字段、嵌套对象、数组结构在 JSON 视图中可逐层折叠查看多表关联钻取点击外键值即可就地展开关联记录无需反复写 JOIN 查询尤其适合 Rails 风格的高关联 schema快速定位字段用模糊文本或/正则/过滤键路径在海量字段中秒级定位目标键数据提取因为是标准 JSON复制后可直接粘贴到其他工具、写入测试夹具或用于数据比对。需要复制时直接全选文本或使用菜单中的Copy Visible遇到超长字段时点击Show more展开完整内容想统一观察关联数据时打开Always Expand Foreign Keys。熟练掌握这四项交互即可在日常查数、排障和数据比对中把 JSON Sidebar 用成生产力工具。【免费下载链接】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），仅供参考