# design-zystem 中文文档

规范地址：https://npmcn.com/package/design-zystem/

版本：1\.0\.465
npm 元数据更新时间：2026-11-03T09:34:42.195Z
中文译文更新时间：2026-11-03T11:57:20.487Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：1.7 MB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：31 个
- peer 依赖：react ^18\.3\.1，react-dom ^18\.3\.1，@types/react ^18\.0\.0，@types/react-dom ^18\.0\.0，styled-components ^6\.1\.12
- 首次发布：2024-08-12T14:29:58.960Z
- 最新版本发布：2026-11-03T09:34:41.917Z
- 已发布版本数：400（近 12 个月 288 个）

## 中文简介

一个由可导入组件组成的React设计系统

## 安装

```sh
npm install design-zystem
```

也可以使用：`pnpm add design-zystem`、`yarn add design-zystem`、`bun add design-zystem`

## README

# 设计系统-设计系统

在所有DevCar web应用中共享的内部React组件库。出版于 `design-zystem` npm包。

## 技术堆栈

| 类别 | 技术 |
| --- | --- |
| 框架 | 反应18 |
| 样式 | styled-components 6 |
| 构建 | tup （CJS + ESM） |
| 打印稿 | 严格的，完整的。d。ts |
| 故事书 | v10(轻快地) |
| 测试 | Vitest + jsdom + @test -library/react |

## 设置

```bash
npm install
npx playwright install chromium   # required once for Storybook browser tests
```

## 脚本

```bash
npm run build           # tsup → dist/ (CJS + ESM + .d.ts)
npm run storybook       # Storybook dev server on :6006
npm test                # behavioral unit tests (jsdom)
npm publish             # build + publish to npm
```

## 故事书

`npm run storybook` 上启动本地开发服务器 `:6006` 与交互式文档和故事为所有35+组件。每个组件都有一个自动生成的 **文档** 页面（道具表+现场游乐场）和多个变体故事。

生成静态版本 `npm run build-storybook` (输出 `storybook-static/`)用于部署到托管服务-未提交到repo。

## 结构

```
src/
  index.tsx             # barrel export
  Components/           # one folder per component
    <Name>/
      <Name>.tsx        # component + exported interface <Name>Props
      <Name>.css
      <Name>.stories.tsx
  data/
    colors.ts           # color palette
    globalMethods.ts    # shared helpers
__tests__/              # behavioral tests (vitest + @testing-library/react)
dist/                   # generated — do not edit
```

## 组件

### 布局

`Box` · `Col` · `Row` · `Grid` · `PageContainer` · `Divider` · `Bulk`

### 版式与媒体

`Text` · `Bubble` · `Link` · `Icon` · `Image`

### 输入

`Button` · `Input` · `Checkbox` · `Radio` · `Switch` · `Select` · `MultiSelect` · `DatePicker`

### 导航

`Tabs` · `IconTabs` · `Stepper` · `Options`

### 覆盖

`Modal` · `NewModal` · `ModalConfirmation` · `Drawer` · `Popover` · `Tooltip`

### 数据

`List` · `ListItem` · `Table` · `CardSkeleton`

## 用法

```tsx
import { Button, Input, Modal } from 'design-zystem'
```

## 发布新版本

1.  撞 `version` 在 `package.json`
2.  `npm publish` ——触发器 `prepublishOnly` → `npm run build` 自动
3.  更新 `design-zystem` 版本 `ClientOffice/package.json` + `DeliveryApp/package.json`

## 相关项目

| 项目 | 描述 |
| --- | --- |
| ClientOffice | 使用design-zystem |
| DeliveryApp | 使用design-zystem |
| 检查 | 使用design-zystem |

## 常见问题

### design-zystem 是什么？

一个由可导入组件组成的React设计系统

### 如何安装 design-zystem？

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

### design-zystem 支持 TypeScript 吗？

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

### design-zystem 支持 ESM 还是 CommonJS？

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

### design-zystem 可以商用吗？

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

### design-zystem 还在维护吗？

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