Skip to main content

覆盖层组件

覆盖层相关组件：StartupScreen、LoadingOverlay、StatusOverlay。

StartupScreen​

启动引导页组件，用于需要用户手动激活的场景（如 iOS iframe）。

基本用法​

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

const showStartup = ref(false);
</script>

<template>
    <PilotKit
        @needManualActivation="showStartup = true"
        v-bind="props"
    >
        <StartupScreen
            :show="showStartup"
            title="开始对话"
            buttonText="激活"
            hintText="为获得更好的识别效果，请在安静环境下体验"
            @ready="showStartup = false"
        >
            <template #avatar>
                <img src="/avatar.jpg" alt="" />
            </template>
        </StartupScreen>
    </PilotKit>
</template>

Props​

属性类型默认值说明
showbooleanfalse是否显示
classstring-自定义类名
styleCSSProperties-自定义样式
backgroundUrlstring-背景图片 URL
titlestring'开始对话'标题
buttonTextstring'开始'按钮文本
hintTextstring-提示文本

事件​

事件类型说明
@ready() => void激活成功回调

Slots​

插槽Props说明
default{onStart, isActivating}自定义渲染
avatar-头像元素

自定义渲染​

<template>
    <StartupScreen :show="showStartup" v-slot="{onStart, isActivating}">
        <div class="my-startup">
            <h1>欢迎使用</h1>
            <button @click="onStart" :disabled="isActivating">
                {{ isActivating ? '激活中...' : '开始体验' }}
            </button>
        </div>
    </StartupScreen>
</template>

样式定制​

类名说明
.apk-startup-screen-wrapper外层容器
.apk-startup-screen内层容器
.apk-startup-screen__content内容区域
.apk-startup-screen__avatar-wrapper头像容器
.apk-startup-screen__avatar-outer头像外层
.apk-startup-screen__title标题
.apk-startup-screen__hint提示文本
.apk-startup-screen__button按钮

LoadingOverlay​

加载中覆盖层组件。

基本用法​

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

const showLoading = ref(true);
</script>

<template>
    <PilotKit @ready="showLoading = false" v-bind="props">
        <LoadingOverlay
            :show="showLoading"
            title="呼叫中"
            description="正在连接数字员工..."
        >
            <template #avatar>
                <img src="/avatar.jpg" alt="" />
            </template>
        </LoadingOverlay>
    </PilotKit>
</template>

Props​

属性类型默认值说明
showbooleanfalse是否显示
classstring-自定义类名
styleCSSProperties-自定义样式
backgroundUrlstring-背景图片 URL
titlestring'呼叫中'标题
descriptionstring''描述文本

Slots​

插槽说明
avatar头像元素（带呼吸动画）

样式定制​

类名说明
.apk-loading-overlay-wrapper外层容器
.apk-loading-overlay内层容器（毛玻璃效果）
.apk-loading-overlay__content内容区域
.apk-loading-overlay__avatar-wrapper头像容器（带脉冲动画）
.apk-loading-overlay__avatar-outer头像外层
.apk-loading-overlay__text标题文本
.apk-loading-overlay__tip描述文本

动画​

头像容器带有脉冲呼吸动画，通过 CSS @keyframes apk-calling-pulse 实现。

StatusOverlay​

通用状态覆盖层组件，用于显示忙碌、超时等状态。

基本用法​

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

const showBusy = ref(false);
</script>

<template>
    <StatusOverlay
        v-if="showBusy"
        show
        message="抱歉，我正在忙碌中，请稍后再试"
        buttonText="重新呼入"
        backgroundUrl="/background.jpg"
        @buttonClick="showBusy = false"
    >
        <template #avatar>
            <img src="/avatar.jpg" alt="" />
        </template>
    </StatusOverlay>

    <PilotKit v-else @busy="showBusy = true" v-bind="props">
        <!-- ... -->
    </PilotKit>
</template>

响应式适配​

特性PC 端移动端
内容对齐垂直居中顶部对齐 + padding
头像大小120px100px
字体大小16px14px

Props​

属性类型默认值说明
showbooleanfalse是否显示
variant'auto' | 'mobile' | 'desktop''auto'显示模式
classstring-自定义类名
styleCSSProperties-自定义样式
backgroundUrlstring-背景图片 URL
messagestring-状态消息
buttonTextstring'确定'按钮文本

事件​

事件类型说明
@buttonClick() => void按钮点击回调

Slots​

插槽Props说明
default{avatar, message, buttonText, onButtonClick}自定义渲染
avatar-头像元素

自定义渲染​

<template>
    <StatusOverlay
        :show="showStatus"
        v-slot="{avatar, message, buttonText, onButtonClick}"
    >
        <div class="my-status">
            <div class="avatar">
                <slot name="avatar" />
            </div>
            <p class="message">{{ message }}</p>
            <button @click="onButtonClick">{{ buttonText }}</button>
        </div>
    </StatusOverlay>
</template>

样式定制​

类名说明
.apk-status-overlay-wrapper外层容器
.apk-status-overlay内层容器（毛玻璃效果）
.apk-status-overlay__content内容区域
.apk-status-overlay__avatar-wrapper头像容器
.apk-status-overlay__avatar-outer头像外层
.apk-status-overlay__message状态消息
.apk-status-overlay__button操作按钮

常见场景​

<template>
    <!-- 忙碌状态 -->
    <StatusOverlay
        :show="isBusy"
        message="抱歉，我正在忙碌中，请稍后再试"
        buttonText="重新呼入"
        @buttonClick="handleRetry"
    />

    <!-- 超时状态 -->
    <StatusOverlay
        :show="isTimeout"
        message="本次对话流程已结束，我先挂断了"
        buttonText="重新开始"
        @buttonClick="handleRestart"
    />

    <!-- 错误状态 -->
    <StatusOverlay
        :show="hasError"
        message="连接失败，请检查网络后重试"
        buttonText="重试"
        @buttonClick="handleRetry"
    />
</template>

相关​