@qin-ui/element-plus-pro 1.0.8 → 1.1.0

package/src/components/component-provider/types/index.ts

@@ -0,0 +1,64 @@
+import {
+  GridItemProps,
+  FormItemProps,
+  TableProps,
+  PaginationProps,
+  DatePicker,
+} from '../../../shared/ui';
+import { ComponentName, GetComponentType } from '../../form/constants';
+import { Base, Grid } from '../../form/types';
+import { ProFormProps } from '../../form';
+import { AllowedComponentProps } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+type PP<T extends Record<string, any>> = Partial<T & AllowedComponentProps>;
+
+type FP<T extends Record<string, any>> = Partial<
+  T &
+    Pick<
+      Base,
+      | 'valueFormatter'
+      | 'componentContainer'
+      | 'modelProp'
+      | 'componentClass'
+      | 'componentStyle'
+    > &
+    AllowedComponentProps
+>;
+
+type DatePickerType = NonNullable<ComponentProps<typeof DatePicker>['type']>;
+
+export type RequiredComponentVars = {
+  'pro-table': PP<
+    TableProps & {
+      pagination?: Partial<PaginationProps>;
+      control?: boolean | { sizeControl?: boolean; columnControl?: boolean };
+      searchFormConfig?: any;
+      immediateSearch?: boolean;
+      addIndexColumn?: boolean;
+      tableContainer?: any;
+    }
+  >;
+  'pro-form': PP<
+    Omit<ProFormProps, 'form' | 'grid'> & {
+      grid: Exclude<Grid, undefined | boolean>;
+    }
+  >;
+  'pro-form-item': PP<
+    FormItemProps &
+      Pick<GridItemProps, 'span' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'> &
+      Pick<Base, 'formItemContainer'>
+  >;
+  'input.password': FP<ComponentProps<GetComponentType<'input'>>>;
+  'input.textarea': FP<ComponentProps<GetComponentType<'input'>>>;
+} & {
+  [K in DatePickerType as `date-picker.${K}`]: FP<
+    ComponentProps<GetComponentType<'date-picker'>>
+  >;
+} & {
+  [K in Exclude<ComponentName, 'custom'>]: FP<
+    ComponentProps<GetComponentType<K>>
+  >;
+};
+
+export type ComponentVars = Partial<RequiredComponentVars>;

package/src/components/form/components/BaseField/index.vue

