Maofeng
96 lines
3.0 KiB
Plaintext
96 lines
3.0 KiB
Plaintext
---
|
||
title: 反馈与消息
|
||
description: 配置 Toast，并用 Message、Bubble、Attachment 和 MessageScroller 组合消息界面。
|
||
order: 13
|
||
toc:
|
||
- id: toast-provider
|
||
title: Toast Provider
|
||
- id: send-toast
|
||
title: 发送 Toast
|
||
- id: message-composition
|
||
title: 消息组合
|
||
- id: attachments
|
||
title: 附件状态
|
||
- id: scrolling
|
||
title: 消息滚动
|
||
---
|
||
|
||
## Toast Provider {#toast-provider}
|
||
|
||
在应用根节点附近挂载一次 `Toaster`：
|
||
|
||
```tsx
|
||
import { Toaster } from "@workspace/ui/components/toast"
|
||
|
||
export function App() {
|
||
return (
|
||
<>
|
||
<Routes />
|
||
<Toaster />
|
||
</>
|
||
)
|
||
}
|
||
```
|
||
|
||
默认 viewport 固定在小屏底部与大屏右下角。Toast 支持堆叠、展开、滑动退出、键盘焦点和 `success`、`info`、`warning`、`error`、`loading` 类型图标。
|
||
|
||
## 发送 Toast {#send-toast}
|
||
|
||
使用模块导出的 manager：
|
||
|
||
```tsx
|
||
import { Button } from "@workspace/ui/components/button"
|
||
import { toast } from "@workspace/ui/components/toast"
|
||
|
||
;<Button
|
||
onClick={() =>
|
||
toast.add({
|
||
title: "已保存",
|
||
description: "个人资料已经更新。",
|
||
type: "success",
|
||
})
|
||
}
|
||
>
|
||
保存
|
||
</Button>
|
||
```
|
||
|
||
需要隔离通知区域时，用 `createToastManager()` 创建 manager，并同时传给 `Toaster` 与调用方。关闭按钮的默认可访问名称来自 UI 本地化上下文。
|
||
|
||
## 消息组合 {#message-composition}
|
||
|
||
```tsx
|
||
import {
|
||
Message,
|
||
MessageContent,
|
||
MessageFooter,
|
||
MessageGroup,
|
||
} from "@workspace/ui/components/message"
|
||
import { Bubble, BubbleContent } from "@workspace/ui/components/bubble"
|
||
|
||
;<MessageGroup>
|
||
<Message align="end">
|
||
<MessageContent>
|
||
<Bubble align="end" variant="tinted">
|
||
<BubbleContent>明天下午三点可以。</BubbleContent>
|
||
</Bubble>
|
||
<MessageFooter>已读 · 14:32</MessageFooter>
|
||
</MessageContent>
|
||
</Message>
|
||
</MessageGroup>
|
||
```
|
||
|
||
把消息 ID、作者、发送状态与操作保留在业务层。UI primitives 只从 props 和 `data-*` 状态决定布局。
|
||
|
||
## 附件状态 {#attachments}
|
||
|
||
`Attachment` 支持 `idle`、`uploading`、`processing`、`error` 和 `done`。`AttachmentMedia`、`AttachmentTitle`、`AttachmentDescription` 与 `AttachmentActions` 会根据状态调整外观；上传进度和重试逻辑仍由应用负责。
|
||
|
||
横向附件使用默认 `orientation="horizontal"`，缩略图网格可使用 `orientation="vertical"`。多个附件放入 `AttachmentGroup` 后会获得横向滚动和 snap 行为。
|
||
|
||
## 消息滚动 {#scrolling}
|
||
|
||
`MessageScrollerProvider`、`MessageScroller`、`MessageScrollerViewport` 与 `MessageScrollerContent` 应保持层级。每条消息放在 `MessageScrollerItem` 中；需要作为自动跟随目标的项传 `scrollAnchor`。`MessageScrollerButton direction="end"` 会根据当前可滚动状态自动显示或隐藏。
|
||
|
||
业务层追加消息时不要直接设置 `scrollTop`。使用这些 primitives 提供的 follow 和 visibility 状态，避免用户向上阅读历史内容时被强制拉回底部。
|