# @adminjs/design-system 中文文档

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

版本：4\.1\.1
npm 元数据更新时间：2024-03-20T12:11:23.470Z
中文译文更新时间：2026-11-05T17:37:53.703Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：16.5 MB，860 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：36 个
- peer 依赖：react ^18\.1\.0，react-dom ^18\.1\.0
- 首次发布：2021-06-18T15:04:29.747Z
- 最新版本发布：2024-03-08T10:03:13.672Z
- 近 30 天下载量：203143（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：59（近 12 个月 0 个）

## 中文简介

行政JS的构建系统

## 安装

```sh
npm install @adminjs/design-system
```

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

## README

# @adminjs/ 设计系统

此软件包由来自 [行政部门](https://adminjs.co/) 那样你就可以在外边用上所有的 `adminjs` 核心键.

它是在两个惊人的软件包的帮助下创建的:

-   [样式组件](https://styled-components.com/)
-   [样式系统](https://styled-stystem.com/)

确保检查出来 利用这个设计系统的全部潜力.

## 安装

```sh
yarn add @adminjs/design-system
```

设计系统需要 `theme` 所以,你必须使用它 `ThemeProvider` 从 `styled-components` 像这样:

```tsx
import { ThemeProvider } from 'styled-components'

// theme is the default theme, which you can alter
import { theme, Button, Box, Icon } from '@adminjs/design-system'

const App = () => (
  <ThemeProvider theme={theme}>
    <Box>
      <Button>
        <Icon icon="Plus" />
        Click Me
      </Button>
      <Button variant="contained" ml="xl">
        I am important
      </Button>
    </Box>
  </ThemeProvider>
)

export default App
```

## 更改主题

设计系统提供默认值 [主题](https://adminjs.co/Theme.html)。它包含所有参数,如粘贴、颜色、字体大小等。 对于所有可用的参数列表,请查看 [主题谱](https://adminjs.co/Theme.html)。 。 。 .

但没有什么能妨碍你改变默认主题。 要做到这一点,你可以使用 `combineStyles` 方法 :

```tsx
import { combineStyles } from '@adminjs/design-system`

const myTheme = combineStyles({
  colors: {
    primary100: '#000'
  }
})

// ...
<ThemeProvider theme={myTheme}>
```

## 更改特定组件

有时你可能想要改变特定组件的外观和感觉,而不是整个主题. 你可以做到这一点 `styled` 方法 `@adminjs/design-system/styled-components`数字 :

```tsx
import { Button } from '@adminjs/design-system'
import { styled } from '@adminjs/design-system/styled-components'

const MyRoundedButton = styled(Button)`
  border-radius: 100px;
`
```

然后可以像普通按钮组件一样使用:

```html
<MyRoundedButton variant="outlined" color="primary"> Rounded I am </MyRoundedButton>
```

## 构成部分

关于所有组件及其文件的清单,请到 [adminjs.co (英语)](https://adminjs.co/) 或拜访我们 [故事书](https://adminjs-storybook.web.app/)。 。 。 .

## 捆绑包

这个 npm 软件包也有捆绑的版本。 您可以在下面找到它们:

-   `node_modules/@adminjd/design-system/bundle.development.js`
-   `node_modules/@adminjs/design-system/bundle.production.js` (减)

(它们也可以通过使用 `bundle` 脚本 : `yarn bundle` 或者说 `NODE_ENV=production yarn bundle`(中文(简体) )

要使用它们, 您必须托管它们( 把它们放到您的“ 公用” 文件夹中) , 然后把它们放入您的页面头 :

```html
<head>
  <!-- ... -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script
    crossorigin
    src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/5.1.1/styled-components.js"
  ></script>
  <script crossorigin src="/bundle.development.js"></script>
  <!-- ... -->
</head>
```

## 贡献

如果您发现任何 UI 错误 - 请随意创建 PR .

## 故事书

此寄存器中还包含组件的故事,您也可以从我们 [故事书](https://adminjs-storybook.web.app/) 页 次 在本地运行故事书 只需运行:

```sh
yarn storybook
```

## 许可证

AdminJS拥有2023rst.software的版权. 它是一种自由软件,可按下列规定重新分配: [自由主义](https://npmcn.com/package/%40adminjs/design-system/LICENSE.md) 文档.

## 关于 rst. 软件

![](https://pbs.twimg.com/profile_images/1367119173604810752/dKVlj1YY_400x400.jpg)

我们是一个开放、友好的团队.

-   我们随时可以 [雇用](https://www.rst.software/estimate-your-project)。 。 。 .
-   如果你想为我们工作.. [职业页面](https://www.rst.software/join-us)。 。 。 .

## 常见问题

### @adminjs/design-system 是什么？

行政JS的构建系统

### 如何安装 @adminjs/design-system？

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

### @adminjs/design-system 支持 TypeScript 吗？

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

### @adminjs/design-system 支持 ESM 还是 CommonJS？

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

### @adminjs/design-system 可以商用吗？

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

### @adminjs/design-system 的下载量有多少？

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

### @adminjs/design-system 还在维护吗？

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