二次封装 n-from 继承 FormProps 为什么会有这样的异常？

[InfernalAzazel]

复现仓库

ProBaseForm

<script setup lang="ts">
import {resolveComponent, useAttrs, ref, h} from 'vue'
import type { FormInst, FormProps } from 'naive-ui'
import type { VNode } from 'vue';


export interface ProBaseFormColumn {
  label: string; // 显示的标签
  prop: string; // 绑定的字段名
  component: string | VNode | Component; // 支持字符串组件、VNode 或真正的组件类型
  props?: Record<string, any>; // 组件的额外属性
  span?: number; // 列的跨度
  show?: boolean; // 是否显示该列
}


export interface ProBaseFormProps extends FormProps {
  columns: ProBaseFormColumn[]; // 表单列配置
  cols?: number; // 表单的列数
  xGap?: number; // 列间距
  yGap?: number; // 行间距
  columnsSpan?: number; // 表单区域的总跨度
  footerSpan?: number; // 底部区域的跨度
  collapsed?: boolean; // 是否折叠表单
  collapsedRows?: number; // 折叠时显示的行数
}


defineOptions({ name: 'ProBaseForm', inheritAttrs: false })
const props = withDefaults(defineProps<ProBaseFormProps>(), {
  cols: 24,
  xGap: 12,
  yGap: 0,
  columnsSpan: 24,
  footerSpan: 24,
  collapsed: false,
  collapsedRows: 1,
})
const formInstRef = ref<FormInst | null>(null)
const modelValue = defineModel({default: {}})
const attrs = useAttrs()
function renderComponent(column: ProBaseFormColumn) {
  return typeof column.component === 'string' ? resolveComponent(column.component) : column.component
}

// 创建组件名到 v-model 属性名的映射表
const vModelMap: Record<string, string> = {
  'n-checkbox': 'checked',
}

// 获取组件对应的 v-model 属性名
function getVModel(componentName: string): string {
  return vModelMap[componentName] || 'value'
}

defineExpose({inst: ()=> formInstRef.value})
</script>

<template>
  <n-form ref="formInstRef" :model="modelValue" v-bind="attrs">
    <n-space vertical>
      <slot name="header" />
      <n-grid
          :cols="props.cols"
          :x-gap="props.xGap"
          :y-gap="props.yGap"
          :collapsed="props.collapsed"
          :collapsed-rows="props.collapsedRows"
      >
        <template v-for="(column, _) in columns" :key="_">
          <n-form-item-gi v-if="column.show !== false"
                          :span="column.span || props.columnsSpan"
                          :label="column.label"
                          :path="column.prop">
            <component :is="renderComponent(column)"
                       v-bind="column.props"
                       v-model:[getVModel(column.component)]="modelValue[column.prop]"
                       @update:[getVModel(column.component)]="(value: any) => modelValue[column.prop] = value" />
          </n-form-item-gi>
        </template>
        <n-grid-item suffix :span="props.footerSpan" #="{ overflow }" >
          <slot name="footer" :overflow="overflow as boolean"/>
        </n-grid-item>
      </n-grid>
    </n-space>
  </n-form>
</template>

error:

  vitepress v1.3.4

  ➜  Local:   http://localhost:5173/k-naiveui-pro/
  ➜  Network: use --host to expose
  ➜  press h to show help
