@qin-ui/element-plus-pro 1.2.4 → 1.3.1

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

@@ -1,5 +1,5 @@
 import { RequiredComponentVars } from '../types';
-import { InjectionKey, Component } from 'vue';
+import { InjectionKey, Component, type ComputedRef } from 'vue';
 
 export type InjectConfigEntry<T = any> = {
   injectionKey: InjectionKey<T>;
@@ -30,11 +30,11 @@ export const INJECT_CONFIG: {
   },
   'pro-form': {
     injectionKey: Symbol(''),
-    default: { grid: { gutter: 24 } } as any,
+    default: { grid: { gutter: 24 } },
   },
   'pro-form-item': {
     injectionKey: Symbol(''),
-    default: { span: 8 } as any,
+    default: { span: 8 },
   },
   input: {
     injectionKey: Symbol(''),
@@ -61,7 +61,7 @@ export const INJECT_CONFIG: {
     injectionKey: Symbol(''),
     default: {
       max: 10 ** 15 - 1,
-      min: -(10 ** 15 + 1),
+      min: -(10 ** 15 - 1),
       controls: false,
       style: { width: '100%' },
     },
@@ -165,7 +165,8 @@ export const INJECT_CONFIG: {
 };
 
 export const INJECT_COMPONENTS: InjectionKey<
-  Partial<Record<string, Component>>
+  | ComputedRef<Partial<Record<string, Component>> | undefined>
+  | Partial<Record<string, Component>>
 > = Symbol('INJECT_COMPONENTS');
 
 const DYNAMIC_INJECT_CONFIG: Record<string, InjectConfigEntry> =

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

@@ -6,8 +6,9 @@ import {
   DatePicker,
 } from '../../../shared/ui';
 import { ComponentName, GetComponentType } from '../../form/constants';
-import { Base, Grid } from '../../form/types';
+import { Base, Grid, ContainerComponent } from '../../form/types';
 import { ProFormProps } from '../../form';
+import type { SearchFormProps } from '../../table/components/SearchForm.vue';
 import { AllowedComponentProps } from 'vue';
 import type { ComponentProps } from 'vue-component-type-helpers';
 
@@ -31,17 +32,20 @@ type DatePickerType = NonNullable<ComponentProps<typeof DatePicker>['type']>;
 export type RequiredComponentVars = {
   'pro-table': PP<
     TableProps & {
-      pagination?: Partial<PaginationProps>;
+      pagination?: false | Partial<PaginationProps>;
       control?: boolean | { sizeControl?: boolean; columnControl?: boolean };
-      searchFormConfig?: any;
+      searchFormConfig?: Partial<Omit<SearchFormProps, 'form'>> & {
+        hidden?: boolean;
+        container?: ContainerComponent | false;
+      };
       immediateSearch?: boolean;
       addIndexColumn?: boolean;
-      tableContainer?: any;
+      tableContainer?: ContainerComponent | false;
     }
   >;
   'pro-form': PP<
     Omit<ProFormProps, 'form' | 'grid'> & {
-      grid: Exclude<Grid, undefined | boolean>;
+      grid?: Exclude<Grid, undefined | boolean>;
     }
   >;
   'pro-form-item': PP<

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

@@ -33,16 +33,20 @@ import {
   inject,
   mergeProps,
   ref,
+  toValue,
   useAttrs,
 } from 'vue';
-import { cloneDeep, omit } from '../../../../shared/core';
+import { cloneDeep } from '../../../../shared/core';
 import { useDisabledContext } from '../../../../shared/ui';
 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 { getInitProps, warnUnknownComponent } from './utils';
 import { useLocale } from '../../../../locale';
 
 defineOptions({ name: 'BaseField', inheritAttrs: false });
@@ -51,25 +55,36 @@ 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>();
 
 const attrs: any = useAttrs();
 
-function getOldValue() {
-  return cloneDeep(getFormData?.(path));
-}
+// 全局默认配置注入：key = 组件名 + type 修饰段；inject 须在 setup 同步期调用
+const typeVal = attrs.type;
+const injectConfigKey =
+  typeof props.component === 'string'
+    ? [props.component, typeVal].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' &&
@@ -82,14 +97,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);
   },
 });
 
