使用方法

ChatLayout 是整页对话的外壳。消息按普通文档流从上往下排，输入区用一层毛玻璃压在底部。density 控制疏密，默认是 balanced。把 ChatMessageList 和 ChatComposer 套进来，就得到一个带自动滚动和「滚到底」按钮的完整对话界面。

import { ChatLayout } from '@astryx-vue/core/Chat'

解剖

部分	说明
消息区	可滚动的消息区域。默认插槽（一般是 ChatMessageList）排成纵向 flex，消息少的时候把内容推到底部。
毛玻璃停靠区	底部粘住或固定的容器，带一层背景模糊。里面放滚到底按钮和输入区。
滚到底按钮	用户往上滚、或者有新消息时出现。默认是 ChatLayoutScrollButton；传 null 就隐藏，换成自己的控件也可以。
输入区	发消息的输入区域，一般是 ChatComposer。停在毛玻璃层里的底部。
空状态	还没有消息时居中显示的占位。用 EmptyState 可以保持外观一致。

建议

指引	实践
推荐	默认插槽放 ChatMessageList，composer 插槽放 ChatComposer，这样就是一套完整的对话界面。
推荐	给 empty 插槽一点内容，新对话才不至于是一块白屏。
推荐	对话嵌在由外层负责滚动的页面里时，用 scrollRef 指定那个滚动元素。
避免	给布局写死高度。让它用 flex: 1 填满外层就好。
避免	在同一个滚动容器里放多个 ChatLayout。每个都认为自己独占滚动。

示例

常见的用法、变化和状态。

ChatLayout — 面板

Today

Can you review the Button component and fix the focus ring?

I'll check the Button component now.

Found the issue — the border radius was hardcoded. Replaced with the theme token.

Nice, can you also check the Card component?

Checking the component now.

Found the issue — the border radius was hardcoded. Replaced with the theme token.

Ask something...

窄栏里的侧边对话，容器一窄就自动变成紧凑密度。侧栏、抽屉、嵌在页面里的小对话窗，横向空间紧张时用它。