14:17:21 [vitepress] Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/work/kylin/github/k-naiveui-pro/packages/k-naiveui-pro/dist/components/ProBaseForm.vue
15 |  
16 |  
17 |  export interface ProBaseFormProps extends FormProps {
   |                                            ^^^^^^^^^
18 |    columns: ProBaseFormColumn[]; // 表单列配置
19 |    cols?: number; // 表单的列数
14:17:21 [vitepress] Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/work/kylin/github/k-naiveui-pro/packages/k-naiveui-pro/dist/components/ProQueryForm.vue
17 |  
18 |  export interface ProQueryFormColumn extends Omit<ProBaseFormColumn, 'span'>{}
19 |  export interface ProQueryFormProps extends FormProps {
   |                                             ^^^^^^^^^
20 |    columns: ProQueryFormColumn[]
21 |    toolbar? : ProQueryFormToolBar
14:17:22 [vitepress] Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/work/kylin/github/k-naiveui-pro/packages/k-naiveui-pro/dist/components/ProForm.vue
15 |  }
16 |  
17 |  export interface ProFormProps extends ProBaseFormProps {
   |                                        ^^^^^^^^^^^^^^^^
18 |    toolbar? : ProFormToolBar
19 |    submit?: (isValid: boolean) => void
14:17:23 [vitepress] Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/work/kylin/github/k-naiveui-pro/packages/k-naiveui-pro/dist/components/ProStepsForm.vue
19 |    children: ProBaseFormColumn[]
20 |  }
21 |  export interface ProStepsFormProps extends Omit<ProBaseFormProps, 'columns'>  {
   |                                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
22 |    columns: ProStepsFormColumn[]
23 |    toolbar? : ProFormStepsToolBar
[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.

[@vue/compiler-sfc] `withDefaults` is a compiler macro and no longer needs to be imported.

[@vue/compiler-sfc] `defineEmits` is a compiler macro and no longer needs to be imported.

14:17:23 [vitepress] Internal server error: [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/work/kylin/github/k-naiveui-pro/packages/k-naiveui-pro/dist/components/ProForm.vue
15 |  }
16 |  
17 |  export interface ProFormProps extends ProBaseFormProps {
   |                                        ^^^^^^^^^^^^^^^^
18 |    toolbar? : ProFormToolBar
19 |    submit?: (isValid: boolean) => void
  Plugin: vite:vue
  File: /work/kylin/github/k-naiveui-pro/packages/k-naiveui-pro/dist/components/ProForm.vue
      at ScriptCompileContext.error (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15730:11)
      at resolveInterfaceMembers (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18204:13)
      at innerResolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17984:14)
      at resolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at innerResolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18038:16)
      at resolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at resolveRuntimePropsFromType (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19604:20)
      at extractRuntimeProps (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19580:17)
      at genRuntimeProps (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19568:18)
      at Object.compileScript (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:20681:21)
14:17:23 [vitepress] Internal server error: [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/work/kylin/github/k-naiveui-pro/packages/k-naiveui-pro/dist/components/ProQueryForm.vue
17 |  
18 |  export interface ProQueryFormColumn extends Omit<ProBaseFormColumn, 'span'>{}
19 |  export interface ProQueryFormProps extends FormProps {
   |                                             ^^^^^^^^^
20 |    columns: ProQueryFormColumn[]
21 |    toolbar? : ProQueryFormToolBar
  Plugin: vite:vue
  File: /work/kylin/github/k-naiveui-pro/packages/k-naiveui-pro/dist/components/ProQueryForm.vue
      at ScriptCompileContext.error (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15730:11)
      at resolveInterfaceMembers (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18204:13)
      at innerResolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17984:14)
      at resolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at innerResolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18038:16)
      at resolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at resolveRuntimePropsFromType (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19604:20)
      at extractRuntimeProps (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19580:17)
      at genRuntimeProps (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19568:18)
      at Object.compileScript (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:20681:21)
14:17:23 [vitepress] Internal server error: [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/work/kylin/github/k-naiveui-pro/packages/k-naiveui-pro/dist/components/ProBaseForm.vue
15 |  
16 |  
17 |  export interface ProBaseFormProps extends FormProps {
   |                                            ^^^^^^^^^
18 |    columns: ProBaseFormColumn[]; // 表单列配置
19 |    cols?: number; // 表单的列数
  Plugin: vite:vue
  File: /work/kylin/github/k-naiveui-pro/packages/k-naiveui-pro/dist/components/ProBaseForm.vue
      at ScriptCompileContext.error (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15730:11)
      at resolveInterfaceMembers (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18204:13)
      at innerResolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17984:14)
      at resolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at innerResolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18038:16)
      at resolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at resolveRuntimePropsFromType (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19604:20)
      at extractRuntimeProps (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19580:17)
      at genRuntimeProps (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19568:18)
      at Object.compileScript (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:20681:21)
14:17:24 [vitepress] Internal server error: [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/work/kylin/github/k-naiveui-pro/packages/k-naiveui-pro/dist/components/ProStepsForm.vue
19 |    children: ProBaseFormColumn[]
20 |  }
21 |  export interface ProStepsFormProps extends Omit<ProBaseFormProps, 'columns'>  {
   |                                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
22 |    columns: ProStepsFormColumn[]
23 |    toolbar? : ProFormStepsToolBar
  Plugin: vite:vue
  File: /work/kylin/github/k-naiveui-pro/packages/k-naiveui-pro/dist/components/ProStepsForm.vue
      at ScriptCompileContext.error (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15730:11)
      at resolveInterfaceMembers (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18204:13)
      at innerResolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17984:14)
      at resolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at innerResolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18038:16)
      at resolveTypeElements (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at resolveRuntimePropsFromType (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19604:20)
      at extractRuntimeProps (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19580:17)
      at genRuntimeProps (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19568:18)
      at Object.compileScript (/work/kylin/github/k-naiveui-pro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:20681:21)