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

NotificationCenter 通知中心

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

基础用法

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

背景视口

src/App.vue

<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>

import { useState } from 'react';
import { CfNotificationCenter } from '@chufix-design/react';

export default function Demo() {
  const [items, setItems] = useState([
    { 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() { setItems(items.map(it => ({ ...it, read: true }))); }
  function clearAll() { setItems([]); }
  return (
    <>
      <CfNotificationCenter items={items} onItemAction={(id) => alert(`Action: ${id}`)}
          onMarkAllRead={markAllRead}
          onClearAll={clearAll}
        />
    </>
  );
}

import { useState } from 'react';
import { CfNotificationCenter } from '@chufix-design/react';

export default function Demo() {
  const [items, setItems] = useState([
    { 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() { setItems(items.map(it => ({ ...it, read: true }))); }
  function clearAll() { setItems([]); }
  return (
    <>
      <CfNotificationCenter items={items} onItemAction={(id) => alert(`Action: ${id}`)}
          onMarkAllRead={markAllRead}
          onClearAll={clearAll}
        />
    </>
  );
}

空状态

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

背景视口

src/App.vue

<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>

import { CfNotificationCenter } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfNotificationCenter items={[]} emptyText="目前没有通知" />
    </>
  );
}

import { CfNotificationCenter } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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。