feat: 表单 Schema 支持组件 Props 映射泛型，同步适配VxeGrid

playground/src/adapter/component/index.ts

@@ -6,14 +6,38 @@
 /* eslint-disable vue/one-component-per-file */
 
 import type {
+  AutoCompleteProps,
+  ButtonProps,
+  CascaderProps,
+  CheckboxGroupProps,
+  CheckboxProps,
+  DatePickerProps,
+  DividerProps,
+  InputNumberProps,
+  InputProps,
+  MentionsProps,
+  RadioGroupProps,
+  RadioProps,
+  RateProps,
+  SelectProps,
+  SpaceProps,
+  SwitchProps,
+  TextAreaProps,
+  TimePickerProps,
+  TreeSelectProps,
   UploadChangeParam,
   UploadFile,
   UploadProps,
 } from 'ant-design-vue';
+import type { RangePickerProps } from 'ant-design-vue/es/date-picker';
 
 import type { Component, Ref } from 'vue';
 
-import type { BaseFormComponentType } from '@vben/common-ui';
+import type {
+  ApiComponentSharedProps,
+  BaseFormComponentType,
+  IconPickerProps,
+} from '@vben/common-ui';
 import type { Sortable } from '@vben/hooks';
 import type { Recordable } from '@vben/types';
 
@@ -594,6 +618,39 @@ export type ComponentType =
   | 'Upload'
   | BaseFormComponentType;
 
+/**
+ * 与 {@link ComponentType} 中注册的组件名一一对应，便于 Schema 上 `component` + `componentProps` 联动提示
+ */
+export interface ComponentPropsMap {
+  ApiCascader: ApiComponentSharedProps & CascaderProps;
+  ApiSelect: ApiComponentSharedProps & SelectProps;
+  ApiTreeSelect: ApiComponentSharedProps & TreeSelectProps;
+  AutoComplete: AutoCompleteProps;
+  Cascader: CascaderProps;
+  Checkbox: CheckboxProps;
+  CheckboxGroup: CheckboxGroupProps;
+  DatePicker: DatePickerProps;
+  DefaultButton: ButtonProps;
+  Divider: DividerProps;
+  IconPicker: IconPickerProps;
+  Input: InputProps;
+  InputNumber: InputNumberProps;
+  InputPassword: InputProps;
+  Mentions: MentionsProps;
+  PrimaryButton: ButtonProps;
+  Radio: RadioProps;
+  RadioGroup: RadioGroupProps;
+  RangePicker: RangePickerProps;
+  Rate: RateProps;
+  Select: SelectProps;
+  Space: SpaceProps;
+  Switch: SwitchProps;
+  Textarea: TextAreaProps;
+  TimePicker: TimePickerProps;
+  TreeSelect: TreeSelectProps;
+  Upload: UploadProps;
+}
+
 async function initComponentAdapter() {
   const components: Partial<Record<ComponentType, Component>> = {
     // 如果你的组件体积比较大，可以使用异步加载

playground/src/adapter/form-schema.ts

@@ -1,95 +0,0 @@
-import type {
-  AutoCompleteProps,
-  ButtonProps,
-  CascaderProps,
-  CheckboxGroupProps,
-  CheckboxProps,
-  DatePickerProps,
-  DividerProps,
-  InputNumberProps,
-  InputProps,
-  MentionsProps,
-  RadioGroupProps,
-  RadioProps,
-  RateProps,
-  SelectProps,
-  SpaceProps,
-  SwitchProps,
-  TextAreaProps,
-  TimePickerProps,
-  TreeSelectProps,
-  UploadProps,
-} from 'ant-design-vue';
-import type { RangePickerProps } from 'ant-design-vue/es/date-picker';
-
-import type { Component } from 'vue';
-
-import type {
-  ApiComponentSharedProps,
-  VbenFormSchema as CoreFormSchema,
-  FormActions,
-  IconPickerProps,
-} from '@vben/common-ui';
-
-import type { ComponentType } from './component';
-
-type ComponentProps<P> =
-  | ((
-      value: Partial<Record<string, any>>,
-      actions: FormActions,
-    ) => P & Record<string, any>)
-  | (P & Record<string, any>);
-
-/**
- * 与 {@link ComponentType} 中注册的组件名一一对应，便于 Schema 上 `component` + `componentProps` 联动提示
- */
-interface ComponentPropsMap {
-  ApiCascader: ApiComponentSharedProps & CascaderProps;
-  ApiSelect: ApiComponentSharedProps & SelectProps;
-  ApiTreeSelect: ApiComponentSharedProps & TreeSelectProps;
-  AutoComplete: AutoCompleteProps;
-  Cascader: CascaderProps;
-  Checkbox: CheckboxProps;
-  CheckboxGroup: CheckboxGroupProps;
-  DatePicker: DatePickerProps;
-  DefaultButton: ButtonProps;
-  Divider: DividerProps;
-  IconPicker: IconPickerProps;
-  Input: InputProps;
-  InputNumber: InputNumberProps;
-  InputPassword: InputProps;
-  Mentions: MentionsProps;
-  PrimaryButton: ButtonProps;
-  Radio: RadioProps;
-  RadioGroup: RadioGroupProps;
-  RangePicker: RangePickerProps;
-  Rate: RateProps;
-  Select: SelectProps;
-  Space: SpaceProps;
-  Switch: SwitchProps;
-  Textarea: TextAreaProps;
-  TimePicker: TimePickerProps;
-  TreeSelect: TreeSelectProps;
-  Upload: UploadProps;
-}
-
-type BaseSchema = Omit<
-  CoreFormSchema<ComponentType>,
-  'component' | 'componentProps'
->;
-
-type RegisteredName = keyof ComponentPropsMap;
-
-type DiscriminatedFormSchema = {
-  [K in RegisteredName]: BaseSchema & {
-    component: K;
-    componentProps?: ComponentProps<ComponentPropsMap[K]>;
-  };
-}[RegisteredName];
-
-type FallbackFormSchema = BaseSchema & {
-  component: Component | Exclude<ComponentType, RegisteredName>;
-  componentProps?: CoreFormSchema<ComponentType>['componentProps'];
-};
-
-export type VbenFormSchema = DiscriminatedFormSchema | FallbackFormSchema;

playground/src/adapter/form.ts

@@ -1,7 +1,9 @@
-import type { VbenFormProps as CoreFormProps } from '@vben/common-ui';
+import type {
+  VbenFormProps as FormProps,
+  VbenFormSchema as FormSchema,
+} from '@vben/common-ui';
 
-import type { ComponentType } from './component';
-import type { VbenFormSchema } from './form-schema';
+import type { ComponentPropsMap, ComponentType } from './component';
 
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -38,13 +40,9 @@ async function initSetupVbenForm() {
   });
 }
 
