@aspire-ui/element-component-pro 1.0.0

package/src/ProForm/ProForm.vue

@@ -0,0 +1,423 @@
+<template>
+  <div ref="formWrapRef" class="ecp-pro-form">
+    <el-form class="ecp-pro-form" ref="formRef" :model="formModel" :rules="formRules" :label-width="effectiveProps.labelWidth"
+      :label-position="effectiveProps.labelPosition" :size="effectiveProps.size" :disabled="effectiveProps.disabled"
+      v-bind="$attrs" v-on="formListeners">
+      <slot name="formHeader" />
+      <el-row :gutter="effectiveProps.gutter" :style="effectiveProps.baseRowStyle">
+        <template v-for="schema in displaySchemas">
+          <el-col v-if="shouldShow(schema)" :key="schema.field" v-bind="getColProps(schema)"
+            :offset="schema.colProps?.offset ?? effectiveProps.baseColProps?.offset ?? 0" :data-field="schema.field">
+            <ProFormItem :schema="schema" :form-model="formModel" :form-disabled="effectiveProps.disabled"
+              :auto-placeholder="effectiveProps.autoSetPlaceholder" :form-action-type="formActionRef">
+              <template v-if="slots[getSlotName(schema)]">
+                <slot :name="getSlotName(schema)" :model="formModel" :schema="schema" :field="schema.field"
+                  :values="formModel" />
+              </template>
+            </ProFormItem>
+          </el-col>
+        </template>
+        <el-col class="ecp-pro-form_col" v-if="effectiveProps.showActionButtonGroup"
+          v-bind="hasMoreFields ? { span: 24 } : effectiveProps.actionColOptions || { span: 6 }">
+          <FormActions :show-action-button-group="effectiveProps.showActionButtonGroup"
+            :show-submit-button="effectiveProps.showSubmitButton" :show-reset-button="effectiveProps.showResetButton"
+            :submit-button-text="effectiveProps.submitButtonText" :reset-button-text="effectiveProps.resetButtonText"
+            :submit-button-icon="effectiveProps.submitButtonIcon" :reset-button-icon="effectiveProps.resetButtonIcon"
+            :submit-loading="submitLoading" :show-advanced-button="effectiveProps.showAdvancedButton"
+            :has-more-fields="hasMoreFields" :collapsed="collapsed" :action-col-options="effectiveActionColOptions"
+            @submit="handleSubmit" @reset="handleReset" @toggle="collapsed = !collapsed">
+            <template slot="submitBefore">
+              <slot name="submitBefore" />
+            </template>
+            <template slot="resetBefore">
+              <slot name="resetBefore" />
+            </template>
+            <template slot="advanceBefore">
+              <slot name="advanceBefore" />
+            </template>
+            <template slot="advanceAfter">
+              <slot name="advanceAfter" />
+            </template>
+            <template slot="actions">
+              <slot name="actions" />
+            </template>
+          </FormActions>
+        </el-col>
+      </el-row>
+      <el-button v-if="effectiveProps.showAdvancedButton && hasMoreFields" type="text" class="ecp-form-actions__advance"
+        @click="collapsed = !collapsed">
+        <i class="el-icon-d-arrow-left" :class="collapsed ? 'down' : 'up'" />
+        {{ collapsed ? '展开' : '收起' }}
+      </el-button>
+      <slot name="formFooter" />
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, useSlots, onMounted, onUnmounted } from 'vue'
+import ProFormItem from './ProFormItem.vue'
+import FormActions from './FormActions.vue'
+import type { ProFormSchema, ProFormProps, FormActionType, ColEx, ScrollToFieldOptions, FormListeners } from '../types'
+
+const props = withDefaults(
+  defineProps<{
+    schemas?: ProFormSchema[]
+    initialValues?: Record<string, unknown>
+    labelWidth?: string
+    labelPosition?: 'left' | 'right' | 'top'
+    gutter?: number
+    size?: 'medium' | 'small' | 'large'
+    disabled?: boolean
+    baseColProps?: ColEx
+    baseRowStyle?: Record<string, string | number>
+    autoSetPlaceholder?: boolean
+    showSubmitButton?: boolean
+    showResetButton?: boolean
+    submitButtonText?: string
+    resetButtonText?: string
+    submitButtonIcon?: string
+    resetButtonIcon?: string
+    showActionButtonGroup?: boolean
+    actionColOptions?: ColEx
+    showAdvancedButton?: boolean
+    autoAdvancedLine?: number
+    alwaysShowLines?: number
+    submitFunc?: () => Promise<void>
+    resetFunc?: () => Promise<void>
+    submitOnReset?: boolean
+    formListeners?: FormListeners
+  }>(),
+  {
+    labelWidth: '120px',
+    labelPosition: 'right',
+    gutter: 24,
+    size: 'medium',
+    autoSetPlaceholder: true,
+    showSubmitButton: true,
+    showResetButton: true,
+    submitButtonText: '提交',
+    resetButtonText: '重置',
+    submitButtonIcon: 'el-icon-search',
+    resetButtonIcon: 'el-icon-refresh-left',
+    showActionButtonGroup: true,
+    showAdvancedButton: false,
+    autoAdvancedLine: 3,
+    alwaysShowLines: 1,
+    baseColProps: () => ({ xs: 24, sm: 12, md: 12, lg: 8, xl: 6 }),
+    actionColOptions: () => ({ xs: 24, sm: 12, md: 12, lg: 8, xl: 6 }),
+    submitOnReset: false,
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'submit', values: Record<string, unknown>): void
+  (e: 'reset'): void
+  (e: 'register', formAction: FormActionType): void
+}>()
+const slots = useSlots()
+const formRef = ref()
+const formWrapRef = ref()
+const submitLoading = ref(false)
+const collapsed = ref(true)
+const formModel = ref<Record<string, unknown>>({})
+const formRules = ref<Record<string, unknown[]>>({})
+const innerSchemas = ref<ProFormSchema[]>([])
+const innerProps = ref<Partial<ProFormProps>>({})
+
+/** Element UI 栅格断点 (px) */
+const BREAKPOINTS = { xl: 1920, lg: 1200, md: 992, sm: 768 }
+
+/** 根据当前视口宽度获取 ColEx 的有效 span（与 el-col 断点逻辑一致） */
+const getEffectiveSpan = (colProps?: ColEx | null, baseColProps?: ColEx | null, width?: number): number => {
+  const w = width ?? (typeof window !== 'undefined' ? window.innerWidth : 1920)
+  const col = colProps ?? {}
+  const base = baseColProps ?? {}
+  const fallback = base.span ?? 8
+  if (w >= BREAKPOINTS.xl) return col.xl ?? base.xl ?? col.lg ?? base.lg ?? col.md ?? base.md ?? col.sm ?? base.sm ?? col.xs ?? base.xs ?? col.span ?? fallback
+  if (w >= BREAKPOINTS.lg) return col.lg ?? base.lg ?? col.md ?? base.md ?? col.sm ?? base.sm ?? col.xs ?? base.xs ?? col.span ?? fallback
+  if (w >= BREAKPOINTS.md) return col.md ?? base.md ?? col.sm ?? base.sm ?? col.xs ?? base.xs ?? col.span ?? fallback
+  if (w >= BREAKPOINTS.sm) return col.sm ?? base.sm ?? col.xs ?? base.xs ?? col.span ?? fallback
+  // if (w < BREAKPOINTS.sm) return col.sm ?? base.sm ?? col.xs ?? base.xs ?? col.span ?? fallback
+  return col.xs ?? base.xs ?? col.span ?? fallback
+}
+
+const effectiveProps = computed(() => ({ ...props, ...innerProps.value }))
+const effectiveActionColOptions = computed(() => effectiveProps.value.actionColOptions ?? { span: 24 })
+
+/** 当前视口宽度，用于响应式计算 span */
+const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1920)
+
+/** 计算前 maxLines 行能容纳的 schema 数量（考虑栅格断点，每个 field 可有自己的 span） */
+const getVisibleSchemaCount = (
+  schemas: ProFormSchema[],
+  baseColProps: ColEx | undefined,
+  maxLines: number,
+  width: number
+) => {
+  let remaining = 24
+  let rows = 1
+  let count = 0
+  for (const schema of schemas) {
+    const span = getEffectiveSpan(schema.colProps, baseColProps, width)
+    if (span > remaining) {
+      rows++
+      if (rows > maxLines) break
+      remaining = 24 - span
+    } else {
+      remaining -= span
+    }
+    count++
+  }
+  return count
+}
+
+const hasMoreFields = computed(() => {
+  const schemas = innerSchemas.value.filter((s) => shouldShow(s))
+
+  if (!effectiveProps.value.showAdvancedButton) return false
+  const lines = effectiveProps.value.alwaysShowLines ?? 1
+  const baseColProps = effectiveProps.value.baseColProps
+  const maxVisible = getVisibleSchemaCount(schemas, baseColProps, lines, windowWidth.value)
+  console.log(schemas.length, maxVisible)
+  return schemas.length > maxVisible
+})
+
+const formListeners = computed((): FormListeners => {
+  return effectiveProps.value.formListeners ?? {}
+})
+
+const displaySchemas = computed(() => {
+  const schemas = innerSchemas.value.filter((s) => {
+    return shouldShow(s)
+  })
+  if (!effectiveProps.value.showAdvancedButton || !collapsed.value) return schemas
+  const lines = effectiveProps.value.alwaysShowLines ?? 1
+  const baseColProps = effectiveProps.value.baseColProps
+  const maxVisible = getVisibleSchemaCount(schemas, baseColProps, lines, windowWidth.value)
+  return schemas.slice(0, maxVisible)
+})
+
+const shouldShow = (schema: ProFormSchema) => {
+  let ifShow = true
+  let show = true
+  if (typeof schema.ifShow === 'function') {
+    ifShow = schema.ifShow({ schema, values: formModel.value, model: formModel.value, field: schema.field })
+  }
+  if (typeof schema.ifShow === 'boolean') {
+    ifShow = schema.ifShow
+  }
+  if (typeof schema.show === 'function') {
+    show = schema.show({ schema, values: formModel.value, model: formModel.value, field: schema.field })
+  }
+  if (typeof schema.show === 'boolean') {
+    show = schema.show
+  }
+  return ifShow && show
+}
+const getColProps = (schema: ProFormSchema) => {
+  return schema.colProps ?? effectiveProps.value.baseColProps ?? {}
+}
+const getSlotName = (schema: ProFormSchema) => schema.slot || schema.field
+
+const initForm = () => {
+  const model: Record<string, unknown> = {}
+  const rules: Record<string, unknown[]> = {}
+  const initialValues = effectiveProps.value.initialValues ?? props.initialValues
+  innerSchemas.value.forEach((schema) => {
+    model[schema.field] = schema.defaultValue ?? initialValues?.[schema.field]
+    if (schema.rules?.length) rules[schema.field] = schema.rules
+  })
+  formModel.value = { ...formModel.value, ...model }
+  formRules.value = rules
+}
+
+const filterByIfShow = (values: Record<string, unknown>) => {
+  const result = { ...values }
+  innerSchemas.value.forEach((schema) => {
+    const ifShow = schema.ifShow
+    if (ifShow === undefined) return
+    const visible = typeof ifShow === 'boolean' ? ifShow : ifShow({ schema, values, model: values, field: schema.field })
+    if (!visible) delete result[schema.field]
+  })
+  return result
+}
+
+const processFieldMapToTime = (values: Record<string, unknown>) => {
+  const filtered = filterByIfShow(values)
+  const fieldMap = innerProps.value.fieldMapToTime
+  if (!fieldMap?.length) return filtered
+  const result = { ...filtered }
+  fieldMap.forEach(([field, [startKey, endKey]]) => {
+    const val = result[field]
+    if (Array.isArray(val) && val.length === 2) {
+      delete result[field]
+        ; (result as Record<string, unknown>)[startKey] = val[0]
+        ; (result as Record<string, unknown>)[endKey] = val[1]
+    }
+  })
+  return result
+}
+
+const handleSubmit = async () => {
+  try {
+    await formRef.value?.validate()
+    if (effectiveProps.value.submitFunc) {
+      await effectiveProps.value.submitFunc()
+    } else {
+      submitLoading.value = true
+      emit('submit', processFieldMapToTime({ ...formModel.value }))
+    }
+  } catch (e) {
+    console.error('Form validation failed:', e)
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+const handleReset = async () => {
+  if (effectiveProps.value.resetFunc) {
+    await effectiveProps.value.resetFunc()
+  } else {
+    formRef.value?.resetFields()
+    initForm()
+    emit('reset')
+    if (effectiveProps.value.submitOnReset) await handleSubmit()
+  }
+}
+
+const setFieldsValue = (values: Record<string, unknown>) => {
+  formModel.value = { ...formModel.value, ...values }
+  return Promise.resolve()
+}
+
+const getFieldsValue = () => processFieldMapToTime({ ...formModel.value })
+
+const resetFields = async () => {
+  formRef.value?.resetFields()
+  initForm()
+}
+
+const validate = (nameList?: string[]) =>
+  formRef.value?.validate(nameList) ?? Promise.resolve()
+
+const validateFields = (nameList?: string[]) => {
+  if (!formRef.value) return Promise.resolve()
+  if (!nameList?.length) return formRef.value.validate()
+  return Promise.all(nameList.map((prop) => new Promise((resolve, reject) => {
+    formRef.value.validateField(prop, (valid: boolean) => (valid ? resolve(undefined) : reject(new Error('Validation failed'))))
+  })))
+}
+
+const scrollToField = async (name: string, options?: ScrollToFieldOptions) => {
+  const el = formWrapRef.value?.querySelector(`[data-field="${name}"]`)
+  if (el) {
+    el.scrollIntoView({ behavior: options?.behavior ?? 'smooth', block: options?.block ?? 'nearest' })
+  }
+  return Promise.resolve()
+}
+
+const clearValidate = (name?: string | string[]) => {
+  formRef.value?.clearValidate(name)
+}
+
+const updateSchema = async (data: Partial<ProFormSchema> | Partial<ProFormSchema>[]) => {
+  const list = Array.isArray(data) ? data : [data]
+  list.forEach((item) => {
+    const idx = innerSchemas.value.findIndex((s) => s.field === item.field)
+    if (idx >= 0) innerSchemas.value[idx] = { ...innerSchemas.value[idx], ...item }
+  })
+}
+
+const appendSchemaByField = async (schema: ProFormSchema, prefixField?: string, first?: boolean) => {
+  if (first) innerSchemas.value.unshift(schema)
+  else if (prefixField) {
+    const idx = innerSchemas.value.findIndex((s) => s.field === prefixField)
+    innerSchemas.value.splice(idx + 1, 0, schema)
+  } else innerSchemas.value.push(schema)
+  initForm()
+}
+
+const removeSchemaByField = async (field: string | string[]) => {
+  const fields = Array.isArray(field) ? field : [field]
+  innerSchemas.value = innerSchemas.value.filter((s) => !fields.includes(s.field))
+}
+
+const setProps = async (formProps: Partial<ProFormProps>) => {
+  innerProps.value = { ...innerProps.value, ...formProps }
+  if (formProps.schemas) {
+    innerSchemas.value = [...formProps.schemas]
+    debugger
+    initForm()
+  }
+}
+
+const formActionRef: FormActionType = {
+  getFieldsValue,
+  setFieldsValue,
+  resetFields,
+  validate,
+  validateFields,
+  submit: handleSubmit,
+  scrollToField,
+  clearValidate,
+  updateSchema,
+  appendSchemaByField,
+  removeSchemaByField,
+  setProps,
+}
+
+defineExpose(formActionRef)
+
+const syncSchemas = () => {
+  innerSchemas.value = [...(props.schemas ?? [])]
+  initForm()
+}
+
+const handleResize = () => {
+  if (typeof window !== 'undefined') windowWidth.value = window.innerWidth
+}
+
+onMounted(() => {
+  syncSchemas()
+  emit('register', formActionRef)
+  if (typeof window !== 'undefined') window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  if (typeof window !== 'undefined') window.removeEventListener('resize', handleResize)
+})
+
+watch(() => [props.schemas, props.initialValues], syncSchemas, { deep: true })
+</script>
+
+<style scoped>
+.ecp-pro-form {
+  padding: 16px;
+  position: relative;
+}
+
+.ecp-pro-form__advance {
+  margin-bottom: 16px;
+}
+
+.ecp-pro-form_col {
+  position: relative;
+  float: right;
+}
+
+.el-icon-d-arrow-left.up {
+  transform: rotate(90deg);
+}
+
+.el-icon-d-arrow-left.down {
+  transform: rotate(-90deg);
+}
+
+.ecp-form-actions__advance {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>

package/src/ProForm/ProFormItem.vue

@@ -0,0 +1,250 @@
+<template>
+  <el-form-item
+    v-if="shouldRender"
+    v-show="shouldShow"
+    :prop="schema.field"
+    :required="schema.required"
+    :rules="effectiveRules"
+  >
+    <template slot="label">
+      <span>{{ schema.label }}</span>
+      <el-tooltip
+        v-if="schema.helpMessage"
+        placement="top"
+        effect="light"
+        v-bind="schema.helpComponentProps || {}"
+      >
+        <template slot="content">
+          <template v-if="Array.isArray(schema.helpMessage)">
+            <div v-for="(msg, i) in schema.helpMessage" :key="i" class="ecp-pro-form-item__help-item">
+              {{ msg }}
+            </div>
+          </template>
+          <span v-else>{{ schema.helpMessage }}</span>
+        </template>
+        <i class="el-icon-question ecp-pro-form-item__help-icon" />
+      </el-tooltip>
+    </template>
+    <!-- render 自定义渲染 -->
+    <template v-if="schema.render">
+      <component :is="renderComponent" />
+    </template>
+    <!-- slot 自定义插槽（由 ProForm 传入 default slot） -->
+    <slot v-else-if="hasSlot" :model="formModel" :schema="schema" :field="schema.field" :values="formModel" />
+    <!-- 默认组件渲染 -->
+    <template v-else>
+      <el-input
+        v-if="schema.component === 'input' || !schema.component"
+        v-model="formModel[schema.field]"
+        :placeholder="schema.placeholder || (autoPlaceholder ? `请输入${schema.label}` : undefined)"
+        :disabled="effectiveDisabled"
+        v-bind="effectiveComponentProps"
+        v-on="effectiveComponentListeners"
+      />
+      <el-input-number
+        v-else-if="schema.component === 'input-number'"
+        v-model="formModel[schema.field]"
+        :placeholder="schema.placeholder"
+        :disabled="effectiveDisabled"
+        v-bind="effectiveComponentProps"
+        v-on="effectiveComponentListeners"
+      />
+      <el-select
+        class="ecp-pro-form-item__select"
+        v-else-if="schema.component === 'select'"
+        v-model="formModel[schema.field]"
+        :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
+        :disabled="effectiveDisabled"
+        v-bind="effectiveComponentProps"
+        v-on="effectiveComponentListeners"
+      >
+        <el-option
+          v-for="opt in (getOptions(effectiveComponentProps) || [])"
+          :key="String(opt.value)"
+          :label="opt.label"
+          :value="opt.value"
+        />
+      </el-select>
+      <el-date-picker
+        v-else-if="schema.component === 'date-picker'"
+        v-model="formModel[schema.field]"
+        :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
+        :disabled="effectiveDisabled"
+        v-bind="effectiveComponentProps"
+        v-on="effectiveComponentListeners"
+      />
+      <el-date-picker
+        v-else-if="schema.component === 'date-range'"
+        v-model="formModel[schema.field]"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        :disabled="effectiveDisabled"
+        v-bind="effectiveComponentProps"
+        v-on="effectiveComponentListeners"
+      />
+      <el-switch
+        v-else-if="schema.component === 'switch'"
+        v-model="formModel[schema.field]"
+        :disabled="effectiveDisabled"
+        v-bind="effectiveComponentProps"
+        v-on="effectiveComponentListeners"
+      />
+      <el-cascader
+        v-else-if="schema.component === 'cascader'"
+        v-model="formModel[schema.field]"
+        :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
+        :disabled="effectiveDisabled"
+        v-bind="effectiveComponentProps"
+        v-on="effectiveComponentListeners"
+      />
+      <el-checkbox-group
+        v-else-if="schema.component === 'checkbox'"
+        v-model="formModel[schema.field]"
+        :disabled="effectiveDisabled"
+        v-bind="effectiveComponentProps"
+        v-on="effectiveComponentListeners"
+      >
+        <el-checkbox
+          v-for="opt in (getOptions(effectiveComponentProps) || [])"
+          :key="String(opt.value)"
+          :label="opt.value"
+        >
+          {{ opt.label }}
+        </el-checkbox>
+      </el-checkbox-group>
+      <el-radio-group
+        v-else-if="schema.component === 'radio'"
+        v-model="formModel[schema.field]"
+        :disabled="effectiveDisabled"
+        v-bind="effectiveComponentProps"
+        v-on="effectiveComponentListeners"
+      >
+        <el-radio
+          v-for="opt in (getOptions(effectiveComponentProps) || [])"
+          :key="String(opt.value)"
+          :label="opt.value"
+        >
+          {{ opt.label }}
+        </el-radio>
+      </el-radio-group>
+    </template>
+  </el-form-item>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots, h } from 'vue'
+import type { ProFormSchema, RenderCallbackParams } from '../types'
+
+const props = defineProps<{
+  schema: ProFormSchema
+  formModel: Record<string, unknown>
+  formDisabled?: boolean
+  autoPlaceholder?: boolean
+  formActionType?: import('../types').FormActionType
+}>()
+
+const slots = useSlots()
+
+const renderParams = computed<RenderCallbackParams>(() => ({
+  schema: props.schema,
+  values: props.formModel,
+  model: props.formModel,
+  field: props.schema.field,
+}))
+
+const shouldRender = computed(() => {
+  const ifShow = props.schema.ifShow
+  if (ifShow === undefined) return true
+  if (typeof ifShow === 'boolean') return ifShow
+  return ifShow(renderParams.value)
+})
+
+const shouldShow = computed(() => {
+  const show = props.schema.show
+  if (show === undefined) return true
+  if (typeof show === 'boolean') return show
+  return show(renderParams.value)
+})
+
+const effectiveDisabled = computed(() => {
+  if (props.formDisabled) return true
+  const dyn = props.schema.dynamicDisabled
+  if (dyn === undefined) return false
+  if (typeof dyn === 'boolean') return dyn
+  return dyn(renderParams.value)
+})
+
+const effectiveRules = computed(() => {
+  const dyn = props.schema.dynamicRules
+  if (!dyn) return props.schema.rules
+  if (Array.isArray(dyn)) return dyn
+  return dyn(renderParams.value)
+})
+
+const effectiveComponentPropsAndListeners = computed(() => {
+  const cp = props.schema.componentProps
+  if (!cp) return { props: {}, listeners: {} }
+  const raw = typeof cp === 'function'
+    ? cp({
+        ...renderParams.value,
+        formActionType: props.formActionType,
+      })
+    : { ...cp }
+  const propsOnly: Record<string, unknown> = {}
+  const listeners: Record<string, (...args: unknown[]) => unknown> = {}
+  for (const [key, value] of Object.entries(raw)) {
+    if (key.length > 2 && /^on[A-Za-z]/.test(key) && typeof value === 'function') {
+      const eventName = key.slice(2).charAt(0).toLowerCase() + key.slice(3)
+      listeners[eventName] = value as (...args: unknown[]) => unknown
+    } else {
+      propsOnly[key] = value
+    }
+  }
+  return { props: propsOnly, listeners }
+})
+
+const effectiveComponentProps = computed(() => effectiveComponentPropsAndListeners.value.props)
+const effectiveComponentListeners = computed(() => effectiveComponentPropsAndListeners.value.listeners)
+
+const hasSlot = computed(() => !!slots.default)
+
+const getOptions = (props: Record<string, unknown>): Array<{ label: string; value: unknown }> | undefined => {
+  const opts = props?.options
+  return Array.isArray(opts) ? opts : undefined
+}
+
+const renderComponent = computed(() => {
+  const renderFn = props.schema.render
+  if (!renderFn) return null
+  return {
+    render() {
+      const result = renderFn(renderParams.value)
+      if (Array.isArray(result)) {
+        return h('span', result)
+      }
+      return result
+    },
+  }
+})
+</script>
+
+<style scoped>
+.ecp-pro-form-item__help-icon {
+  margin-left: 4px;
+  color: #909399;
+  cursor: help;
+  font-size: 14px;
+}
+.ecp-pro-form-item__help-icon:hover {
+  color: #409eff;
+}
+.ecp-pro-form-item__help-item {
+  margin-bottom: 4px;
+}
+.ecp-pro-form-item__help-item:last-child {
+  margin-bottom: 0;
+}
+</style>

package/src/ProForm/index.ts

@@ -0,0 +1,6 @@
+import ProForm from './ProForm.vue'
+import ProFormItem from './ProFormItem.vue'
+import FormActions from './FormActions.vue'
+import { useForm } from './useForm'
+export { ProForm, ProFormItem, FormActions, useForm }
+export default ProForm