fix(BasicForm): 修复 useComponentRegister 方法无法添加自定义的组件，添加时爆类型错误的问题 (#3483)

* types(component): 修复 useComponentRegister 方法无法添加自定义的组件，添加时爆类型错误的问题

* types(component): 修复 table 组件的 useTableForm 入参的 fetch 和 TableActionType 的 reload 类型定义报错的问题

---------

Co-authored-by: chengmingrui <chengmingrui@oneaiops.com>

src/components/Form/src/componentMap.ts

@@ -35,7 +35,7 @@ import { CountdownInput } from '@/components/CountDown';
 import { BasicTitle } from '@/components/Basic';
 import { CropperAvatar } from '@/components/Cropper';
 
-const componentMap = new Map<ComponentType, Component>();
+const componentMap = new Map<ComponentType | string, Component>();
 
 componentMap.set('Input', Input);
 componentMap.set('InputGroup', Input.Group);
@@ -79,11 +79,14 @@ componentMap.set('CropperAvatar', CropperAvatar);
 
 componentMap.set('BasicTitle', BasicTitle);
 
-export function add(compName: ComponentType, component: Component) {
+export function add<T extends string, R extends Component>(
+  compName: ComponentType | T,
+  component: R,
+) {
   componentMap.set(compName, component);
 }
 
-export function del(compName: ComponentType) {
+export function del<T extends string>(compName: ComponentType | T) {
   componentMap.delete(compName);
 }
 

src/components/Form/src/hooks/useComponentRegister.ts

@@ -2,8 +2,16 @@ import type { ComponentType } from '../types';
 import { tryOnUnmounted } from '@vueuse/core';
 import { add, del } from '../componentMap';
 import type { Component } from 'vue';
+import { isPascalCase } from '@/utils/is';
+
+export function useComponentRegister<T extends string, R extends Component>(
+  compName: ComponentType | T,
+  comp: R,
+) {
+  if (!isPascalCase(compName)) {
+    throw new Error('compName must be in PascalCase');
+  }
 
-export function useComponentRegister(compName: ComponentType, comp: Component) {
   add(compName, comp);
   tryOnUnmounted(() => {
     del(compName);

src/components/Table/src/hooks/useTableForm.ts

@@ -7,7 +7,7 @@ import { isFunction } from '@/utils/is';
 export function useTableForm(
   propsRef: ComputedRef<BasicTableProps>,
   slots: Slots,
-  fetch: (opt?: FetchParams | undefined) => Promise<void>,
+  fetch: (opt?: FetchParams | undefined) => Promise<Recordable<any>[] | undefined>,
   getLoading: ComputedRef<boolean | undefined>,
 ) {
   const getFormProps = computed((): Partial<FormProps> => {

src/components/Table/src/types/table.ts

@@ -88,7 +88,7 @@ export interface GetColumnsParams {
 export type SizeType = 'default' | 'middle' | 'small' | 'large';
 
 export interface TableActionType {
-  reload: (opt?: FetchParams) => Promise<void>;
+  reload: (opt?: FetchParams) => Promise<Recordable<any>[] | undefined>;
   setSelectedRows: (rows: Recordable[]) => void;
   getSelectRows: <T = Recordable>() => T[];
   clearSelectedRowKeys: () => void;

src/utils/is.ts

@@ -65,3 +65,8 @@ export function isHttpUrl(path: string): boolean {
   const reg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;
   return reg.test(path);
 }
+
+export function isPascalCase(str: string): boolean {
+  const regex = /^[A-Z][A-Za-z]*$/;
+  return regex.test(str);
+}