Skip to main content

覆盖层组件

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

StartupScreen​

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

基本用法​

import {useState} from 'react';
import {PilotKit, StartupScreen} from '@bdky/aaas-pilot-kit-react-widget';

function App() {
    const [showStartup, setShowStartup] = useState(false);

    return (
        <PilotKit
            onNeedManualActivation={() => setShowStartup(true)}
            {...props}
        >
            <StartupScreen
                show={showStartup}
                title="开始对话"
                buttonText="激活"
                avatar={<img src="/avatar.jpg" alt="" />}
                hintText="为获得更好的识别效果，请在安静环境下体验"
                onReady={() => setShowStartup(false)}
            />
        </PilotKit>
    );
}

Props​

属性类型默认值说明
showbooleanfalse是否显示
classNamestring-自定义类名
styleCSSProperties-自定义样式
backgroundUrlstring-背景图片 URL
titlestring'开始对话'标题
buttonTextstring'开始'按钮文本
hintTextstring-提示文本
avatarReactNode-头像元素
onReady() => void-激活成功回调

自定义渲染​

<StartupScreen show={showStartup}>
    {({onStart, isActivating}) => (
        <div className="my-startup">
            <h1>欢迎使用</h1>
            <button onClick={onStart} disabled={isActivating}>
                {isActivating ? '激活中...' : '开始体验'}
            </button>
        </div>
    )}
</StartupScreen>

样式定制​

类名说明
.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​

加载中覆盖层组件。

基本用法​

import {useState} from 'react';
import {PilotKit, LoadingOverlay} from '@bdky/aaas-pilot-kit-react-widget';

function App() {
    const [showLoading, setShowLoading] = useState(true);

    return (
        <PilotKit onReady={() => setShowLoading(false)} {...props}>
            <LoadingOverlay
                show={showLoading}
                title="呼叫中"
                description="正在连接数字员工..."
                avatar={<img src="/avatar.jpg" alt="" />}
            />
        </PilotKit>
    );
}

Props​

属性类型默认值说明
showbooleanfalse是否显示
classNamestring-自定义类名
styleCSSProperties-自定义样式
backgroundUrlstring-背景图片 URL
titlestring'呼叫中'标题
descriptionstring''描述文本
avatarReactNode-头像元素（带呼吸动画）

样式定制​

类名说明
.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​

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

基本用法​

import {useState} from 'react';
import {PilotKit, StatusOverlay} from '@bdky/aaas-pilot-kit-react-widget';

function App() {
    const [showBusy, setShowBusy] = useState(false);

    return (
        <>
            {showBusy ? (
                <StatusOverlay
                    show
                    message="抱歉，我正在忙碌中，请稍后再试"
                    buttonText="重新呼入"
                    avatar={<img src="/avatar.jpg" alt="" />}
                    backgroundUrl="/background.jpg"
                    onButtonClick={() => setShowBusy(false)}
                />
            ) : (
                <PilotKit onBusy={() => setShowBusy(true)} {...props}>
                    {/* ... */}
                </PilotKit>
            )}
        </>
    );
}

响应式适配​

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

Props​

属性类型默认值说明
showbooleanfalse是否显示
variant'auto' | 'mobile' | 'desktop''auto'显示模式
classNamestring-自定义类名
styleCSSProperties-自定义样式
backgroundUrlstring-背景图片 URL
avatarReactNode-头像元素
messagestring-状态消息
buttonTextstring'确定'按钮文本
onButtonClick() => void-按钮点击回调

自定义渲染​

<StatusOverlay show={showStatus}>
    {({avatar, message, buttonText, onButtonClick}) => (
        <div className="my-status">
            <div className="avatar">{avatar}</div>
            <p className="message">{message}</p>
            <button onClick={onButtonClick}>{buttonText}</button>
        </div>
    )}
</StatusOverlay>

样式定制​

类名说明
.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操作按钮

常见场景​

// 忙碌状态
<StatusOverlay
    show={isBusy}
    message="抱歉，我正在忙碌中，请稍后再试"
    buttonText="重新呼入"
    onButtonClick={handleRetry}
/>

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

// 错误状态
<StatusOverlay
    show={hasError}
    message="连接失败，请检查网络后重试"
    buttonText="重试"
    onButtonClick={handleRetry}
/>

相关​