upload-pulse

React 文件上传进度 UI 组件库：深色/浅色主题、拖拽投放、格式限制、多选与数量上限、XHR / Mock Hooks。

安装

npm install upload-pulse

Peer dependencies： react、react-dom（>=18）

样式： 需配合 Tailwind CSS v4 使用。

快速开始

1. 引入样式

在应用入口 CSS 中：

@import 'tailwindcss';
@import 'upload-pulse/styles.css';

upload-pulse/styles.css 已包含组件所需的 Tailwind utility 与动画，一般无需再 @source 扫描包内 JS。

若你自行从源码集成组件（非 npm 包），需确保 Tailwind 能扫描到组件目录，例如：

@import 'tailwindcss';
@source "./node_modules/upload-pulse/dist/index.js";
@import 'upload-pulse/styles.css';

2. 使用组件

import { Upload, UploadPicker, UploadWithUpload } from 'upload-pulse';

function App() {
  return (
    <>
      <UploadPicker
        config={{
          accept: ['.xlsx', '.xls'],
          multiple: true,
          maxCount: 5,
          showButton: true,
          drag: { enabled: true, showDropzone: true },
        }}
        currentCount={0}
        onFilesSelected={(files) => console.log(files)}
      />

      <UploadWithUpload
        file={file}
        url="/api/upload"
        config={{ theme: 'dark', pausable: false }}
        onComplete={() => {}}
      />
    </>
  );
}

导出

| 组件 / Hook | 说明 | |-------------|------| | Upload | 受控进度卡片 | | UploadPicker | 选文件 + 拖拽 + 校验 | | UploadDropzone | 拖拽投放区 | | UploadWithUpload | XHR 上传封装 | | UploadWithMock | Mock 演示 | | useUpload | XHR Hook | | useUploadPicker | 选文件校验 | | useUploadDragDrop | 拖拽逻辑 | | useUploadDisplay | 进度展示计算 |

类型与常量：UploadConfig、UploadPickerConfig、DARK_THEME_COLORS、LIGHT_THEME_COLORS 等。

本地开发

源码目录遵循 Ant Design 规范：src/components/upload/ 下按组件分子目录，interface.ts 定义类型，hooks/、style/、utils/ 分模块组织。

npm install
npm run dev

浏览器会打开预览页，可直接体验 UploadPicker 与 UploadWithMock 的交互效果。修改 src/ 下组件源码会热更新。

构建组件库：

npm run build

预览生产构建：

npm run preview

发布

npm run build
npm publish --access public

在其他项目中链接本地包

{
  "dependencies": {
    "upload-pulse": "file:../UploadPulse"
  }
}

安装后执行 npm install，用法与 npm 包相同。

License

MIT