# @arbor-education/design-system\.components 中文文档

规范地址：https://npmcn.com/package/%40arbor-education/design-system.components/

版本：4\.9\.1
npm 元数据更新时间：2026-11-06T07:13:43.171Z
中文译文更新时间：2026-11-06T13:53:21.135Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：11.3 MB，2293 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：14 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，@types/react \*，@types/react-dom \*
- 首次发布：2025-10-09T14:24:45.280Z
- 最新版本发布：2026-11-06T07:13:42.993Z
- 近 30 天下载量：3653（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：122（近 12 个月 118 个）

## 中文简介

设计系统组件库(婴儿)

## 安装

```sh
npm install @arbor-education/design-system.components
```

也可以使用：`pnpm add @arbor-education/design-system.components`、`yarn add @arbor-education/design-system.components`、`bun add @arbor-education/design-system.components`

## README

# @arbor-education/design-system. 组件

用于Arbor设计系统的React组件库. 组件用TypeScript来建造,用Sass来作风格,在"故事书"中被开发出,并用Vitest来测试. 该图书馆为联合王国各地数百万学生和教育工作者服务——小心处理.

* * *

## 释放

可供安装的设计系统的最新版本是:

[![NPM Version](https://img.shields.io/npm/v/%40arbor-education%2Fdesign-system.components)](https://www.npmjs.com/package/@arbor-education/design-system.components)

* * *

## 故事书

该组件库在"故事书"中被记录并预览.

[![Storybook](https://img.shields.io/badge/Storybook-FF69B4?logo=storybook&logoColor=white)](https://main--6aad454d6baef787355e085a.chromatic.com/)

**制作故事书** (在每次推力上建造) `main`: [https://main--6aad454d6baef787355e085a.chromatic.com/ (中文(中国大陆) )](https://main--6aad454d6baef787355e085a.chromatic.com/)

**每分钟 故事书预览**:每个拉出请求都会自动触发一个色素构建. 一旦完成,一个bot会评论你的PR,同时链接到故事本预览和该分支的Chromatic视觉diff.

* * *

在端口6006启动开发服务器:

```bash
yarn storybook
```

要运行的故事测试:

```bash
yarn test:storybook
```

* * *

## 正在完成软件包

如果你要把图书馆整合到一个消费项目中,请查看"聚合"指南:

[完成国家防范机制设计系统](https://orchard.atlassian.net/wiki/spaces/SATD/pages/2500591662/Consuming+the+design+system+NPM+package)

* * *

## 本地设置

### 先决条件

-   [数字](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) 用于节点版本管理
-   [线条](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable) 软件包管理

### 步骤

```bash
nvm use
yarn install
yarn storybook
```

故事书将在您的浏览器中构建并打开, 热重装可开发 .

* * *

## 图标

### 发展

| 命令 | 说明 |
| --- | --- |
| `yarn storybook` | 在端口启动 Storybook dev 服务器 6006 |
| `yarn watch` | 监视模式——在变化中重建并推向雅尔克消费者 |

### 大楼

| 命令 | 说明 |
| --- | --- |
| `yarn build` | 全面生产建设 (TypeScript + tsc-alias + Sass) |
| `yarn tsc` | 只有脚本编译类型 |
| `yarn check-types` | 类型检查而不排放文件 |

### 测试

| 命令 | 说明 |
| --- | --- |
| `yarn test` | 以监视模式运行维特 |
| `yarn test:coverage` | 使用覆盖报告进行测试 |

### 线性

| 命令 | 说明 |
| --- | --- |
| `yarn style-lint` | 有样式的 Lint SCSS 文件 |

> ESLint在已上演的TypeScript文件上通过git承诺上的lint-staged自动运行.

* * *

## 创建新组件

使用脚手架脚本生成新组件所需的全部文件 :

```bash
yarn create-component <ComponentName>
```

这创造了 `Component.tsx`, (中文(简体) ), `Component.test.tsx`, (中文(简体) ), `Component.stories.tsx`,以及 `component.scss`,并自动添加导出到 `src/index.ts` 财务报告和审定财务报表 `src/index.scss`。 。 。 .

* * *

## 具有消费项目的地方发展

此库使用 [雅尔克语](https://github.com/wclr/yalc) 用于本地链接.

**第一次设置** 在全球安装Yalc:

```bash
npm i yalc -g
```

**将图书馆连接到一个消费者项目:**

```bash
# In this repo — build and publish to the local Yalc store
yarn build
yalc publish

# In the consumer project — add the local package
yalc add @arbor-education/design-system.components
```

**以热更新进行积极开发**中,使用监视模式代替:

```bash
# In this repo — automatically rebuilds and pushes to Yalc on file changes
yarn watch
```

* * *

## 版本管理

此库使用 [更改](https://github.com/changesets/changesets) 用于版本和更改日志生成.

如果您的更改会影响公共 API( 新组件, 更改道具, 删除导出), 在打开您的 PR 之前创建一个更改器 :

```bash
yarn changeset
```

* * *

## 捐款

在打开公关前,请阅读 [捐款额](https://npmcn.com/package/%40arbor-education/design-system.components/CONTRIBUTING.md)。要点:

-   一个公关,一个事情——如果标题需要"和"或"还有",就把它分开
-   将有意义的代码 diff 保留在400行以下
-   所有测试都必须通过(`yarn test:coverage`(中文(简体) )
-   所有类型检查都必须通过( A)`yarn check-types`(中文(简体) )
-   使用 PR 模板—— 填写每个部分

## 常见问题

### @arbor-education/design-system\.components 是什么？

设计系统组件库\(婴儿\)

### 如何安装 @arbor-education/design-system\.components？

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

### @arbor-education/design-system\.components 支持 TypeScript 吗？

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

### @arbor-education/design-system\.components 支持 ESM 还是 CommonJS？

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

### @arbor-education/design-system\.components 可以商用吗？

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

### @arbor-education/design-system\.components 的下载量有多少？

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

### @arbor-education/design-system\.components 还在维护吗？

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