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