@qin-ui/antd-vue-pro 2.3.3 → 2.4.0

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

@@ -33,9 +33,10 @@ import {
   inject,
   mergeProps,
   ref,
+  toValue,
   useAttrs,
 } from 'vue';
-import { cloneDeep, omit } from '../../../../shared/core';
+import { cloneDeep } from '../../../../shared/core';
 import {
   useInjectDisabled,
   useInjectFormItemContext,
@@ -43,7 +44,10 @@ import {
 import type { Field } from '../../types';
 import { ContainerFragment, SlotComponent } from '..';
 import { componentMap, InjectionFormSlotsKey } from '../../constants';
-import { INJECT_COMPONENTS } from '../../../component-provider/constants';
+import {
+  INJECT_COMPONENTS,
+  getInjectConfig,
+} from '../../../component-provider/constants';
 import { useForm } from '../../hooks/useForm';
 import { getInitProps } from './utils';
 import { useLocale } from '../../../../locale';
@@ -54,12 +58,14 @@ type Props = {
   component?: string | Component;
   path?: string;
 };
-const { component = undefined, path = '' } = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  component: undefined,
+  path: '',
+});
 
 const { t } = useLocale();
 
 const form = useForm(false);
-const { getFormData, setFormData } = form;
 
 const componentRef = ref<any>();
 
