misp-ui-library-test 0.0.1

package/src/packages/form/src/form-field.vue

@@ -0,0 +1,790 @@
+<script>
+import { SlotContentProp, FormFieldProp } from './main.vue'
+
+import UiFormItem from './form-item.vue'
+import UiInput from '../../input/index.js'
+import UiSelect from '../../select/index.js'
+import { RadioGroup as UiRadioGroup } from '../../radio/index.js'
+import UiIcon from '../../icon/index.js'
+import UiButton from '../../button/index.js'
+
+import { get, isArray, isEmpty, isString } from '../../../utils/lodash/index.js'
+
+/**
+ * 内置表单控件映射
+ */
+const COMPONENT_MAP = {
+  input: UiInput,
+  select: UiSelect,
+  radio: UiRadioGroup,
+  icon: UiIcon,
+  button: UiButton,
+}
+
+/**
+ * 选项化渲染配置
+ */
+const OPTIONAL_RENDER_CONFIG = {
+  select: { componentName: 'UiOption' },
+  radio: { componentName: 'UiRadio' },
+}
+
+const isThenable = (value) => value && typeof value.then === 'function'
+
+const nativeHtmlTag = ['div', 'span', 'p', 'i', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'img', 'input', 'button', 'section', 'article', 'header', 'footer', 'nav', 'main', 'aside', 'ul', 'ol', 'li', 'table', 'tr', 'td', 'th', 'thead', 'tbody', 'form', 'label']
+const isNativeTag = type => typeof type === 'string' && nativeHtmlTag.includes(type.toLowerCase())
+
+const normalizeOptions = (data) => Array.isArray(data) ? data : []
+
+const getFieldDefaultValue = field => field.multiple || (isArray(field.children) && !isEmpty(field.children)) ? [] : undefined
+
+export default {
+  name: 'UiFormField',
+  components: {
+    UiFormItem,
+    UiFormField: () => import('./form-field.vue'),
+  },
+  props: {
+    /**
+     * @type {Array<FormFieldProp>}
+     */
+    fields: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  inject: ['uiForm'],
+  data() {
+    return {
+      resolvedOptionsMap: {},
+      dynamicOptionsFields: {},
+      dynamicOptionRegistrations: {},
+      rowUidMap: {},
+    }
+  },
+  computed: {
+    /**
+     * 获取表单模型数据
+     * @returns {Object} 表单绑定的 model 对象
+     */
+    modelValue() {
+      return this.uiForm?.model || {}
+    },
+  },
+  created() {
+    this.initOptions()
+  },
+  watch: {
+    fields: {
+      handler(newFields) {
+        if (!newFields) return
+        // 重新解析所有带 options 的字段（包括嵌套）
+        this.initOptions()
+      },
+      deep: true,
+    },
+    modelValue: {
+      handler() {
+        this.refreshAllDynamicOptions()
+      },
+      deep: true, // 深度监听，确保嵌套对象变化也能捕获
+    },
+  },
+  methods: {
+    /**
+     * 统一解析并存储字段的 options 数据
+     * 支持同步数组、异步 Promise 以及返回数组/ Promise 的函数
+     * @param {Object} field 字段配置对象
+     * @param {String} key 用于存储的唯一 Key，默认为 field.prop
+     * @param {Object} [contextData] 上下文数据，包含 rowData 和 modelValue
+     */
+    resolveAndStoreOptions(field, key, contextData = {}) {
+      if (!field || !key) return
+
+      const rawOptions = field.options
+      const isDynamicFunction = typeof rawOptions === 'function'
+      const updateState = (data) => this.$set(this.resolvedOptionsMap, key, normalizeOptions(data))
+
+      // 对函数型 options 进行监听注册
+      if (isDynamicFunction) {
+        // 使用 key 作为唯一标识
+        this.$set(this.dynamicOptionsFields, key, {
+          keyPrefix: key,
+          fieldConfig: field, // 保存原始配置引用
+        })
+      } else {
+        // 如果不是函数（例如静态数组或 Promise），且之前注册过动态字段，则移除动态监听
+        if (this.dynamicOptionsFields[key]) {
+          this.$delete(this.dynamicOptionsFields, key)
+        }
+      }
+
+      try {
+        if (isThenable(rawOptions)) {
+          this.handleAsyncOptions(rawOptions, key, updateState)
+          return
+        }
+        if (Array.isArray(rawOptions)) {
+          updateState(rawOptions)
+          return
+        }
+        if (isDynamicFunction) {
+          const result = rawOptions(contextData.rowData, contextData.modelValue)
+          if (isThenable(result)) {
+            this.handleAsyncOptions(result, key, updateState)
+          } else {
+            updateState(result)
+          }
+          return
+        }
+        // 其他情况初始化为空数组
+        updateState([])
+      } catch (error) {
+        console.error(`[UiFormField] Error resolving options for key "${key}":`, error)
+        updateState([])
+      }
+    },
+
+    /**
+     * 获取或初始化指定路径的 UID 列表
+     * @param {String} path - 数据路径
+     * @param {Number} length - 当前数据列表的长度
+     */
+     getOrCreateUids(path, length) {
+      !this.rowUidMap[path] && this.$set(this.rowUidMap, path, [])
+      const uids = this.rowUidMap[path]
+      // 如果 UID 数量少于数据长度，补充缺失的 UID
+      if (uids.length < length) {
+        for (let i = uids.length; i < length; i++) {
+          uids.push(Math.floor(Date.now() + Math.random() * 1000))
+        }
+      }
+      // 如果 UID 数量多于数据长度（通常发生在删除后未同步，或外部替换了更短的数组），截断
+      if (uids.length > length) {
+        uids.splice(length)
+      }
+      return uids
+    },
+
+    /**
+     * 计算字段是否可见
+     * @param {FormFieldProp} field - 字段配置
+     * @param {Object} rowData - 当前行数据或表单数据
+     * @returns {Boolean} 是否可见
+     */
+    isVisible(field, rowData) {
+      // 默认可见
+      if (field.visible === undefined || field.visible === null) return true
+      if (typeof field.visible === 'function') {
+        // 传入 rowData 和完整表单模型，供用户进行复杂判断
+        return !!field.visible(rowData, this.modelValue)
+      }
+      return !!field.visible
+    },
+
+    /**
+     * 递归解析字段配置树中的 options，支持无限层级嵌套
+     * 解析后的 options 会根据路径生成唯一 Key 存入 resolvedOptionsMap
+     * @param {Array} fields - 字段配置列表
+     * @param {String} [parentKeyPrefix] - 父级 Key 前缀，用于构建唯一 Key，防止嵌套字段 Key 冲突
+     */
+    parseFieldsForOptions(fields, parentKeyPrefix = '') {
+      if (!fields || !fields.length) return
+      
+      fields.forEach((field) => {
+        // 处理当前字段的 options
+        if (field.options && field.prop) {
+          const currentKey = parentKeyPrefix ? `${parentKeyPrefix}__${field.prop}` : field.prop
+          if (typeof field.options === 'function') {
+            this.$set(this.dynamicOptionRegistrations, currentKey, {
+              fieldConfig: field,
+              keyPrefix: parentKeyPrefix // 用于后续构建 rowData 路径
+            })
+          } else {
+            // 静态数据，直接解析一次即可，或者也可以存入 map 供统一读取
+            this.resolveAndStoreOptions(field, currentKey, {})
+          }
+        }
+        // 处理当前字段 slots 中的 options
+        if (field.slots && field.prop) {
+          this.parseSlotsForOptions(field.slots, field.prop)
+        }
+        // 递归处理 children
+        if (field.children && field.children.length) {
+          const nextPrefix = field.prop ? (parentKeyPrefix ? `${parentKeyPrefix}__${field.prop}` : field.prop) : parentKeyPrefix
+          this.parseFieldsForOptions(field.children, nextPrefix)
+        }
+      })
+    },
+    /**
+     * 根据当前表单状态刷新所有动态 Options
+     */
+    refreshAllDynamicOptions() {
+      const model = this.modelValue
+      if (!model || Object.keys(this.dynamicOptionRegistrations).length === 0) return
+
+      Object.keys(this.dynamicOptionRegistrations).forEach(key => {
+        const { fieldConfig, keyPrefix } = this.dynamicOptionRegistrations[key]
+        
+        // 关键：我们需要找到这个 key 对应的具体 rowData
+        // keyPrefix 类似于 "users__0" 或 "cycle__1"
+        // 我们需要将其转换回数据路径，例如 "users.0"
+        
+        let rowData = model
+        if (keyPrefix) {
+          // 将 __ 替换为 . 以获取路径
+          const path = keyPrefix.replace(/__/g, '.')
+          // 使用 get 工具函数获取当前行/对象数据
+          rowData = get(model, path) || {}
+        }
+
+        // 重新执行 options 函数，传入最新的 rowData 和 model
+        this.resolveAndStoreOptions(fieldConfig, key, {
+          rowData: rowData,
+          modelValue: model
+        })
+      })
+    },
+    /**
+     * 选项数据初始化，统一接口
+     */
+    initOptions() {
+      this.dynamicOptionRegistrations = {} // 清空旧注册
+      this.parseFieldsForOptions(this.fields)
+      // 初始化时也执行一次刷新，确保初始数据正确
+      this.refreshAllDynamicOptions()
+    },
+
+    /**
+     * 递归解析 slots 配置中的 options
+     * @param {Object} slotsConfig - 插槽配置对象 { slotName: config | config[] }
+     * @param {String} parentKeyPrefix - 父级 Key 前缀 (通常是 field.prop)
+     */
+    parseSlotsForOptions(slotsConfig, parentKeyPrefix) {
+      if (!slotsConfig || !parentKeyPrefix) return
+
+      Object.keys(slotsConfig).forEach(slotName => {
+        const slotContent = slotsConfig[slotName]
+        const configs = Array.isArray(slotContent) ? slotContent : [slotContent]
+        
+        configs.forEach((config, index) => {
+          this.parseSlotNodeForOptions(config, `${parentKeyPrefix}__slot__${slotName}__${index}`)
+        })
+      })
+    },
+    /**
+     * 【新增】递归解析单个 Slot 节点配置
+     * @param {Object} config - 节点配置
+     * @param {String} currentKeyPrefix - 当前层级的 Key 前缀
+     */
+    parseSlotNodeForOptions(config, currentKeyPrefix) {
+      if (!config || typeof config !== 'object') return
+
+      // 1. 如果当前节点直接配置了 options，则解析
+      // 注意：插槽内的组件通常没有 prop，所以我们直接使用传入的 currentKeyPrefix 作为存储 Key
+      if (config.options) {
+        this.resolveAndStoreOptions({ options: config.options }, currentKeyPrefix)
+        // 将生成的 Key 挂载到配置对象上，供渲染时使用
+        // 使用 Object.defineProperty 避免影响 JSON.stringify 或不必要的响应式追踪
+        Object.defineProperty(config, '__resolvedOptionsKey__', {
+          value: currentKeyPrefix,
+          enumerable: false,
+          writable: false
+        })
+      }
+
+      // 2. 递归处理子节点 (slots.default 或 children)
+      // 处理 slots 嵌套
+      if (config.slots) {
+        // 对于插槽内的嵌套 slots，我们继续追加路径，防止 key 冲突
+        Object.keys(config.slots).forEach(subSlotName => {
+           const subContent = config.slots[subSlotName]
+           const subConfigs = Array.isArray(subContent) ? subContent : [subContent]
+           subConfigs.forEach((subConfig, idx) => {
+             this.parseSlotNodeForOptions(subConfig, `${currentKeyPrefix}__subSlot__${subSlotName}__${idx}`)
+           })
+        })
+      }
+      
+      // 处理可能的 children 数组 (如果配置结构支持)
+      if (config.children && Array.isArray(config.children)) {
+         config.children.forEach((child, idx) => {
+           this.parseSlotNodeForOptions(child, `${currentKeyPrefix}__child__${idx}`)
+         })
+      }
+    },
+
+    /**
+     * 处理异步 options 数据加载
+     * @param {Promise} promise - 返回 options 数据的 Promise 对象
+     * @param {String} key - 存储 Key
+     * @param {Function} updateState - 状态更新回调函数
+     */
+    handleAsyncOptions(promise, key, updateState) {
+      promise
+        .then((res) => updateState(res))
+        .catch((err) => {
+          console.warn(`[UiFormField] Failed to load options for key "${key}":`, err)
+          updateState([])
+        })
+    },
+
+    /**
+     * 根据类型字符串或组件定义获取对应的组件构造器
+     * @param {String | Function | Object} type - 组件类型标识或组件定义
+     * @returns {Function | String} 组件构造器或组件名称字符串
+     */
+    getComponent(type) {
+      if (!type) return 'UiInput'
+      if (typeof type === 'string') return COMPONENT_MAP[type] || type
+      return type
+    },
+
+    /**
+     * 获取特定组件类型的可选渲染配置
+     * @param {String|Function|Object} type - 组件类型标识
+     * @returns {Object|null} 渲染配置对象，如果不存在则返回 null
+     */
+    getOptionalConfig(type) {
+      return typeof type === 'string' ? OPTIONAL_RENDER_CONFIG[type] : null
+    },
+
+    /**
+     * 将插槽配置转换为 Vue 的作用域插槽对象
+     * @param {Object} slotsConfig - 插槽配置对象
+     * @returns {Object} 转换后的作用域插槽对象
+     */
+    buildScopedSlots(slotsConfig, rowData) {
+      if (!slotsConfig) return {}
+      const scopedSlots = {}
+      Object.keys(slotsConfig).forEach((slotName) => {
+        scopedSlots[slotName] = () => this.renderSlotContent(slotsConfig[slotName], rowData)
+      })
+      return scopedSlots
+    },
+
+    /**
+     * 递归渲染插槽内容
+     * 支持文本、HTML 字符串以及嵌套组件渲染
+     * @param {Object | Array} config - 插槽内容配置
+     * @returns {Array<VNode>} 渲染后的 VNode 数组
+     */
+    renderSlotContent(config, rowData) {
+      if (!config) return []
+      const configs = Array.isArray(config) ? config : [config]
+      return configs.map((item) => this.renderConfigNode(item, rowData)).filter(Boolean)
+    },
+
+    /**
+     * 将 options 数据渲染为 VNode 节点列表
+     * @param {Array} options - 选项数据数组
+     * @param {String} componentName - 选项组件的名称（如 'UiOption'）
+     * @returns {Array<VNode>} 渲染后的选项 VNode 数组
+     */
+    renderOptionsAsVNodes(options, componentName) {
+      if (!options || !options.length) return []
+      const Comp = this.getComponent(componentName)
+      return options.map((opt, index) => {
+        const props = typeof opt === 'object' && opt !== null ? { ...opt } : { label: opt, value: opt }
+        return (
+          <Comp
+            key={index}
+            props={props}
+          />
+        )
+      })
+    },
+
+    /**
+     * 渲染复合表单项（支持递归嵌套的多行表单结构）
+     * 处理数组类型的字段，提供新增、删除行以及内部字段的递归渲染
+     * @param {FormFieldProp} field - 当前复合字段配置
+     * @param {Number} index - 当前字段在父级列表中的索引
+     * @param {String} [parentPropPath] - 父级属性路径前缀 (例如: "users.0")
+     * @param {String} [optionsKeyPrefix] - 父级 Options Key 前缀 (例如: "users__0")
+     * @returns {VNode} 渲染后的复合表单项 VNode
+     */
+    renderComplexField(field, index, parentPropPath = '', optionsKeyPrefix = '') {
+      const prop = field.prop
+      // 计算当前层级的完整路径前缀
+      const currentPathPrefix = parentPropPath ? `${parentPropPath}.${prop}` : prop
+      // 计算当前层级的 Options Key 前缀
+      const currentOptionsKeyPrefix = optionsKeyPrefix ? `${optionsKeyPrefix}__${prop}` : prop
+      // 获取当前字段绑定的数据列表
+      let list = get(this.modelValue, currentPathPrefix)
+      // 确保是数组
+      if (!Array.isArray(list)) {
+        list = []
+        this.ensureArrayModel(currentPathPrefix)
+        list = get(this.modelValue, currentPathPrefix)
+      }
+
+      // 【关键修改】获取当前路径对应的 UID 列表，并确保长度一致
+      const uids = this.getOrCreateUids(currentPathPrefix, list.length)
+
+      // 新增按钮逻辑
+      const handleAdd = () => {
+        const newItem = {}
+        
+        // 初始化子字段默认值
+        if (field.children) {
+          field.children.forEach(child => {
+            newItem[child.prop] = getFieldDefaultValue(child)
+          })
+        }
+        list.push(newItem)
+        
+        // 生成新 UID
+        const newUid = Math.floor(Date.now() + Math.random() * 1000)
+        uids.push(newUid)
+        this.$set(this.rowUidMap, currentPathPrefix, [...uids])
+      }
+
+      const rows = list.map((item, itemIndex) => {
+        // 当前行的路径前缀: e.g., "users.0"
+        const rowPathPrefix = `${currentPathPrefix}.${itemIndex}`
+        // 渲染该行内的所有子字段
+        const childrenNodes = this.renderFieldItems(
+          field.children, 
+          item, 
+          rowPathPrefix, 
+          currentOptionsKeyPrefix, 
+          field.labelWidth
+        )
+
+        // 删除按钮
+        const deleteBtn = <UiButton {...{
+          class: 'ui-form-complex__delete-btn',
+          props: { icon: 'ui-icon-delete', type: 'danger', textual: true, plain: true, },
+          on: {
+            // 删除时同步移除 UID
+            click: () => {
+              list.splice(itemIndex, 1)
+              uids.splice(itemIndex, 1)
+              // 触发响应式更新
+              this.$set(this.rowUidMap, currentPathPrefix, [...uids])
+            }
+          }
+        }}/>
+
+        // 使用 uid 作为 key，如果没有则 fallback 到 index
+        const uniqueKey = uids[itemIndex] || itemIndex
+
+        return <div {...{
+          class: 'ui-form-complex--item',
+          key: uniqueKey,
+        }}>
+          <div {...{ class: 'ui-form-complex--item__inner' }}>{childrenNodes}</div>
+          <div {...{ class: 'ui-form-complex--item__delete' }}>{deleteBtn}</div>
+        </div>
+      })
+
+      // 新增按钮 UI
+      const addBtn = <UiButton {...{
+        class: 'ui-form-complex__add-btn',
+        props: { label: '新增', icon: 'ui-icon-plus', type: 'primary', textual: true, plain: true },
+        on: { click: handleAdd }
+      }} />
+
+      // 外层容器 UiFormItem
+      const complexKey = optionsKeyPrefix ? `complex-${optionsKeyPrefix}-${index}` : `complex-${prop}-${index}`
+      
+      return <UiFormItem {...{
+        class: 'ui-form-complex--field',
+        key: complexKey,
+        props: {
+          label: field.label,
+          prop: currentPathPrefix, 
+          rules: field.rules,
+          labelWidth: field.labelWidth,
+          error: field.error,
+          showMessage: field.showMessage,
+        }
+      }}>
+        <div {...{ slot: 'label', class: 'ui-form-complex--field__add' }}>
+          <div {...{ class: 'field-label' }}>{field.label}</div>
+          <div>{addBtn}</div>
+        </div>
+        <div {...{ class: 'ui-form-complex--field__inner' }}>{rows}</div>
+      </UiFormItem>
+    },
+
+    /**
+     * 辅助方法：确保模型中指定路径的值为数组
+     * 如果路径中间节点不存在，会自动创建空对象；如果终点节点不存在，会初始化为空数组
+     * @param {String} path - 目标路径，以点号分隔 (e.g., "a.b.c")
+     */
+    ensureArrayModel(path) {
+      const keys = path.split('.')
+      let current = this.modelValue
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i]
+        if (i === keys.length - 1) {
+          // 最后一层，如果是 undefined 则初始化为数组
+          if (current[key] === undefined || current[key] === null) {
+            this.$set(current, key, [])
+          }
+        } else {
+          // 中间层，如果是 undefined 则初始化为对象
+          if (current[key] === undefined || current[key] === null) {
+            this.$set(current, key, {})
+          }
+          current = current[key]
+        }
+      }
+    },
+
+    /**
+     * 辅助方法：渲染一组字段项（支持递归处理复合字段）
+     * @param {Array} fields - 字段配置列表
+     * @param {Object} rowData - 当前行的数据对象引用
+     * @param {String} rowPathPrefix - 当前行的数据路径前缀 (e.g., "users.0")
+     * @param {String} optionsKeyPrefix - 当前层级的 Options Key 前缀 (e.g., "users")
+     * @param {String|Number} parentLabelWidth - 父级 labelWidth，用于继承
+     * @returns {Array<VNode>} 渲染后的表单项 VNode 数组
+     */
+    renderFieldItems(fields, rowData, rowPathPrefix, optionsKeyPrefix, parentLabelWidth) {
+      if (!fields || !fields.length) return []
+
+      return fields.map((childField, index) => {
+        // 1. 判断可见性
+        // 对于嵌套字段，rowData 是当前行的数据对象
+        if (!this.isVisible(childField, rowData)) {
+          return null
+        }
+        // 如果子字段本身也是复合字段 (有 children)，递归调用 renderComplexField
+        if (childField.children && childField.children.length) {
+          return this.renderComplexField(
+            childField, 
+            index,
+            rowPathPrefix, // 父级数据路径
+            optionsKeyPrefix // 父级 options key 前缀
+          )
+        }
+
+        // 普通字段渲染
+        const nestedProp = `${rowPathPrefix}.${childField.prop}`
+        if (childField.options && typeof childField.options === 'function') {
+           const currentOptionsKey = optionsKeyPrefix ? `${optionsKeyPrefix}__${childField.prop}` : childField.prop
+           this.resolveAndStoreOptions(
+             childField,
+             currentOptionsKey,
+             { rowData: rowData, modelValue: this.modelValue }
+           )
+        }
+        // 如果 itemRender 返回空（虽然目前不会，但以防万一），则不渲染
+        const dynamicComponent = this.itemRender(childField, rowData, optionsKeyPrefix)
+        if (!dynamicComponent) return null
+        
+        return <UiFormItem {...{
+          key: nestedProp, // 使用完整路径作为 key 更稳定
+          props: {
+            label: childField.label,
+            prop: nestedProp,
+            rules: childField.rules,
+            showMessage: childField.showMessage,
+            labelWidth: childField.labelWidth || parentLabelWidth,
+          },
+        }}>{ dynamicComponent }</UiFormItem>
+      }).filter(Boolean) // 过滤掉 null
+    },
+
+    /**
+     * 通用节点渲染器
+     * 根据配置对象渲染单个 VNode，支持文本、HTML、原生标签、组件
+     * @param {SlotContentProp | String} config - 配置对象或字符串
+     * @param {Object} rowData - 当前行数据（用于动态属性计算，如果需要）
+     * @returns {VNode | null}
+     */
+     renderConfigNode(config, rowData = {}) {
+      if (!config) return null
+      
+      if (typeof config === 'string') {
+        return config
+      }
+
+      if (typeof config === 'object') {
+        const tagName = config.type || config.component
+        const Comp = this.getComponent(tagName)
+        const isNative = isNativeTag(Comp)
+        if (Comp) {
+          // 构建属性
+          const componentData = {
+            props: config.props || {},
+            on: config.on || {},
+            style: config.style || {},
+            class: config.class || {},
+          }
+
+          // 递归渲染子插槽/子内容
+          const children = []
+          if (config.text) {
+            children.push(config.text)
+          }
+          // 从 slots.default 获取子内容
+          if (config.slots && config.slots.default) {
+            const subConfigs = Array.isArray(config.slots.default) ? config.slots.default : [config.slots.default]
+            children.push(...subConfigs.map(c => this.renderConfigNode(c, rowData)).filter(Boolean))
+          }
+
+          // 注入 Options
+          const optionalConfig = this.getOptionalConfig(tagName)
+          const hasOptionsCapability = !!optionalConfig // 例如 select 有 UiOption 配置
+          if (hasOptionsCapability) {
+             let optionsToRender = []
+             if (config.__resolvedOptionsKey__) {
+               optionsToRender = this.resolvedOptionsMap[config.__resolvedOptionsKey__] || []
+             } else if (config.options) {
+               optionsToRender = normalizeOptions(config.options)
+             }
+             if (optionsToRender.length > 0) {
+               if (optionalConfig?.componentName) {
+                 const optionNodes = this.renderOptionsAsVNodes(optionsToRender, optionalConfig.componentName)
+                 children.unshift(...optionNodes) 
+               }
+             }
+          }
+
+          if (isNative) {
+            // 原生标签
+            return <Comp {...componentData}>{children}</Comp>
+          } else {
+            // 自定义组件
+            const scopedSlots = config.slots ? this.buildScopedSlotsFromConfig(config.slots, rowData) : {}
+            return <Comp {...componentData} scopedSlots={scopedSlots}>{children}</Comp>
+          }
+        }
+      }
+      return null
+    },
+    /**
+     * 构建插槽
+     */
+    buildScopedSlotsFromConfig(slotsConfig, rowData) {
+      if (!slotsConfig) return {}
+      const scopedSlots = {}
+      // 排除 default 插槽，这在 renderConfigNode 方法中已经处理
+      Object.keys(slotsConfig).filter(sn => sn !== 'default').forEach((slotName) => {
+        scopedSlots[slotName] = () => {
+           const content = slotsConfig[slotName]
+           const configs = Array.isArray(content) ? content : [content]
+           return configs.map(c => this.renderConfigNode(c, rowData)).filter(Boolean)
+        }
+      })
+      return scopedSlots
+    },
+
+    /**
+     * 渲染单个表单项的配置生成器
+     * 根据字段配置生成对应的组件定义和数据绑定对象，支持处理带有动态 options 的组件（如 Select）。
+     * @param {FormFieldProp} field - 当前字段的配置对象
+     * @param {Object} rowData - 当前行或表单的数据对象，用于获取字段值
+     * @param {String} [optionsKeyPrefix=''] - 选项数据的关键字前缀，用于在 resolvedOptionsMap 中查找对应的 options 数据
+     * @returns {{ ComponentDef: Function|String, componentData: Object }} 返回包含组件定义和组件数据配置的对象
+     */
+    itemRender(field, rowData, optionsKeyPrefix = '') {
+      const componentType = field.type
+      const ComponentDef = this.getComponent(componentType)
+      const optionalConfig = this.getOptionalConfig(componentType)
+
+      // 计算 disabled 状态
+      // 支持 boolean 或 function(rowData) => boolean
+      let isDisabled = this.uiForm?.disabled // 全局表单禁用优先
+      if (!isDisabled && field.disabled != null) {
+        if (typeof field.disabled === 'function') {
+          // 如果是函数，传入当前行数据计算
+          isDisabled = !!field.disabled(rowData, this.modelValue)
+        } else {
+          // 如果是布尔值，直接使用
+          isDisabled = !!field.disabled
+        }
+      }
+
+      if (isNativeTag(ComponentDef)) {
+        // 构造一个标准的 SlotContentProp 对象
+        const nativeConfig = {
+          component: componentType,
+          props: field.props || {},
+          on: field.on || {},
+          style: field.style || {},
+          class: field.class || {},
+          text: field.text,
+          slots: {},
+        }
+
+        // 处理 context，将内容作为 default 插槽传入
+        if (field.context) {
+          if (typeof field.context === 'string') {
+            nativeConfig.slots.default = field.context
+          } else if (Array.isArray(field.context)) {
+            nativeConfig.slots.default = field.context.map(item => typeof item === 'string' ? { text: item } : item)
+          }
+        }
+
+        // 使用通用节点渲染器
+        return this.renderConfigNode(nativeConfig, rowData, optionsKeyPrefix)
+      }
+
+      const componentData = {
+        props: {
+          value: rowData[field.prop],
+          ...(field.props || {}),
+          disabled: isDisabled,
+        },
+        on: {
+          ...(field.on || {}),
+          input: (val) => {
+            this.$set(rowData, field.prop, val)
+            if (typeof field.on?.input === 'function') {
+              field.on.input(val)
+            }
+          },
+        },
+        scopedSlots: this.buildScopedSlots(field.slots, rowData),
+      }
+
+      if (optionalConfig?.componentName && field.options != null) {
+        const optionsKey = optionsKeyPrefix ? `${optionsKeyPrefix}__${field.prop}` : field.prop
+        const currentOptions = this.resolvedOptionsMap[optionsKey] || []
+        const originalDefaultSlot = componentData.scopedSlots.default
+
+        componentData.scopedSlots.default = () => {
+          const autoNodes = this.renderOptionsAsVNodes(currentOptions, optionalConfig.componentName)
+          const userNodes = originalDefaultSlot ? originalDefaultSlot() : []
+          return [...autoNodes, ...userNodes]
+        }
+      }
+
+      return <ComponentDef { ...componentData }/>
+    }
+  },
+  render(h) {
+    if (!this.fields || !this.fields.length) return null
+
+    const fieldNodes = this.fields.map((field, index) => {
+      // 1. 判断可见性：顶级字段的 rowData 即为表单模型 this.modelValue
+      if (!this.isVisible(field, this.modelValue)) return null
+      // 嵌套/复合表单 Children
+      if (field.children && field.children.length) return this.renderComplexField(field, index)
+
+      // 单一表单项
+      const dynamicComponent = this.itemRender(field, this.modelValue)
+      if (!dynamicComponent) return null
+
+      return h('ui-form-item', {
+        key: field.prop || index,
+        props: {
+          label: field.label,
+          prop: field.prop,
+          rules: field.rules,
+          labelWidth: field.labelWidth,
+          error: field.error,
+          showMessage: field.showMessage,
+        },
+      }, [dynamicComponent])
+    }).filter(Boolean) // 过滤掉 null
+
+    return h('div', { class: 'ui-form-field' }, fieldNodes)
+  },
+}
+</script>