Defer admin form runtime loading

This commit is contained in:
2026-06-09 19:10:03 +08:00
parent 0cf20cc1ea
commit fbd726ebdf
6 changed files with 46 additions and 7 deletions
@@ -174,6 +174,8 @@ const withDefaultPlaceholder = <T extends Component>(
}; };
// 这里需要自行根据业务组件库进行适配,需要用到的组件都需要在这里类型说明 // 这里需要自行根据业务组件库进行适配,需要用到的组件都需要在这里类型说明
let initialized = false;
export type ComponentType = export type ComponentType =
| 'ApiSelect' | 'ApiSelect'
| 'ApiTreeSelect' | 'ApiTreeSelect'
@@ -203,7 +205,11 @@ export type ComponentType =
| 'UserSelector' | 'UserSelector'
| BaseFormComponentType; | BaseFormComponentType;
async function initComponentAdapter() { function initComponentAdapter() {
if (initialized) {
return;
}
const components: Partial<Record<ComponentType, Component>> = { const components: Partial<Record<ComponentType, Component>> = {
// 如果你的组件体积比较大,可以使用异步加载 // 如果你的组件体积比较大,可以使用异步加载
// Button: () => // Button: () =>
@@ -349,6 +355,7 @@ async function initComponentAdapter() {
// 将组件注册到全局共享状态中 // 将组件注册到全局共享状态中
globalShareState.setComponents(components); globalShareState.setComponents(components);
initialized = true;
// 定义全局共享状态中的消息提示 // 定义全局共享状态中的消息提示
globalShareState.defineMessage({ globalShareState.defineMessage({
+13 -1
View File
@@ -8,7 +8,16 @@ import type { ComponentType } from './component';
import { setupVbenForm, useVbenForm as useForm, z } from '@vben-core/form-ui'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben-core/form-ui';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
async function initSetupVbenForm() { import { initComponentAdapter } from './component';
let initialized = false;
function initSetupVbenForm() {
if (initialized) {
return;
}
initComponentAdapter();
setupVbenForm<ComponentType>({ setupVbenForm<ComponentType>({
config: { config: {
modelPropNameMap: { modelPropNameMap: {
@@ -31,8 +40,11 @@ async function initSetupVbenForm() {
}, },
}, },
}); });
initialized = true;
} }
initSetupVbenForm();
const useVbenForm = useForm<ComponentType>; const useVbenForm = useForm<ComponentType>;
export { initSetupVbenForm, useVbenForm, z }; export { initSetupVbenForm, useVbenForm, z };
+21
View File
@@ -0,0 +1,21 @@
import { globalShareState } from '@vben-core/shared/global-state';
function initMessageAdapter() {
globalShareState.defineMessage({
copyPreferencesSuccess: (title, content) => {
void import('element-plus/es/components/notification/index').then(
({ ElNotification }) => {
ElNotification({
title,
message: content,
position: 'bottom-right',
duration: 0,
type: 'success',
});
},
);
},
});
}
export { initMessageAdapter };
+2
View File
@@ -12,6 +12,7 @@ import { $t, setupI18n } from '#/locales';
import { useAppContextStore } from '#/store/app-context'; import { useAppContextStore } from '#/store/app-context';
import App from './app.vue'; import App from './app.vue';
import { initMessageAdapter } from './adapter/message';
import { setupElementPlus } from './plugins/element-plus'; import { setupElementPlus } from './plugins/element-plus';
import { router } from './router'; import { router } from './router';
@@ -27,6 +28,7 @@ async function bootstrap(namespace: string) {
const app = createApp(App); const app = createApp(App);
setupElementPlus(app); setupElementPlus(app);
initMessageAdapter();
// 国际化 i18n 配置 // 国际化 i18n 配置
await setupI18n(app); await setupI18n(app);
@@ -1,12 +1,12 @@
import type { SetupZqTable } from './types'; import type { SetupZqTable } from './types';
import { useVbenForm } from '@vben-core/form-ui'; import { useVbenForm } from '#/adapter/form';
// 是否加载过 // 是否加载过
let isInit = false; let isInit = false;
// eslint-disable-next-line import/no-mutable-exports // eslint-disable-next-line import/no-mutable-exports
export let useTableForm: typeof useVbenForm; export let useTableForm: typeof useVbenForm = useVbenForm;
export function initZqTable() { export function initZqTable() {
if (isInit) { if (isInit) {
-3
View File
@@ -169,9 +169,6 @@ function setupAccessGuard(router: Router) {
const userInfo = userStore.userInfo || (await authStore.fetchUserInfo()); const userInfo = userStore.userInfo || (await authStore.fetchUserInfo());
const userRoles = userInfo.roles ?? []; const userRoles = userInfo.roles ?? [];
const { ensureAdminRuntime } = await import('#/runtime/admin');
await ensureAdminRuntime();
// 生成菜单和路由 // 生成菜单和路由
const { accessibleMenus, accessibleRoutes } = await generateAccess({ const { accessibleMenus, accessibleRoutes } = await generateAccess({
roles: userRoles, roles: userRoles,