# @arcadeai/design-system 中文文档

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

版本：8\.0\.1
npm 元数据更新时间：2026-10-28T19:07:43.919Z
中文译文更新时间：2026-11-06T13:57:40.950Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40arcadeai/design-system
原文对照：https://npmcn.com/package/%40arcadeai/design-system/?lang=original
源码仓库：https://github.com/ArcadeAI/Design-System

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

- 包体积（解压后）：25.9 MB，2128 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：16 个
- peer 依赖：react \>=19\.2\.1，recharts \>=3\.2\.0，react-dom \>=19\.2\.1，tailwindcss \>=4\.1\.13，lucide-react \>=0\.544\.0，react-hook-form \>=7\.62\.0，@hookform/resolvers \>=5\.2\.1
- 首次发布：2025-06-25T23:33:15.675Z
- 最新版本发布：2026-10-28T19:07:43.599Z
- 近 30 天下载量：11503（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：179（近 12 个月 114 个）

## 中文简介

暂无中文简介

## 安装

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

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

## README

# 拱廊设计系统

发表于 [`@arcadeai/design-system`](https://www.npmjs.com/package/@arcadeai/design-system) ——100+可访问 React 组件以Tailwind CSS为基础UI所建.

## 使用量

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

导入应用程序根的样式 :

```css
@import "@arcadeai/design-system/index.css";
```

然后使用组件 :

```tsx
import { Button, Card, Input } from "@arcadeai/design-system";
```

### 表格组:字段集

偏爱 `Fieldset` 超过本地 `<fieldset>` 用于包含设计-系统控件的组,特别是允许指定或管理的设置。 从这里导入 `@arcadeai/design-system/components/ui/atoms/fieldset`。 。 。 .

`Fieldset` 使语义 `<fieldset>` base UI的残疾环境。 将每个基准UI字段插入 `FormItem` (单位:千美元)`Field.Root`因此,收音机、复选箱、交换机和选择继承 `disabled`本地 `<fieldset disabled>` 不提供上下文. `FormItem` 也在反钩外工作.

```tsx
import { Checkbox } from "@arcadeai/design-system/components/ui/atoms/checkbox";
import { Fieldset } from "@arcadeai/design-system/components/ui/atoms/fieldset";
import { FormItem } from "@arcadeai/design-system/rhf";
import { useId } from "react";

export function NotificationSettings({ canEdit }: { canEdit: boolean }) {
  const id = useId();

  return (
    <Fieldset disabled={!canEdit}>
      <legend>Notifications</legend>
      <FormItem className="flex items-center gap-2">
        <Checkbox defaultChecked id={id} name="emailNotifications" />
        <label htmlFor={id}>Email notifications</label>
      </FormItem>
    </Fieldset>
  );
}
```

对于无法编辑的设置, 使用 `disabled`· ; `Fieldset` 没有组级别 `readOnly` 道具 (英语). 在提交处理器和服务器上保持权限检查.

土著 `<fieldset>` 仍然适合仅包含本地控件的组合,因为基础UI上下文是不必要的。 不消耗 Base UI 字段环境的自定义控制仍然需要自己的被禁用处理.

见 [外地集执行](https://npmcn.com/package/%40arcadeai/design-system/lib/components/ui/atoms/fieldset.tsx) 财务报告和审定财务报表 [禁用控制测试](https://npmcn.com/package/%40arcadeai/design-system/lib/components/ui/atoms/fieldset.test.tsx)。 。 。 .

## 登记簿

设计系统也作为 [阴影登记册](https://ui.shadcn.com/docs/registry)中添加注册 `components.json`数字 :

```json
{
  "registries": {
    "@arcadeai": "https://ds.arcade.dev/r/{name}.json"
  }
}
```

然后安装组件 :

```bash
npx shadcn@latest add @arcadeai/arcadeai-theme
npx shadcn@latest add @arcadeai/button
```

对于窗体组模式,请同时安装 `@arcadeai/fieldset` 财务报告和审定财务报表 `@arcadeai/form` (加上您使用的控件),然后从生成的本地文件导入:

```bash
npx shadcn@latest add @arcadeai/fieldset @arcadeai/form @arcadeai/checkbox
```

## 发展

```bash
make help      # see all available commands
make install   # install dependencies
make dev       # start Storybook dev server (headless)
make run       # start Storybook (opens browser)
make build     # build the library
make check     # lint + type-check
```

## 捐款

### 添加图标

1.  将 SVG 置入 `lib/assets/icons/`
2.  运行 `bun run generate-icons`
3.  从 `@arcadeai/design-system/components/ui/atoms/icons`

### 添加工具包

添加条目到 `lib/metadata/toolkits.ts` ——参见模式的现有条目.

### 添加 OAuth 供应商

添加条目到 `lib/metadata/oauth-providers.ts` ——参见模式的现有条目.

## 常见问题

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

在项目目录运行 npm install @arcadeai/design-system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19\.2\.1）、recharts（\>=3\.2\.0）、react-dom（\>=19\.2\.1）、tailwindcss（\>=4\.1\.13）、lucide-react（\>=0\.544\.0）、react-hook-form（\>=7\.62\.0）、@hookform/resolvers（\>=5\.2\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

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

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

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

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

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

@arcadeai/design-system 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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