@gmfe/react

简介

@gmfe/react 是 gmfe 组件库的核心 UI 包，提供 70+ 个 React 组件，涵盖表单、布局、导航、反馈、数据展示等常用场景。是所有其他 gmfe 包的基础依赖。

安装

npm install @gmfe/react

快速使用

import { Button, Dialog, Form, Input, Select, Table } from '@gmfe/react'

function App() {
  return (
    <Button type="primary" onClick={() => Dialog.alert('Hello!')}>
      点击
    </Button>
  )
}

示例

表单提交

import { Form, FormItem, FormButton, Button } from '@gmfe/react'

function App() {
  return (
    <Form
      labelWidth="100px"
      onSubmit={(values) => console.log('提交数据', values)}
    >
      <FormItem label="名称" required>
        <input name="name" placeholder="请输入名称" />
      </FormItem>
      <FormItem label="数量">
        <input name="quantity" type="number" />
      </FormItem>
      <FormButton>
        <Button type="primary" htmlType="submit">提交</Button>
        <Button htmlType="reset">重置</Button>
      </FormButton>
    </Form>
  )
}

多栏表单布局

import { Form, FormItem, FormButton, FormBlock, Button, Select } from '@gmfe/react'

function App() {
  return (
    <Form labelWidth="100px">
      <FormBlock col={2}>
        <FormItem label="名称" required>
          <input name="name" />
        </FormItem>
        <FormItem label="地区">
          <Select data={areaList} />
        </FormItem>
      </FormBlock>
      <FormButton>
        <Button type="primary" htmlType="submit">提交</Button>
      </FormButton>
    </Form>
  )
}

弹窗交互

import { Button, Dialog, Drawer } from '@gmfe/react'

function App() {
  return (
    <div>
      <Button onClick={() => Dialog.alert('操作成功')}>提示</Button>

      <Button onClick={() => {
        Dialog.confirm({
          title: '确认删除',
          children: '删除后不可恢复，是否继续？',
          onOK: async () => {
            await deleteApi()
          }
        })
      }}>确认对话框</Button>

      <Button onClick={() => {
        Drawer.open({
          title: '详情',
          children: <div>抽屉内容</div>
        })
      }}>打开抽屉</Button>
    </div>
  )
}

Sheet 底部弹出表格

import { Sheet, SheetColumn, SheetSelect, SheetAction, Button } from '@gmfe/react'

function App() {
  const [data, setData] = useState(listData)
  const [selected, setSelected] = useState([])

  return (
    <Sheet list={data}>
      <SheetColumn field="id" name="ID" />
      <SheetColumn field="name" name="名称" />
      <SheetColumn field="name" name="描述">
        {(name, index, record) => `商品：${name}，编号：${record.id}`}
      </SheetColumn>
      <SheetSelect
        onSelect={(checked, index) => {
          const next = data.slice()
          next[index]._gm_select = checked
          setData(next)
        }}
      />
      <SheetAction>
        {(checkedList) => (
          <Button onClick={() => console.log('已选', checkedList)}>批量操作</Button>
        )}
      </SheetAction>
    </Sheet>
  )
}

组件列表

表单组件

| 组件 | 说明 | |------|------| | Form | 表单容器，支持校验、提交、重置 | | FormItem | 表单项，配合 Form 使用 | | FormButton | 表单按钮组 | | FormBlock | 表单块 | | FormGroup | 表单分组 | | FormPanel | 表单面板 | | Input | 文本输入框 | | InputNumber | 数字输入框 | | InputNumberV2 | 数字输入框 V2 | | Select | 下拉选择框 | | Option | 选择框选项 | | Checkbox | 复选框 | | CheckboxGroup | 复选框组 | | Radio | 单选框 | | RadioGroup | 单选框组 | | Switch | 开关 | | DatePicker | 日期选择器 | | DateRangePicker | 日期范围选择器 | | Calendar | 日历 | | TimeSpan | 时间段 | | TimeSpanPicker | 时间段选择器 | | Cascader | 级联选择器 | | CascaderSelect | 级联选择（Select 形式） | | ColorPicker | 颜色选择器 | | Uploader | 文件上传器 | | ImgUploader | 图片上传器 | | Validator | 表单校验工具 |

