{
  "id": "notification-center",
  "type": "pages",
  "status": "published",
  "name": {
    "zh": "通知中心",
    "en": "Notification Center"
  },
  "aliases": [
    "通知中心",
    "消息中心",
    "站内信",
    "消息盒子",
    "通知列表页",
    "消息提醒页",
    "铃铛点开的页面",
    "未读消息在哪看"
  ],
  "category": [
    "Page",
    "Notifications"
  ],
  "description": {
    "zh": "把系统产生的提醒按来源与时间聚合成可浏览列表的页面，顶部用标签区分全部、未读、提及等视图， 每条通知展示图标、标题、正文摘要与时间，支持一键已读、批量处理与跳转原文。 它替代零散的弹窗提醒，让用户主动回看而不是被动打断。",
    "en": "A page aggregating alerts into a scannable list, with tabs for all, unread and mentions and rows showing icon, title, snippet and time plus bulk mark-as-read."
  },
  "use_when": [
    {
      "zh": "系统会持续产生类型多样的提醒",
      "en": "The system produces many kinds of alerts continuously"
    },
    {
      "zh": "用户需要回看、分类处理而不是被打断",
      "en": "Users need to review and triage later, not be interrupted now"
    },
    {
      "zh": "通知要跨设备、跨渠道集中管理",
      "en": "Alerts must be managed across devices and channels"
    }
  ],
  "avoid_when": [
    {
      "zh": "只有一次性、必须立刻处理的紧急警报（用模态或顶部横幅）",
      "en": "One-off critical alerts needing immediate action — use a modal or banner"
    },
    {
      "zh": "提醒极少且可并入时间线或活动流",
      "en": "Very few updates that can fold into a timeline or activity feed"
    },
    {
      "zh": "面向访客的营销推送（用落地页或邮件）",
      "en": "Marketing pushes to visitors — use a landing page or email"
    }
  ],
  "tags": [
    "notifications",
    "inbox",
    "messaging",
    "unread",
    "alerts"
  ],
  "variants": [
    {
      "id": "list",
      "name": {
        "zh": "通知列表",
        "en": "Notification List"
      },
      "note": {
        "zh": "按时间倒序的单列流，最通用",
        "en": "Reverse-chronological single column, the general default"
      }
    },
    {
      "id": "inbox-split",
      "name": {
        "zh": "收件箱分栏",
        "en": "Split Inbox"
      },
      "note": {
        "zh": "左侧列表 + 右侧详情，桌面处理高效",
        "en": "List left, detail right — efficient on desktop"
      }
    },
    {
      "id": "grouped",
      "name": {
        "zh": "分组通知",
        "en": "Grouped Notifications"
      },
      "note": {
        "zh": "按来源或对象聚合，减少重复噪音",
        "en": "Grouped by source or subject to cut repeated noise"
      }
    }
  ],
  "anatomy": [
    "Header 顶栏",
    "Tabs 视图标签",
    "Notification List 通知列表",
    "Notification Item 单条通知",
    "Bulk Actions 批量操作",
    "Detail Pane 详情面板"
  ],
  "related": [
    {
      "id": "tabs",
      "relation": "contains"
    },
    {
      "id": "badge",
      "relation": "contains"
    },
    {
      "id": "avatar",
      "relation": "contains"
    },
    {
      "id": "infinite-scroll",
      "relation": "uses"
    },
    {
      "id": "empty-state",
      "relation": "uses"
    }
  ],
  "structure": [
    {
      "part": {
        "zh": "顶栏",
        "en": "Header"
      },
      "note": {
        "zh": "标题、全部已读与通知设置入口，固定在滚动区之上。",
        "en": "Title, mark-all-read and notification settings, pinned above the scroll area."
      }
    },
    {
      "part": {
        "zh": "视图标签",
        "en": "View tabs"
      },
      "note": {
        "zh": "全部、未读、提及、系统等分组，未读数量用徽标提示。",
        "en": "All, unread, mentions and system groups, with unread counts shown as badges."
      }
    },
    {
      "part": {
        "zh": "通知列表",
        "en": "Notification list"
      },
      "note": {
        "zh": "按时间倒序排列，未读项加背景强调，滚动到底自动加载。",
        "en": "Newest first, unread rows visually emphasized, loading more as you scroll."
      }
    },
    {
      "part": {
        "zh": "单条通知",
        "en": "Notification item"
      },
      "note": {
        "zh": "来源图标 + 标题 + 一句摘要 + 相对时间 + 行内已读与归档。",
        "en": "Source icon, title, a one-line snippet, relative time and inline read/archive actions."
      }
    },
    {
      "part": {
        "zh": "批量操作",
        "en": "Bulk actions"
      },
      "note": {
        "zh": "进入多选后浮现，支持已读、归档与删除。",
        "en": "Appears after entering multi-select — mark read, archive or delete."
      }
    },
    {
      "part": {
        "zh": "详情面板",
        "en": "Detail pane"
      },
      "note": {
        "zh": "分栏变体下展示完整正文与跳转原文按钮。",
        "en": "In the split variant, shows the full body and a link to the source."
      }
    }
  ],
  "demo": {
    "component": "notification-center",
    "modes": [
      "default",
      "dark",
      "variants"
    ]
  },
  "implementation": {
    "css": [
      "flex",
      "grid",
      "overflow-y: auto",
      "position: sticky"
    ],
    "notes": {
      "zh": "外层 flex 分「顶栏 + 标签 + 列表」三段，分栏变体再包一层 grid 分成列表与详情两列。 未读计数用徽标组件，列表项用 :has(未读) 或条件类切换背景。滚动加载用 IntersectionObserver 触发， 批量操作条吸附在列表顶部；空状态给「已全部读完」的正向反馈而非空白。",
      "en": "Flex column for header, tabs and list; the split variant adds a grid with list and detail columns. Unread counts use badges, and rows flip their background via a conditional class. Trigger loading with IntersectionObserver, keep the bulk bar sticky above the list, and show a positive all-caught-up empty state instead of a blank."
    }
  },
  "sources": [
    {
      "name": "Apple Human Interface Guidelines — Notifications",
      "url": "https://developer.apple.com/design/human-interface-guidelines/notifications"
    },
    {
      "name": "Material Design 3 — Badges",
      "url": "https://m3.material.io/components/badges/overview"
    }
  ],
  "prompts": {
    "basic": {
      "zh": "创建一个通知中心页面，包含视图标签、通知列表与全部已读操作。",
      "en": "Create a notification center page with view tabs, a notification list and mark-all-read."
    },
    "design": {
      "zh": "创建 SaaS 通知中心：顶部标题与「全部已读」按钮；标签栏区分全部/未读/提及并带未读计数； 列表每条含来源图标、标题、两行摘要与相对时间，未读加左侧强调条；支持多选批量已读； 无通知时显示「已全部读完」。响应式，深浅色一致，键盘可逐条操作。",
      "en": "Build a SaaS notification center: title and mark-all-read on top; tabs for all/unread/mentions with unread counts; each row shows source icon, title, two-line snippet and relative time, with an emphasis bar on unread; multi-select bulk read; an all-caught-up empty state. Responsive, theme-consistent and fully keyboard operable."
    },
    "implementation": {
      "zh": "用 React + Tailwind 实现通知中心：通知数据驱动，受控维护已读集合与当前过滤标签； 列表滚动用 IntersectionObserver 分页加载；分栏变体在宽屏用 grid-cols-[320px_1fr]； 未读样式用条件类；尊重 prefers-reduced-motion；不新增依赖。",
      "en": "React + Tailwind notification center: data-driven notifications with a controlled read set and active filter tab; paginate the list with IntersectionObserver; the split variant uses grid-cols-[320px_1fr] on wide screens; toggle unread styles with a conditional class; respect prefers-reduced-motion; no new dependencies."
    },
    "agent": {
      "zh": "在当前项目中实现通知中心页面。\n\n先检查现有的通知数据接口、徽标与列表组件，优先复用。\n要求：\n- 顶栏 + 视图标签（未读计数）+ 通知列表三段结构\n- 单条通知可标记已读，支持多选批量操作\n- 未读与已读样式区分，时间用相对格式\n- 无通知时给出正向空状态\n- 滚动加载更多，尊重 prefers-reduced-motion\n- 不新增依赖\n完成后运行现有检查，说明修改文件。",
      "en": "Implement the notification center page in the current project.\n\nInspect the existing notification data source, badge and list components first; reuse them.\nRequirements:\n- Three-part layout: header, view tabs (unread counts), notification list\n- Mark individual items read, with multi-select bulk actions\n- Distinct unread vs read styling and relative timestamps\n- A positive empty state when nothing is unread\n- Scroll to load more; respect prefers-reduced-motion\n- No new dependencies\nRun existing checks when done and list modified files."
    }
  }
}