# @eocrm/design-system 中文文档

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

版本：0\.8\.16
npm 元数据更新时间：2026-11-13T12:06:44.740Z
中文译文更新时间：2026-11-13T19:08:57.948Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：5.8 MB，1391 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：10 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，lucide-react \>=1\.16\.0 \<2\.0\.0
- 首次发布：2026-11-02T12:11:49.470Z
- 最新版本发布：2026-11-13T12:06:44.244Z
- 近 30 天下载量：5034（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：27（近 12 个月 27 个）

## 中文简介

EOCRM产品的设计系统——React 19 + CSS自定义属性.

## 安装

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

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

## README

# @eocrm/ 设计系统

反应EOCRM19设计系统. 船舶汇编的无害环境管理(`dist/`: Java 脚本, `.d.ts` 类型和平面CSS)——消费者不需要Sass, TypeScript或转接配置.

它的网络符号由 `@eocrm/design-tokens`; 数据 编译的代号 CSS 被捆绑到此软件包中, 因此消费者只安装 `@eocrm/design-system`。 。 。 .

构成部分合同 **[`docs/components/<Name>.md`](https://npmcn.com/package/%40eocrm/design-system/docs/components)** (道具表,反标. 消耗此包的AI代理应为: **[大赦国际](https://npmcn.com/package/%40eocrm/design-system/AI-PRIMER.md)** 首先,最好通过MCP服务器(参见 [AI探员](https://npmcn.com/package/%40eocrm/design-system/#readme-ai-agents)) (中文(简体) ).

**现场操场** (每个组件,按 `main`: [https://eocrm.github.io/design-system/组件](https://eocrm.github.io/design-system/components)

* * *

## 安装

### 1\. 书记官处

`@eocrm/design-system` 在npmjs上公开,所以没有 `.npmrc` 或需要证明. 狦 `.npmrc` 静态地图 `@eocrm` 转到另一登记册,删除该行.

### 2\. 安装

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

### 3\. 使用

```ts
// Once, at the app's root (e.g. main.tsx):
import '@eocrm/design-system/styles/global.css';

// Anywhere:
import {
  Avatar,
  Badge,
  Button,
  Card,
  Cluster,
  DropdownMenu,
  Input,
  Stack,
  Tabs,
} from '@eocrm/design-system';
```

* * *

## 什麽 `global.css` 已经

导入 `@eocrm/design-system/styles/global.css` 一旦在您的应用根 应用三件事:

1.  **键** ——定义每个 `--color-*`, (中文(简体) ), `--space-*`, (中文(简体) ), `--radius-*`, (中文(简体) ), `--font-*`, (中文(简体) ), `--shadow-*` 等内容 `:root`要求.
2.  **现代重置** - 包括: `* { margin: 0 }`。 。 。 . **每个元素上的所有默认浏览器边距被零化.** 页: 1 `Stack`编号 :`Cluster` 或父母在CSS中自己的差额。 文件背景用途 `--document-background` (默认) `var(--color-bg-subtle)`),因此全屏幕表面之间的路由转换不会闪出不同的基色;在全局导入后将该符号覆盖到不同的应用画布上. 重置也适用 `scrollbar-width: thin` + 符号颜色 `scrollbar-color` 每一个元素,所以 **每个** 滚动容器——库组件和自有组件——得到一个薄薄的它们所组成的滚动条而不是OS默认. (一个故意的例外:崩溃) `<Rail>` 因为一条地沟大约是56px铁路内宽的四分之一。 ) 它被宣布为0 -0 -0; 选择一个卷轴器与它自己的 `scrollbar-width: auto` 编号 : `scrollbar-color: auto`。注意铬忽略 `::-webkit-scrollbar` 任何设置这些标准属性的滚动器上的规则——如果你已经这样样式滚动条,它们就会停止应用.
3.  **基础打字** —— 说 `body` 字体+大小, `h1`– 说吧 –`h4` 大小,链接颜色。 全球规则,没有范围.

如果您只需要符号( 您正在提供自己的重置) , 导入 `@eocrm/design-system/styles/tokens.css` 直接说 Sass 变量 : `@eocrm/design-tokens`。 。 。 . `mixins.scss` 没有替换.

* * *

## 百分点

口音家族默认为蓝色. 要将整个应用程序转换为另一个口音,设置 `data-accent` 打开 `<html>` 蓝色的属性 :

```html
<html data-accent="tealpine" data-theme="dark"></html>
```

| `data-accent` | 色调 | 绘制对象 |
| --- | --- | --- |
| _(无)_ | 蓝色( 默认) | `EocrmLightTokens` 编号 : `EocrmDarkTokens` |
| `tealpine` | Teal松树 | `EocrmTealPineLightTokens` 编号 : `EocrmTealPineDarkTokens` |
| `indigo` | 因迪戈语Name | `EocrmIndigoLightTokens` 编号 : `EocrmIndigoDarkTokens` |
| `grape` | 紫色 | `EocrmGrapeLightTokens` 编号 : `EocrmGrapeDarkTokens` |
| `berry` | 紫红色平克 | `EocrmBerryLightTokens` 编号 : `EocrmBerryDarkTokens` |
| `slate` | 中性石墨 | `EocrmSlateLightTokens` 编号 : `EocrmSlateDarkTokens` |
| `ocean` | 青蓝色 | `EocrmOceanLightTokens` 编号 : `EocrmOceanDarkTokens` |
| `moss` | 橄榄绿色 | `EocrmMossLightTokens` 编号 : `EocrmMossDarkTokens` |

每个口音交换 `--color-accent`, (中文(简体) ), `-hover`, (中文(简体) ), `-pressed`, (中文(简体) ), `-fg`, (中文(简体) ), `-bg-subtle`, (中文(简体) ), `-subtle-bg` 财务报告和审定财务报表 `--ring-accent`附加默认值 `Link` 颜色( r)`--color-link-fg` 编号 : `-hover`),在光线下,被强迫为黑暗`data-theme="dark"`)和OS阴暗. 他们用现有的 `tokens.css` 编号 : `global.css`,所以没有新的导入. `AppProvider`是因为 `tokens` 编号 : `darkTokens` 覆盖胜出 `data-accent` 每个主题(见 [文件/设置](https://npmcn.com/package/%40eocrm/design-system/docs/setup.md)) (中文(简体) ). 信息颜色在任意重音下保持蓝色; DropdownMenu 检查了项目, 选择的选项Picker行和完成的 StagePath 状态跟随重音 。 图表颜色( E)`--color-chart-series-1`.`8`布兰德调色板 保持同样的8个花色 但重排1号档 `Chart`第一辑和 `FunnelChart`'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 全部命令已经下达 [文档/组件/图.md](https://npmcn.com/package/%40eocrm/design-system/docs/components/Chart.md);在莫斯下,前三个插槽对德意志观众的分量较少,一个被接受的例外,比如下面的成功-彩色音符. 轻取主题 Teal松的默认值 `Link`使用比口音更亮一点的口音(`#007676`,每个灰地表面的AA)在中等重量(而不是标题内, `<strong>` 或者说 `<th>`),因为口音单独坐着太接近于海军身体文本,不能读作链接. 板块的默认值 `Link`s是中等重量,原因相同。 Indigo和Berry也设定了与他们的口音略有不同的链接颜色(`#4342c4`, (中文(简体) ), `#a82c68`保持每个灰色地表的AA链接.

作曲:每个口音的"轻"/"暗"物体坐在旁边 `EocrmLightTokens` 编号 : `EocrmDarkTokens`;只有口音颜色不同。 链接颜色和图表序列符号只使用网络( 配置没有 `Link` 或者说 `Chart`),因此作曲链接保持口音颜色.

刻意没有红色,橙色或黄色口音:这些花饰中的主按钮读作危险或警告行动.

**已知问题:** 提尔松和莫斯坐近于 `--color-success` 在Hue。 (笑声) 在将客户关系管理系统切换到其中之一之前,先视同审查成功/成功配对.

* * *

## Bundler 笔记

货船 **汇编的无害环境管理** (单位:千美元)`dist/`与 `.d.ts` 类型和普通CSS。 不需要 Sass, TypeScript 或 transpile 配置 .

-   **CSS进口**:每个组件的JS块进口自己的 `.css`,因此捆绑商必须处理CSS的进口. Next.js, Vite, Rsbuilt 和 CRA 退出框;纯网络包装 5 需要 `css-loader` 加号 `style-loader` 或者说 `mini-css-extract-plugin`; Rollup需要一个CSS插件. 导入 `@eocrm/design-system/styles/global.css` 一次在应用根.
-   **CSS 组件加载的一种方式**: 使用任意一种 `styles.css` (单身) `<link>`,对于其CSS管道无法从JS中取出进口品的设置,或JS进口品,并非两者兼有——加载两者都重复了每一个规则. 联合来文本身总是需要一个捆绑器(它进口CSS并读作: `process.env.NODE_ENV`) (中文(简体) ).
-   **Next.js(应用程序路由器)**:工作状态,不 `transpilePackages`使用客户端模块 `'use client'`,那么简单的组件(`Button`, (中文(简体) ), `Select`, (中文(简体) ), `Badge`, (中文(简体) ), `Input`,...)可以从服务器组件直接提供. 服务器/客户端边界的三个界限:
    -   **供应商**页:1 `ru` 目录包含函数,函数不能从服务器组件传递到客户端组件. 挂载 `AppProvider` 编号 : `I18nProvider` 从你自己 `'use client'` 提供者文件为导入 `ru` (下文实例),不是来自 `app/layout.tsx` 直接说.
    -   **复合部件** (单位:千美元)`Breadcrumb.Item`, (中文(简体) ), `Modal.Header`, (中文(简体) ), `Accordion.Item`, (中文(简体) ), `List.Item`,.)无法从服务器组件中达到——客户端模块不能被点入服务器,所以 `X.Item` 实值 `undefined` 在那里和渲染失败。 a. 变形复合组件 `'use client'` 文档.
    -   **控制覆盖** (单位:千美元)`Modal`, (中文(简体) ), `Drawer`()需要状态和一个函数 `onOpenChange`,因此将它们从客户部分中转换出来.
-   设定 `moduleResolution: "bundler"` (或 `"node16"`在你身边 `tsconfig.json` 如果 TypeScript 无法解析类型。 若为 `tsc` 拒绝副作用 `import '…/styles/global.css'` (TS2882),而您的框架并不为您声明 CSS 模块( Vite's `vite/client` 下一个 `next-env.d.ts` 执行),添加 `declare module '*.css';` 改为 `.d.ts` 文档.

```tsx
// app/providers.tsx
'use client';
import { AppProvider, ru } from '@eocrm/design-system';
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <AppProvider locale="ru" messages={ru}>
      {children}
    </AppProvider>
  );
}

// app/layout.tsx (Server Component)
import '@eocrm/design-system/styles/global.css';
import { Providers } from './providers';
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ru">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
```

**考证.** 虚拟外部化 `node_modules` 和节点不能导入组件' `.css` (单位:千美元)`TypeError: Unknown file extension ".css"`),因此内置此软件包(添加 `css: true` 只有你坚持风格:

```ts
// vitest.config.ts
test: { server: { deps: { inline: [/@eocrm\/design-system/] } } },
```

Jest (CommonJS)需要改变这一无害环境管理一揽子方案及其仅以无害环境管理为主的依赖性(`d3-*`, (中文(简体) ), `internmap`,用于 `Chart`),和分贝 `.css` 进口:

```js
// jest.config.js — the pattern covers npm/yarn and pnpm (node_modules/.pnpm/<name>@<version>/…) layouts
transformIgnorePatterns: [
  '/node_modules/(?!(\\.pnpm/)?(@eocrm[/+]design-system|d3-[^/@]+|internmap)[/@])',
],
moduleNameMapper: { '\\.css$': '<rootDir>/emptyModule.js' },
```

-   `emptyModule.js` 是一个空文件( e)`module.exports = {};`) (中文(简体) ).
-   变压器必须在内部将无害环境管理转换为普通JS `node_modules`数字 : `babel-jest` 带根 `babel.config.js` 联合国 `.babelrc` 不适用于下列情况: `node_modules`)使用 `@babel/preset-env` (单位:千美元)`targets: { node: 'current' }`),或 `ts-jest` 与 `preset: 'ts-jest/presets/js-with-ts'`, (中文(简体) ), `allowJs: true` 财务报告和审定财务报表 `module: 'commonjs'`。 。 。 .

