@gzued/antd-compiled/README.md

Pre-bundled Ant Design 4.x and related dependencies for @gzued packages

# @gzued/antd-compiled

预打包的 antd 4.x 及其相关依赖，支持自定义样式前缀。

## 特性

- ✅ 预打包 antd 4.24.14 及其依赖
- ✅ 保持原有目录结构
- ✅ 样式前缀从 `ant` 替换为 `bote`
- ✅ 支持按需导入
- ✅ 包含所有样式文件

## 安装

```bash
npm install @gzued/antd-compiled
```

## 使用方式

### 方式一：使用 ConfigProvider（推荐）

```jsx
import React from 'react';
import { ConfigProvider, Button, Input } from '@gzued/antd-compiled/compiled/antd/es';

function App() {
  return (
    <ConfigProvider prefixCls="bote">
      <div>
        <Button type="primary">按钮</Button>
        <Input placeholder="输入框" />
      </div>
    </ConfigProvider>
  );
}
```

### 方式二：使用便捷的 AntdProvider

```jsx
import React from 'react';
import { AntdProvider, Button, Input } from '@gzued/antd-compiled/compiled';

function App() {
  return (
    <AntdProvider prefixCls="bote">
      <div>
        <Button type="primary">按钮</Button>
        <Input placeholder="输入框" />
      </div>
    </AntdProvider>
  );
}
```

### 方式三：直接导入组件

```jsx
import React from 'react';
import { Button } from '@gzued/antd-compiled/compiled/antd/es/button';
import { ConfigProvider } from '@gzued/antd-compiled/compiled/antd/es/config-provider';

function App() {
  return (
    <ConfigProvider prefixCls="bote">
      <Button type="primary">按钮</Button>
    </ConfigProvider>
  );
}
```

## 样式前缀设置

本包已将样式前缀从 `ant` 替换为 `bote`，但您仍需要通过 `ConfigProvider` 的 `prefixCls` 属性来告诉组件使用哪个前缀：

```jsx
// ✅ 正确：设置 prefixCls 为 bote
<ConfigProvider prefixCls="bote">
  <Button>按钮</Button>
</ConfigProvider>

// ❌ 错误：不设置 prefixCls，组件会使用默认的 ant 前缀
<Button>按钮</Button>
```

## 支持的导入路径

```jsx
// antd 组件
import { Button } from '@gzued/antd-compiled/compiled/antd/es/button';
import { Input } from '@gzued/antd-compiled/compiled/antd/es/input';
import { ConfigProvider } from '@gzued/antd-compiled/compiled/antd/es/config-provider';

// 图标
import { UserOutlined } from '@gzued/antd-compiled/compiled/@ant-design/icons';

// 工具库
import dayjs from '@gzued/antd-compiled/compiled/dayjs';
import classNames from '@gzued/antd-compiled/compiled/classnames';
```

## 样式文件

```jsx
// 引入样式文件
import '@gzued/antd-compiled/compiled/antd/dist/antd.css';
import '@gzued/antd-compiled/compiled/antd/dist/antd.min.css';
import '@gzued/antd-compiled/compiled/antd/dist/antd.less';
```

## 版本信息

```jsx
import { version } from '@gzued/antd-compiled/compiled';

console.log(version);
// {
//   antd: '4.24.14',
//   '@ant-design/icons': '4.8.0',
//   dayjs: '1.11.10',
//   classnames: '2.3.1',
//   stylePrefix: 'bote',
//   buildTime: '2025-07-18T01:09:55.290Z'
// }
```

## 构建

```bash
# 构建预打包版本
npm run build

# 测试构建产物
npm run test
```

## 注意事项

1. **样式前缀**：虽然样式文件中的前缀已替换为 `bote`，但组件仍需要通过 `ConfigProvider` 的 `prefixCls` 属性来设置
2. **按需导入**：建议使用按需导入以减少打包体积
3. **样式文件**：记得引入相应的样式文件
4. **版本兼容**：本包基于 antd 4.24.14，请确保与您的项目兼容