generator-mico-cli 0.2.4 → 0.2.5

package/generators/micro-react/templates/apps/layout/src/app.tsx

@@ -13,7 +13,6 @@ import { extractRoutes, getWindowMenus } from './common/menu';
 import { ensureSsoSession } from './common/request/sso';
 import {
   clearMicroAppProps,
-  getAppNameFromEntry,
   type IMicroAppProps,
   setMicroAppProps,
 } from './common/micro';
@@ -76,74 +75,6 @@ if (typeof window !== 'undefined') {
   });
 }
 
-// ==================== 微应用预加载 ====================
-// 预加载所有微应用资源，避免快速切换时的竞态条件
-// 当资源已预加载时，loadMicroApp 的异步加载会快速完成，减少容器不存在的错误
-
-/**
- * 是否启用微应用预加载
- * - 可通过 URL 参数 ?prefetch=false 禁用（方便调试加载时序问题）
- * - 可通过 localStorage.setItem('DISABLE_MICRO_APP_PREFETCH', 'true') 禁用
- * - 默认启用
- */
-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('[App] Prefetch disabled via URL parameter');
-    return false;
-  }
-
-  // localStorage 开关
-  if (localStorage.getItem('DISABLE_MICRO_APP_PREFETCH') === 'true') {
-    console.log('[App] Prefetch disabled via localStorage');
-    return false;
-  }
-
-  return true;
-};
-
-const prefetchMicroApps = () => {
-  if (!isPrefetchEnabled()) {
-    return;
-  }
-
-  try {
-    const menus = getWindowMenus();
-    const routes = extractRoutes(menus);
-
-    // 筛选出所有微应用路由
-    // 使用 getAppNameFromEntry 生成 name，与 loadMicroApp 保持一致，确保预加载缓存命中
-    const microApps = routes
-      .filter((route) => route.loadType === 'microapp' && route.entry)
-      .map((route) => ({
-        name: getAppNameFromEntry(route.entry!),
-        entry: route.entry!,
-      }));
-
-    if (microApps.length > 0) {
-      console.log('[App] Prefetching micro apps:', microApps);
-      prefetchApps(microApps);
-    }
-  } catch (error) {
-    console.warn('[App] Failed to prefetch micro apps:', error);
-  }
-};
-
-// 在页面加载后预加载微应用
-if (typeof window !== 'undefined') {
-  // 使用 requestIdleCallback 在浏览器空闲时预加载，避免影响首屏渲染
-  if ('requestIdleCallback' in window) {
-    window.requestIdleCallback(() => prefetchMicroApps(), { timeout: 3000 });
-  } else {
-    // 降级方案：延迟 1 秒后预加载
-    setTimeout(prefetchMicroApps, 1000);
-  }
-}
-
 // ==================== 微前端共享依赖 ====================
 // 将公共库暴露到 window，供子应用复用，避免重复打包
 // 子应用通过 externals 配置引用这些全局变量

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

@@ -0,0 +1,108 @@
+/**
+ * 微应用预加载管理
+ *
+ * 策略：当前子应用挂载成功后，再逐个预加载其他子应用
+ * 避免与当前加载的子应用竞争网络带宽
+ */
+
+import { prefetchApps } from 'qiankun';
+import { extractRoutes, getWindowMenus } from './menu';
+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 = getWindowMenus();
+    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/request/index.ts

@@ -16,7 +16,7 @@
 
 import { request as rawRequest } from '@umijs/max';
 import { setStoredAuthToken } from '../auth/auth-manager';
