@qin-ui/antd-vue-pro 2.4.4 → 2.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qin-ui/antd-vue-pro",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "二次封装antd vue组件",
   "bin": {
     "antd-vue-pro": "./bin/init-ai.mjs"
@@ -23,7 +23,8 @@
     "README.md",
     "LICENSE",
     "api.json",
-    "AI-CONTEXT.md"
+    "AI-CONTEXT.md",
+    "tsconfig.json"
   ],
   "homepage": "https://dufan3715.github.io/pro-components/",
   "repository": {
@@ -43,7 +44,7 @@
   "dependencies": {
     "scroll-into-view-if-needed": "^3.1.0",
     "vue-component-type-helpers": "^3.2.5",
-    "@qin-ui/pro-components-core": "^2.0.3"
+    "@qin-ui/pro-components-core": "^2.0.4"
   },
   "devDependencies": {
     "@vue/test-utils": "^2.4.11",

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

@@ -1,6 +1,6 @@
 import { GridItemProps, FormItemProps, TableProps } from '../../../shared/ui';
 import { Base, Grid } from '../../form/types';
-import { ProFormProps } from '../../form';
+import { ProFormProps } from '../../form/components';
 import { ProTableProps } from '../../table';
 import { AllowedComponentProps } from 'vue';
 

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

@@ -42,7 +42,8 @@ import {
   useInjectFormItemContext,
 } from '../../../../shared/ui';
 import type { Field } from '../../types';
-import { ContainerFragment, SlotComponent } from '..';
+import ContainerFragment from '../ContainerFragment/index.vue';
+import SlotComponent from '../SlotComponent/index.vue';
 import { componentMap, InjectionFormSlotsKey } from '../../constants';
 import {
   INJECT_COMPONENTS,
@@ -52,6 +53,10 @@ import { useForm } from '../../hooks/useForm';
 import { getInitProps, warnUnknownComponent } from './utils';
 import { useLocale } from '../../../../locale';
 
+const cloneDeepIfObject = (val: unknown) =>
+  // 原始值直接传递，引用值克隆快照
+  typeof val === 'object' && val !== null ? cloneDeep(val) : val;
+
 defineOptions({ name: 'BaseField', inheritAttrs: false });
 
 type Props = {
@@ -121,7 +126,7 @@ const value = computed({
       // 仅当 set 转换函数需要旧值参数时，才获取旧值上下文
       const oldVal =
         setFormatter.length > 1
-          ? cloneDeep(form.getFormData?.(props.path))
+          ? cloneDeepIfObject(form.getFormData?.(props.path))
           : undefined;
       newVal = setFormatter(val, oldVal);
     }
@@ -160,7 +165,6 @@ const groupedAttrs = computed(() => {
   ) as Required<Field>;
 
   // prettier-ignore
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { valueFormatter, modelProp, slots, componentClass, componentStyle, componentContainer, [effectiveModelProp]: _modelVal, [`onUpdate:${effectiveModelProp}`]: onUpdateValue, ...bindAttrs } = mergedProps as any;
 
   return {
@@ -173,9 +177,9 @@ const groupedAttrs = computed(() => {
   };
 });
 
-// 从 ProForm 插槽注入的 slots 集合（优先级最高）
-const formSlots = inject(InjectionFormSlotsKey, undefined) as
-  | Record<string, any>
+// 从 ProForm 插槽注入的 slots 集合（优先级最高；shallowRef 形态，computed 内经 .value 读取建立依赖）
+const injectedFormSlots = inject(InjectionFormSlotsKey, undefined) as
+  | { value: Record<string, any> | undefined }
   | undefined;
 
 // 从 ProComponentProvider 注入的自定义组件映射
@@ -186,7 +190,7 @@ const customComponents = inject(INJECT_COMPONENTS, {});
  * ProForm 插槽 → 自定义组件映射 → 内置组件映射 → 原始 component 值
  */
 const is = computed(() => {
-  const teleportSlot = props.path && formSlots?.[props.path];
+  const teleportSlot = props.path && injectedFormSlots?.value?.[props.path];
   if (teleportSlot) return teleportSlot;
   if (typeof props.component === 'string') {
     const resolved =

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

@@ -33,10 +33,28 @@ import {
 } from '../../../../shared/ui';
 import { computed, inject, toRaw, toValue } from 'vue';
 import type { Fields, Grid } from '../../types';
-import { BaseField, SlotComponent, ContainerFragment } from '..';
+import BaseField from '../BaseField/index.vue';
+import SlotComponent from '../SlotComponent/index.vue';
+import ContainerFragment from '../ContainerFragment/index.vue';
 import { useGroupFieldAttrs } from '../../hooks/useGroupFieldAttrs';
 import { INJECT_CONFIG } from '../../../component-provider/constants';
 
+/*
+ * 无 path 字段的稳定渲染 key：以字段原始对象为 key 分配自增 id，
+ * 字段插删/重排/过滤时保持 key 与对象绑定，不随数组位置漂移
+ */
+let fieldKeySeed = 0;
+const fieldKeyMap = new WeakMap<object, number>();
+const getFieldKey = (field: unknown): number => {
+  const raw = toRaw(field as object);
+  let key = fieldKeyMap.get(raw);
+  if (key === undefined) {
+    key = ++fieldKeySeed;
+    fieldKeyMap.set(raw, key);
+  }
+  return key;
+};
+
 defineOptions({ name: 'BaseFormItem', inheritAttrs: false });
 
 type Props = {
@@ -80,13 +98,41 @@ const computedGridProps = computed<GridProps>(() => {
 const formItemInstanceMap = new WeakMap<object, any>();
 const componentInstanceMap = new WeakMap<object, any>();
 
+/** 已告警过的字段对象（不可写场景去重） */
+const warnedFrozenFields = new WeakSet<object>();
+const defineFieldAccessors = (
+  raw: object,
+  accessors: Record<string, () => any>
+) => {
+  try {
+    for (const [key, getter] of Object.entries(accessors)) {
+      // 不可枚举：不进入 Object.keys / spread，不随字段配置透传
+      Object.defineProperty(raw, key, {
+        value: getter,
+        enumerable: false,
+        configurable: true,
+        writable: true,
+      });
+    }
+  } catch {
+    if (!warnedFrozenFields.has(raw)) {
+      warnedFrozenFields.add(raw);
+      console.warn(
+        '[pro-components] 字段配置对象不可写（如被 Object.freeze），getFormItemRef / getComponentRef 等实例访问器挂载失败。'
+      );
+    }
+  }
+};
+
 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;
+    defineFieldAccessors(raw, {
+      getFormItemRef: () => formItemInstanceMap.get(raw),
+      getFormItemComputedProps: () => formItemProps,
+    });
   } else {
     formItemInstanceMap.delete(raw);
     delete raw.getFormItemRef;
@@ -99,10 +145,11 @@ const setComponentRef = (field: any, el: any) => {
   const raw = toRaw(field);
   if (el) {
     componentInstanceMap.set(raw, el);
-    raw.getComponentRef = () =>
-      componentInstanceMap.get(raw)?.getComponentRef();
-    raw.getComponentComputedProps = () =>
-      componentInstanceMap.get(raw)?.getComponentComputedProps();
+    defineFieldAccessors(raw, {
+      getComponentRef: () => componentInstanceMap.get(raw)?.getComponentRef(),
+      getComponentComputedProps: () =>
+        componentInstanceMap.get(raw)?.getComponentComputedProps(),
+    });
   } else {
     componentInstanceMap.delete(raw);
     delete raw.getComponentRef;
@@ -118,7 +165,10 @@ const groupedFields = useGroupFieldAttrs(validFields);
     :component="enableGrid ? AGrid : undefined"
     v-bind="computedGridProps"
   >
-    <template v-for="(item, index) of groupedFields" :key="item.path || index">
+    <template
+      v-for="item of groupedFields"
+      :key="item.path || getFieldKey(item.rawField)"
+    >
       <ContainerFragment
         :component="enableGrid ? AGridItem : undefined"
         v-bind="item.gridItemProps"

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

@@ -47,13 +47,16 @@ import {
   computed,
   inject,
   mergeProps,
+  onUpdated,
   provide,
+  shallowRef,
   toValue,
+  triggerRef,
   useAttrs,
   type Slot,
 } from 'vue';
 import { INJECT_CONFIG } from '../../../component-provider/constants';
-import { BaseFormItem } from '..';
+import BaseFormItem from '../BaseFormItem/index.vue';
 import { InjectionFormKey, InjectionFormSlotsKey } from '../../constants';
 import type { Grid, VModelProps, PathProps } from '../../types';
 import {
@@ -75,12 +78,12 @@ const props = withDefaults(defineProps<Props>(), {
 
 /**
  * 依赖注入中心：
- * 若外部未传 form 实例，则自动初始化内部表单实例；
+ * 未传 form 实例（含运行期置空）时惰性初始化内部表单实例；
  * 将 Form 实例注入到 Vue Context 中，供深层子组件（如 BaseFormItem, BaseField, 自定义插槽）跨层级直接访问数据和方法。
  */
-const fallbackForm = props.form ? undefined : useForm();
+let fallbackForm: F | undefined;
 const currentForm = computed(
-  () => props.form ?? (fallbackForm as unknown as F)
+  () => props.form ?? (fallbackForm ??= useForm() as unknown as F)
 );
 
 /**
@@ -105,6 +108,7 @@ const setFormRef = (el: any) => currentForm.value?.setFormRef?.(el);
 let formInstanceCounter = 0;
 const formInstanceKeyMap = new WeakMap<object, number>();
 const getFormKey = (f: object) => {
+  if (f == null) return 0;
   if (!formInstanceKeyMap.has(f)) {
     formInstanceKeyMap.set(f, ++formInstanceCounter);
   }
@@ -122,7 +126,6 @@ const attrs = useAttrs();
  */
 const injectAttrs = computed(() => {
   const raw = toValue(injectFormConfig);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { grid: _injectGrid, ...rest } = raw || {};
   return rest;
 });
@@ -138,11 +141,15 @@ type FieldSlots = Record<ExtractPath<F>, Slot<FieldSlotProps>>;
 
 const slots = defineSlots<Partial<FieldSlots & { default: Slot }>>();
 
-/**
+/*
  * 动态插槽映射中心 (Slot Teleporting)：
- * 在 setup 同步期直接提供响应式 slots 上下文容器，供深层 BaseField 按需动态获取插槽
+ * slots 以 shallowRef 注入，组件每次更新后触发通知，深层 BaseField 可感知父级运行期增删的具名插槽
  */
-provide(InjectionFormSlotsKey, slots);
+const formSlotsRef = shallowRef<Record<string, any>>(slots);
+onUpdated(() => {
+  triggerRef(formSlotsRef);
+});
+provide(InjectionFormSlotsKey, formSlotsRef);
 </script>
 
 <template>

package/src/components/form/hooks/useGroupFieldAttrs.ts

@@ -50,23 +50,11 @@ export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
 
       if (isPlainObject(field)) {
         // prettier-ignore
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { path, name, fields, formItemClass, formItemStyle, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, formItemContainer, ...rest } =
           field as any;
 
-        const {
-          class: injectClassName,
-          style: injectStyle,
-          span: injectSpan,
-          xs,
-          sm,
-          md,
-          lg,
-          xl,
-          xxl,
-          formItemContainer: injectFormItemContainer,
-          ...injectRest
-        } = rawInject;
+        // prettier-ignore
+        const { class: injectClassName, style: injectStyle, span: injectSpan, xs, sm, md, lg, xl, xxl, formItemContainer: injectFormItemContainer, ...injectRest } = rawInject;
 
         // 字段显式 span 优先，否则回退注入配置的响应式断点
         const initGridItemProps =
@@ -74,7 +62,10 @@ export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
             ? { span }
             : { xs, sm, md, lg, xl, xxl, span: injectSpan };
 
-        gridItemProps = fields ? { span: span ?? 24 } : initGridItemProps;
+        // 分组字段默认整行（span 兜底 24），注入断点同样生效
+        gridItemProps = fields
+          ? { ...initGridItemProps, span: span ?? 24 }
+          : initGridItemProps;
         // 字段级容器优先，回退注入级配置
         const container = formItemContainer ?? injectFormItemContainer;
         formItemProps = mergeProps(

package/src/components/table/components/ColumnControl.vue

@@ -80,10 +80,12 @@ const checkedColumnKeys = computed({
     );
   },
   set(val) {
+    // 仅写 hidden 发生翻转的列
+    const checkedSet = new Set(val);
     checkedColumnsOptions.value.forEach(item => {
-      if (item.disabled) return;
+      if (item.disabled || item.checked === checkedSet.has(item.value)) return;
       props.table?.setColumn?.(item.value, {
-        hidden: !val.includes(item.value),
+        hidden: !checkedSet.has(item.value),
       });
     });
   },

package/src/components/table/components/ProTable.vue

@@ -49,7 +49,7 @@ import {
   type Slot,
 } from 'vue';
 import { INJECT_CONFIG } from '../../component-provider/constants';
-import { ContainerFragment } from '../../form';
+import ContainerFragment from '../../form/components/ContainerFragment/index.vue';
 import type { ContainerComponent } from '../../form/types';
 import SearchForm from './SearchForm.vue';
 import { SearchFormProps } from './SearchForm.vue';
@@ -64,12 +64,10 @@ import {
   Path,
 } from '../../../shared/core';
 import { ComponentSlots } from 'vue-component-type-helpers';
-import {
-  DefaultSearchFormContainer,
-  DefaultTableContainer,
-  SizeControl,
-  ColumnControl,
-} from '.';
+import DefaultSearchFormContainer from './DefaultSearchFormContainer.vue';
+import DefaultTableContainer from './DefaultTableContainer.vue';
+import SizeControl from './SizeControl.vue';
+import ColumnControl from './ColumnControl.vue';
 import { Column, Columns, ColumnControlConfig } from '../types';
 
 defineOptions({ name: 'ProTable', inheritAttrs: false });
@@ -147,10 +145,26 @@ const loading = defineModel<boolean>('loading', { default: false });
 
 // 递增序号做请求竞态守卫，仅最新一次请求可变更 loading
 let searchSequence = 0;
+let warnedSearchConfig = false;
+const warnSearchConfig = (reason: string) => {
+  if (warnedSearchConfig) return;
+  warnedSearchConfig = true;
+  console.warn(`[ProTable] ${reason}`);
+};
 const _search = async () => {
-  const seq = ++searchSequence;
+  if (props.search && attrs.onSearch) {
+    warnSearchConfig(
+      '同时配置了 :search prop 与 @search 监听，@search 监听不会被执行，请仅保留其一。'
+    );
+  }
   const searchPromise = (props.search || attrs.onSearch)?.();
-  if (!isPromise(searchPromise)) return;
+  if (!isPromise(searchPromise)) {
+    warnSearchConfig(
+      'search 未返回 Promise，本次查询不参与 loading 竞态管理（在途请求的 loading 状态保持不变）。'
+    );
+    return;
+  }
+  const seq = ++searchSequence;
   loading.value = true;
   try {
     await searchPromise;

package/src/components/table/components/SearchForm.vue

@@ -63,8 +63,8 @@ import {
   type Component,
   type DefineComponent,
 } from 'vue';
-import ProForm from '../../form';
-import { type Form } from '../../form';
+import ProForm from '../../form/components/ProForm/index.vue';
+import { type Form } from '../../form/hooks/useForm';
 import DownOutlined from './icons/DownOutlined.vue';
 import { useLocale } from '../../../locale';
 import { useSearchFormExpand } from '../../../shared/core';

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "ES2022", "DOM"],
+    "baseUrl": ".",
+    "types": ["ant-design-vue/typings/global"],
+    "declaration": true,
+    "declarationMap": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true
+  },
+  "include": ["src", "__tests__"],
+  "exclude": ["node_modules", "es"]
+}