# @alixpartners/ui-components 中文文档

规范地址：https://npmcn.com/package/%40alixpartners/ui-components/

版本：3\.7\.2
npm 元数据更新时间：2026-10-22T13:32:32.233Z
中文译文更新时间：2026-11-06T04:31:38.157Z
软件包许可：SEE LICENSE IN LICENSE\.md

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

原始 npm 页面：https://www.npmjs.com/package/%40alixpartners/ui-components
原文对照：https://npmcn.com/package/%40alixpartners/ui-components/?lang=original
项目主页：https://github.com/Alix-Platforms/ui-kit#readme
源码仓库：https://github.com/Alix-Platforms/ui-kit

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

- 包体积（解压后）：3.4 MB，201 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react ^18\.3\.1 \|\| ^19\.0\.0，react-dom ^18\.3\.1 \|\| ^19\.0\.0
- 首次发布：2019-02-05T13:27:37.271Z
- 最新版本发布：2026-10-22T13:32:31.787Z
- 近 30 天下载量：5152（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：356（近 12 个月 53 个）

## 中文简介

一个可重复使用的 React 组件库 **AlixPartners 设计系统**。 。 。 .

## 安装

```sh
npm install @alixpartners/ui-components
```

也可以使用：`pnpm add @alixpartners/ui-components`、`yarn add @alixpartners/ui-components`、`bun add @alixpartners/ui-components`

## README

# AlixPartners 用户界面组件库

一个可重复使用的 React 组件库 **AlixPartners 设计系统**。 。 。 .

发表于 [`@alixpartners/ui-components`](https://www.npmjs.com/package/@alixpartners/ui-components) 时间npm。 现任少校是: **3.x 运算**。 。 。 .

## 3.x 有什么新情况

-   **反应 19** 支持与React 18.3+ — 消费的应用程序不会被迫升级React
-   **自动发布 npm** 合并到 `main`,带有Slack发布注释
-   **复合符号** ——从Figma地取出打字机作为SCSS混音器(`@mixin ap-*`),应用了全文样式(大小、重量、行高、字母间隔、变换),而不是一次性硬码值
-   **设计符号、图标和插图** 由 Figma 生成 in-repo, 当设计系统改变时自动使用 PR
-   **无害环境管理** 库构建( Vite 6) , 将 CSS 注入捆绑中—— 不导入单独的样式表
-   **故事集 9** 作为讲习班的组成部分
-   中情局 **对反应18和反应19进行单元测试和建造**
-   图标字体船 **仅woff / woff2** (遗产) `.eot` 编号 : `.svg` 格式已删除)

### 版本支持

| 线条 | 状态 |
| --- | --- |
| ưμ㼯a | 目前——生产 |
| v2.x (英语) | 上届 |
| v1.x (韩语) | 仅存遗产(关键修正) |

3.0为 **没有** 向后兼容 1.x. 现有的1.x应用程序可以留在这条线上. 新作应使用3.x.

### 反应支持

同伴依赖接受反应 `^18.3.1 || ^19.0.0`,因此应用程序可以停留在18.3上或移动到19上.

| 反应版本 | 支助 |
| --- | --- |
| 18.3+ (中文(简体) ) | 对 |
| 19.x (中文(简体) ) | 对 |

## 有用链接

