简介

katoto-business 是针对,高频使用的组件进行抽象出来的一个组件集合。通常放置业务公用组件 主体可包含

• 页面级组件（可抽离的页面）
• 功能组件 (弹窗、城市选择等)
• 工具方法（tools & useHooks）

目录注释：

开发

$ yarn

// 查看文档 & 开发组件启动
$ yarn start

// 构建文档查阅html
$ yarn build
// 利用http-server，进入cd dist/index.html即可查看文档

// 发布：构建本地包
$ yarn build
// 发布doc 静态站点

⚠️注意：命名方式上，业务组件大驼峰、工具函数小驼峰、hooks使用use开头

import { Button, centToYuan, useMounted } from 'katoto-business'

引入 katoto-big-calendar 包

react 生态精选组件

| 类型 | 推荐组件 | | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | 可视化图表 | Ant Design Charts | AntV 数据可视化解决方案 | | React Hooks 库 | ahooks | | 表单 | ProForm | Formily | react-hook-form | formik | | 布局 | react-grid-layout | react-grid-system | | 拖拽 | dnd-kit | react-beautiful-dnd | react-dnd | react-sortable-hoc | | 代码编辑器 | react-codemirror2 | react-monaco-editor | | 可视化图表 | Ant Design Charts | AntV 数据可视化解决方案 | | 富文本编辑器 | react-quill | braft-editor | | JSON 显示器 | react-json-view | | 拾色器 | react-color | | 响应式 | react-responsive | react-media | | 复制到剪贴板 | react-copy-to-clipboard | | 页面 meta 属性 | react-helmet | react-helmet-async | | 图标 | react-fontawesome | react-icons | | 二维码 | qrcode.react | | 顶部进度条 | nprogress | | 应用国际化 | FormatJS | react-i18next ｜ | | 代码高亮 | react-syntax-highlighter | | Markdown 渲染 | react-markdown | | 无限滚动 | rc-virtual-list | react-infinite-scroll-component | | 地图 | react-google-maps | google-map-react | react-amap 高德 | | 视频播放 | react-player | video-react | video.js | | 右键菜单 | react-contexify | | Emoji | emoji-mart | | 图片裁切 | antd-img-crop | react-image-crop | | 趋势线 | react-sparklines | | 关键字高亮 | react-highlight-words | | 右键菜单 | react-contexify | | 文字轮播 | react-text-loop-next | react-fast-marquee | | 动画 | react-move | Ant Motion | react-spring | | 页脚 | rc-footer | | 金额格式化 | react-number-format | react-currency-input-fiel |

前端/设计/产品必备工具

| 类型 | 推荐产品 | | ------------ | ------------------------------------------------------------------------: | | 文档管理 | 语雀 | | 图标 | iconfont | | Sketch 插件 | Kitchen | | 在线代码编辑 | codesandbox | codepen | | 图片压缩 | tinypng | | 图表分类查询 | 图之典 |

资料

基于 Dumi 和 father-build 构建 father-build 是如何工作的