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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qin-ui/antd-vue-pro",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "description": "二次封装antd vue组件",
   "bin": {
     "antd-vue-pro": "./bin/init-ai.mjs"
@@ -43,7 +43,7 @@
   "dependencies": {
     "scroll-into-view-if-needed": "^3.1.0",
     "vue-component-type-helpers": "^3.2.5",
-    "@qin-ui/pro-components-core": "^1.1.0"
+    "@qin-ui/pro-components-core": "^1.1.1"
   },
   "devDependencies": {
     "ant-design-vue": "^4"

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

@@ -42,7 +42,7 @@ import {
 } from '../../../../shared/ui';
 import type { Field } from '../../types';
 import { ContainerFragment, SlotComponent } from '..';
-import { componentMap, TeleportComponentNamePrefix } from '../../constants';
+import { componentMap, InjectionFormSlotsKey } from '../../constants';
 import { INJECT_COMPONENTS } from '../../../component-provider/constants';
 import { useForm } from '../../hooks/useForm';
 import { getInitProps } from './utils';
@@ -141,21 +141,21 @@ const groupedAttrs = computed(() => {
   };
 });
 
-// 从 ProForm 插槽注入的 teleport 组件（优先级最高）
-const teleportComponent = inject(
-  `${TeleportComponentNamePrefix}${path}`,
-  undefined
-);
+// 从 ProForm 插槽注入的 slots 集合（优先级最高）
+const formSlots = inject(InjectionFormSlotsKey, undefined) as
+  | Record<string, any>
+  | undefined;
 
 // 从 ProComponentProvider 注入的自定义组件映射
 const customComponents = inject(INJECT_COMPONENTS, {});
 
 /*
  * 按优先级解析最终要渲染的组件：
- * teleport 插槽 → 自定义组件映射 → 内置组件映射 → 原始 component 值
+ * ProForm 插槽 → 自定义组件映射 → 内置组件映射 → 原始 component 值
  */
 const is = computed(() => {
-  if (teleportComponent) return teleportComponent;
+  const teleportSlot = path && formSlots?.[path];
+  if (teleportSlot) return teleportSlot;
   if (typeof component === 'string') {
     return (
       (customComponents as any)[component] ||

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

@@ -43,10 +43,10 @@
  * ```
  */
 import { Form as AForm, FormProps as AFormProps } from '../../../../shared/ui';
-import { inject, mergeProps, provide, type Slot, watchEffect } from 'vue';
+import { inject, mergeProps, provide, reactive, type Slot } from 'vue';
 import { INJECT_CONFIG } from '../../../component-provider/constants';
 import { BaseFormItem } from '..';
-import { InjectionFormKey, TeleportComponentNamePrefix } from '../../constants';
+import { InjectionFormKey, InjectionFormSlotsKey } from '../../constants';
 import type { Grid, VModelProps, PathProps } from '../../types';
 import { Path, camelizeProperties } from '../../../../shared/core';
 import type { Form } from '../../hooks/useForm';
@@ -82,18 +82,12 @@ type FieldSlotProps = VModelProps &
 type FieldSlots = Record<ExtractPath<F>, Slot<FieldSlotProps>>;
 
 const slots = defineSlots<Partial<FieldSlots & { default: Slot }>>();
+
 /**
  * 动态插槽映射中心 (Slot Teleporting)：
- * 目的：将 ProForm 上以 Field Path 命名的插槽，动态注册为全局可访问的 Context。
- * 实现：BaseField 组件在渲染对应字段时，会通过 inject 尝试获取对应的 Prefix+Path，
- *      如果存在，则将插槽内容渲染到深层的具体位置，从而突破了组件嵌套层级的限制。
+ * 在 setup 同步期直接提供响应式 slots 上下文容器，供深层 BaseField 按需动态获取插槽
  */
-watchEffect(() => {
-  Object.keys(slots).forEach(name => {
-    if (name === 'default') return;
-    provide(`${TeleportComponentNamePrefix}${name}`, (slots as any)[name]);
-  });
-});
+provide(InjectionFormSlotsKey, reactive(slots) as any);
 </script>
 
 <template>

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

@@ -125,11 +125,9 @@ export const componentMap: BaseComponentMap = {
   'transfer': Transfer,
 }
 
-/**
- * Teleport 组件名称前缀
- * @description 用于通过插槽动态替换指定 path 的组件
- */
-export const TeleportComponentNamePrefix = 'TeleportComponent_';
-
 // inject keys
-export { InjectionFormKey, InjectionPathKey } from '../../../shared/core';
+export {
+  InjectionFormKey,
+  InjectionPathKey,
+  InjectionFormSlotsKey,
+} from '../../../shared/core';

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

@@ -70,6 +70,8 @@ export type Options = Array<Option>;
 
 export type Grid = boolean | (GridProps & {});
 
+export type FormItemSlots = ComponentSlots<typeof FormItem>;
+
 type BaseCommon<D extends Data = Data> = {
   /**
    * @description 字段标识namePath, 同name
@@ -100,7 +102,7 @@ type BaseCommon<D extends Data = Data> = {
    * }
    * ```
    */
-  slots?: Partial<ComponentSlots<typeof FormItem>>;
+  slots?: Partial<FormItemSlots>;
   /**
    * @description 字段formItem样式属性
    * @example { marginBottom: '8px', padding: '12px' }
@@ -238,6 +240,20 @@ type WithFields<D extends Data = Data> = WithRef<
   WithCommonBase & BaseWithFields<D>
 >;
 
+/**
+ * @description 合并 FormItem 插槽与组件插槽
+ */
+export type MergeSlots<
+  T extends abstract new (...args: any) => any,
+  CS = ComponentSlots<T>,
+> = Partial<{
+  [K in keyof FormItemSlots | keyof CS]: K extends keyof FormItemSlots
+    ? FormItemSlots[K]
+    : K extends keyof CS
+      ? CS[K]
+      : SlotComponentType;
+}>;
+
 /**
  * @description 自动从 Vue 组件提取 Props 和 Slots，并加上公共表单字段属性
  * @template T - Vue 组件类型
@@ -246,12 +262,12 @@ type WithFields<D extends Data = Data> = WithRef<
 type WithComponent<
   T extends abstract new (...args: any) => any,
   D extends Data = Data,
-> = WithCommon<
-  { slots?: Partial<ComponentSlots<T>> } & Partial<
-    Omit<ComponentProps<T>, keyof VNodeProps>
-  >,
-  D
->;
+> = Omit<
+  WithCommon<Partial<ComponentProps<T>>, D>,
+  keyof VNodeProps | 'slots'
+> & {
+  slots?: MergeSlots<T>;
+};
 
 /**
  * @description 字段配置类型，包含所有字段属性和响应式支持

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

@@ -40,8 +40,13 @@ const checkedColumnsOptions = computed<
   }>
 >(() =>
   columns.flatMap(item => {
-    if (!item.key || !item.title) return [];
-    const key = item.key as string;
+    const rawKey =
+      item.key ??
+      (Array.isArray(item.dataIndex)
+        ? item.dataIndex.join('.')
+        : item.dataIndex);
+    if (!rawKey || !item.title) return [];
+    const key = String(rawKey);
     if (columnControl?.excludedKeys?.some(ek => String(ek) === key)) return [];
     const disabled =
       columnControl?.disabledKeys?.some(dk => String(dk) === key) ?? false;

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

@@ -221,18 +221,7 @@ const computedColumns = computed(
       ...((addIndexColumn ?? injectProps.addIndexColumn)
         ? [indexColumn()]
         : []),
-      ...(tableAttrs.value.columns ?? columns?.value ?? ([] as any)).flatMap(
-        (item: ColumnType<RecordType>, index: number) => {
-          if (item.key) return [{ ...item, key: item.key }];
-          if (item.dataIndex) {
-            const dataIndexKey = Array.isArray(item.dataIndex)
-              ? item.dataIndex.join('.')
-              : (item.dataIndex as string);
-            return [{ ...item, key: dataIndexKey }];
-          }
-          return [{ ...item, key: index }];
-        }
-      ),
+      ...(tableAttrs.value.columns ?? columns?.value ?? []),
     ] as Columns<RecordType>
 );
 
@@ -301,7 +290,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="pro-table" :class="$attrs.class" :style="$attrs.style">
+  <div class="pro-table" :class="attrs.class" :style="attrs.style">
     <ContainerFragment
       v-if="showSearch"
       :component="computedSearchFormConfig.container"

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

@@ -61,8 +61,10 @@ import {
   AllowedComponentProps,
   computed,
   ref,
+  nextTick,
   watch,
   watchEffect,
+  onBeforeUnmount,
   type Component,
   type DefineComponent,
 } from 'vue';
@@ -94,7 +96,25 @@ const emit = defineEmits<Emits>();
 
 const proFormHeight = ref<'unset' | number>('unset');
 const collapseHeight = ref(0);
-let rowHeight = 32;
+const rowHeight = ref(32);
+
+let resizeObserver: ResizeObserver | null = null;
+let intersectionObserver: IntersectionObserver | null = null;
+
+const cleanupObservers = () => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+  if (intersectionObserver) {
+    intersectionObserver.disconnect();
+    intersectionObserver = null;
+  }
+};
+
+onBeforeUnmount(() => {
+  cleanupObservers();
+});
 
 const computedExpand = computed(() => {
   if (!expand) return false;
@@ -109,11 +129,41 @@ const showExpandToggle = ref(false);
 
 const expandStatus = ref(true);
 
+const { formRef, getFormData } = form;
+
+const updateHeights = () => {
+  if (!expand || !formRef.value) return;
+  const proFormEl = (formRef.value as any)?.$el;
+  if (!proFormEl) return;
+
+  const itemHeight = proFormEl
+    ?.querySelector("[class*='-form-item']")
+    ?.getBoundingClientRect?.()?.height;
+  if (itemHeight && itemHeight > 0) {
+    rowHeight.value = itemHeight;
+  }
+
+  // 使用 scrollHeight 测量自然展开高度，突破固定高度与 overflow: hidden 样式的自引用限制
+  const naturalHeight =
+    proFormEl.scrollHeight || proFormEl.getBoundingClientRect?.()?.height || 0;
+  if (naturalHeight > 0) {
+    proFormHeight.value = naturalHeight;
+  }
+};
+
 const changeExpandStatus = () => {
   expandStatus.value = !expandStatus.value;
+  nextTick(() => {
+    updateHeights();
+  });
 };
 
-const { formRef, getFormData } = form;
+const hasFieldValue = (val: any) =>
+  val !== null &&
+  val !== undefined &&
+  val !== '' &&
+  !(Array.isArray(val) && val.length === 0) &&
+  !(typeof val === 'object' && Object.keys(val).length === 0);
 
 /*
  * 使用 IntersectionObserver 检测折叠状态下隐藏字段是否有值
@@ -123,26 +173,30 @@ const setInitExpandStatus = () => {
   expandStatus.value = false;
   if (formRef.value && expand) {
     const formEl = (formRef.value as any).$el;
-    const formItemsEl = formEl.querySelectorAll(
+    const formItemsEl = formEl?.querySelectorAll?.(
       "[class*='-form-item'] > [path]"
     );
-    const observer = new IntersectionObserver(
+    if (!formItemsEl || formItemsEl.length === 0) return;
+    if (intersectionObserver) {
+      intersectionObserver.disconnect();
+    }
+    intersectionObserver = new IntersectionObserver(
       entries => {
         expandStatus.value = entries.some(e => {
           // 如果隐藏字段（intersectionRatio === 0）有值，则自动展开
           if (e.intersectionRatio === 0) {
             const path = e.target.getAttribute('path');
             const searchFieldValue = path ? getFormData?.(path) : undefined;
-            return ![null, undefined].includes(searchFieldValue);
+            return hasFieldValue(searchFieldValue);
           }
           return (expand as any).expandStatus;
         });
-        observer.disconnect();
+        intersectionObserver?.disconnect();
       },
       { root: formEl }
     );
     formItemsEl.forEach((element: Element) => {
-      observer.observe(element);
+      intersectionObserver?.observe(element);
     });
   }
 };
@@ -154,17 +208,29 @@ watch(
     () => expand,
   ],
   () => {
-    if (!expand || !expandStatus.value || !formRef.value) return;
-    const proFormEl = (formRef.value as any)?.$el;
-    const { height = 0 } = proFormEl?.getBoundingClientRect?.() || {};
-    proFormHeight.value = height;
-    rowHeight = proFormEl
-      ?.querySelector("[class*='-form-item']")
-      ?.getBoundingClientRect?.()?.height;
+    updateHeights();
   },
   { flush: 'post', immediate: true }
 );
 
+watch(
+  () => formRef.value,
+  val => {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    const formEl = (val as any)?.$el;
+    if (formEl && typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => {
+        updateHeights();
+      });
+      resizeObserver.observe(formEl);
+    }
+  },
+  { immediate: true }
+);
+
 /*
  * 计算折叠高度和是否显示展开按钮
  * 折叠高度 = minExpandRows * 行高 + (minExpandRows - 1) * 行间距
@@ -176,7 +242,7 @@ watchEffect(
     if (layout === 'grid' && computedExpand.value) {
       const { minExpandRows } = computedExpand.value;
       collapseHeight.value = Math.min(
-        minExpandRows * rowHeight + (minExpandRows - 1) * rowGap,
+        minExpandRows * rowHeight.value + (minExpandRows - 1) * rowGap,
         +proFormHeight.value
       );
       showExpandToggle.value = +proFormHeight.value - collapseHeight.value > 1;

package/src/shared/core/index.ts

@@ -12,6 +12,7 @@ export {
   // injection keys
   InjectionFormKey,
   InjectionPathKey,
+  InjectionFormSlotsKey,
   // utils
   getObject,
   toPath,