@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+/**
+ * @component BaseField
+ * @description 字段级渲染组件，负责将 field 配置渲染为实际的输入组件
+ *
+ * ## 核心职责
+ *
+ * 1. **组件解析**：按优先级解析要渲染的组件（teleport 插槽 > 自定义组件 > 内置组件映射 > 原始值）
+ * 2. **v-model 双向绑定**：通过 computed getter/setter 将组件值与 formData 的深层路径绑定
+ * 3. **valueFormatter 处理**：支持 get/set 格式化函数，用于数据转换（如日期格式化）
+ * 4. **属性合并**：将注入的默认 props、组件传入的 attrs 合并为最终属性
+ *
+ * ## 组件解析优先级
+ *
+ * ```
+ * teleport 组件（ProForm 插槽注入）
+ *   ↓ 未匹配
+ * 自定义组件（ProComponentProvider 的 componentMap）
+ *   ↓ 未匹配
+ * 内置组件映射（componentMap: input → Input, select → Select ...）
+ *   ↓ 未匹配
+ * 原始 component 值（可能是字符串或 Vue 组件对象）
+ * ```
+ *
+ * @param {string | Component} [component] - 组件名或组件对象
+ * @param {string} [path] - 字段路径，用于绑定表单数据
+ *
+ * @slot default - 默认插槽（透传给组件）
+ */
+import {
+  type Component,
+  computed,
+  inject,
+  mergeProps,
+  ref,
+  useAttrs,
+} from 'vue';
+import { cloneDeep, omit } from '../../../../shared/core';
+import { useDisabledContext } from '../../../../shared/ui';
+import type { Field } from '../../types';
+import { ContainerFragment, SlotComponent } from '..';
+import { componentMap, TeleportComponentNamePrefix } from '../../constants';
+import { INJECT_COMPONENTS } from '../../../component-provider/constants';
+import { useForm } from '../../hooks/useForm';
+import { getInitProps } from './utils';
+
+defineOptions({ name: 'BaseField', inheritAttrs: false });
+
+type Props = {
+  component?: string | Component;
+  path?: string;
+};
+const { component = undefined, path = '' } = defineProps<Props>();
+
+const form = useForm(false);
+const { getFormData, setFormData } = form;
+
+const componentRef = ref<any>();
+
+const attrs: any = useAttrs();
+
+function getOldValue() {
+  return cloneDeep(getFormData?.(path));
+}
+
+// setter: 向 formData 写入值，支持 valueFormatter / valueFormatter.set 转换
+const value = computed({
+  get() {
+    let val = getFormData?.(path);
+    const { valueFormatter } = groupedAttrs.value;
+    if (
+      typeof valueFormatter === 'object' &&
+      typeof valueFormatter.get === 'function'
+    ) {
+      val = valueFormatter.get(val);
+    }
+    return val;
+  },
+  set(val) {
+    let newVal = val;
+    const { valueFormatter } = groupedAttrs.value;
+    if (valueFormatter) {
+      if (typeof valueFormatter === 'function') {
+        newVal = valueFormatter(val, getOldValue());
+      } else if (typeof valueFormatter.set === 'function') {
+        newVal = valueFormatter.set(val, getOldValue());
+      }
+    }
+    setFormData?.(path, newVal);
+  },
+});
+
+const parentDisabled = useDisabledContext();
+
+/*
+ * 将注入的默认 props、外部传入的 attrs、field 配置合并为最终属性
+ * 属性分为三类：绑定属性（v-model）、组件属性（传递给组件）、插槽（动态渲染）
+ */
+const groupedAttrs = computed(() => {
+  const initProps = getInitProps({
+    component: component,
+    type: attrs.type,
+  } as unknown as Field);
+  const modelPropName = attrs.modelProp ?? initProps.modelProp ?? 'modelValue';
+  const mergedProps = mergeProps(
+    initProps,
+    attrs,
+    { class: attrs.componentClass, style: attrs.componentStyle },
+    { class: initProps.componentClass, style: initProps.componentStyle },
+    { disabled: attrs.disabled ?? parentDisabled.value ?? initProps.disabled },
+    { modelProp: modelPropName }
+  ) as Required<Field>;
+  // prettier-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { valueFormatter, modelProp, slots, componentClass, componentStyle, componentContainer, ...rest } = mergedProps
+  const modelBindingProp = modelProp ?? 'modelValue';
+  // 从剩余属性中移除 v-model 绑定属性，避免重复绑定
+  const bindAttrs = omit(rest as Record<string, any>, [
+    modelBindingProp,
+    `onUpdate:${modelBindingProp}`,
+  ]);
+  return {
+    attrs: bindAttrs,
+    slots,
+    componentContainer,
+    modelProp: modelBindingProp,
+    valueFormatter,
+  };
+});
+
+// 从 ProForm 插槽注入的 teleport 组件（优先级最高）
+const teleportComponent = inject(
+  `${TeleportComponentNamePrefix}${path}`,
+  undefined
+);
+
+// 从 ProComponentProvider 注入的自定义组件映射
+const customComponents = inject(INJECT_COMPONENTS, {});
+
+/*
+ * 按优先级解析最终要渲染的组件：
+ * teleport 插槽 → 自定义组件映射 → 内置组件映射 → 原始 component 值
+ */
+const is = computed(() => {
+  if (teleportComponent) return teleportComponent;
+  if (typeof component === 'string') {
+    return (
+      (customComponents as any)[component] ||
+      (componentMap as any)[component] ||
+      component
+    );
+  }
+  return component;
+});
+
+defineExpose({
+  getComponentRef: () => componentRef.value,
+  getComponentComputedProps: () => groupedAttrs.value.attrs as any,
+});
+</script>
+
+<template>
+  <ContainerFragment :component="groupedAttrs.componentContainer" :path="path">
+    <component
+      :is="is"
+      v-if="is"
+      v-bind="groupedAttrs.attrs"
+      ref="componentRef"
+      v-model:[`${groupedAttrs.modelProp}`]="value"
+      :path="path"
+    >
+      <template
+        v-for="(slot, name) in groupedAttrs.slots"
+        :key="name"
+        #[name]="scoped"
+      >
+        <SlotComponent :path="path" v-bind="scoped" :component="slot" />
+      </template>
+    </component>
+  </ContainerFragment>
+</template>

