generator-mico-cli 0.2.2 → 0.2.4

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

@@ -1,5 +1,11 @@
 import { layoutLogger } from '@/common/logger';
-import { extractRoutes, filterMenuItems, findRouteByPath, getWindowMenus } from '@/common/menu';
+import {
+  extractRoutes,
+  filterMenuItems,
+  findRouteByPath,
+  getWindowMenus,
+} from '@/common/menu';
+import { getAppNameFromEntry } from '@/common/micro';
 import AppTabs from '@/components/AppTabs';
 import MicroAppLoader from '@/components/MicroAppLoader';
 import { NO_AUTH_ROUTE_LIST } from '@/constants';
@@ -14,26 +20,6 @@ import './index.less';
 
 const { Content } = Layout;
 
-/**
- * 从 entry URL 中提取微应用标识
- * 同一个 entry 的所有路由使用相同的标识，避免频繁卸载/重载微应用
- *
- * 注意：使用完整的 origin + pathname 作为标识，避免同一 host 上多个子应用冲突
- * 例如：http://localhost:8010/app1/ 和 http://localhost:8010/app2/ 会有不同的标识
- */
-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, '');
-  }
-};
-
 /**
  * 主布局组件
  * 注意：Umi Max 使用 React Router 6，应该使用 <Outlet /> 渲染子路由，而不是 children
@@ -42,7 +28,10 @@ const BasicLayout: React.FC = () => {
   const location = useLocation();
   const { initialState } = useModel('@@initialState');
   const currentUser = initialState?.currentUser;
+
   // 路由切换时自动刷新用户权限
+  // isRefreshing 状态仅用于显示 loading 覆盖层
+  // 实际的时序协调由 loadingCoordinator 在 MicroAppManager 层面处理
   const { isRefreshing } = useRoutePermissionRefresh();
 
   const filterOptions = useMemo(
@@ -103,13 +92,10 @@ const BasicLayout: React.FC = () => {
       currentRoute,
       isForbidden,
       isRefreshing,
+      currentUserChanged: currentUser?.is_superuser,
+      sideMenusCount: currentUser?.side_menus?.length,
     });
 
-    // 权限刷新中，显示 loading 阻止用户操作
-    if (isRefreshing) {
-      return <Spin dot style={{ width: '100%', marginTop: 100, textAlign: 'center' }} />;
-    }
-
     // 无权限，显示 403
     if (isForbidden) {
       return <ForbiddenPage />;
@@ -121,18 +107,45 @@ const BasicLayout: React.FC = () => {
       // 使用 entry 的 origin 作为微应用标识，同一个 entry 的所有路由共用一个实例
       const appName = getAppNameFromEntry(currentRoute.entry);
       return (
-        <MicroAppLoader
-          entry={currentRoute.entry}
-          // 使用 entry 生成的标识，而不是 path
-          name={appName}
-          // 显示名称用于 loading 提示
-          displayName={currentRoute.name}
-          // 传递当前路由路径，让子应用进行内部路由切换
-          routePath={currentRoute.path}
-        />
+        <>
+          {/* 权限刷新中显示覆盖层，但不卸载 MicroAppLoader，避免子应用被中断 */}
+          {isRefreshing && (
+            <div style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'var(--color-bg-1)',
+              zIndex: 100,
+            }}>
+              <Spin dot />
+            </div>
+          )}
+          <MicroAppLoader
+            // 使用 appName 作为 key，确保不同微应用使用不同的组件实例
+            // 同一个微应用的不同路由共用同一个实例
+            key={appName}
+            entry={currentRoute.entry}
+            // 使用 entry 生成的标识，而不是 path
+            name={appName}
+            // 显示名称用于 loading 提示
+            displayName={currentRoute.name}
+            // 传递当前路由路径，让子应用进行内部路由切换
+            routePath={currentRoute.path}
+          />
+        </>
       );
     }
 
+    // 权限刷新中，显示 loading（仅对非微应用路由）
+    if (isRefreshing) {
+      return <Spin dot style={{ width: '100%', marginTop: 100, textAlign: 'center' }} />;
+    }
+
     // 默认：使用 Outlet 渲染内部路由
     return <Outlet />;
   };
@@ -156,13 +169,13 @@ const BasicLayout: React.FC = () => {
         <Layout className="layout-content-right">
           <AppTabs />
           <Content className="layout-content-outlet">
-              <Suspense
-                fallback={<Spin dot style={{ width: '100%', marginTop: 100 }} />}
-              >
-                {renderContent()}
-              </Suspense>
-            </Content>
-          </Layout>
+            <Suspense
+              fallback={<Spin dot style={{ width: '100%', marginTop: 100 }} />}
+            >
+              {renderContent()}
+            </Suspense>
+          </Content>
+        </Layout>
       </Layout>
     </Layout>
   );

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

