x-next 1.13.0 → 1.15.0

package/AI_USAGE/components/message-box.md

@@ -1,12 +1,14 @@
 <!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
 # MessageBox AI 使用
 
-适用版本：x-next@1.13.0；来源指纹：`18e9b8eefa53b4bd91134fb4486778509ccf3a8d614a1bd387a6d469b623ddcf`。
+适用版本：x-next@1.15.0；来源指纹：`47ea153587c8d0b3bf318977b10bde9f8dd4acff90c5818541ba6513252ad362`。
 
-先读 [通用接入](../core.md)。公开导出：`MessageBox`；模型：无；已核对事件：未在精选映射登记事件；其他 API 见下方用法。
+先读 [通用接入](../core.md)。公开导出：`MessageBox`；主要模型：无。完整 Props、Events、Slots、实例方法与服务签名见 [本地 API](./message-box-api.md)，包含本组件族全部子组件和别名。
 
 按需样式：`x-next/style/message-box`（包含 base.css、button.css、dialog.css、message-box.css、space.css）。代码块未单独引样式时在应用入口加载全量样式，或按实际所有组件加载 JS 入口；不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
 
+## 已核验行为与示例
+
 [组件文档与 live demo](https://x-next.yjmf.com/components/message-box)。调用 `MessageBox(options)`，默认类型为 `'success'`、宽度 `360`、居中、显示遮罩和关闭按钮、点击遮罩不关闭。`title` / `content` 支持文字、VNode 或渲染函数；`footer=false` 隐藏页脚。
 
 返回 `close()` / `update(options)` 句柄，结果通过 `onOk(event)` / `onCancel(event)` 回调处理。`beforeOnOk` / `beforeOnCancel` 返回 `boolean | Promise<boolean>`，必须返回 `true` 才放行；异步业务放在前置钩子。它不是 Promise，没有 `confirm()`；`.warning(title, content)` 等返回的 `.ok()` / `.cancel()` 用于注册链式回调。
@@ -36,4 +38,267 @@ onBeforeUnmount(() => handle?.close());
 </template>
 ```
 
-返回 [AI 索引](../index.md)。精选示例不是完整 API 表，新能力先查同版本公开类型与组件文档。
+## 场景用法
+
+以下示例从本地 `src/docs/components/message-box.md` 显式导入到独立 AI 源，补齐局部注册、状态和样式后进行严格模板检查。上方已核验行为优先；原始 prop 默认值、包装透传和示例业务适配分别查 [完整 API](./message-box-api.md) 与场景说明。类型通过不代表所有散文和交互已验证。
+
+### 用途与选型
+
+用于确认、警告等阻塞式反馈。
+
+
+### 基础用法
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Space, Button } from 'x-next';
+import { MessageBox } from 'x-next';
+
+const openConfirm = () => {
+  MessageBox.warning('确认删除吗？', '删除后数据不可恢复')
+    .ok(() => console.log('ok'))
+    .cancel(() => console.log('cancel'));
+};
+
+const openInfo = () => {
+  MessageBox.info('更新说明', '本次操作不会影响已有数据');
+};
+</script>
+<template>
+<Space>
+    <Button status="warning" @click="openConfirm">删除确认</Button>
+    <Button @click="openInfo">信息提示</Button>
+  </Space>
+</template>
+```
+
+### 消息类型
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Button } from 'x-next';
+import { MessageBox } from 'x-next';
+import type { MessageBoxStaticMethod } from 'x-next';
+
+const openType = (type: MessageBoxStaticMethod) => {
+  MessageBox[type](`${type} 标题`, `${type} 内容`);
+};
+</script>
+<template>
+<div class="demo-inline-group">
+    <Button @click="openType('info')">Info</Button>
+    <Button status="success" @click="openType('success')">Success</Button>
+    <Button status="warning" @click="openType('warning')">Warning</Button>
+    <Button status="strong" @click="openType('strong')">Strong</Button>
+    <Button status="danger" @click="openType('error')">Error</Button>
+  </div>
+</template>
+```
+
+### 异步关闭
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Space, Button } from 'x-next';
+import { MessageBox } from 'x-next';
+
+const openAsyncOk = () => {
+  MessageBox({
+    title: '提交确认',
+    content: '确认提交当前表单吗？',
+    type: 'info',
+    okText: '提交',
+    beforeOnOk: async () => {
+      await new Promise((resolve) => window.setTimeout(resolve, 1200));
+      return true;
+    },
+  });
+};
+
+const openBlockedCancel = () => {
+  MessageBox({
+    title: '当前不能取消',
+    content: 'beforeOnCancel 返回 false 时弹窗会保持打开',
+    type: 'warning',
+    beforeOnCancel: () => false,
+  });
+};
+</script>
+<template>
+<Space>
+    <Button type="primary" @click="openAsyncOk">异步确认</Button>
+    <Button @click="openBlockedCancel">阻止取消</Button>
+  </Space>
+</template>
+```
+
+### 手动控制
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Space, Button } from 'x-next';
+import { MessageBox } from 'x-next';
+
+const openManualClose = () => {
+  const instance = MessageBox({
+    title: '手动关闭',
+    content: '这个消息框会在 2 秒后关闭',
+    type: 'success',
+  });
+  window.setTimeout(() => instance.close(), 2000);
+};
+
+const openManualUpdate = () => {
+  let seconds = 3;
+  const instance = MessageBox.success('倒计时', `还有 ${seconds} 秒关闭`);
+  const timer = window.setInterval(() => {
+    seconds -= 1;
+    instance.update({ content: `还有 ${seconds} 秒关闭` });
+    if (seconds <= 0) {
+      window.clearInterval(timer);
+      instance.close();
+    }
+  }, 1000);
+};
+
+const closeAll = () => MessageBox.destroyAll();
+</script>
+<template>
+<Space>
+    <Button @click="openManualClose">2 秒后关闭</Button>
+    <Button @click="openManualUpdate">倒计时更新</Button>
+    <Button @click="closeAll">关闭全部</Button>
+  </Space>
+</template>
+```
+
+### 页脚和按钮
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Space, Button } from 'x-next';
+import { h } from 'vue';
+import { MessageBox } from 'x-next';
+
+const openNoFooter = () => {
+  MessageBox({
+    title: '无底部区域',
+    content: 'footer=false 时不会显示底部按钮',
+    type: 'info',
+    footer: false,
+  });
+};
+
+const openOnlyOk = () => {
+  MessageBox.success('保存成功', '只展示确认按钮').update({ hideCancel: true });
+};
+
+const openCustomFooter = () => {
+  MessageBox({
+    title: '自定义底部',
+    content: 'footer 可以接收渲染函数',
+    type: 'strong',
+    footer: ({ cancel, ok }) =>
+      h('div', { style: 'display:flex;gap:8px;justify-content:flex-end;' }, [
+        h('button', { onClick: cancel }, '稍后'),
+        h('button', { onClick: ok }, '立即处理'),
+      ]),
+  });
+};
+</script>
+<template>
+<Space>
+    <Button @click="openNoFooter">隐藏底部</Button>
+    <Button @click="openOnlyOk">只保留确认</Button>
+    <Button @click="openCustomFooter">自定义底部</Button>
+  </Space>
+</template>
+```
+
+### 自定义位置和容器
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Space, Button } from 'x-next';
+import { MessageBox } from 'x-next';
+
+const openTopMessageBox = () => {
+  MessageBox({
+    title: '自定义位置',
+    content: '设置 top 后不再垂直居中',
+    type: 'info',
+    top: 80,
+  });
+};
+
+const openLocalMessageBox = () => {
+  MessageBox({
+    title: '局部容器',
+    content: '挂载到指定容器',
+    type: 'success',
+    renderTo: '#message-box-local-container',
+  });
+};
+</script>
+<template>
+<Space>
+    <Button @click="openTopMessageBox">距离顶部</Button>
+    <Button @click="openLocalMessageBox">局部容器</Button>
+  </Space>
+  <div id="message-box-local-container" class="message-box-local-container"></div>
+</template>
+```
+
+### MessageBoxOptions
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `title` | 标题 | `MessageBoxContent` | `-` |
+| `type` | 消息类型 | `'info' \| 'success' \| 'warning' \| 'strong' \| 'error'` | `'success'` |
+| `content` | 正文内容 | `MessageBoxContent` | `-` |
+| `footer` | 自定义底部；`false` 时隐藏底部 | `boolean \| VNode \| (scoped) => MessageBoxRenderResult` | 默认按钮 |
+| `okText` | 确认按钮文案 | `string` | `'确认'` |
+| `cancelText` | 取消按钮文案 | `string` | `'取消'` |
+| `mask` | 是否显示遮罩 | `boolean` | `true` |
+| `maskToClose` | 点击遮罩是否关闭 | `boolean` | `false` |
+| `onOk` | 点击确认回调 | `(event: Event) => void` | `-` |
+| `beforeOnOk` | 确认前拦截 | `() => boolean \| Promise<boolean>` | `-` |
+| `onCancel` | 点击取消回调 | `(event: Event) => void` | `-` |
+| `beforeOnCancel` | 取消前拦截 | `() => boolean \| Promise<boolean>` | `-` |
+| `width` | 宽度 | `string \| number` | `360` |
+| `height` | 高度 | `string \| number` | `'auto'` |
+| `top` | 距离顶部位置 | `string \| number` | `0` |
+| `center` | 是否居中 | `boolean` | `true` |
+| `renderTo` | 挂载容器，找不到时回退到 body | `string \| HTMLElement` | `'body'` |
+| `hideCancel` | 是否隐藏取消按钮 | `boolean` | `false` |
+| `hideOk` | 是否隐藏确认按钮 | `boolean` | `false` |
+| `closable` | 是否显示右上角关闭按钮 | `boolean` | `true` |
+| `popupClass` | 弹层自定义类名 | `string` | `-` |
+
+
+### 返回值
+
+| 方法 | 说明 | 参数 |
+| --- | --- | --- |
+| `close()` | 关闭当前消息框 | `-` |
+| `update(options)` | 更新当前消息框配置 | `Partial<MessageBoxOptions>` |
+
+
+### 链式回调
+
+| 方法 | 说明 | 参数 |
+| --- | --- | --- |
+| `ok(callback)` | 注册确认回调 | `() => void` |
+| `ok(before, callback)` | 注册确认前拦截与确认回调 | `() => boolean \| Promise<boolean>, () => void` |
+| `cancel(callback)` | 注册取消回调 | `() => void` |
+| `cancel(before, callback)` | 注册取消前拦截与取消回调 | `() => boolean \| Promise<boolean>, () => void` |
+
+
+
+返回 [AI 索引](../index.md)。先查本页与 [本地 API](./message-box-api.md)；需要更深类型时查 [公开组件导航](../catalog.md)，不默认上网查找本包用法。

package/AI_USAGE/components/message.md

@@ -1,12 +1,14 @@
 <!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
 # Message AI 使用
 
-适用版本：x-next@1.13.0；来源指纹：`18e9b8eefa53b4bd91134fb4486778509ccf3a8d614a1bd387a6d469b623ddcf`。
+适用版本：x-next@1.15.0；来源指纹：`47ea153587c8d0b3bf318977b10bde9f8dd4acff90c5818541ba6513252ad362`。
 
-先读 [通用接入](../core.md)。公开导出：`Message, MessageComponent`；模型：无；已核对事件：未在精选映射登记事件；其他 API 见下方用法。
+先读 [通用接入](../core.md)。公开导出：`Message, MessageComponent`；主要模型：无。完整 Props、Events、Slots、实例方法与服务签名见 [本地 API](./message-api.md)，包含本组件族全部子组件和别名。
 
 按需样式：`x-next/style/message`（包含 base.css、message.css）。代码块未单独引样式时在应用入口加载全量样式，或按实际所有组件加载 JS 入口；不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
 
+## 已核验行为与示例
+
 [组件文档与 live demo](https://x-next.yjmf.com/components/message)。`Message(options)` 或 `.success()` / `.error()` / `.loading()` 等显示提示。服务默认 `type='info'`、`duration=3000` 毫秒、`position='top'`、`showClose=false`；`duration=0` 持续显示，内容用 `message` 或 `content`。根入口的 `MessageComponent` 是模板组件，默认 `type='success'`，不要把服务默认值套给组件；需要统一效果时显式传 `type`。
 
 返回句柄只有 `close()`；同一容器和位置下再次传相同 `id` 更新消息，没有句柄 `update()`。`onClose(id?)` 在自动或手动关闭时触发；自定义内容可用 VNode / 渲染函数。页面只清理自己持有的句柄。
@@ -33,4 +35,230 @@ onBeforeUnmount(() => handle?.close());
 </template>
 ```
 