package/src/components/form/components/BaseField/utils/index.ts

@@ -0,0 +1,15 @@
+import { Field } from '../../../types';
+import { getInjectConfig } from '../../../../component-provider/constants';
+import { inject } from 'vue';
+
+export const getInitProps = (field: Field): Record<string, any> => {
+  const { component, type } = field as any;
+  if (typeof component === 'string') {
+    const k = [component, type].filter(Boolean).join('.');
+    const config = getInjectConfig(k);
+    if (!config) return {};
+    const injectProps = inject(config.injectionKey, config.default);
+    return injectProps;
+  }
+  return {};
+};

package/src/components/form/components/BaseFormItem/index.vue

@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+/**
+ * @component BaseFormItem
+ * @description 表单字段渲染引擎
+ *
+ * 负责将字段配置数组渲染为实际的表单项，支持：
+ * - 字段分组（嵌套 fields 递归渲染）
+ * - 网格布局（grid 属性控制）
+ * - FormItem 包装（label、rules、校验等）
+ * - 组件绑定（通过 BaseField 渲染具体组件）
+ * - 插槽透传（label、error 等 FormItem 插槽）
+ *
+ * ## 渲染流程
+ *
+ * 1. 遍历 fields 数组，过滤 hidden 字段
+ * 2. 对每个字段：
+ *    a. 通过 PathProvider 提供当前字段路径
+ *    b. 通过 GroupedFieldAttrs 将 field 配置拆分为 gridItemProps / formItemProps / componentProps
+ *    c. 如果字段有 `fields` 子字段 → 递归渲染 BaseFormItem（嵌套表单）
+ *    d. 否则 → 渲染 BaseField（输入组件）
+ * 3. 通过 ref 回调收集 FormItem 和 Component 实例，注入到 field 对象上
+ *
+ * @param {Fields<D>} [fields] - 字段配置数组
+ * @param {boolean | GridProps} [grid] - 是否启用网格布局
+ * @param {boolean} [disabled] - 是否禁用所有子字段
+ *
+ * @internal
+ */
+import { getObject, toPath } from '../../../../shared/core';
+import {
+  FormItem,
+  Grid as ElGrid,
+  GridItem as ElGridItem,
+  GridProps,
+  useDisabledContextProvider,
+} from '../../../../shared/ui';
+import { computed, inject, toValue } from 'vue';
+import type { Fields, Grid } from '../../types';
+import { BaseField, SlotComponent, ContainerFragment } from '..';
+import PathProvider from '../PathProvider/index.vue';
+import GroupedFieldAttrs from '../GroupedFieldAttrs/index.vue';
+import { INJECT_CONFIG } from '../../../component-provider/constants';
+
+defineOptions({ name: 'BaseFormItem', inheritAttrs: false });
+
+type Props = {
+  grid?: Grid;
+  fields?: Fields;
+  disabled?: boolean;
+};
+const {
+  grid = undefined,
+  fields = [],
+  disabled = undefined,
+} = defineProps<Props>();
+
+const validFields = computed(() => fields.filter?.(field => !field.hidden));
+
+useDisabledContextProvider(computed(() => disabled) as any);
+
+const config = INJECT_CONFIG['pro-form'];
+
+const { grid: injectGrid } = inject(config.injectionKey, config.default);
+
+const enableGrid = computed(() => {
+  if (grid !== undefined) return !!grid;
+  return !!injectGrid;
+});
+
+const computedGridProps = computed<GridProps>(() => {
+  return enableGrid.value
+    ? { ...getObject(injectGrid), ...getObject(grid) }
+    : {};
+});
+
+const formItemRefs: any[] = [];
+const componentRefs: any[] = [];
+
+const onFormItemMounted = (index: number, formItemProps?: any) => {
+  const field = validFields.value[index];
+  Object.assign(field, {
+    getFormItemRef: () => formItemRefs[index],
+    getFormItemComputedProps: () => formItemProps,
+  });
+};
+
+const onComponentMounted = (index: number) => {
+  const field = validFields.value[index];
+  Object.assign(field, {
+    getComponentRef: () => componentRefs[index]?.getComponentRef(),
+    getComponentComputedProps: () =>
+      componentRefs[index]?.getComponentComputedProps(),
+  });
+};
+</script>
+
+<template>
+  <ContainerFragment
+    :component="enableGrid ? ElGrid : undefined"
+    v-bind="computedGridProps"
+    style="width: 100%"
+  >
+    <PathProvider
+      v-for="({ path: _path, ...field }, index) of validFields"
+      :key="toPath(toValue((_path ?? index) as any)).join('.') || index"
+      v-bind="{ path: _path as any }"
+    >
+      <template #default="{ path }">
+        <GroupedFieldAttrs :field="field">
+          <template
+            #default="{
+              gridItemProps,
+              formItemProps: { container, ...formItemProps },
+              componentProps,
+              formItemSlots,
+            }"
+          >
+            <ContainerFragment
+              :component="enableGrid ? ElGridItem : undefined"
+              v-bind="gridItemProps"
+            >
+              <ContainerFragment :component="container" :path="path">
+                <FormItem
+                  v-bind="formItemProps"
+                  :ref="el => (formItemRefs[index] = el)"
+                  :prop="toPath(path).join('.')"
+                  :path="path"
+                  @vue:mounted="onFormItemMounted(index, formItemProps)"
+                >
+                  <template
+                    v-for="(slot, name) in formItemSlots"
+                    :key="name"
+                    #[name]="scoped"
+                  >
+                    <SlotComponent
+                      :path="path"
+                      :component="slot"
+                      v-bind="scoped"
+                    />
+                  </template>
+                  <template v-if="field.fields">
+                    <BaseFormItem
+                      :grid="(field as any).grid ?? grid"
+                      :fields="field.fields"
+                      :disabled="toValue(field.disabled)"
+                    />
+                  </template>
+                  <template v-else>
+                    <BaseField
+                      :ref="el => (componentRefs[index] = el)"
+                      v-bind="componentProps"
+                      :path="path"
+                      @vue:mounted="onComponentMounted(index)"
+                    />
+                  </template>
+                </FormItem>
+              </ContainerFragment>
+            </ContainerFragment>
+          </template>
+        </GroupedFieldAttrs>
+      </template>
+    </PathProvider>
+  </ContainerFragment>
+</template>
+
+<style scoped lang="less">
+[class*='-form-item'] [class*='-form-item'] {
+  margin-bottom: 18px;
+}
+</style>

