@aspire-ui/element-component-pro 1.0.2 → 1.0.3

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-1b2d6c42],.ecp-table-action__item[data-v-1b2d6c42]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-1b2d6c42]{margin-right:4px}.ecp-table-action__more[data-v-1b2d6c42]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-1b2d6c42]{display:inline-flex;align-items:center;gap:4px}.ecp-pro-form-item__help-icon[data-v-cfc968c5]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-cfc968c5]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-cfc968c5]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-cfc968c5]: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-140fc052]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-140fc052]{margin-bottom:16px}.ecp-pro-form_col[data-v-140fc052]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-140fc052]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-140fc052]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-140fc052]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}
+.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-1b2d6c42],.ecp-table-action__item[data-v-1b2d6c42]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-1b2d6c42]{margin-right:4px}.ecp-table-action__more[data-v-1b2d6c42]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-1b2d6c42]{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__help-icon[data-v-0dcbe9b0]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-0dcbe9b0]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-0dcbe9b0]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-0dcbe9b0]: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-4ee1cb87]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-4ee1cb87]{margin-bottom:16px}.ecp-pro-form_col[data-v-4ee1cb87]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-4ee1cb87]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-4ee1cb87]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-4ee1cb87]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}

package/dist/types/index.d.ts

@@ -72,15 +72,26 @@ export interface ProFormProps {
     fieldMapToTime?: FieldMapToTime[];
     /** 透传给 el-form 的事件监听器 */
     formListeners?: FormListeners;
+    /** 自定义组件映射（组件名 -> 组件定义），供 schema.component 使用 */
+    components?: Record<string, unknown>;
 }
