x-next 1.12.0 → 1.14.0

package/AI_USAGE/components/network.md

@@ -0,0 +1,378 @@
+<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
+# Network AI 使用
+
+适用版本：x-next@1.14.0；来源指纹：`014984639d816a2c7e25eb22690c586b0b2e8efba6846bec8a4e424db41a09e9`。
+
+先读 [通用接入](../core.md)。公开导出：`Network`；主要模型：无。完整 Props、Events、Slots、实例方法与服务签名见 [本地 API](./network-api.md)，包含本组件族全部子组件和别名。
+
+按需样式：`x-next/style/network`（包含 base.css、network.css）。代码块未单独引样式时在应用入口加载全量样式，或按实际所有组件加载 JS 入口；不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
+
+## 场景用法
+
+以下示例从本地 `src/docs/components/network.md` 显式导入到独立 AI 源，补齐局部注册、状态和样式后进行严格模板检查。上方已核验行为优先；原始 prop 默认值、包装透传和示例业务适配分别查 [完整 API](./network-api.md) 与场景说明。类型通过不代表所有散文和交互已验证。
+
+### 用途与选型
+
+用于展示浏览器连接提示、离线状态与指定资源的主动探测结果。
+
+
+### 何时使用
+
+- 在提交、同步或长时间编辑场景提供轻量网络提示。
+- 用业务健康检查地址提示服务可达性，或通过受控状态展示业务已经检测到的质量。
+- 需要自定义图标、文字和重试按钮时使用默认插槽。
+
+
+### 基础用法
+
+默认仅展示信号条。`good / medium / poor` 用激活条数和颜色表达质量，`offline / unknown` 均为零激活条；需要准确文字时使用提示或默认插槽。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Network } from 'x-next';
+
+</script>
+<template>
+<div class="example-box">
+    <Network />
+    <Network status="good" show-tooltip />
+    <Network status="medium" show-tooltip />
+    <Network status="poor" show-tooltip />
+    <Network status="offline" show-tooltip />
+    <Network status="unknown" show-tooltip />
+  </div>
+</template>
+```
+
+### 尺寸
+
+mini / small 为 3 条，medium 为 4 条，large 为 5 条。尺寸只影响展示，不影响探测策略。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Network } from 'x-next';
+
+</script>
+<template>
+<div class="example-box">
+    <Network size="mini" status="good" />
+    <Network size="small" status="good" />
+    <Network size="medium" status="good" />
+    <Network size="large" status="good" />
+  </div>
+</template>
+```
+
+### 受控状态与自动切换
+
+传入 `status` 后只展示，不启动网络监听、轮询或主动请求，也不因 prop 变化发送事件。改回 `undefined` 会重新启动自动检测，并发送该轮的初始 `change`，不会把受控值当成浏览器连接跃迁。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Network, Space, Button } from 'x-next';
+import { ref } from 'vue';
+import type { NetworkQuality } from 'x-next';
+const controlledStatus = ref<NetworkQuality | undefined>('medium');
+</script>
+<template>
+<div class="example-box example-box-column">
+    <Network :status="controlledStatus" show-tooltip />
+    <Space>
+      <Button size="small" @click="controlledStatus = 'good'">良好</Button>
+      <Button size="small" @click="controlledStatus = 'medium'">一般</Button>
+      <Button size="small" @click="controlledStatus = 'poor'">较差</Button>
+      <Button size="small" @click="controlledStatus = 'offline'">离线</Button>
+      <Button size="small" @click="controlledStatus = 'unknown'">未知</Button>
+      <Button size="small" @click="controlledStatus = undefined">自动检测</Button>
+    </Space>
+    <span>{{ controlledStatus === undefined ? '浏览器自动模式' : '受控展示：' + controlledStatus }}</span>
+  </div>
+</template>
+```
+
+### 状态颜色
+
+`statusColors` 优先于兼容入口 `signalStrengthColor`；兼容入口只设置 good / poor。offline / unknown 的零激活条也可配置颜色，其他状态的未激活条使用默认中性色。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Network } from 'x-next';
+
+</script>
+<template>
+<div class="example-box">
+    <Network status="good" :status-colors="{ good: '#0f766e' }" />
+    <Network status="medium" :status-colors="{ medium: '#b45309' }" />
+    <Network status="poor" :status-colors="{ poor: '#dc2626' }" />
+    <Network status="offline" :status-colors="{ offline: '#64748b' }" show-tooltip />
+    <Network status="unknown" :status-colors="{ unknown: '#7c3aed' }" show-tooltip />
+    <Network status="good" :signal-strength-color="['#2563eb', '#ea580c']" />
+    <Network status="poor" :signal-strength-color="['#2563eb', '#ea580c']" />
+  </div>
+</template>
+```
+
+### 无障碍与悬浮提示
+
+默认图标具有 `role="status"`、`aria-live="polite"` 和随状态更新的隐藏文本，指标数字不进入默认播报。`ariaLive="off"` 可用于重复的装饰提示。`showTooltip` 使用原生 title，不增加 Tab 停靠点；需要触屏或键盘提示时组合 Tooltip 或文字插槽。自定义插槽应提供自己的状态文字和操作名称。
+
+在启用严格模板类型检查的 SFC 中，使用已声明的 `ariaLabel / ariaLive` 组件 props，组件会输出对应原生 ARIA 属性。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Network } from 'x-next';
+
+</script>
+<template>
+<div class="example-box">
+    <Network status="medium" ariaLabel="当前网络略慢" />
+    <Network
+      status="poor"
+      show-tooltip
+      ariaLabel="当前网络较差，请稍后提交"
+      ariaLive="assertive"
+    />
+    <Network status="good" ariaLive="off" />
+  </div>
+</template>
+```
+
+### 主动探测和事件
+
+首次自动检测发送 `change`；随后比较全部状态字段（除时间戳）再决定是否发送。每次主动探测完成均发送 `probe`，所以同一轮可能出现两条不同事件日志。`online / offline` 仅表示浏览器自动模式下的连接跃迁，首次已离线不会额外发送 `offline`。可在开发者工具中切换 Offline 验证这两个事件；文档按钮只发起请求，不模拟设备断网。
+
+不传 `ping` 时读取浏览器连接提示并监听在线、离线与连接变化；传入后在挂载、连接变化、手动刷新及轮询时请求该地址。`interval` 是轮询请求完成后到下一轮的等待时间，多个手动刷新会复用进行中的请求。浏览器状态变化会取消旧轮次，离线状态优先。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Network, Button } from 'x-next';
+import { ref } from 'vue';
+import type { NetworkStatus } from 'x-next';
+const eventNetwork = ref<{ refresh: () => Promise<NetworkStatus> }>();
+const eventRefreshing = ref(false);
+const eventLogs = ref<Array<{ id: number; text: string }>>([]);
+let eventSequence = 0;
+const pushNetworkLog = (event: string, status: NetworkStatus) => {
+  const latency = status.latency === undefined ? '' : ` / ${status.latency}ms`;
+  const reason = status.reason ? ` / ${status.reason}` : '';
+  eventLogs.value = [{ id: ++eventSequence, text: `${event}: ${status.quality} / ${status.source}${reason}${latency}` }, ...eventLogs.value].slice(0, 4);
+};
+const refreshEventNetwork = async () => {
+  if (!eventNetwork.value || eventRefreshing.value) return;
+  eventRefreshing.value = true;
+  try { await eventNetwork.value.refresh(); }
+  finally { eventRefreshing.value = false; }
+};
+</script>
+<template>
+<div class="example-box example-box-column">
+    <Network
+      ref="eventNetwork"
+      show-metrics
+      ping="/logo.svg"
+      :interval="8000"
+      :timeout="3000"
+      @change="pushNetworkLog('change', $event)"
+      @probe="pushNetworkLog('probe', $event)"
+      @online="pushNetworkLog('online', $event)"
+      @offline="pushNetworkLog('offline', $event)"
+    />
+    <Button size="small" :loading="eventRefreshing" @click="refreshEventNetwork">立即探测</Button>
+    <div class="demo-network-log">
+      <div v-for="item in eventLogs" :key="item.id">{{ item.text }}</div>
+    </div>
+  </div>
+</template>
+```
+
+### 探测失败和超时
+
+此地址用于稳定演示请求失败，正常在线时结果为 `poor / probe-error`。非 2xx 响应为 `http-error`，整个请求（含响应体）超时为 `probe-timeout`；只有浏览器明确离线才显示 offline。演示真实超时需要一个延迟超过 `timeout` 的服务，可在本地健康检查接口验证，本页不依赖外部慢接口。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Network, Button } from 'x-next';
+import { ref } from 'vue';
+import type { NetworkStatus } from 'x-next';
+const failureLogs = ref<Array<{ id: number; text: string }>>([]);
+const failureRefreshing = ref(false);
+let failureSequence = 0;
+const pushFailureLog = (status: NetworkStatus) => {
+  failureLogs.value = [{ id: ++failureSequence, text: `${status.quality} / ${status.reason || 'probe'}` }, ...failureLogs.value].slice(0, 3);
+};
+const retryFailure = async (refresh: () => Promise<NetworkStatus>) => {
+  if (failureRefreshing.value) return;
+  failureRefreshing.value = true;
+  try { await refresh(); }
+  finally { failureRefreshing.value = false; }
+};
+</script>
+<template>
+<div class="example-box example-box-column">
+    <Network
+      ping="https://probe.invalid/ping"
+      show-metrics
+      :timeout="1000"
+      @probe="pushFailureLog"
+    >
+      <template #default="{ quality, reason, refresh }">
+        <div class="demo-network-card">
+          <span>{{ quality }} / {{ reason || '等待探测' }}</span>
+          <Button size="small" :loading="failureRefreshing" @click="retryFailure(refresh)">重试探测</Button>
+        </div>
+      </template>
+    </Network>
+    <div class="demo-network-log">
+      <div v-for="item in failureLogs" :key="item.id">{{ item.text }}</div>
+    </div>
+  </div>
+</template>
+```
+
+### 下载估算与尺寸边界
+
+`showMetrics` 展示上下两行，例如 `9ms` / `42K/s`。`latency` 是到响应头的耗时，质量分档按该值判断（低于 500ms 为 good，低于 1500ms 为 medium，否则 poor）；`downloadSpeed` 用实际响应体字节数除以整个请求耗时估算。这里的 K/s、M/s 分别按 1024 bytes/s、1024² bytes/s 格式化。空响应体或没有速度数据时显示 `--`。
+
+使用同源小资源或允许 CORS 的小型健康检查资源，业务项目需自行提供 `/logo.svg` 或替换地址。请求会读取完整响应体，即使未开启指标也会进行下载估算；避免大文件。该数值不是正在下载的业务任务或整机实时流量。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Network } from 'x-next';
+
+</script>
+<template>
+<div class="example-box">
+    <Network size="mini" show-metrics ping="/logo.svg" />
+    <Network size="small" show-metrics ping="/logo.svg" />
+    <Network size="medium" show-metrics ping="/logo.svg" />
+    <Network size="large" show-metrics ping="/logo.svg" />
+    <Network status="unknown" show-metrics show-tooltip />
+  </div>
+</template>
+```
+
+### 自定义展示与刷新
+
+默认插槽完全替换图标和指标。此示例使用自动探测，点击或键盘激活按钮后展示返回状态与完成次数；按钮 loading 是示例业务状态，组件本身没有 loading prop。插槽也提供 `status / online / downloadSpeed / speedSource / source / reason`。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Network, Button } from 'x-next';
+import { ref } from 'vue';
+import type { NetworkStatus } from 'x-next';
+const customRefreshing = ref(false);
+const customRefreshCount = ref(0);
+const customResult = ref('等待手动刷新');
+const refreshCustom = async (refresh: () => Promise<NetworkStatus>) => {
+  if (customRefreshing.value) return;
+  customRefreshing.value = true;
+  try {
+    const status = await refresh();
+    customRefreshCount.value += 1;
+    customResult.value = `${status.quality} / ${status.source}`;
+  } finally { customRefreshing.value = false; }
+};
+</script>
+<template>
+<div class="example-box example-box-column">
+    <Network ping="/logo.svg">
+      <template #default="{ quality, latency, refresh }">
+        <div class="demo-network-card">
+          <strong>网络状态：{{ quality }}</strong>
+          <span v-if="latency !== undefined">{{ latency }}ms</span>
+          <Button size="small" :loading="customRefreshing" @click="refreshCustom(refresh)">重新检测</Button>
+        </div>
+      </template>
+    </Network>
+    <span>手动刷新完成 {{ customRefreshCount }} 次；{{ customResult }}</span>
+  </div>
+</template>
+```
+
+### 受控模式的实例方法
+
+`refresh()` 始终返回 `Promise<NetworkStatus>`。受控模式会返回当前归一化状态，并主动发送一次 `change`，不会请求 ping 或发送 probe / online / offline。组件未挂载或卸载后返回快照，不再产生请求和事件。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Network, Button } from 'x-next';
+import { ref } from 'vue';
+import type { NetworkStatus } from 'x-next';
+const manualNetwork = ref<{ refresh: () => Promise<NetworkStatus> }>();
+const manualResult = ref('尚未读取');
+const manualChanges = ref(0);
+const readManualSnapshot = async () => {
+  if (!manualNetwork.value) return;
+  const status = await manualNetwork.value.refresh();
+  manualResult.value = `${status.quality} / ${status.source}`;
+};
+</script>
+<template>
+<div class="example-box example-box-column">
+    <Network ref="manualNetwork" status="poor" @change="manualChanges += 1" />
+    <Button size="small" @click="readManualSnapshot">读取受控状态</Button>
+    <span>{{ manualResult }}；change 回调 {{ manualChanges }} 次</span>
+  </div>
+</template>
+```
+
+### 根节点属性与样式
+
+`class / style / id / title` 和原生监听器透传到根 div，与内部结构类合并。此处原生属性对象仅包含已验证落到根节点的 id/title。`showTooltip` 开启时默认提供状态 title；显式原生 title 可覆盖。CSS 变量可局部调整图标，避免直接依赖内部元素选择器。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Network } from 'x-next';
+import type { HTMLAttributes } from 'vue';
+const rootAttrs: Pick<HTMLAttributes, 'id' | 'title'> = {
+  id: 'network-root-demo',
+  title: '业务自定义标题',
+};
+</script>
+<template>
+<div class="example-box">
+    <Network
+      v-bind="rootAttrs"
+      class="demo-network-indicator"
+      status="good"
+      :style="{ '--x-network-width': '36px', '--x-network-height': '24px', '--x-network-signal-width': '5px' }"
+    />
+  </div>
+</template>
+```
+
+### CSS 变量
+
+| 变量 | 用途 |
+| --- | --- |
+| `--x-network-width` / `--x-network-height` | 信号图标宽、高 |
+| `--x-network-signal-width` / `--x-network-gap` | 单条宽度、信号与指标间距 |
+| `--x-network-color-good` / `medium` / `poor` / `offline` / `unknown` | 各状态信号色（完整变量均以 `--x-network-color-` 开头） |
+| `--x-network-color-inactive` | 有信号状态中的未激活条颜色 |
+| `--x-network-text-color` / `--x-network-metrics-font-size` | 指标颜色、字号 |
+
+
+### 已知限制
+
+- Network Information API 并非所有浏览器都有。完全缺失时在线回退 good；有 connection 但字段不足时回退 unknown（默认文案“检测中”），不代表正在反复请求。effectiveType 是网络估算档位，不是实际蜂窝制式。
+- `navigator.onLine` 只提供浏览器连接线索，good 不能证明互联网或业务服务可达。请求失败时浏览器仍在线，quality 为 poor、online 仍为 true。
+- 每个自动实例独立监听与请求；没有共享采样、抖动阈值、自定义请求或鉴权 headers API。纯展示优先使用受控模式。
+- 下载估算容易受资源大小、缓存层、Service Worker、服务处理耗时等影响；`cache: 'no-cache'` 不能排除所有缓存。没有上传/整机流量统计。
+- onchange 降级时 x-next 实例共享监听并转发已有处理器；如果外部随后直接覆盖该单槽位，旧监听不再接收连接变化，卸载也不会覆盖外部的新处理器。
+- SSR 只渲染占位或受控值，挂载后才创建探测实例。不支持 AbortController 时仍按 timeout 结束组件等待，但宿主中的实际底层请求无法由组件中止。
+- 组件没有打开/关闭、清空、选择、禁用或只读行为；重试按钮及其 loading 状态由业务插槽实现。
+
+
+
+返回 [AI 索引](../index.md)。先查本页与 [本地 API](./network-api.md)；需要更深类型时查 [公开组件导航](../catalog.md)，不默认上网查找本包用法。

package/AI_USAGE/components/notification-api.md

@@ -0,0 +1,236 @@
+<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
+# Notification 完整公开 API
+
+适用版本：x-next@1.14.0；来源指纹：`014984639d816a2c7e25eb22690c586b0b2e8efba6846bec8a4e424db41a09e9`。
+
+从同版本构建的公开声明、运行时 props/emits 和显式 expose 生成。运行时导入始终使用 `x-next`，声明路径仅作定位。插槽类型未细化时，具体槽名与作用域见本地用法示例。
+
+## Notification API
+
+公开声明：`dist/components/notification/warp.d.ts`。
+
+### 服务调用
+
+| 签名 |
+| --- |
+| (options: NotificationParams, appContext?: AppContext): NotificationReturn |
+
+### 服务成员
+
+| 名称 | 类型 |
+| --- | --- |
+| info | (options: NotificationParams, appContext?: AppContext) => NotificationReturn |
+| success | (options: NotificationParams, appContext?: AppContext) => NotificationReturn |
+| warning | (options: NotificationParams, appContext?: AppContext) => NotificationReturn |
+| strong | (options: NotificationParams, appContext?: AppContext) => NotificationReturn |
+| error | (options: NotificationParams, appContext?: AppContext) => NotificationReturn |
+| remove | (id: string &#124; number) => void |
+| clear | (position?: NotificationPosition) => void |
+| _context | undefined &#124; null &#124; AppContext |
+
+### 关联类型定义
+
+以下摘自本组件族声明，供查阅嵌套配置；运行时和值类型均以根入口可导出项为准。
+
+```typescript-reference
+declare const types: readonly ["success", "strong", "warning", "error", "info"];
+
+type NotificationType = (typeof types)[number];
+
+type NotificationContent = string | number | RenderFunction | VNode;
+
+interface NotificationOptions {
+    id?: string | number;
+    title?: NotificationContent;
+    message?: NotificationContent;
+    content?: NotificationContent;
+    type?: NotificationType;
+    duration?: number;
+    position?: NotificationPosition;
+    offset?: number;
+    renderTo?: string | HTMLElement;
+    showClose?: boolean;
+    closable?: boolean;
+    showIcon?: boolean;
+    icon?: RenderFunction | VNode;
+    footer?: RenderFunction | VNode;
+    closeIcon?: RenderFunction | VNode;
+    popupClass?: string;
+    class?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+    onClose?: (id?: string | number) => void;
+}
+
+type NotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+type NotificationParams = NotificationOptions | NotificationContent;
+
+interface NotificationReturn {
+    close(): void;
+}
+
+interface NotificationCaller {
+    (options: NotificationParams, appContext?: AppContext): NotificationReturn;
+}
+
+interface NotificationMethods extends NotificationCaller {
+    info(options: NotificationParams, appContext?: AppContext): NotificationReturn;
+    success(options: NotificationParams, appContext?: AppContext): NotificationReturn;
+    warning(options: NotificationParams, appContext?: AppContext): NotificationReturn;
+    strong(options: NotificationParams, appContext?: AppContext): NotificationReturn;
+    error(options: NotificationParams, appContext?: AppContext): NotificationReturn;
+    remove(id: string | number): void;
+    clear(position?: NotificationPosition): void;
+}
+
+interface NotificationItem {
+    id: string | number;
+    title?: NotificationContent;
+    message: NotificationContent;
+    type: NotificationType;
+    duration: number;
+    showClose: boolean;
+    showIcon: boolean;
+    icon?: RenderFunction | VNode;
+    footer?: RenderFunction | VNode;
+    closeIcon?: RenderFunction | VNode;
+    popupClass?: string;
+    class?: string;
+    style?: CSSProperties;
+    offset: number;
+    onClick?: () => void;
+    onClose?: (id?: string | number) => void;
+    resetOnUpdate?: boolean;
+}
+
+type NotificationProps = ExtractPropTypes<typeof notificationProps>;
+
+type NotificationApi = NotificationMethods & {
+    _context?: AppContext | null;
+    install?: (app: App) => void;
+};
+```
+
+
+## NotificationComponent API
+
+公开声明：`dist/components/notification/index.d.ts`。 类型中的 undefined 表示可省略；原始 prop 默认值不等于继承配置或服务默认值。
+
+### Props
+
+| 名称 | 用途 | 公开类型 | 必填 | 声明默认值 |
+| --- | --- | --- | --- | --- |
+| position | 见场景用法与类型 | undefined &#124; "top-right" &#124; "top-left" &#124; "bottom-right" &#124; "bottom-left" | 否 | "top-right" |
+| offset | 见场景用法与类型 | undefined &#124; number | 否 | 0 |
+| title | 见场景用法与类型 | undefined &#124; string &#124; number &#124; () => VNodeChild &#124; VNode<RendererNode, RendererElement, { [key: string]: any; }> | 否 | undefined |
+| type | 见场景用法与类型 | undefined &#124; "success" &#124; "warning" &#124; "strong" &#124; "info" &#124; "error" | 否 | "info" |
+| message | 见场景用法与类型 | undefined &#124; string &#124; number &#124; () => VNodeChild &#124; VNode<RendererNode, RendererElement, { [key: string]: any; }> | 否 | undefined |
+| duration | 见场景用法与类型 | undefined &#124; number | 否 | 3000 |
+| showClose | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | true |
+| showIcon | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | true |
+| icon | 见场景用法与类型 | undefined &#124; () => VNodeChild &#124; VNode<RendererNode, RendererElement, { [key: string]: any; }> | 否 | 未声明 |
+| footer | 见场景用法与类型 | undefined &#124; () => VNodeChild &#124; VNode<RendererNode, RendererElement, { [key: string]: any; }> | 否 | 未声明 |
+| closeIcon | 见场景用法与类型 | undefined &#124; () => VNodeChild &#124; VNode<RendererNode, RendererElement, { [key: string]: any; }> | 否 | 未声明 |
+| popupClass | 见场景用法与类型 | undefined &#124; string | 否 | undefined |
+| resetOnUpdate | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | false |
+| onClose | 见场景用法与类型 | undefined &#124; () => void | 否 | 工厂函数（每个实例初始化；有效值见行为说明） |
+| renderToBody | 见场景用法与类型 | undefined &#124; false &#124; true | 否 | false |
+
+### Events
+
+| 事件 | 用途 | 监听器签名（即事件参数） |
+| --- | --- | --- |
+| close | 见场景用法与类型 | undefined &#124; () => void |
+| destroy | 见场景用法与类型 | undefined &#124; (...args: any[]) => any |
+| click | 见场景用法与类型 | undefined &#124; (...args: any[]) => any |
+
+### Slots
+
+公开类型未逐项声明插槽；本页场景说明列出实际使用的插槽，不将任意插槽视为已支持。
+
+### 实例方法
+
+没有检索到显式 expose 或 Options API methods 的公开方法；不把 setup 内部函数当成稳定实例 API。
+
+### 关联类型定义
+
+以下摘自本组件族声明，供查阅嵌套配置；运行时和值类型均以根入口可导出项为准。
+
+```typescript-reference
+declare const types: readonly ["success", "strong", "warning", "error", "info"];
+
+type NotificationType = (typeof types)[number];
+
+type NotificationContent = string | number | RenderFunction | VNode;
+
+interface NotificationOptions {
+    id?: string | number;
+    title?: NotificationContent;
+    message?: NotificationContent;
+    content?: NotificationContent;
+    type?: NotificationType;
+    duration?: number;
+    position?: NotificationPosition;
+    offset?: number;
+    renderTo?: string | HTMLElement;
+    showClose?: boolean;
+    closable?: boolean;
+    showIcon?: boolean;
+    icon?: RenderFunction | VNode;
+    footer?: RenderFunction | VNode;
+    closeIcon?: RenderFunction | VNode;
+    popupClass?: string;
+    class?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+    onClose?: (id?: string | number) => void;
+}
+
+type NotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+type NotificationParams = NotificationOptions | NotificationContent;
+
+interface NotificationReturn {
+    close(): void;
+}
+
+interface NotificationCaller {
+    (options: NotificationParams, appContext?: AppContext): NotificationReturn;
+}
+
+interface NotificationMethods extends NotificationCaller {
+    info(options: NotificationParams, appContext?: AppContext): NotificationReturn;
+    success(options: NotificationParams, appContext?: AppContext): NotificationReturn;
+    warning(options: NotificationParams, appContext?: AppContext): NotificationReturn;
+    strong(options: NotificationParams, appContext?: AppContext): NotificationReturn;
+    error(options: NotificationParams, appContext?: AppContext): NotificationReturn;
+    remove(id: string | number): void;
+    clear(position?: NotificationPosition): void;
+}
+
+interface NotificationItem {
+    id: string | number;
+    title?: NotificationContent;
+    message: NotificationContent;
+    type: NotificationType;
+    duration: number;
+    showClose: boolean;
+    showIcon: boolean;
+    icon?: RenderFunction | VNode;
+    footer?: RenderFunction | VNode;
+    closeIcon?: RenderFunction | VNode;
+    popupClass?: string;
+    class?: string;
+    style?: CSSProperties;
+    offset: number;
+    onClick?: () => void;
+    onClose?: (id?: string | number) => void;
+    resetOnUpdate?: boolean;
+}
+
+type NotificationProps = ExtractPropTypes<typeof notificationProps>;
+```
+
+
+返回 [Notification 用法](./notification.md)。