Skip to main content

布局组件

布局辅助组件：Layout、FillAdapter。

Layout​

Flex 布局容器组件，提供灵活的布局能力。

基本用法​

import {PilotKit, Layout, ConversationList, ControlPanel} from '@bdky/aaas-pilot-kit-react-widget';

function App() {
    return (
        <PilotKit {...props}>
            <Layout direction="vertical" hCenter>
                <ConversationList />
                <ControlPanel />
            </Layout>
        </PilotKit>
    );
}

垂直居中布局​

<Layout direction="vertical" vCenter hCenter>
    <div>垂直水平居中的内容</div>
</Layout>

水平布局​

<Layout direction="horizontal" vCenter>
    <div>左侧内容</div>
    <FillAdapter />
    <div>右侧内容</div>
</Layout>

Props​

属性类型默认值说明
direction'horizontal' | 'vertical''horizontal'布局方向
fill'full' | 'auto''full'填充模式
vCenterbooleanfalse垂直居中
hCenterbooleanfalse水平居中
classNamestring-自定义类名
styleCSSProperties-自定义样式

fill 属性说明​

值说明
'full'占满父容器（width: 100%, height: 100%）
'auto'由内容决定大小

样式定制​

类名说明
.apk-layout根容器
.apk-layout--horizontal水平布局
.apk-layout--vertical垂直布局
.apk-layout--v-center垂直居中
.apk-layout--h-center水平居中
.apk-layout-fill--full全填充模式
.apk-layout-fill--auto自动大小模式

FillAdapter​

自适应填充组件，配合 Layout 使用，占据剩余空间。

基本用法​

import {Layout, FillAdapter, ControlPanel} from '@bdky/aaas-pilot-kit-react-widget';

function App() {
    return (
        <Layout direction="vertical">
            <FillAdapter />  {/* 占据上方剩余空间 */}
            <ControlPanel /> {/* 固定在底部 */}
        </Layout>
    );
}

多个 FillAdapter​

可以使用多个 FillAdapter 并设置不同的 flex 值：

<Layout direction="vertical">
    <FillAdapter flex={1} />  {/* 占 1 份 */}
    <div>中间内容</div>
    <FillAdapter flex={2} />  {/* 占 2 份 */}
</Layout>

Props​

属性类型默认值说明
flexnumber1flex 增长因子
classNamestring-自定义类名
styleCSSProperties-自定义样式

自适应方向​

FillAdapter 会自动感知父级 Layout 的方向：

  • 垂直布局：占据垂直空间（minHeight: 0）
  • 水平布局：占据水平空间（minWidth: 0）

使用 Context​

FillAdapter 通过 useLayout Hook 获取父级 Layout 的 direction：

import {useLayout} from '@bdky/aaas-pilot-kit-react-widget';

function CustomFiller() {
    const {direction} = useLayout();

    return (
        <div style={{
            flex: 1,
            ...(direction === 'vertical'
                ? {minHeight: 0}
                : {minWidth: 0})
        }} />
    );
}

样式定制​

类名说明
.apk-fill-adapter根容器

典型布局示例​

数字员工标准布局​

<PilotKit {...props}>
    <Layout direction="vertical" hCenter>
        {/* 顶部：占据剩余空间，数字人形象显示在这里 */}
        <FillAdapter />

        {/* 中部：对话列表 */}
        <ConversationList />

        {/* 中部：推荐问题 */}
        <RecommendedQuestions
            questions={['问题1', '问题2']}
            style={{marginBottom: 10}}
        />

        {/* 底部：字幕 */}
        <Subtitle style={{marginBottom: 10}} />

        {/* 底部：控制面板 */}
        <ControlPanel style={{marginBottom: 30}} />
    </Layout>
</PilotKit>

移动端适配布局​

const isMobile = useIsMobile();

<PilotKit {...props}>
    <Layout direction="vertical" hCenter>
        <FillAdapter />

        {/* 移动端显示对话列表，PC端显示字幕 */}
        {isMobile ? (
            <ConversationList />
        ) : (
            <Subtitle expandable onExpand={handleExpand} />
        )}

        <ControlPanel />
    </Layout>
</PilotKit>

相关​