@@ -100,36 +124,37 @@ const parentDisabled = useDisabledContext();
  * 属性分为三类：绑定属性（v-model）、组件属性（传递给组件）、插槽（动态渲染）
  */
 const groupedAttrs = computed(() => {
+  const currentInjectProps = toValue(rawInjectComponentProps) || {};
   const initProps = getInitProps(
     {
-      component: component,
+      component: props.component,
       type: attrs.type,
     } as unknown as Field,
+    currentInjectProps,
     t
   );
   const modelPropName = attrs.modelProp ?? initProps.modelProp ?? 'modelValue';
+  const effectiveDisabled =
+    attrs.disabled !== undefined
+      ? Boolean(attrs.disabled)
+      : Boolean(parentDisabled.value || initProps.disabled);
   const mergedProps = mergeProps(
     initProps,
     attrs,
     { class: attrs.componentClass, style: attrs.componentStyle },
-    { class: initProps.componentClass, style: initProps.componentStyle },
-    { disabled: attrs.disabled ?? parentDisabled.value ?? initProps.disabled },
+    { disabled: effectiveDisabled },
     { 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}`,
-  ]);
+  const { valueFormatter, modelProp, slots, componentClass, componentStyle, componentContainer, [modelPropName]: _modelVal, [`onUpdate:${modelPropName}`]: _onUpdateModelVal, ...bindAttrs } = mergedProps as any;
+
   return {
     attrs: bindAttrs,
     slots,
     componentContainer,
-    modelProp: modelBindingProp,
+    modelProp: modelPropName,
     valueFormatter,
   };
 });
@@ -147,16 +172,17 @@ 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 =
+      toValue(customComponents as any)?.[props.component] ||
+      (componentMap as any)[props.component];
+    if (resolved) return resolved;
+    warnUnknownComponent(props.component);
+    return props.component;
   }
-  return component;
+  return props.component;
 });
 
 defineExpose({
@@ -166,21 +192,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,
@@ -38,11 +36,7 @@ const RANGE_PLACEHOLDER_KEYS: Record<string, [string, string]> = {
   'date-picker.datetimerange': ['date-picker.startTime', 'date-picker.endTime'],
 };
 
-/**
- * 根据组件 key 兜底生成 locale 占位符
- *
- * @description 用户通过 componentVars 或字段属性显式设置了占位符时不再兜底。
- */
+/** 根据组件 key 兜底生成 locale 占位符；已显式设置占位符（componentVars 或字段属性）时不兜底 */
 const getPlaceholderProps = (
   key: string,
   injectProps: Record<string, any>,
@@ -65,14 +59,26 @@ 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, type } = field as any;
   if (typeof component === 'string') {
     const k = [component, type].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 {};
 };
+
+/** 已告警过的未知组件名（模块级去重，避免 computed 重算导致刷屏） */
+const warnedUnknownComponents = new Set<string>();
+
+export function warnUnknownComponent(name: string) {
+  if (warnedUnknownComponents.has(name)) return;
+  warnedUnknownComponents.add(name);
+  console.warn(
+    `[pro-components] 未识别的组件类型 "${name}"，已降级为原生元素渲染。如为自定义组件请在 componentMap 或 ProComponentProvider 中注册。`
+  );
+}

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

@@ -4,7 +4,7 @@
  * @description 表单字段渲染引擎
  *
  * 负责将字段配置数组渲染为实际的表单项，支持：
- * - 字段分组（嵌套 fields 递归渲染）
+ * - 字段分组（嵌套 fields 递归渲染，嵌套字段 path 须为完整点分路径）
  * - 网格布局（grid 属性控制）
  * - FormItem 包装（label、rules、校验等）
  * - 组件绑定（通过 BaseField 渲染具体组件）
@@ -19,19 +19,17 @@
  *
  * @param {Fields<D>} [fields] - 字段配置数组
  * @param {boolean | GridProps} [grid] - 是否启用网格布局
- * @param {boolean} [disabled] - 是否禁用所有子字段
  *
  * @internal
  */
-import { getObject, toPath } from '../../../../shared/core';
+import { getObject, normalizePathKey } from '../../../../shared/core';
 import {
   FormItem,
   Grid as ElGrid,
   GridItem as ElGridItem,
   GridProps,
-  useDisabledContextProvider,
 } 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 { useGroupFieldAttrs } from '../../hooks/useGroupFieldAttrs';
@@ -42,51 +40,63 @@ 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));
+const props = withDefaults(defineProps<Props>(), {
+  grid: undefined,
+  fields: () => [],
+});
 
-useDisabledContextProvider(computed(() => disabled) as any);
+const validFields = computed(() =>
+  // hidden 支持 Ref/ComputedRef/getter 等响应式形态（统一使用 toValue 取值）
+  (props.fields ?? []).filter(field => !toValue(field.hidden))
+);
 
 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);
@@ -106,10 +116,9 @@ const groupedFields = useGroupFieldAttrs(validFields);
         <ContainerFragment :component="item.container" :path="item.path">
           <FormItem
             v-bind="item.formItemProps"
-            :ref="el => (formItemRefs[index] = el)"
-            :prop="toPath(item.path).join('.')"
+            :ref="el => setFormItemRef(item.rawField, el, item.formItemProps)"
+            :prop="normalizePathKey(item.path)"
             :path="item.path"
-            @vue:mounted="onFormItemMounted(index, item.formItemProps)"
           >
             <template
               v-for="(slot, name) in item.formItemSlots"
@@ -124,17 +133,15 @@ const groupedFields = useGroupFieldAttrs(validFields);
             </template>
             <template v-if="item.rawField.fields">
               <BaseFormItem
-                :grid="(item.rawField as any).grid ?? grid"
+                :grid="(item.rawField as any).grid ?? props.grid"
                 :fields="item.rawField.fields"
-                :disabled="toValue(item.rawField.disabled)"
               />
             </template>
             <template v-else>
               <BaseField
-                :ref="el => (componentRefs[index] = el)"
+                :ref="el => setComponentRef(item.rawField, el)"
                 v-bind="item.componentProps"
                 :path="item.path"
-                @vue:mounted="onComponentMounted(index)"
               />
             </template>
           </FormItem>

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

@@ -32,7 +32,7 @@ import {
   inject,
   mergeProps,
   provide,
-  reactive,
+  toValue,
   type Slot,
   computed,
   useAttrs,
@@ -41,35 +41,78 @@ 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 {
+  Path,
+  camelizeProperties,
+  createFormProxy,
+} from '../../../../shared/core';
+import { useForm, 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>();
+type Props = {
+  grid?: Grid;
+  form?: F;
+} & /* @vue-ignore */ FormProps;
+const props = withDefaults(defineProps<Props>(), {
+  grid: false,
+  form: undefined,
+});
 
 /**
  * 依赖注入中心：
- * 将 Core 包生成的 Form 实例注入到 Vue 的 Context 中。
- * 供深层子组件（如 BaseFormItem, BaseField, 自定义插槽）跨层级直接访问数据和方法。
+ * 若外部未传 form 实例，则自动初始化内部表单实例；
+ * 将 Form 实例注入到 Vue Context 中，供深层子组件跨层级直接访问数据和方法。
+ */
+const fallbackForm = props.form ? undefined : useForm();
+const currentForm = computed(
+  () => props.form ?? (fallbackForm as unknown as F)
+);
+
+/**
+ * 表单实例代理：操作全部转发至 currentForm 当前实例；
+ * 下游持有本代理即可，:form 运行期替换无需重绑；方法具有引用记忆化。
  */
-provide(InjectionFormKey, form as F);
+const formProxy = createFormProxy(() => currentForm.value);
+
+provide(InjectionFormKey, formProxy);
 
-const { formData, fields, setFormRef } = form as F;
-const _fields = computed(() => fields.value);
+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);
 const attrs = useAttrs();
 
-// 从 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;
+});
+
+const formAttrs = computed(() => {
+  return mergeProps(injectAttrs.value, camelizeProperties(attrs));
+});
 
 type ExtractPath<T> = T extends Form<infer D> ? Path<D> : string;
 type FieldSlotProps = VModelProps &
@@ -82,18 +125,19 @@ const slots = defineSlots<Partial<FieldSlots & { default: Slot }>>();
  * 动态插槽映射中心 (Slot Teleporting)：
  * 在 setup 同步期直接提供响应式 slots 上下文容器，供深层 BaseField 按需动态获取插槽
  */
-provide(InjectionFormSlotsKey, reactive(slots) as any);
+provide(InjectionFormSlotsKey, slots);
 </script>
 
 <template>
   <ElForm
-    :ref="(el: any) => setFormRef?.(el)"
+    :key="formKey"
+    :ref="setFormRef"
     :model="formData"
-    v-bind="mergeProps(injectAttrs, camelizeProperties(attrs))"
+    v-bind="formAttrs"
     class="pro-form"
     @submit.prevent
   >
-    <BaseFormItem :fields="_fields" :grid="grid" />
+    <BaseFormItem :fields="fields" :grid="props.grid" />
     <slot />
   </ElForm>
 </template>

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

@@ -5,7 +5,6 @@
  *
  * @public
  */
-import { isVNode } from 'vue';
 import { SlotComponentType } from '../../types';
 
 defineOptions({ name: 'SlotComponent', inheritAttrs: false });
@@ -14,13 +13,17 @@ type Props = {
   component?: SlotComponentType;
 };
 defineProps<Props>();
+
+// 可组件化渲染判定：VNode / 函数（含函数式组件）/ 组件定义对象；
+// 其余（string/number/boolean/null/undefined）一律按文本渲染，
+// 避免字符串返回值被 <component :is> 当作标签名解析
+const isRenderable = (c: Props['component']) =>
+  c !== null &&
+  c !== undefined &&
+  (typeof c === 'function' || typeof c === 'object');
 </script>
 
 <template>
-  <component
-    :is="component"
-    v-if="isVNode(component) || typeof component === 'function'"
-    v-bind="$attrs"
-  />
+  <component :is="component" v-if="isRenderable(component)" v-bind="$attrs" />
   <template v-else>{{ component }}</template>
 </template>