Notification
通知提醒框：命令式全局反馈 API（notification.open/success/info/warning/error/close/destroyAll/config + useNotification）。严格对齐 Semi——标题 + 内容 + 图标；六方位独立堆叠；单例容器惰性挂载到 getPopupContainer()（默认 body）；duration 秒自动关闭（0 常驻）+ hover 暂停/重启定时器 + 同 id 原地更新；role=alert + aria-labelledby 关联标题；theme(normal/light) 填充样式；icon 自定义图标；onClick 点击回调；onCloseClick 关闭按钮回调；notification.config({ top/bottom/left/right/position/duration/zIndex/direction/getPopupContainer }) 全局配置（首次生效）。useNotification() 返回 [api, holderStore]，配合 <NotificationHolder store={holderStore}> 让通知继承组件树上下文。
如何引入
import { Notification } from '@chenzy-design/svelte';普通通知
最基本的用法，3s 后自动关闭。
不同位置弹出
可以从六个不同位置弹出：默认右上角 topRight，可选 top / bottom / topLeft / topRight / bottomLeft / bottomRight。
带有图标的通知
成功、失败、警告、提示四种类型内置图标，也可通过 icon 传入自定义图标。
默认的图标
自定义图标
多色样式
使用 theme=light 设置浅色填充样式提高与界面的对比，默认为 normal 的白色模式。
链接文本
content 传入 Snippet 可自定义操作区链接文本，用来配合更复杂的场景。
修改延时
自定义时长 10s，默认时长为 3s。
手动关闭
设置 duration 为 0 时通知不会自动关闭，只能通过 notification.close(id) 手动关闭。
更新内容
可以通过唯一的 id 来更新已展示通知的内容。
Hook 用法
useNotification() 返回 [api, holderStore]，将 holderStore 传给 <NotificationHolder> 渲染在组件树内，使通知继承该处上下文（如 LocaleProvider）。
API 参考
Notification
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
id | 指定 id；已存在则原地更新（对齐 Semi） | string | undefined |
title | 通知标题（string 文本或 Snippet） | string | Snippet | '' |
content | 通知内容（string 文本或 Snippet） | string | Snippet | '' |
type | 语义类型，决定内置图标与强调色 | 'default'|'success'|'info'|'warning'|'error' | 'default' |
duration | 自动关闭秒数，单位 s，0 时不自动关闭 | number | 3 |
position | 弹出位置，每方位独立堆叠 | 'top'|'bottom'|'topLeft'|'topRight'|'bottomLeft'|'bottomRight' | 'topRight' |
showClose | 是否展示关闭按钮 | boolean | true |
theme | 填充样式；light 为多色浅填充（提高与界面对比） | 'normal'|'light' | 'normal' |
icon | 左上角自定义图标（覆盖类型内置图标） | Snippet | undefined |
zIndex | 弹层 z-index，首次设置一次生效 | number | 1010 |
direction | RTL 时镜像卡片布局（图标/内容 margin 方向翻转） | 'ltr'|'rtl' | 'ltr'（可经 notification.config 改默认） |
getPopupContainer | 指定父级 DOM，容器将渲染至该 DOM（首条通知生效） | () => HTMLElement | () => document.body |
onClick | 点击通知的回调 | (e: MouseEvent) => void | undefined |
onClose | 通知关闭回调（主动关闭、延时到达关闭都会触发） | () => void | undefined |
onCloseClick | 主动点击关闭按钮时的回调 | (id: string) => void | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onClose | — | 通知关闭时触发（主动关闭 / 延时到达 / destroyAll） |
onClick | — | 点击通知卡片时触发 |
onCloseClick | — | 主动点击关闭按钮时触发，带 id |
Config
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
top | — | — | 弹出位置 top（number | string），首次生效 |
bottom | — | — | 弹出位置 bottom（number | string），首次生效 |
left | — | — | 弹出位置 left（number | string），首次生效 |
right | — | — | 弹出位置 right（number | string），首次生效 |
position | — | — | 默认弹出位置 'topLeft'|'top'|'topRight'|'bottomLeft'|'bottom'|'bottomRight'（默认 topRight） |
duration | — | — | 默认自动关闭秒数（默认 3，0 常驻） |
zIndex | — | — | 通知列表 z-index（默认 1010，首次生效） |
direction | — | — | 默认书写方向 'ltr'|'rtl'（per-item direction 优先） |
getPopupContainer | — | — | () => HTMLElement，容器宿主挂载目标（默认 body）；须在首条通知前生效 |
Accessibility
- role=alert（对齐 Semi）；标题经 aria-labelledby 关联；关闭按钮为 IconButton，带 ariaLabel「关闭」。不抢焦点、不锁滚动。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-notification-ambient-bg | var(--cd-color-bg-0) | 透明背景色叠加层(与bg0保持一致不建议修改) |
--cd-color-notification-bg-default | var(--cd-color-bg-3) | 通知背景色 |
--cd-color-notification-closebtn-icon | var(--cd-color-text-2) | 通知 关闭按钮 图标颜色 |
--cd-color-notification-content-text | var(--cd-color-text-1) | 通知 内容 文本颜色 |
--cd-color-notification-danger-icon | var(--cd-color-danger) | 通知 危险 图标颜色 |
--cd-color-notification-danger-light-bg | var(--cd-color-danger-light-default) | 彩色通知危险背景色 |
--cd-color-notification-danger-light-border | var(--cd-color-danger) | 彩色通知危险描边色 |
--cd-color-notification-info-icon | var(--cd-color-info) | 通知 信息 图标颜色 |
--cd-color-notification-info-light-bg | var(--cd-color-info-light-default) | 彩色通知信息背景色 |
--cd-color-notification-info-light-border | var(--cd-color-info) | 彩色通知信息描边色 |