package/src/components/form/components/ContainerFragment/index.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+/**
+ * @component ContainerFragment
+ * @description 容器分片渲染组件。用于动态渲染表单行或表单项的外部包裹容器（例如 Grid 行、Col 列等布局容器）。
+ *
+ * @public
+ */
+import type { ContainerComponent } from '../../types';
+
+type Props = {
+  component?: ContainerComponent;
+};
+
+defineProps<Props>();
+
+defineOptions({ name: 'ContainerFragment', inheritAttrs: false });
+</script>
+
+<template>
+  <component :is="component" v-if="component" v-bind="$attrs">
+    <slot />
+  </component>
+  <slot v-else />
+</template>

package/src/components/form/components/GroupedFieldAttrs/index.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+/**
+ * @component GroupedFieldAttrs
+ * @description 字段属性分组器，将 field 配置对象拆分为三类属性
+ *
+ * ## 属性分发逻辑
+ *
+ * 单个 field 对象包含多种属性，需要分发到不同的渲染目标：
+ *
+ * 1. **gridItemProps** — 网格布局属性（span、xs、sm、md、lg、xl、xxl 等），传递给 GridItem
+ * 2. **formItemProps** — 表单项属性（label、rules、required 等），传递给 FormItem
+ * 3. **componentProps** — 组件属性（placeholder、clearable 等），传递给输入组件
+ * 4. **formItemSlots** — FormItem 的具名插槽（label、error 等）
+ *
+ * 分组依据：
+ * - 匹配 element-plus GridItem 的 props key → gridItemProps
+ * - 匹配 element-plus FormItem 的 props key → formItemProps
+ * - 其余所有属性 → componentProps
+ * - 属于 FORM_ITEM_SLOT_KEYS 的插槽 → formItemSlots
+ * - 其余插槽 → componentProps.slots
+ */
+import { computed, inject, mergeProps, toValue } from 'vue';
+import {
+  GridItemProps,
+  FormItemProps,
+  gridItemProps,
+  formItemProps,
+} from '../../../../shared/ui';
+import { INJECT_CONFIG } from '../../../component-provider/constants';
+import type { Base, Field } from '../../types';
+import { FORM_ITEM_SLOT_KEYS } from '../../constants';
+import { isPlainObject } from '../../../../shared/core';
+
+const formItemPropKeys = Object.keys(formItemProps());
+const gridItemPropKeys = Object.keys(gridItemProps());
+
+type Props = {
+  field: Field;
+};
+const props = defineProps<Props>();
+
+const config = INJECT_CONFIG['pro-form-item'];
+const injectFormItemProps = inject(config.injectionKey, config.default);
+
+type GroupedFieldAttrs = {
+  gridItemProps: GridItemProps;
+  formItemProps: FormItemProps & { container?: Base['formItemContainer'] };
+  formItemSlots: Record<(typeof FORM_ITEM_SLOT_KEYS)[number], any>;
+  componentProps: Record<string, any>;
+};
+
+// 将 field 配置按 key 分发到三类属性分组中
+const groupedAttributes = computed<GroupedFieldAttrs>(() => {
+  let gridItemProps: Record<string, any> = {};
+  let formItemProps: Record<string, any> = {};
+  const componentProps: Record<string, any> = { slots: {} };
+  const formItemSlots: Record<string, any> = {};
+
+  if (isPlainObject(props.field)) {
+    // prettier-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { path, name, fields, formItemClass, formItemStyle, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, ...rest } =
+    props.field as any;
+    const {
+      class: injectClassName,
+      style: injectStyle,
+      span: injectSpan,
+      formItemContainer: injectFormItemContainer,
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+      ...injectRest
+    } = injectFormItemProps;
+
+    const initGridItemProps =
+      span || span === 0 ? { span } : { xs, sm, md, lg, xl, span: injectSpan };
+
+    gridItemProps = fields ? { span: span ?? 24 } : initGridItemProps;
+    formItemProps = mergeProps(
+      injectRest as any,
+      { class: injectClassName, style: injectStyle },
+      { class: toValue(formItemClass), style: toValue(formItemStyle) },
+      formItemDataAttrs
+    );
+    formItemProps.container = formItemContainer ?? injectFormItemContainer;
+
+    Object.keys(rest).forEach(k => {
+      if (gridItemPropKeys.includes(k)) {
+        gridItemProps[k] = rest[k];
+      } else if (formItemPropKeys.includes(k)) {
+        (formItemProps as any)[k] = rest[k];
+      } else {
+        componentProps[k] = rest[k];
+      }
+    });
+    // 将 componentDataAttrs 展开到组件 props 中
+    Object.assign(componentProps, componentDataAttrs);
+    Object.keys(slots).forEach(k => {
+      if (FORM_ITEM_SLOT_KEYS.includes(k as any)) {
+        formItemSlots[k] = slots[k];
+      } else {
+        componentProps['slots'][k] = slots[k];
+      }
+    });
+  }
+
+  return { gridItemProps, formItemProps, componentProps, formItemSlots };
+});
+</script>
+
+<template>
+  <slot v-bind="groupedAttributes"></slot>
+</template>

