开发预览更新于 2026-05-10

NotificationCenter 通知中心

通知历史面板，自带未读计数、全部已读、清空控件。

基础用法

每条通知是结构化数据 { id, title, description?, tone?, timestamp?, read?, actionLabel? }。未读项左侧显示彩色圆点。

<CfNotificationCenter
:items="items"
@item-action="onAction"
@mark-all-read="markAllRead"
@clear-all="clearAll"
/>

<CfNotificationCenter
items={items}
onItemAction={onAction}
onMarkAllRead={markAllRead}
onClearAll={clearAll}
/>

items: [] 时显示 emptyText；可按需替换为自定义文案。

<CfNotificationCenter :items="[]" empty-text="目前没有通知" />

<CfNotificationCenter items={[]} emptyText="目前没有通知" />

属性	类型	默认值	说明
`items`	`NotificationItem[]`	—
`open`	`boolean`	`true`	显示控制
`showMarkAllRead` / `showClearAll`	`boolean`	`true`
`emptyText`	`string`	`'没有通知'`
`maxHeight`	`number \| string`	`480`	滚动区高度

事件：item-click / item-action / mark-all-read / clear-all / close。