# @canton-network/core-wallet-ui-components 中文文档

规范地址：https://npmcn.com/package/%40canton-network/core-wallet-ui-components/

版本：1\.19\.0
npm 元数据更新时间：2026-11-05T21:17:13.774Z
中文译文更新时间：2026-11-09T01:28:47.820Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40canton-network/core-wallet-ui-components
原文对照：https://npmcn.com/package/%40canton-network/core-wallet-ui-components/?lang=original
项目主页：https://github.com/canton-network/wallet/tree/main/core/wallet-ui-components#readme
源码仓库：https://github.com/canton-network/wallet

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

- 包体积（解压后）：5.5 MB，183 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：9 个
- peer 依赖：react ^19\.3\.1，react-dom ^19\.3\.1，@mui/material ^9\.5\.0，@mui/icons-material ^9\.5\.0
- 首次发布：2025-08-28T19:22:00.071Z
- 最新版本发布：2026-11-05T21:17:13.303Z
- 近 30 天下载量：23527（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：78（近 12 个月 64 个）

## 中文简介

用于 Splice 钱包的 UI 组件

## 安装

```sh
npm install @canton-network/core-wallet-ui-components
```

也可以使用：`pnpm add @canton-network/core-wallet-ui-components`、`yarn add @canton-network/core-wallet-ui-components`、`bun add @canton-network/core-wallet-ui-components`

## README

# 钱包 UI 组件

这个工作空间包含钱包网关的 UI 组件, 用 [Web 组件](https://www.webcomponents.org/introduction)。 。 。 .

## 概览

这个软件包为钱包相关网络应用程序提供了一套模块化的UI组件和公用设施.

[组件](https://npmcn.com/package/%40canton-network/core-wallet-ui-components/src/components/):包含可重复使用的可跨不同钱包UI的网页组件(如信头,版式,和窗体等). 这些组件的设计具有灵活性和可调和性.

[窗口](https://npmcn.com/package/%40canton-network/core-wallet-ui-components/src/windows/):提供基于窗口的预定义功能,例如钱包发现对话框. 这些通常被SDK等更高级的软件包用于执行需要弹出或模式交互的用户流.

[主题](https://npmcn.com/package/%40canton-network/core-wallet-ui-components/src/themes/): 包括默认主题(CSS自定义属性和样式),以确保所有组件和窗口的外观和感觉一致. 这一主题可根据需要加以扩展或推翻.

这个软件包结合在一起,可以快速地开发钱包UI,具有一致的用户经验和共享的逻辑.

## 安装

此软件包需要 [节点JS](https://nodejs.org/) v16 或更高, 可使用 :

```sh
npm install @canton-network/core-wallet-ui-components --save
```

或者说

```sh
pnpm add @canton-network/core-wallet-ui-components
```

## 运行

要构建软件包, 请运行 :

```sh
pnpm build
```

要启动本地网络开发服务器进行互动测试和开发,请运行:

```sh
pnpm dev
```

## 使用量

构建钱包 UI 的主要入口是: `AppLayout` 组件. 这个 `AppLayout` 提供一致的页面结构(例如封装 `AppHeader`,并自动包括 [诱饵](https://getbootstrap.com/) CSS 框架和 [默认主题](https://npmcn.com/package/%40canton-network/core-wallet-ui-components/themes/default.css) 为了一个统一的外观和感觉.

基本用途:

```html
  <body>
      <app-layout>
          <you-component></your-component>
      </app-layout>
  </body>
```

您也可以通过指定自定义图标或样式表来自定义布局 :

```html
  <app-layout iconSrc="images/icon.png" themeSrc="css/custom.css">
      <you-component></your-component>
  </app-layout>
```

-   `iconSrc`: 页眉中显示的自定义图标的路径.
-   `themeSrc`: 用于自定义主题的替代 CSS 文件的路径 .

这种方法允许您快速地将钱包 UI 配置为一致的结构和外观,同时仍然支持根据需要定制.

## 他们

部件从 CSS 自定义属性取出颜色、字体、间距和弧度,分为两层(见 [`themes/default.css`](https://npmcn.com/package/%40canton-network/core-wallet-ui-components/themes/default.css):

-   `--wg-theme-*` 是基准符号,例如 `--wg-theme-accent-color` 财务报告和审定财务报表 `--wg-theme-text-rgb`覆盖它们 `:root` 或任何祖先的元素。 它们通过阴影根来继承,因此它们也到达了被嵌入到其他组件内部的组件.
-   `--wg-*` 是所使用的组件的别名。 组件宣布它们 `:host`,所以不要从一页中覆盖这些:设置基准符号.

用作颜色 `rgba(var(--x), alpha)` 有个 `-rgb` 符号 `r, g, b` (单位:千美元)`--wg-theme-accent-rgb`, (中文(简体) ), `--wg-theme-primary-rgb`, (中文(简体) ), `--wg-theme-text-rgb` (见A/CN.9/WG.III/WP.III/WP.1号文件)。 当您改变这种颜色时, 设置两者. `--wg-theme-shade-rgb` 是微弱线和边框的颜色.

新组件样式应使用 `--wg-*` 符号而非字面颜色,这样一页就可以主题化它们.

## 常见问题

### @canton-network/core-wallet-ui-components 是什么？

用于 Splice 钱包的 UI 组件

### 如何安装 @canton-network/core-wallet-ui-components？

在项目目录运行 npm install @canton-network/core-wallet-ui-components，或使用 pnpm add / yarn add / bun add。

### @canton-network/core-wallet-ui-components 支持 TypeScript 吗？

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

### @canton-network/core-wallet-ui-components 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @canton-network/core-wallet-ui-components 可以商用吗？

@canton-network/core-wallet-ui-components 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @canton-network/core-wallet-ui-components 的下载量有多少？

根据 npm 官方下载统计，@canton-network/core-wallet-ui-components 在 2026/10/09 – 2026/11/07 这 30 天内被下载 23,527 次，日均约 784 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @canton-network/core-wallet-ui-components 还在维护吗？

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