# @evoapi/design-system 中文文档

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

版本：0\.0\.6
npm 元数据更新时间：2025-12-04T14:29:38.298Z
中文译文更新时间：2026-11-14T02:25:51.889Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40evoapi/design-system
原文对照：https://npmcn.com/package/%40evoapi/design-system/?lang=original

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

- 包体积（解压后）：1.9 MB，386 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：44 个
- peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0，tailwindcss ^4\.1\.10
- 首次发布：2025-05-15T14:38:23.519Z
- 最新版本发布：2025-12-04T14:29:38.069Z
- 近 30 天下载量：4059（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 1 个）

## 中文简介

EvoAI 反应设计系统

## 安装

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

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

## README

# 设计系统反应

现代设计系统 **阴影/ ui**, (中文(简体) ), **Radix 用户界面** 电子 **尾风 CSS v4**Oferece 组件 reutilizáveis, acessíveis e altamente para aplicaáveis react. 中国植物物种信息数据库.

## 苏马里奥

-   [英斯特拉桑](https://npmcn.com/package/%40evoapi/design-system/#readme-instala%C3%A7%C3%A3o)
-   [乌苏](https://npmcn.com/package/%40evoapi/design-system/#readme-uso)
    -   [导入](https://npmcn.com/package/%40evoapi/design-system/#readme-importando)
    -   [Usando 组件](https://npmcn.com/package/%40evoapi/design-system/#readme-usando-componentes)
    -   [文件](https://npmcn.com/package/%40evoapi/design-system/#readme-documenta%C3%A7%C3%A3o)
-   [答复部分](https://npmcn.com/package/%40evoapi/design-system/#readme-componentes-dispon%C3%ADveis)
-   [设计司](https://npmcn.com/package/%40evoapi/design-system/#readme-sistema-de-design)
    -   [托肯斯大学](https://npmcn.com/package/%40evoapi/design-system/#readme-estrutura-de-tokens)
    -   [泰马](https://npmcn.com/package/%40evoapi/design-system/#readme-temas)
-   [德森沃尔维门托](https://npmcn.com/package/%40evoapi/design-system/#readme-desenvolvimento)
-   [米兰](https://npmcn.com/package/%40evoapi/design-system/#readme-migra%C3%A7%C3%A3o)

## 英斯特拉桑

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

## 乌苏

### 导入

O 设计系统 possui **切入点分隔道s por 组件e**, e 类 进取点 os estilos.

导入臀部 :

```tsx
import "@evoapi/design-system/styles"; // CSS global
import { Button } from "@evoapi/design-system/button";
import { Input } from "@evoapi/design-system/input";
import { Select } from "@evoapi/design-system/select";
import { Tabs } from "@evoapi/design-system/tabs";
```

O 导入 serito do root aninda funciona, mas é confinidado , 输入 sincedo , 输入 sincedo , 输入 sincedo **摩多语name 遗产**数字 :

```tsx
import "@evoapi/design-system/dist/index.css"; // CSS global
import { Button } from "@evoapi/design-system";
```

### Usando 组件

```tsx
import "@evoapi/design-system/styles";

import { Button } from "@evoapi/design-system/button";
import { Input } from "@evoapi/design-system/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@evoapi/design-system/select";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@evoapi/design-system/tabs";

function App() {
  return (
    <div className="p-4 space-y-4">
      <Button variant="default" size="lg">
        Clique Aqui
      </Button>

      <Tabs defaultValue="account" className="w-[400px]">
        <TabsList>
          <TabsTrigger value="account">Conta</TabsTrigger>
          <TabsTrigger value="password">Senha</TabsTrigger>
        </TabsList>

        <TabsContent value="account">Conteúdo da aba conta</TabsContent>
        <TabsContent value="password">Conteúdo da aba senha</TabsContent>
      </Tabs>

      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Selecione uma opção" />
        </SelectTrigger>

        <SelectContent>
          <SelectItem value="option1">Opção 1</SelectItem>
          <SelectItem value="option2">Opção 2</SelectItem>
          <SelectItem value="option3">Opção 3</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}
```

## 答复部分

诺索设计系统 **45+ 组件** 基底无阴影/ ui :

### Formulas e 输入

-   **按钮**: Botões com múltiplas 变体(默认、破坏性、轮廓、二级、幽灵、链接)
-   **投入**: Campos de entrada de texto com suporte a diferentes tipos (英语:Campos de entrada de texto com suporte a diferentes tipos) 互联网档案馆的存檔,存档日期2013-12-02. 互联网档案馆的存檔,存档日期2013-12-22. 互联网档案馆的存檔,存档日期2013-12-22
-   **文本区域**: 阿雷亚·多林哈
-   **标签**: Rótulos para formulários
-   **复选框**主席:
-   **无线电组**: 格鲁波斯-德博托斯电台
-   **切换**: 切入控制器
-   **切换**页:1
-   **切换组**: Grupos de toggles para seleção única ou múltipla 互联网档案馆的存檔,存档日期2013-12-20
-   **选择**: 菜单降级
-   **幻灯片**: 低等压载机控制器
-   **输入检察官办公室**: Campos para códigos de verificação
-   **表单**: Sistema completo de formulários com vialação 互联网档案馆的存檔,存档日期2013-12-21

### 导航

-   **导航菜单**: 降级
-   **菜单栏**: Barra de 菜单 Estilo 桌面
-   **下拉菜单**: menus drop down com suporte a submenus, checkbox 电子收音机按钮
-   **背景菜单**: 菜单背景
-   **面包屑**副主席:
-   **倾斜**: 巴拿马管制局
-   **边栏**: Barras laterais 回应

### 布局 e Estrutura

-   **图表**页:1
-   **纸牌**页:1
-   **手风琴**页:1
-   **可折叠**页:1
-   **分隔符**(中文(简体) )
-   **外观比率**: 元素专利管制
-   **滚动区域**页:1
-   **可调整**页:1
-   **标签**: 西斯德马·纳韦加韦斯

### 反馈 e

-   **警报**: 废除死刑
-   **提醒对话框**副主席:
-   **进展**页:1
-   **徽标**: 地位分类
-   **斯凯莱通**: 地名管理员
-   **索纳 (托斯特)**西斯提克马·德·诺菲卡(Sistema de Notifica)
-   **工具提示**: 底卡斯语境

### 重叠 e Modais

-   **对话框**: 莫达伊斯·迪亚洛戈斯
-   **工作表**: Gavetas deslizantes (上,下,左,右)
-   **绘图器**: Gavetas deslizantes 移动
-   **过量**: Popovers para conteúdo 上下文
-   **贺卡**: 卡片 que aparecem 不盘旋
-   **命令**: comando com busca接口

### 数据显示

-   **有远见**: 我们的神通
-   **日历**卡伦达里奥数据
-   **木马**卡罗塞伊斯·德孔图多
-   **图表**页:1

## 设计司

### 托肯斯大学

O 设计系统 Utiliza **尾风 CSS v4** 缩写 **CSS 自定义属性** 第3段:

```css
@import "tailwindcss";

@theme {
  --color-background: 0 0% 100%;
  --color-foreground: 240 10% 3.9%;
  --color-primary: 240 5.9% 10%;
  --color-primary-foreground: 0 0% 98%;
  --color-secondary: 240 4.8% 95.9%;
  --color-secondary-foreground: 240 5.9% 10%;
  --color-muted: 240 4.8% 95.9%;
  --color-muted-foreground: 240 3.8% 46.1%;
  --color-accent: 240 4.8% 95.9%;
  --color-accent-foreground: 240 5.9% 10%;
  --color-destructive: 0 84.2% 60.2%;
  --color-destructive-foreground: 0 0% 98%;
  --color-border: 240 5.9% 90%;
  --color-input: 240 5.9% 90%;
  --color-ring: 240 5% 64.9%;
  --radius: 0.5rem;
}
```

### 泰马

O sistema suporta Temas Claro e escuro 自动调试变量:

```css
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: 240 10% 3.9%;
    --color-foreground: 0 0% 98%;
    --color-primary: 0 0% 98%;
    --color-primary-foreground: 240 5.9% 10%;
    /* ... */
  }
}
```

### 组成部分的备选案文

卡达元件 possui 变种 bem definidas usando **差异管理局(CVA)**数字 :

```tsx
// Exemplo: Button variants
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Tamanhos
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">Icon</Button>

// Exemplo: Select variants
<Select>
  <SelectTrigger size="sm">Small</SelectTrigger>
  <SelectTrigger size="default">Default</SelectTrigger>
</Select>

// Exemplo: Tabs orientações
<Tabs orientation="horizontal">...</Tabs>
<Tabs orientation="vertical">...</Tabs>
```

## 文件

执行:

```bash
npm run storybook
```

故事书《6006》

-   ✅ **45起以上事件** com 实例
-   ✅ **区域间文件** 去除待办事项 os 组件
-   ✅ **卡索斯·德·雷阿斯(Casos de uso Reais) (英语)** 段分部分e
-   ✅ **控制点** 维利亚语
-   ✅ **Código 字体** 卡达实例
-   ✅ **连续赛** 恶魔之分

### 文档

**福图拉里奥斯:**

-   **按钮**: 6 variações(默认、可变、大小、带有图标、仅包含图标、国家)
-   **表单**: 5 variações (默认、配置表、登录表、实时验证、调查表)
-   **投入**: 6 variações(默认,带有标签,文件输入,已禁用,带有图标,密码)
-   **文本区域**: 6 variações(过失、带标签、州、大小、反馈表、控制)
-   **选择**: 6 variações(过失、有标签、有团体、州、大小、有控制)
-   **切换**: 5 variações(过失、带标签、州、设置、控制)
-   **幻灯片**: 7 variações(默认、带标签、范围、州、垂直、设置、不同比例)
-   **切换**: 6 variações(默认、可变、大小、带有图标、状态、格式工具栏)
-   **切换组**: 6 variações(默认、选择类型、变体、大小、格式工具栏,国家)

**布局 e 导航 :**

-   **标签**: 6 variações(过失、简单、带有图标、状态、控制、产品导航)
-   **滚动区域**: 4 variações (默认、 水平、 长文本、 大小)
-   **图表**: 6 variações(默认,可选择,有动作,可排序,有脚,空)
-   **手风琴**: 5 variações(默认、多倍、带有图标、自定义样式、FAQ)
-   **纸牌**: 6 variações(故障、有图像、简介卡、统计、产品卡、互动)

**反馈 :**

-   **索纳**: 6 variações(默认、所有类型、有动作、定位、高级设置、窗体示例)
-   **警报**: 5 variações(默认、带有图标、可变、自定义、可解除)
-   **进展**: 6 variações (默认, 有标签, 变体, 大小, 动画, 多步)

**埃·米多斯出击...**

## 德森沃尔维门托

Para contribuir com o 设计系统:

1.  克隆再保有量
2.  以依赖者身份出售 : `npm install`
3.  故事书: `npm run storybook`
4.  花花相传
5.  执行 Os 测试 : `npm run test`
6.  建楼: `npm run build`

### Estrutura do Projeto (英语:Estrutura do Projeto) 互联网档案馆的存檔,存档日期2013-12-02

```
ui-design-system/
├── src/
│   ├── components/
│   │   ├── ui/           # Componentes base (shadcn/ui)
│   │   └── stories/      # Stories do Storybook (45+ stories)
│   ├── utils/            # Utilitários (cn, etc.)
│   ├── hooks/            # Hooks customizados (use-mobile)
│   └── index.ts          # Exportações principais
├── .storybook/           # Configuração do Storybook
└── docs/                 # Documentação adicional
```

## 米兰

### 折旧

⚠️ **重要事项**: Os seguintes 组件论坛 **折旧** e substituídos por versões basedas no shadcn/ui: (原始内容存档于2018-09-29)

-   `BAccordion` → `Accordion`
-   `BAlert` → `Alert`
-   `BMenu` → `DropdownMenu` 编号 : `NavigationMenu`
-   `BProfile` → `Avatar` + 自定义组件
-   `BAppBar` • 使用 `Button` + 键 `DropdownMenu`

### 圭亚那

```tsx
// ❌ Antes (depreciado)
import { BButton, BAlert } from "@evoapi/design-system";

<BButton variant="primary">Click me</BButton>
<BAlert type="success">Success message</BAlert>

// ✅ Depois (novo)
import { Button, Alert } from "@evoapi/design-system";

<Button variant="default">Click me</Button>
<Alert>
  <CheckCircle className="h-4 w-4" />
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Success message</AlertDescription>
</Alert>
```

## 技术

-   **反应 18**校长:
-   **阴影/ ui**: 构成部分基础
-   **Radix 用户界面**页:1
-   **尾风 CSS v4**设计与设计司
-   **类别差异授权**: Gerenciamento de 变种
-   **路西德反应**\====================================================================
-   **反应钩形**: Gerenciamento de formulários(法国)
-   **佐德语Name**: 计划的有效性
-   **索纳**西斯提克马·德·诺菲卡(Sistema de Notifica)
-   **故事本 第8册**: 区域间文件
-   **类型脚本**: Tipagem estática 压缩机

## 语法

麻省理工学院

## 常见问题

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

EvoAI 反应设计系统

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

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

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

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

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

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

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

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

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

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

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

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