• Button
  • Alert
  • Icon
  • Input
  • AutoComplete
  • Menu
  • Tab
  • Progress
  • Transition
  • Upload
  • UploadList
  • Progress
  • 发请求
  • 对拖拽上传的文件类型检查
  • 拖拽上传
  • Carousel
  • CarouselArrow 左右的箭头
  • CarouselIndicator 下面的指示器

整体架构

使用 monorepo 的方式，用于开发UI组件库和测试UI组件库

  1. Ha0ranUI
  2. ├─ .gitignore
  3. ├─ lerna-debug.log
  4. ├─ lerna.json
  5. ├─ package.json
  6. ├─ packages 
  7. │  ├─ test-ui-component // 测试UI组件库
  8. │  └─ ui-with-rollup // UI组件库
  9. │     ├─ .babelrc
  10. │     ├─ .gitignore
  11. │     ├─ components
  12. │     ├─ dist
  13. │     ├─ index.js
  14. │     ├─ package.json
  15. │     ├─ README.md
  16. │     ├─ rollup.config.js
  17. │     ├─ tsconfig.json
  18. │     ├─ yarn-error.log
  19. │     └─ yarn.lock
  20. └─ yarn.lock

Upload组件

参考 rc-upload & antd

  1. 📦Upload
  2.  ┣ 📜AjaxUpload.tsx // 上传组件
  3.  ┣ 📜attr-accept.ts // 拖拽上传时对类型做检查
  4.  ┣ 📜dragger.tsx
  5.  ┣ 📜index.ts
  6.  ┣ 📜interface.tsx // 类型接口
  7.  ┣ 📜request.ts // 发送ajax请求
  8.  ┣ 📜traverseFileTree.ts // 遍历文件夹
  9.  ┣ 📜uid.ts // 生成uid
  10.  ┣ 📜Upload.tsx
  11.  ┗ 📜uploadList.tsx

request 使用原生 ajax 发送请求，需要调用 onprogress 方法上传进度

Carousel 组件

需要考虑到左右箭头，下面 indicator（样式、位置）、轮播滚动方向、滚动动画等