From 2013ba4de460e341450875bf2abab96f9165f75e Mon Sep 17 00:00:00 2001 From: dullathanol <327533967@qq.com> Date: Sun, 5 Apr 2026 19:03:03 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A1=A5=E5=85=A8=20ComponentPropsMap?= =?UTF-8?q?=20=E4=B8=8E=20Vxe=20=E8=A1=A8=E6=A0=BC=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E9=93=BE=E8=B7=AF=E7=9A=84=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-antd/src/adapter/component/index.ts | 12 ++++++++- apps/web-antd/src/adapter/vxe-table.ts | 3 +-- .../src/adapter/component/index.ts | 10 ++++++- apps/web-antdv-next/src/adapter/vxe-table.ts | 3 +-- apps/web-ele/src/adapter/vxe-table.ts | 3 +-- apps/web-naive/src/adapter/vxe-table.ts | 3 +-- apps/web-tdesign/src/adapter/vxe-table.ts | 3 +-- packages/@core/ui-kit/form-ui/src/types.ts | 2 +- .../src/components/api-component/types.ts | 2 +- packages/effects/plugins/src/vxe-table/api.ts | 27 ++++++++++++------- .../effects/plugins/src/vxe-table/types.ts | 4 +-- .../plugins/src/vxe-table/use-vxe-grid.ts | 17 +++++++++--- playground/src/adapter/component/index.ts | 14 +++++++++- 13 files changed, 72 insertions(+), 31 deletions(-) diff --git a/apps/web-antd/src/adapter/component/index.ts b/apps/web-antd/src/adapter/component/index.ts index a70337f2a..bf34ba767 100644 --- a/apps/web-antd/src/adapter/component/index.ts +++ b/apps/web-antd/src/adapter/component/index.ts @@ -68,6 +68,16 @@ import { isEmpty } from '@vben/utils'; import { message, Modal, notification } from 'ant-design-vue'; +type AdapterUploadProps = UploadProps & { + aspectRatio?: string; + crop?: boolean; + draggable?: boolean; + handleChange?: (event: UploadChangeParam) => void; + maxSize?: number; + onDragSort?: (oldIndex: number, newIndex: number) => void; + onHandleChange?: (event: UploadChangeParam) => void; +}; + const AutoComplete = defineAsyncComponent( () => import('ant-design-vue/es/auto-complete'), ); @@ -646,7 +656,7 @@ export interface ComponentPropsMap { Textarea: TextAreaProps; TimePicker: TimePickerProps; TreeSelect: TreeSelectProps; - Upload: UploadProps; + Upload: AdapterUploadProps; } async function initComponentAdapter() { diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts index 2cae4261b..7dd273f5e 100644 --- a/apps/web-antd/src/adapter/vxe-table.ts +++ b/apps/web-antd/src/adapter/vxe-table.ts @@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component'; import { h } from 'vue'; -import { useVbenForm as useForm } from '@vben/common-ui'; import { setupVbenVxeTable, useVbenVxeGrid as useGrid, @@ -68,7 +67,7 @@ setupVbenVxeTable({ // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化 // vxeUI.formats.add }, - useVbenForm: useVbenForm as typeof useForm, + useVbenForm, }); export const useVbenVxeGrid = >( diff --git a/apps/web-antdv-next/src/adapter/component/index.ts b/apps/web-antdv-next/src/adapter/component/index.ts index ebe4c7b68..1099d67a9 100644 --- a/apps/web-antdv-next/src/adapter/component/index.ts +++ b/apps/web-antdv-next/src/adapter/component/index.ts @@ -63,6 +63,14 @@ import { isEmpty } from '@vben/utils'; import { message, Modal, notification } from 'antdv-next'; +type AdapterUploadProps = UploadProps & { + aspectRatio?: string; + crop?: boolean; + handleChange?: (event: UploadChangeParam) => void; + maxSize?: number; + onHandleChange?: (event: UploadChangeParam) => void; +}; + const AutoComplete = defineAsyncComponent( () => import('antdv-next/dist/auto-complete/index'), ); @@ -579,7 +587,7 @@ export interface ComponentPropsMap { Textarea: TextAreaProps; TimePicker: TimePickerProps; TreeSelect: TreeSelectProps; - Upload: UploadProps; + Upload: AdapterUploadProps; } async function initComponentAdapter() { diff --git a/apps/web-antdv-next/src/adapter/vxe-table.ts b/apps/web-antdv-next/src/adapter/vxe-table.ts index 721e1c5d2..0ddab3f62 100644 --- a/apps/web-antdv-next/src/adapter/vxe-table.ts +++ b/apps/web-antdv-next/src/adapter/vxe-table.ts @@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component'; import { h } from 'vue'; -import { useVbenForm as useForm } from '@vben/common-ui'; import { setupVbenVxeTable, useVbenVxeGrid as useGrid, @@ -68,7 +67,7 @@ setupVbenVxeTable({ // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化 // vxeUI.formats.add }, - useVbenForm: useVbenForm as typeof useForm, + useVbenForm, }); export const useVbenVxeGrid = >( diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts index 0967c29cd..b044028c4 100644 --- a/apps/web-ele/src/adapter/vxe-table.ts +++ b/apps/web-ele/src/adapter/vxe-table.ts @@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component'; import { h } from 'vue'; -import { useVbenForm as useForm } from '@vben/common-ui'; import { setupVbenVxeTable, useVbenVxeGrid as useGrid, @@ -69,7 +68,7 @@ setupVbenVxeTable({ // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化 // vxeUI.formats.add }, - useVbenForm: useVbenForm as typeof useForm, + useVbenForm, }); export const useVbenVxeGrid = >( diff --git a/apps/web-naive/src/adapter/vxe-table.ts b/apps/web-naive/src/adapter/vxe-table.ts index 997e45e89..65fda6853 100644 --- a/apps/web-naive/src/adapter/vxe-table.ts +++ b/apps/web-naive/src/adapter/vxe-table.ts @@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component'; import { h } from 'vue'; -import { useVbenForm as useForm } from '@vben/common-ui'; import { setupVbenVxeTable, useVbenVxeGrid as useGrid, @@ -68,7 +67,7 @@ setupVbenVxeTable({ // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化 // vxeUI.formats.add }, - useVbenForm: useVbenForm as typeof useForm, + useVbenForm, }); export const useVbenVxeGrid = >( diff --git a/apps/web-tdesign/src/adapter/vxe-table.ts b/apps/web-tdesign/src/adapter/vxe-table.ts index 68e0635dc..6901c3394 100644 --- a/apps/web-tdesign/src/adapter/vxe-table.ts +++ b/apps/web-tdesign/src/adapter/vxe-table.ts @@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component'; import { h } from 'vue'; -import { useVbenForm as useForm } from '@vben/common-ui'; import { setupVbenVxeTable, useVbenVxeGrid as useGrid, @@ -68,7 +67,7 @@ setupVbenVxeTable({ // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化 // vxeUI.formats.add }, - useVbenForm: useVbenForm as typeof useForm, + useVbenForm, }); export const useVbenVxeGrid = >( diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts index 7b49f6699..e30e8f14f 100644 --- a/packages/@core/ui-kit/form-ui/src/types.ts +++ b/packages/@core/ui-kit/form-ui/src/types.ts @@ -228,7 +228,7 @@ type MappedComponentProps

= ) => P & Record) | (P & Record); -interface FormSchemaBody extends FormCommonConfig { +interface FormSchemaBody extends Omit { /** 默认值 */ defaultValue?: any; /** 依赖 */ diff --git a/packages/effects/common-ui/src/components/api-component/types.ts b/packages/effects/common-ui/src/components/api-component/types.ts index 43696380f..000636a7f 100644 --- a/packages/effects/common-ui/src/components/api-component/types.ts +++ b/packages/effects/common-ui/src/components/api-component/types.ts @@ -7,7 +7,7 @@ export type ApiComponentOptionsItem = { children?: ApiComponentOptionsItem[]; disabled?: boolean; label?: string; - value?: string; + value?: number | string; }; export interface ApiComponentProps { diff --git a/packages/effects/plugins/src/vxe-table/api.ts b/packages/effects/plugins/src/vxe-table/api.ts index ca896ae19..a2a6870ed 100644 --- a/packages/effects/plugins/src/vxe-table/api.ts +++ b/packages/effects/plugins/src/vxe-table/api.ts @@ -1,6 +1,9 @@ import type { VxeGridInstance } from 'vxe-table'; -import type { ExtendedFormApi } from '@vben-core/form-ui'; +import type { + BaseFormComponentType, + ExtendedFormApi, +} from '@vben-core/form-ui'; import type { VxeGridProps } from './types'; @@ -26,25 +29,29 @@ function getDefaultState(): VxeGridProps { }; } -export class VxeGridApi = any> { +export class VxeGridApi< + T extends Record = any, + D extends BaseFormComponentType = BaseFormComponentType, + P extends Record = Record, +> { public formApi = {} as ExtendedFormApi; // private prevState: null | VxeGridProps = null; public grid = {} as VxeGridInstance; - public state: null | VxeGridProps = null; + public state: null | VxeGridProps = null; - public store: Store>; + public store: Store>; private isMounted = false; private stateHandler: StateHandler; - constructor(options: VxeGridProps = {}) { + constructor(options: VxeGridProps = {} as VxeGridProps) { const storeState = { ...options }; const defaultState = getDefaultState(); - this.store = new Store( - mergeWithArrayOverride(storeState, defaultState), + this.store = new Store>( + mergeWithArrayOverride(storeState, defaultState) as VxeGridProps, ); this.store.subscribe((state) => { @@ -82,7 +89,7 @@ export class VxeGridApi = any> { } } - setGridOptions(options: Partial) { + setGridOptions(options: Partial['gridOptions']>) { this.setState({ gridOptions: options, }); @@ -98,8 +105,8 @@ export class VxeGridApi = any> { setState( stateOrFn: - | ((prev: VxeGridProps) => Partial>) - | Partial>, + | ((prev: VxeGridProps) => Partial>) + | Partial>, ) { if (isFunction(stateOrFn)) { this.store.setState((prev) => { diff --git a/packages/effects/plugins/src/vxe-table/types.ts b/packages/effects/plugins/src/vxe-table/types.ts index a2b8d511d..6ce5c07cc 100644 --- a/packages/effects/plugins/src/vxe-table/types.ts +++ b/packages/effects/plugins/src/vxe-table/types.ts @@ -89,9 +89,9 @@ export type ExtendedVxeGridApi< D extends Record = any, F extends BaseFormComponentType = BaseFormComponentType, P extends Record = Record, -> = VxeGridApi & { +> = VxeGridApi & { useStore: >>( - selector?: (state: NoInfer>) => S, + selector?: (state: NoInfer>) => S, ) => Readonly>; }; diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts b/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts index 4e5826c7d..219c00270 100644 --- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts +++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts @@ -25,7 +25,7 @@ export function useVbenVxeGrid< P extends Record = Record, >(options: VxeGridProps) { // const IS_REACTIVE = isReactive(options); - const api = new VxeGridApi(options as VxeGridProps); + const api = new VxeGridApi(options); const extendedApi: ExtendedVxeGridApi = api as ExtendedVxeGridApi< T, D, @@ -36,12 +36,21 @@ export function useVbenVxeGrid< }; const Grid = defineComponent( - (props: VxeGridProps, { attrs, slots }) => { + (props: VxeGridProps, { attrs, slots }) => { onBeforeUnmount(() => { api.unmount(); }); - api.setState({ ...props, ...attrs }); - return () => h(VxeGrid, { ...props, ...attrs, api: extendedApi }, slots); + api.setState({ ...props, ...attrs } as Partial>); + return () => + h( + VxeGrid, + { + ...props, + ...attrs, + api: extendedApi as ExtendedVxeGridApi, + }, + slots, + ); }, { name: 'VbenVxeGrid', diff --git a/playground/src/adapter/component/index.ts b/playground/src/adapter/component/index.ts index df6b0cf3f..94129bd2d 100644 --- a/playground/src/adapter/component/index.ts +++ b/playground/src/adapter/component/index.ts @@ -39,6 +39,7 @@ import type { IconPickerProps, } from '@vben/common-ui'; import type { Sortable } from '@vben/hooks'; +import type { TipTapProps } from '@vben/plugins/tiptap'; import type { Recordable } from '@vben/types'; import { @@ -69,6 +70,16 @@ import { isEmpty } from '@vben/utils'; import { message, Modal, notification } from 'ant-design-vue'; +type AdapterUploadProps = UploadProps & { + aspectRatio?: string; + crop?: boolean; + draggable?: boolean; + handleChange?: (event: UploadChangeParam) => void; + maxSize?: number; + onDragSort?: (oldIndex: number, newIndex: number) => void; + onHandleChange?: (event: UploadChangeParam) => void; +}; + const AutoComplete = defineAsyncComponent( () => import('ant-design-vue/es/auto-complete'), ); @@ -642,13 +653,14 @@ export interface ComponentPropsMap { RadioGroup: RadioGroupProps; RangePicker: RangePickerProps; Rate: RateProps; + RichEditor: TipTapProps; Select: SelectProps; Space: SpaceProps; Switch: SwitchProps; Textarea: TextAreaProps; TimePicker: TimePickerProps; TreeSelect: TreeSelectProps; - Upload: UploadProps; + Upload: AdapterUploadProps; } async function initComponentAdapter() {