@qin-ui/element-plus-pro 1.3.0 → 1.3.1

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

@@ -83,6 +83,9 @@ defineOptions({
   inheritAttrs: false,
 });
 
+const tableProperties = Object.keys(tableProps());
+const paginationProperties = Object.keys(paginationProps());
+
 type Control = {
   sizeControl: boolean;
   columnControl: boolean | ColumnControlConfig<Path<RecordType>>;
@@ -137,9 +140,6 @@ const config = INJECT_CONFIG['pro-table'];
 const injectPropsRaw = inject(config.injectionKey, config.default);
 const injectProps = computed(() => toValue(injectPropsRaw) || {});
 
-const tableProperties = Object.keys(tableProps());
-const paginationProperties = Object.keys(paginationProps());
-
 const attrs = useAttrs() as Record<string, any>;
 
 const injectTableAttrs = computed(() => {
@@ -156,14 +156,17 @@ const attrsTableProps = computed(() => {
 const size = defineModel<TableProps['size']>('size');
 const loading = defineModel<boolean>('loading', { default: false });
 
-// 核心搜索方法：设置 loading 状态，调用外部 search 函数
+// 递增序号做请求竞态守卫，仅最新一次请求可变更 loading
+let searchSequence = 0;
 const _search = async () => {
+  const seq = ++searchSequence;
   const searchPromise = (props.search || attrs.onSearch)?.();
-  if (isPromise(searchPromise)) {
-    loading.value = true;
-    try {
-      await searchPromise;
-    } finally {
+  if (!isPromise(searchPromise)) return;
+  loading.value = true;
+  try {
+    await searchPromise;
+  } finally {
+    if (seq === searchSequence) {
       loading.value = false;
     }
   }
@@ -177,29 +180,21 @@ const reset = () => {
   });
 };
 
+const customSlotNames = [
+  'search-form',
+  'button-bar',
+  'toolbar',
+  'table',
+] as const;
+
 type CustomSlots = Readonly<
-  Partial<Record<'search-form' | 'button-bar' | 'toolbar' | 'table', Slot>>
+  Partial<Record<(typeof customSlotNames)[number], Slot>>
 >;
-
 type Slots = CustomSlots & Readonly<Record<string, Slot>>;
 
 const slots = useSlots() as Slots;
-const searchFormSlot = slots['search-form'];
-const buttonBarSlot = slots['button-bar'];
-const toolbarSlot = slots['toolbar'];
-
-const tableSlots = computed(() => {
-  const customNames = new Set([
-    'search-form',
-    'button-bar',
-    'toolbar',
-    'table',
-  ]);
-  return Object.fromEntries(
-    Object.entries(slots).filter(([name]) => !customNames.has(name))
-  ) as Record<string, Slot>;
-});
-const tableSlotNames = computed(() => Object.keys(tableSlots.value));
+const forwardedSlotNames = () =>
+  Object.keys(slots).filter(name => !customSlotNames.includes(name as any));
 
 const searchPage1st = () => {
   props.table?.setPageParam?.({ current: 1 });
@@ -328,15 +323,14 @@ const onPaginationChange = (currentPage: number, pageSize: number) => {
   attrs.onChange?.(currentPage, pageSize);
 };
 
-const showSearch = computed(() => {
+const searchFormVisible = computed(() => {
   const searchFields = props.table?.searchForm?.fields;
   const fieldList =
     (Array.isArray(searchFields) ? searchFields : searchFields?.value) ?? [];
   return !!(
-    searchFormSlot ||
-    ((computedSearchFormConfig.value as any)?.hidden !== true &&
-      props.table?.searchForm &&
-      fieldList.filter((item: any) => !item.hidden)?.length > 0)
+    (computedSearchFormConfig.value as any)?.hidden !== true &&
+    props.table?.searchForm &&
+    fieldList.filter((item: any) => !toValue(item.hidden))?.length > 0
   );
 });
 
@@ -372,12 +366,17 @@ onMounted(() => {
     _search();
   }
 });
+
+defineExpose({
+  /** 手动触发一次查询（与内部搜索共用 loading 竞态守卫），便于外部刷新列表 */
+  search: _search,
+});
 </script>
 
 <template>
   <div class="pro-table" :class="attrs.class" :style="attrs.style">
     <ContainerFragment
-      v-if="showSearch"
+      v-if="searchFormVisible || $slots['search-form']"
       :component="computedSearchFormConfig.container"
     >
       <slot name="search-form">
@@ -393,10 +392,10 @@ onMounted(() => {
 
     <ContainerFragment :component="computedTableContainer">
       <div class="pro-table_header">
-        <div v-if="buttonBarSlot" class="pro-table_header_button-bar">
+        <div v-if="$slots['button-bar']" class="pro-table_header_button-bar">
           <slot name="button-bar" />
         </div>
-        <div v-if="toolbarSlot" class="pro-table_header_toolbar">
+        <div v-if="$slots['toolbar']" class="pro-table_header_toolbar">
           <slot name="toolbar" />
         </div>
         <div
@@ -428,7 +427,11 @@ onMounted(() => {
           :data="computedDataSource"
         >
           <TableColumnRenderer :columns="normalizedRawColumns" />
-          <template v-for="name in tableSlotNames" :key="name" #[name]="scoped">
+          <template
+            v-for="name in forwardedSlotNames()"
+            :key="name"
+            #[name]="scoped"
+          >
             <slot :name="name" v-bind="scoped" />
           </template>
         </ElTable>

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

@@ -60,10 +60,6 @@ import { Space, Button, FormProps } from '../../../shared/ui';
 import {
   AllowedComponentProps,
   computed,
-  ref,
-  watch,
-  watchEffect,
-  onBeforeUnmount,
   type Component,
   type DefineComponent,
 } from 'vue';
@@ -71,6 +67,7 @@ import ProForm from '../../form';
 import { type Form } from '../../form';
 import DownOutlined from './icons/DownOutlined.vue';
 import { useLocale } from '../../../locale';
+import { useSearchFormExpand } from '../../../shared/core';
 
 defineOptions({ name: 'SearchForm' });
 
@@ -93,185 +90,10 @@ type Emits = {
 };
 const emit = defineEmits<Emits>();
 
-const proFormHeight = ref<'unset' | number>('unset');
-const collapseHeight = ref(0);
-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 (!props.expand) return false;
-  if (props.expand === true) return { minExpandRows: 2, expandStatus: false };
-  return {
-    minExpandRows: Math.max(Math.floor(props.expand.minExpandRows ?? 2), 1),
-    expandStatus: props.expand.expandStatus ?? false,
-  };
-});
-
-const showExpandToggle = ref(false);
-
-const expandStatus = ref(true);
-
-const updateHeights = () => {
-  if (!props.expand || !props.form?.formRef?.value) return;
-  const proFormEl = (props.form.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 isManualToggle = ref(false);
-
-const changeExpandStatus = () => {
-  isManualToggle.value = true;
-  expandStatus.value = !expandStatus.value;
-};
-
-const hasFieldValue = (val: any) =>
-  val !== null &&
-  val !== undefined &&
-  val !== '' &&
-  !(Array.isArray(val) && val.length === 0) &&
-  !(typeof val === 'object' && Object.keys(val).length === 0);
-
-/*
- * 使用 IntersectionObserver 检测折叠状态下隐藏字段是否有值
- * 如果有值则自动展开，让用户看到已填写的搜索条件
- */
-const setInitExpandStatus = () => {
-  if (isManualToggle.value) return;
-  const initStatus = computedExpand.value
-    ? computedExpand.value.expandStatus
-    : false;
-  expandStatus.value = initStatus;
-  if (props.form?.formRef?.value && computedExpand.value) {
-    const formEl = (props.form.formRef.value as any).$el;
-    const formItemsEl = formEl?.querySelectorAll?.(
-      "[class*='-form-item'] [path]"
-    );
-    if (!formItemsEl || formItemsEl.length === 0) return;
-    if (intersectionObserver) {
-      intersectionObserver.disconnect();
-    }
-    intersectionObserver = new IntersectionObserver(
-      entries => {
-        if (isManualToggle.value) return;
-        expandStatus.value = entries.some(e => {
-          // 如果隐藏字段（intersectionRatio === 0）有值，则自动展开
-          if (e.intersectionRatio === 0) {
-            const path = e.target.getAttribute('path');
-            const searchFieldValue = path
-              ? props.form?.getFormData?.(path)
-              : undefined;
-            return hasFieldValue(searchFieldValue);
-          }
-          return computedExpand.value
-            ? computedExpand.value.expandStatus
-            : false;
-        });
-        intersectionObserver?.disconnect();
-      },
-      { root: formEl }
-    );
-    formItemsEl.forEach((element: Element) => {
-      intersectionObserver?.observe(element);
-    });
-  }
-};
-
-watch(
-  [
-    () => props.form?.fields.value?.filter((f: any) => !f.hidden)?.length,
-    () => props.form?.formRef?.value,
-    () => props.expand,
-  ],
-  () => {
-    updateHeights();
-  },
-  { flush: 'post', immediate: true }
-);
-
-watch(
-  () => props.form?.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) * 行间距
- * 如果实际高度与折叠高度差异 > 1px，说明有字段溢出，显示展开按钮
- */
-watchEffect(
-  () => {
-    if (typeof proFormHeight.value !== 'number') return;
-    if (props.layout === 'grid' && computedExpand.value) {
-      const { minExpandRows } = computedExpand.value;
-      collapseHeight.value = Math.min(
-        minExpandRows * rowHeight.value + (minExpandRows - 1) * props.rowGap,
-        +proFormHeight.value
-      );
-      showExpandToggle.value = +proFormHeight.value - collapseHeight.value > 1;
-      if (showExpandToggle.value) {
-        setInitExpandStatus();
-      }
-    } else {
-      showExpandToggle.value = false;
-    }
-  },
-  { flush: 'post' }
-);
+const { showExpandToggle, expandStatus, changeExpandStatus, heightStyle } =
+  useSearchFormExpand(props);
 
 const layoutProps = computed(() => {
-  const currentHeight = expandStatus.value
-    ? proFormHeight.value
-    : collapseHeight.value;
-  const heightStyle =
-    currentHeight !== 'unset' && currentHeight !== undefined
-      ? `${currentHeight}px`
-      : undefined;
-
   return props.layout === 'grid'
     ? {
         grid: {
@@ -282,7 +104,7 @@ const layoutProps = computed(() => {
           display: 'flex',
           overflow: 'hidden',
           columnGap: `${props.columnGap}px`,
-          height: heightStyle,
+          height: heightStyle.value,
         },
       }
     : {

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

@@ -5,6 +5,7 @@
 >
 import { get, normalizePathKey } from '../../../shared/core';
 import { TableColumn } from '../../../shared/ui';
+import { SlotComponent } from '../../form';
 import type { Column, Columns } from '../types';
 import { computed } from 'vue';
 
@@ -66,8 +67,9 @@ const getColumnProps = (column: Column<D>) => {
       v-bind="getColumnProps(column)"
     >
       <template #default="scope">
-        <component
-          :is="
+        <!-- 经 SlotComponent 渲染：支持组件、VNode 与文本等多种形态 -->
+        <SlotComponent
+          :component="
             column.render?.({
               ...scope,
               column,

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

@@ -80,6 +80,7 @@ export type Columns<D extends Data = Data> = Array<Column<D>>;
  * @example
  * ```ts
  * const config: ColumnControlConfig<'name' | 'age'> = {
+ *   labels: { name: '姓名', age: '年龄' },
  *   excludedKeys: [],
  *   disabledKeys: ['name'],
  *   disableCheckAll: false,
@@ -87,6 +88,8 @@ export type Columns<D extends Data = Data> = Array<Column<D>>;
  * ```
  */
 export type ColumnControlConfig<K extends string | number = string | number> = {
+  /** 列在下拉中的自定义显示名称映射（key 为列标识），用于定制展示文案或覆盖非字符串标题 */
+  labels?: Partial<Record<K, string>>;
   /** 不在下拉中出现的列 keys（始终展示，不参与勾选） */
   excludedKeys?: K[];
   /** 在下拉中显示但不可取消勾选的列 keys（始终展示，始终勾选） */

package/src/locale/en-US.ts

@@ -4,7 +4,7 @@
  * @description Extends the core language pack with element-plus specific
  * date/time picker placeholder texts.
  */
-import { enUS } from '@qin-ui/pro-components-core';
+import { enUS } from '../shared/core';
 
 export default {
   ...enUS,

package/src/locale/index.ts

@@ -13,11 +13,7 @@ import {
   type MaybeRef,
 } from 'vue';
 import { useLocale as useElLocale, localeContextKey } from 'element-plus';
-import {
-  format,
-  resolveLocaleName,
-  type ProLocaleName,
-} from '@qin-ui/pro-components-core';
+import { format, resolveLocaleName, type ProLocaleName } from '../shared/core';
 import zhCN from './zh-CN';
 import zhTW from './zh-TW';
 import enUS from './en-US';

package/src/locale/zh-CN.ts

@@ -4,7 +4,7 @@
  * @description 在 core 通用语言包基础上，扩展 element-plus 特有的
  * 日期/时间组件占位符文案。
  */
-import { zhCN } from '@qin-ui/pro-components-core';
+import { zhCN } from '../shared/core';
 
 export default {
   ...zhCN,

package/src/locale/zh-TW.ts

@@ -4,7 +4,7 @@
  * @description 在 core 通用語言包基礎上，擴展 element-plus 特有的
  * 日期/時間元件佔位符文案。
  */
-import { zhTW } from '@qin-ui/pro-components-core';
+import { zhTW } from '../shared/core';
 
 export default {
   ...zhTW,

package/src/shared/core/index.ts

@@ -5,7 +5,9 @@
 export {
   // hooks
   useForm,
+  createFormProxy,
   useTable,
+  useSearchFormExpand,
   useFields,
   useFormData,
   useFormRef,
@@ -23,6 +25,15 @@ export {
   pick,
   isPlainObject,
   isPromise,
+  // locale
+  zhCN,
+  zhTW,
+  enUS,
+  format,
+  resolveLocaleName,
+  type ProLocale,
+  type ProLocaleName,
+  type ProLocaleKey,
   // types
   type Data,
   type Path,

package/src/shared/ui/index.ts

@@ -79,10 +79,15 @@ export {
 
 export type TableProps = _TableProps<any>;
 
-export const tableProps = () => (Table as any).props || {};
-export const paginationProps = () => (Pagination as any).props || {};
-export const gridItemProps = () => (GridItem as any).props || {};
-export const formItemProps = () => (FormItem as any).props || {};
+const _tableProps = (Table as any).props || {};
+const _paginationProps = (Pagination as any).props || {};
+const _gridItemProps = (GridItem as any).props || {};
+const _formItemProps = (FormItem as any).props || {};
+
+export const tableProps = () => _tableProps;
+export const paginationProps = () => _paginationProps;
+export const gridItemProps = () => _gridItemProps;
+export const formItemProps = () => _formItemProps;
 
 const DisabledContextKey = Symbol.for('pro-form-disabled-context');