# @ama-pt/agora-design-system 中文文档

规范地址：https://npmcn.com/package/%40ama-pt/agora-design-system/

版本：4\.0\.3
npm 元数据更新时间：2026-10-22T16:11:58.001Z
中文译文更新时间：2026-11-06T08:05:17.668Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40ama-pt/agora-design-system
原文对照：https://npmcn.com/package/%40ama-pt/agora-design-system/?lang=original
源码仓库：https://gitlab.devops.ama.lan/design-system/agora-design-system

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

- 包体积（解压后）：9.9 MB，1643 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，tailwindcss ^4\.3\.0，@types/react ^19\.0\.12，@types/react-dom ^19\.0\.4
- 首次发布：2023-02-17T10:10:55.248Z
- 最新版本发布：2026-10-22T16:11:57.771Z
- 近 30 天下载量：3991（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：96（近 12 个月 17 个）

## 中文简介

设计系统

## 安装

```sh
npm install @ama-pt/agora-design-system
```

也可以使用：`pnpm add @ama-pt/agora-design-system`、`yarn add @ama-pt/agora-design-system`、`bun add @ama-pt/agora-design-system`

## README

# 阿戈拉设计系统

欢迎来到阿戈拉设计系统,即为gov.pt进化而创建的设计和开发系统,这个门户汇集了葡萄牙共和国的公共服务.

### 愿景

* * *

通过灵活和优秀的数字公共服务,使所有公民与国家的关系标准化、简化和更容易获得. 数字公共服务协会提出一套规则和准则,在葡萄牙国家设计和发展数字公共服务时必须遵守这些规则和准则.

### 目标

* * *

能够作为参考点的设计体系的构建和演变,为所有与葡萄牙国家与公民关系有关的数字公共服务服务提供参考.

## 核心技术

-   反应 - [https://reactjs.org/ (中文(简体) )](https://reactjs.org/)
-   故事书 - [https://storybook.js.org/docs/react/get-started/install 页面存档备份,存于互联网档案馆](https://storybook.js.org/docs/react/get-started/install)
-   尾风 - [https://tailwindcs.com/docs/安装](https://tailwindcss.com/docs/installation)
-   节点JS - [https://nodejs.org/ 页面存档备份,存于互联网档案馆](https://nodejs.org/)

## 有用链接

-   故事书 [https://react.agora.gov.pt (英语)](https://react.agora.gov.pt/)
-   图像( UX 设计) - [https://www.figma.com/files/1280803067320724398/project/60863393 (中文(简体) )](https://www.figma.com/files/1280803067320724398/project/60863393)
-   零发 - [https://zeroheight.com/1be481dc2/p/97181d-agora-design-system (中文(简体) )](https://zeroheight.com/1be481dc2/p/97181d-agora-design-system)
-   访问监视器( Aessibilidade AMA) - [https://accessmonitor.acessibilidade.gov.pt/ 互联网档案馆的存檔,存档日期2013-12-02](https://accessmonitor.acessibilidade.gov.pt/)
-   W3 读取器 - [https://validator.w3.org/nu/ (中文(简体) )](https://validator.w3.org/nu/)
-   Axe DevTools - 电动轴 电动轴 [https://chrome.google.com/webstore/detaile/axe-devtools-web-accessib/lhdoppojpmngadnindnejefpokejd?utm source=deque.com&utm medicle=referral&utm campaign=axe hero 互联网档案馆的存檔,存档日期2013-12-27](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?utm_source=deque.com&utm_medium=referral&utm_campaign=axe_hero)

## 安装

```sh
> npm install @ama-pt/agora-design-system
```

## 尾风 CSS v4 配置

AgoraDS 4 需要 Tailwind CSS v4. 配置 使用 [正式安装指南](https://tailwindcss.com/docs/installation),然后将这些导入添加到您的 CSS 主文件中,顺序为:

```css
/* AgoraDS design tokens */
@import '@ama-pt/agora-design-system/theme.css';

/* Tailwind v4 reset and utilities */
@import 'tailwindcss/preflight';
@import 'tailwindcss/utilities';

/* AgoraDS compiled component styles */
@import '@ama-pt/agora-design-system/index.css';
```

没有 `tailwind.config` 文档或 `AgoraTailwindConfig` 需要导入。 AgoraDS使用Tailwind v4的CSS-第一配置.

## 覆盖 AgoraDS 主题

以一个 `@theme` 输入后块。 例如,以下修改了主色调色板:

```css
@import '@ama-pt/agora-design-system/theme.css';
@import 'tailwindcss/preflight';
@import 'tailwindcss/utilities';
@import '@ama-pt/agora-design-system/index.css';

@theme {
  --color-primary-50: #fff000;
  --color-primary-100: #fff000;
  --color-primary-200: #fff000;
  --color-primary-300: #fff000;
  --color-primary-400: #fff000;
  --color-primary-500: #fff000;
  --color-primary-600: #fff000;
  --color-primary-700: #fff000;
  --color-primary-800: #fff000;
  --color-primary-900: #fff000;
}
```

完整的设置和所有v3到v4的断开更改,请参见"故事书安装指南","尾风主题配置"和"迁移指南".

## 常见问题

### @ama-pt/agora-design-system 是什么？

设计系统

### 如何安装 @ama-pt/agora-design-system？

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

### @ama-pt/agora-design-system 支持 TypeScript 吗？

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

### @ama-pt/agora-design-system 支持 ESM 还是 CommonJS？

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

### @ama-pt/agora-design-system 可以商用吗？

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

### @ama-pt/agora-design-system 的下载量有多少？

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

### @ama-pt/agora-design-system 还在维护吗？

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