Lightdash Data App 可调分栏布局实战使用 shadcn Resizable 构建可拖拽面板【免费下载链接】lightdashAgentic BI. Analytics at the speed of code ⚡️项目地址: https://gitcode.com/GitHub_Trending/li/lightdash本指南以 Lightdash Data App 模板内置的 shadcnResizable组件底层为react-resizable-panels为对象说明如何在数据应用中实现图表 详情/检查器、过滤器侧栏 主网格、表格 图表等可拖拽调整大小的分栏布局。读完本文你将掌握 Resizable 的三个核心组件ResizablePanelGroup/ResizablePanel/ResizableHandle的完整用法、记忆用户偏好的autoSaveId机制、面板最小尺寸保护以及嵌套分组构建复杂网格布局的正确姿势并了解模板环境中与之配套的安装、预装依赖与布局约束。什么时候才应该使用可调面板Lightdash Data App 模板中的 Resizable 组件不是默认布局方案。它的适用信号非常明确当布局中存在两个或以上同级区域且用户确实能从就地重新分配空间中获益时才值得引入。典型的场景包括图表 详情/检查器面板——看我刚点击的那根柱子式的联动明细视图仪表盘主区 过滤器/侧栏——侧栏与主网格之间的空间再平衡同一查询的表格 图表并排——表格与可视化各自需要多大空间因人而异文档/解释面板 实时数据视图——说明文字与数据视图之间需要权衡。原文档的开篇即强调不要默认使用它。如果面板的信息比例是固定的例如 KPI 行位于网格上方、页头位于内容上方请直接使用 Tailwind 的 flex/grid。可调面板是为用户对『多看点图表还是多看点明细』有真实偏好的布局准备的。当用户明确提出拖拽调整大小让我自己调整面板尺寸时就是触发使用它的时机否则优先采用固定比例。模板环境中的 Resizable从安装到预装在动手写代码之前先确认模板环境里 Resizable 是如何落地的模板 package.json 在依赖中声明了react-resizable-panels: 4.10.0shadcn Resizable 的底层实现库此外还预装了recharts: 3.8.1、react: 19.2.5、tailwindcss: 3.4.17等配套依赖bootstrap.sh 通过npx shadcn2.3.0 add --overwrite --yes ... resizable将 Resizable 组件注册进模板生成src/components/ui/resizable组件文件与 e2b.Dockerfile 中沙箱的构建步骤保持同步确保生成环境与本地开发环境行为一致模板 skill.md 明确列出了预装组件清单其中Resizable展开为ResizablePanelGroup、ResizablePanel、ResizableHandle三个子组件均可从/components/ui/name导入。也就是说在 Lightdash Data App 模板中你不需要也不能执行npm install/pnpm add沙箱会失败且依赖已全部预装直接导入即可使用。基础用法三组件结构与完整示例shadcnResizable的使用模式固定为三层嵌套ResizablePanelGroup——容器通过direction声明主轴方向horizontal或verticalResizablePanel——可调整大小的面板配置defaultSize、minSize等ResizableHandle——面板之间的拖拽手柄配合withHandle显示可视化抓手。以下是一个横向拆分仪表盘的完整可运行示例继承自 原文档import { ResizablePanelGroup, ResizablePanel, ResizableHandle, } from /components/ui/resizable; export function SplitDashboard() { return ( ResizablePanelGroup directionhorizontal classNameh-[calc(100vh-3rem)] rounded-md border autoSaveIddashboard-split // remembers user sizing in localStorage ResizablePanel defaultSize{65} minSize{35} RevenueByMonth / /ResizablePanel ResizableHandle withHandle / ResizablePanel defaultSize{35} minSize{20} SegmentBreakdown / /ResizablePanel /ResizablePanelGroup ); }要点拆解directionhorizontal让两个面板左右排列拖拽手柄位于中间autoSaveIddashboard-split是持久化用户拖拽结果的关键详见下文规则 1defaultSize为百分比形式的初始宽度65/35minSize防止面板被压缩到不可用className直接叠加 Tailwind 工具类容器高度用calc(100vh-3rem)留出页头空间。六条硬性规则从防坑到最佳实践原文档给出了六条必须遵守的规则逐条展开如下。1. 必须设置autoSaveId让用户的调整被记住autoSaveId的值会作为 localStorage 的键使用用于在刷新/重新进入后恢复用户上次拖拽的面板尺寸。规则要点每个布局使用稳定且唯一的 id——一旦上线发布id 变更会导致用户历史尺寸丢失同一页面存在多个可调区域时id 不能重复它的价值在于把用户有真实偏好这一前提落到实处用户调整过一次之后每次打开都是他熟悉的比例。2. 每个面板都必须设置minSizeminSize以百分比表示面板的最小尺寸。不设置它的后果很直接用户可以一路把面板拖到 0图表内容被完全折叠、再也看不见。建议至少给出 20%35% 的保底值具体取决于面板承载内容的密度。3. 手柄务必加withHandleResizableHandle默认是一根 1 像素宽的悬停目标几乎不可见。加上withHandle后会渲染一个可见的拖拽抓手带圆角小把手提供明确的视觉拖拽暗示避免用户根本不知道这里可以拖动。4. 网格布局通过嵌套分组实现两个面板是最简形态更复杂的布局由嵌套组合而成过滤器 | 图表 | 明细三栏 → 一个directionhorizontal的分组上图下表图表在上、表格在下→directionvertical二者结合外层横向分三栏其中一栏内部再嵌一个纵向分组比如图表 明细表纵向堆叠即可形成完整的可调网格。5. 不要在Card内部使用Resizable 需要一个高度确定的父容器如h-screen、h-[600px]。如果把它放进内容撑开高度的Card面板会在拖拽时塌陷。正确做法是可调容器自身拥有明确高度Card作为面板内部的内容承载物出现而不是反过来。6. 面板内的图表必须支持响应式重排硬编码像素宽度的图表在面板尺寸变化时不会自动回流。因此使用 Recharts 时必须用ResponsiveContainer包裹图表使用其他基于 SVG 的图表时依赖viewBox进行等比缩放这条规则与模板中 Recharts 3 的用法要求一致——图表组件应当以容器为基准自适应而不是以固定像素为基准。用嵌套 Resizable 复刻仪表盘网格当用户的 prompt 附带仪表盘蓝图时可调面板是重建过滤器 图表区 明细结构的好帮手。仪表盘蓝图文档 描述了 Lightdash 仪表盘的 36 列网格几何x/w为列单位、y/h约为 55px 的行单位并强调应按比例翻译到你的布局例如 12 列 CSS grid 中除以 3保留相对排布——哪些并排、哪些全宽、自上而下的顺序。这正与 Resizable 的嵌套分组模型吻合ResizablePanelGroup directionhorizontal autoSaveIdfilters-main-detail classNameh-[calc(100vh-3rem)] ResizablePanel defaultSize{20} minSize{15} {/* 过滤器侧栏 */} /ResizablePanel ResizableHandle withHandle / ResizablePanel defaultSize{80} minSize{50} ResizablePanelGroup directionvertical autoSaveIdmain-stack classNameh-full ResizablePanel defaultSize{60} minSize{30} {/* 主图表区 */} /ResizablePanel ResizableHandle withHandle / ResizablePanel defaultSize{40} minSize{20} {/* 明细表 */} /ResizablePanel /ResizablePanelGroup /ResizablePanel /ResizablePanelGroup注意内层纵向分组需要h-full或明确高度因为外层面板已经为其划定了确定的高度边界——这正是规则 5 的延伸每个 Resizable 层级都要有确定的高度来源。与模板其他约定协同的三个细节可调面板不是孤立的组件它在 Lightdash Data App 模板中有几个必须协同的约束1. 截图边界scheduled-delivery capture。模板要求以data-screenshot-bounds标记内容范围且内容区域避免 viewport 相对高度。但 模板 skill.md 明确给出了例外genuinely needs a fixed height如可调面板的嵌套组件仍可使用固定高度——Resizable 正是这个例外的典型代表。换句话说整页外壳用min-h-screen可调面板自身使用明确高度如h-[600px]或h-[calc(100vh-3rem)]二者互不冲突。2. 加载与错误状态。模板要求每个使用useLightdash()的组件在loading时显示 spinner、error时显示错误提示skill.md。面板内的图表/表格组件同样遵循此规则——spinner 容器高度应与面板内容高度一致避免数据到达时布局跳动。可调面板只负责空间分配不负责内容的状态管理。3. 与全局过滤器联动。当过滤器侧栏 主网格采用可调布局时侧栏中的过滤控件仍通过useGlobalFilters()驱动所有查询filtersFor(EXPLORE)面板拆分不改变数据流只改变视觉比例。这保证无论用户如何拖拽面板图表间的过滤联动始终一致。快速决策清单场景方案用户要求拖拽调整面板大小使用ResizablePanelGroupResizablePanelResizableHandle图表 检查器 / 过滤器 网格 / 表格 图表可调面板方向按内容主轴选择KPI 行 网格、页头 内容等固定比例普通 Tailwind flex/grid不用 Resizable需要多栏 上下堆叠嵌套ResizablePanelGroup横 纵所有可调布局必须设置autoSaveId、每个面板minSize、手柄withHandle从模板的 bootstrap.sh 预装 shadcnresizable到 package.json 声明react-resizable-panels4.10.0Lightdash Data App 模板已经为可调分栏布局备齐了全部基础设施。你只需遵守有明确用户偏好才用、确定高度、设最小尺寸、图表响应式这几个核心原则就能为用户交付一个可拖拽、记忆偏好、布局灵活的交互式数据应用。【免费下载链接】lightdashAgentic BI. Analytics at the speed of code ⚡️项目地址: https://gitcode.com/GitHub_Trending/li/lightdash创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考