resolver-egretimp-plus 0.1.141 → 0.1.142

package//346/270/262/346/237/223/345/231/250/344/275/277/347/224/250/346/211/213/345/206/214.md

@@ -0,0 +1,2242 @@
+# 组件配置属性完整参考
+
+## 目录
+
+- [渲染器使用](#渲染器使用)
+  - [基础使用](#基础使用)
+  - [从后端加载配置](#从后端加载配置)
+  - [完整属性列表](#完整属性列表)
+  - [事件与数据绑定](#事件与数据绑定)
+  - [多模式支持](#多模式支持)
+- [全局通用属性](#全局通用属性)
+  - [基础属性](#基础属性)
+  - [布局属性](#布局属性)
+  - [表单项属性](#表单项属性)
+  - [校验属性](#校验属性)
+  - [事件属性](#事件属性)
+  - [服务编排属性](#服务编排属性)
+- [表单输入组件](#表单输入组件)
+  - [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