Skip to main content

响应式适配

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

断点定义​

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

variant 属性​

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

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

使用示例​

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

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

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

应用场景​

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

响应式 Composables​

Widget 导出了响应式检测 Composables：

<script setup lang="ts">
import {
    useIsMobile,
    useIsTablet,
    useIsDesktop,
    useResponsive
} from '@bdky/aaas-pilot-kit-vue3-widget';
</script>

useIsMobile​

检测是否为移动端：

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

const isMobile = useIsMobile();
</script>

<template>
    <div>
        {{ isMobile ? '移动端视图' : '桌面端视图' }}
    </div>
</template>

useIsTablet​

检测是否为平板：

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

const isTablet = useIsTablet();
</script>

<template>
    <TabletLayout v-if="isTablet" />
    <!-- ... -->
</template>

useIsDesktop​

检测是否为桌面端：

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

const isDesktop = useIsDesktop();
</script>

<template>
    <div :style="{width: isDesktop ? '800px' : '100%'}">
        内容
    </div>
</template>

useResponsive​

获取完整的响应式信息：

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

const {isMobile, isTablet, isDesktop} = useResponsive();
</script>

<template>
    <div :class="{
        'layout-mobile': isMobile,
        'layout-tablet': isTablet,
        'layout-desktop': isDesktop
    }">
        内容
    </div>
</template>

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 模式让组件自动适配：

<template>
    <!-- 推荐 -->
    <ControlPanel />

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

2. 条件渲染优化​

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

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

const isMobile = useIsMobile();
</script>

<template>
    <!-- 推荐：完全不同的组件结构 -->
    <MobileLayout v-if="isMobile">
        <ConversationList />
        <ControlPanel />
    </MobileLayout>

    <DesktopLayout v-else>
        <Sidebar>
            <ConversationList />
        </Sidebar>
        <Main>
            <Subtitle />
            <ControlPanel />
        </Main>
    </DesktopLayout>
</template>

3. 组合使用 variant​

保持父子组件的 variant 一致：

<script setup lang="ts">
const variant = 'mobile'; // 或从 props/状态获取
</script>

<template>
    <Layout direction="vertical">
        <ConversationList :variant="variant" />
        <ControlPanel :variant="variant" />
    </Layout>
</template>

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;
    }
}

相关​