@aspire-ui/element-component-pro 1.0.13 → 1.0.15

package/dist/style.css

@@ -1 +1 @@
-.ecp-pro-table[data-v-c5638c20]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-c5638c20] .el-table{width:100%!important}.ecp-pro-table__header[data-v-c5638c20]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-c5638c20]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-c5638c20]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-c5638c20]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-c5638c20]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-c5638c20]{width:100%}.ecp-pro-table__pagination[data-v-c5638c20]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-c5638c20]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-45a58e7c],.ecp-table-action__item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-45a58e7c]{margin-right:4px}.ecp-table-action__more[data-v-45a58e7c]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-tree-select[data-v-f30bba11]{position:relative;width:100%}.ecp-tree-select__filter-inner[data-v-f30bba11]{margin-bottom:8px}.ecp-tree-select__dropdown[data-v-f30bba11]{position:absolute;top:100%;left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #dcdfe6;border-radius:4px;margin-top:4px;z-index:1000;padding:8px}.ecp-tree-select__loading[data-v-f30bba11]{padding:24px;text-align:center;color:#909399;font-size:14px}.ecp-pro-form-item__colon[data-v-d3466c67]{margin-right:2px}.ecp-pro-form-item__help-icon[data-v-d3466c67]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-d3466c67]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-d3466c67]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-d3466c67]:last-child{margin-bottom:0}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-bf70afca]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-bf70afca]{margin-bottom:16px}.ecp-pro-form_col[data-v-bf70afca]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-bf70afca]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-bf70afca]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-bf70afca]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}.ecp-pro-descriptions[data-v-7d6cd376]{width:100%;box-sizing:border-box}.ecp-pro-descriptions__header[data-v-7d6cd376]{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.ecp-pro-descriptions__title-wrap[data-v-7d6cd376]{display:flex;align-items:center;gap:6px}.ecp-pro-descriptions__title[data-v-7d6cd376]{font-size:16px;font-weight:600;color:#303133}.ecp-pro-descriptions__help[data-v-7d6cd376],.ecp-pro-descriptions__toggle[data-v-7d6cd376]{color:#909399}.ecp-pro-descriptions__toggle .el-icon-arrow-down[data-v-7d6cd376]{margin-left:4px;transition:transform .2s ease}.ecp-pro-descriptions__toggle .el-icon-arrow-down.is-expanded[data-v-7d6cd376]{transform:rotate(180deg)}.ecp-pro-descriptions__body[data-v-7d6cd376]{display:grid;border-top:1px solid #ebeef5;border-left:1px solid #ebeef5;overflow:hidden}.ecp-pro-descriptions__body.is-collapsed[data-v-7d6cd376]{overflow:hidden}.ecp-pro-descriptions__body[data-v-7d6cd376]:not(.is-bordered){border-top:0;border-left:0;gap:12px 16px}.ecp-pro-descriptions__item[data-v-7d6cd376]{display:flex;min-width:0;border-right:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__item[data-v-7d6cd376]{border-right:0;border-bottom:0}.ecp-pro-descriptions__label[data-v-7d6cd376],.ecp-pro-descriptions__content[data-v-7d6cd376]{min-width:0;box-sizing:border-box;word-break:break-word}.ecp-pro-descriptions__label[data-v-7d6cd376]{flex:0 0 120px;padding:12px 16px;color:#606266;background:#fafafa}.ecp-pro-descriptions__content[data-v-7d6cd376]{flex:1;padding:12px 16px;color:#303133;background:#fff}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__label[data-v-7d6cd376]{flex-basis:auto;padding:0;margin-right:8px;background:transparent;font-weight:500}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__content[data-v-7d6cd376]{padding:0;background:transparent}.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__label[data-v-7d6cd376],.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__content[data-v-7d6cd376]{padding-top:8px;padding-bottom:8px;font-size:13px}@media (max-width: 767px){.ecp-pro-descriptions__item[data-v-7d6cd376]{flex-direction:column}.ecp-pro-descriptions__label[data-v-7d6cd376]{flex-basis:auto}}
+.ecp-pro-table[data-v-f3d27813]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-f3d27813] .el-table{width:100%!important}.ecp-pro-table__header[data-v-f3d27813]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-f3d27813]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-f3d27813]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-f3d27813]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-f3d27813]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-f3d27813]{width:100%}.ecp-pro-table__pagination[data-v-f3d27813]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-f3d27813]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-45a58e7c],.ecp-table-action__item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-45a58e7c]{margin-right:4px}.ecp-table-action__more[data-v-45a58e7c]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-tree-select[data-v-f30bba11]{position:relative;width:100%}.ecp-tree-select__filter-inner[data-v-f30bba11]{margin-bottom:8px}.ecp-tree-select__dropdown[data-v-f30bba11]{position:absolute;top:100%;left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #dcdfe6;border-radius:4px;margin-top:4px;z-index:1000;padding:8px}.ecp-tree-select__loading[data-v-f30bba11]{padding:24px;text-align:center;color:#909399;font-size:14px}.ecp-pro-form-item__colon[data-v-48d7960b]{margin-right:2px}.ecp-pro-form-item__help-icon[data-v-48d7960b]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-48d7960b]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-48d7960b]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-48d7960b]:last-child{margin-bottom:0}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-7ee469dc]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-7ee469dc]{margin-bottom:16px}.ecp-pro-form_col[data-v-7ee469dc]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-7ee469dc]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-7ee469dc]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-7ee469dc]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}.ecp-pro-descriptions[data-v-656036f6]{width:100%;box-sizing:border-box}.ecp-pro-descriptions__header[data-v-656036f6]{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.ecp-pro-descriptions__title-wrap[data-v-656036f6]{display:flex;align-items:center;gap:6px}.ecp-pro-descriptions__title[data-v-656036f6]{font-size:16px;font-weight:600;color:#303133}.ecp-pro-descriptions__help[data-v-656036f6],.ecp-pro-descriptions__toggle[data-v-656036f6]{color:#909399}.ecp-pro-descriptions__toggle .el-icon-arrow-down[data-v-656036f6]{margin-left:4px;transition:transform .2s ease}.ecp-pro-descriptions__toggle .el-icon-arrow-down.is-expanded[data-v-656036f6]{transform:rotate(180deg)}.ecp-pro-descriptions__body[data-v-656036f6]{display:grid;border-top:1px solid #ebeef5;border-left:1px solid #ebeef5;overflow:hidden}.ecp-pro-descriptions__body.is-collapsed[data-v-656036f6]{overflow:hidden}.ecp-pro-descriptions__body[data-v-656036f6]:not(.is-bordered){border-top:0;border-left:0;gap:12px 16px}.ecp-pro-descriptions__item[data-v-656036f6]{display:flex;min-width:0;border-right:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__item[data-v-656036f6]{border-right:0;border-bottom:0}.ecp-pro-descriptions__label[data-v-656036f6],.ecp-pro-descriptions__content[data-v-656036f6]{min-width:0;box-sizing:border-box;word-break:break-word}.ecp-pro-descriptions__label[data-v-656036f6]{flex:0 0 120px;padding:12px 16px;color:#606266;background:#fafafa}.ecp-pro-descriptions__content[data-v-656036f6]{flex:1;padding:12px 16px;color:#303133;background:#fff}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__label[data-v-656036f6]{flex-basis:auto;padding:0;margin-right:8px;background:transparent;font-weight:500}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__content[data-v-656036f6]{padding:0;background:transparent}.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__label[data-v-656036f6],.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__content[data-v-656036f6]{padding-top:8px;padding-bottom:8px;font-size:13px}@media (max-width: 767px){.ecp-pro-descriptions__item[data-v-656036f6]{flex-direction:column}.ecp-pro-descriptions__label[data-v-656036f6]{flex-basis:auto}}.ecp-pro-table-form__form[data-v-44aa7592] .el-form-item{margin-bottom:0}.ecp-pro-table-form__cell-item[data-v-44aa7592]{width:100%}.ecp-pro-table-form__cell-item[data-v-44aa7592] .el-form-item__content{margin-left:0!important;line-height:normal}.ecp-pro-table-form__fixed-label[data-v-44aa7592]{color:#303133;font-size:14px}.ecp-pro-table-form__req[data-v-44aa7592]{color:#f56c6c;margin-right:2px}.ecp-pro-table-form__th-text[data-v-44aa7592]{font-weight:500;color:#606266}.ecp-pro-table-form__action-title[data-v-44aa7592]{margin-right:8px;font-size:13px;color:#606266}.ecp-pro-table-form__add-btn[data-v-44aa7592]{padding:0;font-size:14px}.ecp-pro-table-form__del-btn[data-v-44aa7592]{padding:0;color:#909399}.ecp-pro-table-form__del-btn[data-v-44aa7592]:not(:disabled){color:#409eff}.ecp-pro-table-form .ecp-pro-table-form__header-cell{background:#f5f7fa!important}

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import { VNode, ComponentPublicInstance } from 'vue';
 
 /** 栅格配置 */
 export interface ColEx {
@@ -28,6 +28,15 @@ export interface ScrollToFieldOptions {
     /** 行内对齐 */
     inline?: ScrollLogicalPosition;
 }
+/** ApiSelect 暴露的实例类型 */
+export interface ApiSelectInstance {
+    options: Array<{
+        label: string;
+        value: unknown;
+    }>;
+    loading: boolean;
+    fetchOptions: () => Promise<void>;
+}
 /** 表单操作类型（参考 Vben Admin FormActionType） */
 export interface FormActionType {
     getFieldsValue: () => Record<string, unknown>;
@@ -42,6 +51,15 @@ export interface FormActionType {
     appendSchemaByField: (schema: ProFormSchema, prefixField?: string, first?: boolean) => Promise<void>;
     removeSchemaByField: (field: string | string[]) => Promise<void>;
     setProps: (props: Partial<ProFormProps>) => Promise<void>;
+    /** 获取指定字段的组件实例 */
+    getComponentInstance: (field: string) => ComponentPublicInstance | null;
+    /** 获取 api-select 字段的 options */
+    getFieldOptions: (field: string) => Array<{
+        label: string;
+        value: unknown;
+    }>;
+    /** 获取 api-select 字段的加载状态 */
+    isFieldLoading: (field: string) => boolean;
 }
 /** 时间字段映射 [表单字段, [开始字段, 结束字段], 格式?] */
 export type FieldMapToTime = [string, [string, string], string?];
@@ -188,6 +206,7 @@ export interface DescriptionSchema {
 }
 /** Description Props */
 export interface DescriptionProps {
+    [key: string]: unknown;
     title?: string;
     helpMessage?: string | string[];
     size?: 'medium' | 'small';

package/dist/useComponentSetting.d.ts

@@ -1,12 +1,17 @@
 export interface UseComponentSettingReturn {
     /** 获取组件默认配置；不传参时返回全部组件的配置 */
-    getSetting: (componentName?: string) => Record<string, unknown>;
-    /** 设置组件默认配置（与已有配置浅合并） */
+    getSetting: <T extends Record<string, unknown> = Record<string, unknown>>(componentName?: string) => T;
+    /** 设置组件默认配置（与已有配置深度合并） */
     setSetting: (componentName: string, config: Record<string, unknown>) => void;
+    /** 合并组件配置：全局配置与组件 props 合并，返回合并后的结果 */
+    mergeSettings: <T extends Record<string, unknown> = Record<string, unknown>>(componentName: string, props: Record<string, unknown>) => T;
 }
 /**
  * 组件默认配置：供所有组件统一获取/设置默认配置
- * - getSetting：获取组件默认配置，用于初始化或合并 props
- * - setSetting：设置组件默认配置，可在应用入口或按需调用
+ * - getSetting：获取组件默认配置
+ * - setSetting：设置组件默认配置（深度合并），可在应用入口或按需调用
+ * - mergeSettings：合并全局配置与组件 props，props 优先级更高
+ *
+ * 合并优先级：组件默认值 < 全局配置 < 组件 props
  */
 export declare function useComponentSetting(): UseComponentSettingReturn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aspire-ui/element-component-pro",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "Element UI 二次封装组件库，基于 Vue 2.7 + TypeScript + setup 语法糖，实现 VbenAdmin 风格的 Pro 组件",
   "type": "module",
   "main": "./dist/element-component-pro.umd.js",

package/src/ProDescriptions/ProDescriptions.vue

@@ -181,8 +181,8 @@ const normalizeTooltip = (schema: DescriptionSchema, value: unknown, record: Rec
   return normalizeTooltipConfig(resolved, value)
 }
 
-const { getSetting } = useComponentSetting()
-const effectiveProps = computed(() => ({ ...getSetting('ProDescriptions'), ...props, ...innerProps.value }))
+const { mergeSettings } = useComponentSetting()
+const effectiveProps = computed(() => mergeSettings<DescriptionProps>('ProDescriptions', { ...props, ...innerProps.value }))
 
 const breakpoints = { xxl: 1920, xl: 1200, lg: 992, md: 768, sm: 576 }
 

package/src/ProForm/ApiSelect.vue

@@ -1,7 +1,6 @@
 <template>
-  <el-select :value="value" :placeholder="placeholder" :disabled="disabled" :loading="loading" :clearable="clearable"
-    :filterable="filterable" :multiple="multiple" v-bind="$attrs" @input="$emit('input', $event)"
-    @visible-change="onVisibleChange">
+  <el-select v-bind="{ ...$attrs, value: value, placeholder, disabled, loading, clearable, filterable, multiple }"
+    @input="$emit('input', $event)" @change="$emit('change', $event)" @visible-change="onVisibleChange">
     <el-option v-for="opt in options" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
   </el-select>
 </template>
@@ -31,13 +30,19 @@ const props = withDefaults(
   { labelField: 'label', valueField: 'value', lazy: false }
 )
 
-defineEmits<{ (e: 'input', value: unknown): void }>()
+defineEmits<{ (e: 'input', value: unknown): void; (e: 'change', value: unknown): void }>()
 
 const loading = ref(false)
 const options = ref<Array<{ label: string; value: unknown }>>([])
+const cachedParams = ref<string>('')
 
 const onVisibleChange = (visible: boolean) => {
-  if (props.lazy && visible) fetchOptions()
+  if (props.lazy && visible) {
+    const paramsKey = JSON.stringify(props.params ?? {})
+    if (paramsKey !== cachedParams.value || options.value.length === 0) {
+      fetchOptions()
+    }
+  }
 }
 
 const fetchOptions = async () => {
@@ -59,11 +64,18 @@ const fetchOptions = async () => {
         value: o[valueKey] ?? o.value,
       }
     })
+    cachedParams.value = JSON.stringify(props.params ?? {})
   } finally {
     loading.value = false
   }
 }
 
+defineExpose({
+  options,
+  loading,
+  fetchOptions,
+})
+
 onMounted(() => {
   if (!props.lazy) fetchOptions()
 })

package/src/ProForm/ProForm.vue

@@ -10,7 +10,8 @@
             :offset="schema.colProps?.offset ?? effectiveProps.baseColProps?.offset ?? 0" :data-field="schema.field">
             <ProFormItem :schema="schema" :form-model="currentFormModel" :form-disabled="effectiveProps.disabled"
               :auto-placeholder="effectiveProps.autoSetPlaceholder" :form-action-type="formActionRef" :colon="effectiveProps.colon"
-              :custom-components="formCustomComponents" :on-field-change="handleFieldChange">
+              :custom-components="formCustomComponents" :on-field-change="handleFieldChange"
+              :register-field-instance="registerFieldInstance">
               <template v-if="slots[getSlotName(schema)]">
                 <slot :name="getSlotName(schema)" :model="currentFormModel" :schema="schema" :field="schema.field"
                   :values="currentFormModel" />
@@ -57,10 +58,11 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, useSlots, onMounted, onUnmounted } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 import { useComponentSetting } from '../useComponentSetting'
 import ProFormItem from './ProFormItem.vue'
 import FormActions from './FormActions.vue'
