@saberlayer/avatar-upload/README.md

A React avatar upload component with image crop feature based on Ant Design

# @saberlayer/avatar-upload

一个基于 Ant Design 的头像上传组件，支持图片裁剪功能。

## 更新日志

### v1.1.0
- 优化文件结构，统一构建输出到 dist 目录
- 简化包体积，移除冗余文件
- 保持对 CommonJS、ES Module 和 UMD 的完整支持
- 优化 TypeScript 类型声明文件位置

## 安装

```bash
npm install @saberlayer/avatar-upload
# 或
yarn add @saberlayer/avatar-upload
```

## 使用方法

支持多种导入方式：

### ES Modules

```jsx
import { AvatarUpload } from '@saberlayer/avatar-upload';
import '@saberlayer/avatar-upload/dist/index.css';
```

### CommonJS

```jsx
const { AvatarUpload } = require('@saberlayer/avatar-upload');
require('@saberlayer/avatar-upload/dist/index.css');
```

### UMD

```html
<link rel="stylesheet" href="https://unpkg.com/@saberlayer/avatar-upload/dist/index.css" />
<script src="https://unpkg.com/@saberlayer/avatar-upload/dist/index.umd.js"></script>
```

### 使用示例

```jsx
import React from 'react';
import { AvatarUpload } from '@saberlayer/avatar-upload';
import '@saberlayer/avatar-upload/dist/index.css';

const App = () => {
  const handleChange = (url) => {
    console.log('头像地址：', url);
  };

  return (
    <AvatarUpload
      value="https://example.com/avatar.jpg"
      onChange={handleChange}
      maxSize={2} // 最大文件大小，单位MB，默认2MB
    />
  );
};

export default App;
```

## API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| value | 头像URL | string | - |
| onChange | 头像变化时的回调函数 | (url: string) => void | - |
| maxSize | 最大文件大小，单位MB | number | 2 |

## 特性

- 支持图片上传
- 支持图片裁剪
- 支持预览
- 支持文件大小限制
- 支持 JPG/PNG 格式
- 美观的 UI 界面
- 支持 TypeScript
- 支持 Tree Shaking
- 支持多种模块规范（ES Module/CommonJS/UMD）

## 开发

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build
```

## License

MIT 

## 目录结构

```
dist/
  ├── index.cjs.js      # CommonJS 版本
  ├── index.cjs.js.map
  ├── index.esm.js      # ES Module 版本
  ├── index.esm.js.map
  ├── index.umd.js      # UMD 版本
  ├── index.umd.js.map
  ├── index.d.ts        # TypeScript 类型声明
  └── index.css         # 样式文件
```