@eocrm/design-system

中文文档

0.8.16发布于 2026/11/13Apache-2.0TypeScriptES Module构建来源已验证近 30 天下载 5034

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

文档目录14 节

安装
1. 书记官处
2. 安装
3. 使用
什麽 global.css 已经
百分点
Bundler 笔记
构成部分
迁移到 0.7
发布新版本
游戏场部署
AI探员
医生住的地方(所以你不用涂鸦)
许可证

@eocrm/ 设计系统

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

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

构成部分合同 docs/components/<Name>.md (道具表,反标. 消耗此包的AI代理应为: 大赦国际 首先,最好通过MCP服务器(参见 AI探员) (中文(简体) ).

现场操场 (每个组件,按 main: https://eocrm.github.io/design-system/组件

安装

1. 书记官处

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

2. 安装

npm install @eocrm/design-system

3. 使用

// 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 一旦在您的应用根应用三件事:

键 ——定义每个 --color-*, (中文(简体) ), --space-*, (中文(简体) ), --radius-*, (中文(简体) ), --font-*, (中文(简体) ), --shadow-* 等内容 :root要求.
现代重置 - 包括: * { 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 任何设置这些标准属性的滚动器上的规则——如果你已经这样样式滚动条,它们就会停止应用.
基础打字 —— 说 body 字体+大小, h1– 说吧 –h4 大小,链接颜色。全球规则,没有范围.

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

百分点

口音家族默认为蓝色. 要将整个应用程序转换为另一个口音,设置 data-accent 打开 <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 每个主题(见文件/设置) (中文(简体) ). 信息颜色在任意重音下保持蓝色; DropdownMenu 检查了项目, 选择的选项Picker行和完成的 StagePath 状态跟随重音。图表颜色( E)--color-chart-series-1.8布兰德调色板保持同样的8个花色但重排1号档 Chart第一辑和 FunnelChart'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' 全部命令已经下达文档/组件/图.md;在莫斯下,前三个插槽对德意志观众的分量较少,一个被接受的例外,比如下面的成功-彩色音符. 轻取主题 Teal松的默认值 Link使用比口音更亮一点的口音(#007676,每个灰地表面的AA)在中等重量(而不是标题内, <strong> 或者说 <th>),因为口音单独坐着太接近于海军身体文本,不能读作链接. 板块的默认值 Links是中等重量,原因相同。 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 文档.

// 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 只有你坚持风格:

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

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

// 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· ; 大赦国际以符号表来索引它们.

类型

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) (中文(简体) ). 见大赦国际这些.

迁移到 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 笔记)——服务器组件不能通过它的函数叶.

发布新版本

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

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

没有手动“ 运行工作流程” 按钮 – 合并到 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/ (中文(简体) ) 总是反映 main每当质量门经过时,它都会重新部署——甚至只在游乐场进行更改时,甚至在公布打嗝时也是如此.

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

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

AI探员

@eocrm/design-system-mcp 是 MCP 服务器,为文档服务 @eocrm/design-system 版本您的工程已安装。克劳德代码的一次性用户镜安装:

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

编码、光标、VS代码和通用设置 npx -y @eocrm/design-system-mcp install-skill: 见其读取。。。 .

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

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

许可证

Apache 许可证 2.0。。。 .

版本与发布记录

@eocrm/design-system 共发布 27 个版本，首次发布于 2026/11/02；过去 12 个月发布了 27 个版本。最新版本附带 npm provenance 构建来源证明，可追溯到公开的 CI 构建记录。

版本	发布日期	距今
`0.8.16`latest	2026/11/13	今天
`0.8.15`	2026/11/13	今天
`0.8.14`	2026/11/13	今天
`0.8.13`	2026/11/11	3 天前
`0.8.12`	2026/11/11	3 天前
`0.8.11`	2026/11/09	4 天前

关于 @eocrm/design-system 的常见问题

@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 和提交记录判断。

npm install @eocrm/design-system

pnpmpnpm add @eocrm/design-system
yarnyarn add @eocrm/design-system
bunbun add @eocrm/design-system

peer 依赖react ^19.0.0react-dom ^19.0.0lucide-react >=1.16.0 <2.0.0

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

5,034

约 5034 次日均 168 次

统计周期 2026/10/14 – 2026/11/12
数据来自 npm 官方下载统计，今天更新

最新版本0.8.16发布于今天

开源许可Apache-2.0宽松许可

包体积5.8 MB1,391 个文件 · 解压后

运行依赖10 个另有 3 个 peer 依赖

模块格式ES Module

TypeScript自带类型

发布版本27 个近 12 个月 27 个

首次发布2026/11/0211 天前

元数据更新2026/11/13

每一个软件包背后，
都有分享与创造的人。