@qin-ui/element-plus-pro 1.2.1 → 1.2.3

package/es/shared/core/index.d.ts

@@ -2,5 +2,5 @@
  * 统一 re-export @qin-ui/pro-components-core，包内所有文件通过此文件引入 core 内容，
  * 避免直接散列依赖 @qin-ui/pro-components-core，便于将来统一维护。
  */
-export { useForm, useTable, useFields, useFormData, useFormRef, InjectionFormKey, InjectionPathKey, get, getObject, toPath, camelizeProperties, cloneDeep, omit, pick, isPlainObject, type Data, type Path, type Paths, type KeyExpandString, type ExtendWithAny, type DeepPartial, type PageParam, type Fields, type Form, type Table, type UseFieldsReturn, type UseFormDataReturn, type UseFormRefReturn, } from '@qin-ui/pro-components-core';
+export { useForm, useTable, useFields, useFormData, useFormRef, InjectionFormKey, InjectionPathKey, InjectionFormSlotsKey, get, getObject, toPath, camelizeProperties, cloneDeep, omit, pick, isPlainObject, type Data, type Path, type Paths, type KeyExpandString, type ExtendWithAny, type DeepPartial, type PageParam, type Fields, type Form, type Table, type UseFieldsReturn, type UseFormDataReturn, type UseFormRefReturn, } from '@qin-ui/pro-components-core';
 //# sourceMappingURL=index.d.ts.map

package/es/shared/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shared/core/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAEL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,UAAU,EAEV,gBAAgB,EAChB,gBAAgB,EAEhB,GAAG,EACH,SAAS,EACT,MAAM,EACN,kBAAkB,EAClB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,aAAa,EAEb,KAAK,IAAI,EACT,KAAK,IAAI,EACT,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,IAAI,EACT,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shared/core/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAEL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,UAAU,EAEV,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,EAErB,GAAG,EACH,SAAS,EACT,MAAM,EACN,kBAAkB,EAClB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,aAAa,EAEb,KAAK,IAAI,EACT,KAAK,IAAI,EACT,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,IAAI,EACT,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,6BAA6B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qin-ui/element-plus-pro",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "基于 element-plus 的二次封装组件",
   "bin": {
     "element-plus-pro": "./bin/init-ai.mjs"
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "vue-component-type-helpers": "^3.2.5",
-    "@qin-ui/pro-components-core": "^1.1.0"
+    "@qin-ui/pro-components-core": "^1.1.1"
   },
   "devDependencies": {
     "element-plus": "^2.13.6"

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

@@ -39,7 +39,7 @@ 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 { componentMap, InjectionFormSlotsKey } from '../../constants';
 import { INJECT_COMPONENTS } from '../../../component-provider/constants';
 import { useForm } from '../../hooks/useForm';
 import { getInitProps } from './utils';
@@ -134,21 +134,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

@@ -32,14 +32,14 @@ import {
   inject,
   mergeProps,
   provide,
+  reactive,
   type Slot,
-  watchEffect,
   computed,
   useAttrs,
 } 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';
@@ -80,16 +80,9 @@ 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

@@ -106,11 +106,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, 同prop
@@ -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' }
@@ -261,6 +263,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 组件类型
@@ -269,12 +285,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

@@ -31,7 +31,7 @@ const indeterminate = ref(false);
 
 const getColumnKey = (column: Column, index: number) => {
   const key = column.key ?? column.prop;
-  if (key === undefined || key === null) return `__idx_${index}`;
+  if (key === undefined || key === null) return `__col_${index}`;
   return Array.isArray(key) ? key.join('.') : String(key);
 };
 
@@ -55,6 +55,7 @@ const checkedColumnsOptions = computed<
       );
       const label = String(
         item.label ??
+          (item as any).title ??
           item.prop ??
           t('table.columnFallback', { index: index + 1 })
       );

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

