# @channel\.io/app-sdk-wam-ui 中文文档

规范地址：https://npmcn.com/package/%40channel.io/app-sdk-wam-ui/

版本：0\.4\.1
npm 元数据更新时间：2026-07-27T08:29:34.113Z
中文译文更新时间：2026-11-09T10:22:36.435Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40channel.io/app-sdk-wam-ui
原文对照：https://npmcn.com/package/%40channel.io/app-sdk-wam-ui/?lang=original
项目主页：https://github.com/channel-io/app-sdk#readme
源码仓库：https://github.com/channel-io/app-sdk

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：58.6 kB，51 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@channel\.io/bezier-icons \>=0\.60\.0 \<1\.0\.0，@channel\.io/bezier-react \>=4\.0\.0-next\.14 \<5\.0\.0，react \>=17\.0\.0，styled-components \>=6\.0\.0
- 首次发布：2026-03-31T16:15:40.138Z
- 最新版本发布：2026-07-27T08:29:33.869Z
- 近 30 天下载量：52852（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 6 个）

## 中文简介

WAM特定UI基础设施和Channel.io apps的Bezier预设

## 安装

```sh
npm install @channel.io/app-sdk-wam-ui
```

也可以使用：`pnpm add @channel.io/app-sdk-wam-ui`、`yarn add @channel.io/app-sdk-wam-ui`、`bun add @channel.io/app-sdk-wam-ui`

## README

# @channel.io/app-sdk-wam-ui (英语)

WAM特有UI基础设施及Channel.io apps预设.

使用这个软件包来进行WAM运行时的行为,例如主题检测,iframe高度同步, 导航,和常见的全页状态。 直接从 重新设计了Bezier子路径.

## 安装

```bash
npm install @channel.io/app-sdk-wam-ui
npm install react @channel.io/bezier-react@4.0.0-next.14 @channel.io/bezier-icons@0.60.0 styled-components@^6
```

Bezier React 4 仍为预放出. 键 `4.0.0-next.14` 在应用程序锁文件中审查 升级前发布注释.

## 快开始

```tsx
import { SendIcon } from "@channel.io/bezier-icons";
import { Button, HStack } from "@channel.io/bezier-react/beta";
import {
  HeightSynchronizer,
  InlineBanner,
  WamHeader,
  WamThemeProvider,
} from "@channel.io/app-sdk-wam-ui";

export function App() {
  return (
    <WamThemeProvider>
      <HeightSynchronizer maxHeight={480}>
        <WamHeader title="Example" />
        <HStack spacing={8} padding={16}>
          <Button label="Send" leadingContent={SendIcon} variant="filled" semantic="primary" />
        </HStack>
        <InlineBanner variant="info" content="Ready to send." />
      </HeightSynchronizer>
    </WamThemeProvider>
  );
}
```

## 贝塞尔用法

新的 WAM 接口应导入重新设计的组件 `@channel.io/bezier-react/beta`数字 :

```tsx
import {
  Banner,
  Button,
  ConfirmModal,
  FormField,
  Search,
  Select,
  SettingsField,
  Switch,
  TextInput,
} from "@channel.io/bezier-react/beta";
```

不由β子路径输出的提供方和稳定的指使API仍然可用 `@channel.io/bezier-react`。从 `/beta` 并使用当前符号 API.

## 构成部分

### `WamThemeProvider`

用贝泽尔的包装 WAM `AppProvider` 并重新设计 `ToastProvider`它探测出光线或 黑暗的外观来自 WAM 运行时间, 或者接受一个明确的覆盖 .

```tsx
<WamThemeProvider>
  <MyWam />
</WamThemeProvider>
```

### `HeightSynchronizer`

观察内容变化并同步当前iframe高度通过主机桥.

```tsx
<HeightSynchronizer maxHeight={600}>
  <MyContent />
</HeightSynchronizer>
```

使用 `excludePaths` 与 `pathname` 当一个路径管理自己的大小.

### `WamHeader`

提供WAM的回放和与Bezierβ图标按钮的相近行为. 通过 WAM SDK 导航和 当周围的应用程序控制了这些动作时,关闭回调.

```tsx
<WamHeader title="Settings" showBackButton />
```

### `LoadingPage`, (中文(简体) ), `ErrorPage`,以及 `EmptyState`

对小型WAM表面的一致整页状态.

```tsx
if (loading) return <LoadingPage message="Loading data..." />;
if (error) return <ErrorPage error={error} onRetry={refetch} />;
return <EmptyState title="No results" description="Try a different search." />;
```

### `InlineBanner`

语义上的成功、错误或信息预设在 Bezier β 上 `Banner`。 。 。 .

```tsx
<InlineBanner variant="success" content="Saved successfully." />
```

### `ConfirmDialog`

一个紧凑的确认预设在 Bezier β 之上 `ConfirmModal`。 。 。 .

```tsx
<ConfirmDialog
  show={open}
  onHide={() => setOpen(false)}
  title="Delete this item?"
  description="This action cannot be undone."
  destructive
  confirmText="Delete"
  onConfirm={handleDelete}
/>
```

### `SkeletonBox`, (中文(简体) ), `SkeletonCircle`,以及 `BottomSheet`

面向WAM的加载占位符和没有直接贝塞尔的紧凑上覆布局 等同的贝他. 给每个 `BottomSheet` a 一个 `ariaLabel`;它管理焦点、逃逸和滚动 打开时锁定 .

## 实例

-   [类型脚本教程](https://github.com/channel-io/app-tutorial-ts)
-   [去辅导](https://github.com/channel-io/app-tutorial)

两个教程都使用 WAM 显示回放 `@channel.io/app-sdk-wam` 和这个包并列 语言专用应用程序服务器.

## 同伴依赖关系

| 软件包 | 版本 |
| --- | --- |
| `react` | 时间:17.0.0 |
| `@channel.io/bezier-react` | \>= 4.0.0-后14 < 5.0.0 |
| `@channel.io/bezier-icons` | \>=0.60.0 < 1.0.0 |
| `styled-components` | 页:1 |

仍在使用 Bezier 3 的应用软件应该继续使用 `@channel.io/app-sdk-wam-ui` 0.2.x. (中文(简体) ).

## 许可证

麻省理工学院

## 常见问题

### @channel\.io/app-sdk-wam-ui 是什么？

WAM特定UI基础设施和Channel\.io apps的Bezier预设

### 如何安装 @channel\.io/app-sdk-wam-ui？

在项目目录运行 npm install @channel\.io/app-sdk-wam-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@channel\.io/bezier-icons（\>=0\.60\.0 \<1\.0\.0）、@channel\.io/bezier-react（\>=4\.0\.0-next\.14 \<5\.0\.0）、react（\>=17\.0\.0）、styled-components（\>=6\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @channel\.io/app-sdk-wam-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @channel\.io/app-sdk-wam-ui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @channel\.io/app-sdk-wam-ui 可以商用吗？

@channel\.io/app-sdk-wam-ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @channel\.io/app-sdk-wam-ui 的下载量有多少？

根据 npm 官方下载统计，@channel\.io/app-sdk-wam-ui 在 2026/10/10 – 2026/11/08 这 30 天内被下载 52,852 次，日均约 1,762 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @channel\.io/app-sdk-wam-ui 还在维护吗？

最新版本 0\.4\.1 发布于 2026/07/27（3 个月前）；至今共发布 6 个版本，其中过去 12 个月发布了 6 个；首次发布于 2026/04/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。