-type VbenFormProps = Omit<CoreFormProps<ComponentType>, 'schema'> & {
-  schema?: VbenFormSchema[];
-};
-
-function useVbenForm(options: VbenFormProps) {
-  return useForm<ComponentType>(options as CoreFormProps<ComponentType>);
-}
+const useVbenForm = useForm<ComponentType, ComponentPropsMap>;
 
 export { initSetupVbenForm, useVbenForm, z };
-export type { VbenFormProps, VbenFormSchema };
+
+export type VbenFormSchema = FormSchema<ComponentType, ComponentPropsMap>;
+export type VbenFormProps = FormProps<ComponentType, ComponentPropsMap>;

playground/src/adapter/vxe-table.ts

@@ -1,7 +1,7 @@
 import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
 import type { Recordable } from '@vben/types';
 
-import type { ComponentType } from './component';
+import type { ComponentPropsMap, ComponentType } from './component';
 
 import { h } from 'vue';
 
@@ -282,8 +282,8 @@ setupVbenVxeTable({
 });
 
 export const useVbenVxeGrid = <T extends Record<string, any>>(
-  ...rest: Parameters<typeof useGrid<T, ComponentType>>
-) => useGrid<T, ComponentType>(...rest);
+  ...rest: Parameters<typeof useGrid<T, ComponentType, ComponentPropsMap>>
+) => useGrid<T, ComponentType, ComponentPropsMap>(...rest);
 
 export type OnActionClickParams<T = Recordable<any>> = {
   code: string;