@@ -70,14 +76,23 @@ const triggerFormItemChange = () => {
 
 const attrs: any = useAttrs();
 
-function getOldValue() {
-  return cloneDeep(getFormData?.(path));
-}
+// 全局默认配置注入：key = 组件名 + picker 修饰段；inject 须在 setup 同步期调用
+const pickerVal = attrs.picker;
+const injectConfigKey =
+  typeof props.component === 'string'
+    ? [props.component, pickerVal].filter(Boolean).join('.')
+    : '';
+const componentInjectConfig = injectConfigKey
+  ? getInjectConfig(injectConfigKey)
+  : undefined;
+const rawInjectComponentProps = componentInjectConfig
+  ? inject(componentInjectConfig.injectionKey, componentInjectConfig.default)
+  : undefined;
 
 // setter: 向 formData 写入值，支持 valueFormatter / valueFormatter.set 转换
 const value = computed({
   get() {
-    let val = getFormData?.(path);
+    let val = form.getFormData?.(props.path);
     const { valueFormatter } = groupedAttrs.value;
     if (
       typeof valueFormatter === 'object' &&
@@ -90,14 +105,23 @@ const value = computed({
   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());
-      }
+    const setFormatter =
+      typeof valueFormatter === 'function'
+        ? valueFormatter
+        : typeof valueFormatter === 'object' &&
+            typeof valueFormatter?.set === 'function'
+          ? valueFormatter.set
+          : undefined;
+
+    if (setFormatter) {
+      // 仅当 set 转换函数需要旧值参数时，才获取旧值上下文
+      const oldVal =
+        setFormatter.length > 1
+          ? cloneDeep(form.getFormData?.(props.path))
+          : undefined;
+      newVal = setFormatter(val, oldVal);
     }
-    setFormData?.(path, newVal);
+    form.setFormData?.(props.path, newVal);
     triggerFormItemChange();
   },
 });
@@ -109,28 +133,25 @@ const parentDisabled = useInjectDisabled();
  * 属性分为三类：绑定属性（v-model）、组件属性（传递给组件）、插槽（动态渲染）
  */
 const groupedAttrs = computed(() => {
+  const currentInjectProps = toValue(rawInjectComponentProps) || {};
   const initProps = getInitProps(
-    {
-      component: component,
-      picker: attrs.picker,
-    } as Field,
+    { component: props.component, picker: attrs.picker } as Field,
+    currentInjectProps,
     t
   );
+  const effectiveModelProp = attrs.modelProp ?? initProps.modelProp ?? 'value';
   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: attrs.modelProp ?? initProps.modelProp ?? 'value' }
+    { modelProp: effectiveModelProp }
   ) as Required<Field>;
 
   // prettier-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { valueFormatter, modelProp, slots, componentClass, componentStyle, componentContainer, ...rest } = mergedProps
-
-  // 从剩余属性中移除 v-model 绑定属性，避免重复绑定
-  const bindAttrs = omit(rest, [modelProp, `onUpdate:${modelProp}`]);
+  const { valueFormatter, modelProp, slots, componentClass, componentStyle, componentContainer, [effectiveModelProp]: _modelVal, [`onUpdate:${effectiveModelProp}`]: _onUpdateModelVal, ...bindAttrs } = mergedProps as any;
 
   return {
     attrs: bindAttrs,
@@ -154,16 +175,19 @@ const customComponents = inject(INJECT_COMPONENTS, {});
  * ProForm 插槽 → 自定义组件映射 → 内置组件映射 → 原始 component 值
  */
 const is = computed(() => {
-  const teleportSlot = path && formSlots?.[path];
+  const teleportSlot = props.path && formSlots?.[props.path];
   if (teleportSlot) return teleportSlot;
-  if (typeof component === 'string') {
-    return (
-      (customComponents as any)[component] ||
-      (componentMap as any)[component] ||
-      component
+  if (typeof props.component === 'string') {
+    const resolved =
+      (customComponents as any)[props.component] ||
+      (componentMap as any)[props.component];
+    if (resolved) return resolved;
+    console.warn(
+      `[pro-components] 未识别的组件类型 "${props.component}"，已降级为原生元素渲染。如为自定义组件请在 componentMap 或 ProComponentProvider 中注册。`
     );
+    return props.component;
   }
-  return component;
+  return props.component;
 });
 
 defineExpose({
@@ -173,21 +197,24 @@ defineExpose({
 </script>
 
 <template>
-  <ContainerFragment :component="groupedAttrs.componentContainer" :path="path">
+  <ContainerFragment
+    :component="groupedAttrs.componentContainer"
+    :path="props.path"
+  >
     <component
       :is="is"
       v-if="is"
       v-bind="groupedAttrs.attrs"
       ref="componentRef"
       v-model:[`${groupedAttrs.modelProp}`]="value"
-      :path="path"
+      :path="props.path"
     >
       <template
         v-for="(slot, name) in groupedAttrs.slots"
         :key="name"
         #[name]="scoped"
       >
-        <SlotComponent :path="path" v-bind="scoped" :component="slot" />
+        <SlotComponent :path="props.path" v-bind="scoped" :component="slot" />
       </template>
     </component>
   </ContainerFragment>

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

@@ -1,6 +1,4 @@
 import { Field } from '../../../types';
-import { getInjectConfig } from '../../../../component-provider/constants';
-import { inject } from 'vue';
 
 type LocaleT = (
   key: string,
@@ -17,11 +15,7 @@ const PLACEHOLDER_KEYS: Record<string, string> = {
   cascader: 'select.placeholder',
 };
 
-/**
- * 根据组件 key 兜底生成 locale 占位符
- *
- * @description 用户通过 componentVars 或字段属性显式设置了占位符时不再兜底。
- */
+/** 根据组件 key 兜底生成 locale 占位符；已显式设置占位符（componentVars 或字段属性）时不兜底 */
 const getPlaceholderProps = (
   key: string,
   injectProps: Record<string, any>,
@@ -32,14 +26,15 @@ const getPlaceholderProps = (
   return { placeholder: t(placeholderKey) };
 };
 
-export const getInitProps = (field: Field, t: LocaleT): Record<string, any> => {
+export const getInitProps = (
+  field: Field,
+  injectProps: Record<string, any> = {},
+  t: LocaleT
+): Record<string, any> => {
   const { component } = field as any;
   const picker = component === 'date-picker' ? '' : (field as any).picker;
   if (typeof component === 'string') {
     const k = [component, picker].filter(Boolean).join('.');
-    const config = getInjectConfig(k);
-    if (!config) return getPlaceholderProps(k, {}, t);
-    const injectProps = inject(config.injectionKey, config.default);
     return { ...injectProps, ...getPlaceholderProps(k, injectProps, t) };
   }
   return {};

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

@@ -13,12 +13,9 @@
  * ## 渲染流程
  *
  * 1. 遍历 fields 数组，过滤 hidden 字段
- * 2. 对每个字段：
- *    a. 通过 PathProvider 提供当前字段路径
- *    b. 通过 GroupedFieldAttrs 将 field 配置拆分为 gridItemProps / formItemProps / componentProps
- *    c. 如果字段有 `fields` 子字段 → 递归渲染 BaseFormItem（嵌套表单）
- *    d. 否则 → 渲染 BaseField（输入组件）
- * 3. 通过 ref 回调收集 FormItem 和 Component 实例，注入到 field 对象上
+ * 2. 通过 useGroupFieldAttrs Hook 纯计算将 field 配置拆分为 gridItemProps / formItemProps / componentProps / slots
+ * 3. 递归渲染 BaseFormItem（嵌套表单）或 BaseField（输入组件）
+ * 4. 通过 ref 回调收集 FormItem 和 Component 实例，注入到 field 对象上
  *
  * @param {Fields<D>} [fields] - 字段配置数组
  * @param {boolean | GridProps} [grid] - 是否启用网格布局
@@ -34,11 +31,10 @@ import {
   GridProps,
   useProviderDisabled,
 } from '../../../../shared/ui';
-import { computed, inject, toValue } from 'vue';
+import { computed, inject, toRaw, 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 { useGroupFieldAttrs } from '../../hooks/useGroupFieldAttrs';
 import { INJECT_CONFIG } from '../../../component-provider/constants';
 
 defineOptions({ name: 'BaseFormItem', inheritAttrs: false });
@@ -48,50 +44,67 @@ type Props = {
   fields?: Fields;
   disabled?: boolean;
 };
-const {
-  grid = undefined,
-  fields = [],
-  disabled = undefined,
-} = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  grid: undefined,
+  fields: () => [],
+  disabled: undefined,
+});
 
-const validFields = computed(() => fields.filter?.(field => !field.hidden));
+const validFields = computed(() =>
+  (props.fields ?? []).filter(field => !field.hidden)
+);
 
-useProviderDisabled(computed(() => disabled));
+useProviderDisabled(computed(() => props.disabled));
 
 const config = INJECT_CONFIG['pro-form'];
-
-const { grid: injectGrid } = inject(config.injectionKey, config.default);
+const injectFormConfig = inject(config.injectionKey, config.default);
+const injectGrid = computed(() => toValue(injectFormConfig)?.grid);
 
 const enableGrid = computed(() => {
-  if (grid !== undefined) return !!grid;
-  return !!injectGrid;
+  if (props.grid !== undefined) return !!props.grid;
+  return !!injectGrid.value;
 });
 
 const computedGridProps = computed<GridProps>(() => {
   return enableGrid.value
-    ? { ...getObject(injectGrid), ...getObject(grid) }
+    ? { ...getObject(injectGrid.value), ...getObject(props.grid) }
     : {};
 });
 
-const formItemRefs: any[] = [];
-const componentRefs: any[] = [];
+/**
+ * 以字段原始对象为 key 登记 FormItem / 控件实例，供 getFormItemRef / getComponentRef 读取；
+ * WeakMap 不参与响应式追踪，条目随字段对象回收自动释放。
+ */
+const formItemInstanceMap = new WeakMap<object, any>();
+const componentInstanceMap = new WeakMap<object, any>();
 
-const onFormItemMounted = (index: number, formItemProps?: any) => {
-  const field = validFields.value[index];
-  Object.assign(field, {
-    getFormItemRef: () => formItemRefs[index],
-    getFormItemComputedProps: () => formItemProps,
-  });
+const setFormItemRef = (field: any, el: any, formItemProps?: any) => {
+  if (!field || typeof field !== 'object') return;
+  const raw = toRaw(field);
+  if (el) {
+    formItemInstanceMap.set(raw, el);
+    raw.getFormItemRef = () => formItemInstanceMap.get(raw);
+    raw.getFormItemComputedProps = () => formItemProps;
+  } else {
+    formItemInstanceMap.delete(raw);
+  }
 };
 
-const onComponentMounted = (index: number) => {
-  const field = validFields.value[index];
-  Object.assign(field, {
-    getComponentRef: () => componentRefs[index]?.getComponentRef(),
-    getComponentComputedProps: () =>
-      componentRefs[index]?.getComponentComputedProps(),
-  });
+const setComponentRef = (field: any, el: any) => {
+  if (!field || typeof field !== 'object') return;
+  const raw = toRaw(field);
+  if (el) {
+    componentInstanceMap.set(raw, el);
+    raw.getComponentRef = () =>
+      componentInstanceMap.get(raw)?.getComponentRef();
+    raw.getComponentComputedProps = () =>
+      componentInstanceMap.get(raw)?.getComponentComputedProps();
+  } else {
+    componentInstanceMap.delete(raw);
+  }
 };
+
+const groupedFields = useGroupFieldAttrs(validFields);
 </script>
 
 <template>
@@ -99,65 +112,49 @@ const onComponentMounted = (index: number) => {
     :component="enableGrid ? AGrid : undefined"
     v-bind="computedGridProps"
   >
-    <PathProvider
-      v-for="({ path: _path, name: _name, ...field }, index) of validFields"
-      :key="toPath(toValue((_name ?? _path) as any)).join('.') || index"
-      v-bind="{ path: (_name ?? _path) as any }"
-    >
-      <template #default="{ path }">
-        <GroupedFieldAttrs :field="field">
-          <template
-            #default="{
-              gridItemProps,
-              formItemProps: { formItemContainer, ...formItemProps },
-              componentProps,
-              formItemSlots,
-            }"
+    <template v-for="(item, index) of groupedFields" :key="item.path || index">
+      <ContainerFragment
+        :component="enableGrid ? AGridItem : undefined"
+        v-bind="item.gridItemProps"
+      >
+        <ContainerFragment
+          :component="item.formItemContainer"
+          :path="item.path"
+        >
+          <FormItem
+            v-bind="item.formItemProps"
+            :ref="el => setFormItemRef(item.rawField, el, item.formItemProps)"
+            :name="toPath(item.path)"
+            :path="item.path"
           >
-            <ContainerFragment
-              :component="enableGrid ? AGridItem : undefined"
-              v-bind="gridItemProps"
+            <template
+              v-for="(slot, name) in item.formItemSlots"
+              :key="name"
+              #[name]="scoped"
             >
-              <ContainerFragment :component="formItemContainer" :path="path">
-                <FormItem
-                  v-bind="formItemProps"
-                  :ref="el => (formItemRefs[index] = el)"
-                  :name="toPath(path)"
-                  :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>
+              <SlotComponent
+                :path="item.path"
+                :component="slot"
+                v-bind="scoped"
+              />
+            </template>
+            <template v-if="item.rawField.fields">
+              <BaseFormItem
+                :grid="(item.rawField as any).grid ?? props.grid"
+                :fields="item.rawField.fields"
+                :disabled="toValue(item.rawField.disabled)"
+              />
+            </template>
+            <template v-else>
+              <BaseField
+                :ref="el => setComponentRef(item.rawField, el)"
+                v-bind="item.componentProps"
+                :path="item.path"
+              />
+            </template>
+          </FormItem>
+        </ContainerFragment>
+      </ContainerFragment>
+    </template>
   </ContainerFragment>
 </template>

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

@@ -11,13 +11,15 @@ type Props = {
   component?: ContainerComponent;
 };
 
-defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  component: undefined,
+});
 
 defineOptions({ name: 'ContainerFragment', inheritAttrs: false });
 </script>
 
 <template>
-  <component :is="component" v-if="component" v-bind="$attrs">
+  <component :is="props.component" v-if="props.component" v-bind="$attrs">
     <slot />
   </component>
   <slot v-else />

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

@@ -43,38 +43,89 @@
  * ```
  */
 import { Form as AForm, FormProps as AFormProps } from '../../../../shared/ui';
-import { inject, mergeProps, provide, reactive, type Slot } from 'vue';
+import { computed, inject, mergeProps, provide, toValue, type Slot } from 'vue';
 import { INJECT_CONFIG } from '../../../component-provider/constants';
 import { BaseFormItem } from '..';
 import { InjectionFormKey, InjectionFormSlotsKey } from '../../constants';
 import type { Grid, VModelProps, PathProps } from '../../types';
 import { Path, camelizeProperties } from '../../../../shared/core';
-import type { Form } from '../../hooks/useForm';
+import { useForm, type Form } from '../../hooks/useForm';
 
 defineOptions({ name: 'ProForm', inheritAttrs: false });
 
-type FormProps = Partial<Omit<AFormProps, 'model'>>;
+type MyFormProps = Partial<Omit<AFormProps, 'model'>>;
 
-type Props = { grid?: Grid; form?: F } & /* @vue-ignore */ FormProps;
-const { grid = false, form = {} as F } = defineProps<Props>();
+type Props = { grid?: Grid; form?: F } & /* @vue-ignore */ MyFormProps;
+const props = withDefaults(defineProps<Props>(), {
+  grid: false,
+  form: undefined,
+});
 
 /**
  * 依赖注入中心：
- * 将 Core 包生成的 Form 实例注入到 Vue 的 Context 中。
- * 供深层子组件（如 BaseFormItem, BaseField, 自定义插槽）跨层级直接访问数据和方法。
+ * 若外部未传 form 实例，则自动初始化内部表单实例；
+ * 将 Form 实例注入到 Vue Context 中，供深层子组件（如 BaseFormItem, BaseField, 自定义插槽）跨层级直接访问数据和方法。
  */
-provide(InjectionFormKey, form as F);
+const fallbackForm = props.form ? undefined : useForm();
+const currentForm = computed(
+  () => props.form ?? (fallbackForm as unknown as F)
+);
+
+/**
+ * 表单实例代理：操作全部转发至 currentForm 当前实例；
+ * 下游持有本代理即可，:form 运行期替换无需重绑。
+ */
+const formProxy = new Proxy({} as F, {
+  get(_, prop) {
+    const target = currentForm.value as any;
+    const val = target?.[prop];
+    if (typeof val === 'function') {
+      return (...args: any[]) => (currentForm.value as any)?.[prop]?.(...args);
+    }
+    return val;
+  },
+  set(_, prop, value) {
+    if (currentForm.value) {
+      (currentForm.value as any)[prop] = value;
+    }
+    return true;
+  },
+  has(_, prop) {
+    return Boolean(currentForm.value && prop in currentForm.value);
+  },
+});
+
+provide(InjectionFormKey, formProxy);
 
-const { formData, fields, setFormRef } = form as F;
+const fields = computed(() => {
+  const f = currentForm.value?.fields;
+  return (Array.isArray(f) ? f : f?.value) ?? [];
+});
+const formData = computed(() => currentForm.value?.formData);
+const setFormRef = (el: any) => currentForm.value?.setFormRef?.(el);
+
+let formInstanceCounter = 0;
+const formInstanceKeyMap = new WeakMap<object, number>();
+const getFormKey = (f: object) => {
+  if (!formInstanceKeyMap.has(f)) {
+    formInstanceKeyMap.set(f, ++formInstanceCounter);
+  }
+  return formInstanceKeyMap.get(f)!;
+};
+const formKey = computed(() => getFormKey(currentForm.value as any));
 
 const config = INJECT_CONFIG['pro-form'];
+const injectFormConfig = inject(config.injectionKey, config.default);
 
-// 从 ProComponentProvider 获取全局配置，与传入的 props 合并
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { grid: _injectGrid, ...injectAttrs } = inject(
-  config.injectionKey,
-  config.default
-);
+/**
+ * 从 ProComponentProvider 获取全局配置，响应式派生以支持动态配置变更
+ */
+const injectAttrs = computed(() => {
+  const raw = toValue(injectFormConfig);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { grid: _injectGrid, ...rest } = raw || {};
+  return rest;
+});
 
 type ExtractPath<T> = T extends Form<infer D> ? Path<D> : string;
 type FieldSlotProps = VModelProps &
@@ -87,17 +138,18 @@ const slots = defineSlots<Partial<FieldSlots & { default: Slot }>>();
  * 动态插槽映射中心 (Slot Teleporting)：
  * 在 setup 同步期直接提供响应式 slots 上下文容器，供深层 BaseField 按需动态获取插槽
  */
-provide(InjectionFormSlotsKey, reactive(slots) as any);
+provide(InjectionFormSlotsKey, slots);
 </script>
 
 <template>
   <AForm
-    :ref="(el: any) => setFormRef?.(el)"
+    :key="formKey"
+    :ref="setFormRef"
     :model="formData"
     v-bind="mergeProps(injectAttrs, camelizeProperties($attrs))"
     class="pro-form"
   >
-    <BaseFormItem :fields="fields" :grid="grid" />
+    <BaseFormItem :fields="fields" :grid="props.grid" />
     <slot />
   </AForm>
 </template>

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

@@ -13,14 +13,16 @@ defineOptions({ name: 'SlotComponent', inheritAttrs: false });
 type Props = {
   component?: SlotComponentType;
 };
-defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  component: undefined,
+});
 </script>
 
 <template>
   <component
-    :is="component"
-    v-if="isVNode(component) || typeof component === 'function'"
+    :is="props.component"
+    v-if="isVNode(props.component) || typeof props.component === 'function'"
     v-bind="$attrs"
   />
-  <template v-else>{{ component }}</template>
+  <template v-else>{{ props.component }}</template>
 </template>

package/src/components/form/constants/index.ts

@@ -126,8 +126,4 @@ export const componentMap: BaseComponentMap = {
 }
 
 // inject keys
-export {
-  InjectionFormKey,
-  InjectionPathKey,
-  InjectionFormSlotsKey,
-} from '../../../shared/core';
+export { InjectionFormKey, InjectionFormSlotsKey } from '../../../shared/core';