generator-mico-cli 0.2.1 → 0.2.2-8.beta.1

package/generators/micro-react/templates/apps/layout/src/common/menu/parser.ts

@@ -1,12 +1,83 @@
-import type { MenuItem, ParsedMenuItem, ParsedRoute } from './types';
+import { getCurrentLocale, LOCALE } from '@/common/locale';
+import { getMenuPage, getPages } from '@/common/portal-data';
+import { isAuthDisabled, isNoPermissionRoute } from '@/constants';
+import { getIntl } from '@umijs/max';
+import type {
+  MenuItem,
+  ParsedMenuItem,
+  ParsedRoute,
+  PublicPageItem,
+} from './types';
 
 /**
- * 获取 window 上挂载的菜单数据
+ * 从页面数据提取路由配置
  */
-export const getWindowMenus = (): MenuItem[] => {
-  if (typeof window === 'undefined') return [];
-  const menus = window.__MICO_MENUS__;
-  return Array.isArray(menus) ? menus : [];
+export const extractRoutesFromPages = (
+  pages: PublicPageItem[],
+): ParsedRoute[] => {
+  return pages
+    .filter((page) => page.enabled)
+    .map((page) => {
+      const hasEntry = page.htmlUrl || (page.jsUrls && page.jsUrls.length > 0);
+      return {
+        path: page.route,
+        name: page.name,
+        base: page.base || '/',
+        icon: '',
+        loadType: (hasEntry ? 'microapp' : 'internal') as
+          | 'internal'
+          | 'microapp',
+        entry: page.htmlUrl || page.jsUrls?.[0] || undefined,
+      };
+    });
+};
+
+/**
+ * 获取动态路由（从 __MICO_PAGES__）
+ */
+export const getDynamicRoutes = (): ParsedRoute[] => {
+  return extractRoutesFromPages(getPages());
+};
+
+/**
+ * 根据路径查找对应的页面配置
+ * 匹配逻辑与 findRouteByPath 一致（精确匹配 + 通配符匹配）
+ */
+/**
+ * 判断指定路径的页面是否为免认证页面
+ * 当 accessControlEnabled === false 时，跳过 SSO 认证和权限校验
+ */
+export const isPageAuthFree = (pathname: string): boolean => {
+  const page = findPageByPath(getPages(), pathname);
+  return page?.accessControlEnabled === false;
+};
+
+export const findPageByPath = (
+  pages: PublicPageItem[],
+  pathname: string,
+): PublicPageItem | undefined => {
+  let exact: PublicPageItem | undefined;
+  let bestWildcard: { page: PublicPageItem; basePath: string } | undefined;
+
+  for (const page of pages) {
+    if (!page.enabled) continue;
+
+    if (page.route === pathname) {
+      exact = page;
+      continue;
+    }
+
+    if (page.route.endsWith('/*')) {
+      const basePath = page.route.slice(0, -2);
+      if (pathname === basePath || pathname.startsWith(`${basePath}/`)) {
+        if (!bestWildcard || basePath.length > bestWildcard.basePath.length) {
+          bestWildcard = { page, basePath };
+        }
+      }
+    }
+  }
+
+  return exact || bestWildcard?.page;
 };
 
 export interface MenuFilterOptions {
@@ -16,7 +87,7 @@ export interface MenuFilterOptions {
   sideMenus?: string[];
 }
 
-const isSuperuserUser = (value?: boolean | number): boolean => {
+export const isSuperuserUser = (value?: boolean | number): boolean => {
   return value === true || value === 1;
 };
 
@@ -24,21 +95,60 @@ export const buildMenuPath = (parentPath: string, name: string): string => {
   return parentPath ? `${parentPath}.${name}` : name;
 };
 
+// ===== 多语言菜单标识符工具函数 =====
+
+/**
+ * 判断当前是否为中文语言环境
+ * 基于 localStorage 的 umi_locale 配置
+ */
+export const isChineseLocale = (): boolean => {
+  const locale = getCurrentLocale();
+  return locale === LOCALE.ZH_CN;
+};
+
+/**
+ * 获取菜单标识符（用于构建权限路径）
+ * - 中文格式：优先使用 name，兜底使用 nameKey
+ * - 英文格式：优先使用 nameEn，兜底使用 nameKey
+ * @param item 菜单项
+ * @param isChinese 是否中文格式
+ */
+export const getMenuIdentifier = (
+  item: MenuItem,
+  isChinese: boolean,
+): string => {
+  if (isChinese) {
+    return item.name || item.nameKey || '';
+  }
+  return item.nameEn || item.nameKey || '';
+};
+
 /**
  * 检查菜单路径是否允许访问（白名单逻辑）
+ * - 免权限校验路由，始终允许访问
  * - 超级用户可以访问所有菜单
- * - 非超级用户不能访问"权限管理"
+ * - 非超级用户不能访问 adminOnly 菜单
  * - 菜单路径在 sideMenus 中，或是 sideMenus 中某项的前缀（父级菜单）
  */
 const isMenuAllowed = (
   menuPath: string,
+  item: MenuItem,
   options: MenuFilterOptions,
 ): boolean => {
+  // 关闭权限控制时，所有菜单都允许访问
+  if (isAuthDisabled()) return true;
+
+  // 免权限校验路由，始终允许访问
+  const itemRoute = item.path ?? getMenuPage(item)?.route;
+  if (itemRoute && isNoPermissionRoute(itemRoute)) {
+    return true;
+  }
+
   // 超级用户可以访问所有菜单
   if (isSuperuserUser(options.isSuperuser)) return true;
 
-  // 非超级用户不能访问"权限管理"
-  if (menuPath === '权限管理') return false;
+  // 非超级用户不能访问 adminOnly 菜单
+  if (item.adminOnly) return false;
 
   const sideMenus = options.sideMenus || [];
 
@@ -55,13 +165,6 @@ const isMenuAllowed = (
   });
 };
 
-export const isRouteAllowed = (
-  menuPath: string,
-  options: MenuFilterOptions = {},
-): boolean => {
-  return isMenuAllowed(menuPath, options);
-};
-
 /**
  * 根据权限过滤菜单项（白名单逻辑）
  */
@@ -70,11 +173,16 @@ export const filterMenuItems = (
   options: MenuFilterOptions = {},
   parentPath = '',
 ): MenuItem[] => {
+  // 根据当前语言环境判断菜单标识符格式
+  const isChinese = isChineseLocale();
   return items
     .filter((item) => item.enabled)
     .map((item) => {
-      const menuPath = buildMenuPath(parentPath, item.name);
-      const isAllowed = isMenuAllowed(menuPath, options);
+      const menuPath = buildMenuPath(
+        parentPath,
+        getMenuIdentifier(item, isChinese),
+      );
+      const isAllowed = isMenuAllowed(menuPath, item, options);
 
       // 递归处理子菜单
       const nextChildren = item.children?.length
@@ -115,15 +223,13 @@ export const filterMenuItems = (
  * 判断页面的加载类型
  * 有 htmlUrl 或 jsUrls 时使用 qiankun 微应用加载
  */
-const getLoadType = (page: MenuItem['page']): 'internal' | 'microapp' => {
+const getLoadType = (
+  page: PublicPageItem | null | undefined,
+): 'internal' | 'microapp' => {
   if (!page) return 'internal';
-
-  // 有 htmlUrl 或 jsUrls 使用 qiankun 微应用加载
   if (page.htmlUrl || (page.jsUrls && page.jsUrls.length > 0)) {
     return 'microapp';
   }
-
-  // 否则使用内部路由
   return 'internal';
 };
 
@@ -131,11 +237,21 @@ const getLoadType = (page: MenuItem['page']): 'internal' | 'microapp' => {
  * 获取微应用入口 URL
  * 优先使用 htmlUrl，其次使用 jsUrls[0]
  */
-const getEntry = (page: MenuItem['page']): string | undefined => {
+const getEntry = (
+  page: PublicPageItem | null | undefined,
+): string | undefined => {
   if (!page) return undefined;
   return page.htmlUrl || page.jsUrls?.[0] || undefined;
 };
 
+/**
+ * 获取菜单标识符（默认版本，用于不需要权限匹配的场景）
+ * 优先使用 nameKey，兜底使用 name
+ */
+export const getMenuIdentifierDefault = (item: MenuItem): string => {
+  return item.nameKey || item.name;
+};
+
 /**
  * 递归提取所有路由配置
  */
@@ -147,18 +263,22 @@ export const extractRoutes = (
   for (const item of items) {
     if (!item.enabled) continue;
 
-    const menuPath = buildMenuPath(parentPath, item.name);
-
-    if (item.type === 'page' && item.page && item.page.enabled) {
-      const loadType = getLoadType(item.page);
-      routes.push({
-        path: item.page.route,
-        name: item.name,
-        icon: item.icon,
-        loadType,
-        entry: getEntry(item.page),
-        pageConfig: item.page,
-      });
+    const menuPath = buildMenuPath(parentPath, getMenuIdentifierDefault(item));
+
+    if (item.type === 'page' && item.pageId) {
+      const page = getMenuPage(item);
+      if (page && page.enabled) {
+        routes.push({
+          path: page.route,
+          base: page.base || '/',
+          name: item.name,
+          nameEn: item.nameEn,
+          icon: item.icon,
+          loadType: getLoadType(page),
+          entry: getEntry(page),
+          pageConfig: page,
+        });
+      }
     }
 
     if (item.children && item.children.length > 0) {
@@ -169,25 +289,50 @@ export const extractRoutes = (
   return routes;
 };
 
+/**
+ * 获取菜单项的显示名称
+ * 优先级：name/nameEn > nameKey（走 intl 国际化） > 兜底 name
+ */
+export const getMenuLabel = (
+  fields: { name?: string; nameEn?: string; nameKey?: string },
+  isChinese: boolean,
+): string => {
+  const directName = isChinese ? fields.name : fields.nameEn;
+  if (directName) return directName;
+
+  if (fields.nameKey) {
+    const intl = getIntl();
+    return intl.formatMessage({
+      id: fields.nameKey,
+      defaultMessage: fields.nameKey,
+    });
+  }
+
+  return fields.name || '';
+};
+
 /**
  * 将菜单数据转换为菜单组件需要的格式
  */
 export const parseMenuItems = (items: MenuItem[]): ParsedMenuItem[] => {
+  const isChinese = isChineseLocale();
+
   return items
+
     .filter((item) => item.enabled)
     .sort((a, b) => a.sortOrder - b.sortOrder)
     .map((item) => {
       const parsed: ParsedMenuItem = {
         key: String(item.id),
-        label: item.name,
+        label: getMenuLabel(item, isChinese),
         icon: item.icon,
         type: item.type,
       };
 
       if (item.type === 'link' && item.path) {
         parsed.path = item.path;
-      } else if (item.type === 'page' && item.page) {
-        parsed.path = item.page.route;
+      } else if (item.type === 'page') {
+        parsed.path = item.path ?? getMenuPage(item)?.route;
       }
 
       if (item.children && item.children.length > 0) {
@@ -198,6 +343,10 @@ export const parseMenuItems = (items: MenuItem[]): ParsedMenuItem[] => {
     });
 };
 
+/** 去除尾部斜杠（根路径 "/" 保持不变） */
+const stripTrailingSlash = (path: string): string =>
+  path.length > 1 && path.endsWith('/') ? path.slice(0, -1) : path;
+
 /**
  * 根据路径查找对应的路由配置
  */
@@ -205,18 +354,19 @@ export const findRouteByPath = (
   routes: ParsedRoute[],
   pathname: string,
 ): ParsedRoute | undefined => {
+  const normalizedPathname = stripTrailingSlash(pathname);
   let exact: ParsedRoute | undefined;
   let bestWildcard: { route: ParsedRoute; basePath: string } | undefined;
 
   for (const route of routes) {
-    if (route.path === pathname) {
+    if (stripTrailingSlash(route.path) === normalizedPathname) {
       exact = route;
       continue;
     }
 
     if (route.path.endsWith('/*')) {
       const basePath = route.path.slice(0, -2);
-      if (pathname === basePath || pathname.startsWith(`${basePath}/`)) {
+      if (normalizedPathname === basePath || normalizedPathname.startsWith(`${basePath}/`)) {
         if (!bestWildcard || basePath.length > bestWildcard.basePath.length) {
           bestWildcard = { route, basePath };
         }

package/generators/micro-react/templates/apps/layout/src/common/menu/types.ts

@@ -10,8 +10,14 @@ export interface PageConfig {
   id: number;
   /** 页面名称 */
   name: string;
+  /** 英文名称（用于英文环境权限匹配） */
+  nameEn?: string;
+  /** 菜单唯一标识符（用于权限匹配的兜底） */
+  nameKey?: string;
   /** 路由路径 */
   route: string;
+  /** 路由前缀路径 */
+  base: string;
   /** 是否启用 */
   enabled: boolean;
   /** 微应用 HTML 入口 URL (用于 qiankun 加载) */
@@ -24,6 +30,12 @@ export interface PageConfig {
   prefixPath: string;
   /** 路由匹配模式 */
   routeMode: PageRouteMode;
+  /** 是否仅超级管理员可见 */
+  adminOnly?: boolean;
+  /** 是否开启权限控制 */
+  accessControlEnabled: boolean;
+  /** 路由权限标识（用于匹配 sideMenus） */
+  routeKey: string | null;
   /** 关联的主文档 ID */
   mainDocumentId: number;
   /** 所属工作空间子域名 */
@@ -40,6 +52,15 @@ export interface PageConfig {
   updatedAt: string;
 }
 
+/**
+ * 公共页面配置 - 从 window.__MICO_PAGES__ 获取
+ * PageConfig 的子集，用于动态路由注册和页面级权限控制
+ */
+export type PublicPageItem = Omit<
+  PageConfig,
+  'workspaceSubdomain' | 'publishedBy' | 'versions' | 'createdAt' | 'updatedAt'
+>;
+
 /**
  * 菜单项类型
  */
@@ -51,6 +72,8 @@ export type MenuItemType = 'group' | 'page' | 'link';
 export interface MenuItem {
   id: number;
   name: string;
+  nameEn?: string;
+  nameKey?: string;
   type: MenuItemType;
   /** 路由路径或外链地址 */
   path: string | null;
@@ -59,8 +82,8 @@ export interface MenuItem {
   enabled: boolean;
   sortOrder: number;
   pageId: number | null;
-  /** 页面配置（type=page 时存在） */
-  page: PageConfig | null;
+  /** 是否仅超级管理员可见 */
+  adminOnly?: boolean;
   children: MenuItem[];
 }
 
@@ -69,15 +92,21 @@ export interface MenuItem {
  */
 export interface ParsedRoute {
   path: string;
-  /** 菜单显示名称 */
+  /** 微应用在主应用中的挂载前缀（来自页面配置 base，可与 path 不同） */
+  base: string;
+  /** 菜单显示名称（中文） */
   name: string;
+  /** 菜单显示名称（英文） */
+  nameEn?: string;
+  /** 国际化 key */
+  nameKey?: string;
   icon: string;
   /** 加载类型: internal(内部路由) | microapp(qiankun微应用) */
   loadType: 'internal' | 'microapp';
   /** 微应用入口 URL (htmlUrl 或 jsUrls[0]) */
   entry?: string;
   /** 原始页面配置 */
-  pageConfig?: PageConfig;
+  pageConfig?: PublicPageItem;
 }
 
 /**
@@ -97,7 +126,7 @@ export interface ParsedMenuItem {
  */
 export interface MicroAppProps {
   /** 主应用标识 */
-  mainApp: '<%= projectName %>';
+  mainApp: 'common-web';
   /** 共享的 request 实例，子应用可直接使用 */
   request: <T = any>(url: string, options?: any) => Promise<T>;
 }
@@ -118,6 +147,8 @@ export type WorkspaceStatus = 'active' | 'inactive' | 'pending';
 export interface WorkspaceConfig {
   /** 关联的应用 ID（可能为空） */
   appId: number | null;
+  /** CAS 服务端登录 URL，用于 SSO 外部登录跳转 */
+  casServerLoginUrl?: string;
   /** 创建时间 */
   createdAt: string;
   /** 创建者 ID */
@@ -151,10 +182,43 @@ export interface WorkspaceConfig {
  */
 declare global {
   interface Window {
+    __MICO_PAGES__?: PublicPageItem[];
     __MICO_MENUS__?: MenuItem[];
     __MICO_CONFIG__?: {
       appName?: string;
+      /** 站点/产品标题，用于登录页标题文案、logo alt 等 */
+      title?: string;
+      /** 登录页 logo 图片地址，不配置时使用应用内置 logo */
+      logo?: string;
+      appId?: string;
       apiBaseUrl?: string;
+      proxySuffix?: string;
+      loginEndpoint?: string;
+      refreshEndpoint?: string;
+      externalLoginPath?: string;
+      /** 请求客户端配置覆盖，与 config 中 defaultClientOptions 同名字段 */
+      defaultClientOptions?: Partial<
+        import('../request/types').RequestClientOptions
+      >;
+      /** 默认重定向路径，访问 "/" 时自动跳转到此路径 */
+      defaultPath?: string;
+      /**
+       * 免认证路由列表（跳过 SSO 登录）
+       * 支持精确匹配和前缀匹配（以 /* 结尾）
+       */
+      noAuthRouteList?: string[];
+      /**
+       * 免权限校验路由列表（跳过菜单权限检查）
+       * 支持精确匹配和前缀匹配（以 /* 结尾）
+       * 注意：如果同时需要跳过 SSO，需同时配置 noAuthRouteList
+       */
+      noPermissionRouteList?: string[];
+      /** 动态配置的不显示布局路由列表，支持精确匹配和前缀匹配（以 /* 结尾） */
+      noLayoutRouteList?: string[];
+      /** 关闭权限控制（菜单全部显示，路由不校验权限） */
+      disableAuth?: boolean;
+      /** 获取时区列表的 API 地址 */
+      timezoneListUrl?: string;
       [key: string]: unknown;
     };
     __MICO_WORKSPACE__?: WorkspaceConfig | null;

package/generators/micro-react/templates/apps/layout/src/common/micro/index.ts

@@ -32,6 +32,40 @@ export type {
   MicroAppErrorSource,
 } from './types';
 
+
+// ============================================
+// 微应用名称生成
+// ============================================
+
+/**
+ * 从 entry URL 中提取微应用标识
+ * 同一个 entry 的所有路由使用相同的标识，避免频繁卸载/重载微应用
+ *
+ * 注意：使用完整的 origin + pathname 作为标识，避免同一 host 上多个子应用冲突
+ * 例如：http://localhost:8010/app1/ 和 http://localhost:8010/app2/ 会有不同的标识
+ *
+ * @param entry 微应用入口 URL
+ * @returns 微应用标识（字母数字和连字符组成）
+ */
+export const getAppNameFromEntry = (entry: string): string => {
+  try {
+    const url = new URL(entry, window.location.href);
+    // 使用 origin + pathname 作为标识，确保不同路径的子应用有不同标识
+    // 如 "localhost-8010" 或 "localhost-8010-app1"
+    const identifier = url.host + url.pathname;
+    return identifier
+      .replace(/[^a-zA-Z0-9]/g, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '');
+  } catch {
+    // fallback：使用 entry 的 hash
+    return entry
+      .replace(/[^a-zA-Z0-9]/g, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '');
+  }
+};
+
 // ============================================
 // 环境检测
 // ============================================

package/generators/micro-react/templates/apps/layout/src/common/micro-prefetch.ts

@@ -0,0 +1,109 @@
+/**
+ * 微应用预加载管理
+ *
+ * 策略：当前子应用挂载成功后，再逐个预加载其他子应用
+ * 避免与当前加载的子应用竞争网络带宽
+ */
+
+import { prefetchApps } from 'qiankun';
+import { extractRoutes } from './menu';
+import { getMenus } from './portal-data';
+import { getAppNameFromEntry } from './micro';
+
+/**
+ * 是否启用微应用预加载
+ * - 可通过 URL 参数 ?prefetch=false 禁用（方便调试加载时序问题）
+ * - 可通过 localStorage.setItem('DISABLE_MICRO_APP_PREFETCH', 'true') 禁用
+ * - 默认启用
+ */
+export const isPrefetchEnabled = (): boolean => {
+  if (typeof window === 'undefined') return false;
+
+  // URL 参数优先级最高
+  const urlParams = new URLSearchParams(window.location.search);
+  const prefetchParam = urlParams.get('prefetch');
+  if (prefetchParam === 'false') {
+    console.log('[Prefetch] Disabled via URL parameter');
+    return false;
+  }
+
+  // localStorage 开关
+  if (localStorage.getItem('DISABLE_MICRO_APP_PREFETCH') === 'true') {
+    console.log('[Prefetch] Disabled via localStorage');
+    return false;
+  }
+
+  return true;
+};
+
+/** 已预加载的应用 entry 集合 */
+const prefetchedApps = new Set<string>();
+
+/**
+ * 获取所有需要预加载的微应用（排除已预加载的）
+ */
+export const getMicroAppsForPrefetch = (
+  excludeEntry?: string,
+): Array<{ name: string; entry: string }> => {
+  try {
+    const menus = getMenus();
+    const routes = extractRoutes(menus);
+
+    return routes
+      .filter(
+        (route) =>
+          route.loadType === 'microapp' &&
+          route.entry &&
+          route.entry !== excludeEntry &&
+          !prefetchedApps.has(route.entry),
+      )
+      .map((route) => ({
+        name: getAppNameFromEntry(route.entry!),
+        entry: route.entry!,
+      }));
+  } catch (error) {
+    console.warn('[Prefetch] Failed to get micro apps:', error);
+    return [];
+  }
+};
+
+/**
+ * 预加载微应用（低优先级，在浏览器空闲时并发预加载）
+ * @param currentEntry 当前正在加载的应用 entry，会被排除
+ */
+export const prefetchMicroAppsLowPriority = (currentEntry?: string): void => {
+  if (!isPrefetchEnabled()) {
+    return;
+  }
+
+  const apps = getMicroAppsForPrefetch(currentEntry);
+  if (apps.length === 0) {
+    return;
+  }
+
+  // 标记为已预加载，避免重复
+  apps.forEach((app) => prefetchedApps.add(app.entry));
+
+  console.log(
+    '[Prefetch] Will prefetch micro apps:',
+    apps.map((a) => a.name),
+  );
+
+  // 使用 requestIdleCallback 确保在浏览器空闲时执行，不阻塞当前渲染
+  const doPrefetch = () => {
+    prefetchApps(apps); // qiankun 会并发预加载所有应用
+  };
+
+  if ('requestIdleCallback' in window) {
+    window.requestIdleCallback(doPrefetch, { timeout: 5000 });
+  } else {
+    setTimeout(doPrefetch, 100);
+  }
+};
+
+/**
+ * 标记应用已加载（避免重复预加载）
+ */
+export const markAppAsPrefetched = (entry: string): void => {
+  prefetchedApps.add(entry);
+};

package/generators/micro-react/templates/apps/layout/src/common/portal-data.ts

@@ -0,0 +1,45 @@
+/**
+ * 全局数据源管理
+ *
+ * 统一管理 window.__MICO_PAGES__ 和 window.__MICO_MENUS__ 的访问与索引。
+ * 数据由中台注入，每次直接从 window 读取（避免缓存导致时序问题）。
+ * pageId 索引惰性构建，数据就绪后缓存。
+ */
+import type { MenuItem, PublicPageItem } from './menu/types';
+
+/** 获取页面列表 (window.__MICO_PAGES__) */
+export const getPages = (): PublicPageItem[] => {
+  if (typeof window === 'undefined') return [];
+  return Array.isArray(window.__MICO_PAGES__) ? window.__MICO_PAGES__ : [];
+};
+
+/** 获取菜单树 (window.__MICO_MENUS__) */
+export const getMenus = (): MenuItem[] => {
+  if (typeof window === 'undefined') return [];
+  return Array.isArray(window.__MICO_MENUS__) ? window.__MICO_MENUS__ : [];
+};
+
+/** 是否有页面数据可用 */
+export const hasPages = (): boolean => {
+  return getPages().length > 0;
+};
+
+let _pageIdIndex: Map<number, PublicPageItem> | null = null;
+
+const getPageIdIndex = (): Map<number, PublicPageItem> => {
+  const pages = getPages();
+  if (!_pageIdIndex || (_pageIdIndex.size === 0 && pages.length > 0)) {
+    _pageIdIndex = new Map(pages.map((p) => [p.id, p]));
+  }
+  return _pageIdIndex;
+};
+
+/** 通过 pageId 查找页面（O(1)） */
+export const getPageById = (pageId: number): PublicPageItem | undefined => {
+  return getPageIdIndex().get(pageId);
+};
+
+/** 获取菜单项关联的页面 */
+export const getMenuPage = (item: MenuItem): PublicPageItem | undefined => {
+  return item.pageId ? getPageById(item.pageId) : undefined;
+};