# @design-factory/design-factory 中文文档 规范地址：https://npmcn.com/package/%40design-factory/design-factory/ 版本：22\.1\.0 npm 元数据更新时间：2026-11-05T15:22:10.227Z 中文译文更新时间：2026-11-12T01:02:04.383Z 软件包许可：BSD-3-Clause 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40design-factory/design-factory 原文对照：https://npmcn.com/package/%40design-factory/design-factory/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.8 MB，755 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：@angular/core ^22\.0\.0，@angular/common ^22\.0\.0，@angular/router ^22\.0\.0，ag-grid-angular ^35\.0\.0，@angular/localize ^22\.0\.0，ag-grid-community ^35\.0\.0，@angular-devkit/core ^22\.0\.0，@ng-select/ng-select ^23\.0\.0，@design-factory/styles 22\.1\.0，@ng-bootstrap/ng-bootstrap ~21\.0\.0，@agnos-ui/angular-bootstrap ~0\.11\.0 - 首次发布：2023-10-19T21:33:00.841Z - 最新版本发布：2026-11-05T15:22:10.045Z - 近 30 天下载量：9465（2026-10-12 至 2026-11-10，npm 官方下载统计） - 已发布版本数：54（近 12 个月 18 个） ## 中文简介 Amadeus设计系统 ## 安装 ```sh npm install @design-factory/design-factory ``` 也可以使用：`pnpm add @design-factory/design-factory`、`yarn add @design-factory/design-factory`、`bun add @design-factory/design-factory` ## README # Amadeus设计厂 ## 说明 设计厂(Design Factory)是一种由: - 基于我们四个支柱的Amadeus外部和内部接口及应用程序的UI库 - 一套设计和编码最佳做法 - 来自所有阿玛德乌斯商业单位的跨功能社区 如果你想了解更多关于设计厂的信息,请联系 [设计厂小组](mailto:DesignFactory@amadeus.com)。 。 。 . ## 开始 你可以轻松地在你的项目中添加设计厂图书馆,感谢我们的图表. 运行如下: ```bash ng add @design-factory/design-factory ``` 它会为您 angular.json 指定的默认应用程序安装设计厂 。 如果您有多个工程并且想要针对特定应用程序, 您可以指定项目选项 ```bash ng add @design-factory/design-factory --project myProject ``` ## 建筑 设计厂由多个项目组成,您可以安装符合您要求的软件包. - `@design-factory/tokens` 包括增强设计系统能力的设计托肯斯 - `@design-factory/styles` 包括各种风格,包括公用事业和组件风格 - `@design-factory/design-factory` 包括角构件和公用事业。 他们将被迁移到下面的软件包 - `@design-factory/angular` 包含新的 SideNav , 并会增长到包含所有设计厂角构件 ### CSS 命名空间特性 在某些特定情况下,您可能必须使用 CSS 命名空间特性,该特性只允许您在 $df-cs-namespace-selector 变量定义的选择器下应用 DF 样式(默认为 =.deign-factory-v2 ==). 为使用此特性, 请导入以下内容 : ```scss @import '@design-factory/styles/scss/namespace'; ``` 在样式.scs中,并在要应用 DF 样式的 HTML 元素中添加定义的选择器. ## 依赖关系 依赖性是 [角质](https://angular.io/), (中文(简体) ), [靴子陷阱 5](https://getbootstrap.com/), (中文(简体) ), [恩博托丝](https://ng-bootstrap.github.io/), (中文(简体) ), [阿格诺斯UI](https://www.agnosui.dev/), (中文(简体) ), [Ng 选择](https://ng-select.github.io/ng-select#/data-sources), (中文(简体) ), [阿格格丽德](https://www.ag-grid.com/) 财务报告和审定财务报表 [ngx-滑动器](https://angular-slider.github.io/ngx-slider/)。 。 。 . 支持的版本有: | 设计厂 | 角质 | 鞋带CSS | 恩-波茨图 | Ng 选择 | 阿格格丽德 | ngx-滑动器 | 阿格诺斯UI | | --- | --- | --- | --- | --- | --- | --- | --- | | 9.x.x (英语) | 11.0.0 国家 | 4.5.0 (中文(简体) ) | 9.1.0 (中文(简体) ) | 5.0.14 (中文(简体) ) | | 2.0.3 联合国 | | | 10.x.x (英语) | 12.0.0 (单位:千美元) | 4.5.3 信息技术 | 10.0.0 (中文(简体) ) | 7.2.0 联合国 | | 2.0.3 联合国 | | | 11.x.x (中文(简体) ) | 13.2.0 (中文(简体) ) | 4.5.3 信息技术 | 11.0.0 国家 | 8.1.1 国家 | | 2.0.3 联合国 | | | 12.x.x (中文(简体) ) | 13.2.0 (中文(简体) ) | 5.1.3 (中文(简体) ) | 12.1.2 国家 | 8.1.1 国家 | 27.3.0 (单位:千美元) | 2.0.3 联合国 | | | 13.x.x (英语) | 14.1.0 联合国 | 5.2.0 (中文(简体) ) | 13.1.0 (中文(简体) ) | 9.0.2 (韩语) | 27.3.0 (单位:千美元) | 2.0.4 国家 | | | 14.x.x (英语) | 第15.1.0号决定 | 5.2.0 (中文(简体) ) | 14.0.1 (中文(简体) ) | 10.0.3 (中文(简体) ) | 27.3.0 (单位:千美元) | 2.0.4 国家 | | | 15.x.x (英语) | 16.0.0 (单位:千美元) | 5.2.0 (中文(简体) ) | 15.0.0 (单位:千美元) | 11.0.0 国家 | 29.3.5 国家 | | | | 16.x.x (中文(简体) ) | 16.x.x (中文(简体) ) | 5.2.0 (中文(简体) ) | 第15.1.0号决定 | 第11.2.0条 | 30.2.x (中文(简体) ) | | | | 17.0.x (中文(简体) ) | 17.x.x (中文(简体) ) | 5.3.2 国家 | 16.0.x (中文(简体) ) | 12.0.x (中文(简体) ) | 31.0.x (中文(简体) ) | | 0.0.1-α.10 | | 17.1x (韩语) | 17.x.x (中文(简体) ) | 5.3.3 (中文(简体) ) | 16.0.x (中文(简体) ) | 12.0.x (中文(简体) ) | 31.1.x (中文(简体) ) | | 0.2.0 (中文(简体) ) | | 18.0.x (中文(简体) ) | 18.x.x (中文(简体) ) | 5.3.3 (中文(简体) ) | 17.0.x (中文(简体) ) | 13.2.x (韩语) | 31.3.x (中文(简体) ) | | 0.4.x (中文(简体) ) | | 18.1x (中文(简体) ) | 18.x.x (中文(简体) ) | 5.3.3 (中文(简体) ) | 17.0.x (中文(简体) ) | 13.2.x (韩语) | 32.0.x (中文(简体) ) | | 0.4.x (中文(简体) ) | | 19.0.x (中文(简体) ) | 19.x.x (中文(简体) ) | 5.3.3 (中文(简体) ) | 18.0.x (中文(简体) ) | 14.0.x (中文(简体) ) | 32.0.x (中文(简体) ) | | 0.7.x (韩语) | | 19.1x (韩语) | 19.x.x (中文(简体) ) | 5.3.3 (中文(简体) ) | 18.0.x (中文(简体) ) | 14.1.x (单位:千美元) | 32.0.x (中文(简体) ) | | 0.8.x (中文(简体) ) | | 20.0.x (中文(简体) ) | 20.x 电话 | 5.3.7 联合国 | 19.0.x (中文(简体) ) | 15.x || 20.x | 32.x (中文(简体) ) | | 0.9.x (韩语) | | 21.0.x (中文(简体) ) | 21.x (中文(简体) ) | 5.3.8 联合国 | 20.0.x (中文(简体) ) | 21.x (中文(简体) ) | 35.x (中文(简体) ) | | 0.10.x (英语) | | 22.0.x (中文(简体) ) | 22.x 电话 | 5.3.8 联合国 | 21.0.x (中文(简体) ) | 23.x 电话 | 35.x (中文(简体) ) | | 0.11.x (英语) | ## 如何与图标合作 图标是混合 [字体帅呆了](https://fontawesome.com/) (FW)和内部出品相克图. 由于DF 18.0.0发布内部图标和FW图标被分拆成不同的字体. ## 常见问题 ### @design-factory/design-factory 是什么？ Amadeus设计系统 ### 如何安装 @design-factory/design-factory？ 在项目目录运行 npm install @design-factory/design-factory，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^22\.0\.0）、@angular/common（^22\.0\.0）、@angular/router（^22\.0\.0）、@angular/localize（^22\.0\.0）、ag-grid-community（^35\.0\.0）、@angular-devkit/core（^22\.0\.0）、@ng-select/ng-select（^23\.0\.0）、@design-factory/styles（22\.1\.0）、@ng-bootstrap/ng-bootstrap（~21\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @design-factory/design-factory 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @design-factory/design-factory 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @design-factory/design-factory 可以商用吗？ @design-factory/design-factory 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。 ### @design-factory/design-factory 的下载量有多少？ 根据 npm 官方下载统计，@design-factory/design-factory 在 2026/10/12 – 2026/11/10 这 30 天内被下载 9,465 次，日均约 316 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @design-factory/design-factory 还在维护吗？ 最新版本 22\.1\.0 发布于 2026/11/05（6 天前）；至今共发布 54 个版本，其中过去 12 个月发布了 18 个；首次发布于 2023/10/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。