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

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

@@ -37,6 +37,7 @@ import {
   type PaginationProps,
   Table as ElTable,
   type TableProps,
+  type TableEmits,
   tableProps,
   paginationProps,
 } from '../../../shared/ui';
@@ -52,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';
@@ -66,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';
 
@@ -119,7 +118,11 @@ type Props = {
   columns?: Columns<RecordType>;
   data?: RecordType[];
   pagination?: false | Partial<PaginationProps>;
-} & Omit<TableProps, 'data'>;
+} & /* @vue-ignore */ Omit<TableProps, 'data'>;
+
+type Emits = {} & /* @vue-ignore */ TableEmits<RecordType>;
+
+defineEmits<Emits>();
 
 const props = withDefaults(defineProps<Props>(), {
   table: undefined,
@@ -142,8 +145,36 @@ const injectProps = computed(() => toValue(injectPropsRaw) || {});
 
 const attrs = useAttrs() as Record<string, any>;
 
+const PRO_TABLE_EXCLUDED_ATTR_KEYS = new Set([
+  'class',
+  'style',
+  'onSearch',
+  'onChange',
+  'onUpdate:size',
+  'onUpdate:loading',
+  'data',
+  'columns',
+  'size',
+  'pagination',
+]);
+
+const PRO_TABLE_PROVIDER_KEYS = new Set([
+  'pagination',
+  'searchFormConfig',
+  'control',
+  'immediateSearch',
+  'addIndexColumn',
+  'tableContainer',
+]);
+
 const injectTableAttrs = computed(() => {
-  return pick(injectProps.value, tableProperties) as Partial<TableProps>;
+  const tableConfig: Record<string, any> = {};
+  for (const [key, value] of Object.entries(injectProps.value)) {
+    if (!PRO_TABLE_PROVIDER_KEYS.has(key)) {
+      tableConfig[key] = value;
+    }
+  }
+  return tableConfig as Partial<TableProps>;
 });
 
 const attrsTableProps = computed(() => {
@@ -153,15 +184,41 @@ const attrsTableProps = computed(() => {
   ) as Partial<TableProps>;
 });
 
+const restTableAttrs = computed(() => {
+  const rest: Record<string, any> = {};
+  for (const [key, value] of Object.entries(attrs)) {
+    if (!PRO_TABLE_EXCLUDED_ATTR_KEYS.has(key)) {
+      rest[key] = value;
+    }
+  }
+  return rest;
+});
+
 const size = defineModel<TableProps['size']>('size');
 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;
@@ -251,21 +308,19 @@ 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>(() => {
   const merged = {
     ...injectTableAttrs.value,
+    ...restTableAttrs.value,
     ...attrsTableProps.value,
   } as TableProps;
   delete (merged as any).data;
+  delete (merged as any).columns;
+  delete (merged as any).size;
+  delete (merged as any).pagination;
   return merged;
 });
 
@@ -313,6 +368,7 @@ const onCurrentChange = (current: number) => {
   _search();
 };
 
+// 改变 pageSize 时重置回第 1 页并重新查询
 const onSizeChange = (pageSize: number) => {
   props.table?.setPageParam?.({ pageSize, current: 1 });
   _search();

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

@@ -46,7 +46,7 @@ export type SearchFormProps = {
  *
  * 1. 内部渲染 ProForm，使用 table.searchForm 管理搜索条件
  * 2. 支持 grid（网格）和 inline（行内）两种布局
- * 3. 网格布局下支持展开/折叠：通过 IntersectionObserver 自动检测哪些字段溢出
+ * 3. 网格布局下支持展开/折叠（溢出检测与初值自动展开见下方机制说明）
  * 4. 提供搜索、重置、展开/折叠按钮（支持自定义）
  *
  * ## 展开/折叠机制
@@ -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/src/components/table/index.ts

@@ -1,38 +1,18 @@
-import type { ComponentPublicInstance } from 'vue';
-import type { PaginationProps, TableProps } from '../../shared/ui';
-import type { ContainerComponent } from '../form/types';
-import type { Columns } from './types';
-import type { SearchFormProps } from './components/SearchForm.vue';
-import type { Table } from './useTable';
+import type {
+  ComponentExposed,
+  ComponentProps,
+} from 'vue-component-type-helpers';
 import ProTable from './components/ProTable.vue';
 
-type Control = { sizeControl: boolean; columnControl: boolean };
-type SearchFormConfig = Omit<SearchFormProps, 'form'> & {
-  hidden?: boolean;
-  container?: ContainerComponent | false;
-};
+// 仅导出组件 Props 与实例类型，不导出裸组件
+export type ProTableProps = ComponentProps<typeof ProTable>;
+export type ProTableInstance = ComponentExposed<typeof ProTable>;
 
-type ReturnTableRecord<V> = V extends Table<any, infer R> ? R : any;
-
-// instance
-export type ProTableProps<T extends Table<any> = Table> = {
-  table?: T;
-  search?: () => Promise<unknown>;
-  addIndexColumn?: boolean;
-  immediateSearch?: boolean;
-  control?: boolean | Partial<Control>;
-  searchFormConfig?: SearchFormConfig;
-  tableContainer?: ContainerComponent | false;
-  columns?: Columns<ReturnTableRecord<T>>;
-  data?: ReturnTableRecord<T>[];
-  pagination?: false | Partial<PaginationProps>;
-} & Omit<TableProps, 'data'>;
-export type ProTableInstance = ComponentPublicInstance;
-
-// types
+// 仅导出核心列配置类型
 export { type Column, type Columns } from './types';
+export { type TableEmits } from '../../shared/ui';
 
-// hooks
+// 仅导出核心表格 Hook 与类型
 export { useTable, type Table } from './useTable';
 
 export default ProTable;

package/src/components/table/useTable.ts

@@ -31,7 +31,7 @@ import type { Ref } from 'vue';
  * @property appendColumn - 在指定列后追加新列，传 undefined 在末尾追加
  * @property prependColumn - 在指定列前插入新列，传 undefined 在开头插入
  * @property setPageParam - 设置分页参数，支持部分更新和函数式更新
- * @property resetQueryParams - 重置分页到第一页并恢复搜索条件到初始值
+ * @property resetQueryParams - 恢复分页与搜索条件到初始化时的快照（含自定义分页键，非固定回到第一页）
  *
  * @example
  * ```ts

package/src/shared/core/index.ts

@@ -1,6 +1,5 @@
 /**
- * 统一 re-export @qin-ui/pro-components-core，包内所有文件通过此文件引入 core 内容，
- * 避免直接散列依赖 @qin-ui/pro-components-core，便于将来统一维护。
+ * 统一 re-export @qin-ui/pro-components-core，包内所有文件通过此文件引入 core 内容。
  */
 export {
   // hooks

package/src/shared/ui/index.ts

@@ -32,6 +32,7 @@ import {
   type FormProps,
   type FormItemProps,
   type TableProps as _TableProps,
+  type TableEmits,
   type TableColumnCtx as ColumnType,
   type PaginationProps,
   type RowProps as GridProps,
@@ -75,6 +76,7 @@ export {
   type GridProps,
   type GridItemProps,
   type ColumnType,
+  type TableEmits,
 };
 
 export type TableProps = _TableProps<any>;

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"]
+}