# @ews-admin/global-design-system 中文文档
规范地址：https://npmcn.com/package/%40ews-admin/global-design-system/
版本：1\.40\.0
npm 元数据更新时间：2026-11-09T22:38:03.065Z
中文译文更新时间：2026-11-14T07:28:09.029Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40ews-admin/global-design-system
原文对照：https://npmcn.com/package/%40ews-admin/global-design-system/?lang=original
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：2.4 MB，289 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react ^18\.2\.0，react-dom ^18\.2\.0，react-hook-form ^7\.51\.0
- 首次发布：2025-09-14T00:03:09.809Z
- 最新版本发布：2026-11-09T22:38:02.867Z
- 近 30 天下载量：2128（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：60（近 12 个月 44 个）
## 中文简介
EWS 全球设计系统 - EWS应用的可再使用组件
## 安装
```sh
npm install @ews-admin/global-design-system
```
也可以使用：`pnpm add @ews-admin/global-design-system`、`yarn add @ews-admin/global-design-system`、`bun add @ews-admin/global-design-system`
## README
# EWS 全球设计系统
EWS(Erco Web Solutions)应用的综合设计系统,提供可再使用的React组件,图标和公用设施.
## 特征
- 🎨 **一致设计**: 所有 EWS 应用程序的统一设计语言
- 📦 **国家防范机制一揽子计划**: 在任何反应项目中易于安装和使用
- 📚 **故事书**: 交互式组件文档和测试
- 🎯 **类型脚本**: 带有类型定义的完整类型脚本支持
- 🎨 **可自定义**: 弹性主题和型式选项
- ♿ **可访问**: 采用无障碍最佳做法.
## 安装
```bash
pnpm add @ews-admin/global-design-system
```
## 快速启动
```tsx
import { Button, Input, ArrowRight } from "@ews-admin/global-design-system";
function App() {
return (
}>
Click me
);
}
```
## 构成部分
### 按钮
具有多变和大小的多变按钮组件.
```tsx
```
**道具 :**
- `variant`: “ 初级 ” “ 二级 ” “ 成功 ” “ 警告 ” “ 错误 ” “ 线外 ”
- `size`:'s''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
- `loading`:布尔
- `fullWidth`:布尔
- `leftIcon`: 反应节点
- `rightIcon`: 反应节点
### 投入
具有验证状态和图标的灵活输入组件.
```tsx
```
**道具 :**
- `variant`: 'default' qq 'error' qq '成功'
- `size`:'s''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
- `label`字符串
- `helperText`字符串
- `error`字符串
- `leftIcon`: 反应节点
- `rightIcon`: 反应节点
## 图标
设计系统包括一套常用图标:
```tsx
import { ArrowRight, Check, Search } from '@ews/global-design-system';
```
## 公用事业
### 类名工具
```tsx
import { cn } from "@ews-admin/global-design-system";
const className = cn("px-4 py-2", "bg-blue-500", "text-white");
```
### 格式化公用事业
```tsx
import { formatCurrency, formatDate } from "@ews-admin/global-design-system";
formatCurrency(1234.56); // "$1,234.56"
formatDate(new Date()); // "December 7, 2023"
```
### ID 生成
```tsx
import { generateId } from "@ews/global-design-system";
const id = generateId("prefix"); // "prefix-abc123def"
```
## 发展
### 先决条件
- 节点.js 16+
- pnpm( 建议) 或 npm
### 设置
```bash
# Install dependencies
pnpm install
# Start Storybook
pnpm storybook
# Build the package
pnpm build
# Run linting
pnpm lint
# Run type checking
pnpm type-check
```
### 故事书
设计系统包括用于组件文件和测试的综合故事书:
```bash
pnpm storybook
```
访问 `http://localhost:6006` 阅读故事书.
## 出版
### 出版的前提条件
1. **登录到 npm :**
```bash
npm login
```
2. **创建 @ews-admin 组织** (如果尚未创建):
- 转到 : [https://www.npmjs.com/org/create (中文(简体) )](https://www.npmjs.com/org/create)
- 组织名称 : `ews-admin`
- 选择 **免费** 计划
### 出版步骤
1. **构建软件包 :**
```bash
pnpm build
```
2. **发布到 npm :**
```bash
pnpm publish:public
```
3. **校验出版物 :**
```bash
pnpm view
```
### 版本管理
- **补丁版本** (错误修正) : `pnpm publish:patch`
- **次要版本** (新特点): `pnpm publish:minor`
- **主要版本** (破碎变化): `pnpm publish:major`
### 附加脚本
- **清理构建目录**数字 : `pnpm clean`
- **从零开始重建**数字 : `pnpm rebuild`
- **仅版本** (不出版):
- `pnpm version:patch`
- `pnpm version:minor`
- `pnpm version:major`
## 项目结构
```
src/
├── components/ # React components
│ ├── Button/
│ └── Input/
├── icons/ # Icon components
│ ├── Icon.tsx
│ ├── ArrowRight.tsx
│ ├── Check.tsx
│ └── Search.tsx
├── utils/ # Utility functions
│ └── index.ts
├── styles/ # Global styles
│ └── index.css
└── index.ts # Main export file
stories/ # Storybook stories
├── Components/
├── Icons/
└── Utils/
```
## 主办于此
看我们的主站台 [这里](https://medicalplatform-ui-ews-global-desig.vercel.app/?path=/story/components-select--disabled)
## 捐款
1. 叉子存储器
2. 创建特性分支
3. 做你的改变
4. 为新组件添加故事
5. 运行测试和起伏
6. 提交拉动请求
## 许可证
麻省理工学院许可证 - 详情见LICENSE文件.
## 支助
如需提问和支持,请与EWS开发团队联系.
## 常见问题
### @ews-admin/global-design-system 是什么？
EWS 全球设计系统 - EWS应用的可再使用组件
### 如何安装 @ews-admin/global-design-system？
在项目目录运行 npm install @ews-admin/global-design-system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.2\.0）、react-dom（^18\.2\.0）、react-hook-form（^7\.51\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @ews-admin/global-design-system 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @ews-admin/global-design-system 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @ews-admin/global-design-system 可以商用吗？
@ews-admin/global-design-system 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @ews-admin/global-design-system 的下载量有多少？
根据 npm 官方下载统计，@ews-admin/global-design-system 在 2026/10/14 – 2026/11/12 这 30 天内被下载 2,128 次，日均约 71 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @ews-admin/global-design-system 还在维护吗？
最新版本 1\.40\.0 发布于 2026/11/10（4 天前）；至今共发布 60 个版本，其中过去 12 个月发布了 44 个；首次发布于 2025/09/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。