# @appdirect/design-system 中文文档

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

版本：0\.0\.19
npm 元数据更新时间：2026-11-05T18:56:11.275Z
中文译文更新时间：2026-11-06T14:08:06.596Z
软件包许可：UNLICENSED

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

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

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

- 包体积（解压后）：1.5 MB，344 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react ^19\.2\.0，react-dom ^19\.2\.0，@mantine/core ^9\.6\.0，@mantine/dates ^9\.6\.0，@mantine/hooks ^9\.6\.0
- 首次发布：2026-10-14T15:45:00.520Z
- 最新版本发布：2026-11-05T18:56:11.086Z
- 近 30 天下载量：3051（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 20 个）

## 中文简介

AppDirect 设计系统组件. Mantine v9 包装有标准化道具,变体和道具.

## 安装

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

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

## README

# @ access/ design- system

AppDirect 设计系统组件. 曼汀街9号周围有薄薄的包裹.

## 安装

```bash
npm install @appdirect/design-system
```

对等依赖性( 在此套件所宣布的版本中安装) :

-   `react`, (中文(简体) ), `react-dom`
-   `@mantine/core`, (中文(简体) ), `@mantine/dates`, (中文(简体) ), `@mantine/hooks`

## 包裹里有什么船

| 什麽 | 路径/ 导出 | 用于 |
| --- | --- | --- |
| JS 运行时间 | `main` 编号 : `exports["."].default` → `dist/index.js` | 苹果和捆绑进口 |
| 类型脚本源 | `exports["."].types` → `dist/index.ts` (+ 构成部分) `.ts`编号 :`.tsx`(中文(简体) ) | 编辑器类型; 不将捆绑器指向运行时间 |
| 隐藏 CSS | `@appdirect/design-system/css/foundations.css`, (中文(简体) ), `.../mantine.css` | 主题变量( E)`--ad-*`(中文(简体) ) |
| 配置/ 共享类型 | `@appdirect/design-system/config`, (中文(简体) ), `@appdirect/design-system/types` | 规模,变体联盟 |
| 故事(来源) | `@appdirect/design-system/stories`, (中文(简体) ), `.../stories/*` | 代理 / 设计 参考模式 (`add-feature`(中文(简体) ) |
| 合同 | `@appdirect/design-system/contracts`, (中文(简体) ), `.../contracts/*` | `ds-audit` 执法 |
| 设计光谱 | `@appdirect/design-system/DESIGN.md` | 光学 `apps/design-system/DESIGN.md` (手表+传言) |
| 国 际 | `ds-audit` | 对照合同审计原型或应用程序 |
| 国 际 | `ad-sync-design-md` | 复制 `DESIGN.md` 进入消费回收(`postinstall` 编号 : `sync-design-docs`(中文(简体) ) |

Bundlers( Rspack, webpack, Vite, Next) 应对软件包条目进行解析 **`.js`**。你会 **没有** 需求 `transpilePackages` / SWC 包括此软件包的 TypeScript 。 继续装入 `*.module.css` 从您的 CSS 模块规则的包.

## 保留 `DESIGN.md` 同步中

执行 **没有** 手抄设计谱. 将已公布文件拖入安装的电线消费者 :

```json
{
  "scripts": {
    "postinstall": "ad-sync-design-md",
    "sync-design-docs": "ad-sync-design-md"
  }
}
```

-   默认目的地 : `docs/DESIGN.md`
-   回收目标 : `DESIGN_MD_PATH=DESIGN.md` 或者说 `ad-sync-design-md --out DESIGN.md`
-   作者真实来源于此单曲: [`apps/design-system/DESIGN.md`](https://npmcn.com/package/apps/design-system/DESIGN.md)

## 应用程序使用

在应用程序根附近装入符号 CSS( 独立原型经常使用此软件包的 CSS再出口; 符号包是相同的文件) :

```tsx
import '@appdirect/design-system/css/foundations.css';
import '@appdirect/design-system/css/mantine.css';
// or:
// import '@appdirect/ad-design-tokens/css/foundations.css';
// import '@appdirect/ad-design-tokens/css/mantine.css';
```

从此软件包导入产品 UI, 不是原始 `@mantine/core`,当DS包装器存在时:

```tsx
import { Button, TextInput, Stack, Card, PageContentHeader } from '@appdirect/design-system';

export function Example() {
  return (
    <Stack gap="md">
      <PageContentHeader title="Invoices" description="Open billing period" />
      <Card padding="md">
        <TextInput label="Search" />
        <Button variant="primary">Save</Button>
      </Card>
    </Stack>
  );
}
```

使用 AppDirect 按钮变体(`primary`, (中文(简体) ), `secondary`, (中文(简体) ), `default`, (中文(简体) ), `outline`, (中文(简体) ), `danger`, (中文(简体) ), `link`, (中文(简体) ), `secret`),不是曼汀语 `filled` 编号 : `light` 编号 : `subtle`. 偏爱 `--ad-*` 颜色符号; 避免调色板道具像 `color="blue"`。 。 。 .

共享帮助 :

```ts
import { /* sizes, etc. */ } from '@appdirect/design-system/config';
import type { DSButtonVariant } from '@appdirect/design-system/types';
```

## 故事(仅工具)

童话故事 **参考来源** 下级 `dist/stories/`。它们不是React组件的运行时间导出.

```ts
// Index of every story: title, component, description, story names, imports
import stories from '@appdirect/design-system/stories';
// or open files via the package export:
// @appdirect/design-system/stories/Buttons/Button.stories.tsx
```

原型剂`add-feature`)改为 `node_modules/@appdirect/design-system/dist/stories/` (和 `stories` 导出)以复制组成图案。 当一个故事导入了设计系统没有采纳的曼汀组件时,构建失败了.

## 合同和 `ds-audit`

```bash
npx ds-audit
# or: ./node_modules/.bin/ds-audit
```

合同时间: `@appdirect/design-system/contracts` (指数)和 `@appdirect/design-system/contracts/<id>`。使用时使用 `@appdirect/ds-enforce` ESLint在采用该系统的应用程序中规则.

## 提供者说明

`MantineProvider` / 主题设置保留在主机应用程序中( 例如) `src/providers/` 在微i-ui / 原型应用中). 此软件包不导出提供者 .

## 常见问题

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

AppDirect 设计系统组件\. Mantine v9 包装有标准化道具,变体和道具\.

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

在项目目录运行 npm install @appdirect/design-system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.2\.0）、react-dom（^19\.2\.0）、@mantine/core（^9\.6\.0）、@mantine/dates（^9\.6\.0）、@mantine/hooks（^9\.6\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 ds-audit、ad-sync-design-md，可以用 npx ds-audit 直接运行。

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

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

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

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

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

@appdirect/design-system 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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