Bubble 气泡 / BubbleList 对话列表

Bubble 在线演示

Bubble — 聊天气泡

Prop	类型	默认值	说明
placement	'start' | 'end'	'start'	气泡位置（左/右）
variant	'filled' | 'outlined' | 'shadowed'	'filled'	样式变体
shape	'corner' | 'round'	'corner'	气泡形状
avatar	string	undefined	头像 URL
avatarSize	string	'32px'	头像尺寸
header	string	undefined	消息头（发送者名称）
content	string	''	消息内容（支持 Markdown）
loading	boolean	false	加载中骨架屏
typing	{ step: number, interval: number }	undefined	打字机效果
footer	string	undefined	消息脚注（时间戳）

Slots：default（覆盖 content）/ header / avatar / footer

<Bubble placement="end" header="我" content="你好" />
<Bubble placement="start" variant="outlined" content="AI 回复" />
<Bubble placement="start" loading content="" />

BubbleList — 对话列表（虚拟滚动）

Prop	类型	默认值	说明
list	BubbleListProps<T>[]	[]	消息列表（泛型）
autoScroll	boolean	true	新消息自动滚动到底部
maxHeight	string | number	undefined	列表最大高度
gap	number	16	消息间距（px）
loading	boolean	false	加载更多历史消息
loadingText	string	'加载中...'	加载提示文案
onScrollToTop	() => void	undefined	滚动到顶部回调（加载更多）

Slots：default（{ item, index }）/ footer（放 XSender）/ loading / empty

<BubbleList :list="messages" max-height="300px">
  <template #default="{ item }">
    <div :class="['my-bubble', `my-bubble--${item.role}`]">
      <img :src="item.avatar" />
      <div class="my-content" v-html="item.content" />
    </div>
  </template>
  <template #footer>
    <XSender @submit="send" />
  </template>
</BubbleList>

泛型支持：list 接受扩展 Bubble props 的自定义消息类型：

interface MyMessage extends BubbleProps {
  id: number
  role: 'user' | 'ai'
}
const list: BubbleListProps<MyMessage>['list'] = [...]

内部机制：使用 virtua 虚拟滚动（仅渲染可见区域）、scrollIntoView 自动滚动、向上 50px 触发 onScrollToTop（加载历史）。