-import { ROUTES } from '../constants';
+import { NO_AUTH_ROUTE_LIST } from '@/constants';
 
 // 配置相关
 import {
@@ -64,7 +64,7 @@ initDefaultInterceptors(isFetchingToken, addToPendingQueue);
  * 判断当前路由是否跳过认证
  */
 const shouldSkipAuth = (): boolean => {
-  return ROUTES.NO_AUTH_ROUTES.includes(location.pathname);
+  return NO_AUTH_ROUTE_LIST.includes(location.pathname);
 };
 
 /**

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

@@ -57,6 +57,9 @@ let isInUserInteraction = false;
 /** 交互结束时间（用于 grace period） */
 let interactionEndTime = 0;
 
+/** 当前用户交互开始时间（用于判断意图是否在当前交互期间设置的） */
+let currentInteractionStartTime = 0;
+
 /** 调试模式 */
 const DEBUG = true;
 
@@ -180,8 +183,33 @@ export function getIntentDebugInfo(): object {
  * 判断是否应该拦截此次导航
  */
 function shouldIntercept(targetPath: string): boolean {
-  // 1. 在用户交互上下文中，允许导航并更新意图
+  const targetBase = getBasePath(targetPath);
+
+  // 1. 在用户交互上下文中
   if (isInInteractionContext()) {
+    // 检查是否有有效意图，且意图是在当前用户交互期间由 setUserIntent 设置的
+    // 只有这种情况才需要检查匹配，以防止微应用在 mount 过程中推送错误的路由
+    //
+    // 关键区分：
+    // - 意图在当前交互之前设置（如页面加载时）：允许用户的新导航覆盖旧意图
+    // - 意图在当前交互期间由 setUserIntent 设置：正在进行微应用切换，需要保护
+    if (isIntentValid() && !currentIntent!.fromInteraction) {
+      // 检查意图是否在当前交互期间设置的
+      const isIntentFromCurrentInteraction = currentIntent!.timestamp >= currentInteractionStartTime;
+      if (isIntentFromCurrentInteraction) {
+        const intentBase = getBasePath(currentIntent!.path);
+        if (targetBase !== intentBase) {
+          warn('❌ 拦截不匹配意图的导航（交互上下文中）:', {
+            targetPath,
+            targetBase,
+            intentPath: currentIntent!.path,
+            intentBase,
+          });
+          return true;
+        }
+      }
+    }
+    // 目标匹配意图、无有效意图、或意图是旧的，允许导航并更新意图
     log('用户交互触发导航:', targetPath);
     currentIntent = {
       path: targetPath,
@@ -198,7 +226,6 @@ function shouldIntercept(targetPath: string): boolean {
   }
 
   // 3. 有有效意图，检查目标路径是否匹配
-  const targetBase = getBasePath(targetPath);
   const intentBase = getBasePath(currentIntent!.path);
 
   if (targetBase === intentBase) {
@@ -273,6 +300,8 @@ if (typeof window !== 'undefined') {
 
       log('用户交互开始:', event.type);
       isInUserInteraction = true;
+      // 记录交互开始时间，用于判断意图是否在当前交互期间设置的
+      currentInteractionStartTime = Date.now();
 
       // 在当前事件循环结束后重置标记
       // 使用 setTimeout 0 确保同步代码执行完毕

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

@@ -3,7 +3,7 @@
  * 支持在 localStorage 中存储主题状态，并在页面加载时动态加载对应的主题
  */
 
-import { THEME } from './constants';
+import { THEME } from '@/constants';
 
 export type ThemeMode = 'light' | 'dark';
 

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

@@ -3,7 +3,7 @@ import type { UploadProps } from '@arco-design/web-react';
 import { Message } from '@arco-design/web-react';
 import type { UploadItem } from '@arco-design/web-react/es/Upload';
 import SparkMD5 from 'spark-md5';
-import type { TDirCategory } from '../constants';
+import type { TDirCategory } from '@/constants';
 import type {
   OssUploadError,
   UploadLifecycleEvent,

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

@@ -1,4 +1,4 @@
-import type { TDirCategory } from '../constants';
+import type { TDirCategory } from '@/constants';
 
 export interface UploadLifecycleEvent {
   stage: 'hashing' | 'signing' | 'uploading';

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

@@ -1,7 +1,7 @@
 // ! 这个函数不能放到 ./helpers.ts 中，因为 ./request/index.ts 从 ./helpers.ts 导入了 getFromStorage, safeParseJSON，如果放到 ./helpers.ts 中，会导致循环引入
 // ! 开发态下，发生循环引入时， mako 不会有编译时报错，但运行时会报错
 
-import type { TDirCategory } from './constants';
+import type { TDirCategory } from '@/constants';
 import { uploadToOss } from './upload/oss';
 
 /** 上传文件到 OSS 并获取 URL */

package/generators/micro-react/templates/apps/layout/src/components/MicroAppLoader/micro-app-manager.ts

@@ -14,11 +14,14 @@
  */
 
 import type { MicroApp } from 'qiankun';
-import { loadMicroApp, prefetchApps } from 'qiankun';
+import { loadMicroApp } from 'qiankun';
 import { microAppLogger } from '@/common/logger';
 // 导入路由守卫（会自动初始化）
 import { refreshUserIntent, setUserIntent } from '@/common/route-guard';
 
+// 导入低优先级预加载函数
+import { markAppAsPrefetched, prefetchMicroAppsLowPriority } from '@/common/micro-prefetch';
+
 // ============================================================================
 // 类型定义
 // ============================================================================
@@ -171,6 +174,8 @@ class MicroAppManager {
         if (cached.container.parentElement !== config.target) {
           activateContainer(cached.container, config.target);
         }
+        // 通知组件当前状态（重要：组件可能在 cleanup 后重新挂载，需要同步状态）
+        this.updateState({ loading: false, error: null, mounted: true });
       }
       return;
     }
@@ -273,14 +278,6 @@ class MicroAppManager {
     this.updateState({ loading: true, error: null, mounted: false });
 
     try {
-      // 预加载资源
-      if (!this.appCache.has(request.name)) {
-        try {
-          prefetchApps([{ name: request.name, entry: request.entry }]);
-        } catch (error) {
-          microAppLogger.warn('Prefetch failed:', error);
-        }
-      }
 
       if (this.shouldAbort(request.name, mySeq)) {
         console.log('🔍[路由调试] ⚠️ Aborted before load', { name: request.name, mySeq, operationSeq: this.operationSeq });
@@ -317,13 +314,21 @@ class MicroAppManager {
           console.log('🔍[路由调试] 等待缓存实例 mountPromise...', { name: request.name });
           await withTimeout(appInstance.microApp.mountPromise, MOUNT_TIMEOUT, '子应用挂载超时');
           console.log('🔍[路由调试] 缓存实例 mountPromise 完成', { name: request.name, status: appInstance.microApp.getStatus() });
+          // 重要：mount 完成后立即更新 props，确保子应用使用最新的 routePath
+          // qiankun 的 mount() 使用的是创建实例时的原始 props，可能包含过期的 routePath
+          appInstance.microApp.update?.(request.props);
+          console.log('🔍[路由调试] 缓存实例 props 已更新（BOOTSTRAPPING 后）', { name: request.name });
         } else if (status === 'NOT_MOUNTED') {
           // 实例之前被 unmount 过，需要重新 mount
           console.log('🔍[路由调试] 开始 mount 缓存实例', { name: request.name });
           await withTimeout(appInstance.microApp.mount(), MOUNT_TIMEOUT, '子应用挂载超时');
           console.log('🔍[路由调试] 缓存实例 mount 完成', { name: request.name, status: appInstance.microApp.getStatus() });
+          // 重要：mount 完成后立即更新 props，确保子应用使用最新的 routePath
+          // qiankun 的 mount() 使用的是创建实例时的原始 props，可能包含过期的 routePath
+          appInstance.microApp.update?.(request.props);
+          console.log('🔍[路由调试] 缓存实例 props 已更新（NOT_MOUNTED 后）', { name: request.name });
         }
-        // 如果 status === 'MOUNTED'，则无需操作
+        // 如果 status === 'MOUNTED'，则无需操作（已在 switchTo 入口处处理）
 
         // 刷新意图，保护 mount 成功后的短暂窗口期
         refreshUserIntent();
@@ -344,6 +349,10 @@ class MicroAppManager {
         console.log('🔍[路由调试] ✅ 缓存实例挂载成功', { name: request.name, qiankunName: appInstance.qiankunName, status: appInstance.microApp.getStatus() });
         this.updateState({ loading: false, error: null, mounted: true });
 
+        // 挂载成功后，标记当前应用已加载，并触发其他应用的低优先级预加载
+        markAppAsPrefetched(request.entry);
+        prefetchMicroAppsLowPriority(request.entry);
+
       } else {
         // 创建新实例
         // 使用唯一的 qiankun 实例名称，避免 qiankun 内部状态冲突
@@ -400,6 +409,11 @@ class MicroAppManager {
         await withTimeout(microApp.mountPromise, MOUNT_TIMEOUT, '子应用挂载超时');
         console.log('🔍[路由调试] mountPromise 完成', { name: request.name, qiankunName, status: microApp.getStatus() });
 
+        // 重要：mount 完成后调用 update，触发子应用的路由同步
+        // 由于子应用 mount 生命周期不再调用 syncRoute，需要通过 update 来同步路由
+        microApp.update?.(request.props);
+        console.log('🔍[路由调试] 新实例 props 已更新', { name: request.name });
+
         // 刷新意图，保护 mount 成功后的短暂窗口期
         refreshUserIntent();
 
@@ -421,6 +435,10 @@ class MicroAppManager {
         // 这样可以防止被 abort 的子应用在后台执行时修改路由
         console.log('🔍[路由调试] ✅ 新实例挂载成功', { name: request.name, qiankunName, status: microApp.getStatus() });
         this.updateState({ loading: false, error: null, mounted: true });
+
+        // 挂载成功后，标记当前应用已加载，并触发其他应用的低优先级预加载
+        markAppAsPrefetched(request.entry);
+        prefetchMicroAppsLowPriority(request.entry);
       }
 
       if (this.pendingRequest) {

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

@@ -1,15 +1,74 @@
-export const DEFAULT_NAME = 'Umi Max';
+/**
+ * 应用常量定义
+ */
 
 /**
- * 无需认证的路由路径
+ * 路由路径常量
  */
-export const NO_AUTH_ROUTES = {
+export const ROUTES = {
+  /** 登录页 */
   LOGIN: '/user/login',
+  /** 注册页 */
+  REGISTER: '/user/register',
+  /** 注册结果页 */
+  REGISTER_RESULT: '/user/register-result',
+  /** 403 无权限页 */
   FORBIDDEN: '/403',
+  /** 404 未找到页 */
   NOT_FOUND: '/404',
 } as const;
 
 /**
  * 无需认证的路由列表
  */
-export const NO_AUTH_ROUTE_LIST = Object.values(NO_AUTH_ROUTES);
+export const NO_AUTH_ROUTE_LIST: string[] = [
+  ROUTES.LOGIN,
+  ROUTES.REGISTER,
+  ROUTES.REGISTER_RESULT,
+  ROUTES.FORBIDDEN,
+  ROUTES.NOT_FOUND,
+];
+
+/**
+ * 主题相关常量
+ */
+export const THEME = {
+  /** localStorage 存储键 */
+  STORAGE_KEY: 'audit-center-theme',
+  /** 默认主题 */
+  DEFAULT: 'light' as const,
+  /** 可选主题值 */
+  VALUES: ['light', 'dark'] as const,
+} as const;
+
+/**
+ * 时区相关常量
+ */
+export const TIMEZONE = {
+  /** localStorage 存储键（IANA 时区，如 Asia/Shanghai） */
+  STORAGE_KEY: 'audit-center-timezone',
+  /** localStorage 存储键（用于展示的地区/名称，可选） */
+  REGION_STORAGE_KEY: 'audit-center-timezone-region',
+} as const;
+
+/**
+ * 在线状态相关常量
+ */
+export const PRESENCE = {
+  /** localStorage 存储键 */
+  STORAGE_KEY: 'audit-center-presence-status',
+} as const;
+
+/**
+ * 存储键常量
+ */
+export const STORAGE_KEYS = {
+  APP_INFO: 'appInfo',
+  IS_SUPERUSER: 'is_superuser',
+  GROUPS: 'groups',
+} as const;
+
+/**
+ * OSS 上传目录分类
+ */
+export type TDirCategory = number;

package/generators/subapp-react/templates/homepage/src/app.tsx

@@ -11,25 +11,6 @@ import { history } from '@umijs/max';
 import { appLogger } from './common/logger';
 import { type IMicroAppProps, setMainAppProps } from './common/mainApp';
 
-/**
- * @name 独立运行时加载主题
- * @description 仅在开发环境且非 qiankun 环境中加载主题样式
- *
- * 实现原理：
- * - 生产构建时 process.env.NODE_ENV !== 'development'，整个 if 块被 tree-shake
- * - 开发环境独立运行时加载主题，支持本地预览
- * - 作为微应用运行时（无论开发还是生产），使用主应用的主题
- */
-if (process.env.NODE_ENV === 'development') {
-  // 开发环境：运行时检测是否独立运行
-  if (typeof window !== 'undefined' && !window.__POWERED_BY_QIANKUN__) {
-    // 直接导入主题样式（开发环境下会被打包）
-    import('./styles/theme.less');
-    appLogger.log('Running standalone in dev mode, theme loaded');
-  }
-}
-// 生产环境：作为微应用时，主题由主应用注入，无需加载
-
 /**
  * @name 路由同步工具
  * @description 处理主应用与子应用之间的路由同步，支持通配符路由模式
@@ -73,11 +54,10 @@ export const qiankun = {
     // 保存主应用传递的 props，包括 request 实例
     setMainAppProps(props);
 
-    // 初始路由同步：延迟到下一帧确保 React 组件已初始化
-    if (props.routePath) {
-      const routePath = props.routePath;
-      requestAnimationFrame(() => syncRoute(routePath, 'initial route sync'));
-    }
+    // 注意：不在 mount 中调用 syncRoute
+    // 原因：当子应用从缓存复用时，mount 时的 props 可能是旧的（包含过期的 routePath）
+    // 主应用的 MicroAppManager 会在 mount 完成后立即调用 update() 传递正确的 props
+    // 路由同步完全由 update 生命周期处理，避免 mount 中的旧 routePath 覆盖正确的路由
   },
 
   /**

package/generators/subapp-react/templates/homepage/src/global.less

@@ -3,10 +3,10 @@
  * @description homepage 子应用的全局样式
  */
 
-// 仅导入 Less 变量（不包含 CSS 变量定义，避免重复打包）
-// CSS 变量由主应用（layout）注入到 body 上
-// Less 变量通过 var(--xxx) 引用 CSS 变量，自动适配主题
-@import '<%= packageScope %>/shared-styles/variables-only';
+// 导入共享样式入口（包含 CSS 变量 + Less 变量 + Arco 覆盖样式）
+// 注意：作为微前端子应用运行时，主应用会先加载这些样式
+// 独立运行时，需要自己加载完整样式（包括 Arco 组件覆盖）
+@import '<%= packageScope %>/shared-styles';
 
 * {
   box-sizing: border-box;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-mico-cli",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Yeoman generator for Mico CLI projects",
   "keywords": [
     "yeoman-generator",