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

NotificationCenter 通知中心

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

基础用法

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

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfNotificationCenter } from '@chufix-design/vue';
const items = ref([
  { id: '1', title: 'Build 成功', description: '#142 通过 · 1m 23s', tone: 'success' as const, timestamp: '刚刚' },
  { id: '2', title: 'Pipeline 警告', description: '3 条未使用导出', tone: 'warning' as const, timestamp: '5m', read: false },
  { id: '3', title: '部署失败', description: 'Cloudflare returned 502', tone: 'error' as const, timestamp: '1h', actionLabel: '查看日志', read: true },
  { id: '4', title: '新成员加入', description: 'jane.l 加入了 payments 团队', tone: 'info' as const, timestamp: '2h', read: true },
]);
function markAllRead() { items.value = items.value.map(it => ({ ...it, read: true })); }
function clearAll() { items.value = []; }
</script>

<template>
  <CfNotificationCenter
    :items="items"
    @item-action="(id) => alert(`Action: ${id}`)"
    @mark-all-read="markAllRead"
    @clear-all="clearAll"
  />
</template>

<script setup>
import { ref } from 'vue';
import { CfNotificationCenter } from '@chufix-design/vue';
const items = ref([
  { id: '1', title: 'Build 成功', description: '#142 通过 · 1m 23s', tone: 'success', timestamp: '刚刚' },
  { id: '2', title: 'Pipeline 警告', description: '3 条未使用导出', tone: 'warning', timestamp: '5m', read: false },
  { id: '3', title: '部署失败', description: 'Cloudflare returned 502', tone: 'error', timestamp: '1h', actionLabel: '查看日志', read: true },
  { id: '4', title: '新成员加入', description: 'jane.l 加入了 payments 团队', tone: 'info', timestamp: '2h', read: true },
]);
function markAllRead() { items.value = items.value.map(it => ({ ...it, read: true })); }
function clearAll() { items.value = []; }
</script>

<template>
  <CfNotificationCenter
    :items="items"
    @item-action="(id) => alert(`Action: ${id}`)"
    @mark-all-read="markAllRead"
    @clear-all="clearAll"
  />
</template>

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

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

空状态

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

背景

<script setup lang="ts">
import { CfNotificationCenter } from '@chufix-design/vue';
</script>

<template>
  <CfNotificationCenter :items="[]" />
</template>

<script setup>
import { CfNotificationCenter } from '@chufix-design/vue';
</script>

<template>
  <CfNotificationCenter :items="[]" />
</template>

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

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

API

属性	类型	默认值	说明
`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。