Beekeeper Studio JSON 侧边栏完全指南以 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-studioJSON 侧边栏JSON Sidebar是 Beekeeper Studio 中一项面向行级数据的高效查看工具它可以把数据表格中的任意一条记录以标准 JSON 格式完整呈现支持宽表、复杂 Schema 与嵌套字段的阅读还能点击外键就地展开关联记录、用模糊文本或正则表达式过滤字段。读完本文你将掌握 JSON 侧边栏的两种打开方式、关系内联展开、文本/正则搜索以及其背后的组件结构与过滤、展开、解析等底层实现原理。快速上手两种方式打开 JSON 侧边栏在任何数据表格中JSON 侧边栏可以通过以下两种方式之一打开见官方文档 docs/user_guide/json-sidebar.md右键任意数据行选择See Details查看详情——这是最直觉的操作路径面向当前聚焦的行点击应用标题栏右侧的停靠dock-right图标——打开侧边栏后它会跟随当前选中的行或表数据联动更新。打开后当前记录会以 JSON 对象的形式呈现在右侧侧边栏中。其核心价值在于宽表wide tables列数极多、横向滚动困难的表、复杂 Schema多层级嵌套的列结构以及嵌套字段如 JSON/JSONB 列、数组、对象组合都能在 JSON 视图中一目了然。查看与复制它就是标准 JSONJSON 侧边栏渲染的正是普通 JSON 文本——没有私有格式、没有魔改标记。这意味着你可以直接在侧边栏中阅读任意字段的完整值与嵌套层级当你得到满意的数据后直接复制即可文档原话simply copy the data -- its normal JSON!可无缝粘贴到编辑器、接口调试工具或脚本中继续使用。侧边栏顶部的⋮ 菜单还提供了几个与查看/复制相关的常用操作源码见 JsonViewer.vue菜单项作用Copy Visible把当前可见过滤后的 JSON 文本复制到剪贴板Collapse all / Expand all一键折叠或展开全部嵌套层级Always Expand Foreign Keys切换默认自动展开外键开关默认关Wrap Text切换长行文本是否自动换行内联查看关系点击外键就地展开对于 join 表、或者依赖大量关联来组织数据的 Schema文档特别点名了 Ruby on Rails 风格的数据模型JSON 侧边栏提供了一种轻量级的关系浏览方式直接点击 JSON 中的外键即可**就地in-line**展开对应的关联记录无需切换标签页、也无需手写 JOIN 查询。实现上所有可展开的外键路径会作为expandablePaths传入侧边栏组件定位到该键所在行后用 CodeMirror 的Decoration.replace替换为可点击的expandable-value小部件带下拉箭头图标点击后通过expandPath事件回调将{ path, tableKey }结构传给上层以懒加载并内嵌关联数据。这部分逻辑位于 jsonViewer.ts 的createExpandableTextDecoration/ExpandableTextWidget以及findKeyPosition/findValueInfo两个定位辅助函数jsonViewer.ts。如果你希望每次打开记录时都自动展开第一层外键可以在侧边栏菜单中打开Always Expand Foreign Keys对应地JsonViewer.vue 在dataId更新时会遍历expandablePaths将深度为 1 的外键全部自动展开。完整的交互演示可参考仓库中的视频文件 json-sidebar-fks.mp4。用文本或正则表达式搜索字段侧边栏顶部的搜索框同时支持两种过滤模式模糊文本搜索直接输入任意文本按字段路径如actor.firstName做大小写不敏感的包含匹配把不相关的字段从 JSON 视图中过滤掉正则表达式搜索以/正则/标志位的格式输入例如/^address/或/date/i即可按正则匹配字段路径精确定位你关心的数据。搜索框的占位提示在源码中写得很明确——Filter keys by text or /regex/JsonViewer.vue输入经过 500ms 防抖后生效JsonViewer.vue并且搜索结果会实时联动过滤右侧 JSON 视图。搜索关键字也会随标签页持久化切换标签页后自动恢复见下文状态持久化。正则解析的底层实现过滤逻辑的核心在 jsonViewer.ts 的deepFilterObjectProps与 utils.ts 的toRegexSafeexport function toRegexSafe(input: string) { const match input.match(/^\/(.)\/([a-z]*)$/); if (!match) return null; try { return new RegExp(match[1], match[2]); } catch (e) { return null; } }输入以/开头并以/标志位结尾时被识别为正则并编译为RegExp非法正则返回null退化为普通文本处理否则按普通模糊文本处理path.toLowerCase().includes(filter.toLowerCase())过滤发生在字段路径上如address.city而非值内容——这一点与文档找到你想要的数据的定位一致先缩小字段范围再在剩余的 JSON 中精读值。交互演示可参考仓库中的视频文件 json-sidebar-regex.mp4。源码剖析侧边栏如何工作从源码结构看JSON 侧边栏由两层组件 一组数据工具函数构成理解这套结构有助于你判断它的行为边界与可扩展点。1. 容器组件JsonViewerSidebar.vueJsonViewerSidebar.vue 负责与全局应用状态对接订阅三个AppEvent定义于 AppEvent.tsupdateJsonViewerSidebar接收新行数据、jsonViewerSidebarExpandPath转发外键展开、jsonViewerSidebarValueChange转发 JSON 值编辑结果维护value / expandablePaths / editablePaths / signs / dataId / filter等状态并通过UpdateOptions结构统一更新jsonViewer.ts 中定义了该接口按jsonViewerSidebar-${tabId}为每个标签页分别持久化搜索过滤词SmartLocalStorage切换标签页时自动恢复关闭标签页时清除。2. 渲染组件JsonViewer.vueJsonViewer.vue 负责把记录渲染成可交互的 JSON 编辑器基于 CodeMirror 的text-editor组件language-idjson内置 JSON 语法高亮、代码折叠fold-gutters通过JsonSourceMap.stringify(value, null, 2)生成格式化 JSON同时利用json-source-map建立文本位置 ↔ 对象路径的映射这是外键点击、可编辑区域定位、行号标记lineGutters的共同基础支持局部可编辑editablePaths范围内的值可以在侧边栏内直接编辑编辑内容经过 JSON 解析校验后通过bks-json-value-change事件回写非法 JSON 会以错误 marker 标出见 JsonViewer.vue。3. JSON 列自动解析parseRowDataForJsonViewer数据库返回的行数据通常是字符串侧边栏显示前会经过 jsonViewer.ts 的parseRowDataForJsonViewer处理数据类型为JSON/JSONB的列直接JSON.parse非 JSON 类型的列若字符串以{…}或[…]包裹也会尝试解析为对象/数组解析失败仅记录警告日志不阻断查看保证容错。4. 长文本截断与二进制值超过globals.maxDetailViewTextLength的字符串默认截断显示行尾渲染为带 Show more 的truncatable-value小部件点击即恢复完整内容jsonViewer.tsTypedArray / Buffer 等二进制值会按binaryEncoding配置$bksConfig.ui.general.binaryEncoding转为可读字符串JsonViewer.vue避免在 JSON 视图中出现乱码或不可序列化对象。5. 端到端测试覆盖仓库中保留了对应的 E2E 测试骨架 jsonSideBar.test.ts测试流程先连接 PostgreSQL、执行SELECT * FROM actor WHERE actor_id IN (1, 2);、等待结果行渲染再验证侧边栏的可见性当前测试标记为skip注释中说明仍需处理试用弹窗与侧边栏文件但它完整还原了建连 → 查询 → 打开 JSON 侧边栏的真实使用链路可作为复现该功能的手动操作清单。小结JSON 侧边栏是 Beekeeper Studio 面向单条记录深读场景的标配工具右键或标题栏图标即可打开宽表、复杂 Schema、嵌套字段一屏尽览数据即标准 JSON复制即用外键可点击内联展开配合默认自动展开外键开关适合 join 密集型的 Rails 风格数据模型顶部的搜索框同时支持模糊文本与/regex/正则两种过滤模式。其底层由 JsonViewerSidebar.vue 与 JsonViewer.vue 两级组件驱动借助 json-source-map 实现位置映射再由 jsonViewer.ts 提供路径定位、深过滤、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-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考