@qin-ui/element-plus-pro 1.3.4 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qin-ui/element-plus-pro",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "基于 element-plus 的二次封装组件",
   "bin": {
     "element-plus-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": {
@@ -39,7 +40,7 @@
   },
   "dependencies": {
     "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

@@ -7,11 +7,11 @@ import {
 } from '../../../shared/ui';
 import { ComponentName, GetComponentType } from '../../form/constants';
 import { Base, Grid, ContainerComponent } from '../../form/types';
-import { ProFormProps } from '../../form';
+import { ProFormProps } from '../../form/components';
 import type { SearchFormProps } from '../../table/components/SearchForm.vue';
 import { AllowedComponentProps } from 'vue';
 import type { ComponentProps } from 'vue-component-type-helpers';
-import { ColumnControlConfig } from 'src/components/table/types';
+import { ColumnControlConfig } from '../../table/types';
 
 type PP<T extends Record<string, any>> = Partial<T & AllowedComponentProps>;
 

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

@@ -39,7 +39,8 @@ import {
 import { cloneDeep } from '../../../../shared/core';
 import { useDisabledContext } 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,
@@ -49,6 +50,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 = {
@@ -113,7 +118,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);
     }
@@ -158,7 +163,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, [modelPropName]: _modelVal, [`onUpdate:${modelPropName}`]: onUpdateValue, ...bindAttrs } = mergedProps as any;
 
   return {
@@ -171,9 +175,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 注入的自定义组件映射
@@ -184,7 +188,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

@@ -31,10 +31,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 = {
@@ -73,13 +91,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;
@@ -92,10 +138,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;
@@ -112,7 +159,10 @@ const groupedFields = useGroupFieldAttrs(validFields);
     v-bind="computedGridProps"
     style="width: 100%"
   >
-    <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 ? ElGridItem : undefined"
         v-bind="item.gridItemProps"

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

@@ -29,16 +29,19 @@ import {
   FormProps as ElFormProps,
 } from '../../../../shared/ui';
 import {
+  computed,
   inject,
   mergeProps,
+  onUpdated,
   provide,
+  shallowRef,
   toValue,
-  type Slot,
-  computed,
+  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 {
@@ -63,12 +66,12 @@ const props = withDefaults(defineProps<Props>(), {
 
 /**
  * 依赖注入中心：
- * 若外部未传 form 实例，则自动初始化内部表单实例；
+ * 未传 form 实例（含运行期置空）时惰性初始化内部表单实例；
  * 将 Form 实例注入到 Vue Context 中，供深层子组件跨层级直接访问数据和方法。
  */
-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)
 );
 
 /**
@@ -93,6 +96,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);
   }
@@ -109,7 +113,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;
 });
@@ -125,11 +128,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

@@ -46,22 +46,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, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, ...rest } =
           field as any;
 
-        const {
-          class: injectClassName,
-          style: injectStyle,
-          span: injectSpan,
-          formItemContainer: injectFormItemContainer,
-          xs,
-          sm,
-          md,
-          lg,
-          xl,
-          ...injectRest
-        } = rawInjectProps;
+        // prettier-ignore
+        const { class: injectClassName, style: injectStyle, span: injectSpan, formItemContainer: injectFormItemContainer, xs, sm, md, lg, xl, ...injectRest } = rawInjectProps;
 
         // 字段显式 span 优先，否则回退注入配置的响应式断点
         const initGridItemProps =
@@ -69,7 +58,10 @@ export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
             ? { span }
             : { xs, sm, md, lg, xl, span: injectSpan };
 
-        gridItemProps = fields ? { span: span ?? 24 } : initGridItemProps;
+        // 分组字段默认整行（span 兜底 24），注入断点同样生效
+        gridItemProps = fields
+          ? { ...initGridItemProps, span: span ?? 24 }
+          : initGridItemProps;
         formItemProps = mergeProps(
           injectRest as any,
           { class: injectClassName, style: injectStyle },

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

@@ -91,10 +91,12 @@ const checkedColumnKeys = computed({
     );
   },
   set(val: string[]) {
+    // 仅写 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 as any, {
-        hidden: !val.includes(item.value),
+        hidden: !checkedSet.has(item.value),
       });
     });
   },

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

@@ -53,7 +53,7 @@ import {
   useSlots,
 } 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 type { SearchFormProps } from './SearchForm.vue';
@@ -67,12 +67,10 @@ import {
   isPlainObject,
   Path,
 } from '../../../shared/core';
-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 type { Columns, ColumnControlConfig } from '../types';
 import TableColumnRenderer from './TableColumnRenderer.vue';
 
@@ -201,10 +199,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;
@@ -294,13 +308,7 @@ const normalizedRawColumns = computed(() => {
 
 const computedDataSource = computed<any[]>(() => {
   const attrsData = attrsTableProps.value.data as any[] | undefined;
-  return (
-    props.data ??
-    attrsData ??
-    toValue((props.table as any)?.dataSource) ??
-    toValue(props.table?.data) ??
-    []
-  );
+  return props.data ?? attrsData ?? toValue(props.table?.data) ?? [];
 });
 
 const computedTableProps = computed<TableProps>(() => {

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';
@@ -122,6 +122,7 @@ const onReset = () => {
   emit('reset');
 };
 
+// 查询按钮为 native-type=submit：点击与回车统一经表单 submit 事件触发
 const onSearch = () => {
   emit('search');
 };
@@ -132,6 +133,7 @@ const onSearch = () => {
     v-bind="layoutProps"
     :form="props.form"
     class="pro-table_search-form transition"
+    @submit.prevent="onSearch"
   >
     <Space alignment="start" class="pro-table_search-form_button-group">
       <slot name="reset-button" :on-reset="onReset">
@@ -162,7 +164,6 @@ const onSearch = () => {
             class="pro-table_search-form_search-button"
             type="primary"
             native-type="submit"
-            @click="onSearch"
           >
             {{ t('table.query') }}
           </Button>

package/src/components/table/components/TableColumnRenderer.vue

@@ -5,9 +5,9 @@
 >
 import { get, normalizePathKey } from '../../../shared/core';
 import { TableColumn } from '../../../shared/ui';
-import { SlotComponent } from '../../form';
+import SlotComponent from '../../form/components/SlotComponent/index.vue';
 import type { Column, Columns } from '../types';
-import { computed } from 'vue';
+import { computed, toRaw } from 'vue';
 
 defineOptions({ name: 'TableColumnRenderer' });
 
@@ -18,9 +18,26 @@ const props = withDefaults(defineProps<Props>(), {
   columns: () => [],
 });
 
-const getColumnKey = (column: Column<D>, index: number) => {
+/*
+ * 无 key/prop 列的稳定渲染 key：以列原始对象为 key 分配自增 id，
+ * 列插删/重排/过滤时保持 key 与对象绑定，不随数组位置漂移
+ */
+let columnKeySeed = 0;
+const columnKeyMap = new WeakMap<object, number>();
+const getStableColumnKey = (column: unknown): number => {
+  const raw = toRaw(column as object);
+  let key = columnKeyMap.get(raw);
+  if (key === undefined) {
+    key = ++columnKeySeed;
+    columnKeyMap.set(raw, key);
+  }
+  return key;
+};
+
+const getColumnKey = (column: Column<D>) => {
   const rawKey = column.key ?? column.prop;
-  if (rawKey === undefined || rawKey === null) return `__col_${index}`;
+  if (rawKey === undefined || rawKey === null)
+    return getStableColumnKey(column);
   return normalizePathKey(rawKey);
 };
 
@@ -35,7 +52,6 @@ const normalizedColumns = computed(() => {
 });
 
 const getColumnProps = (column: Column<D>) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { hidden, render, key, children, ...rest } = column;
   const prop = column.prop ? normalizePathKey(column.prop) : undefined;
   const columnKey = key ? normalizePathKey(key) : prop;
@@ -49,10 +65,7 @@ const getColumnProps = (column: Column<D>) => {
 </script>
 
 <template>
-  <template
-    v-for="(column, index) in normalizedColumns"
-    :key="getColumnKey(column, index)"
-  >
+  <template v-for="column in normalizedColumns" :key="getColumnKey(column)">
     <!-- 分组列（递归子列） -->
     <TableColumn
       v-if="column.children && column.children.length > 0"

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": ["element-plus/global"],
+    "declaration": true,
+    "declarationMap": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true
+  },
+  "include": ["src", "__tests__"],
+  "exclude": ["node_modules", "es"]
+}