---
group:
   title: 全局配置
   order: 1
title: FanProvider
order: 1
---


## FanProvider 全局配置

在入口页面引入后将应用于全局组件。`ConfigProvider` 负责主题、语言等配置，
`FanProvider` 保持原有 `value` 用法，并将 antd 的反馈实例注入现有
`FanContext`。如果外层没有 antd `App`，`FanProvider` 会自动挂载；如果外层已有，
则直接复用已有实例。

```tsx | pure
import { ConfigProvider } from 'antd';
import {
  FanDefaultConfig,
  FanProvider,
  useFanContext,
} from 'fan-standard-comp';
import _ from 'lodash';

// 定义要合并的对象
const newConfig = { 
  input: { placeholder: '请输入文本' }, textarea: { placeholder: '请输入', maxLength: 3 },
  StandardFilter: {
    collapseable: true,
    formLayout: 'horizontal', // 优先级低于单独配置
    gridLayout: 'horizontal', // 表单与按钮组分别单独一行
    // 配置表单组的栅格
    itemGroupConfig: {
      // size: 'xlg', // 三栏展示
      size: 'xxlg', // 四栏展示
      // columnCount: 4, // 四栏展示 
      // displayLayout: { labelCol: { span: 6 }, wrapperCol: { span: 18 }, }
    },
  },
  StandardTable: {
    columnsConfig: {
      // 序号列的扩展配置
      orderNumber: {
        // width: 80
      },
      // 操作列的扩展配置
      action: {
        // min: 3,
        // width: 115,
        // title: '操作列名',
        align: 'left',
        // moreText: '更多',
        // moreIcon: <CaretDownOutlined/>
      },
      // 其他列的扩展配置
      otherColumn: {
        ellipsis: true,
      }
    }
  },
};
const mergedObj = _.merge({}, FanDefaultConfig, newConfig); // 使用工具进行合并（会覆盖原先的配置项）


return (
  <ConfigProvider theme={theme} locale={locale}>
    <FanProvider value={mergedObj}>
      <RootApp />
    </FanProvider>
  </ConfigProvider>
);
```

组件库内的 React 组件通过 `useFanContext()` 获取反馈实例：

```tsx | pure
const { message, notification, modal } = useFanContext();

message?.success('操作成功');
```

已有应用继续使用 `FanProvider`，无需替换 Provider 名称。应用已经统一挂载 antd
`App` 时，也可以保持 `ConfigProvider > App > FanProvider` 的层级，`FanProvider`
会直接复用外层反馈实例。

未配置 `FanProvider` 时，组件会自动回退到 antd 的 `message`、
`notification` 和 `Modal` 静态方法，因此 Uploader 等组件的提示仍可以正常使用。
需要让反馈内容继承 `ConfigProvider` 的主题、语言等上下文时，仍建议在应用入口
使用 `FanProvider`。

### FanDefaultConfig 默认配置项

| 名称      | 说明                                      | 类型         | 默认值 | 可选值 |
|----------|------------------------------------------|-------------|-------|----|
| locale |语言包| String | zh-cn |-|


### FanProvider 配置项

| 名称      | 说明                                      | 类型         | 默认值 | 可选值 |
|----------|------------------------------------------|-------------|-------|----|
| StandardFilter |筛选| Object | |-|
| StandardTable |表格| Object |  |-|
| StandardModal |弹窗| Object | |-|
| Field |表单控件| Object |{} | `{extendComponents:[{extendType,component }] }`|
| select |下拉控件| Object |{} ||



### Field extendComponents 配置项
>>
> 配置注意事项：全局`FanProvider`配置
>
> - 不建议 `extendComponents` 与 `<Field/>` 相关的控件在同一个组件内使用，特别是如果还配置了 `onChange` 且对组件内的 `useState相关数据` 进行更新，这种情况下控件选中更新会同时触发`extendComponents`的重复渲染，导致溢出或者其他已经填写值的控件被清空数据。
>
> - 建议 `extendComponents` 配置使用引入的方式传给 `FanProvider.value.Field`[参考](/components/field#docs-components-field-demo-extend)
> 

| 名称      | 说明                                      | 类型         |  可选值 |
|----------|------------------------------------------|-------------|----|
| extendType |控件类型| `string` |不能使用现有的type值 |
| component |自定义组件| `ReactNode` 或 `function()` | - |