react-mgm

简介

react-mgm 是一套基于 React 的移动端 UI 组件库，提供 48+ 个高质量组件，涵盖表单、布局、浮层、数据展示、业务组件等多个领域。适用于移动端 Web 应用开发。

安装

npm install react-mgm

peerDependencies

依赖包	版本
react	^16.8.0
react-dom	^16.8.0
prop-types	^15.6.2
classnames	^2.2.6
lodash	^4.17.10
big.js	^5.2.2
gm-util	^5.9.1
weui	^1.1.3

使用

快速开始

import { Button, Toast, Dialog, Page, Flex } from 'react-mgm'

function App() {
  return (
    <Page>
      <Page.Header title="标题" />
      <Page.Body>
        <Flex>内容区域</Flex>
        <Button onClick={() => Toast.tip('Hello!')}>点击提示</Button>
      </Page.Body>
    </Page>
  )
}

引入样式

import 'react-mgm/src/index.less'

国际化

import { setLocale } from 'react-mgm'

// 设置语言
setLocale('en')

导出列表

基础组件

组件	说明	文档
Button	按钮	README
Flex	弹性布局	README
Loading	加载指示器	README
Divider	分割线	README
LazyImg	图片懒加载	README
Mask	遮罩层	README
CursorFix	光标修复	README

表单组件

组件	说明	文档
Input	输入框	README
Textarea	多行文本框	README
InputNumber	数字输入框	README
Radio	单选框	README
Select	选择器	README
Keyboard	自定义键盘	README
Counter	计数器	README
Canvas	Canvas 画布	README
Signature	手写签名	README
Uploader	文件上传	README

选择器组件

组件	说明	文档
Picker	选择器	README
ConfirmPicker	确认选择器	README
CouplingPicker	联动选择器	README
ConfirmCouplingPicker	确认联动选择器	README
Calendar	日历	README
TimeSelect	时间选择	README

布局组件

组件	说明	文档
Page	页面容器	README
Header	页面头部	README
Tabs	标签页	README
List	列表	README
Cells	单元格容器	README
Cell	单元格	README
CellsTitle	单元格标题	README
CellsTips	单元格提示	README
CellHeader	单元格头部	README
CellBody	单元格主体	README
CellFooter	单元格底部	README
CellSwipe	滑动单元格	README
CellSwitch	开关单元格	README

浮层组件

组件	说明	文档
Dialog	对话框	README
Alert	警告对话框	README
Confirm	确认对话框	README
Popup	弹出层	README
Toast	轻提示	README
ActionSheet	操作面板	README
InnerLayer	内层浮层	README
PreviewImage	图片预览	README

数据展示

组件	说明	文档
Price	价格显示	README
FlipNumber	翻牌数字	README
ProgressBar	进度条	README
LetterIndex	字母索引	README
LetterIndexMultiple	多组字母索引	README
Tooltip	文字提示	README
Trigger	触发器	README

搜索组件

组件	说明	文档
Search	搜索框	README
SearchPage	搜索页面	README
FakeSearch	伪搜索框	README

滚动与无限加载

组件	说明	文档
Infinite	无限滚动列表	README
InfiniteBox	无限滚动容器	README
ScrollIntoView	滚动到可视区域	README
LetterIndex	字母索引（同时支持滚动定位）	README

滑块组件

组件	说明	文档
Slider	滑块（带标签）	README
SliderLess	滑块（无标签）	README
SliderFlag	标记滑块	README

工具组件

组件	说明	文档
NProgress	页面顶部进度条	README
LayoutRoot	布局根容器	README
Storage	本地存储	README
Square	方块占位	README

工具函数

导出项	说明
setLocale	设置国际化语言

发版流程

本项目已配置 GitHub Actions 自动发版，无需手动操作。

触发条件

当代码 push 或 merge 到 master 分支，且 src/ 或 package.json 有变更时，自动触发。

自动执行流程

1. 检查是否为发版 commit（避免循环触发）
2. 安装依赖
3. 版本号自动 patch +1（如 8.3.3 → 8.3.4），并提交到 master
4. 自动发布到 npm

版本号规则

• 使用 npm version patch，每次自动在补丁号位 +1
• 如需手动修改主版本号或次版本号，请在 package.json 中修改后推送

前置要求

仓库需配置以下 Secrets（Settings > Secrets and variables > Actions）：

Secret	说明
NPM_TOKEN	npm 发布 token

如何发布

正常开发流程即可，无需额外操作：

# 开发完成后，合并到 master
git checkout master
git merge your-feature-branch
git push origin master

# GitHub Actions 会自动完成版本更新和 npm 发布

注意事项

• 本组件库基于 React 16.8+ 开发，使用了 React Hooks 和 Function Component
• 样式基于 Less，使用时需要确保 Less loader 配置正确
• 组件依赖 weui 样式基础，部分组件的样式风格与 weui 一致
• 国际化支持通过 setLocale 切换语言
• 各组件的详细 API 和使用示例请查看对应组件目录下的 README.md