-import type { ProFormSchema, ProFormProps, FormActionType, ColEx, ScrollToFieldOptions, FormListeners } from '../types'
+import type { ProFormSchema, ProFormProps, FormActionType, ColEx, ScrollToFieldOptions, FormListeners, ApiSelectInstance } from '../types'
 
 const props = withDefaults(
   defineProps<{
@@ -103,7 +105,7 @@ const props = withDefaults(
     autoSetPlaceholder: true,
     showSubmitButton: true,
     showResetButton: true,
-    submitButtonText: '提交',
+    submitButtonText: '查询',
     resetButtonText: '重置',
     submitButtonIcon: 'el-icon-search',
     resetButtonIcon: 'el-icon-refresh-left',
@@ -132,6 +134,8 @@ const formModel = ref<Record<string, unknown>>({})
 const formRules = ref<Record<string, unknown[]>>({})
 const innerSchemas = ref<ProFormSchema[]>([])
 const innerProps = ref<Partial<ProFormProps>>({})
+/** 字段名 -> 组件实例映射（用于获取 api-select 等组件的内部状态） */
+const fieldInstanceMap = ref<Map<string, ComponentPublicInstance>>(new Map())
 
 /** Element UI 栅格断点 (px) */
 const BREAKPOINTS = { xl: 1920, lg: 1200, md: 992, sm: 768 }
@@ -404,6 +408,39 @@ const setProps = async (formProps: Partial<ProFormProps>) => {
   }
 }
 
+/** 注册组件实例（供 ProFormItem 调用） */
+const registerFieldInstance = (field: string, instance: Record<string, unknown> | null) => {
+  if (instance) {
+    fieldInstanceMap.value.set(field, instance as unknown as ComponentPublicInstance)
+  } else {
+    fieldInstanceMap.value.delete(field)
+  }
+}
+
+/** 获取指定字段的组件实例 */
+const getComponentInstance = (field: string): ComponentPublicInstance | null => {
+  return fieldInstanceMap.value.get(field) ?? null
+}
+
+/** 获取 api-select 字段的 options */
+const getFieldOptions = (field: string): Array<{ label: string; value: unknown }> => {
+  const instance = fieldInstanceMap.value.get(field)
+  if (!instance) return []
+  const apiSelectInstance = instance as unknown as ApiSelectInstance
+  if (apiSelectInstance?.options) {
+    return apiSelectInstance.options
+  }
+  return []
+}
+
+/** 获取 api-select 字段的加载状态 */
+const isFieldLoading = (field: string): boolean => {
+  const instance = fieldInstanceMap.value.get(field)
+  if (!instance) return false
+  const apiSelectInstance = instance as unknown as ApiSelectInstance
+  return apiSelectInstance?.loading ?? false
+}
+
 const formActionRef: FormActionType = {
   getFieldsValue,
   setFieldsValue,
@@ -417,9 +454,15 @@ const formActionRef: FormActionType = {
   appendSchemaByField,
   removeSchemaByField,
   setProps,
+  getComponentInstance,
+  getFieldOptions,
+  isFieldLoading,
 }
 
-defineExpose(formActionRef)
+defineExpose({
+  ...formActionRef,
+  registerFieldInstance,
+})
 
 const syncSchemas = () => {
   innerSchemas.value = [...(props.schemas ?? [])]

package/src/ProForm/ProFormItem.vue

@@ -91,6 +91,7 @@
         </el-select>
         <ApiSelect
           v-else-if="schema.component === 'api-select'"
+          ref="apiSelectRef"
           :value="formModel[schema.field]"
           :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
           :disabled="effectiveDisabled"
@@ -178,7 +179,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useSlots, h } from 'vue'
+import { computed, useSlots, h, ref, onMounted, onUnmounted } from 'vue'
 import ApiSelect from './ApiSelect.vue'
 import FormattedNumberInput from './FormattedNumberInput.vue'
 import TreeSelect from './TreeSelect.vue'
@@ -201,8 +202,25 @@ const props = defineProps<{
   onFieldChange?: (field: string, value: unknown) => void
   /** 自定义组件映射（由 ProForm 传入） */
   customComponents?: Record<string, unknown>
+  /** 注册字段实例（由 ProForm 传入） */
+  registerFieldInstance?: (field: string, instance: Record<string, unknown> | null) => void
 }>()
 
+/** ApiSelect 组件实例 ref */
+const apiSelectRef = ref<Record<string, unknown> | null>(null)
+
+onMounted(() => {
+  if (props.schema.component === 'api-select') {
+    props.registerFieldInstance?.(props.schema.field, apiSelectRef.value)
+  }
+})
+
+onUnmounted(() => {
+  if (props.schema.component === 'api-select') {
+    props.registerFieldInstance?.(props.schema.field, null)
+  }
+})
+
 const slots = useSlots()
 
 const renderParams = computed<RenderCallbackParams>(() => ({

package/src/ProTable/ProTable.vue

@@ -208,6 +208,8 @@
         :page-sizes="pagination.pageSizes"
         :page-size="pagination.pageSize"
         :total="pagination.total"
+        :small="paginationSmall"
+        :background="paginationBackground"
         :layout="(effectiveProps.pagination && typeof effectiveProps.pagination === 'object' ? effectiveProps.pagination.layout : null) || 'total, sizes, prev, pager, next, jumper'"
         v-bind="(effectiveProps.pagination && typeof effectiveProps.pagination === 'object' && effectiveProps.pagination.props) || {}"
         @size-change="handleSizeChange"
@@ -301,7 +303,7 @@ const props = withDefaults(
     actionColumn?: Partial<ProColumn>
     rowSelection?: { type?: 'checkbox' | 'radio'; width?: number; fixed?: 'left' | 'right'; getCheckboxProps?: (r: Record<string, unknown>) => { disabled?: boolean }; getRadioProps?: (r: Record<string, unknown>) => { disabled?: boolean } }
     clearSelectOnPageChange?: boolean
-    pagination?: false | { pageSize?: number; pageSizes?: number[]; layout?: string; props?: Record<string, unknown> } | Record<string, unknown>
+    pagination?: false | { pageSize?: number; pageSizes?: number[]; layout?: string; small?: boolean; background?: boolean; props?: Record<string, unknown> } | Record<string, unknown>
     tableSetting?: { redo?: boolean; size?: boolean; setting?: boolean; fullScreen?: boolean }
     fetchSetting?: FetchSetting
     beforeFetch?: (params: Record<string, unknown>) => Record<string, unknown>
@@ -362,21 +364,50 @@ const innerProps = ref<Partial<ProTableProps>>({})
 const selectedRows = ref<Record<string, unknown>[]>([])
 const showPaginationRef = ref<boolean | null>(null)
 
+const { mergeSettings } = useComponentSetting()
+const effectiveProps = computed(() => mergeSettings<ProTableProps>('ProTable', { ...props, ...innerProps.value }))
+
+/** 从 effectiveProps.pagination 读取分页默认值（已通过深度合并） */
+const defaultPagination = computed(() => {
+  const paginationConfig = effectiveProps.value.pagination
+  if (paginationConfig && typeof paginationConfig === 'object') {
+    return {
+      pageSize: (paginationConfig as Record<string, unknown>).pageSize ?? 10,
+      pageSizes: ((paginationConfig as Record<string, unknown>).pageSizes as number[]) ?? [10, 20, 50, 100],
+    }
+  }
+  return { pageSize: 10, pageSizes: [10, 20, 50, 100] as number[] }
+})
+
 const pagination = ref({
   page: 1,
-  pageSize: (props.pagination && typeof props.pagination === 'object') ? (props.pagination.pageSize ?? 10) : 10,
-  pageSizes: (props.pagination && typeof props.pagination === 'object') ? (props.pagination.pageSizes ?? [10, 20, 50, 100]) : [10, 20, 50, 100],
+  pageSize: defaultPagination.value.pageSize,
+  pageSizes: defaultPagination.value.pageSizes,
   total: 0,
 })
 
-const { getSetting: getComponentSetting } = useComponentSetting()
-const effectiveProps = computed(() => ({ ...getComponentSetting('ProTable'), ...props, ...innerProps.value }))
 const showTitleBar = computed(() => !!effectiveProps.value.title || !!slots.tableTitle || !!slots.toolbar)
 const showPagination = computed(() => {
   if (showPaginationRef.value !== null) return showPaginationRef.value
   return !!props.pagination && typeof props.pagination === 'object'
 })
 
+/** 分页 small 属性：从 pagination 配置或全局设置中读取 */
+const paginationSmall = computed(() => {
+  if (effectiveProps.value.pagination && typeof effectiveProps.value.pagination === 'object') {
+    return !!(effectiveProps.value.pagination as Record<string, unknown>).small
+  }
+  return false
+})
+
+/** 分页 background 属性：从 pagination 配置或全局设置中读取 */
+const paginationBackground = computed(() => {
+  if (effectiveProps.value.pagination && typeof effectiveProps.value.pagination === 'object') {
+    return !!(effectiveProps.value.pagination as Record<string, unknown>).background
+  }
+  return false
+})
+
 const rowKeyField = computed(() => effectiveProps.value.rowKey || 'id')
 
 /** 选中行 key 集合（用于快速判断） */

package/src/ProTable/types/index.ts

@@ -82,6 +82,7 @@ export interface TreeProps {
 
 /** ProTable Props */
 export interface ProTableProps {
+  [key: string]: unknown
   columns?: ProColumn[]
   dataSource?: Record<string, unknown>[]
   api?: (params: Record<string, unknown>) => Promise<unknown>