Bug: 使用AutoImport 无法自动导入 @vben/common-ui 中的组件或api

[chengliang4810]

Version

Vben Admin V5

Describe the bug?

我尝试通过AutoImport 技术，将@vben/common-ui 中常用的组件如 Page 和一些指令 如useVbenModal 实现自动导入。在使用的时候发现Page 是没有被正常的解析，并且导致适配器相关的组件失效（具体现象为 VbenForm的组件会提示未注册）。只要我不添加 @vben/common-ui相关的自动导入一些正常，只要添加就会出现上述的情况，删除 '@vben/common-ui': ['Page', 'useVbenModal'] 程序一些正常。

左侧为Page组件失效，右侧为适配器组件提示未注册

index.vue代码如下

<script lang="ts" setup>
// 手动引入则正常，无法使用AutoImports
// import { Page } from '@vben/common-ui';

import { getGenTemplateList } from '#/api';

// import { message } from 'naive-ui';

// import { getExampleTableApi } from '../mock-api';

interface RowType {
  category: string;
  color: string;
  id: string;
  price: string;
  productName: string;
  releaseDate: string;
}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入模板名称',
      },
      fieldName: 'name',
      label: '模板名称',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: true,
};

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
  },
  columns: [
    { align: 'left', title: '', type: 'checkbox', width: 30 },
    { title: '序号', type: 'seq', width: 50 },
    { field: 'name', title: '模板名称' },
    { field: 'path', title: '生成路径' },
    { field: 'remark', title: '备注' },
    { field: 'updateTime', formatter: 'formatDateTime', title: '最后更新时间' },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '操作',
      width: 150,
    },
  ],
  keepSource: true,
  pagerConfig: {},
  height: 'auto',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await getGenTemplateList({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
  toolbarConfig: {
    // 是否显示搜索表单控制按钮
    // @ts-ignore 正式环境时有完整的类型声明
    custom: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
  headerCellConfig: {
    height: 44,
  },
  cellConfig: {
    height: 48,
  },
  rowConfig: {
    keyField: 'userId',
  },
};

const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-tools>
        <n-flex class="mx-3" size="small">
          <n-button class="mr-2"> 导出 </n-button>
          <n-button class="mr-2" type="error"> 删除 </n-button>
          <n-button class="mr-2" type="primary"> 新增 </n-button>
        </n-flex>
      </template>
      <template #action>
        <n-flex class="mx-3" justify="space-around" size="small">
          <n-button type="info" size="small" ghost>编辑</n-button>
          <n-button type="error" size="small" ghost>删除</n-button>
        </n-flex>
      </template>
    </Grid>
  </Page>
</template>

版本与配置如下

Vben Version： 5.5.6
APP: web-naive

web-naive下的package.json

{
  "name": "@vben/web-naive",
  "version": "5.5.6",
  "homepage": "https://vben.pro",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
    "directory": "apps/web-naive"
  },
  "license": "MIT",
  "author": {
    "name": "vben",
    "email": "[email protected]",
    "url": "https://github.com/anncwb"
  },
  "type": "module",
  "scripts": {
    "build": "pnpm vite build --mode production",
    "build:analyze": "pnpm vite build --mode analyze",
    "dev": "pnpm vite --mode development",
    "preview": "vite preview",
    "typecheck": "vue-tsc --noEmit --skipLibCheck"
  },
  "imports": {
    "#/*": "./src/*"
  },
  "dependencies": {
    "@vben/access": "workspace:*",
    "@vben/common-ui": "workspace:*",
    "@vben/constants": "workspace:*",
    "@vben/hooks": "workspace:*",
    "@vben/icons": "workspace:*",
    "@vben/layouts": "workspace:*",
    "@vben/locales": "workspace:*",
    "@vben/plugins": "workspace:*",
    "@vben/preferences": "workspace:*",
    "@vben/request": "workspace:*",
    "@vben/stores": "workspace:*",
    "@vben/styles": "workspace:*",
    "@vben/types": "workspace:*",
    "@vben/utils": "workspace:*",
    "@vueuse/core": "catalog:",
    "naive-ui": "catalog:",
    "pinia": "catalog:",
    "vue": "catalog:",
    "vue-router": "catalog:"
  },
  "devDependencies": {
    "unplugin-auto-import": "^19.2.0",
    "unplugin-vue-components": "^28.5.0"
  }
}

web-naive下的vite.config.mts

import { defineConfig } from '@vben/vite-config';

import AutoImport from 'unplugin-auto-import/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';

export default defineConfig(async () => {
  return {
    application: {},
    vite: {
      plugins: [
        AutoImport({
          imports: [
            'vue',
            'vue-router',
            {
              'naive-ui': [
                'useDialog',
                'useMessage',
                'useNotification',
                'useLoadingBar',
              ],
              '@vben/common-ui': ['Page', 'useVbenModal'],
              '#/adapter/vxe-table': ['useVbenVxeGrid', 'VxeTableColumn'],
              '#/adapter/form': ['useVbenForm'],
              // '@vben-core/popup-ui': ['useVbenModal'],
            },
            {
              from: '#/adapter/vxe-table',
              imports: ['VxeGridProps'],
              type: true,
            },
            {
              from: '#/adapter/form',
              imports: ['VbenFormProps'],
              type: true,
            },
          ],
          dts: './src/types/auto-imports.d.ts',
          dirs: [],
          resolvers: [NaiveUiResolver()],
        }),
        Components({
          resolvers: [NaiveUiResolver()],
          include: [/\.tsx$/, /\.vue$/, /\.vue\?vue/],
          dts: './src/types/components.d.ts',
          deep: true,
        }),
      ],
      server: {
        proxy: {
          '/api': {
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, ''),
            // mock代理目标地址
            target: 'https://admin.jimuqu.com/api',
            ws: true,
          },
        },
      },
    },
  };
});

Reproduction

代码地址 https://github.com/chengliang4810/jimuqu-admin-ui
分支: main
server proxy地址为: https://admin.jimuqu.com/api

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Memory: 30.48 GB / 59.89 GB
  Binaries:
    Node: 22.15.0 - D:\develop\nodejs\node.EXE
    npm: 11.2.0 - ~\AppData\Roaming\npm\npm.CMD
    pnpm: 10.2.1 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.146)

Relevant log output

Validations

• Read the docs
• Ensure the code is up to date. (Some issues have been fixed in the latest version)
• I have searched the existing issues and checked that my issue does not duplicate any existing issues.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.