feat(vben5): 增加动态路由支持

apps/vben5/apps/app-antd/.env

@@ -3,3 +3,6 @@ VITE_APP_TITLE=Vben Admin Antd
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-antd
+
+# 对应后端UI框架名称
+VITE_GLOB_UI_FRAMEWORK=vben5

apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json

@@ -56,7 +56,9 @@
       "entityTypeInfos": "Entity Type Infos"
     },
     "auditLogs": "Audit Logs",
-    "loggings": "System Logs"
+    "loggings": "System Logs",
+    "openApi": "Api Document",
+    "cache": "Cache Management"
   },
   "openiddict": {
     "title": "OpenIddict",

apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json

@@ -56,7 +56,9 @@
       "entityTypeInfos": "实体列表"
     },
     "auditLogs": "审计日志",
-    "loggings": "系统日志"
+    "loggings": "系统日志",
+    "openApi": "接口文档",
+    "cache": "缓存管理"
   },
   "openiddict": {
     "title": "OpenIddict",

apps/vben5/apps/app-antd/src/preferences.ts

@@ -8,6 +8,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
 export const overridesPreferences = defineOverridesPreferences({
   // overrides
   app: {
+    accessMode: 'backend',
     enableRefreshToken: true,
     name: import.meta.env.VITE_APP_TITLE,
   },

apps/vben5/apps/app-antd/src/router/access.ts

@@ -4,18 +4,22 @@ import type {
 } from '@vben/types';
 
 import { generateAccessible } from '@vben/access';
+import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 
+import { useMenuTransform, useMyMenusApi } from '@abp/platform';
 import { message } from 'ant-design-vue';
 
-import { getAllMenusApi } from '#/api';
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
 
 const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
 
 async function generateAccess(options: GenerateMenuAndRoutesOptions) {
+  const { getAllApi } = useMyMenusApi();
+  const { transformRoutes } = useMenuTransform();
   const pageMap: ComponentRecordType = import.meta.glob('../views/**/*.vue');
+  const { uiFramework } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
   const layoutMap: ComponentRecordType = {
     BasicLayout,
@@ -29,7 +33,10 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) {
         content: `${$t('common.loadingMenu')}...`,
         duration: 1.5,
       });
-      return await getAllMenusApi();
+      const { items } = await getAllApi({
+        framework: uiFramework,
+      });
+      return transformRoutes(items);
     },
     // 可以指定没有权限跳转403页面
     forbiddenComponent,

apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts

@@ -5,566 +5,543 @@ import { $t } from '#/locales';
 const routes: RouteRecordRaw[] = [
   {
     meta: {
-      icon: 'https://abp.io/assets/favicon.ico/favicon-16x16.png',
-      keepAlive: true,
-      order: 1000,
-      title: $t('abp.title'),
+      title: $t('abp.manage.title'),
+      icon: 'arcticons:activity-manager',
     },
-    name: 'AbpFramework',
-    path: '/abp',
+    name: 'Vben5Manage',
+    path: '/manage',
     children: [
       {
         meta: {
-          title: $t('abp.manage.title'),
-          icon: 'arcticons:activity-manager',
+          title: $t('abp.manage.identity.title'),
+          icon: 'teenyicons:id-outline',
         },
-        name: 'Manage',
-        path: '/manage',
+        name: 'Vben5Identity',
+        path: '/manage/identity',
         children: [
           {
+            component: () => import('#/views/identity/users/index.vue'),
+            name: 'Vben5IdentityUsers',
+            path: '/manage/identity/users',
             meta: {
-              title: $t('abp.manage.identity.title'),
-              icon: 'teenyicons:id-outline',
+              title: $t('abp.manage.identity.user'),
+              icon: 'mdi:user-outline',
             },
-            name: 'Identity',
-            path: '/manage/identity',
-            children: [
-              {
-                component: () => import('#/views/identity/users/index.vue'),
-                name: 'Users',
-                path: '/manage/identity/users',
-                meta: {
-                  title: $t('abp.manage.identity.user'),
-                  icon: 'mdi:user-outline',
-                },
-              },
-              {
-                component: () => import('#/views/identity/roles/index.vue'),
-                name: 'Roles',
-                path: '/manage/identity/roles',
-                meta: {
-                  title: $t('abp.manage.identity.role'),
-                  icon: 'carbon:user-role',
-                },
-              },
-              {
-                component: () =>
-                  import('#/views/identity/claim-types/index.vue'),
-                name: 'ClaimTypes',
-                path: '/manage/identity/claim-types',
-                meta: {
-                  title: $t('abp.manage.identity.claimTypes'),
-                  icon: 'la:id-card-solid',
-                },
-              },
-              {
-                component: () =>
-                  import('#/views/identity/security-logs/index.vue'),
-                name: 'SecurityLogs',
-                path: '/manage/identity/security-logs',
-                meta: {
-                  title: $t('abp.manage.identity.securityLogs'),
-                  icon: 'carbon:security',
-                },
-              },
-              {
-                component: () =>
-                  import('#/views/identity/organization-units/index.vue'),
-                name: 'OrganizationUnits',
-                path: '/manage/identity/organization-units',
-                meta: {
-                  title: $t('abp.manage.identity.organizationUnits'),
-                  icon: 'clarity:organization-line',
-                },
-              },
-              {
-                component: () => import('#/views/identity/sessions/index.vue'),
-                name: 'IdentitySessions',
-                path: '/manage/identity/sessions',
-                meta: {
-                  title: $t('abp.manage.identity.sessions'),
-                  icon: 'carbon:prompt-session',
-                },
-              },
-            ],
           },
           {
+            component: () => import('#/views/identity/roles/index.vue'),
+            name: 'Vben5IdentityRoles',
+            path: '/manage/identity/roles',
             meta: {
-              title: $t('abp.manage.permissions.title'),
-              icon: 'arcticons:permissionsmanager',
+              title: $t('abp.manage.identity.role'),
+              icon: 'carbon:user-role',
             },
-            name: 'PermissionManagement',
-            path: '/manage/permissions',
-            children: [
-              {
-                meta: {
-                  title: $t('abp.manage.permissions.groups'),
-                  icon: 'lucide:group',
-                },
-                name: 'PermissionGroupDefinitions',
-                path: '/manage/permissions/groups',
-                component: () => import('#/views/permissions/groups/index.vue'),
-              },
-              {
-                meta: {
-                  title: $t('abp.manage.permissions.definitions'),
-                  icon: 'icon-park-outline:permissions',
-                },
-                name: 'PermissionDefinitions',
-                path: '/manage/permissions/definitions',
-                component: () =>
-                  import('#/views/permissions/definitions/index.vue'),
-              },
-            ],
           },
           {
+            component: () => import('#/views/identity/claim-types/index.vue'),
+            name: 'Vben5IdentityClaimTypes',
+            path: '/manage/identity/claim-types',
             meta: {
-              title: $t('abp.manage.features.title'),
-              icon: 'ant-design:gold-outlined',
+              title: $t('abp.manage.identity.claimTypes'),
+              icon: 'la:id-card-solid',
             },
-            name: 'FeatureManagement',
-            path: '/manage/features',
-            children: [
-              {
-                meta: {
-                  title: $t('abp.manage.features.groups'),
-                  icon: 'lucide:group',
-                },
-                name: 'FeatureGroupDefinitions',
-                path: '/manage/features/groups',
-                component: () => import('#/views/features/groups/index.vue'),
-              },
-              {
-                meta: {
-                  title: $t('abp.manage.features.definitions'),
-                  icon: 'pajamas:feature-flag',
-                },
-                name: 'FeatureDefinitions',
-                path: '/manage/features/definitions',
-                component: () =>
-                  import('#/views/features/definitions/index.vue'),
-              },
-            ],
           },
           {
+            component: () => import('#/views/identity/security-logs/index.vue'),
+            name: 'Vben5IdentitySecurityLogs',
+            path: '/manage/identity/security-logs',
             meta: {
-              title: $t('abp.manage.settings.title'),
-              icon: 'ic:outline-settings',
+              title: $t('abp.manage.identity.securityLogs'),
+              icon: 'carbon:security',
             },
-            name: 'SettingManagement',
-            path: '/manage/settings',
-            children: [
-              {
-                meta: {
-                  title: $t('abp.manage.settings.definitions'),
-                  icon: 'codicon:settings',
-                },
-                name: 'SettingDefinitions',
-                path: '/manage/settings/definitions',
-                component: () =>
-                  import('#/views/settings/definitions/index.vue'),
-              },
-              {
-                meta: {
-                  title: $t('abp.manage.settings.system'),
-                  icon: 'tabler:settings-cog',
-                },
-                name: 'SystemSettings',
-                path: '/manage/settings/system',
-                component: () => import('#/views/settings/system/index.vue'),
-              },
-            ],
-          },
-          {
-            meta: {
-              title: $t('abp.manage.localization.title'),
-              icon: 'ion:globe-outline',
-            },
-            name: 'LocalizationManagement',
-            path: '/manage/localization',
-            children: [
-              {
-                meta: {
-                  title: $t('abp.manage.localization.resources'),
-                  icon: 'grommet-icons:resources',
-                },
-                name: 'LocalizationResources',
-                path: '/manage/localization/resources',
-                component: () =>
-                  import('#/views/localization/resources/index.vue'),
-              },
-              {
-                meta: {
-                  title: $t('abp.manage.localization.languages'),
-                  icon: 'cil:language',
-                },
-                name: 'LocalizationLanguages',
-                path: '/manage/localization/languages',
-                component: () =>
-                  import('#/views/localization/languages/index.vue'),
-              },
-              {
-                meta: {
-                  title: $t('abp.manage.localization.texts'),
-                  icon: 'mi:text',
-                },
-                name: 'LocalizationTexts',
-                path: '/manage/localization/texts',
-                component: () => import('#/views/localization/texts/index.vue'),
-              },
-            ],
-          },
-          {
-            meta: {
-              title: $t('abp.manage.dataProtection.title'),
-              icon: 'icon-park-outline:protect',
-            },
-            name: 'DataProtectionManagement',
-            path: '/manage/data-protection',
-            children: [
-              {
-                meta: {
-                  title: $t('abp.manage.dataProtection.entityTypeInfos'),
-                  icon: 'iconamoon:type',
-                  keepAlive: true,
-                },
-                name: 'EntityTypeInfos',
-                path: '/manage/data-protection/entity-type-infos',
-                component: () =>
-                  import('#/views/data-protection/entity-type-infos/index.vue'),
-              },
-            ],
-          },
-          {
-            meta: {
-              title: $t('abp.manage.auditLogs'),
-              icon: 'fluent-mdl2:compliance-audit',
-            },
-            name: 'AuditingAuditLogs',
-            path: '/manage/audit-logs',
-            component: () => import('#/views/auditing/audit-logs/index.vue'),
           },
           {
+            component: () =>
+              import('#/views/identity/organization-units/index.vue'),
+            name: 'Vben5IdentityOrganizationUnits',
+            path: '/manage/identity/organization-units',
             meta: {
-              title: $t('abp.manage.loggings'),
-              icon: 'icon-park-outline:log',
+              title: $t('abp.manage.identity.organizationUnits'),
+              icon: 'clarity:organization-line',
             },
-            name: 'AuditingLoggings',
-            path: '/manage/sys-logs',
-            component: () => import('#/views/auditing/loggings/index.vue'),
           },
           {
+            component: () => import('#/views/identity/sessions/index.vue'),
+            name: 'Vben5IdentitySessions',
+            path: '/manage/identity/sessions',
             meta: {
-              title: $t('abp.manage.notifications.title'),
-              icon: 'tabler:notification',
+              title: $t('abp.manage.identity.sessions'),
+              icon: 'carbon:prompt-session',
             },
-            name: 'Notifications',
-            path: '/manage/notifications',
-            children: [
-              {
-                meta: {
-                  title: $t('abp.manage.notifications.myNotifilers'),
-                  icon: 'ant-design:notification-outlined',
-                },
-                name: 'MyNotifications',
-                path: '/manage/notifications/my-notifilers',
-                component: () =>
-                  import('#/views/notifications/my-notifilers/index.vue'),
-              },
-              {
-                meta: {
-                  title: $t('abp.manage.notifications.groups'),
-                  icon: 'lucide:group',
-                },
-                name: 'NotificationGroupDefinitions',
-                path: '/manage/notifications/groups',
-                component: () =>
-                  import('#/views/notifications/groups/index.vue'),
-              },
-              {
-                meta: {
-                  title: $t('abp.manage.notifications.definitions'),
-                  icon: 'nimbus:notification',
-                },
-                name: 'NotificationDefinitions',
-                path: '/manage/notifications/definitions',
-                component: () =>
-                  import('#/views/notifications/definitions/index.vue'),
-              },
-            ],
           },
         ],
       },
       {
         meta: {
-          title: $t('abp.saas.title'),
-          icon: 'ant-design:cloud-server-outlined',
+          title: $t('abp.manage.permissions.title'),
+          icon: 'arcticons:permissionsmanager',
         },
-        name: 'Saas',
-        path: '/saas',
+        name: 'Vben5Permissions',
+        path: '/manage/permissions',
         children: [
           {
             meta: {
-              title: $t('abp.saas.editions'),
-              icon: 'icon-park-outline:multi-rectangle',
+              title: $t('abp.manage.permissions.groups'),
+              icon: 'lucide:group',
             },
-            name: 'SaasEditions',
-            path: '/saas/editions',
-            component: () => import('#/views/saas/editions/index.vue'),
+            name: 'Vben5PermissionsGroupDefinitions',
+            path: '/manage/permissions/groups',
+            component: () => import('#/views/permissions/groups/index.vue'),
           },
           {
             meta: {
-              title: $t('abp.saas.tenants'),
-              icon: 'arcticons:tenantcloud-pro',
+              title: $t('abp.manage.permissions.definitions'),
+              icon: 'icon-park-outline:permissions',
             },
-            name: 'SaasTenants',
-            path: '/saas/tenants',
-            component: () => import('#/views/saas/tenants/index.vue'),
+            name: 'Vben5PermissionsDefinitions',
+            path: '/manage/permissions/definitions',
+            component: () =>
+              import('#/views/permissions/definitions/index.vue'),
           },
         ],
       },
       {
         meta: {
-          title: $t('abp.openiddict.title'),
-          icon: 'mdi:openid',
+          title: $t('abp.manage.features.title'),
+          icon: 'ant-design:gold-outlined',
         },
-        name: 'OpenIddict',
-        path: '/openiddict',
+        name: 'Vben5Features',
+        path: '/manage/features',
         children: [
           {
             meta: {
-              title: $t('abp.openiddict.applications'),
-              icon: 'carbon:application',
-            },
-            name: 'OpenIddictApplications',
-            path: '/openiddict/applications',
-            component: () =>
-              import('#/views/openiddict/applications/index.vue'),
-          },
-          {
-            meta: {
-              title: $t('abp.openiddict.authorizations'),
-              icon: 'arcticons:ente-authenticator',
-            },
-            name: 'OpenIddictAuthorizations',
-            path: '/openiddict/authorizations',
-            component: () =>
-              import('#/views/openiddict/authorizations/index.vue'),
-          },
-          {
-            meta: {
-              title: $t('abp.openiddict.scopes'),
-              icon: 'et:scope',
+              title: $t('abp.manage.features.groups'),
+              icon: 'lucide:group',
             },
-            name: 'OpenIddictScopes',
-            path: '/openiddict/scopes',
-            component: () => import('#/views/openiddict/scopes/index.vue'),
+            name: 'Vben5FeaturesGroupDefinitions',
+            path: '/manage/features/groups',
+            component: () => import('#/views/features/groups/index.vue'),
           },
           {
             meta: {
-              title: $t('abp.openiddict.tokens'),
-              icon: 'oui:token-key',
+              title: $t('abp.manage.features.definitions'),
+              icon: 'pajamas:feature-flag',
             },
-            name: 'OpenIddictTokens',
-            path: '/openiddict/tokens',
-            component: () => import('#/views/openiddict/tokens/index.vue'),
+            name: 'Vben5FeaturesDefinitions',
+            path: '/manage/features/definitions',
+            component: () => import('#/views/features/definitions/index.vue'),
           },
         ],
       },
       {
-        name: 'Account',
-        path: '/account',
         meta: {
-          title: $t('abp.account.title'),
-          icon: 'mdi:account-outline',
-          hideInMenu: true,
+          title: $t('abp.manage.settings.title'),
+          icon: 'ic:outline-settings',
         },
+        name: 'Vben5Settings',
+        path: '/manage/settings',
         children: [
           {
             meta: {
-              title: $t('abp.account.settings.title'),
-              icon: 'tdesign:user-setting',
+              title: $t('abp.manage.settings.definitions'),
+              icon: 'codicon:settings',
             },
-            name: 'MySettings',
-            path: '/account/my-settings',
-            component: () => import('#/views/account/my-settings/index.vue'),
+            name: 'Vben5SettingsDefinitions',
+            path: '/manage/settings/definitions',
+            component: () => import('#/views/settings/definitions/index.vue'),
+          },
+          {
+            meta: {
+              title: $t('abp.manage.settings.system'),
+              icon: 'tabler:settings-cog',
+            },
+            name: 'Vben5SettingsSystem',
+            path: '/manage/settings/system',
+            component: () => import('#/views/settings/system/index.vue'),
           },
         ],
       },
       {
-        name: 'Platform',
-        path: '/platform',
         meta: {
-          title: $t('abp.platform.title'),
-          icon: 'ep:platform',
+          title: $t('abp.manage.localization.title'),
+          icon: 'ion:globe-outline',
         },
+        name: 'Vben5Localizations',
+        path: '/manage/localization',
         children: [
           {
             meta: {
-              title: $t('abp.platform.dataDictionaries'),
-              icon: 'material-symbols:dictionary-outline',
-            },
-            name: 'PlatformDataDictionaries',
-            path: '/platform/data-dictionaries',
-            component: () =>
-              import('#/views/platform/data-dictionaries/index.vue'),
-          },
-          {
-            meta: {
-              title: $t('abp.platform.layouts'),
-              icon: 'material-symbols-light:responsive-layout',
+              title: $t('abp.manage.localization.resources'),
+              icon: 'grommet-icons:resources',
             },
-            name: 'PlatformLayouts',
-            path: '/platform/layouts',
-            component: () => import('#/views/platform/layouts/index.vue'),
+            name: 'Vben5LocalizationsResources',
+            path: '/manage/localization/resources',
+            component: () => import('#/views/localization/resources/index.vue'),
           },
           {
             meta: {
-              title: $t('abp.platform.menus'),
-              icon: 'material-symbols-light:menu',
+              title: $t('abp.manage.localization.languages'),
+              icon: 'cil:language',
             },
-            name: 'PlatformMenus',
-            path: '/platform/menus',
-            component: () => import('#/views/platform/menus/index.vue'),
+            name: 'Vben5LocalizationsLanguages',
+            path: '/manage/localization/languages',
+            component: () => import('#/views/localization/languages/index.vue'),
           },
           {
             meta: {
-              title: $t('abp.platform.messages.title'),
-              icon: 'tabler:message-cog',
+              title: $t('abp.manage.localization.texts'),
+              icon: 'mi:text',
             },
-            name: 'PlatformMessages',
-            path: '/platform/messages',
-            children: [
-              {
-                meta: {
-                  title: $t('abp.platform.messages.email'),
-                  icon: 'material-symbols:attach-email-outline',
-                },
-                name: 'PlatformEmailMessages',
-                path: '/platform/messages/email',
-                component: () =>
-                  import('#/views/platform/messages/email/index.vue'),
-              },
-              {
-                meta: {
-                  title: $t('abp.platform.messages.sms'),
-                  icon: 'material-symbols:sms-outline',
-                },
-                name: 'PlatformSmsMessages',
-                path: '/platform/messages/sms',
-                component: () =>
-                  import('#/views/platform/messages/sms/index.vue'),
-              },
-            ],
+            name: 'Vben5LocalizationsTexts',
+            path: '/manage/localization/texts',
+            component: () => import('#/views/localization/texts/index.vue'),
           },
         ],
       },
       {
-        name: 'TaskManagement',
-        path: '/task-management',
         meta: {
-          title: $t('abp.tasks.title'),
-          icon: 'eos-icons:background-tasks',
+          title: $t('abp.manage.dataProtection.title'),
+          icon: 'icon-park-outline:protect',
         },
+        name: 'Vben5DataProtection',
+        path: '/manage/data-protection',
         children: [
           {
             meta: {
-              title: $t('abp.tasks.jobInfo.title'),
-              icon: 'eos-icons:job',
+              title: $t('abp.manage.dataProtection.entityTypeInfos'),
+              icon: 'iconamoon:type',
+              keepAlive: true,
             },
-            name: 'TaskManagementJobInfos',
-            path: '/task-management/background-jobs',
-            component: () => import('#/views/tasks/job-infos/index.vue'),
+            name: 'Vben5DataProtectionEntityTypeInfos',
+            path: '/manage/data-protection/entity-type-infos',
+            component: () =>
+              import('#/views/data-protection/entity-type-infos/index.vue'),
           },
         ],
       },
       {
         meta: {
-          title: $t('abp.webhooks.title'),
-          icon: 'material-symbols:webhook',
+          title: $t('abp.manage.auditLogs'),
+          icon: 'fluent-mdl2:compliance-audit',
+        },
+        name: 'Vben5AuditingAuditLogs',
+        path: '/manage/audit-logs',
+        component: () => import('#/views/auditing/audit-logs/index.vue'),
+      },
+      {
+        meta: {
+          title: $t('abp.manage.loggings'),
+          icon: 'icon-park-outline:log',
+        },
+        name: 'Vben5AuditingLoggings',
+        path: '/manage/sys-logs',
+        component: () => import('#/views/auditing/loggings/index.vue'),
+      },
+      {
+        meta: {
+          title: $t('abp.manage.notifications.title'),
+          icon: 'tabler:notification',
         },
-        name: 'WebhooksManagement',
-        path: '/webhooks',
+        name: 'Vben5Notifications',
+        path: '/manage/notifications',
         children: [
           {
             meta: {
-              title: $t('abp.webhooks.groups'),
-              icon: 'lucide:group',
-            },
-            name: 'WebhookGroupDefinitions',
-            path: '/webhooks/groups',
-            component: () => import('#/views/webhooks/groups/index.vue'),
-          },
-          {
-            meta: {
-              title: $t('abp.webhooks.definitions'),
-              icon: 'material-symbols:webhook',
+              title: $t('abp.manage.notifications.myNotifilers'),
+              icon: 'ant-design:notification-outlined',
             },
-            name: 'WebhookDefinitions',
-            path: '/webhooks/definitions',
-            component: () => import('#/views/webhooks/definitions/index.vue'),
+            name: 'Vben5NotificationsMyNotifilers',
+            path: '/manage/notifications/my-notifilers',
+            component: () =>
+              import('#/views/notifications/my-notifilers/index.vue'),
           },
           {
             meta: {
-              title: $t('abp.webhooks.subscriptions'),
-              icon: 'material-symbols:subscriptions',
+              title: $t('abp.manage.notifications.groups'),
+              icon: 'lucide:group',
             },
-            name: 'WebhookSubscriptions',
-            path: '/webhooks/subscriptions',
-            component: () => import('#/views/webhooks/subscriptions/index.vue'),
+            name: 'Vben5NotificationsGroupDefinitions',
+            path: '/manage/notifications/groups',
+            component: () => import('#/views/notifications/groups/index.vue'),
           },
           {
             meta: {
-              title: $t('abp.webhooks.sendAttempts'),
-              icon: 'material-symbols:history',
+              title: $t('abp.manage.notifications.definitions'),
+              icon: 'nimbus:notification',
             },
-            name: 'WebhookSendAttempts',
-            path: '/webhooks/send-attempts',
-            component: () => import('#/views/webhooks/send-attempts/index.vue'),
+            name: 'Vben5NotificationsDefinitions',
+            path: '/manage/notifications/definitions',
+            component: () =>
+              import('#/views/notifications/definitions/index.vue'),
           },
         ],
       },
+    ],
+  },
+  {
+    meta: {
+      title: $t('abp.saas.title'),
+      icon: 'ant-design:cloud-server-outlined',
+    },
+    name: 'Vben5Saas',
+    path: '/saas',
+    children: [
+      {
+        meta: {
+          title: $t('abp.saas.editions'),
+          icon: 'icon-park-outline:multi-rectangle',
+        },
+        name: 'Vben5SaasEditions',
+        path: '/saas/editions',
+        component: () => import('#/views/saas/editions/index.vue'),
+      },
+      {
+        meta: {
+          title: $t('abp.saas.tenants'),
+          icon: 'arcticons:tenantcloud-pro',
+        },
+        name: 'Vben5SaasTenants',
+        path: '/saas/tenants',
+        component: () => import('#/views/saas/tenants/index.vue'),
+      },
+    ],
+  },
+  {
+    meta: {
+      title: $t('abp.openiddict.title'),
+      icon: 'mdi:openid',
+    },
+    name: 'Vben5OpenIddict',
+    path: '/openiddict',
+    children: [
+      {
+        meta: {
+          title: $t('abp.openiddict.applications'),
+          icon: 'carbon:application',
+        },
+        name: 'Vben5OpenIddictApplications',
+        path: '/openiddict/applications',
+        component: () => import('#/views/openiddict/applications/index.vue'),
+      },
+      {
+        meta: {
+          title: $t('abp.openiddict.authorizations'),
+          icon: 'arcticons:ente-authenticator',
+        },
+        name: 'Vben5OpenIddictAuthorizations',
+        path: '/openiddict/authorizations',
+        component: () => import('#/views/openiddict/authorizations/index.vue'),
+      },
+      {
+        meta: {
+          title: $t('abp.openiddict.scopes'),
+          icon: 'et:scope',
+        },
+        name: 'Vben5OpenIddictScopes',
+        path: '/openiddict/scopes',
+        component: () => import('#/views/openiddict/scopes/index.vue'),
+      },
+      {
+        meta: {
+          title: $t('abp.openiddict.tokens'),
+          icon: 'oui:token-key',
+        },
+        name: 'Vben5OpenIddictTokens',
+        path: '/openiddict/tokens',
+        component: () => import('#/views/openiddict/tokens/index.vue'),
+      },
+    ],
+  },
+  {
+    name: 'Vben5Account',
+    path: '/account',
+    meta: {
+      title: $t('abp.account.title'),
+      icon: 'mdi:account-outline',
+      hideInMenu: true,
+    },
+    children: [
+      {
+        meta: {
+          title: $t('abp.account.settings.title'),
+          icon: 'tdesign:user-setting',
+        },
+        name: 'Vben5AccountMySettings',
+        path: '/account/my-settings',
+        component: () => import('#/views/account/my-settings/index.vue'),
+      },
+    ],
+  },
+  {
+    name: 'Vben5Platform',
+    path: '/platform',
+    meta: {
+      title: $t('abp.platform.title'),
+      icon: 'ep:platform',
+    },
+    children: [
+      {
+        meta: {
+          title: $t('abp.platform.dataDictionaries'),
+          icon: 'material-symbols:dictionary-outline',
+        },
+        name: 'Vben5PlatformDataDictionaries',
+        path: '/platform/data-dictionaries',
+        component: () => import('#/views/platform/data-dictionaries/index.vue'),
+      },
+      {
+        meta: {
+          title: $t('abp.platform.layouts'),
+          icon: 'material-symbols-light:responsive-layout',
+        },
+        name: 'Vben5PlatformLayouts',
+        path: '/platform/layouts',
+        component: () => import('#/views/platform/layouts/index.vue'),
+      },
       {
         meta: {
-          title: $t('abp.textTemplating.title'),
-          icon: 'tdesign:template',
+          title: $t('abp.platform.menus'),
+          icon: 'material-symbols-light:menu',
         },
-        name: 'TextTemplating',
-        path: '/text-templating',
+        name: 'Vben5PlatformMenus',
+        path: '/platform/menus',
+        component: () => import('#/views/platform/menus/index.vue'),
+      },
+      {
+        meta: {
+          title: $t('abp.platform.messages.title'),
+          icon: 'tabler:message-cog',
+        },
+        name: 'Vben5PlatformMessages',
+        path: '/platform/messages',
         children: [
           {
             meta: {
-              title: $t('abp.textTemplating.definitions'),
-              icon: 'qlementine-icons:template-16',
+              title: $t('abp.platform.messages.email'),
+              icon: 'material-symbols:attach-email-outline',
             },
-            name: 'TemplateDefinitions',
-            path: '/text-templating/definitions',
+            name: 'Vben5PlatformEmailMessages',
+            path: '/platform/messages/email',
             component: () =>
-              import('#/views/text-templating/definitions/index.vue'),
+              import('#/views/platform/messages/email/index.vue'),
           },
-        ],
-      },
-      {
-        name: 'AbpDemo',
-        path: '/abp/demos',
-        meta: {
-          title: $t('abp.demo.title'),
-          icon: 'carbon:demo',
-        },
-        children: [
           {
             meta: {
-              title: $t('abp.demo.books'),
-              icon: 'mingcute:book-line',
+              title: $t('abp.platform.messages.sms'),
+              icon: 'material-symbols:sms-outline',
             },
-            name: 'DemoBooks',
-            path: '/abp/demos/books',
-            component: () => import('#/views/demos/books/index.vue'),
+            name: 'Vben5PlatformSmsMessages',
+            path: '/platform/messages/sms',
+            component: () => import('#/views/platform/messages/sms/index.vue'),
           },
         ],
       },
     ],
   },
+  {
+    name: 'Vben5Tasks',
+    path: '/task-management',
+    meta: {
+      title: $t('abp.tasks.title'),
+      icon: 'eos-icons:background-tasks',
+    },
+    children: [
+      {
+        meta: {
+          title: $t('abp.tasks.jobInfo.title'),
+          icon: 'eos-icons:job',
+        },
+        name: 'Vben5TasksJobInfos',
+        path: '/task-management/background-jobs',
+        component: () => import('#/views/tasks/job-infos/index.vue'),
+      },
+    ],
+  },
+  {
+    meta: {
+      title: $t('abp.webhooks.title'),
+      icon: 'material-symbols:webhook',
+    },
+    name: 'Vben5Webhooks',
+    path: '/webhooks',
+    children: [
+      {
+        meta: {
+          title: $t('abp.webhooks.groups'),
+          icon: 'lucide:group',
+        },
+        name: 'Vben5WebhooksGroupDefinitions',
+        path: '/webhooks/groups',
+        component: () => import('#/views/webhooks/groups/index.vue'),
+      },
+      {
+        meta: {
+          title: $t('abp.webhooks.definitions'),
+          icon: 'material-symbols:webhook',
+        },
+        name: 'Vben5WebhooksDefinitions',
+        path: '/webhooks/definitions',
+        component: () => import('#/views/webhooks/definitions/index.vue'),
+      },
+      {
+        meta: {
+          title: $t('abp.webhooks.subscriptions'),
+          icon: 'material-symbols:subscriptions',
+        },
+        name: 'Vben5WebhooksSubscriptions',
+        path: '/webhooks/subscriptions',
+        component: () => import('#/views/webhooks/subscriptions/index.vue'),
+      },
+      {
+        meta: {
+          title: $t('abp.webhooks.sendAttempts'),
+          icon: 'material-symbols:history',
+        },
+        name: 'Vben5WebhooksSendAttempts',
+        path: '/webhooks/send-attempts',
+        component: () => import('#/views/webhooks/send-attempts/index.vue'),
+      },
+    ],
+  },
+  {
+    meta: {
+      title: $t('abp.textTemplating.title'),
+      icon: 'tdesign:template',
+    },
+    name: 'Vben5TextTemplating',
+    path: '/text-templating',
+    children: [
+      {
+        meta: {
+          title: $t('abp.textTemplating.definitions'),
+          icon: 'qlementine-icons:template-16',
+        },
+        name: 'Vben5TextTemplatingDefinitions',
+        path: '/text-templating/definitions',
+        component: () =>
+          import('#/views/text-templating/definitions/index.vue'),
+      },
+    ],
+  },
+  {
+    name: 'Vben5AbpDemo',
+    path: '/abp/demos',
+    meta: {
+      title: $t('abp.demo.title'),
+      icon: 'carbon:demo',
+    },
+    children: [
+      {
+        meta: {
+          title: $t('abp.demo.books'),
+          icon: 'mingcute:book-line',
+        },
+        name: 'Vben5AbpDemoBooks',
+        path: '/abp/demos/books',
+        component: () => import('#/views/demos/books/index.vue'),
+      },
+    ],
+  },
 ];
 
 export default routes;

apps/vben5/apps/app-antd/src/views/account/my-profile/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { MyProfile } from '@abp/account';
 
 defineOptions({
-  name: 'MyProfiles',
+  name: 'Vben5AccountMyProfiles',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/account/my-settings/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { MySetting } from '@abp/account';
 
 defineOptions({
-  name: 'MySettings',
+  name: 'Vben5AccountMySettings',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/auditing/audit-logs/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { AuditLogTable } from '@abp/auditing';
 
 defineOptions({
-  name: 'AuditingAuditLogs',
+  name: 'Vben5AuditingAuditLogs',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/auditing/loggings/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { LoggingTable } from '@abp/auditing';
 
 defineOptions({
-  name: 'AuditingLoggings',
+  name: 'Vben5AuditingLoggings',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/data-protection/entity-type-infos/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { EntityTypeInfoTable } from '@abp/data-protection';
 
 defineOptions({
-  name: 'EntityTypeInfos',
+  name: 'Vben5DataProtectionEntityTypeInfos',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/demos/books/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { BookTable } from '@abp/demo';
 
 defineOptions({
-  name: 'DemoBooks',
+  name: 'Vben5AbpDemoBooks',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/features/definitions/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { FeatureDefinitionTable } from '@abp/features';
 
 defineOptions({
-  name: 'FeatureDefinitions',
+  name: 'Vben5FeaturesDefinitions',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/features/groups/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { FeatureGroupDefinitionTable } from '@abp/features';
 
 defineOptions({
-  name: 'FeatureGroupDefinitions',
+  name: 'Vben5FeaturesGroupDefinitions',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/identity/claim-types/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { ClaimTypeTable } from '@abp/identity';
 
 defineOptions({
-  name: 'IdentityClaimTypes',
+  name: 'Vben5IdentityClaimTypes',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/identity/organization-units/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { OrganizationUnitPage } from '@abp/identity';
 
 defineOptions({
-  name: 'IdentityOrganizationUnits',
+  name: 'Vben5IdentityOrganizationUnits',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/identity/roles/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { RoleTable } from '@abp/identity';
 
 defineOptions({
-  name: 'IdentityRoles',
+  name: 'Vben5IdentityRoles',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/identity/security-logs/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { SecurityLogTable } from '@abp/identity';
 
 defineOptions({
-  name: 'IdentitySecurityLogs',
+  name: 'Vben5IdentitySecurityLogs',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/identity/sessions/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { SessionTable } from '@abp/identity';
 
 defineOptions({
-  name: 'IdentitySessions',
+  name: 'Vben5IdentitySessions',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/identity/users/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { UserTable } from '@abp/identity';
 
 defineOptions({
-  name: 'IdentityUsers',
+  name: 'Vben5IdentityUsers',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/localization/languages/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { LocalizationLanguageTable } from '@abp/localization';
 
 defineOptions({
-  name: 'LocalizationLanguages',
+  name: 'Vben5LocalizationsLanguages',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/localization/resources/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { LocalizationResourceTable } from '@abp/localization';
 
 defineOptions({
-  name: 'LocalizationResources',
+  name: 'Vben5LocalizationsResources',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/localization/texts/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { LocalizationTextTable } from '@abp/localization';
 
 defineOptions({
-  name: 'LocalizationTexts',
+  name: 'Vben5LocalizationsTexts',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/notifications/definitions/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { NotificationDefinitionTable } from '@abp/notifications';
 
 defineOptions({
-  name: 'NotificationDefinitions',
+  name: 'Vben5NotificationsDefinitions',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/notifications/groups/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { NotificationGroupDefinitionTable } from '@abp/notifications';
 
 defineOptions({
-  name: 'NotificationGroupDefinitions',
+  name: 'Vben5NotificationsGroupDefinitions',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/notifications/my-notifilers/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { MyNotificationTable } from '@abp/notifications';
 
 defineOptions({
-  name: 'MyNotifications',
+  name: 'Vben5NotificationsMyNotifilers',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/openiddict/applications/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { ApplicationTable } from '@abp/openiddict';
 
 defineOptions({
-  name: 'OpenIddictApplications',
+  name: 'Vben5OpenIddictApplications',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/openiddict/authorizations/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { AuthorizationTable } from '@abp/openiddict';
 
 defineOptions({
-  name: 'OpenIddictAuthorizations',
+  name: 'Vben5OpenIddictAuthorizations',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/openiddict/scopes/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { ScopeTable } from '@abp/openiddict';
 
 defineOptions({
-  name: 'OpenIddictScopes',
+  name: 'Vben5OpenIddictScopes',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/openiddict/tokens/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { TokenTable } from '@abp/openiddict';
 
 defineOptions({
-  name: 'OpenIddictTokens',
+  name: 'Vben5OpenIddictTokens',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/permissions/definitions/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { PermissionDefinitionTable } from '@abp/permissions';
 
 defineOptions({
-  name: 'PermissionDefinitions',
+  name: 'Vben5PermissionsDefinitions',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/permissions/groups/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { PermissionGroupDefinitionTable } from '@abp/permissions';
 
 defineOptions({
-  name: 'PermissionGroupDefinitions',
+  name: 'Vben5PermissionsGroupDefinitions',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/platform/data-dictionaries/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { DataDictionaryTable } from '@abp/platform';
 
 defineOptions({
-  name: 'PlatformDataDictionaries',
+  name: 'Vben5PlatformDataDictionaries',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/platform/layouts/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { LayoutTable } from '@abp/platform';
 
 defineOptions({
-  name: 'PlatformLayouts',
+  name: 'Vben5PlatformLayouts',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/platform/menus/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { MenuTable } from '@abp/platform';
 
 defineOptions({
-  name: 'PlatformMenus',
+  name: 'Vben5PlatformMenus',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/platform/messages/email/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { EmailMessageTable } from '@abp/platform';
 
 defineOptions({
-  name: 'PlatformEmailMessages',
+  name: 'Vben5PlatformEmailMessages',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/platform/messages/sms/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { SmsMessageTable } from '@abp/platform';
 
 defineOptions({
-  name: 'PlatformSmsMessages',
+  name: 'Vben5PlatformSmsMessages',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/saas/editions/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { EditionTable } from '@abp/saas';
 
 defineOptions({
-  name: 'SaasEditions',
+  name: 'Vben5SaasEditions',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/saas/tenants/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { TenantTable } from '@abp/saas';
 
 defineOptions({
-  name: 'SaasTenants',
+  name: 'Vben5SaasTenants',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/settings/definitions/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { SettingDefinitionTable } from '@abp/settings';
 
 defineOptions({
-  name: 'SettingDefinitions',
+  name: 'Vben5SettingsDefinitions',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/settings/system/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { SystemSetting } from '@abp/settings';
 
 defineOptions({
-  name: 'SystemSettings',
+  name: 'Vben5SettingsSystem',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/tasks/job-infos/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { JobInfoTable } from '@abp/tasks';
 
 defineOptions({
-  name: 'TaskManagementJobInfos',
+  name: 'Vben5TasksJobInfos',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/text-templating/definitions/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { TemplateDefinitionTable } from '@abp/text-templating';
 
 defineOptions({
-  name: 'TemplateDefinitions',
+  name: 'Vben5TextTemplatingDefinitions',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/webhooks/definitions/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { WebhookDefinitionTable } from '@abp/webhooks';
 
 defineOptions({
-  name: 'WebhookDefinitions',
+  name: 'Vben5WebhooksDefinitions',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/webhooks/groups/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { WebhookGroupDefinitionTable } from '@abp/webhooks';
 
 defineOptions({
-  name: 'WebhookGroupDefinitions',
+  name: 'Vben5WebhooksGroupDefinitions',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/webhooks/send-attempts/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { WebhookSendAttemptTable } from '@abp/webhooks';
 
 defineOptions({
-  name: 'WebhookSendAttempts',
+  name: 'Vben5WebhooksSendAttempts',
 });
 </script>
 

apps/vben5/apps/app-antd/src/views/webhooks/subscriptions/index.vue

@@ -4,7 +4,7 @@ import { Page } from '@vben/common-ui';
 import { WebhookSubscriptionTable } from '@abp/webhooks';
 
 defineOptions({
-  name: 'WebhookSubscriptions',
+  name: 'Vben5WebhooksSubscriptions',
 });
 </script>
 

apps/vben5/packages/@abp/platform/package.json

@@ -31,6 +31,7 @@
     "@vben/icons": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
+    "@vben/types": "workspace:*",
     "ant-design-vue": "catalog:",
     "lodash.clonedeep": "catalog:",
     "vue": "catalog:*",

apps/vben5/packages/@abp/platform/src/api/index.ts

@@ -2,6 +2,7 @@ export { useDataDictionariesApi } from './useDataDictionariesApi';
 export { useEmailMessagesApi } from './useEmailMessagesApi';
 export { useLayoutsApi } from './useLayoutsApi';
 export { useMenusApi } from './useMenusApi';
+export { useMyMenusApi } from './useMyMenusApi';
 export { useRoleMenusApi } from './useRoleMenusApi';
 export { useSmsMessagesApi } from './useSmsMessagesApi';
 export { useUserMenusApi } from './useUserMenusApi';

apps/vben5/packages/@abp/platform/src/api/useMyMenusApi.ts

@@ -0,0 +1,24 @@
+import type { ListResultDto } from '@abp/core';
+
+import type { MenuDto, MenuGetInput } from '../types/menus';
+
+import { useRequest } from '@abp/request';
+
+export function useMyMenusApi() {
+  const { cancel, request } = useRequest();
+
+  function getAllApi(input?: MenuGetInput): Promise<ListResultDto<MenuDto>> {
+    return request<ListResultDto<MenuDto>>(
+      '/api/platform/menus/by-current-user',
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+
+  return {
+    cancel,
+    getAllApi,
+  };
+}

apps/vben5/packages/@abp/platform/src/components/menus/MenuDrawer.vue

@@ -252,6 +252,7 @@ async function onLayoutChange(layoutId?: string) {
 
 function onInitMetaFormSchemas() {
   metaFormApi.removeSchemaByFields(menuMetas.value.map((x) => x.name));
+  const metaValues: Record<string, any> = {};
   menuMetas.value.forEach((dataItem) => {
     metaFormApi.setState((pre) => {
       let component = 'Input';
@@ -318,13 +319,13 @@ function onInitMetaFormSchemas() {
           break;
         }
       }
+      metaValues[dataItem.name] = defaultValue;
       return {
         schema: [
           ...(pre?.schema ?? []),
           {
             component,
             componentProps,
-            defaultValue,
             fieldName: dataItem.name,
             help: dataItem.description,
             label: dataItem.displayName,
@@ -335,6 +336,7 @@ function onInitMetaFormSchemas() {
       };
     });
   });
+  metaFormApi.setValues(metaValues);
   showMetaForm.value = true;
 }
 
@@ -356,7 +358,7 @@ function onInitMetaFormValues(meta?: Record<string, any>) {
         break;
       }
       case ValueType.Boolean: {
-        values[dataItem.name] = Boolean(metaValue);
+        values[dataItem.name] = String(metaValue) === 'true';
         break;
       }
       case ValueType.Date: {
@@ -372,7 +374,7 @@ function onInitMetaFormValues(meta?: Record<string, any>) {
         break;
       }
       case ValueType.String: {
-        values[dataItem.name] = metaValue;
+        values[dataItem.name] = String(metaValue);
         break;
       }
     }

apps/vben5/packages/@abp/platform/src/components/menus/MenuTable.vue

@@ -92,7 +92,7 @@ const gridOptions: VxeGridProps<MenuDto> = {
     {
       align: 'left',
       field: 'name',
-      minWidth: 150,
+      minWidth: 250,
       slots: { default: 'name' },
       title: $t('AppPlatform.DisplayName:Name'),
       treeNode: true,
@@ -253,7 +253,7 @@ onMounted(onGet);
 </script>
 
 <template>
-  <Grid :table-title="$t('AppPlatform.DisplayName:DataDictionary')">
+  <Grid :table-title="$t('AppPlatform.DisplayName:Menus')">
     <template #toolbar-tools>
       <Button
         v-if="isGranted([MenuPermissions.Create])"

apps/vben5/packages/@abp/platform/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useMenuTransform';

apps/vben5/packages/@abp/platform/src/hooks/useMenuTransform.ts

@@ -0,0 +1,85 @@
+import type { RouteRecordStringComponent } from '@vben/types';
+
+import type { MenuDto } from '../types';
+
+import { listToTree } from '@abp/core';
+
+export function useMenuTransform() {
+  function mapMetaString(meta: Record<string, any>, key: string) {
+    if (!meta[key]) {
+      return undefined;
+    }
+    return typeof meta[key] === 'string' ? meta[key] : String(meta[key]);
+  }
+  function mapMetaNumber(meta: Record<string, any>, key: string) {
+    if (!meta[key]) {
+      return undefined;
+    }
+    return typeof meta[key] === 'number' ? meta[key] : Number(meta[key]);
+  }
+  function mapMetaBoolean(meta: Record<string, any>, key: string) {
+    if (!meta[key]) {
+      return undefined;
+    }
+    return typeof meta[key] === 'boolean' ? meta[key] : meta[key] === 'true';
+  }
+  function mapMetaArray(meta: Record<string, any>, key: string) {
+    if (!meta[key]) {
+      return undefined;
+    }
+    return Array.isArray(meta[key]) ? meta[key] : String(meta[key]).split(',');
+  }
+  function transformRoutes(menus: MenuDto[]): RouteRecordStringComponent[] {
+    const combMenus = menus.map((item) => {
+      return {
+        component: item.component.includes('BasicLayout')
+          ? undefined
+          : item.component,
+        id: item.id,
+        meta: {
+          activeIcon: mapMetaString(item.meta, 'activeIcon'),
+          activePath: mapMetaString(item.meta, 'activePath'),
+          affixTab: mapMetaBoolean(item.meta, 'affixTab'),
+          affixTabOrder: mapMetaNumber(item.meta, 'affixTabOrder'),
+          authority: mapMetaArray(item.meta, 'authority'),
+          badge: mapMetaString(item.meta, 'badge'),
+          badgeType: mapMetaString(item.meta, 'badgeType'),
+          badgeVariants: mapMetaString(item.meta, 'badgeVariants'),
+          hideChildrenInMenu: mapMetaBoolean(item.meta, 'hideChildrenInMenu'),
+          hideInBreadcrumb: mapMetaBoolean(item.meta, 'hideInBreadcrumb'),
+          hideInMenu: mapMetaBoolean(item.meta, 'hideInMenu'),
+          hideInTab: mapMetaBoolean(item.meta, 'hideInTab'),
+          icon: mapMetaString(item.meta, 'icon'),
+          iframeSrc: mapMetaString(item.meta, 'iframeSrc'),
+          ignoreAccess: mapMetaBoolean(item.meta, 'ignoreAccess'),
+          keepAlive: mapMetaBoolean(item.meta, 'keepAlive'),
+          link: mapMetaString(item.meta, 'link'),
+          maxNumOfOpenTab: mapMetaNumber(item.meta, 'maxNumOfOpenTab'),
+          menuVisibleWithForbidden: mapMetaBoolean(
+            item.meta,
+            'menuVisibleWithForbidden',
+          ),
+          noBasicLayout: mapMetaBoolean(item.meta, 'noBasicLayout'),
+          openInNewWindow: mapMetaBoolean(item.meta, 'openInNewWindow'),
+          order: mapMetaNumber(item.meta, 'order'),
+          title: item.meta.title ?? item.displayName,
+        },
+        name: item.name,
+        parentId: item.parentId,
+        path: item.path,
+        redirect: item.redirect,
+      };
+    });
+    const routes = listToTree(combMenus, {
+      id: 'id',
+      pid: 'parentId',
+      children: 'children',
+    });
+
+    return routes;
+  }
+
+  return {
+    transformRoutes,
+  };
+}

apps/vben5/packages/@abp/platform/src/index.ts

@@ -1,3 +1,4 @@
 export * from './api';
 export * from './components';
+export * from './hooks';
 export * from './types';

apps/vben5/packages/effects/hooks/src/use-app-config.ts

@@ -21,6 +21,7 @@ export function useAppConfig(
     VITE_GLOB_AUDIENCE,
     VITE_GLOB_CLIENT_ID,
     VITE_GLOB_CLIENT_SECRET,
+    VITE_GLOB_UI_FRAMEWORK,
   } = config;
 
   return {
@@ -29,5 +30,6 @@ export function useAppConfig(
     audience: VITE_GLOB_AUDIENCE,
     clientId: VITE_GLOB_CLIENT_ID,
     clientSecret: VITE_GLOB_CLIENT_SECRET,
+    uiFramework: VITE_GLOB_UI_FRAMEWORK,
   };
 }

apps/vben5/packages/types/global.d.ts

@@ -13,6 +13,7 @@ export interface VbenAdminProAppConfigRaw {
   VITE_GLOB_CLIENT_SECRET: string;
   VITE_GLOB_AUTHORITY: string;
   VITE_GLOB_AUDIENCE?: string;
+  VITE_GLOB_UI_FRAMEWORK: string;
 }
 
 export interface ApplicationConfig {
@@ -21,6 +22,7 @@ export interface ApplicationConfig {
   audience?: string;
   clientId: string;
   clientSecret: string;
+  uiFramework: string;
 }
 
 declare global {