Skip to main content

响应式适配

React Widget 内置了完整的响应式适配方案，组件会根据屏幕尺寸自动调整布局和样式。

断点定义​

断点宽度范围说明
mobile< 768px移动端设备
tablet768px - 1024px平板设备
desktop> 1024px桌面设备

variant 属性​

所有支持响应式的组件都提供 variant 属性：

type Variant = 'auto' | 'mobile' | 'desktop';
值说明
'auto'自动检测屏幕尺寸，动态切换（默认值）
'mobile'强制使用移动端样式
'desktop'强制使用桌面端样式

使用示例​

// 自动适配（默认）
<ControlPanel variant="auto" />

// 强制移动端样式
<ControlPanel variant="mobile" />

// 强制桌面端样式
<ConversationList variant="desktop" />

应用场景​

  • 嵌入式场景：在 PC 页面的小尺寸区域嵌入时，强制使用 mobile 模式
  • 调试场景：测试特定平台的样式表现
  • 固定布局：不希望组件随屏幕变化时

响应式 Hooks​

Widget 导出了响应式检测 Hooks：

import {
    useIsMobile,
    useIsTablet,
    useIsDesktop,
    useResponsive
} from '@bdky/aaas-pilot-kit-react-widget';

useIsMobile​

检测是否为移动端：

function MyComponent() {
    const isMobile = useIsMobile();

    return (
        <div>
            {isMobile ? '移动端视图' : '桌面端视图'}
        </div>
    );
}

useIsTablet​

检测是否为平板：

function MyComponent() {
    const isTablet = useIsTablet();

    if (isTablet) {
        return <TabletLayout />;
    }
    // ...
}

useIsDesktop​

检测是否为桌面端：

function MyComponent() {
    const isDesktop = useIsDesktop();

    return (
        <div style={{width: isDesktop ? 800 : '100%'}}>
            内容
        </div>
    );
}

useResponsive​

获取完整的响应式信息：

function MyComponent() {
    const {isMobile, isTablet, isDesktop} = useResponsive();

    return (
        <div className={
            isMobile ? 'layout-mobile' :
            isTablet ? 'layout-tablet' :
            'layout-desktop'
        }>
            内容
        </div>
    );
}

CSS 类名约定​

组件根据当前模式自动添加对应的 CSS 类名：

类名后缀说明
--mobile移动端模式
--desktop桌面端模式
/* 示例：自定义移动端样式 */
.apk-control-panel--mobile {
    padding: 10px;
}

/* 示例：自定义桌面端样式 */
.apk-control-panel--desktop {
    padding: 20px;
}

组件差异速查表​

ConversationList​

特性PC 端移动端
对话显示显示全部历史仅显示最新一条
关闭按钮显示隐藏
滚动跟随按钮显示隐藏
位置绝对定位左侧相对定位

ControlPanel​

特性PC 端移动端
输入框宽度479px 固定100% 自适应
按钮大小54-55px50px
布局居中绝对定位全宽 flex
挂断按钮可选显示始终显示

Input​

特性PC 端移动端
宽度479px100%
高度55px50px
圆角28px20px
内边距24px16px

RecommendedQuestions​

特性PC 端移动端
布局水平排列垂直排列
背景半透明胶囊透明
问题项文字 + 箭头卡片样式
标题显示默认隐藏
分隔符显示隐藏

StatusOverlay​

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

Conversation​

特性PC 端移动端
圆角20px不同方向不同圆角
边距左右 30px左右 39px
背景半透明更深的半透明

最佳实践​

1. 优先使用 auto 模式​

除非有特殊需求，建议使用默认的 auto 模式让组件自动适配：

// 推荐
<ControlPanel />

// 仅在必要时指定
<ControlPanel variant="mobile" />

2. 条件渲染优化​

对于完全不同的布局，使用条件渲染而非样式切换：

const isMobile = useIsMobile();

// 推荐：完全不同的组件结构
{isMobile ? (
    <MobileLayout>
        <ConversationList />
        <ControlPanel />
    </MobileLayout>
) : (
    <DesktopLayout>
        <Sidebar>
            <ConversationList />
        </Sidebar>
        <Main>
            <Subtitle />
            <ControlPanel />
        </Main>
    </DesktopLayout>
)}

3. 组合使用 variant​

保持父子组件的 variant 一致：

const variant = 'mobile'; // 或从 props/状态获取

<Layout direction="vertical">
    <ConversationList variant={variant} />
    <ControlPanel variant={variant} />
</Layout>

4. 自定义响应式样式​

使用 CSS 类名钩子添加自定义响应式样式：

/* 基础样式 */
.apk-control-panel {
    transition: all 0.3s ease;
}

/* 移动端特殊样式 */
.apk-control-panel--mobile {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* 桌面端特殊样式 */
.apk-control-panel--desktop {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

5. 结合媒体查询​

在需要更精细控制时，结合 CSS 媒体查询：

@media (max-width: 768px) {
    .my-custom-layout {
        flex-direction: column;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .my-custom-layout {
        padding: 20px;
    }
}

@media (min-width: 1025px) {
    .my-custom-layout {
        max-width: 1200px;
        margin: 0 auto;
    }
}

相关​