* * *

## 构成部分

分组导航。 构成部分合同 `docs/components/<Name>.md`· ; [大赦国际](https://npmcn.com/package/%40eocrm/design-system/AI-PRIMER.md) 以符号表来索引它们.

**类型**

-   `Title` 语义标题
-   `Text` —正文/内置文本
-   `Code` ——内含 `<code>` 芯片
-   `Kbd` — 键盘键提示

**行动**

-   `Button` - 触发行动
-   `ButtonGroup` 组合按钮 + 分块控制
-   `SocialButton` — 供应商登录按钮
-   `Link` ——多形态风格锚地
-   `DropdownMenu` - 触发器中的动作菜单

**窗体控件**

-   `Input` —单行文本
-   `Textarea` ——多行文本
-   `OtpInput` ——一次性码入,单字符箱
-   `PasswordInput` ——带眼切换的密码字段+可选警告
-   `PasswordStrengthMeter` 4. 4个部分的可视性
-   `Select` ——取值器(单取,多取,可取取取取取,同取取取,可取取取取取取取取取)
-   `OptionsPicker` ——滤波器(多/单一、分组、可搜索)
-   `Checkbox` – 有本地输入的复选框 + 自定义油漆
-   `Radio` 编号 : `RadioGroup` 单收音机+外地集包装机
-   `Switch` —— 二进制切换
-   `Slider` ——受控滑动器(单相+范围,水平+垂直)
-   `ColorPicker` ——受控HEX取色器(人气过量+内含)
-   `IconPicker` ——有弹出式无线电网的可控图标拾取器
-   `FileUpload` 受控文件拾取器,带有空投区
-   `ImageCrop` 受控图像剪接器

**窗体布局**

-   `Field` - 有标签的控制单位
-   `FormSection` 标题栏目
-   `FormRow` ——田地并存
-   `SettingRow` 编号 : `SettingRow.List` 设置- 屏幕行, 有共享标签栏、 装饰和页脚槽

**日期和时间**

-   `Calendar` 月/周/日/议程意见
-   `DatePicker` 编号 : `InlineDatePicker` ——单日期输入+popover,或以流量表示
-   `DateRangePicker` 编号 : `InlineDateRangePicker` — 日期- 范围输入+ popover, 或在流中
-   `TimeField` 独立的每日时间投入

**布局结构( T)**

-   `Stack` ——垂直布局
-   `Cluster` ——横向布局来包接
-   `Grid` —— 二维布局原始
-   `Masonry` ——高平瓦砾布局
-   `Constrain` 宽度/ 高度/ 弹性约束
-   `Divider` - 原始分隔器
-   `Page` ——页根布局原始
-   `Screen` ——全血/中屏幕布局
-   `AppLayout` ——取景端填充应用程序外壳
-   `PageHeader` ——页上标题区

**导航 & app 铬**

-   `Rail` 相撞左侧导航
-   `TopBar` ——粘性应用程序上行
-   `Tabs` 横向标签条
-   `TabNav` ——标签样式路由导航(链接,不是标签)
-   `Breadcrumb` - 导航道
-   `Pagination` — 有窗口的编号导航
-   `CursorPagination` – 预置 / 下一个没有总计的流

**重叠**

-   `Modal` ——焦点锁定对话框
-   `Drawer` 边缘悬浮滑入面板
-   `Popover` ——交互式内容的非模式浮动面板
-   `ConfirmationPopover` - "你确定吗?"预设
-   `Tooltip` / 键盘焦点上的小型浮动标签

**反馈状态( S)**

-   `Alert` ——持续流入通知
-   `Toast` (单位:千美元)`ToastViewport` + 键 `toast`——临时通知
-   `Progress` 线性进度栏
-   `CircularProgress` 循环进展/旋转器
-   `Skeleton` - 装载占位符
-   `EmptyState` - "这里什么都没有"集装箱
-   `ErrorState` ——页面级别状态/结果屏
-   `Badge` - 状态/类药丸
-   `FilterChip` ——可忽略的"活性过滤"药丸

**数据显示**

-   `Card` - 接壤集装箱
-   `LinkCard` ——可点击的全地卡
-   `DefinitionList` ——语义密钥/值对 (`dl` 编号 : `dt` 编号 : `dd`(中文(简体) )
-   `Table` - 原始表格数据
-   `DataTable` ——具有列功能的由服务器驱动的数据表
-   `Accordion` 纵向相撞面板
-   `Kanban` ——多栏板(道格对重排+跨栏拖放)
-   `Sortable` ——拖放重排列表(单列)
-   `Image` ——带有加载+错误状态的图像

**身份与媒体**

-   `Avatar` 编号 : `AvatarGroup` – 剖面圆 / slack 风格的叠行
-   `PersonDisplay` ——神通+名称(+可选描述行)
-   `Logo` ——品牌标志锁站
-   `BrandIcon` ——第三方品牌标识
-   `IconTile` 调色板-彩色图标框架

> 图书馆也载着 `AppProvider` (主题+i18n+地语接线),, `LocaleProvider` 编号 : `I18nProvider`,则 `useTranslation` 编号 : `useLocale` 钩子 `palette` 帮助者和日历原始钩子(`useMonth`, (中文(简体) ), `useWeek`, (中文(简体) ), `useDay`, (中文(简体) ), `useAgenda`) (中文(简体) ). 见 [大赦国际](https://npmcn.com/package/%40eocrm/design-system/AI-PRIMER.md) 这些.

* * *

## 迁移到 0.7

-   **样式表 :** `@eocrm/design-system/styles/global.scss` 现在 `@eocrm/design-system/styles/global.css`。 。 。 . `styles.css` 捆绑每个组件的CSS;每个组件的CSS也由JS块自动导入——使用一个或另一个,而不是两者兼用.
-   **删除的子路径 :** `styles/tokens.scss`, (中文(简体) ), `styles/reset.scss`, (中文(简体) ), `styles/typography.scss` 财务报告和审定财务报表 `styles/mixins.scss` 不见了 使用 `styles/tokens.css` 仅限象征 Sass 变量 : `@eocrm/design-tokens` (单位:千美元)`@use` 它直接地). `mixins.scss` 没有替换.
-   **编译输出 :** 包裹不再有船了 `src/`; 丢出 `transpilePackages` 和任何Sass/TSX装载器的规则.
-   **i18n (英语):** `I18nProvider` 编号 : `AppProvider` 不再捆绑俄语。 通过目录 : `<I18nProvider locale="ru" messages={ru}>` 与 `import { ru } from '@eocrm/design-system'`一个非`en` 无语言 `messages` 日志 a `console.error` 使英语。 在 Next.js 应用程序路由器中,通过 `ru` 从a `'use client'` 提供者文件( 参见 [Bundler 笔记](https://npmcn.com/package/%40eocrm/design-system/#readme-bundler-notes))——服务器组件不能通过它的函数叶.

## 发布新版本

释放是 **自动**合并为 `main` 触发 `Release` 工作流程(`.github/workflows/release.yml`),其中:

1.  运行质量门( 类型检查、 测试、 涂抹、 构建、 沥青内容检查) .
2.  如果库实际更改, 请从最新版本计算下一个版本 `v*` git 标记( patch ump 默认) , 如果标签已经存在, 则拒绝 .
3.  同步 `@eocrm/design-tokens`, (中文(简体) ), `@eocrm/design-system`,并生成一个版本的令牌合同.
4.  发布符号 npm 软件包,然后发布设计-系统 npm 软件包,然后发布 npmjs(受托出版),然后发布 `com.eocrm.design:design-tokens-compose` 改为 GitHub 包 (Maven).
5.  在创建和推动前验证所有三个登记册版本 `v<version>` git标签.
6.  重新部署游乐场(见下文).

没有手动“ 运行工作流程” 按钮 – 合并到 `main` 是释放的唯一方法。 仅播放地面的更改跳过发布步骤(没有演示tweak的版本凸起),但仍会重新部署操场.

**包式预算**数字 : `size-budgets.json` 每一消费者情况(a)`npm run size`质量 `test-ds`);在公关中有意地增加预算,增加捆绑.

**造成轻微/重大起落**编辑 `BUMP` (单位:千美元)`patch` → `minor` 编号 : `major`(单位:千美元) `release.yml` 在一个分支和合并。 设计上没有其他的覆盖.

**一次性重播设置**:设置 – 动作 – 一般 – 工作流程权限 – “读写权限 ” .

软件包名称 `@eocrm/design-system` 必须匹配您在 GitHub 上发布的组织(或用户) 。 如果你的兽不是 `eocrm`,将软件包重新命名为 `package.json` 编辑 `scope:` 在工作流程中.

* * *

## 游戏场部署

游乐场(活式组件画廊)自动部署到GitHub Pages,作为最后一步 `Release` 工作流程,所以现场网站 [https://eocrm.github.io/design-system/ (中文(简体) )](https://eocrm.github.io/design-system/) 总是反映 `main`每当质量门经过时,它都会重新部署——甚至只在游乐场进行更改时,甚至在公布打嗝时也是如此.

**这个Repo及其Pages网站是公开的.** 游乐场把图书馆的源头烤成一团 `?raw` 进口,所以源是世界可读的——这是对开源图书馆的故意.

**一次性设置**: 设置 ~ 页 ~ source="GitHub Actions"(不是"从一分支部署").

* * *

## AI探员

[`@eocrm/design-system-mcp`](https://npmcn.com/package/%40eocrm/design-system-mcp/README.md) 是 MCP 服务器,为文档服务 `@eocrm/design-system` 版本您的工程已安装 。 克劳德代码的一次性用户镜安装:

```bash
claude mcp add --scope user eocrm-design-system -- npx -y @eocrm/design-system-mcp
```

编码、光标、VS代码和通用设置 `npx -y @eocrm/design-system-mcp install-skill`: 见其 [读取](https://npmcn.com/package/%40eocrm/design-system-mcp/README.md)。 。 。 .

## 医生住的地方(所以你不用涂鸦)

-   **读取** (这个文件)——安装,设置,捆绑笔记,发布/部署操作.
-   **[大赦国际](https://npmcn.com/package/%40eocrm/design-system/AI-PRIMER.md)** ——AI编码代理简洁入门. 托肯表格和组件索引.
-   **`docs/components/<Name>.md`** ——每个组件合同:道具表,示例,防标. 还有 `docs/setup.md`, (中文(简体) ), `docs/theming.md`, (中文(简体) ), `docs/transient-state.md`。 。 。 .
-   **[克劳德·姆德](https://npmcn.com/package/%40eocrm/design-system/CLAUDE.md)** - 对某人的规则 **修改此库** (不给消费者).

## 许可证

[Apache 许可证 2.0](https://npmcn.com/package/%40eocrm/design-system/LICENSE)。 。 。 .

## 常见问题

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

EOCRM产品的设计系统——React 19 \+ CSS自定义属性\.

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

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

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

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

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

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

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

@eocrm/design-system 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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