Office Share

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

特性

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

安装

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

使用方法

基础导入

ES模块（推荐）：

import { FolderDialog, useFolderList } from '@baye/office-share';
import '@baye/office-share/styles';

CommonJS：

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

重要提示：

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

文件夹对话框组件

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

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

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

{
  "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"
}

开发

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

# 安装依赖
pnpm install

# 启动开发模式
pnpm dev

# 构建项目
pnpm build

# 运行示例
cd example
pnpm dev

示例项目

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

cd example
pnpm install
pnpm dev

构建和发布

# 清理构建目录
pnpm clean

# 构建项目
pnpm build

# 发布到 npm
npm publish

许可证

MIT © [default_user]

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

0.1.0

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