+/** ProForm 内置表单项组件类型 */
+export type ProFormBuiltInComponent = 'input' | 'select' | 'api-select' | 'tree-select' | 'date-picker' | 'date-range' | 'input-number' | 'switch' | 'cascader' | 'checkbox' | 'radio';
+/** 自定义组件：组件名（string）或 Vue 组件选项/构造函数（object | Function） */
+export type ProFormCustomComponent = string | object | ((...args: unknown[]) => unknown);
 /** ProForm 表单项配置 */
 export interface ProFormSchema {
     /** 字段名 */
     field: string;
     /** 标签 */
     label: string;
-    /** 组件类型 */
-    component?: 'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'switch' | 'cascader' | 'checkbox' | 'radio';
+    /**
+     * 组件类型：
+     * - 内置：'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'switch' | 'cascader' | 'checkbox' | 'radio'
+     * - 自定义组件名：任意字符串，对应全局或 ProForm 传入的 components 中注册的组件
+     * - 内联组件：直接传入 Vue 组件选项对象或构造函数
+     */
+    component?: ProFormBuiltInComponent | ProFormCustomComponent;
     /** 组件属性，支持函数 */
     componentProps?: Record<string, unknown> | ((params: RenderCallbackParams & {
         formActionType?: FormActionType;

package/package.json

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

package/src/ProForm/ApiSelect.vue

@@ -0,0 +1,85 @@
+<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-option v-for="opt in options" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    value?: unknown
+    /** 拉取选项的接口，返回 Promise<Array<{ label, value }>> 或 { list: [] }；可接收当前 params 作为参数 */
+    api?: (params?: Record<string, unknown>) => Promise<unknown>
+    /** 请求参数，变化时会重新拉取 options */
+    params?: Record<string, unknown>
+    /** 是否懒加载：为 true 时在展开下拉时再请求数据，不在挂载时请求 */
+    lazy?: boolean
+    /** 接口返回列表中「标签」字段名，默认 'label' */
+    labelField?: string
+    /** 接口返回列表中「值」字段名，默认 'value' */
+    valueField?: string
+    placeholder?: string
+    disabled?: boolean
+    clearable?: boolean
+    filterable?: boolean
+    multiple?: boolean
+  }>(),
+  { labelField: 'label', valueField: 'value', lazy: false }
+)
+
+defineEmits<{ (e: 'input', value: unknown): void }>()
+
+const loading = ref(false)
+const options = ref<Array<{ label: string; value: unknown }>>([])
+
+const onVisibleChange = (visible: boolean) => {
+  if (props.lazy && visible) fetchOptions()
+}
+
+const fetchOptions = async () => {
+  if (!props.api) return
+  loading.value = true
+  try {
+    const res = await props.api(props.params)
+    const raw = Array.isArray(res)
+      ? res
+      : ((res as Record<string, unknown>)?.list as unknown[]) ??
+      ((res as Record<string, unknown>)?.data as unknown[]) ??
+      []
+    const labelKey = props.labelField ?? 'label'
+    const valueKey = props.valueField ?? 'value'
+    options.value = raw.map((item: unknown) => {
+      const o = item as Record<string, unknown>
+      return {
+        label: String(o[labelKey] ?? o.label ?? ''),
+        value: o[valueKey] ?? o.value,
+      }
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  if (!props.lazy) fetchOptions()
+})
+watch(() => props.api, () => { 
+  if (!props.lazy) {
+    fetchOptions()
+  } else {
+    options.value = []
+  }
+}, { deep: true }
+)
+watch(() => props.params, () => {
+  if (props.lazy) {
+    options.value = []
+  } else {
+    fetchOptions()
+  }
+}, { deep: true })
+</script>

package/src/ProForm/ProForm.vue

@@ -9,7 +9,8 @@
           <el-col v-if="shouldShow(schema)" :key="schema.field" v-bind="getColProps(schema)"
             :offset="schema.colProps?.offset ?? effectiveProps.baseColProps?.offset ?? 0" :data-field="schema.field">
             <ProFormItem :schema="schema" :form-model="formModel" :form-disabled="effectiveProps.disabled"
-              :auto-placeholder="effectiveProps.autoSetPlaceholder" :form-action-type="formActionRef">
+              :auto-placeholder="effectiveProps.autoSetPlaceholder" :form-action-type="formActionRef"
+              :custom-components="formCustomComponents">
               <template v-if="slots[getSlotName(schema)]">
                 <slot :name="getSlotName(schema)" :model="formModel" :schema="schema" :field="schema.field"
                   :values="formModel" />
@@ -88,6 +89,8 @@ const props = withDefaults(
     resetFunc?: () => Promise<void>
     submitOnReset?: boolean
     formListeners?: FormListeners
+    /** 自定义组件映射（组件名 -> 组件），供 schema.component 使用 */
+    components?: Record<string, unknown>
   }>(),
   {
     labelWidth: '120px',
@@ -145,6 +148,12 @@ const getEffectiveSpan = (colProps?: ColEx | null, baseColProps?: ColEx | null,
 
 const { getSetting: getComponentSetting } = useComponentSetting()
 const effectiveProps = computed(() => ({ ...getComponentSetting('ProForm'), ...props, ...innerProps.value }))
+/** 传给 ProFormItem 的自定义组件映射：显式合并 setSetting 与 props，避免响应式代理导致组件引用丢失 */
+const formCustomComponents = computed(() => ({
+  ...(getComponentSetting('ProForm').components as Record<string, unknown> | undefined) ?? {},
+  ...(props.components ?? {}),
+  ...(innerProps.value.components ?? {}),
+}))
 const effectiveActionColOptions = computed(() => effectiveProps.value.actionColOptions ?? { span: 24 })
 
 /** 当前视口宽度，用于响应式计算 span */
@@ -349,7 +358,6 @@ const setProps = async (formProps: Partial<ProFormProps>) => {
   innerProps.value = { ...innerProps.value, ...formProps }
   if (formProps.schemas) {
     innerSchemas.value = [...formProps.schemas]
-    debugger
     initForm()
   }
 }

package/src/ProForm/ProFormItem.vue

@@ -33,8 +33,19 @@
     <slot v-else-if="hasSlot" :model="formModel" :schema="schema" :field="schema.field" :values="formModel" />
     <!-- 默认组件渲染 -->
     <template v-else>
+      <!-- 自定义 component：组件名或内联组件 -->
+      <component
+        v-if="resolvedCustomComponent"
+        :is="resolvedCustomComponent"
+        :value="formModel[schema.field]"
+        @input="setFieldValue"
+        :placeholder="schema.placeholder || (autoPlaceholder ? `请输入${schema.label}` : undefined)"
+        :disabled="effectiveDisabled"
+        v-bind="effectiveComponentProps"
+        v-on="effectiveComponentListeners"
+      />
       <el-input
-        v-if="schema.component === 'input' || !schema.component"
+        v-else-if="schema.component === 'input' || !schema.component"
         v-model="formModel[schema.field]"
         :placeholder="schema.placeholder || (autoPlaceholder ? `请输入${schema.label}` : undefined)"
         :disabled="effectiveDisabled"
@@ -65,6 +76,24 @@
           :value="opt.value"
         />
       </el-select>
+      <ApiSelect
+        v-else-if="schema.component === 'api-select'"
+        :value="formModel[schema.field]"
+        :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
+        :disabled="effectiveDisabled"
+        v-bind="effectiveComponentProps"
+        v-on="effectiveComponentListeners"
+        @input="setFieldValue"
+      />
+      <TreeSelect
+        v-else-if="schema.component === 'tree-select'"
+        :value="formModel[schema.field]"
+        :placeholder="schema.placeholder || (autoPlaceholder ? `请选择${schema.label}` : undefined)"
+        :disabled="effectiveDisabled"
+        v-bind="effectiveComponentProps"
+        v-on="effectiveComponentListeners"
+        @input="setFieldValue"
+      />
       <el-date-picker
         v-else-if="schema.component === 'date-picker'"
         v-model="formModel[schema.field]"
@@ -136,14 +165,23 @@
 
 <script setup lang="ts">
 import { computed, useSlots, h } from 'vue'
+import ApiSelect from './ApiSelect.vue'
+import TreeSelect from './TreeSelect.vue'
 import type { ProFormSchema, RenderCallbackParams } from '../types'
 
+const BUILT_IN_COMPONENTS: Set<string> = new Set([
+  'input', 'select', 'api-select', 'tree-select', 'date-picker', 'date-range', 'input-number',
+  'switch', 'cascader', 'checkbox', 'radio',
+])
+
 const props = defineProps<{
   schema: ProFormSchema
   formModel: Record<string, unknown>
   formDisabled?: boolean
   autoPlaceholder?: boolean
   formActionType?: import('../types').FormActionType
+  /** 自定义组件映射（由 ProForm 传入） */
+  customComponents?: Record<string, unknown>
 }>()
 
 const slots = useSlots()
@@ -216,6 +254,20 @@ const getOptions = (props: Record<string, unknown>): Array<{ label: string; valu
   return Array.isArray(opts) ? opts : undefined
 }
 
+const resolvedCustomComponent = computed(() => {
+  const c = props.schema.component
+  if (c == null) return null
+  if (typeof c === 'string') {
+    if (BUILT_IN_COMPONENTS.has(c)) return null
+    return (props.customComponents && props.customComponents[c]) || c
+  }
+  return c
+})
+
+const setFieldValue = (v: unknown) => {
+  props.formModel[props.schema.field] = v
+}
+
 const renderComponent = computed(() => {
   const renderFn = props.schema.render
   if (!renderFn) return null

package/src/ProForm/TreeSelect.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="ecp-tree-select" ref="rootRef">
+    <el-input
+      :value="displayText"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :clearable="clearable"
+      readonly
+      suffix-icon="el-icon-arrow-down"
+      class="ecp-tree-select__input"
+      @focus="openDropdown"
+      @clear="clearValue"
+    />
+    <transition name="el-zoom-in-top">
+      <div v-show="dropdownVisible" class="ecp-tree-select__dropdown">
+        <div v-if="filterable" class="ecp-tree-select__filter-inner">
+          <el-input
+            v-model="filterText"
+            size="small"
+            placeholder="搜索节点"
+            prefix-icon="el-icon-search"
+            clearable
+            @click.native.stop
+          />
+        </div>
+        <el-tree
+          v-show="!loading"
+          ref="treeRef"
+          :data="treeData"
+          :props="treeProps"
+          :node-key="valueField"
+          :filter-node-method="filterable ? filterNodeMethod : undefined"
+          :highlight-current="true"
+          default-expand-all
+          @node-click="onNodeClick"
+        />
+        <div v-if="loading" class="ecp-tree-select__loading">
+          <i class="el-icon-loading" /> 加载中...
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, computed, nextTick } from 'vue'
+
+interface TreeNode {
+  label?: string
+  value?: unknown
+  children?: TreeNode[]
+  [key: string]: unknown
+}
+
+const props = withDefaults(
+  defineProps<{
+    value?: unknown
+    /** 树数据，直接传入时优先使用，不请求 api */
+    treeData?: unknown[]
+    api?: (params?: Record<string, unknown>) => Promise<unknown>
+    params?: Record<string, unknown>
+    lazy?: boolean
+    labelField?: string
+    valueField?: string
+    childrenField?: string
+    filterable?: boolean
+    placeholder?: string
+    disabled?: boolean
+    clearable?: boolean
+  }>(),
+  {
+    labelField: 'label',
+    valueField: 'value',
+    childrenField: 'children',
+    lazy: false,
+  }
+)
+
+const emit = defineEmits<{ (e: 'input', value: unknown): void }>()
+
+const rootRef = ref<HTMLElement>()
+const treeRef = ref()
+const dropdownVisible = ref(false)
+const loading = ref(false)
+const filterText = ref('')
+const treeData = ref<TreeNode[]>([])
+const flatLabelMap = ref<Record<string, string>>({})
+
+const treeProps = computed(() => ({
+  label: props.labelField,
+  children: props.childrenField,
+}))
+
+function normalizeNode(node: Record<string, unknown>): TreeNode {
+  const labelKey = props.labelField ?? 'label'
+  const valueKey = props.valueField ?? 'value'
+  const childrenKey = props.childrenField ?? 'children'
+  const children = node[childrenKey] as unknown[]
+  const out: TreeNode = {}
+  out[props.labelField ?? 'label'] = node[labelKey] ?? node.label
+  out[props.valueField ?? 'value'] = node[valueKey] ?? node.value
+  if (Array.isArray(children) && children.length) {
+    out[props.childrenField ?? 'children'] = children.map((c) => normalizeNode(c as Record<string, unknown>))
+  }
+  return out
+}
+
+function buildFlatLabelMap(nodes: TreeNode[], prefix = ''): Record<string, string> {
+  const map: Record<string, string> = {}
+  const labelKey = props.labelField ?? 'label'
+  const valueKey = props.valueField ?? 'value'
+  const childrenKey = props.childrenField ?? 'children'
+  for (const node of nodes) {
+    const label = String(node[labelKey] ?? node.label ?? '')
+    const value = node[valueKey] ?? node.value
+    if (value !== undefined && value !== null) {
+      map[String(value)] = prefix ? prefix + ' / ' + label : label
+    }
+    const children = node[childrenKey] ?? node.children
+    if (Array.isArray(children) && children.length) {
+      Object.assign(map, buildFlatLabelMap(children as TreeNode[], label))
+    }
+  }
+  return map
+}
+
+function hasTreeDataProp() {
+  const td = props.treeData
+  return Array.isArray(td) && td.length > 0
+}
+
+function applyTreeData(nodes: TreeNode[]) {
+  treeData.value = nodes
+  flatLabelMap.value = buildFlatLabelMap(nodes)
+}
+
+function syncFromTreeDataProp() {
+  const td = props.treeData
+  if (!Array.isArray(td) || td.length === 0) return
+  const normalized = td.map((item) => normalizeNode(item as Record<string, unknown>))
+  applyTreeData(normalized)
+}
+
+const displayText = computed(() => {
+  if (props.value == null || props.value === '') return ''
+  return flatLabelMap.value[String(props.value)] ?? String(props.value)
+})
+
+const filterNodeMethod = (value: string, data: TreeNode) => {
+  if (!value) return true
+  const labelKey = props.labelField ?? 'label'
+  const label = String(data[labelKey] ?? data.label ?? '')
+  return label.toLowerCase().includes(value.toLowerCase())
+}
+
+watch(filterText, (val) => {
+  treeRef.value?.filter(val)
+})
+
+let clickOutsideHandler: ((e: MouseEvent) => void) | null = null
+
+function openDropdown() {
+  if (props.disabled) return
+  dropdownVisible.value = true
+  if (props.lazy && !hasTreeDataProp()) fetchData()
+  nextTick(() => {
+    clickOutsideHandler = (e: MouseEvent) => {
+      if (rootRef.value && !rootRef.value.contains(e.target as Node)) {
+        closeDropdown()
+      }
+    }
+    document.addEventListener('click', clickOutsideHandler)
+  })
+}
+
+function closeDropdown() {
+  dropdownVisible.value = false
+  filterText.value = ''
+  if (clickOutsideHandler) {
+    document.removeEventListener('click', clickOutsideHandler)
+    clickOutsideHandler = null
+  }
+}
+
+function clearValue() {
+  emit('input', undefined)
+}
+
+function onNodeClick(data: TreeNode) {
+  const valueKey = props.valueField ?? 'value'
+  const val = data[valueKey] ?? data.value
+  emit('input', val)
+  closeDropdown()
+}
+
+async function fetchData() {
+  if (!props.api || hasTreeDataProp()) return
+  loading.value = true
+  try {
+    const res = await props.api(props.params)
+    const raw = Array.isArray(res)
+      ? res
+      : ((res as Record<string, unknown>)?.list as unknown[]) ??
+        ((res as Record<string, unknown>)?.data as unknown[]) ??
+        []
+    treeData.value = raw.map((item) => normalizeNode(item as Record<string, unknown>))
+    flatLabelMap.value = buildFlatLabelMap(treeData.value)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  if (hasTreeDataProp()) {
+    syncFromTreeDataProp()
+  } else if (!props.lazy) {
+    fetchData()
+  }
+})
+
+watch(() => props.treeData, () => {
+  if (hasTreeDataProp()) {
+    syncFromTreeDataProp()
+  } else {
+    treeData.value = []
+    flatLabelMap.value = {}
+    if (!props.lazy && props.api) fetchData()
+  }
+}, { deep: true })
+
+watch(() => props.api, () => {
+  if (hasTreeDataProp()) return
+  if (!props.lazy) fetchData()
+  else { treeData.value = []; flatLabelMap.value = {} }
+}, { deep: true })
+
+watch(() => props.params, () => {
+  if (hasTreeDataProp()) return
+  if (props.lazy) { treeData.value = []; flatLabelMap.value = {} }
+  else fetchData()
+}, { deep: true })
+</script>
+
+<style scoped>
+.ecp-tree-select {
+  position: relative;
+  width: 100%;
+}
+.ecp-tree-select__filter-inner {
+  margin-bottom: 8px;
+}
+.ecp-tree-select__dropdown {
+  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 {
+  padding: 24px;
+  text-align: center;
+  color: #909399;
+  font-size: 14px;
+}
+</style>

package/src/types/index.ts

@@ -78,16 +78,40 @@ export interface ProFormProps {
   fieldMapToTime?: FieldMapToTime[]
   /** 透传给 el-form 的事件监听器 */
   formListeners?: FormListeners
+  /** 自定义组件映射（组件名 -> 组件定义），供 schema.component 使用 */
+  components?: Record<string, unknown>
 }
 
+/** ProForm 内置表单项组件类型 */
+export type ProFormBuiltInComponent =
+  | 'input'
+  | 'select'
+  | 'api-select'
+  | 'tree-select'
+  | 'date-picker'
+  | 'date-range'
+  | 'input-number'
+  | 'switch'
+  | 'cascader'
+  | 'checkbox'
+  | 'radio'
+
+/** 自定义组件：组件名（string）或 Vue 组件选项/构造函数（object | Function） */
+export type ProFormCustomComponent = string | object | ((...args: unknown[]) => unknown)
+
 /** ProForm 表单项配置 */
 export interface ProFormSchema {
   /** 字段名 */
   field: string
   /** 标签 */
   label: string
-  /** 组件类型 */
-  component?: 'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'switch' | 'cascader' | 'checkbox' | 'radio'
+  /**
+   * 组件类型：
+   * - 内置：'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'switch' | 'cascader' | 'checkbox' | 'radio'
+   * - 自定义组件名：任意字符串，对应全局或 ProForm 传入的 components 中注册的组件
+   * - 内联组件：直接传入 Vue 组件选项对象或构造函数
+   */
+  component?: ProFormBuiltInComponent | ProFormCustomComponent
   /** 组件属性，支持函数 */
   componentProps?: Record<string, unknown> | ((params: RenderCallbackParams & { formActionType?: FormActionType }) => Record<string, unknown>)
   /** 占位符 */