布局组件

| 组件 | 说明 | |------|------| | LayoutRoot | 根布局容器 | | Flex | 弹性布局 | | Col | 栅格列 | | Row | 栅格行 | | Divider | 分割线 | | Collapse | 折叠面板 |

导航组件

| 组件 | 说明 | |------|------| | Nav | 导航栏 | | Tabs | 标签页 | | Steps | 步骤条 | | Breadcrumb | 面包屑（见 @gmfe/frame） | | Pagination | 分页器 | | PaginationV2 | 分页器 V2 | | PaginationText | 文本分页器 | | Dropper | 下拉刷新 |

反馈组件

| 组件 | 说明 | |------|------| | Dialog | 对话框 | | Modal | 模态框 | | RightSideModal | 右侧模态框 | | CleanModal | 简洁模态框 | | Drawer | 抽屉 | | Tip | 轻提示 | | ToolTip | 文字提示 | | Popover | 气泡卡片 | | Loading | 加载中 | | LoadingFullScreen | 全屏加载 | | LoadingChunk | 区块加载 | | Mask | 遮罩层 | | NProgress | 顶部进度条 | | Progress | 进度条 | | ProgressCircle | 环形进度条 |

数据展示

| 组件 | 说明 | |------|------| | Table | 表格（见 @gmfe/table） | | List | 列表 | | Tree | 树形控件 | | TreeV2 | 树形控件 V2 | | Transfer | 穿梭框 | | TransferGroup | 分组穿梭框 | | TransferV2 | 穿梭框 V2 | | Carousel | 轮播图 | | ImagePreview | 图片预览 | | PicturePreview | 图片预览 V2 | | LazyImg | 图片懒加载 | | FlipNumber | 翻牌数字 | | Price | 价格展示 | | LevelList | 层级列表 | | LevelSelect | 层级选择 | | TableSelect | 表格选择 | | Selection | 选择组件 | | Sheet | 底部弹出表格 | | SheetColumn | Sheet 列 | | SheetAction | Sheet 操作 | | SheetSelect | Sheet 选择 | | SheetBatchAction | Sheet 批量操作 | | Box | 卡片容器 | | BoxForm | 表单卡片 | | BoxTable | 表格卡片 | | BoxPanel | 面板卡片 | | Badge | 标记 | | Tag | 标签 | | EditableText | 可编辑文本 |

操作组件

| 组件 | 说明 | |------|------| | Button | 按钮 | | DropDown | 下拉菜单 | | DropDownItems | 下拉菜单项组 | | DropDownItem | 下拉菜单项 | | DropSelect | 下拉选择 | | FilterSelect | 筛选选择 | | MultipleFilterSelect | 多选筛选 | | MoreSelect | 多选组件 | | Affix | 固定定位 | | FunctionSet | 功能设置 | | IconDownUp | 上下切换图标 | | PopupContentConfirm | 弹窗确认内容 | | RecommendInput | 推荐输入 | | Storage | 本地存储 |

相关包

| 包名 | 说明 | |------|------| | @gmfe/locales | 国际化支持 | | @gmfe/table | 基于 react-table-v6 的高级表格 | | @gmfe/table-x | 基于 react-table v7 的高级表格 | | @gmfe/keyboard | 表格键盘导航 | | @gmfe/frame | 页面框架布局 | | @gmfe/business | 业务组件 | | @gmfe/cropper | 图片裁剪 | | @gmfe/sortable | 拖拽排序 | | @gmfe/qiniu-image | 七牛云图片处理 | | @gmfe/tour | 引导式教程 | | @gmfe/react-deprecated | 已废弃组件 |

注意事项

• 依赖 @svgr/webpack ^4.3.2 作为 peer dependency，确保 webpack 配置了 svgr loader。
• 组件支持 React >= 16.12.0。
• 国际化功能依赖 @gmfe/locales，组件内部已集成。
• 所有组件的详细 API 文档请查看各组件目录下的 README.md。