package/src/components/form/components/PathProvider/index.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { computed, provide } from 'vue';
+import { InjectionPathKey } from '../../constants';
+import { NamePath } from '../../../../shared/ui';
+
+const props = defineProps<{ path?: NamePath }>();
+
+const namePath = computed(() => {
+  return Array.isArray(props.path)
+    ? props.path.join('.')
+    : (props.path as string | undefined);
+});
+
+provide(InjectionPathKey, namePath);
+</script>
+
+<template>
+  <slot :path="namePath" />
+</template>

package/src/components/form/components/ProForm/index.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup generic="F extends Form<any> = Form">
+/**
+ * @component ProForm
+ * @description @qin-ui/element-plus-pro 配置驱动表单组件
+ *
+ * 架构设计说明 (Architecture Overview)
+ *
+ * [ 数据层 (Core) ]  =>  [ 绑定层 (ProForm) ]  =>  [ 渲染层 (BaseFormItem / BaseField) ]
+ *
+ * 1. 数据隔离：ProForm 本身不负责存储和管理表单状态，所有核心状态（formData, fields, 校验规则）
+ *    均交由底层的 `useForm`（@qin-ui/pro-components-core）驱动。
+ * 2. 上下文透传：通过 `provide` 将核心状态下发给子组件，避免了深层嵌套的 Props 传递。
+ * 3. 递归渲染：网格布局和具体字段的解析交由 `<BaseFormItem>` 递归完成，实现了 UI 布局与表单逻辑的解耦。
+ *
+ * 通过配置驱动的方式快速构建表单，支持：
+ * - 字段联动、嵌套字段、自定义组件、网格布局
+ *
+ * @template F - 表单实例类型
+ * @param {Form<D>} [form] - useForm 返回的表单实例
+ * @param {boolean | GridProps} [grid=false] - 是否启用网格布局
+ *
+ * @slot default - 默认插槽
+ * @slot [path] - 以字段 path 命名的动态插槽
+ 
+ * @public
+ */
+import {
+  Form as ElForm,
+  FormProps as ElFormProps,
+} from '../../../../shared/ui';
+import {
+  inject,
+  mergeProps,
+  provide,
+  type Slot,
+  watchEffect,
+  computed,
+  useAttrs,
+} from 'vue';
+import { INJECT_CONFIG } from '../../../component-provider/constants';
+import { BaseFormItem } from '..';
+import { InjectionFormKey, TeleportComponentNamePrefix } from '../../constants';
+import type { Grid, VModelProps, PathProps } from '../../types';
+import { Path, camelizeProperties } from '../../../../shared/core';
+import type { Form } from '../../hooks/useForm';
+
+defineOptions({ name: 'ProForm', inheritAttrs: false });
+
+type FormProps = Partial<Omit<ElFormProps, 'model'>>;
+
+type Props = { grid?: Grid; form?: F } & /* @vue-ignore */ FormProps;
+const { grid = false, form = {} as F } = defineProps<Props>();
+
+/**
+ * 依赖注入中心：
+ * 将 Core 包生成的 Form 实例注入到 Vue 的 Context 中。
+ * 供深层子组件（如 BaseFormItem, BaseField, 自定义插槽）跨层级直接访问数据和方法。
+ */
+provide(InjectionFormKey, form as F);
+
+const { formData, fields, setFormRef } = form as F;
+const _fields = computed(() => fields.value);
+
+const config = INJECT_CONFIG['pro-form'];
+const attrs = useAttrs();
+
+// 从 ProComponentProvider 获取全局配置，与传入的 props 合并
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { grid: _injectGrid, ...injectAttrs } = inject(
+  config.injectionKey,
+  config.default
+);
+
+type ExtractPath<T> = T extends Form<infer D> ? Path<D> : string;
+type FieldSlotProps = VModelProps &
+  PathProps & { disabled?: boolean; [x: string]: any };
+type FieldSlots = Record<ExtractPath<F>, Slot<FieldSlotProps>>;
+
+const slots = defineSlots<Partial<FieldSlots & { default: Slot }>>();
+
+/**
+ * 动态插槽映射中心 (Slot Teleporting)：
+ * 目的：将 ProForm 上以 Field Path 命名的插槽，动态注册为全局可访问的 Context。
+ * 实现：BaseField 组件在渲染对应字段时，会通过 inject 尝试获取对应的 Prefix+Path，
+ *      如果存在，则将插槽内容渲染到深层的具体位置，从而突破了组件嵌套层级的限制。
+ */
+watchEffect(() => {
+  Object.keys(slots).forEach(name => {
+    if (name === 'default') return;
+    provide(`${TeleportComponentNamePrefix}${name}`, (slots as any)[name]);
+  });
+});
+</script>
+
+<template>
+  <ElForm
+    :ref="(el: any) => setFormRef?.(el)"
+    :model="formData"
+    v-bind="mergeProps(injectAttrs, camelizeProperties(attrs))"
+    class="pro-form"
+    @submit.prevent
+  >
+    <BaseFormItem :fields="_fields" :grid="grid" />
+    <slot />
+  </ElForm>
+</template>