@@ -16,7 +16,12 @@ const ForbiddenPage: React.FC = () => {
         title="无权限访问"
         subTitle="抱歉，您没有权限访问此页面"
         extra={
-          <Button type="primary" onClick={() => history.push('/')}>
+          <Button
+            type="primary"
+            onClick={() => {
+              history.push('/');
+            }}
+          >
             返回首页
           </Button>
         }

package/package.json

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

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

@@ -1,334 +0,0 @@
-/**
- * 微应用容器管理器
- *
- * 核心策略：
- * 1. 容器在 document.body 中创建，与 React 生命周期解耦
- * 2. 激活时移动到占位元素内，参与正常文档流
- * 3. 停用时移回 body 并隐藏
- * 4. 加载状态锁防止并发加载冲突
- * 5. unmount 超时机制防止子应用卡死
- *
- * 这样既避免了 React unmount 时删除容器导致的竞态问题，
- * 又能让容器在激活时参与正常的 CSS 布局。
- *
- * @see https://github.com/umijs/qiankun/issues/2845
- */
-
-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;
-}
-
-// ============================================================================
-// 常量
-// ============================================================================
-
-/** 容器删除延迟（毫秒）- 给 qiankun 足够时间完成清理 */
-const DELETE_DELAY = 5000;
-
-/** unmount 超时时间（毫秒）- 防止子应用卡死 */
-const UNMOUNT_TIMEOUT = 10000;
-
-/** CSS 类名 */
-const CSS_CLASS = {
-  base: 'micro-app-container-managed',
-  hidden: 'micro-app-container-managed--hidden',
-  active: 'micro-app-container-managed--active',
-} as const;
-
-// ============================================================================
-// 状态
-// ============================================================================
-
-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 {
-    // 忽略
-  }
-}
-
-// ============================================================================
-// 私有方法
-// ============================================================================
-
-function createContainer(appName: string): HTMLElement {
-  const container = document.createElement('div');
-  container.id = `micro-app-${appName}`;
-  container.className = `${CSS_CLASS.base} ${CSS_CLASS.hidden}`;
-  document.body.appendChild(container);
-  return container;
-}
-
-function createEntry(container: HTMLElement): ContainerEntry {
-  return {
-    container,
-    microApp: null,
-    status: 'hidden',
-    loadingStatus: 'idle',
-    deleteTimer: null,
-    loadSessionId: 0,
-    unmountPromise: null,
-  };
-}
-
-// ============================================================================
-// 公开 API
-// ============================================================================
-
-/**
- * 获取或创建容器
- */
-export function getContainer(appName: string): HTMLElement {
-  let entry = containers.get(appName);
-
-  if (entry) {
-    // 取消待删除的计时器（容器被复用）
-    if (entry.deleteTimer) {
-      clearTimeout(entry.deleteTimer);
-      entry.deleteTimer = null;
-    }
-    entry.status = 'hidden';
-    return entry.container;
-  }
-
-  // 创建新容器
-  const container = createContainer(appName);
-  entry = createEntry(container);
-  containers.set(appName, entry);
-
-  return container;
-}
-
-/**
- * 激活容器：移动到占位元素内，参与正常文档流
- */
-export function activateContainer(appName: string, target: HTMLElement): void {
-  const entry = containers.get(appName);
-  if (!entry) return;
-
-  const { container } = entry;
-
-  // 移动容器到占位元素内（参与文档流）
-  target.appendChild(container);
-
-  // 切换样式
-  container.classList.remove(CSS_CLASS.hidden);
-  container.classList.add(CSS_CLASS.active);
-
-  entry.status = 'active';
-}
-
-/**
- * 停用容器：移回 body 并隐藏
- */
-export function deactivateContainer(appName: string): void {
-  const entry = containers.get(appName);
-  if (!entry) return;
-
-  const { container } = entry;
-
-  // 移回 body（脱离 React 树）
-  document.body.appendChild(container);
-
-  // 切换样式
-  container.classList.remove(CSS_CLASS.active);
-  container.classList.add(CSS_CLASS.hidden);
-
-  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;
-  }
-}
-
-/**
- * 设置微应用实例
- */
-export function setMicroApp(appName: string, microApp: MicroApp): void {
-  const entry = containers.get(appName);
-  if (entry) {
-    entry.microApp = microApp;
-  }
-}
-
-/**
- * 获取微应用实例
- */
-export function getMicroApp(appName: string): MicroApp | null {
-  return containers.get(appName)?.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;
-
-    // 创建卸载 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;
-  }
-
-  // 安排延迟删除
-  if (!entry.deleteTimer) {
-    entry.status = 'pending-delete';
-    entry.deleteTimer = setTimeout(() => {
-      deleteContainer(appName);
-    }, DELETE_DELAY);
-  }
-}
-
-/**
- * 删除容器
- */
-function deleteContainer(appName: string): void {
-  const entry = containers.get(appName);
-  if (!entry) return;
-
-  // 只删除 pending-delete 状态的容器（未被重新激活）
-  if (entry.status === 'pending-delete') {
-    entry.container.remove();
-    containers.delete(appName);
-  } else {
-    // 容器被重新激活了，清除计时器引用
-    entry.deleteTimer = null;
-  }
-}