@baye/office-share/README.md

A React component library for office document sharing and folder management

# Office Share

一个基于 React + TypeScript + Antd 的办公文档共享组件库，提供文件夹管理和文档操作功能。

## 特性

- 🗂️ **文件夹管理**: 提供文件夹选择、创建、移动等功能
- 📄 **文档操作**: 支持文档的基本操作和管理
- 🎨 **美观UI**: 基于 Antd 设计系统，提供一致的用户体验
- 📱 **响应式**: 支持移动端和桌面端
- 🔧 **TypeScript**: 完整的类型支持
- ⚡ **现代化**: 使用最新的 React 18+ 和 Vite 构建

## 安装

```bash
npm install office-share
# 或
yarn add office-share
# 或
pnpm add office-share
```

## 使用方法

### 基础导入

**ES模块（推荐）：**
```typescript
import { FolderDialog, useFolderList } from '@baye/office-share';
import '@baye/office-share/styles';
```

**CommonJS：**
```javascript
const { FolderDialog, useFolderList } = require('@baye/office-share');
// 注意：CSS需要通过构建工具或手动引入
```

**重要提示：** 
- ES模块格式自动包含CSS导入，推荐使用
- CommonJS格式需要手动导入CSS文件：`@baye/office-share/styles`
- 确保你的构建工具（Webpack、Vite等）支持CSS文件处理

### 文件夹对话框组件

```typescript
import React, { useState } from 'react';
import { FolderDialog } from 'office-share';

const App = () => {
  const [visible, setVisible] = useState(false);
  const [selectedFolder, setSelectedFolder] = useState(null);

  return (
    <div>
      <button onClick={() => setVisible(true)}>
        选择文件夹
      </button>
      
      <FolderDialog
        visible={visible}
        onCancel={() => setVisible(false)}
        onOk={(folder) => {
          setSelectedFolder(folder);
          setVisible(false);
        }}
      />
    </div>
  );
};
```

### 使用 Hooks

```typescript
import { useFolderList, useFolderMoveRecentFolder } from 'office-share';

const FolderComponent = () => {
  const { data: folders, loading } = useFolderList();
  const { moveToRecent } = useFolderMoveRecentFolder();

  return (
    <div>
      {loading ? (
        <div>加载中...</div>
      ) : (
        folders?.map(folder => (
          <div key={folder.id} onClick={() => moveToRecent(folder.id)}>
            {folder.name}
          </div>
        ))
      )}
    </div>
  );
};
```

## API 文档

### 组件

#### FolderDialog

文件夹选择对话框组件。

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| visible | 是否显示对话框 | `boolean` | `false` |
| onCancel | 取消回调 | `() => void` | - |
| onOk | 确认回调 | `(folder: any) => void` | - |

### Hooks

#### useFolderList()

获取文件夹列表的 Hook。

**返回值：**
- `data`: 文件夹列表数据
- `loading`: 加载状态
- `error`: 错误信息

#### useFolderMoveRecentFolder()

移动文件夹到最近使用的 Hook。

**返回值：**
- `moveToRecent`: 移动到最近使用的函数

### 工具函数

#### 通用工具函数
- 提供常用的工具函数，具体请查看源码

#### 网络请求工具
- 基于 axios 封装的请求工具

## 依赖要求

### Peer Dependencies

以下依赖需要在你的项目中安装：

```json
{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0",
  "antd": ">=5.0.0",
  "axios": ">=1.0.0",
  "ahooks": ">=3.0.0",
  "classnames": ">=2.0.0"
}
```

## 开发

```bash
# 克隆项目
git clone https://github.com/default_user/office-share.git

# 安装依赖
pnpm install

# 启动开发模式
pnpm dev

# 构建项目
pnpm build

# 运行示例
cd example
pnpm dev
```

## 示例项目

项目中包含一个完整的示例项目，位于 `example/` 目录下，展示了如何使用这个组件库。

```bash
cd example
pnpm install
pnpm dev
```

## 构建和发布

```bash
# 清理构建目录
pnpm clean

# 构建项目
pnpm build

# 发布到 npm
npm publish
```

## 许可证

MIT © [default_user]

## 贡献

欢迎提交 Issue 和 Pull Request！

## 更新日志

### 0.1.0

- 🎉 初始版本发布
- ✨ 添加 FolderDialog 组件
- ✨ 添加 useFolderList 和 useFolderMoveRecentFolder hooks
- ✨ 添加工具函数和类型定义