[西西弗组件库预览地址](https://sisyphus.zhongan.tech)

## 快速上手

西西弗4 基于 antd@6 版本开发

## React 版本支持

本组件库支持 **React 18.0+** 和 **React 19.x**：

- ✅ **React 18.0.0** - 18.x.x（最低支持版本）
- ✅ **React 19.0.0+**（最新版本）

**推荐版本**：

- 生产环境：React 18.3.1 或 React 19.x
- 开发环境：React 19.x（本地验证最新特性）

**peerDependencies**：

```json
{
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0",
  "ahooks": ">=3.9.5"
}
```

> **注意（v4.2.0+）**：`ahooks` 已从 `dependencies` 移至 `peerDependencies`，需要在消费者项目中单独安装：
>
> ```bash
> npm install ahooks
> # 或
> yarn add ahooks
> ```

### 安装

npm 或 yarn 安装

```bash
# npm
$ npm install @zat-design/sisyphus-react --save

# yarn
$ yarn add @zat-design/sisyphus-react
```

### 按需加载

#### 方式一：自动 Tree-Shaking（推荐）

本组件库已配置 `sideEffects`，**现代打包器（Webpack 5+、Vite、Rollup）会自动进行 tree-shaking**，无需额外配置：

```tsx
// 只会打包 ProForm 相关代码，其他组件会被自动剔除
import { ProForm } from '@zat-design/sisyphus-react';
```

#### 方式二：babel-plugin-import（兼容老项目）

如果使用 Webpack 4 或需要更精确的控制，可使用 babel-plugin-import：

```js
[
  'babel-plugin-import',
  {
    libraryName: '@zat-design/sisyphus-react',
    camel2DashComponentName: false,
    libraryDirectory: 'es',
    style: false,
  },
];
```

在 umi 框架下同时配置 antd 按需加载时，需要配置别名：

```js
extraBabelPlugins: [
  [
    'babel-plugin-import',
    {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true,
    },
  ],
  [
    'babel-plugin-import',
    {
      libraryName: '@zat-design/sisyphus-react',
      camel2DashComponentName: false,
      libraryDirectory: 'es',
      style: false,
    },
    '@zat-design/sisyphus-react',
  ],
];
```

### 使用示例

```tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { ProForm } from '@zat-design/sisyphus-react';

const App = () => {
  return (
    <ProForm
      columns={[
        {
          type: 'Input',
          label: '姓名',
          name: 'name',
          rules: [{ required: true, message: '请输入姓名！' }],
        },
      ]}
    />
  );
};

createRoot(document.getElementById('root')!).render(<App />);
```

## 开发指南

### 本地开发

```bash
yarn install
yarn start
```

### 运行测试

```bash
yarn test
yarn test:coverage  # 带覆盖率
```

### 组件库打包发布

```bash
# 1. 构建（生成 es/lib/dist 目录）
yarn build

# 2. 发布到 npm
yarn release        # 正式版
yarn release:beta   # beta 版本
```

2. 执行发布（使用域账号登录）：

```bash
npm publish
```

## 技术栈

- React 18.3+ / React 19
- Ant Design 6.x
- TypeScript
- Less