Skip to main content

布局组件

布局辅助组件：Layout、FillAdapter。

Layout​

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

基本用法​

<script setup lang="ts">
import {PilotKit, Layout, ConversationList, ControlPanel} from '@bdky/aaas-pilot-kit-vue3-widget';
</script>

<template>
    <PilotKit v-bind="props">
        <Layout direction="vertical" hCenter>
            <ConversationList />
            <ControlPanel />
        </Layout>
    </PilotKit>
</template>

垂直居中布局​

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

水平布局​

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

Props​

属性类型默认值说明
direction'horizontal' | 'vertical''horizontal'布局方向
fill'full' | 'auto''full'填充模式
vCenterbooleanfalse垂直居中
hCenterbooleanfalse水平居中
classstring-自定义类名
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 使用，占据剩余空间。

基本用法​

<script setup lang="ts">
import {Layout, FillAdapter, ControlPanel} from '@bdky/aaas-pilot-kit-vue3-widget';
</script>

<template>
    <Layout direction="vertical">
        <FillAdapter />  <!-- 占据上方剩余空间 -->
        <ControlPanel /> <!-- 固定在底部 -->
    </Layout>
</template>

多个 FillAdapter​

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

<template>
    <Layout direction="vertical">
        <FillAdapter :flex="1" />  <!-- 占 1 份 -->
        <div>中间内容</div>
        <FillAdapter :flex="2" />  <!-- 占 2 份 -->
    </Layout>
</template>

Props​

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

自适应方向​

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

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

使用 Composable​

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

<script setup lang="ts">
import {useLayout} from '@bdky/aaas-pilot-kit-vue3-widget';

const {direction} = useLayout();
</script>

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

样式定制​

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

典型布局示例​

数字员工标准布局​

<script setup lang="ts">
import {
    PilotKit,
    Layout,
    FillAdapter,
    ConversationList,
    RecommendedQuestions,
    Subtitle,
    ControlPanel
} from '@bdky/aaas-pilot-kit-vue3-widget';
</script>

<template>
    <PilotKit v-bind="props">
        <Layout direction="vertical" hCenter>
            <!-- 顶部：占据剩余空间，数字人形象显示在这里 -->
            <FillAdapter />

            <!-- 中部：对话列表 -->
            <ConversationList />

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

            <!-- 底部：字幕 -->
            <Subtitle :style="{marginBottom: '10px'}" />

            <!-- 底部：控制面板 -->
            <ControlPanel :style="{marginBottom: '30px'}" />
        </Layout>
    </PilotKit>
</template>

移动端适配布局​

<script setup lang="ts">
import {
    PilotKit,
    Layout,
    FillAdapter,
    ConversationList,
    Subtitle,
    ControlPanel,
    useIsMobile
} from '@bdky/aaas-pilot-kit-vue3-widget';

const isMobile = useIsMobile();
</script>

<template>
    <PilotKit v-bind="props">
        <Layout direction="vertical" hCenter>
            <FillAdapter />

            <!-- 移动端显示对话列表，PC端显示字幕 -->
            <ConversationList v-if="isMobile" />
            <Subtitle v-else expandable @expand="handleExpand" />

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

相关​