# 组件配置属性完整参考

## 目录

- [渲染器使用](#渲染器使用)
  - [基础使用](#基础使用)
  - [从后端加载配置](#从后端加载配置)
  - [完整属性列表](#完整属性列表)
  - [事件与数据绑定](#事件与数据绑定)
  - [多模式支持](#多模式支持)
- [全局通用属性](#全局通用属性)
  - [基础属性](#基础属性)
  - [布局属性](#布局属性)
  - [表单项属性](#表单项属性)
  - [校验属性](#校验属性)
  - [事件属性](#事件属性)
  - [服务编排属性](#服务编排属性)
- [表单输入组件](#表单输入组件)
  - [ElInput - 文本输入框](#elinput---文本输入框)
  - [ElSelect - 下拉选择框](#elselect---下拉选择框)
  - [ElRadio - 单选框](#elradio---单选框)
  - [ElCheckbox - 复选框](#elcheckbox---复选框)
  - [ElDatePicker - 日期选择器](#eldatepicker---日期选择器)
  - [ElTimePicker - 时间选择器](#eltimepicker---时间选择器)
  - [ElInputNumber - 数字输入框](#elinputnumber---数字输入框)
- [按钮与文本组件](#按钮与文本组件)
  - [ElButton - 按钮](#elbutton---按钮)
  - [ElText - 静态文本](#eltext---静态文本)
- [布局组件](#布局组件)
  - [CustomComponentFormLayout - 表单布局](#customcomponentformlayout---表单布局)
  - [CustomComponentTabs - 标签页](#customcomponenttabs---标签页)
  - [CustomComponentCollapse - 折叠面板](#customcomponentcollapse---折叠面板)
  - [CustomComponentDialog - 对话框](#customcomponentdialog---对话框)
  - [CustomComponentCycle - 循环列表](#customcomponentcycle---循环列表)
- [数据展示组件](#数据展示组件)
  - [CustomComponentTable - 表格](#customcomponenttable---表格)
  - [ElPagination - 分页](#elpagination---分页)
- [附录](#附录)
  - [组件类型映射表](#组件类型映射表)
  - [配置命名规则](#配置命名规则)

---

## 渲染器使用

> **说明**: 渲染器通过三层封装对外暴露:
> - **PC端**: `resolver-web.vue` → `resolver-common.vue` → `index.jsx`
> - **H5端**: `resolver-H5.vue` → `resolver-common.vue` → `index.jsx`
> - 用户使用的是最外层的 `resolver-web.vue` 或 `resolver-H5.vue`

### 基础使用

```vue
<template>
  <Resolver
    :busiIdentityId="'PAGE_USER_001'"
    v-model="formData"
    :mode="mode"
    :selects="selectOptions"
    :axiosInstance="axios"
    :messageInstance="ElMessage"
    :loadingInstance="loadingService"
  />
</template>

<script setup>
import { ref } from 'vue'
import Resolver from 'resolver-egretimp-plus/web'
import { ElMessage } from 'element-plus'

// 表单数据(双向绑定)
const formData = ref({})

// 模式:operate | detail | log
const mode = ref('operate')

// 下拉选项(可选,不传则从配置平台自动加载)
const selectOptions = ref({})
</script>
```

> **提示**: 基础使用模式下,只需传入 `busiIdentityId`,渲染器会自动从配置平台加载页面配置和枚举数据。

### 从后端加载配置

> **核心说明**: `busiIdentityId` 是配置平台的页面唯一标识。渲染器内置了配置加载逻辑,只需传入该标识,即可自动从配置平台获取页面配置和枚举数据,无需手动调用接口。

```vue
<template>
  <Resolver
    ref="resolverRef"
    :busiIdentityId="busiIdentityId"
    v-model="formData"
    :selects="selects"
    :lang="lang"
    :loadingInstance="loadingInstance"
    :messageInstance="ElMessage"
    @on-loaded-config-competed="handleConfigLoaded"
    @on-loaded-selects-competed="handleSelectsLoaded"
  />
</template>

<script setup>
import { ref } from 'vue'
import Resolver from 'resolver-egretimp-plus/web'
import { ElMessage, ElLoading } from 'element-plus'

const resolverRef = ref(null)
const formData = ref({})
const lang = ref('zh')

// 配置平台页面标识(关键属性)
const busiIdentityId = ref('PAGE_USER_MANAGEMENT_001')

// 下拉选项(会自动填充)
const selects = ref({})

// 配置加载完成回调
const handleConfigLoaded = (config) => {
  console.log('✅ 页面配置加载完成', config)
}

// 枚举加载完成回调
const handleSelectsLoaded = (selectsData) => {
  console.log('✅ 枚举数据加载完成', selectsData)
}

// 表单校验
const handleSubmit = async () => {
  await resolverRef.value.validate((valid) => {
    if (valid) {
      console.log('表单数据:', formData.value)
    }
  })
}
</script>
```

> **说明**: 
> - 渲染器会在组件挂载时自动根据 `busiIdentityId` 加载配置
> - 如果传入了 `nativeConfig`,则不会自动加载,直接使用传入的配置
> - 如果传入了 `selects` 对象,枚举数据会自动合并到该对象中

### 完整属性列表

> **重要说明**: 
> - 渲染器通过 `v-bind="attrs"` 透传属性机制，`index.jsx` 中定义的所有属性（除 `config` 外）都可以直接使用
> - `config` 属性被中间层覆盖，如需手动传入配置请使用 `nativeConfig`

#### 完整属性列表

| 属性名 | 类型 | 默认值 | 说明 | 示例 |
|--------|------|--------|------|------|
| **核心属性** |  |  |  |  |
| `busiIdentityId` | String | - | **配置平台页面标识**，用于自动加载页面配置 | `'PAGE_USER_001'` |
| `nativeConfig` | Object/Array | - | 外部传入的配置对象（不传则自动加载） | `{ pmPageMetaList: [] }` |
| `modelValue` | Any | null | 双向绑定的表单数据 | `{ username: 'test' }` |
| `mode` | String | 'operate' | 渲染模式 | `'operate'`, `'detail'`, `'log'` |
| `OPEN_DATA_RULES` | Boolean | 内置常量 | 是否开启根据数据加载组件逻辑 | `true` |
| `components` | Object | {} | 自定义组件注册 | `{ CustomInput: MyInputComponent }` |
| `selects` | Object | {} | 下拉选项数据（会被中间层合并处理） | `{ status_options: [...] }` |
| `dataLoad` | Boolean | false | 是否开始执行规则初始化 | `true` |
| **环境配置** |  |  |  |  |
| `lang` | String | 'zh' | 语言 | `'zh'`, `'en'` |
| `isH5` | Boolean | false | 是否移动端 | `true`, `false` |
| `requestTraceId` | String | 自动生成 | 请求追踪ID | `'trace-123'` |
| **依赖实例** |  |  |  |  |
| `axiosInstance` | Object/Function | null | Axios请求实例 | `axios` |
| `loadingInstance` | Object/Function | null | 加载服务实例 | `ElLoading.service()` |
| `messageInstance` | Object/Function | null | 消息提示实例 | `ElMessage` |
| `copyModal` | Object/Function | null | 保存成功弹框实例 | 自定义弹框函数 |
| `confirmInstance` | Object/Function | 内置函数 | 确认对话框实例 | `ElMessageBox.confirm` |
| `openChildDialogInstance` | Function | 内置函数 | 打开子对话框实例 | 自定义函数 |
| **数据配置** |  |  |  |  |
| `getNativeComps` | Function | 内置函数 | 获取自定义组件 | `() => ({composeComponents: {}})` |
| `polyfillConfigs` | Object | {} | **配置补充对象**,用于在低码平台配置不足时通过代码补充组件属性 | `{ 'hireRelat': (config) => ({}) }` |
| `dialogComponents` | Object | {} | 输入弹框组件中的组件 | `{ DialogInput: MyComponent }` |
| `axiosConfig` | Object | null | Axios配置对象 | `{ timeout: 5000 }` |
| `buttonActions` | Object | {} | 按钮的工作集合 | `{ submit: fn, save: fn }` |
| **加载事件** |  |  |  |  |
| `loadEvnetsReq` | Object | {} | 加载事件的额外请求参数 | `{ extraParam: 'value' }` |
| `loadEventsBefore` | Function | null | 加载事件前钩子 | `({reqConfig}) => {}` |
| `loadEventsAfter` | Function | null | 加载事件后钩子 | `(result) => result` |
| **请求参数** |  |  |  |
| `loadConfigReq` | Object | {} | 加载配置的额外请求参数 | `{ version: '1.0' }` |
| `builtPolyfillReq` | Object | {} | 所有内置接口的额外参数 | `{ token: 'xxx' }` |
| `businessIdentityReqData` | Object | {} | 加载服务中businessIdentity的额外参数 | `{ extraData: {} }` |
| `dialogReq` | Object | {} | 弹框页面传递的请求数据 | `{ dialogParam: 'value' }` |
| **弹框相关** |  |  |  |
| `parentRootValue` | Object | {} | 父页面传入的根数据（弹框场景） | `{ parentData: {} }` |
| `parentDynamicMapComp` | Object | {} | 父页面传入的配置（弹框场景） | `{ dynamicMap: {} }` |
| `selectionsObj` | Object | {} | 父页面已选中的数据（控制表格选中禁用） | `{ selections: [], primaryKeys: [] }` |
| **回调函数** |  |  |  |
| `messageCb` | Function | - | 提示语的回调 | `(msg) => {}` |
| `showCopyModal` | Function | - | 保存后弹框提示编码 | `(code) => {}` |
| `onLoadedConfigCompeted` | Function | - | 配置加载完成回调 | `(config) => {}` |
| `onLoadedSelectsCompeted` | Function | - | 枚举加载完成回调 | `(selects) => {}` |
| **致远BPM相关** |  |  |  |
| `openBpm` | Boolean | false | 是否开启致远流程功能 | `true` |
| `bpmMessage` | Object/Function | {} | 传递给致远的参数 | `{ workflowId: '123' }` |
| `bpmSubmitBtn` | String | '' | 配置了保存服务的按钮路径 | `'a->b->c'` |
| `bpmActions` | Object | {} | 致远按钮动作配置 | `{ submit: {...} }` |
| `bpmConfigs` | Object | {} | 致远额外配置 | `{ customValidate: fn }` |
| `bpmBtns` | Array | [] | 致远按钮列表 | `['submit', 'approve']` |
| `bpmBtnPosition` | Number | 3 | 致远按钮位置 | `3` |
| **模块加载** |  |  |  |
| `loadModuleCache` | Object | {} | 加载上传自定义组件需要的模块集合 | `{ moduleName: module }` |

### 事件与数据绑定

#### v-model 双向绑定

```vue
<template>
  <Resolver
    :config="config"
    v-model="formData"
  />
</template>

<script setup>
import { ref, watch } from 'vue'

const formData = ref({
  username: '',
  status: '1'
})

// 监听数据变化
watch(formData, (newVal) => {
  console.log('表单数据变化:', newVal)
}, { deep: true })
</script>
```

#### 获取组件 Ref

渲染器通过 `defineExpose` 暴露了以下方法,可通过 `ref` 调用:

| 方法名 | 类型 | 说明 | 示例 |
|--------|------|------|------|
| `validate` | Function | 表单校验方法 | `resolverRef.value.validate()` |
| `dynamicMapComp` | Object | 动态组件映射对象 | `resolverRef.value.dynamicMapComp` |
| `pageConfig` | Object | 当前页面配置 | `resolverRef.value.pageConfig` |
| `rootForm` | Object | 根表单引用 | `resolverRef.value.rootForm` |
| `getRequestTraceId` | Function | 获取请求追踪ID | `resolverRef.value.getRequestTraceId()` |
| `toExecuteLoadServices` | Function | 重新执行加载服务 | `resolverRef.value.toExecuteLoadServices()` |

```vue
<template>
  <Resolver
    ref="resolverRef"
    :config="config"
    v-model="formData"
  />
  <el-button @click="handleSubmit">提交</el-button>
</template>

<script setup>
import { ref } from 'vue'

const resolverRef = ref(null)
const formData = ref({})

// 校验表单
const handleSubmit = async () => {
  try {
    await resolverRef.value.validate()
    console.log('校验通过', formData.value)
  } catch (error) {
    console.error('校验失败', error)
  }
}

// 获取配置信息
const getConfig = () => {
  console.log('页面配置:', resolverRef.value.pageConfig)
}

// 重新执行加载服务
const reload = () => {
  resolverRef.value.toExecuteLoadServices()
}
</script>
```

### 多模式支持

#### 操作模式 (operate)

默认模式,所有字段可编辑:

```vue
<Resolver :config="config" v-model="data" mode="operate" />
```

#### 详情模式 (detail)

所有字段只读,以文本形式展示:

```vue
<Resolver :config="config" v-model="data" mode="detail" />
```

#### 日志模式 (log)

类似详情模式,但强调数据不可修改,用于查看历史记录:

```vue
<Resolver :config="config" v-model="data" mode="log" />
```

#### 模式切换示例

```vue
<template>
  <div>
    <el-radio-group v-model="currentMode">
      <el-radio label="operate">编辑</el-radio>
      <el-radio label="detail">查看</el-radio>
      <el-radio label="log">日志</el-radio>
    </el-radio-group>
    
    <Resolver
      :config="config"
      v-model="formData"
      :mode="currentMode"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const currentMode = ref('operate')
const formData = ref({})
</script>
```

### polyfillConfigs - 配置补充属性

> **核心说明**: `polyfillConfigs` 用于在低码平台配置无法满足需求时，通过代码动态补充或覆盖组件配置属性。

#### 使用场景

当遇到以下情况时，可以使用 `polyfillConfigs`：

1. **低码平台不支持的配置**: 某些复杂的业务逻辑或特殊属性在低码平台中无法配置
2. **动态计算属性**: 需要根据运行时数据动态计算组件属性
3. **自定义事件处理**: 需要为组件添加自定义的事件处理函数
4. **复杂的数据联动**: 需要基于其他组件的值动态修改当前组件的配置
5. **自定义校验规则**: 需要添加低码平台不支持的复杂校验逻辑

#### 工作原理

`polyfillConfigs` 是一个对象，其键名是组件的 `hireRelat`（组件层级路径），值是一个函数，该函数返回需要补充或覆盖的配置属性。

```javascript
polyfillConfigs: {
  '组件hireRelat路径': (config, instance, context) => {
    return {
      // 需要补充或覆盖的配置属性
    }
  }
}
```

**参数说明**:
- `config`: 当前组件的配置对象
- `instance`: 当前组件的 Vue 实例
- `context`: 上下文对象，包含：
  - `rootValue`: 当前页面的表单数据（ref 对象，需要通过 `.value` 访问）
  - `dynamicMapComp`: 动态组件映射对象
  - `parentRootValue`: 父级表单数据（仅在弹框页面场景下有值）
  - `parentDynamicMapComp`: 父级动态组件映射（仅在弹框页面场景下有值）

**匹配规则**:
- 使用 `hireRelat.endsWith(key)` 进行匹配
- 如果多个键都匹配成功，选择层级最明确（路径最长）的配置

#### 完整示例

**场景**: 在用户表单中，需要根据用户类型动态设置字段的必填规则和可见性，这些复杂的业务逻辑在低码平台中无法配置。

```vue
<template>
  <Resolver
    ref="resolverRef"
    :busiIdentityId="'PAGE_USER_FORM_001'"
    v-model="formData"
    :polyfillConfigs="polyfillConfigs"
    :lang="lang"
    :loadingInstance="loadingInstance"
    :messageInstance="ElMessage"
  />
</template>

<script setup>
import { ref, computed } from 'vue'
import Resolver from 'resolver-egretimp-plus/web'
import { ElMessage, ElLoading } from 'element-plus'

const resolverRef = ref(null)
const formData = ref({})
const lang = ref('zh')

// polyfillConfigs 配置补充
const polyfillConfigs = {
  // 示例1: 为单个组件补充配置
  'userType': (config, instance, context) => {
    return {
      // 动态设置必填规则
      requiredFlag: '1',
      // 添加自定义校验规则
      validators: [
        {
          validator: (rule, value, callback) => {
            if (value && !['admin', 'user', 'guest'].includes(value)) {
              callback(new Error('用户类型不合法'))
            } else {
              callback()
            }
          },
          trigger: 'change'
        }
      ],
      // 添加自定义事件
      onChange: (value) => {
        console.log('用户类型改变了:', value)
        // 可以在这里触发其他逻辑
      }
    }
  },

  // 示例2: 为嵌套组件补充配置（使用完整路径）
  'userForm->basicInfo->username': (config, instance, context) => {
    // 通过 context.rootValue 获取当前页面的表单数据
    const rootValue = context.rootValue?.value || {}
    
    return {
      // 根据用户类型动态设置必填
      requiredFlag: rootValue.userType === 'admin' ? '1' : '0',
      // 动态设置占位符
      defPlacehold: rootValue.userType === 'admin' 
        ? '请输入管理员账号' 
        : '请输入普通用户账号',
      // 添加自定义校验
      validators: [
        {
          validator: (rule, value, callback) => {
            const userType = rootValue.userType
            if (userType === 'admin' && value && value.length < 6) {
              callback(new Error('管理员账号至少6位'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ]
    }
  },

  // 示例3: 为多个同类型组件补充配置（使用通用路径）
  'email': (config, instance, context) => {
    return {
      // 添加邮箱格式校验
      validRegs: [
        {
          pattern: '/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/',
          message: '请输入正确的邮箱地址',
          messageEn: 'Please enter a valid email address'
        }
      ],
      // 动态设置提示内容
      hintFlag: '1',
      hintContentZh: '请输入公司邮箱',
      hintContentEn: 'Please enter your company email'
    }
  },

  // 示例4: 动态控制组件显示/隐藏
  'userForm->extraInfo->remark': (config, instance, context) => {
    // 通过 context.rootValue 获取当前页面的表单数据
    const rootValue = context.rootValue?.value || {}
    const userType = rootValue.userType
    
    return {
      // 只有管理员才显示备注字段
      hidden: userType === 'admin' ? '0' : '1',
      // 动态设置标签
      labelZh: userType === 'admin' ? '管理员备注' : '备注',
      labelEn: userType === 'admin' ? 'Admin Remark' : 'Remark'
    }
  },

  // 示例5: 为表格列补充配置
  'userTable': (config, instance, context) => {
    return {
      // 添加自定义操作列
      customColumns: [
        {
          label: '操作',
          width: 150,
          render: (row) => {
            return [
              h('el-button', {
                type: 'primary',
                size: 'small',
                onClick: () => handleEdit(row)
              }, '编辑'),
              h('el-button', {
                type: 'danger',
                size: 'small',
                onClick: () => handleDelete(row)
              }, '删除')
            ]
          }
        }
      ]
    }
  }
}

// 处理编辑
const handleEdit = (row) => {
  console.log('编辑:', row)
}

// 处理删除
const handleDelete = (row) => {
  console.log('删除:', row)
}
</script>
```

#### 简化示例

如果只需要为少量组件补充配置，可以使用简化的写法：

```vue
<script setup>
import { ref } from 'vue'

const polyfillConfigs = {
  // 仅为特定组件添加自定义校验
  'password': (config) => {
    return {
      validators: [
        {
          validator: (rule, value, callback) => {
            if (value && value.length < 8) {
              callback(new Error('密码长度不能少于8位'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ]
    }
  },
  
  // 为手机号字段添加格式校验
  'phone': (config) => {
    return {
      validRegs: [
        {
          pattern: '/^1[3-9]\\d{9}$/',
          message: '请输入正确的手机号'
        }
      ]
    }
  }
}
</script>
```

#### onVnodeMounted - 组件挂载生命周期

在 `polyfillConfigs` 中，经常需要使用 `onVnodeMounted` 钩子来执行组件挂载后的初始化逻辑。

**使用场景**:
- 组件渲染完成后执行初始化操作
- 获取 DOM 元素或组件实例
- 执行需要等待组件完全渲染后的逻辑
- 动态设置组件的初始值
- 触发自定义事件或服务调用

**使用方法**:

在 `polyfillConfigs` 返回的配置对象中添加 `onVnodeMounted` 属性：

```javascript
const polyfillConfigs = {
  'componentCode': (config, instance, context) => {
    return {
      onVnodeMounted: (props, vnode, selects) => {
        // 组件挂载后执行的逻辑
        console.log('组件已挂载')
      }
    }
  }
}
```

**参数说明**:

`onVnodeMounted` 函数接收三个参数：

1. **`props`** (Object)
   - 组件的 props 对象
   - 包含组件的所有配置属性
   - 可以通过 `props.config` 访问组件的配置对象
   - 可以通过 `props.modelValue` 访问组件的绑定值

2. **`vnode`** (VNode)
   - Vue 的虚拟节点对象
   - 代表当前渲染的组件实例
   - 可以通过 `vnode.component` 访问组件实例
   - 可以通过 `vnode.el` 访问 DOM 元素

3. **`selects`** (Object)
   - 下拉选项数据对象
   - 包含所有枚举数据
   - 可以用于动态设置下拉选项

**`this` 上下文**:

在 `onVnodeMounted` 函数中，`this` 指向一个上下文对象，包含：
- `this.dataLoad`: 数据加载状态（Boolean），表示数据是否已加载完成

**完整示例**:

```vue
<script setup>
import { ref, nextTick } from 'vue'

const polyfillConfigs = {
  // 示例1: 组件挂载后设置默认值
  'username': (config, instance, context) => {
    return {
      onVnodeMounted: (props, vnode, selects) => {
        // 访问组件配置
        console.log('组件配置:', props.config)
        
        // 访问表单数据
        console.log('表单数据:', context.rootValue.value)
        
        // 访问下拉选项
        console.log('下拉选项:', selects)
        
        // 访问数据加载状态
        console.log('数据是否加载完成:', this.dataLoad)
        
        // 设置默认值
        if (!props.modelValue) {
          props.config.refValue.value = '默认用户名'
        }
      }
    }
  },

  // 示例2: 组件挂载后触发自定义逻辑
  'userType': (config, instance, context) => {
    return {
      onVnodeMounted: (props, vnode, selects) => {
        // 获取 DOM 元素
        const el = vnode.el
        console.log('DOM 元素:', el)
        
        // 获取组件实例
        const componentInstance = vnode.component
        console.log('组件实例:', componentInstance)
        
        // 根据数据加载状态执行不同逻辑
        if (this.dataLoad) {
          console.log('数据已加载，执行初始化逻辑')
          // 执行需要数据加载完成后的逻辑
        } else {
          console.log('数据未加载，等待加载完成')
        }
        
        // 动态设置下拉选项
        if (selects) {
          console.log('可用选项:', selects.userTypeOptions)
        }
      }
    }
  },

  // 示例3: 组件挂载后调用服务
  'department': (config, instance, context) => {
    return {
      onVnodeMounted: async (props, vnode, selects) => {
        // 等待 DOM 更新
        await nextTick()
        
        // 获取表单数据
        const formData = context.rootValue.value
        
        // 如果有用户ID，加载部门数据
        if (formData.userId) {
          console.log('加载用户部门数据:', formData.userId)
          // 可以调用接口加载数据
          // const deptData = await loadDepartmentData(formData.userId)
          // props.config.refValue.value = deptData
        }
      }
    }
  },

  // 示例4: 结合数据加载状态使用
  'status': (config, instance, context) => {
    return {
      onVnodeMounted: (props, vnode, selects) => {
        // 检查数据是否加载完成
        const isDataLoaded = this.dataLoad
        
        if (isDataLoaded) {
          // 数据已加载，可以安全访问表单数据
          const currentValue = context.rootValue.value.status
          console.log('当前状态值:', currentValue)
          
          // 根据当前值执行逻辑
          if (currentValue === 'active') {
            console.log('用户状态为活跃')
          }
        }
      }
    }
  }
}
</script>
```

**简化示例**:

```javascript
const polyfillConfigs = {
  'field': (config) => {
    return {
      onVnodeMounted: (props, vnode, selects) => {
        // 最简单的使用方式
        console.log('组件已挂载', props.config.metaCode)
      }
    }
  }
}
```

**注意事项**:

1. **执行时机**: `onVnodeMounted` 在组件的 DOM 挂载完成后执行，此时可以安全访问 DOM 元素
2. **this 上下文**: 函数中的 `this` 不是指向组件实例，而是包含 `dataLoad` 的上下文对象
3. **异步操作**: 如需执行异步操作，可以将函数声明为 `async`
4. **错误处理**: 建议在 `onVnodeMounted` 中添加 try-catch 处理可能的错误
5. **与 onMounted 的区别**: `onVnodeMounted` 是 Vue 的 vnode 生命周期钩子，比组件的 `onMounted` 更早执行

#### 注意事项

1. **路径匹配**: `hireRelat` 是组件的层级路径，格式为 `父组件->子组件->孙组件`，路径越明确优先级越高
2. **属性覆盖**: `polyfillConfigs` 返回的属性会覆盖低码平台配置的相同属性
3. **性能考虑**: 避免在 `polyfillConfigs` 函数中执行耗时操作，会影响渲染性能
4. **访问表单数据**: 使用 `context.rootValue.value` 访问当前页面的表单数据
5. **弹框场景**: `context.parentRootValue` 和 `context.parentDynamicMapComp` 仅在弹框页面场景下才有值，普通页面请使用 `context.rootValue`
6. **调试技巧**: 可以在函数中 `console.log(config)` 查看当前组件的完整配置，便于调试

#### 与低码平台的协作流程

```
1. 在低码平台配置基础属性和布局
   ↓
2. 识别低码平台无法配置的部分
   ↓
3. 在代码中通过 polyfillConfigs 补充配置
   ↓
4. 渲染器自动合并低码配置和代码补充配置
   ↓
5. 最终渲染页面（代码补充配置优先级更高）
```

> **最佳实践**: 优先使用低码平台配置，只在必要时使用 `polyfillConfigs` 补充，保持配置的可维护性。

---

## 全局通用属性

> **说明**: 以下属性所有组件都可以使用，在配置中直接设置即可。

### Form-Item 包裹说明

渲染器会根据配置自动决定是否使用 `form-item` 组件包裹表单元素，PC端和移动端的处理逻辑不同：

#### 默认需要 Form-Item 包裹的组件

以下类型的组件**默认会被 form-item 包裹**（无需额外配置）：

**PC端 (Element Plus) 表单输入组件**:
- `ElInput` - 文本输入框（包括 `input`、`textarea`）
- `ElSelect` - 下拉选择框（`select`）
- `ElRadio` - 单选框（`radio`）
- `ElCheckbox` - 复选框（`checkbox`）
- `ElDatePicker` - 日期选择器（`date`、`date-range`）
- `ElTimePicker` - 时间选择器（`time`、`time-range`）
- `ElInputNumber` - 数字输入框（`number`）
- `ElCascader` - 级联选择器（`cascader`）
- `CustomComponentSelectEmployees` - 员工选择器（`select-employees`）
- `CustomComponentEditor` - 富文本编辑器（`rich-editor`）
- `CustomComponentTree` - 树形选择器（`tree`）
- `CustomComponentSteps` - 步骤条（`steps`）

**移动端 (H5) 表单输入组件**:
- `CmiInput` - 文本输入框
- `CmiSelect` - 下拉选择框
- `CmiPicker` - 选择器
- `CmiDatetimePicker` - 日期时间选择器（`cmi-datetime`）
- `CmiCheckbox` - 复选框
- `CmiRadio` - 单选框
- `CmiSearch` - 搜索框

> **说明**: 以上组件在配置中即使没有设置 `needformItem` 或 `showFormItem` 属性，也会自动被 form-item 包裹，因为它们属于表单输入类型，需要标签、校验等功能。

#### 默认不需要 Form-Item 包裹的组件

以下类型的组件**默认不会被 form-item 包裹**：

**PC端布局与容器组件**:
- `CustomComponentTabs` - 标签页（`tab`）
- `CustomComponentTabPane` - 标签页面板（`tab-pane`）
- `CustomComponentCycleTabPane` - 循环标签页面板
- `CustomComponentCollapse` - 折叠面板（`collapse`、`card`）
- `CustomComponentDialog` - 对话框
- `CustomComponentTable` - 表格（`table`、`checkbox-table`）
- `CustomComponentRow` - 行布局（`row`、`grid`）
- `CustomComponentCol` - 列布局（`grid-col`）
- `CustomComponentCycle` - 循环列表（`cycle`）
- `ElButton` - 按钮（`button`）

**移动端布局与容器组件**:
- `CustomComponentCardH5` - 卡片（`cmi-card`）
- `CustomComponentCollapseH5` - 折叠面板（`cmi-collapse`）
- `CustomComponentTabsH5` - 标签页（`cmi-tab`）
- `CustomComponentTabPaneH5` - 标签页面板（`cmi-tab-pane`）
- `CustomComponentTableH5` - 表格（`cmi-table`）
- `cmi-cell` - 单元格
- `cmi-button` - 按钮
- `cmi-link` - 链接
- `cmi-dropdown-menu` - 下拉菜单
- `cmi-divider` - 分割线

> **说明**: 这些组件属于布局容器、操作按钮或展示类组件，不需要表单校验和标签，因此默认不使用 form-item 包裹。

#### PC端 (Element Plus) 包裹规则

**默认行为**: 
1. 表单输入类组件（见上方列表）自动被 `el-form-item` 包裹
2. 配置中设置了 `needformItem` 属性时会被包裹
3. 配置中设置了 `showFormItem = "1"` 或 `showFormItem = true` 时会被包裹

**不会被包裹的情况**:
- 布局容器类组件（见上方列表）默认不包裹
- 配置中设置了 `showFormItem = "0"` 或 `showFormItem = false`
- 表格列中的组件（`isColumn = true`），且没有校验规则（`rules`）且标签隐藏（`hidden-label`）

**特殊优化**: 如果组件没有校验规则（`rules.length === 0`），会使用轻量级的 `SimpleFormItemPc` 组件替代完整的 `el-form-item`，提升性能。

#### 移动端 (H5) 包裹规则

**默认行为**: 
1. 表单输入类组件（见上方列表）自动被 `CmiFormItem` 包裹
2. 配置中设置了 `needformItem` 属性时会被包裹
3. 配置中设置了 `showFormItem = "1"` 或 `showFormItem = true` 时会被包裹

**不会被包裹的情况**:
- 布局容器类组件（见上方列表）默认不包裹
- 配置中设置了 `showFormItem = "0"` 或 `showFormItem = false`
- **特殊情况 - 转换为 Cell 展示**: 当满足以下所有条件时，移动端不会使用 `CmiFormItem` 包裹，而是直接渲染原生组件：
  - `alwaysNative !== "1"`（未强制使用原生组件）
  - 组件处于禁用状态（`disabled = true`）
  - 组件类型是以下之一：`CmiInput`、`CmiSelect`、`CmiPicker`

> **提示**: 移动端在详情模式下（组件被禁用），输入框、下拉选择、选择器等组件会自动转换为纯文本展示，此时不需要 `CmiFormItem` 包裹。

#### 控制 Form-Item 包裹的配置示例

```json
{
  "metaCode": "username",
  "metaType": "ElInput",
  "needformItem": true,  // 明确需要 form-item 包裹
  "showFormItem": "1"    // 或者使用此属性
}
```

```json
{
  "metaCode": "description",
  "metaType": "ElInput",
  "showFormItem": false  // 不需要 form-item 包裹
}
```

```json
{
  "metaCode": "status",
  "metaType": "ElSelect",
  "editFlag": "0",       // 禁用状态
  "alwaysNative": "1"    // 移动端仍使用 CmiFormItem 包裹（不转换为 Cell）
}
```

### 基础属性

| 属性名 | 类型 | 说明 | 配置示例 |
|--------|------|------|----------|
| `metaCode` | String | 字段唯一编码 | `"username"` |
| `metaNameZh` | String | 中文名称 | `"用户名"` |
| `metaNameEn` | String | 英文名称 | `"Username"` |
| `metaType` | String | 组件类型 | `"input"`, `"select"` 等 |
| `displayType` | String | 显示类型 | `"1"`-显示, `"0"`-隐藏 |
| `editFlag` | String | 是否可编辑 | `"1"`-可编辑, `"0"`-禁用 |
| `requiredFlag` | String | 是否必填 | `"1"`-必填, `"0"`-非必填 |
| `clearableFlag` | String | 是否可清除 | `"1"`-可清除 |
| `hidden` | String/Boolean | 是否隐藏 | `"1"` 或 `true` |
| `seqNo` | Number | 排序号 | `1`, `2`, `3` |
| `width` | String/Number | 组件宽度 | `"100%"`, `200` |
| `defPlacehold` | String | 中文占位符 | `"请输入"` |
| `defPlaceholdEn` | String | 英文占位符 | `"Please enter"` |
| `selectKey` | String | 下拉选项key | `"status_options"` |

### 布局属性

| 属性名 | 类型 | 说明 | 配置示例 |
|--------|------|------|----------|
| `span` | Number | 栅格占位(1-24) | `12` (占50%) |
| `offset` | Number | 左侧偏移格数 | `2` |
| `md` | Number/Object | 中等屏幕占位 | `8` 或 `{span: 8}` |
| `lg` | Number/Object | 大屏幕占位 | `6` 或 `{span: 6}` |
| `elWidth` | String | 列宽度 | `"auto"`, `"self"`, `"200px"` |
| `isAllRow` | Boolean | 是否独占一行 | `true` |
| `removeCol` | Boolean | 移除列包裹 | `true` |
| `colTextAlign` | String | 文本对齐 | `"left"`, `"center"`, `"right"` |
| **边距属性** |  |  |  |
| `marginRight` | String/Number | 右边距 | `"16px"`, `16` |
| `marginLeft` | String/Number | 左边距 | `"8px"` |
| `marginTop` | String/Number | 上边距 | `"10px"` |
| `marginBottom` | String/Number | 下边距 | `"12px"` |
| `paddingRight` | String/Number | 右内边距 | `"8px"` |
| `paddingLeft` | String/Number | 左内边距 | `"8px"` |
| `paddingTop` | String/Number | 上内边距 | `"4px"` |
| `paddingBottom` | String/Number | 下内边距 | `"4px"` |
| **样式属性** |  |  |  |
| `defStyle` | String | 内联样式(JSON) | `'{"color": "red"}'` |
| `class` | String | CSS类名 | `"custom-class"` |

### 表单项属性

| 属性名 | 类型 | 说明 | 配置示例 |
|--------|------|------|----------|
| `labelZh` | String | 中文标签 | `"用户名"` |
| `labelEn` | String | 英文标签 | `"Username"` |
| `labelWidth` | String | 标签宽度 | `"100px"`, `"0"`(隐藏) |
| `labelHidden` | String | 隐藏标签 | `"1"` |
| `label-position` | String | 标签位置 | `"right"`, `"left"`, `"top"` |
| `labelVertical` | String | 标签垂直对齐 | `"center"`, `"top"`, `"bottom"` |
| `showLabel` | String | 显示标签 | `"1"` |
| `hiddenRequiredFlag` | String | 隐藏必填星号 | `"1"` |
| `onlyRequiredFlag` | String | 仅显示必填标识 | `"1"` |
| **提示属性** |  |  |  |
| `hintFlag` | String | 显示提示图标 | `"1"` |
| `hintContentZh` | String | 提示内容(中文) | `"请输入用户名"` |
| `hintContentEn` | String | 提示内容(英文) | `"Please enter username"` |
| `hintType` | String | 提示图标类型 | `"info"`, `"warning"` |
| **表单项边距** |  |  |  |
| `formItemMarginRight` | String/Number | 表单项右边距 | `"16px"` |
| `formItemMarginLeft` | String/Number | 表单项左边距 | `"8px"` |
| `formItemMarginTop` | String/Number | 表单项上边距 | `"10px"` |
| `formItemMarginBottom` | String/Number | 表单项下边距 | `"12px"` |
| `formItemPaddingRight` | String/Number | 表单项右内边距 | `"8px"` |
| `formItemPaddingLeft` | String/Number | 表单项左内边距 | `"8px"` |
| `formItemPaddingTop` | String/Number | 表单项上内边距 | `"4px"` |
| `formItemPaddingBottom` | String/Number | 表单项下内边距 | `"4px"` |
| **表单插槽** |  |  |  |
| `formItemSlot` | String | 表单项插槽 | `"label"` |
| `formItemLabelSlot` | String | 标签插槽 | `"default"` |
| `showFormItem` | String/Boolean | 显示表单项 | `"1"` 或 `true` |
| `contentRight` | Boolean | 内容右对齐 | `true` |

### 校验属性

| 属性名 | 类型 | 说明 | 配置示例 |
|--------|------|------|----------|
| `requiredFlag` | String | 是否必填 | `"1"`-必填, `"0"`-非必填 |
| `alongValidate` | String | 禁用时是否校验 | `"1"` |
| **正则校验** |  |  |  |
| `regexPattern` | String | 正则校验(JSON数组) | 见下方示例 |
| `validRegs` | Array/Object | 校验规则数组 | 见下方示例 |
| **自定义校验** |  |  |  |
| `validators` | Array | 自定义校验函数 | 见下方示例 |

#### regexPattern 示例

```json
{
  "regexPattern": "[{\"pattern\":\"/^\\\\d+$/\",\"message\":\"只能输入数字\",\"messageEn\":\"Only numbers allowed\"}]"
}
```

#### validRegs 示例

```json
{
  "validRegs": [
    {
      "pattern": "/^\\d+$/",
      "message": "只能输入数字",
      "messageEn": "Only numbers allowed"
    }
  ]
}
```

### 事件属性

| 属性名 | 类型 | 说明 | 配置示例 |
|--------|------|------|----------|
| `onClick` | Function | 点击事件 | `function(e) { console.log('clicked') }` |
| `onMounted` | String/Function | 挂载完成事件 | 字符串或函数 |
| `onVnodeMounted` | Function | VNode挂载事件 | `function(props, vnode, selects) {}` |
| `onVnodeUnmounted` | Function | VNode卸载事件 | `function(props) {}` |
| `onLabelClick` | Function | 标签点击事件 | `function(config) {}` |
| `immediateClickEvent` | Boolean | 数据加载后自动点击 | `true` |

#### onMounted 字符串示例

```json
{
  "onMounted": "console.log('组件已挂载', props.metaCode)"
}
```

#### onClick 函数示例

```javascript
{
  onClick: function(e, params) {
    console.log('点击事件', this.props)
  }
}
```

### 服务编排属性

> **说明**: 这些属性用于配置按钮点击后的服务调用、弹窗打开等交互行为。

| 属性名 | 类型 | 说明 |
|--------|------|------|
| `lcpPageServiceMapVOList` | Array | 服务调用配置列表 |
| `lcpPagePopupMapVO` | Object | 弹窗配置 |
| `lcpPageRuleVOList` | Array | 数据校验规则 |
| `lcpPageClosedMapVO` | Object | 页面关闭配置 |
| **钩子函数** |  |  |
| `beforeRequestService` | Function | 服务请求前钩子 |
| `afterRequestService` | Function | 服务请求后钩子 |
| `beforeOpenDialog` | Function | 打开弹窗前钩子 |
| `afterOpenDialog` | Function | 关闭弹窗后钩子 |
| `middleOpenDialog` | Function | 弹窗中间处理钩子 |
| `beforeDataValidRequestService` | Function | 数据校验前钩子 |
| `afterDataValidRequestService` | Function | 数据校验后钩子 |

#### 服务调用配置示例

```json
{
  "lcpPageServiceMapVOList": [
    {
      "serviceCode": "/api/submit",
      "httpMethod": "post",
      "serviceType": "1",
      "transactionType": "1",
      "busiIdentityId": "biz_001",
      "inParamMappingList": [
        {"orignParam": "username", "destParam": "userName"}
      ],
      "outParamMappingList": [
        {"orignParam": "result.data", "destParam": "result_field"}
      ]
    }
  ]
}
```

---

## 表单输入组件

### ElInput - 文本输入框

**metaType**: `input`, `textarea`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `type` | String | text | 输入类型 | `"text"`, `"password"`, `"textarea"` |
| `maxlength` | Number | - | 最大输入长度 | `50` |
| `minlength` | Number | - | 最小输入长度 | `3` |
| `show-word-limit` | Boolean | false | 显示字数统计 | `true` |
| `prefix-icon` | String | - | 前缀图标 | `"User"` |
| `suffix-icon` | String | - | 后缀图标 | `"Search"` |
| `rows` | Number | 2 | textarea行数 | `4` |
| `autosize` | Boolean/Object | false | 自适应高度 | `true` 或 `{minRows: 2, maxRows: 6}` |
| `autocomplete` | String | off | 自动完成 | `"on"`, `"off"` |
| `readonly` | Boolean | false | 只读 | `true` |
| **扩展属性** |  |  |  |  |
| `textAreaCnt` | Number | 2 | textarea行数 | `3` |
| `maxLength` | Number | - | 最大长度(同maxlength) | `100` |
| `icon` | String | - | 后缀图标(同suffix-icon) | `"Search"` |
| `showTooltip` | String | '' | 超出显示tooltip | `"1"` |
| **金额显示属性** |  |  |  |  |
| `showMoney` | String | '' | 开启金额显示 | `"1"` |
| `moneySeg` | String | ',' | 金额分割符 | `","` |
| `min` | Number | -Infinity | 最小值 | `0` |
| `max` | Number | Infinity | 最大值 | `999999` |
| `decimal` | Number | 2 | 小数位数 | `2` |
| `keepLastZero` | String | '0' | 保留小数后缀0 | `"1"` |
| `canShowFlag` | Array | ['na', '-'] | 特殊值显示 | `["na", "-", "N/A"]` |
| `showSymbol` | String | '' | 显示货币符号 | `"1"` |
| `symbol` | String | '¥' | 货币符号 | `"¥"`, `"$"` |
| `symbolPosition` | String | before | 符号位置 | `"before"`, `"after"` |
| **弹窗交互** |  |  |  |  |
| `onlyIconClickFlag` | String | '1' | 仅图标可点击弹窗 | `"1"` |
| `pagePopupEditFlag` | String | '0' | 弹窗输入可编辑 | `"1"` |

#### 配置示例

**基础文本输入**
```json
{
  "metaCode": "username",
  "metaType": "input",
  "labelZh": "用户名",
  "requiredFlag": "1",
  "clearableFlag": "1",
  "maxLength": 50,
  "defPlacehold": "请输入用户名",
  "icon": "User"
}
```

**多行文本**
```json
{
  "metaCode": "remark",
  "metaType": "textarea",
  "labelZh": "备注",
  "textAreaCnt": 4,
  "maxLength": 500,
  "show-word-limit": true
}
```

**金额输入**
```json
{
  "metaCode": "amount",
  "metaType": "input",
  "labelZh": "金额",
  "showMoney": "1",
  "decimal": 2,
  "showSymbol": "1",
  "symbol": "¥",
  "symbolPosition": "before",
  "min": 0,
  "max": 999999
}
```

---

### ElSelect - 下拉选择框

**metaType**: `select`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `multiple` | String/Boolean | false | 多选 | `"1"` 或 `true` |
| `filterable` | String/Boolean | false | 可搜索 | `"1"` 或 `true` |
| `clearable` | Boolean | false | 可清除 | `true` |
| `multiple-limit` | Number | 0 | 多选限制数量 | `3` |
| `placeholder` | String | - | 占位符 | `"请选择"` |
| `remote` | Boolean | false | 远程搜索 | `true` |
| `loading` | Boolean | false | 加载中 | `true` |
| `disabled` | Boolean | false | 禁用 | `true` |
| **扩展属性** |  |  |  |  |
| `multipleLimit` | String/Number | 0 | 多选限制 | `"5"` |
| `rangeOptions` | Array | - | 范围选项(过滤) | `["1", "2"]` |
| `excludeOptions` | Array | - | 排除选项(过滤) | `["0"]` |
| `separator` | String | ',' | 多选分隔符 | `","` |
| `virtualized` | String/Boolean | '' | 虚拟化滚动 | `"1"` |
| `valueType` | String | string | 值类型 | `"list"`, `"object"`, `"string"` |
| `selectKey` | String | - | 枚举数据key | `"status_options"` |

#### 选项数据结构

```javascript
{
  columnValue: '1',           // 选项值
  columnDesc_zh: '启用',      // 中文描述
  columnDesc: 'Enabled',      // 英文描述
  columnStatus: '1'           // 状态: '0'-禁用, '1'-启用, '2'-隐藏
}
```

#### 配置示例

**单选下拉**
```json
{
  "metaCode": "status",
  "metaType": "select",
  "labelZh": "状态",
  "selectKey": "status_options",
  "filterable": "1",
  "clearableFlag": "1",
  "multiple": "0"
}
```

**多选下拉**
```json
{
  "metaCode": "tags",
  "metaType": "select",
  "labelZh": "标签",
  "selectKey": "tag_options",
  "multiple": "1",
  "filterable": "1",
  "separator": ",",
  "valueType": "list"
}
```

**虚拟化滚动(大数据量)**
```json
{
  "metaCode": "large_select",
  "metaType": "select",
  "labelZh": "城市",
  "selectKey": "city_options",
  "virtualized": "1",
  "filterable": "1"
}
```

---

### ElRadio - 单选框

**metaType**: `radio`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `disabled` | Boolean | false | 禁用 | `true` |
| `size` | String | default | 尺寸 | `"large"`, `"default"`, `"small"` |
| **扩展属性** |  |  |  |  |
| `type` | String | default | 类型 | `"default"`, `"button"` |
| `selectKey` | String | - | 枚举数据key | `"gender_options"` |

#### 配置示例

**默认样式**
```json
{
  "metaCode": "gender",
  "metaType": "radio",
  "labelZh": "性别",
  "selectKey": "gender_options"
}
```

**按钮样式**
```json
{
  "metaCode": "status",
  "metaType": "radio",
  "labelZh": "状态",
  "selectKey": "status_options",
  "type": "button"
}
```

---

### ElCheckbox - 复选框

**metaType**: `checkbox`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `disabled` | Boolean | false | 禁用 | `true` |
| `size` | String | default | 尺寸 | `"large"`, `"small"` |
| `true-value` | String/Number | - | 选中时的值 | `"1"` |
| `false-value` | String/Number | - | 未选中时的值 | `"0"` |
| **扩展属性** |  |  |  |  |
| `notShowLabel` | String/Number | '0' | 不显示标签 | `"1"` |
| `valueType` | String | string | 值类型 | `"list"`, `"string"` |
| `selectKey` | String | - | 枚举数据key | `"hobby_options"` |

**说明**:
- 当配置了 `selectKey` 或 `options` 时，自动渲染为多选组
- 没有选项时，渲染为单个复选框
- 默认 `true-value='1'`, `false-value='0'`

#### 配置示例

**多选组**
```json
{
  "metaCode": "hobbies",
  "metaType": "checkbox",
  "labelZh": "爱好",
  "selectKey": "hobby_options",
  "valueType": "list"
}
```

**单个复选框**
```json
{
  "metaCode": "agree",
  "metaType": "checkbox",
  "labelZh": "同意协议",
  "notShowLabel": "0"
}
```

---

### ElDatePicker - 日期选择器

**metaType**: `date`, `date-range`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `type` | String | date | 类型 | `"date"`, `"daterange"`, `"month"` |
| `format` | String | YYYY-MM-DD | 显示格式 | `"YYYY-MM-DD"` |
| `value-format` | String | YYYY-MM-DD | 值格式 | `"YYYY-MM-DD"` |
| `placeholder` | String | - | 占位符 | `"请选择日期"` |
| `start-placeholder` | String | - | 开始占位符 | `"开始日期"` |
| `end-placeholder` | String | - | 结束占位符 | `"结束日期"` |
| `disabled` | Boolean | false | 禁用 | `true` |
| `clearable` | Boolean | true | 可清除 | `true` |
| **扩展属性** |  |  |  |  |
| `min` | Date/String | null | 最小可选日期 | `"2024-01-01"` |
| `max` | Date/String | null | 最大可选日期 | `"2024-12-31"` |
| `displayType` | String | - | 日期类型(覆盖type) | `"daterange"` |
| `prefix-icon` | String/Object | - | 前缀图标 | `"Calendar"` |

**说明**:
- `date-range` 类型自动设置 `type='daterange'` 和 `isRange=true`
- 默认 `value-format='YYYY-MM-DD'`
- 支持时间戳格式: `value-format='x'` 或 `value-format='timestamp'`

#### 配置示例

**单个日期**
```json
{
  "metaCode": "birthday",
  "metaType": "date",
  "labelZh": "生日",
  "format": "YYYY-MM-DD",
  "value-format": "YYYY-MM-DD"
}
```

**日期范围**
```json
{
  "metaCode": "date_range",
  "metaType": "date-range",
  "labelZh": "日期范围",
  "min": "2024-01-01",
  "max": "2024-12-31"
}
```

---

### ElTimePicker - 时间选择器

**metaType**: `time`, `time-range`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `type` | String | - | 类型 | `"time"` |
| `format` | String | HH:mm:ss | 显示格式 | `"HH:mm"` |
| `value-format` | String | - | 值格式 | `"HH:mm:ss"` |
| `placeholder` | String | - | 占位符 | `"请选择时间"` |
| `disabled` | Boolean | false | 禁用 | `true` |
| `clearable` | Boolean | true | 可清除 | `true` |

#### 配置示例

```json
{
  "metaCode": "start_time",
  "metaType": "time",
  "labelZh": "开始时间",
  "format": "HH:mm"
}
```

---

### ElInputNumber - 数字输入框

**metaType**: `number`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `min` | Number | -Infinity | 最小值 | `0` |
| `max` | Number | Infinity | 最大值 | `100` |
| `step` | Number | 1 | 步长 | `1` |
| `precision` | Number | - | 精度(小数位数) | `2` |
| `disabled` | Boolean | false | 禁用 | `true` |
| `controls` | Boolean | true | 显示控制按钮 | `false` |
| `controls-position` | String | - | 控制按钮位置 | `"right"` |
| **扩展属性** |  |  |  |  |
| `textAlign` | String | - | 文本对齐 | `"left"`, `"right"` |
| `step` | String/Number | 1 | 步长 | `0.5` |
| `precision` | String/Number | - | 精度 | `2` |
| `maxValue` | Number | - | 最大值(同max) | `1000` |
| `minValue` | Number | - | 最小值(同min) | `0` |
| `precise` | Number | - | 精度(同precision) | `2` |

#### 配置示例

```json
{
  "metaCode": "quantity",
  "metaType": "number",
  "labelZh": "数量",
  "minValue": 0,
  "maxValue": 100,
  "step": 1,
  "precise": 0,
  "textAlign": "right"
}
```

---

## 按钮与文本组件

### ElButton - 按钮

**metaType**: `button`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `type` | String | default | 类型 | `"primary"`, `"success"`, `"warning"`, `"danger"` |
| `size` | String | default | 尺寸 | `"large"`, `"default"`, `"small"` |
| `plain` | Boolean | false | 朴素按钮 | `true` |
| `round` | Boolean | false | 圆角按钮 | `true` |
| `circle` | Boolean | false | 圆形按钮 | `true` |
| `disabled` | Boolean | false | 禁用 | `true` |
| `loading` | Boolean | false | 加载状态 | `true` |
| `icon` | String/Object | - | 图标 | `"Search"` |
| **扩展属性** |  |  |  |  |
| `plain` | String/Number/Boolean | false | 朴素按钮 | `"1"` |
| `circle` | String/Number/Boolean | false | 圆形按钮 | `"1"` |
| `size` | String | - | 按钮尺寸 | `"large"` |
| `displayType` | String | - | 按钮类型(覆盖type) | `"primary"` |
| `rounds` | String/Boolean | - | 圆角按钮 | `"1"` |
| `icon` | String | - | 图标 | `"Plus"` |
| `clickActionKey` | String | - | 点击动作key | `"submit"` |
| `buttonActionKey` | String | - | 按钮动作key | `"save"` |
| `widgetSize` | String | - | 组件尺寸 | `"def"`, `"large"`, `"small"` |

#### 配置示例

```json
{
  "metaCode": "submit_btn",
  "metaType": "button",
  "labelZh": "提交",
  "displayType": "primary",
  "widgetSize": "large",
  "rounds": "1",
  "lcpPageServiceMapVOList": [
    {
      "serviceCode": "/api/submit",
      "httpMethod": "post",
      "transactionType": "1"
    }
  ]
}
```

---

### ElText - 静态文本

**metaType**: `static-text`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `type` | String | - | 类型 | `"primary"`, `"success"`, `"warning"` |
| `size` | String | default | 尺寸 | `"large"`, `"default"`, `"small"` |
| `truncated` | Boolean | false | 截断文本 | `true` |
| `tag` | String | span | HTML标签 | `"p"`, `"div"` |
| **扩展属性** |  |  |  |  |
| `fontSize` | String/Number | - | 字体大小 | `"14px"`, `14` |
| `needWrap` | String/Number | '0' | 显示包裹容器 | `"1"` |
| `suffixIcon` | String/Object | '' | 后缀图标 | `"ArrowRight"` |
| `isPointer` | String/Number | - | 鼠标指针样式 | `"1"` |
| `showTooltip` | String/Number | '0' | 超出显示tooltip | `"1"` |
| `truncated` | String/Number/Boolean | '0' | 文本截断 | `"1"` |

#### 配置示例

```json
{
  "metaCode": "info_text",
  "metaType": "static-text",
  "labelZh": "提示信息",
  "truncated": "1",
  "showTooltip": "1"
}
```

---

## 布局组件

### CustomComponentFormLayout - 表单布局

**metaType**: `CustomComponentFormLayout`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `model` | Object | - | 表单数据对象 | `{}` |
| `rules` | Object | - | 表单验证规则 | `{}` |
| `inline` | Boolean | false | 行内表单 | `true` |
| `label-position` | String | right | 标签位置 | `"right"`, `"left"`, `"top"` |
| `label-width` | String | - | 标签宽度 | `"100px"` |
| `size` | String | default | 尺寸 | `"large"`, `"small"` |
| `disabled` | Boolean | false | 禁用 | `true` |
| `gutter` | Number | 0 | 栅格间隔 | `16` |
| `justify` | String | start | 水平对齐 | `"start"`, `"center"`, `"end"` |
| `align` | String | top | 垂直对齐 | `"top"`, `"middle"`, `"bottom"` |
| **扩展属性** |  |  |  |  |
| `span` | Number | 24 | 栅格占位 | `24` |
| `rootForm` | Boolean | true | 是否为根表单 | `true` |
| `labelWidth` | String | 84px/120px | 标签宽度(根据语言) | `"100px"` |

#### 配置示例

```json
{
  "metaType": "CustomComponentFormLayout",
  "span": 24,
  "labelWidth": "100px",
  "label-position": "right",
  "inline": true,
  "pmPageMetaList": []
}
```

---

### CustomComponentTabs - 标签页

**metaType**: `tab`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `type` | String | - | 风格类型 | `"card"`, `"border-card"` |
| `tab-position` | String | top | 标签位置 | `"top"`, `"right"`, `"bottom"`, `"left"` |
| `stretch` | Boolean | false | 标签宽度自撑 | `true` |
| **扩展属性** |  |  |  |  |
| `showBar` | Boolean | true | 显示标签栏 | `true` |
| `hiddenHeadUnderline` | String/Number | '0' | 隐藏头部下划线 | `"1"` |
| `autoHeader` | String | - | 自动头部 | `"1"` |
| `level` | Number | 1 | 层级 | `1`, `2`, `3` |

**层级说明**:
- `level=1`: `type='border-card'`, `stretch=true`
- `level=2`: 默认样式
- `level=3`: `type='card'`

#### TabPane 配置 (子项)

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `metaType` | String | tab-pane | 页签类型 | `"tab-pane"` |
| `labelZh` | String | - | 中文标签 | `"基本信息"` |
| `labelEn` | String | - | 英文标签 | `"Basic Info"` |
| `defaultShowFlag` | String | '0' | 默认显示 | `"1"` |
| `isCycle` | String | '0' | 是否循环 | `"1"` |
| `currentCode` | String | - | 当前激活编码 | `"tab1"` |
| `tabExtendAttr` | Object | - | 标签扩展属性 | `{}` |

#### 配置示例

```json
{
  "metaCode": "main_tabs",
  "metaType": "tab",
  "level": 1,
  "pmPageMetaList": [
    {
      "metaCode": "tab1",
      "metaType": "tab-pane",
      "labelZh": "基本信息",
      "defaultShowFlag": "1",
      "pmPageMetaList": []
    },
    {
      "metaCode": "tab2",
      "metaType": "tab-pane",
      "labelZh": "详细信息",
      "pmPageMetaList": []
    }
  ]
}
```

---

### CustomComponentCollapse - 折叠面板

**metaType**: `collapse`, `card`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `accordion` | Boolean | false | 手风琴模式 | `true` |
| `modelValue` | Array/String | - | 激活面板 | `"panel1"` |
| `name` | String/Number | - | 面板标识 | `"panel1"` |
| `title` | String | - | 面板标题 | `"基本信息"` |
| `disabled` | Boolean | false | 禁用 | `true` |
| `header` | String | - | 标题 | `"标题"` |
| `footer` | String | - | 底栏 | `""` |
| `shadow` | String | always | 阴影显示 | `"always"`, `"hover"`, `"never"` |
| **扩展属性** |  |  |  |  |
| `showSegment` | String | '0' | 显示分割线 | `"1"` |
| `defaultOpenFlag` | String | '0' | 默认展开 | `"1"` |
| `noCollpase` | String | '0' | 禁止折叠 | `"1"` |
| `hiddenHead` | String | '0' | 隐藏头部 | `"1"` |
| `hiddenHeadFlag` | String | '0' | 隐藏头部绿标 | `"1"` |
| `needWrap` | String/Boolean | - | 使用卡片包裹 | `"1"` 或 `true` |
| `needSegment` | Boolean | - | 显示边框 | `true` |
| `underlineHidden` | Boolean | - | 隐藏下划线 | `true` |
| `collapseHidden` | String | '0' | 折叠隐藏 | `"1"` |
| `collapseSlot` | String | - | 标题插槽 | `"title"` |
| `collapseRightSlot` | String | - | 标题右侧插槽 | `"extra"` |

#### 配置示例

```json
{
  "metaCode": "info_collapse",
  "metaType": "collapse",
  "metaNameZh": "基本信息",
  "defaultOpenFlag": "1",
  "needWrap": "1",
  "showSegment": "1",
  "pmPageMetaList": []
}
```

---

### CustomComponentDialog - 对话框

**metaType**: `CustomComponentDialog`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `modelValue` | Boolean | false | 是否显示 | `true` |
| `title` | String | - | 标题 | `"详情"` |
| `width` | String | 50% | 宽度 | `"600px"` |
| `fullscreen` | Boolean | false | 全屏 | `true` |
| `top` | String | 15vh | 顶部距离 | `"10vh"` |
| `modal` | Boolean | true | 遮罩层 | `true` |
| `append-to-body` | Boolean | false | 插入到body | `true` |
| `lock-scroll` | Boolean | true | 锁定滚动 | `true` |
| `close-on-click-modal` | Boolean | true | 点击遮罩关闭 | `false` |
| `close-on-press-escape` | Boolean | true | ESC关闭 | `true` |
| `show-close` | Boolean | true | 显示关闭按钮 | `true` |
| `before-close` | Function | - | 关闭前回调 | 函数 |
| `draggable` | Boolean | false | 可拖拽 | `true` |
| `align-center` | Boolean | false | 居中对齐 | `true` |
| `destroy-on-close` | Boolean | false | 关闭销毁 | `true` |
| **扩展属性** |  |  |  |  |
| `titleEn` | String | '' | 英文标题 | `"Detail"` |
| `showConfirmButton` | String/Boolean | - | 显示确认按钮 | `"1"` 或 `true` |
| `showConfirm` | String/Boolean | - | 显示确认按钮(别名) | `"1"` |
| `showCloseButton` | String/Boolean | - | 显示关闭按钮 | `"1"` |
| `showClose` | String/Boolean | true | 显示关闭按钮(别名) | `true` |
| `dialogVisible` | Boolean | - | 对话框显示状态 | `false` |
| `handlePromise` | Promise | - | 处理Promise | Promise对象 |

#### 配置示例

```json
{
  "metaCode": "detail_dialog",
  "metaType": "CustomComponentDialog",
  "title": "详情",
  "titleEn": "Detail",
  "width": "600px",
  "showConfirmButton": "1",
  "showCloseButton": "1",
  "dialogVisible": false,
  "pmPageMetaList": []
}
```

---

### CustomComponentCycle - 循环列表

**metaType**: `cycle`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `needWrap` | Boolean/String | true | 使用卡片包裹 | `true` 或 `"1"` |
| `multiPmPageMetaList` | Array | - | 多行配置(自动生成) | `[]` |

**说明**:
- 循环列表根据数据数组动态生成多行配置
- 每行数据对应独立的配置实例
- 数据路径格式: `field[0]->subField`, `field[1]->subField`

#### 配置示例

```json
{
  "metaCode": "items",
  "metaType": "cycle",
  "metaNameZh": "明细列表",
  "needWrap": true,
  "pmPageMetaList": [
    {
      "metaCode": "item_name",
      "metaType": "input",
      "labelZh": "项目名称"
    },
    {
      "metaCode": "item_amount",
      "metaType": "number",
      "labelZh": "金额"
    }
  ]
}
```

对应的数据结构:

```javascript
{
  items: [
    { item_name: '项目A', item_amount: 1000 },
    { item_name: '项目B', item_amount: 2000 }
  ]
}
```

---

## 数据展示组件

### CustomComponentTable - 表格

**metaType**: `table`, `checkbox-table`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `data` | Array | [] | 表格数据 | `[]` |
| `height` | String/Number | - | 高度 | `400`, `"400px"` |
| `max-height` | String/Number | - | 最大高度 | `500` |
| `stripe` | Boolean | false | 斑马纹 | `true` |
| `border` | Boolean | false | 纵向边框 | `true` |
| `fit` | Boolean | true | 列宽自撑 | `true` |
| `show-header` | Boolean | true | 显示表头 | `true` |
| `highlight-current-row` | Boolean | false | 高亮当前行 | `true` |
| `row-key` | String/Function | - | 行数据key | `"id"` |
| `width` | Number | - | 宽度(虚拟表格) | `800` |
| `columns` | Array | [] | 列配置(虚拟表格) | `[]` |
| `current-page` | Number | 1 | 当前页码 | `1` |
| `page-size` | Number | 10 | 每页条数 | `10` |
| `total` | Number | 0 | 总条数 | `100` |
| `page-sizes` | Array | [10,20,30,40] | 每页条数选项 | `[10, 20, 50]` |
| `layout` | String | prev, pager, next | 布局 | `"prev, pager, next, sizes, total"` |
| `background` | Boolean | false | 背景色 | `true` |
| **扩展属性** |  |  |  |  |
| `isVirtualized` | String | '0' | 虚拟化表格 | `"1"` |
| `pageable` | String | '0' | 开启分页 | `"1"` |
| `frontPageFlag` | String | '0' | 前端分页 | `"1"` |
| `defaultPageablePageSize` | Number | 10 | 默认分页大小 | `10` |
| `pageSize` | Number | 5 | 每页条数 | `10` |
| `selectable` | String | '0' | 单选模式 | `"1"` |
| `canSelect` | Boolean | - | 可选择(别名) | `true` |
| `pageAlign` | String | right | 分页对齐 | `"left"`, `"center"`, `"right"` |
| `totalMetaCodes` | Array | [] | 统计列编码 | `["amount"]` |
| `showOverflowTooltip` | String | - | 超出显示tooltip | `"1"` |
| `columnWidth` | Number/String | - | 列宽 | `150`, `"150px"` |

#### 表格列配置 (pmPageMetaList)

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `type` | String | - | 列类型 | `"selection"`, `"index"` |
| `width` | Number/String | - | 列宽 | `200`, `"200px"` |
| `columnWidth` | Number/String | - | 列宽(优先) | `150` |
| `minWidth` | Number | 160 | 最小列宽 | `120` |
| `fixed` | String | - | 固定列 | `"left"`, `"right"` |
| `sortable` | Boolean/String | false | 可排序 | `true` 或 `"1"` |
| `align` | String | left | 对齐 | `"left"`, `"center"`, `"right"` |
| `labelHidden` | String | '1' | 隐藏标签(表格列) | `"1"` |
| `headerRender` | Function | - | 自定义表头渲染 | 函数 |

#### 统计行配置

```javascript
totalMetaCodes: [
  'amount',  // 简单统计(求和)
  {
    code: 'quantity',
    totalFn: (total, val, row) => {
      // 自定义统计函数
      return total + val
    }
  }
]
```

#### 配置示例

**基础表格**
```json
{
  "metaCode": "data_table",
  "metaType": "table",
  "pageable": "1",
  "pageSize": 10,
  "pageAlign": "right",
  "selectable": "0",
  "totalMetaCodes": ["amount", "quantity"],
  "pmPageMetaList": [
    {
      "metaCode": "name",
      "metaType": "input",
      "labelZh": "名称",
      "width": 200
    },
    {
      "metaCode": "amount",
      "metaType": "input",
      "labelZh": "金额",
      "columnWidth": 150,
      "showMoney": "1"
    },
    {
      "metaCode": "status",
      "metaType": "select",
      "labelZh": "状态",
      "selectKey": "status_options",
      "width": 120
    }
  ]
}
```

**虚拟化表格**
```json
{
  "metaCode": "virtual_table",
  "metaType": "table",
  "isVirtualized": "1",
  "height": 400,
  "pmPageMetaList": []
}
```

---

### ElPagination - 分页

**metaType**: `pagination`

#### 可配置属性

| 属性名 | 类型 | 默认值 | 说明 | 配置示例 |
|--------|------|--------|------|----------|
| `current-page` | Number | 1 | 当前页码 | `1` |
| `page-size` | Number | 10 | 每页条数 | `10` |
| `total` | Number | 0 | 总条数 | `100` |
| `page-sizes` | Array | [10,20,30,40] | 每页条数选项 | `[5, 10, 20, 40]` |
| `layout` | String | prev, pager, next... | 布局 | `"prev, pager, next, sizes, total"` |
| `background` | Boolean | false | 背景色 | `true` |
| `small` | Boolean | false | 小型分页 | `true` |
| `disabled` | Boolean | false | 禁用 | `true` |
| `pager-count` | Number | 7 | 页码按钮数量 | `5` |

#### 配置示例

```json
{
  "metaCode": "pagination",
  "metaType": "pagination",
  "page-sizes": [5, 10, 20, 40],
  "layout": "prev, pager, next, jumper, sizes, total",
  "background": true
}
```

---

## 附录

### 渲染器封装层次说明

渲染器采用了三层封装架构，用户使用的是最外层的组件：

```
用户使用的组件
    ↓
resolver-web.vue (PC端) / resolver-H5.vue (H5端)
    ↓
resolver-common.vue (公共逻辑)
    ↓
index.jsx (内部实现)
```

**各层职责：**

| 层级 | 文件 | 职责 |
|------|------|------|
| **外层** | `resolver-web.vue` | PC端入口，提供Element Plus默认实例 |
| **外层** | `resolver-H5.vue` | H5端入口，提供移动端默认实例 |
| **中间层** | `resolver-common.vue` | 公共逻辑：配置加载、枚举合并、请求拦截 |
| **内层** | `index.jsx` | 核心渲染逻辑：组件渲染、规则引擎、表单校验 |

**属性传递机制：**

1. **显式定义属性**: 在 `resolver-common.vue`、`resolver-web.vue`、`resolver-H5.vue` 的 `defineProps` 中明确定义的属性，带有类型检查和默认值
2. **透传属性**: 通过 `v-bind="attrs"` 将未显式定义的属性直接传递给下一层，最终传递给 `index.jsx`

```vue
<!-- resolver-web.vue / resolver-H5.vue -->
<Resolver
  ref="resolverRef"
  v-bind="attrs"  <!-- 透传所有未显式定义的属性 -->
  :getNativeComps="getNativeComps"
  :messageInstance="props.messageInstance"
  ...
/>

<!-- resolver-common.vue -->
<Resolver
  v-if="pageConfig && selectsLoad"
  ref="resolverRef"
  v-bind="attrs"  <!-- 继续透传 -->
  :isH5="props.isH5"
  :lang="props.lang"
  :config="pageConfig || null"  <!-- 唯一被覆盖的属性 -->
  ...
/>
```

**属性使用建议：**

- ✅ **推荐**: 使用显式定义的属性（有类型检查和默认值）
- ✅ **可用**: `index.jsx` 中定义的所有其他属性都通过 attrs 透传可用
- ⚠️ **注意**: 仅有 `config` 属性被中间层覆盖，其他属性均可直接使用

**被中间层覆盖的属性（仅1个）：**

| 属性 | 说明 |
|------|------|
| `config` | 被 `resolver-common.vue` 覆盖，使用内部加载的 `pageConfig` 或外部传入的 `nativeConfig`。如需手动传入配置，请使用 `nativeConfig` 属性 |

**未被覆盖的 index.jsx 属性（全部可用）：**

`index.jsx` 中定义的其他所有属性都通过 `v-bind="attrs"` 透传，用户可以直接使用，包括但不限于：

- `mode` - 渲染模式 (operate/detail/log)
- `components` - 自定义组件注册
- `selects` - 下拉选项数据（会被中间层合并处理，但仍可使用）
- `dataLoad` - 规则初始化控制
- `loadEventsBefore` / `loadEventsAfter` - 加载事件钩子
- `axiosInstance` / `dayjsInstance` - 实例对象（中间层已提供默认值，但可覆盖）
- `messageCb` - 提示语回调
- 以及其他所有在 `index.jsx` props 中定义的属性

### 配置平台集成说明

#### busiIdentityId - 配置平台页面标识

`busiIdentityId` 是渲染器与配置平台集成的关键属性,用于标识配置平台中的页面。

**工作流程:**

```
1. 用户传入 busiIdentityId
   ↓
2. 渲染器内部自动调用配置平台接口
   ↓
3. 获取页面配置和枚举数据
   ↓
4. 自动渲染页面
```

**使用步骤:**

1. **在配置平台创建页面**,获取页面标识 `busiIdentityId`
2. **在代码中传入** `busiIdentityId` 属性
3. **渲染器自动加载**配置并渲染页面,无需手动调用接口

**完整示例:**

```vue
<template>
  <Resolver
    ref="resolverRef"
    :busiIdentityId="'PAGE_USER_MANAGEMENT_001'"
    v-model="formData"
    :selects="selects"
    :lang="lang"
    :loadingInstance="loadingInstance"
    :messageInstance="ElMessage"
    @on-loaded-config-competed="handleConfigLoaded"
    @on-loaded-selects-competed="handleSelectsLoaded"
  />
</template>

<script setup>
import { ref } from 'vue'
import Resolver from 'resolver-egretimp-plus/web'
import { ElMessage, ElLoading } from 'element-plus'

const resolverRef = ref(null)
const formData = ref({})
const lang = ref('zh')
const selects = ref({})

// 配置加载完成回调
const handleConfigLoaded = (config) => {
  console.log('✅ 页面配置加载成功', config)
}

// 枚举加载完成回调
const handleSelectsLoaded = (selectsData) => {
  console.log('✅ 枚举数据加载成功', selectsData)
}
</script>
```

**配置平台返回的数据结构:**

```json
{
  "pageConfig": {
    "metaType": "CustomComponentFormLayout",
    "pmPageMetaList": [
      {
        "metaCode": "username",
        "metaType": "input",
        "labelZh": "用户名",
        "requiredFlag": "1"
      }
    ]
  },
  "selects": {
    "status_options": [
      { "columnValue": "1", "columnDesc_zh": "启用" },
      { "columnValue": "0", "columnDesc_zh": "禁用" }
    ]
  }
}
```

**高级用法 - 使用 nativeConfig 手动传入配置:**

```vue
<template>
  <Resolver
    :nativeConfig="customConfig"
    v-model="formData"
  />
</template>

<script setup>
import { ref } from 'vue'
import Resolver from 'resolver-egretimp-plus/web'

const formData = ref({})

// 手动传入配置,渲染器不会自动加载
const customConfig = ref({
  pmPageMetaList: [
    {
      metaCode: 'username',
      metaType: 'input',
      labelZh: '用户名',
      requiredFlag: '1'
    }
  ]
})
</script>
```

**高级用法 - 额外请求参数:**

```vue
<template>
  <Resolver
    :busiIdentityId="'PAGE_001'"
    :loadConfigReq="{ version: '1.0' }"
    :builtPolyfillReq="{ token: 'xxx' }"
    v-model="formData"
  />
</template>

<script setup>
import { ref } from 'vue'
import Resolver from 'resolver-egretimp-plus/web'

const formData = ref({})
</script>
```

**优势:**
- ✅ 页面配置与代码解耦,可在配置平台可视化编辑
- ✅ 修改配置无需重新部署代码
- ✅ 支持动态加载枚举数据
- ✅ 内置缓存机制,提升加载性能
- ✅ 自动处理请求参数和响应数据

### 组件类型完整映射表

| metaType | 渲染组件 | 说明 |
|----------|----------|------|
| `input` | ElInput | 文本输入框 |
| `textarea` | ElInput | 多行文本 |
| `select` | ElSelect | 下拉选择 |
| `radio` | ElRadio | 单选框 |
| `checkbox` | ElCheckbox | 复选框 |
| `date` | ElDatePicker | 日期选择 |
| `date-range` | ElDatePicker | 日期范围 |
| `time` | ElTimePicker | 时间选择 |
| `time-range` | ElTimePicker | 时间范围 |
| `number` | ElInputNumber | 数字输入 |
| `button` | ElButton | 按钮 |
| `static-text` | ElText | 静态文本 |
| `table` | CustomComponentTable | 表格 |
| `checkbox-table` | CustomComponentTable | 可选择表格 |
| `tab` | CustomComponentTabs | 标签页 |
| `tab-pane` | CustomComponentTabPane | 标签页面板 |
| `collapse` | CustomComponentCollapse | 折叠面板 |
| `card` | CustomComponentCollapse | 卡片 |
| `cycle` | CustomComponentCycle | 循环列表 |
| `tree` | CustomComponentTree | 树形控件 |
| `pagination` | ElPagination | 分页 |
| `steps` | CustomComponentSteps | 步骤条 |
| `select-employees` | CustomComponentSelectEmployees | 员工选择器 |
| `rich-editor` | CustomComponentEditor | 富文本编辑器 |
| `mail-send` | CustomComponentSendMail | 邮件发送 |
| `file-import` | CustomComponentFileImport | 文件导入 |
| `file-export` | CustomComponentFileExport | 文件导出 |
| `CustomComponentFormLayout` | CustomComponentFormLayout | 表单布局 |
| `CustomComponentDialog` | CustomComponentDialog | 对话框 |
| `CustomComponentRow` | CustomComponentRow | 行布局 |
| `CustomComponentCol` | CustomComponentCol | 列布局 |
| `CustomComponentCycleTabPane` | CustomComponentCycleTabPane | 循环标签页 |
| `CustomComponentInputDialog` | CustomComponentInputDialog | 输入对话框 |
| `CustomComponentPlain` | CustomComponentPlain | 纯文本(表格列) |
| `CustomComponentSelectEmployees` | CustomComponentSelectEmployees | 员工选择器 |
| `CustomComponentEditor` | CustomComponentEditor | 富文本编辑器 |
| `CustomComponentSendMail` | CustomComponentSendMail | 邮件发送 |
| `CustomComponentFileImport` | CustomComponentFileImport | 文件导入 |
| `CustomComponentFileExport` | CustomComponentFileExport | 文件导出 |
| `CustomComponentTree` | CustomComponentTree | 树形控件 |
| `CustomComponentSteps` | CustomComponentSteps | 步骤条 |

### 配置属性命名规则

1. **布尔值属性**: 使用 `'1'`/`'0'` 字符串或 `true`/`false` 布尔值
2. **数字属性**: 可使用字符串,组件内部会自动转换
3. **样式属性**: `defStyle` 为 JSON 字符串,需序列化
4. **扩展属性**: `extendAttr` 为 JSON 字符串,可包含函数(字符串形式)
5. **事件属性**: 以 `on` 开头的属性会被识别为事件处理器
6. **国际化属性**: 中文用 `Zh` 后缀,英文用 `En` 后缀

### 特殊说明

1. **表格列配置**: 表格列自动设置 `labelHidden='1'`, `isColumn=true`
2. **循环组件**: 根据数据动态生成 `multiPmPageMetaList`
3. **规则引擎**: `hireRelat` 存储组件关联路径,用于规则匹配
4. **动态映射**: `dynamicMapComp` 存储 `dynamicHireRelat` 到配置的映射
5. **表单校验**: `requiredFlag='1'` 自动生成必填校验规则
6. **禁用计算**: 根据 `mode` 和 `editFlag` 自动计算 `disabled`
7. **隐藏计算**: `hidden='1'` 或 `collapseHidden='1'` 隐藏组件

---

**文档版本**: 1.0  
**更新日期**: 2024-01-15  
**适用版本**: resolver-egretimp-plus v0.1.140