| 资源 | 網址 |
| --- | --- |
| 设计系统 | [平台设计系统](https://design-system-documentation-inky.vercel.app/) |
| 故事书 | [apuilibdev.azurewebsites.net 互联网档案馆的存檔,存档日期2013-12-22](https://apuilibdev.azurewebsites.net/?path=/story/components-button--primary) |
| 无 | [@alixpartners/ui-组件](https://www.npmjs.com/package/@alixpartners/ui-components) |
| 图片 | [平台设计系统](https://www.figma.com/design/uKDQ4UPs40MQXxn6CrcqTO/Platforms-Design-System--1.5.0-?node-id=5846-960&p=f&t=DrwiHnZ9ERiVsD9I-0) |
| 偷懒 | [#平台-组件-图书馆](https://alixpartners.enterprise.slack.com/archives/C08SU3C5YPJ) |

* * *

## 安装

```bash
npm install @alixpartners/ui-components
```

如果消费应用程序还没有端点, 则安装端点依赖性 :

```bash
npm install react@^18.3.1 react-dom@^18.3.1
```

反应19同样有效:

```bash
npm install react@^19.0.0 react-dom@^19.0.0
```

`radix-ui` 财务报告和审定财务报表 `notistack` 与软件包相通的船(在构建时间外部粘接,这样他们就可以与同样使用它们的应用程序共享运行时状态). 您不需要单独安装它们, 除非您想要自己的代码的顶级副本 .

样式(包括图标字体和设计-系统符号)被与软件包捆绑. 您不需要单独的 CSS 导入 .

软件包是 **仅限无害环境管理**从无害环境管理/捆绑编码中导入(`import`(没有) `require()`。 。 。 .

## 使用量

```tsx
import { Button } from '@alixpartners/ui-components'

function App() {
  return (
    <Button type="primary" variant="default">
      Click me
    </Button>
  )
}
```

`ToastProvider` (和 `useToast`包装应用程序一次:

```tsx
import { ToastProvider, useToast } from '@alixpartners/ui-components'

function App() {
  return (
    <ToastProvider>
      <Page />
    </ToastProvider>
  )
}
```

## 构成部分

探索故事书中的每个组件,变体,和道具. 公共出口包括:

| 组 | 构成部分 |
| --- | --- |
| 行动 | `Button`, (中文(简体) ), `SplitButton` |
| 投入 | `Input`, (中文(简体) ), `Textarea`, (中文(简体) ), `Checkbox`, (中文(简体) ), `Radio`, (中文(简体) ), `RadioGroup`, (中文(简体) ), `Toggle`, (中文(简体) ), `Search`, (中文(简体) ), `Datepicker`, (中文(简体) ), `Dropdown`, (中文(简体) ), `Creatable`, (中文(简体) ), `TagsFields`, (中文(简体) ), `RichTextEditor` |
| 反馈 | `Banner`, (中文(简体) ), `Toast`, (中文(简体) ), `ToastProvider`, (中文(简体) ), `useToast`, (中文(简体) ), `Tooltip`, (中文(简体) ), `Dialog`, (中文(简体) ), `Spinner`, (中文(简体) ), `Ghost` |
| 导航 | `NavBar`, (中文(简体) ), `CorusHeader`, (中文(简体) ), `Breadcrumb`, (中文(简体) ), `Tab`, (中文(简体) ), `TabNavigation` |
| 文件 | `FilePicker`, (中文(简体) ), `DragAndDrop` |
| 显示 | `Tag`, (中文(简体) ), `Icon`, (中文(简体) ), `Illustration` |

浏览 [主机故事本](https://apuilibdev.azurewebsites.net/?path=/story/components-button--primary),或在当地运行 :

```bash
npm run storybook
```

* * *

## 设计符号

Tokens,图标web-font,和插图都来自此repo内部的Figma(`design-tokens/`) (中文(简体) ). 管道同步设计-系统更改并打开 PR 以对抗 `development`。 。 。 .

原子符号(颜色、相距、大小)成为 `$ap-*` SCSS变量. **复合符号** ——目前打字——改为: `@mixin ap-*` 混合到一个组件可以应用一个完整的文字样式,例如包括 `@include ap-button-md-contained`。 。 。 .

### 登陆 Tokens 工作室导出

UX 从 Figma (Tokens Studio) 导出令牌时 **多个文件** `.zip`),运行 `/sync-design-tokens` 在 Claude 代码或光标中,此重播打开。 附加拉链和设计系统版本(例如. `1.5.0`) (中文(简体) ). 命令将导出打开 `design-tokens/tokens/`,重建 `src/assets/_variables.scss`,损坏的修理 `$ap-*` 消费者反驳,并打开公关反对 `development` 打开 `design-tokens/<version>`。 。 。 .

```text
/sync-design-tokens
/sync-design-tokens 1.5.0
/sync-design-tokens --sync          # also refresh icons/illustrations from Figma
/sync-design-tokens --dry-run       # unpack + rebuild + report; no commit/push/PR
```

拉链必须包含 `$metadata.json` (文件夹 / 多文件导出), 而非单独 `tokens.json`。克劳德桌面不装入回波斜拉命令——使用克劳德代码或光标,或遵循 [`.claude/skills/sync-design-tokens/SKILL.md`](https://npmcn.com/package/%40alixpartners/ui-components/.claude/skills/sync-design-tokens/SKILL.md) 带了拉链.

### 当地再生

```bash
npm run tokens:build    # parse JSON tokens → SCSS (no Figma secrets)
npm run tokens:sync     # fetch from Figma, rebuild font + SCSS + illustrations
npm run tokens:verify   # fail if src/assets/_variables.scss has drifted
```

见 [`design-tokens/README.md`](https://npmcn.com/package/%40alixpartners/ui-components/design-tokens/README.md) 用于输入、输出和惊喜(位置图标代码点、不可复制的字体二进制、打字混合).

* * *

## 构建

```bash
npm run build
```

产出土地 `dist/`。所公布的条目是 `dist/main.js` (ESM),类型在 `dist/main.d.ts`。 。 。 .

### 在另一个项目中使用本地建筑

```bash
# In this repo:
npm link

# In the consuming project:
npm link @alixpartners/ui-components
```

然后从 `@alixpartners/ui-components` 和往常一样.

* * *

## 测试

CI运行单元测试和生产大楼,对 **反应 18.3.1** 财务报告和审定财务报表 **反应 19.1.0**。 。 。 .

```bash
npm run test              # Vitest (unit + Storybook projects)
npm run test:unit         # unit tests only (happy-dom)
npm run test:storybook    # Storybook interaction tests
npm run test:playwright   # Playwright e2e
npm run coverage          # Vitest coverage
```

* * *

## 出版

执行 **没有** 手工出版。 合并为 `main` 发表 `@alixpartners/ui-components` 登记在册.

1.  弹出版本 `package.json`, (中文(简体) ), `package-lock.json`,以及 `CHANGELOG.md` 联 合 国 `development`(中文(简体) )
2.  打开拉取请求 `development` → `main`
3.  公关合并后, [`.pipelines/publish-prod.yml`](https://npmcn.com/package/%40alixpartners/ui-components/.pipelines/publish-prod.yml) 建立图书馆, 运行 `npm publish --access public`移动到 Slack

管道需要秘密变量 `NPM_TOKEN` (npm 自动化令牌,有出版权 `@alixpartners`和 `SLACK_WEBHOOK_URL`。 。 。 .

软件包 : [npmjs.com/package/@alixpartners/ui-组件](https://www.npmjs.com/package/@alixpartners/ui-components)

* * *

## 捐款

见 [捐款额](https://npmcn.com/package/%40alixpartners/ui-components/CONTRIBUTING.md) 过程和组成部分结构。 打开拉动请求对 `development`。 。 。 .

## 常见问题

### @alixpartners/ui-components 是什么？

一个可重复使用的 React 组件库 AlixPartners 设计系统。 。 。 \.

### 如何安装 @alixpartners/ui-components？

在项目目录运行 npm install @alixpartners/ui-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.3\.1 \|\| ^19\.0\.0）、react-dom（^18\.3\.1 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @alixpartners/ui-components 支持 TypeScript 吗？

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

### @alixpartners/ui-components 支持 ESM 还是 CommonJS？

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

### @alixpartners/ui-components 可以商用吗？

@alixpartners/ui-components 使用 SEE LICENSE IN LICENSE\.md 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @alixpartners/ui-components 的下载量有多少？

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

### @alixpartners/ui-components 还在维护吗？

最新版本 3\.7\.2 发布于 2026/10/22（16 天前）；至今共发布 356 个版本，其中过去 12 个月发布了 53 个；首次发布于 2019/02/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。