FlexLayout-React 是一个面向 React 的高级停靠式布局管理器，提供 IDE 级别的停靠布局，支持拖拽、标签页、分隔条和复杂窗口管理。它适合用于仪表盘、IDE、管理后台，以及任何需要灵活、用户可自定义布局的界面。
主要能力
- 拖拽式面板重新定位
- 标签页界面，支持关闭、最大化、最小化
- 分隔条，用于可调整大小的窗格
- 边框停靠区域
- 布局持久化（保存/恢复）
- 程序化布局控制
- TypeScript 支持
安装
npm install flexlayout-react
基本用法
首先定义布局模型。使用 Model 和 IJsonModel 从 JSON 创建模型，布局由 row、col、tabset、tab 等节点组成，可设置 global 选项（如 tabEnableClose、tabEnableRename）以及 borders 边框区域。
然后创建布局组件。引入 Layout、Model、TabNode、IJsonTabNode，并导入样式文件 flexlayout-react/style/dark.css 或 light.css。通过 factory 函数根据标签页的 component 字段返回对应面板组件，将 model 和 factory 传给 Layout 组件即可渲染。
组件实现方面，每个面板就是一个普通 React 组件，例如 ExplorerPanel、EditorPanel、TerminalPanel 等。
高级布局配置
可以构建复杂多窗格布局，在 global 中设置 tabEnableDrag、tabEnableFloat、borderSize 等，并在 borders 中定义 left、bottom 等位置的边框区域，每个边框可包含多个标签页。
支持嵌套的行与列：layout 节点可以是 row 或 col，其 children 可继续嵌套 col、row 或 tabset，通过 weight 控制各区域占比。
布局持久化
可将模型序列化为 JSON 保存到 localStorage，并在初始化时读取恢复。通过 Layout 的 onModelChange 回调在模型变化时保存。也可提供重置为默认布局、导出布局为 JSON 文件等控制功能。
动态标签页管理
使用 Actions 和 DockLocation 可通过程序化方式添加标签页，例如 Actions.addNode 将新标签添加到指定 tabset 或当前活动 tabset。使用 Actions.deleteTab 可关闭单个标签页，也可遍历所有 tabset 关闭全部标签页。
标签页上下文与属性
可通过 node.getConfig() 读取标签页的自定义配置数据（如 filepath、readonly），在 factory 中将 node 传给组件。组件内可使用 node.getName()、node.isSelected()、node.isVisible() 等访问标签页状态。
样式与主题
可导入 dark.css 或 light.css 主题，也可通过覆盖 flexlayout__layout、flexlayout__tab、flexlayout__splitter 等类名自定义 CSS。可实现暗色/亮色主题切换。
与 Tauri 集成
可通过 @tauri-apps/api/core 的 invoke 将布局 JSON 保存到 Tauri 后端或从中加载，并支持按窗口标签分别保存和加载窗口专属布局。
高级模式
可通过 onRenderTab 自定义标签页头部内容，例如显示修改标记；也可向 renderValues.buttons 添加自定义按钮，如保存、复制等操作。
最佳实践
- 持久化布局，保存到 localStorage 或后端
- 使用唯一的组件名称，避免 factory 冲突
- factory 中处理未知组件，提供默认分支
- 对 factory 函数进行记忆化，避免不必要的重渲染
- 使用 config 存储标签页专属数据
- 提供重置机制，让用户恢复默认布局
- 测试布局变更，验证持久化正常
- 处理边界情况，如空 tabset、已删除组件
- 合理使用边框区域，左右上下放工具，主区域放内容
- 优化大型布局，尽可能懒加载组件
常见陷阱
- 未记忆化模型：在每次渲染时调用 Model.fromJson 会创建新模型，应使用 useRef 保存模型引用
- 忘记导入 CSS：不导入样式文件布局将无法正常显示
适用场景
适用于仪表盘、IDE、管理后台，以及任何需要灵活、用户可自定义布局的界面。
限制
资料中未提供关于收费、价格、平台兼容性范围、性能上限等具体限制信息，暂未提供。