AgenticLayout 智能体布局组件
AgenticLayout 是一个专为智能体应用设计的三栏布局组件，支持左中右三个区域的灵活配置，内置左右侧栏折叠、右侧栏拖拽调整宽度等能力。
代码演示
API Playground
通过控制面板串联调试三栏开关、宽度、折叠（受控 / 非受控）、header.showShare 与典型布局组合。
基础用法
最简用法：只传 center，即可获得一个带圆角阴影的内容容器。
三栏布局与侧边栏宽度
通过 left、center、right 填充三栏内容，leftWidth 和 rightWidth 控制侧边栏宽度。
受控折叠
通过 header.leftCollapsed / header.rightCollapsed 与对应回调受控管理折叠状态，可在外部完全控制折叠逻辑（例如根据窗口宽度自动折叠）。
非受控折叠
使用 header.leftDefaultCollapsed / header.rightDefaultCollapsed 设置初始值，折叠状态由组件内部自动管理，无需外部 state。
header 扩展内容
header.title 支持 ReactNode，header.showShare 开启分享按钮，header.leftExtra / header.rightExtra 在头部左右区域插入自定义内容。
style 与右侧栏拖拽
className / style 自定义根容器样式，右侧栏内置拖拽手柄可动态调整宽度。组件默认 minHeight: 600px，可通过 style={{ minHeight: 0 }} 覆盖。
完整示例
结合 History、ChatLayout、BubbleList、Workspace 等组件，构成完整的智能体对话工作台界面。
API
AgenticLayoutProps
header 配置（LayoutHeaderConfig）
折叠状态说明
AgenticLayout 的折叠状态通过 header 属性统一管理，支持受控和非受控两种模式：
- 受控模式：提供
header.leftCollapsed/header.rightCollapsed和对应回调，折叠状态完全由外部控制，适合需要根据外部条件（如窗口宽度）自动折叠的场景。 - 非受控模式：提供
header.leftDefaultCollapsed/header.rightDefaultCollapsed作为初始值，后续状态由组件内部维护，适合折叠操作仅由用户手动触发的场景。
当同时传入受控值（
leftCollapsed）和默认值（leftDefaultCollapsed）时，受控值优先。
右侧栏拖拽调整宽度
当传入 right 内容时，右侧栏左边缘会出现拖拽手柄（鼠标悬停高亮）。拖动手柄可调整右侧栏宽度，范围限制在 400px ~ 窗口宽度的 70% 之间。rightWidth prop 变更时会重置当前宽度。
注意事项
center属性是必填的，左右侧栏为可选- 传入
left/right内容时，对应折叠按钮会自动显示（无需手动设置leftCollapsible/rightCollapsible） - 建议在外层容器设置明确的高度，避免布局塌陷
- 组件默认
minHeight: 600px（CSS），可通过style={{ minHeight: 0 }}或style={{ minHeight: 400 }}覆盖