AgenticLayout 组件开发

智能体应用主布局：左-中-右三栏 + 头部，用于应用外壳与侧栏布局。修改布局或头部时，按本技能内的 API 与规范直接实现，无需再查源码。

组件 API（自包含）

AgenticLayoutProps

说明：根节点最小高度由样式固定为 600px；需自定义时传 style={{ minHeight: '...' }}。当前未从 props 的 minHeight 读到根节点，与类型保持一致即可。

LayoutHeaderConfig（头部配置）

折叠状态：有 leftCollapsed/rightCollapsed 时为受控；否则用 leftDefaultCollapsed/rightDefaultCollapsed 作初始值，由内部 useMergedState + onLeftCollapse/onRightCollapse 更新。LayoutHeader 内部用 I18n 的 locale['chatFlow.collapseLeft']、locale['chatFlow.collapseRight']、locale['chatFlow.share'] 等做文案与 aria-label。

导出（库入口）

• AgenticLayout：export { AgenticLayout }，类型 export interface AgenticLayoutProps
• LayoutHeader：export { LayoutHeader }，类型 export type { LayoutHeaderConfig, LayoutHeaderProps }（LayoutHeaderProps 与 LayoutHeaderConfig 相同）

从 @ant-design/agentic-ui 可解构：AgenticLayout、AgenticLayoutProps、LayoutHeader、LayoutHeaderConfig、LayoutHeaderProps。

DOM 与类名结构（BEM）

AgenticLayout

• 根：prefixCls（默认 ant-agentic-layout）
• 主体：${prefixCls}-body（flex 容器）
• 左侧栏：${prefixCls}-sidebar、${prefixCls}-sidebar-left，折叠时加 ${prefixCls}-sidebar-left-collapsed
• 中间区：${prefixCls}-main，内容包裹在 ${prefixCls}-main-content；头部渲染在 main 内、content 前；main-content 高度为 calc(100% - 48px) 以预留头部
• 右侧栏容器：${prefixCls}-sidebar-wrapper-right，内为拖拽手柄 + 右侧栏
• 拖拽手柄：${prefixCls}-resize-handle、${prefixCls}-resize-handle-right（宽度 6px，hover 时高亮）
• 右侧栏：${prefixCls}-sidebar、${prefixCls}-sidebar-right，折叠时加 ${prefixCls}-sidebar-right-collapsed
• 侧栏内容区：${prefixCls}-sidebar-content

样式通过 useAgenticLayoutStyle(prefixCls) 注册，使用项目内 genStyleHooks 与 token（如 componentCls）。根节点在样式中设 minHeight: 600px。

LayoutHeader（头部子组件）

• 根：prefixCls（默认 ant-layout-header）
• 左侧区域：${prefixCls}-left（含折叠按钮、分隔线、标题、leftExtra）
• 标题：${prefixCls}-left-title
• 左侧分隔线：${prefixCls}-left-separator（在折叠按钮与标题之间）
• 右侧区域：${prefixCls}-right（含分享按钮、折叠按钮、rightExtra）
• 分享按钮：${prefixCls}-right-share-btn

样式通过 useLayoutHeaderStyle(prefixCls) 注册；头部高度 48px（minHeight），与 main-content 的 48px 对应。

行为与常量

• 右侧栏：可拖拽调整宽度。最小宽度 MIN_RIGHT_WIDTH = 400（px），最大宽度 window.innerWidth * 0.7；rightWidth 变化会同步到内部 state；折叠时宽度为 0。
• 左侧栏：宽度由 leftWidth 控制，默认 DEFAULT_LEFT_WIDTH = 256（px），无拖拽；折叠时宽度为 0。
• 右侧默认宽度：DEFAULT_RIGHT_WIDTH = 540（px）。
• 头部：使用 LayoutHeader（来自 Components/LayoutHeader），传入 header 并补充 leftCollapsible/rightCollapsible（未传时由是否有 left/right 决定）。头部高度 48px；拖拽手柄宽度 6px。
• 根节点：样式里 minHeight: 600px，无 prefixCls/classNames/styles 等 Semantic 透传，仅 style、className。

开发规范（与 AGENTS 一致）

• 使用 Ant Design Token 与 useAgenticLayoutStyle，支持主题与响应式；样式用 createStyles/token，避免硬编码颜色与尺寸。
• 类名用 clsx 拼接；支持 classNames/styles 时按项目 Semantic 规范命名。
• Props/事件命名：配置用 Config 后缀，事件用 on 前缀；布尔用 showXxx、xxxCollapsible、xxxCollapsed。
• 组件为函数式 + Hooks；用 React.memo 包装导出组件；保持向下兼容，不破坏已有 props。
• 与 ChatLayout、Workspace 等组合时保持结构清晰，避免嵌套过深。

按上述 API、DOM 结构和规范修改布局或头部即可，无需依赖源码路径。