generator-mico-cli 0.2.1 → 0.2.2

package/generators/micro-react/templates/apps/layout/config/config.dev.ts

@@ -23,6 +23,7 @@ const config: ReturnType<typeof defineConfig> = {
         window.__MICO_CONFIG__ = {
           appName: 'Mico Center',
           apiBaseUrl: '',
+          defaultPath: '',
         };
       `,
     },

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

@@ -1,5 +1,5 @@
-import { history, type RequestConfig } from '@umijs/max';
-import { prefetchApps } from 'qiankun';
+import { history, Navigate, type RequestConfig } from '@umijs/max';
+import { addGlobalUncaughtErrorHandler, prefetchApps } from 'qiankun';
 import { errorConfig } from './requestErrorConfig';
 // 解决「React19 中无法使用 Message/Notification」的问题。 @see https://github.com/arco-design/arco-design/issues/2900#issuecomment-2796571653
 import * as arco from '@arco-design/web-react';
@@ -21,6 +21,57 @@ import MicroAppLoader from './components/MicroAppLoader';
 import { NO_AUTH_ROUTE_LIST } from './constants';
 import './global.less';
 
+// ==================== qiankun 全局错误处理 ====================
+// 捕获子应用运行时未捕获的异常，防止页面崩溃
+
+/**
+ * 注册 qiankun 全局未捕获错误处理器
+ * 处理以下场景：
+ * 1. 子应用 JS 运行时错误
+ * 2. 子应用生命周期钩子抛出的异常
+ * 3. 子应用资源加载失败
+ */
+if (typeof window !== 'undefined') {
+  addGlobalUncaughtErrorHandler((event: Event | string) => {
+    // 提取错误信息
+    const error =
+      event instanceof ErrorEvent
+        ? event.error
+        : event instanceof PromiseRejectionEvent
+        ? event.reason
+        : event;
+
+    const errorMessage =
+      error instanceof Error
+        ? error.message
+        : typeof error === 'string'
+        ? error
+        : 'Unknown micro-app error';
+
+    console.error('[qiankun] Global uncaught error:', {
+      error,
+      message: errorMessage,
+      type: event instanceof Event ? event.type : 'unknown',
+    });
+
+    // 检查是否是子应用加载失败（资源 404 等）
+    const isLoadError =
+      errorMessage.includes('Failed to fetch') ||
+      errorMessage.includes('Loading chunk') ||
+      errorMessage.includes('load') ||
+      errorMessage.includes('Script error');
+
+    if (isLoadError) {
+      console.error(
+        '[qiankun] Micro-app resource loading failed. Please check if the micro-app server is running.',
+      );
+    }
+
+    // 注意：这里不阻止错误冒泡，让控制台仍能显示原始错误
+    // 如果需要阻止，可以 return true
+  });
+}
+
 // ==================== 微应用预加载 ====================
 // 预加载所有微应用资源，避免快速切换时的竞态条件
 // 当资源已预加载时，loadMicroApp 的异步加载会快速完成，减少容器不存在的错误
@@ -226,6 +277,23 @@ export function patchClientRoutes({ routes }: { routes: UmiRoute[] }) {
   });
 }
 
+
+/**
+ * @name 路由变化处理
+ * @description 处理 defaultPath 重定向：访问 "/" 时自动跳转到配置的默认路径
+ * @doc https://umijs.org/docs/api/runtime-config#onroutechange
+ */
+export function onRouteChange({
+  location,
+}: {
+  location: { pathname: string };
+}) {
+  const defaultPath = window.__MICO_CONFIG__?.defaultPath;
+  if (location.pathname === '/' && defaultPath && defaultPath !== '/') {
+    history.replace(defaultPath);
+  }
+}
+
 /**
  * @name qiankun 微前端子应用生命周期
  * @description 当应用作为 qiankun 子应用运行时，这些生命周期会被调用

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

@@ -155,6 +155,8 @@ declare global {
     __MICO_CONFIG__?: {
       appName?: string;
       apiBaseUrl?: string;
+      /** 默认重定向路径，访问 "/" 时自动跳转到此路径 */
+      defaultPath?: string;
       [key: string]: unknown;
     };
     __MICO_WORKSPACE__?: WorkspaceConfig | null;

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

@@ -5,6 +5,8 @@
  * 1. 容器在 document.body 中创建，与 React 生命周期解耦
  * 2. 激活时移动到占位元素内，参与正常文档流
  * 3. 停用时移回 body 并隐藏
+ * 4. 加载状态锁防止并发加载冲突
+ * 5. unmount 超时机制防止子应用卡死
  *
  * 这样既避免了 React unmount 时删除容器导致的竞态问题，
  * 又能让容器在激活时参与正常的 CSS 布局。
@@ -19,12 +21,18 @@ import type { MicroApp } from 'qiankun';
 // ============================================================================
 
 type ContainerStatus = 'active' | 'hidden' | 'pending-delete';
+type LoadingStatus = 'idle' | 'loading' | 'mounted' | 'unmounting';
 
 interface ContainerEntry {
   container: HTMLElement;
   microApp: MicroApp | null;
   status: ContainerStatus;
+  loadingStatus: LoadingStatus;
   deleteTimer: ReturnType<typeof setTimeout> | null;
+  /** 当前加载会话 ID，用于取消过期的加载操作 */
+  loadSessionId: number;
+  /** 等待卸载完成的 Promise */
+  unmountPromise: Promise<void> | null;
 }
 
 // ============================================================================
@@ -34,6 +42,9 @@ interface ContainerEntry {
 /** 容器删除延迟（毫秒）- 给 qiankun 足够时间完成清理 */
 const DELETE_DELAY = 5000;
 
+/** unmount 超时时间（毫秒）- 防止子应用卡死 */
+const UNMOUNT_TIMEOUT = 10000;
+
 /** CSS 类名 */
 const CSS_CLASS = {
   base: 'micro-app-container-managed',
@@ -47,6 +58,40 @@ const CSS_CLASS = {
 
 const containers = new Map<string, ContainerEntry>();
 
+/** 全局会话 ID 计数器 */
+let globalSessionId = 0;
+
+// ============================================================================
+// 工具函数
+// ============================================================================
+
+/**
+ * 带超时的 Promise
+ */
+function withTimeout<T>(
+  promise: Promise<T>,
+  ms: number,
+  timeoutMessage: string,
+): Promise<T> {
+  return Promise.race([
+    promise,
+    new Promise<T>((_, reject) => {
+      setTimeout(() => reject(new Error(timeoutMessage)), ms);
+    }),
+  ]);
+}
+
+/**
+ * 安全执行 Promise，忽略错误
+ */
+async function safeAwait(promise: Promise<unknown>): Promise<void> {
+  try {
+    await promise;
+  } catch {
+    // 忽略
+  }
+}
+
 // ============================================================================
 // 私有方法
 // ============================================================================
@@ -59,6 +104,18 @@ function createContainer(appName: string): HTMLElement {
   return container;
 }
 
+function createEntry(container: HTMLElement): ContainerEntry {
+  return {
+    container,
+    microApp: null,
+    status: 'hidden',
+    loadingStatus: 'idle',
+    deleteTimer: null,
+    loadSessionId: 0,
+    unmountPromise: null,
+  };
+}
+
 // ============================================================================
 // 公开 API
 // ============================================================================
@@ -81,12 +138,7 @@ export function getContainer(appName: string): HTMLElement {
 
   // 创建新容器
   const container = createContainer(appName);
-  entry = {
-    container,
-    microApp: null,
-    status: 'hidden',
-    deleteTimer: null,
-  };
+  entry = createEntry(container);
   containers.set(appName, entry);
 
   return container;
@@ -130,6 +182,59 @@ export function deactivateContainer(appName: string): void {
   entry.status = 'hidden';
 }
 
+/**
+ * 开始加载会话
+ * 返回会话 ID，用于后续检查该会话是否仍然有效
+ */
+export function startLoadSession(appName: string): number {
+  const entry = containers.get(appName);
+  if (!entry) return 0;
+
+  const sessionId = ++globalSessionId;
+  entry.loadSessionId = sessionId;
+  entry.loadingStatus = 'loading';
+
+  return sessionId;
+}
+
+/**
+ * 检查加载会话是否仍然有效
+ * 如果返回 false，说明已经有新的加载请求，当前加载应该取消
+ */
+export function isLoadSessionValid(appName: string, sessionId: number): boolean {
+  const entry = containers.get(appName);
+  return entry?.loadSessionId === sessionId;
+}
+
+/**
+ * 标记加载完成
+ */
+export function markLoadComplete(appName: string, sessionId: number): boolean {
+  const entry = containers.get(appName);
+  if (!entry || entry.loadSessionId !== sessionId) {
+    return false;
+  }
+  entry.loadingStatus = 'mounted';
+  return true;
+}
+
+/**
+ * 获取当前加载状态
+ */
+export function getLoadingStatus(appName: string): LoadingStatus {
+  return containers.get(appName)?.loadingStatus ?? 'idle';
+}
+
+/**
+ * 等待当前卸载操作完成（如果有）
+ */
+export async function waitForUnmount(appName: string): Promise<void> {
+  const entry = containers.get(appName);
+  if (entry?.unmountPromise) {
+    await entry.unmountPromise;
+  }
+}
+
 /**
  * 设置微应用实例
  */
@@ -149,30 +254,57 @@ export function getMicroApp(appName: string): MicroApp | null {
 
 /**
  * 安全卸载微应用并安排容器延迟删除
+ * 带超时机制，防止子应用 unmount 卡死
  */
 export async function unmountApp(appName: string): Promise<void> {
   const entry = containers.get(appName);
   if (!entry) return;
 
+  // 如果已经在卸载中，等待卸载完成
+  if (entry.unmountPromise) {
+    await entry.unmountPromise;
+    return;
+  }
+
   const { microApp } = entry;
 
   if (microApp) {
+    entry.loadingStatus = 'unmounting';
     entry.microApp = null;
 
-    // 等待各阶段完成再卸载
-    try {
-      await microApp.loadPromise;
-      await microApp.bootstrapPromise;
-      await microApp.mountPromise;
-    } catch {
-      // 忽略
-    }
-
-    try {
-      await microApp.unmount();
-    } catch {
-      // 忽略
-    }
+    // 创建卸载 Promise 供其他调用方等待
+    entry.unmountPromise = (async () => {
+      // 等待各阶段完成再卸载（带超时）
+      try {
+        await withTimeout(
+          Promise.all([
+            safeAwait(microApp.loadPromise),
+            safeAwait(microApp.bootstrapPromise),
+            safeAwait(microApp.mountPromise),
+          ]),
+          UNMOUNT_TIMEOUT / 2,
+          'Waiting for micro-app lifecycle timeout',
+        );
+      } catch (err) {
+        console.warn(`[container-manager] ${appName} lifecycle wait timeout:`, err);
+      }
+
+      // 执行卸载（带超时）
+      try {
+        await withTimeout(
+          microApp.unmount(),
+          UNMOUNT_TIMEOUT / 2,
+          'Micro-app unmount timeout',
+        );
+      } catch (err) {
+        console.warn(`[container-manager] ${appName} unmount error/timeout:`, err);
+      }
+
+      entry.loadingStatus = 'idle';
+      entry.unmountPromise = null;
+    })();
+
+    await entry.unmountPromise;
   }
 
   // 安排延迟删除

package/generators/micro-react/templates/apps/layout/src/components/MicroAppLoader/index.tsx

@@ -9,8 +9,12 @@ import {
   deactivateContainer,
   getContainer,
   getMicroApp,
+  isLoadSessionValid,
+  markLoadComplete,
   setMicroApp,
+  startLoadSession,
   unmountApp,
+  waitForUnmount,
 } from './container-manager';
 import './index.less';
 
@@ -39,7 +43,6 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
   routePath,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const mountIdRef = useRef(0);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const isMountedRef = useRef(false);
@@ -73,7 +76,11 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
     };
   };
 
-  // 当路由等"无需重载"的状态更新时，通过 update() 通知子应用
+  // 记录最新的 props 值，用于加载完成后应用
+  const latestPropsRef = useRef({ routePath });
+  latestPropsRef.current = { routePath };
+
+  // 当时区、路由等"无需重载"的状态更新时，通过 update() 通知子应用
   useEffect(() => {
     if (!isMountedRef.current) return;
 
@@ -85,7 +92,8 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
     const wrapper = wrapperRef.current;
     if (!wrapper) return;
 
-    const currentMountId = ++mountIdRef.current;
+    // 开始新的加载会话，获取会话 ID
+    const sessionId = startLoadSession(appName);
     let isCancelled = false;
 
     setLoading(true);
@@ -95,7 +103,15 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
     activateContainer(appName, wrapper);
 
     const loadApp = async () => {
-      // 卸载旧实例
+      // 1. 先等待之前的卸载操作完成（如果有）
+      await waitForUnmount(appName);
+
+      // 检查会话是否仍然有效（可能在等待期间被新的加载请求覆盖）
+      if (!isLoadSessionValid(appName, sessionId) || isCancelled) {
+        return;
+      }
+
+      // 2. 卸载旧实例（如果存在）
       const existingApp = getMicroApp(appName);
       if (existingApp) {
         try {
@@ -105,12 +121,15 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
         }
       }
 
-      if (isCancelled) return;
+      if (!isLoadSessionValid(appName, sessionId) || isCancelled) {
+        return;
+      }
 
       try {
+        // 3. 加载新微应用
         const microApp = loadMicroApp(
           {
-            name: `${appName}_${currentMountId}`,
+            name: `${appName}_${sessionId}`,
             entry,
             container,
             props: buildPropsRef.current(),
@@ -142,7 +161,7 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
         // 关键：必须同时处理 loadPromise 和 bootstrapPromise/mountPromise 的错误
         // qiankun 内部会产生多个 Promise 链，任何一个未处理的 rejection 都会导致页面崩溃
         const handlePromiseError = (err: unknown) => {
-          if (!isCancelled) {
+          if (isLoadSessionValid(appName, sessionId) && !isCancelled) {
             const message =
               err instanceof Error ? err.message : 'Unknown error';
             setError(message);
@@ -155,28 +174,45 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
         microApp.bootstrapPromise.catch(handlePromiseError);
         microApp.mountPromise.catch(handlePromiseError);
 
-        if (isCancelled) {
+        if (!isLoadSessionValid(appName, sessionId) || isCancelled) {
+          // 会话已过期，卸载刚加载的应用
           unmountApp(appName);
           return;
         }
 
-        // 等待加载完成，这里的错误会被上层 catch 捕获
+        // 4. 等待加载完成
         await microApp.loadPromise;
 
-        if (isCancelled) {
+        if (!isLoadSessionValid(appName, sessionId) || isCancelled) {
           unmountApp(appName);
           return;
         }
 
-        // 等待挂载完成
+        // 5. 等待挂载完成
         await microApp.mountPromise;
 
-        if (!isCancelled) {
+        if (!isLoadSessionValid(appName, sessionId) || isCancelled) {
+          unmountApp(appName);
+          return;
+        }
+
+        // 6. 标记加载完成
+        if (markLoadComplete(appName, sessionId)) {
           isMountedRef.current = true;
           setLoading(false);
+
+          // 7. 加载完成后，检查是否有 props 变化需要同步
+          // 这解决了加载期间 locale/timezone 等变化被跳过的问题
+          queueMicrotask(() => {
+            if (!isLoadSessionValid(appName, sessionId) || isCancelled) return;
+            const currentMicroApp = getMicroApp(appName);
+            if (currentMicroApp?.update) {
+              currentMicroApp.update(buildPropsRef.current());
+            }
+          });
         }
       } catch (err) {
-        if (!isCancelled) {
+        if (isLoadSessionValid(appName, sessionId) && !isCancelled) {
           const message = err instanceof Error ? err.message : 'Unknown error';
           // 提取更友好的错误信息
           const friendlyMessage = message.includes('Failed to fetch')
@@ -197,8 +233,10 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
       // 同步执行，确保在下一次 activate 前移走容器
       deactivateContainer(appName);
 
-      // 异步卸载微应用，给 qiankun 足够时间完成清理
-      requestAnimationFrame(() => {
+      // 使用 queueMicrotask 替代 requestAnimationFrame
+      // queueMicrotask 在当前事件循环末尾执行，比 rAF 更快更可靠
+      // 这确保了卸载操作在下一个加载操作之前执行
+      queueMicrotask(() => {
         unmountApp(appName);
       });
     };

package/generators/micro-react/templates/apps/layout/src/hooks/useRoutePermissionRefresh.ts

@@ -0,0 +1,69 @@
+import { useLocation, useModel } from '@umijs/max';
+import debounce from 'lodash-es/debounce';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { layoutLogger } from '@/common/logger';
+import { NO_AUTH_ROUTE_LIST } from '@/constants';
+
+/**
+ * 路由切换时自动刷新用户权限
+ *
+ * 功能：
+ * - 路由变化时自动刷新 initialState（用户信息和权限）
+ * - 防抖处理，避免频繁切换路由时重复请求
+ * - 跳过首次渲染（getInitialState 已获取过）
+ * - 跳过免认证路由
+ * - 只响应 pathname 变化，忽略 search/hash
+ */
+export function useRoutePermissionRefresh() {
+  const location = useLocation();
+  const { refresh } = useModel('@@initialState');
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const isFirstRender = useRef(true);
+  const prevPathRef = useRef(location.pathname);
+  // 使用 ref 持久化 refresh，避免 debounce 实例重建
+  const refreshRef = useRef(refresh);
+  refreshRef.current = refresh;
+
+  const debouncedRefresh = useMemo(
+    () =>
+      debounce(async (pathname: string) => {
+        layoutLogger.log('Route changed, refreshing user info:', pathname);
+        try {
+          await refreshRef.current?.();
+        } finally {
+          setIsRefreshing(false);
+        }
+      }, 300),
+    [],
+  );
+
+  useEffect(() => {
+    // 跳过首次渲染（getInitialState 已经获取过用户信息）
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    // 只有路径真正变化时才刷新（避免 search/hash 变化触发）
+    if (prevPathRef.current === location.pathname) {
+      return;
+    }
+    prevPathRef.current = location.pathname;
+
+    // 免认证路由不需要刷新用户信息
+    if (NO_AUTH_ROUTE_LIST.includes(location.pathname)) {
+      return;
+    }
+
+    // 立即设置 loading 状态，阻止页面渲染和业务请求
+    setIsRefreshing(true);
+    debouncedRefresh(location.pathname);
+
+    return () => {
+      debouncedRefresh.cancel();
+    };
+  }, [location.pathname, debouncedRefresh]);
+
+  return { isRefreshing };
+}

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

@@ -3,6 +3,7 @@ import { extractRoutes, filterMenuItems, findRouteByPath, getWindowMenus } from
 import AppTabs from '@/components/AppTabs';
 import MicroAppLoader from '@/components/MicroAppLoader';
 import { NO_AUTH_ROUTE_LIST } from '@/constants';
+import { useRoutePermissionRefresh } from '@/hooks/useRoutePermissionRefresh';
 import ForbiddenPage from '@/pages/403';
 import { Layout, Spin } from '@arco-design/web-react';
 import { Outlet, useLocation, useModel } from '@umijs/max';
@@ -41,6 +42,8 @@ const BasicLayout: React.FC = () => {
   const location = useLocation();
   const { initialState } = useModel('@@initialState');
   const currentUser = initialState?.currentUser;
+  // 路由切换时自动刷新用户权限
+  const { isRefreshing } = useRoutePermissionRefresh();
 
   const filterOptions = useMemo(
     () => ({
@@ -49,6 +52,7 @@ const BasicLayout: React.FC = () => {
     }),
     [currentUser?.is_superuser, currentUser?.side_menus],
   );
+
   // 所有路由（不过滤权限，用于判断路径是否存在）
   const allRoutes = useMemo(() => {
     const menus = getWindowMenus();
@@ -98,8 +102,14 @@ const BasicLayout: React.FC = () => {
       pathname: location.pathname,
       currentRoute,
       isForbidden,
+      isRefreshing,
     });
 
+    // 权限刷新中，显示 loading 阻止用户操作
+    if (isRefreshing) {
+      return <Spin dot style={{ width: '100%', marginTop: 100, textAlign: 'center' }} />;
+    }
+
     // 无权限，显示 403
     if (isForbidden) {
       return <ForbiddenPage />;

package/generators/micro-react/templates/package.json

@@ -31,5 +31,10 @@
     "husky": "^9.1.7",
     "lint-staged": "^16.1.2",
     "turbo": "^2.5.8"
+  },
+  "dependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "classnames": "^2.5.1",
+    "lodash-es": "^4.17.23"
   }
 }

package/generators/subapp-react/templates/homepage/config/config.prod.development.ts

@@ -3,9 +3,6 @@
 import { defineConfig } from '@umijs/max';
 const { CDN_PUBLIC_PATH } = process.env;
 
-const PUBLIC_PATH: string = CDN_PUBLIC_PATH
-  ? `${CDN_PUBLIC_PATH.replace(/\/?$/, '/')}homepage/`
-  : '/homepage/';
 
 const config: ReturnType<typeof defineConfig> = {
   // 测试环境：将所有代码打包到一个文件
@@ -19,7 +16,6 @@ const config: ReturnType<typeof defineConfig> = {
     memo.optimization.runtimeChunk(false);
     return memo;
   },
-  publicPath: PUBLIC_PATH,
 
   /**
    * @name 外部依赖配置

package/generators/subapp-react/templates/homepage/config/config.prod.testing.ts

@@ -3,9 +3,6 @@
 import { defineConfig } from '@umijs/max';
 const { CDN_PUBLIC_PATH } = process.env;
 
-const PUBLIC_PATH: string = CDN_PUBLIC_PATH
-  ? `${CDN_PUBLIC_PATH.replace(/\/?$/, '/')}homepage/`
-  : '/homepage/';
 
 const config: ReturnType<typeof defineConfig> = {
   // 测试环境：将所有代码打包到一个文件
@@ -19,7 +16,6 @@ const config: ReturnType<typeof defineConfig> = {
     memo.optimization.runtimeChunk(false);
     return memo;
   },
-  publicPath: PUBLIC_PATH,
 
   /**
    * @name 外部依赖配置

package/package.json

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