-返回 [AI 索引](../index.md)。精选示例不是完整 API 表，新能力先查同版本公开类型与组件文档。
+## 场景用法
+
+以下示例从本地 `src/docs/components/message.md` 显式导入到独立 AI 源，补齐局部注册、状态和样式后进行严格模板检查。上方已核验行为优先；原始 prop 默认值、包装透传和示例业务适配分别查 [完整 API](./message-api.md) 与场景说明。类型通过不代表所有散文和交互已验证。
+
+### 用途与选型
+
+用于轻量级即时反馈，通常由命令式方法触发。
+
+
+### 基础用法
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Space, Button } from 'x-next';
+import { Message } from 'x-next';
+
+const showBasicMessage = () => Message.success('保存成功');
+const showInfoMessage = () => Message.info('这是一条信息提示');
+</script>
+<template>
+<Space>
+    <Button type="primary" @click="showBasicMessage">成功提示</Button>
+    <Button @click="showInfoMessage">信息提示</Button>
+  </Space>
+</template>
+```
+
+### 消息类型
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Button } from 'x-next';
+import { Message } from 'x-next';
+type IMessageType = 'success' | 'info' | 'warning' | 'error' | 'loading' | 'strong' | 'normal';
+
+const showTypedMessage = (type: IMessageType) => {
+  Message[type]({
+    message: `${type} message`,
+    duration: type === 'loading' ? 0 : 3000,
+    showClose: type === 'loading',
+  });
+};
+</script>
+<template>
+<div class="demo-inline-group">
+    <Button @click="showTypedMessage('info')">Info</Button>
+    <Button status="success" @click="showTypedMessage('success')">Success</Button>
+    <Button status="warning" @click="showTypedMessage('warning')">Warning</Button>
+    <Button status="danger" @click="showTypedMessage('error')">Error</Button>
+    <Button status="strong" @click="showTypedMessage('strong')">Strong</Button>
+    <Button @click="showTypedMessage('normal')">Normal</Button>
+    <Button type="primary" @click="showTypedMessage('loading')">Loading</Button>
+  </div>
+</template>
+```
+
+### 可关闭和手动关闭
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Space, Button } from 'x-next';
+import { Message } from 'x-next';
+
+const showCloseableMessage = () => {
+  Message.info({
+    message: '点击右侧按钮关闭',
+    showClose: true,
+    duration: 0,
+  });
+};
+
+const showManualMessage = () => {
+  const handler = Message.loading({
+    message: '2 秒后手动关闭',
+    duration: 0,
+  });
+  window.setTimeout(() => handler.close(), 2000);
+};
+</script>
+<template>
+<Space>
+    <Button @click="showCloseableMessage">可关闭</Button>
+    <Button @click="showManualMessage">手动关闭</Button>
+  </Space>
+</template>
+```
+
+### 更新内容
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Space, Button } from 'x-next';
+import { ref } from 'vue';
+import { Message } from 'x-next';
+
+const count = ref(1);
+
+const showUpdatedMessage = () => {
+  Message.info({
+    id: 'message-update-demo',
+    message: `当前进度 ${count.value++}`,
+    duration: 3000,
+    showClose: true,
+  });
+};
+
+const clearMessages = () => Message.clear();
+</script>
+<template>
+<Space>
+    <Button type="primary" @click="showUpdatedMessage">更新同一条消息</Button>
+    <Button @click="clearMessages">清空消息</Button>
+  </Space>
+</template>
+```
+
+### 位置和悬停
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Space, Button } from 'x-next';
+import { Message } from 'x-next';
+
+const showTopMessage = () => Message.info({ message: '顶部提示', position: 'top' });
+const showBottomMessage = () => Message.success({ message: '底部提示', position: 'bottom' });
+const showHoverMessage = () => {
+  Message.warning({
+    message: '鼠标移入时暂停自动关闭',
+    resetOnHover: true,
+    duration: 4000,
+  });
+};
+</script>
+<template>
+<Space>
+    <Button @click="showTopMessage">顶部</Button>
+    <Button @click="showBottomMessage">底部</Button>
+    <Button @click="showHoverMessage">悬停暂停</Button>
+  </Space>
+</template>
+```
+
+### 自定义内容
+
+`useHTML` 会直接渲染 HTML 字符串。只应传入可信内容，用户输入或后端返回内容需要先自行消毒。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Space, Button } from 'x-next';
+import { h } from 'vue';
+import { Message } from 'x-next';
+
+const showCustomIconMessage = () => {
+  Message.info({
+    message: '自定义图标提示',
+    icon: () => h('span', { style: 'color: #ff7125;' }, '★'),
+  });
+};
+
+const showHtmlMessage = () => {
+  Message.warning({
+    message: '<strong>仅用于可信 HTML</strong>',
+    useHTML: true,
+    showClose: true,
+  });
+};
+</script>
+<template>
+<Space>
+    <Button @click="showCustomIconMessage">自定义图标</Button>
+    <Button @click="showHtmlMessage">HTML 内容</Button>
+  </Space>
+</template>
+```
+
+### 局部容器
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Button } from 'x-next';
+import { Message } from 'x-next';
+
+const showContainerMessage = () => {
+  Message.success({
+    message: '局部容器中的提示',
+    renderTo: '#message-local-container',
+  });
+};
+</script>
+<template>
+<Button @click="showContainerMessage">显示到局部容器</Button>
+  <div id="message-local-container" class="message-local-container"></div>
+</template>
+```
+
+### IMessageOptions
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `id` | 提示唯一标识，相同 id 会更新已有消息 | `string \| number` | `-` |
+| `message` | 提示内容 | `string \| number \| VNode \| RenderFunction` | `-` |
+| `content` | `message` 的别名 | `string \| number \| VNode \| RenderFunction` | `-` |
+| `type` | 提示类型 | `'success' \| 'warning' \| 'error' \| 'strong' \| 'info' \| 'loading' \| 'normal'` | `'info'` |
+| `duration` | 自动关闭时间，单位毫秒，`0` 表示不自动关闭 | `number` | `3000` |
+| `center` | 内容是否居中 | `boolean` | `false` |
+| `onClose` | 关闭回调 | `(id?: string \| number) => void` | `-` |
+| `offset` | 与容器顶部或底部的初始偏移 | `number` | `20` |
+| `renderTo` | 挂载容器 | `string \| HTMLElement` | `'body'` |
+| `showClose` | 是否显示关闭按钮 | `boolean` | `false` |
+| `closable` | `showClose` 的别名 | `boolean` | `false` |
+| `showIcon` | 是否显示图标 | `boolean` | `type !== 'normal'` |
+| `icon` | 自定义图标 | `RenderFunction` | `-` |
+| `useHTML` | 是否按 HTML 渲染字符串内容 | `boolean` | `false` |
+| `popupClass` | 自定义类名 | `string` | `-` |
+| `position` | 展示位置 | `'top' \| 'bottom'` | `'top'` |
+| `resetOnHover` | 鼠标悬停时暂停自动关闭 | `boolean` | `false` |
+
+
+
+返回 [AI 索引](../index.md)。先查本页与 [本地 API](./message-api.md)；需要更深类型时查 [公开组件导航](../catalog.md)，不默认上网查找本包用法。

package/AI_USAGE/components/network-api.md

@@ -0,0 +1,91 @@
+<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
+# Network 完整公开 API
+
+适用版本：x-next@1.15.0；来源指纹：`47ea153587c8d0b3bf318977b10bde9f8dd4acff90c5818541ba6513252ad362`。
+
+从同版本构建的公开声明、运行时 props/emits 和显式 expose 生成。运行时导入始终使用 `x-next`，声明路径仅作定位。插槽类型未细化时，具体槽名与作用域见本地用法示例。
+
+## Network API
+
+公开声明：`dist/components/network/index.d.ts`。 类型中的 undefined 表示可省略；原始 prop 默认值不等于继承配置或服务默认值。
+
+### Props
+
+| 名称 | 用途 | 公开类型 | 必填 | 声明默认值 |
+| --- | --- | --- | --- | --- |
+| size | 信号图标尺寸 | undefined &#124; "mini" &#124; "small" &#124; "medium" &#124; "large" | 否 | "medium" |
+| signalStrengthColor | 兼容的 good / poor 颜色 | undefined &#124; [string, string] | 否 | 工厂函数（每个实例初始化；有效值见行为说明） |
+| statusColors | 各状态颜色，优先于兼容颜色 | undefined &#124; { medium?: string &#124; undefined; unknown?: string &#124; undefined; good?: string &#124; undefined; poor?: string &#124; undefined; offline?: string &#124; undefined; } | 否 | {} |
+| status | 受控质量；传入后停止自动检测 | undefined &#124; "medium" &#124; "unknown" &#124; "good" &#124; "poor" &#124; "offline" | 否 | 未声明 |
+| ping | 同源或允许 CORS 的主动探测 URL | undefined &#124; string | 否 | 未声明 |
+| interval | 每次轮询完成后的等待毫秒数；有限正数启用，其他值关闭 | undefined &#124; number | 否 | 未声明 |
+| timeout | 请求及响应体总超时毫秒数；非有限或非正数回退 5000 | undefined &#124; number | 否 | 5000 |
+| showMetrics | 显示延迟和下载估算，无数据时显示占位 | undefined &#124; false &#124; true | 否 | false（Vue Boolean 转换） |
+| showTooltip | 将状态文案写入原生 title | undefined &#124; false &#124; true | 否 | false |
+| ariaLabel | 自定义无障碍名称 | undefined &#124; string | 否 | 未声明 |
+| ariaLive | 状态变化播报策略 | undefined &#124; "off" &#124; "polite" &#124; "assertive" | 否 | "polite" |
+
+### Events
+
+| 事件 | 用途 | 监听器签名（即事件参数） |
+| --- | --- | --- |
+| change | 自动模式首次检测和语义字段变化；受控模式手动 refresh 每次触发 | undefined &#124; (status: NetworkStatus) => any |
+| online | 自动模式从浏览器离线恢复 | undefined &#124; (status: NetworkStatus) => any |
+| offline | 自动模式从非离线进入浏览器离线 | undefined &#124; (status: NetworkStatus) => any |
+| probe | 当前有效轮次主动探测完成（成功、失败、超时均含）；被状态变化或卸载取消的旧轮次不发 | undefined &#124; (status: NetworkStatus) => any |
+
+### Slots
+
+| 名称 | 用途 | 公开类型 |
+| --- | --- | --- |
+| default | 完全自定义展示，替换默认图标和指标 | (args_0: NetworkSlotProps) => VNode[] |
+
+### 实例方法 / 暴露值
+
+| 名称 | 公开类型 |
+| --- | --- |
+| refresh | () => Promise<NetworkStatus> |
+
+### 关联类型定义
+
+以下摘自本组件族声明，供查阅嵌套配置；运行时和值类型均以根入口可导出项为准。
+
+```typescript-reference
+type NetworkQuality = 'unknown' | 'good' | 'medium' | 'poor' | 'offline';
+
+type NetworkStatusSource = 'navigator' | 'connection' | 'probe' | 'manual';
+
+type NetworkStatusReason = 'initial' | 'browser-offline' | 'connection-change' | 'probe-timeout' | 'probe-error' | 'http-error' | 'unsupported';
+
+interface NetworkStatus {
+    online: boolean;
+    quality: NetworkQuality;
+    latency?: number;
+    downloadSpeed?: number;
+    speedSource?: 'probe';
+    downlink?: number;
+    rtt?: number;
+    effectiveType?: string;
+    source: NetworkStatusSource;
+    reason?: NetworkStatusReason;
+    lastCheckedAt: number;
+}
+
+type NetworkEventListenerCallback = (status: NetworkStatus) => void;
+
+type NetworkOptions = {
+    interval?: number;
+    ping?: `https://${string}` | `http://${string}` | string;
+    timeout?: number;
+};
+
+type NetworkSize = 'mini' | 'small' | 'medium' | 'large';
+
+interface NetworkSlotProps extends Pick<NetworkStatus, 'quality' | 'online' | 'latency' | 'downloadSpeed' | 'speedSource' | 'source' | 'reason'> {
+    status: NetworkStatus;
+    refresh: () => Promise<NetworkStatus>;
+}
+```
+
+
+返回 [Network 用法](./network.md)。