SuperAPI AI 工具集

component-agentic-layout

前端与建站

查看项目

更新于 10-15 19:56

技能介绍

用途:在 @ant-design/agentic-ui 中开发 AgenticLayout,即左-中-右三栏加头部的智能体应用主布局,用于应用外壳、侧栏布局或三栏布局;修改布局或头部时按技能内 API 与规范直接实现。

主要能力:AgenticLayoutProps 支持 left、center(必填)、right、header、style、className、leftWidth(默认 256px)、rightWidth(默认 540px)、minHeight、children(兼容用,内容建议放 center)。头部 LayoutHeaderConfig 支持 title(默认 'AI 助手')、showShare、left/rightCollapsible、受控的 left/rightCollapsed、非受控的 leftDefaultCollapsed/rightDefaultCollapsed、onLeftCollapse/onRightCollapse、onShare、leftExtra、rightExtra、className。库入口可解构 AgenticLayout、LayoutHeader 及相关类型。右侧栏可拖拽调宽,最小 MIN_RIGHT_WIDTH=400px,最大 window.innerWidth*0.7;折叠时宽度为 0。头部高度 48px,拖拽手柄宽 6px,根节点样式固定 minHeight:600px,可用 style 覆盖(props.minHeight 未从根节点读取)。

使用方式:以函数式组件 + Hooks 实现,用 React.memo 包装导出;样式通过 useAgenticLayoutStyle(prefixCls)、useLayoutHeaderStyle 与 genStyleHooks、token 注册,类名用 clsx 拼接;Props 用 Config 后缀、事件用 on 前缀;保持向下兼容。

限制:仅支持 style、className,无 prefixCls/classNames/styles 等 Semantic 透传;左侧栏无拖拽;折叠文案与 aria-label 走 I18n locale 键。