@@ -220,22 +220,6 @@ const computedTableContainer = computed(() => {
 
 const normalizedRawColumns = computed(() => {
   const source = (columns ?? tableColumns?.value ?? []) as any[];
-
-  const normalized = source.map((item, index) => {
-    const current: any = { ...item };
-    if (current.label === undefined && current.title !== undefined) {
-      current.label = current.title;
-    }
-    if (current.key === undefined) {
-      current.key =
-        current.prop ??
-        (typeof current.columnKey === 'string'
-          ? current.columnKey
-          : undefined) ??
-        `col-${index}`;
-    }
-    return current;
-  });
   if (addIndexColumn ?? injectProps.addIndexColumn) {
     return [
       {
@@ -244,10 +228,10 @@ const normalizedRawColumns = computed(() => {
         label: t('table.index'),
         width: 80,
       },
-      ...normalized,
+      ...source,
     ];
   }
-  return normalized;
+  return source;
 });
 
 const computedDataSource = computed<any[]>(() => {
@@ -336,11 +320,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    class="pro-table"
-    :class="($attrs as any).class"
-    :style="($attrs as any).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/components/table/components/TableColumnRenderer.vue

@@ -17,7 +17,7 @@ const { columns } = defineProps<Props>();
 
 const getColumnKey = (column: Column<D>, index: number) => {
   const key = column.key ?? column.prop;
-  if (key === undefined || key === null) return `__idx_${index}`;
+  if (key === undefined || key === null) return `__col_${index}`;
   return Array.isArray(key) ? key.join('.') : String(key);
 };
 
@@ -33,10 +33,11 @@ const normalizedColumns = computed(() => {
 
 const getColumnProps = (column: Column<D>) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { hidden, render, key, ...rest } = column;
+  const { hidden, render, key, children, ...rest } = column;
   const prop = column.prop ? String(column.prop) : undefined;
   return {
     ...rest,
+    label: column.label ?? (column as any).title,
     prop,
     columnKey: key ? String(key) : prop,
   };
@@ -48,20 +49,33 @@ const getColumnProps = (column: Column<D>) => {
     v-for="(column, index) in normalizedColumns"
     :key="getColumnKey(column, index)"
   >
-    <TableColumn v-bind="getColumnProps(column)">
+    <!-- 分组列（递归子列） -->
+    <TableColumn
+      v-if="column.children && column.children.length > 0"
+      v-bind="getColumnProps(column)"
+    >
+      <TableColumnRenderer :columns="column.children" />
+    </TableColumn>
+
+    <!-- 自定义 render 列 -->
+    <TableColumn
+      v-else-if="typeof column.render === 'function'"
+      v-bind="getColumnProps(column)"
+    >
       <template #default="scope">
-        <template v-if="typeof column.render === 'function'">
-          <component
-            :is="
-              column.render?.({
-                ...scope,
-                column,
-                cellValue: getCellValue(scope.row, column),
-              })
-            "
-          />
-        </template>
+        <component
+          :is="
+            column.render?.({
+              ...scope,
+              column,
+              cellValue: getCellValue(scope.row, column),
+            })
+          "
+        />
       </template>
     </TableColumn>
+
+    <!-- 普通列（Element Plus 原生渲染） -->
+    <TableColumn v-else v-bind="getColumnProps(column)" />
   </template>
 </template>

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

@@ -60,6 +60,8 @@ export type Column<D extends Data = Data> = Partial<
   hidden?: boolean;
   /** 自定义渲染函数 */
   render?: BivariantRender<D>;
+  /** 嵌套子列（用于表头分组） */
+  children?: Column<D>[];
 };
 
 /**

package/src/components/table/useTable.ts

@@ -132,16 +132,7 @@ export function useTable<
   const coreTable = (coreUseTable as any)({
     ...rest,
     dataSource: data,
-    // 补齐列 key（key ?? prop ?? columnKey），
-    // 使 setColumn 等按 key 匹配的 API 对 Element Plus 的 prop 列生效
-    columns: columns?.map(column => {
-      if (column.key !== undefined && column.key !== null) return column;
-      const prop = column.prop;
-      const fallback =
-        prop ??
-        (typeof column.columnKey === 'string' ? column.columnKey : undefined);
-      return { ...column, key: fallback };
-    }),
+    columns,
   }) as _Table<D, T, Column<T>>;
 
   const { dataSource, ...tableWithoutDataSource } = coreTable as any;

package/src/shared/core/index.ts

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