generator-mico-cli 0.2.5 → 0.2.7

package/generators/micro-react/templates/.cursor/rules/development-guide.mdc

@@ -179,8 +179,7 @@ document.body.setAttribute('data-theme', 'dark');
 ### 文件位置
 ```
 apps/layout/mock/
-├── menus.json         # 菜单数据
-├── menus.ts           # 菜单数据处理
+├── menus.ts           # 菜单 Mock 数据（带类型）
 └── user.mock.ts       # 用户相关 Mock API
 ```
 

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

@@ -1,13 +1,9 @@
 // https://umijs.org/config/
 
 import { defineConfig } from '@umijs/max';
-import fs from 'fs';
-import path from 'path';
 
-// 使用 fs 读取 JSON 避免成为配置依赖，修改 menus.json 不会触发服务器重启
-const mockMenus = JSON.parse(
-  fs.readFileSync(path.join(__dirname, '../mock/menus.json'), 'utf-8'),
-);
+
+import mockMenus from '../mock/menus';
 
 const config: ReturnType<typeof defineConfig> = {
   publicPath: '/',

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

@@ -98,6 +98,7 @@ const config: ReturnType<typeof defineConfig> = {
    */
   mock: {
     include: ['mock/**/_mock.ts', 'mock/**/*.mock.ts', 'src/pages/**/_mock.ts'],
+    exclude: ['mock/**/menus.ts'],
   },
 
   /**

package/generators/micro-react/templates/apps/layout/mock/menus.ts

@@ -2,10 +2,132 @@
  * Mock 菜单数据
  * 用于开发环境测试
  *
- * 注意：实际数据存放在 menus.json 中
- * 修改菜单数据请编辑 menus.json 文件，不会触发服务器重启
+ * 菜单结构说明:
+ * - id: 菜单唯一标识
+ * - name: 菜单名称
+ * - type: 'page' | 'group' (page: 页面, group: 分组)
+ * - path: 路由路径 (group 类型为 null)
+ * - icon: 图标名称
+ * - enabled: 是否启用
+ * - sortOrder: 排序权重
+ * - pageId: 关联的页面 ID
+ * - page: 页面配置 (微前端入口)
+ *   - htmlUrl: 子应用入口地址
+ *   - jsUrls: 额外 JS 资源
+ *   - cssUrls: 额外 CSS 资源
+ * - children: 子菜单数组
  */
-import mockMenusData from './menus.json';
 
-export const mockMenus = mockMenusData;
+import type { MenuItem, PageConfig } from '@/common/menu/types';
+
+/** Mock 页面配置 - 只需要核心字段 */
+type MockPageConfig = Pick<PageConfig, 'id' | 'name' | 'route' | 'enabled' | 'htmlUrl' | 'jsUrls' | 'cssUrls'>;
+
+/** Mock 菜单项 - page 字段使用简化类型 */
+type MockMenuItem = Omit<MenuItem, 'page' | 'children'> & {
+  page: MockPageConfig | null;
+  children: MockMenuItem[];
+};
+
+const mockMenus: MockMenuItem[] = [
+  {
+    "id": 1,
+    "name": "首页",
+    "type": "page",
+    "path": null,
+    "icon": "Home",
+    "enabled": true,
+    "sortOrder": 0,
+    "pageId": 1,
+    "page": {
+      "id": 1,
+      "name": "home",
+      "route": "/",
+      "enabled": true,
+      "htmlUrl": "",
+      "jsUrls": [],
+      "cssUrls": []
+    },
+    "children": []
+  },
+  {
+    "id": 2,
+    "name": "示例模块",
+    "type": "group",
+    "path": null,
+    "icon": "List",
+    "enabled": true,
+    "sortOrder": 1,
+    "pageId": null,
+    "page": null,
+    "children": [
+      {
+        "id": 3,
+        "name": "示例页面",
+        "type": "page",
+        "path": "/example/page",
+        "icon": "File",
+        "enabled": true,
+        "sortOrder": 1,
+        "pageId": 45,
+        "page": {
+          "id": 45,
+          "name": "example-page",
+          "route": "/example/page",
+          "enabled": true,
+          "htmlUrl": "",
+          "jsUrls": [],
+          "cssUrls": []
+        },
+        "children": []
+      }
+    ]
+  },
+  {
+    "id": 5,
+    "name": "微应用示例",
+    "type": "group",
+    "path": null,
+    "icon": "Apps",
+    "enabled": true,
+    "sortOrder": 2,
+    "pageId": null,
+    "page": null,
+    "children": [
+      {
+        "id": 6,
+        "name": "子应用页面",
+        "type": "page",
+        "path": null,
+        "icon": "Desktop",
+        "enabled": true,
+        "sortOrder": 1,
+        "pageId": 55,
+        "page": {
+          "id": 55,
+          "name": "subapp-example",
+          "route": "/subapp",
+          "enabled": true,
+          "htmlUrl": "//localhost:8010",
+          "jsUrls": [],
+          "cssUrls": []
+        },
+        "children": []
+      }
+    ]
+  },
+  {
+    "id": 7,
+    "name": "外部链接",
+    "type": "link",
+    "path": "https://github.com",
+    "icon": "Link",
+    "enabled": true,
+    "sortOrder": 3,
+    "pageId": null,
+    "page": null,
+    "children": []
+  }
+]
+
 export default mockMenus;

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

@@ -18,7 +18,7 @@ import {
 } from './common/micro';
 import { initTheme } from './common/theme';
 import MicroAppLoader from './components/MicroAppLoader';
-import { NO_AUTH_ROUTE_LIST } from './constants';
+import { NO_AUTH_ROUTE_LIST } from '@/constants';
 import './global.less';
 
 // ==================== qiankun 全局错误处理 ====================

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

@@ -18,7 +18,6 @@ import { loadMicroApp } from 'qiankun';
 import { microAppLogger } from '@/common/logger';
 // 导入路由守卫（会自动初始化）
 import { refreshUserIntent, setUserIntent } from '@/common/route-guard';
-
 // 导入低优先级预加载函数
 import { markAppAsPrefetched, prefetchMicroAppsLowPriority } from '@/common/micro-prefetch';
 
@@ -99,6 +98,27 @@ function activateContainer(container: HTMLElement, target: HTMLElement): void {
   container.style.cssText = 'display: block; width: 100%; height: 100%;';
 }
 
+/**
+ * 安全地更新微应用 props
+ * 避免 single-spa 错误 #32（Cannot update parcel because it is not mounted）
+ * @see https://single-spa.js.org/error/?code=32
+ */
+async function safeUpdate(microApp: MicroApp, props: Record<string, unknown>): Promise<void> {
+  try {
+    const status = microApp.getStatus();
+    if (status !== 'MOUNTED') {
+      microAppLogger.log('safeUpdate: skipped, status =', status);
+      return;
+    }
+    // update 可能返回 Promise，需要 await 以捕获异步错误
+    await microApp.update?.(props);
+  } catch (err) {
+    // 捕获错误但不抛出，避免 unhandled rejection 导致页面崩溃
+    // 使用 error 级别确保异常可见，便于排查问题
+    microAppLogger.error('safeUpdate: caught error:', err);
+  }
+}
+
 function deactivateContainer(container: HTMLElement): void {
   document.body.appendChild(container);
   container.classList.remove(CSS_CLASS.active);
@@ -170,7 +190,7 @@ class MicroAppManager {
       microAppLogger.log('Already mounted, updating props only');
       const cached = this.appCache.get(config.name);
       if (cached && cached.microApp.getStatus() === 'MOUNTED') {
-        cached.microApp.update?.(config.props);
+        safeUpdate(cached.microApp, config.props);
         if (cached.container.parentElement !== config.target) {
           activateContainer(cached.container, config.target);
         }
@@ -200,7 +220,7 @@ class MicroAppManager {
     if (this.currentAppName && this.state === 'mounted') {
       const cached = this.appCache.get(this.currentAppName);
       if (cached && cached.microApp.getStatus() === 'MOUNTED') {
-        cached.microApp.update?.(props);
+        safeUpdate(cached.microApp, props);
       }
     }
   }
@@ -217,7 +237,7 @@ class MicroAppManager {
         await this.safeUnmount(instance.microApp);
         instance.container.remove();
       } catch (err) {
-        microAppLogger.warn('Clear cache error for', name, err);
+        microAppLogger.error('Clear cache error for', name, err);
       }
     }
     this.appCache.clear();
@@ -278,7 +298,6 @@ class MicroAppManager {
     this.updateState({ loading: true, error: null, mounted: false });
 
     try {
-
       if (this.shouldAbort(request.name, mySeq)) {
         console.log('🔍[路由调试] ⚠️ Aborted before load', { name: request.name, mySeq, operationSeq: this.operationSeq });
         this.state = 'idle';
@@ -314,25 +333,19 @@ 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'，则无需操作（已在 switchTo 入口处处理）
 
         // 刷新意图，保护 mount 成功后的短暂窗口期
         refreshUserIntent();
 
+        // 关键：在调用 update 之前检查是否需要 abort
+        // 这可以避免在即将被 unmount 的应用上调用 update，从而防止 single-spa error #32
         if (this.shouldAbort(request.name, mySeq)) {
           console.log('🔍[路由调试] ⚠️ Aborted (cached) after mount', { name: request.name });
           await this.safeUnmount(appInstance.microApp);
@@ -342,6 +355,13 @@ class MicroAppManager {
           return;
         }
 
+        // mount 完成且不需要 abort，安全地调用 update 同步路由
+        // qiankun 的 mount() 使用的是创建实例时的原始 props，可能包含过期的 routePath
+        if (status === 'BOOTSTRAPPING' || status === 'NOT_MOUNTED') {
+          await safeUpdate(appInstance.microApp, request.props);
+          console.log('🔍[路由调试] 缓存实例 props 已更新', { name: request.name });
+        }
+
         this.currentAppName = request.name;
         this.state = 'mounted';
         // 不立即清除意图，让它自然过期（5秒）
@@ -398,7 +418,17 @@ class MicroAppManager {
 
         if (this.shouldAbort(request.name, mySeq)) {
           console.log('🔍[路由调试] ⚠️ Aborted after loadPromise', { name: request.name, mySeq, operationSeq: this.operationSeq });
-          // 不销毁实例，只是 deactivate 容器，实例保留在缓存中供下次复用
+          // 关键修复：loadPromise 完成后 qiankun 会自动开始 mount
+          // 必须等待 mountPromise 完成后再 unmount，否则会触发 single-spa 错误 #32
+          // 参考：https://github.com/single-spa/single-spa/issues/1184
+          try {
+            console.log('🔍[路由调试] Abort: 等待 mountPromise 完成...', { status: microApp.getStatus() });
+            await withTimeout(microApp.mountPromise, MOUNT_TIMEOUT, 'Mount timeout during abort');
+            console.log('🔍[路由调试] Abort: mountPromise 完成，执行 unmount', { status: microApp.getStatus() });
+            await this.safeUnmount(microApp);
+          } catch (abortErr) {
+            microAppLogger.error('Abort cleanup error:', abortErr);
+          }
           deactivateContainer(container);
           this.state = 'idle';
           if (this.pendingRequest) this.processRequest();
@@ -409,14 +439,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();
 
+        // 关键：在调用 update 之前检查是否需要 abort
+        // 这可以避免在即将被 unmount 的应用上调用 update，从而防止 single-spa error #32
         if (this.shouldAbort(request.name, mySeq)) {
           console.log('🔍[路由调试] ⚠️ Aborted after mountPromise', { name: request.name, mySeq, operationSeq: this.operationSeq });
           // 实例已在 loadPromise 后缓存，这里只需 unmount 和 deactivate
@@ -427,6 +454,11 @@ class MicroAppManager {
           return;
         }
 
+        // mount 完成且不需要 abort，安全地调用 update 同步路由
+        // 由于子应用 mount 生命周期不再调用 syncRoute，需要通过 update 来同步路由
+        await safeUpdate(microApp, request.props);
+        console.log('🔍[路由调试] 新实例 props 已更新', { name: request.name });
+
         // 实例已在 loadPromise 后缓存，这里不需要重复缓存
 
         this.currentAppName = request.name;
@@ -483,7 +515,7 @@ class MicroAppManager {
         await this.safeUnmount(appInstance.microApp);
         deactivateContainer(appInstance.container);
       } catch (err) {
-        microAppLogger.warn('Deactivate error:', err);
+        microAppLogger.error('Deactivate error:', err);
       }
     }
 
@@ -494,11 +526,31 @@ class MicroAppManager {
 
   private async safeUnmount(microApp: MicroApp): Promise<void> {
     try {
-      if (microApp.getStatus() === 'MOUNTED') {
+      const status = microApp.getStatus();
+      microAppLogger.log('safeUnmount: current status =', status);
+
+      // 处理正在挂载的情况：等待 mountPromise 完成后再 unmount
+      // 这避免了 single-spa 错误 #32（unmount 一个正在 mounting 的应用）
+      if (status === 'MOUNTING' || status === 'BOOTSTRAPPING') {
+        microAppLogger.log('safeUnmount: waiting for mountPromise...');
+        try {
+          await withTimeout(microApp.mountPromise, MOUNT_TIMEOUT, 'Mount timeout during unmount');
+        } catch (mountErr) {
+          // 如果等待 mount 超时或失败，记录错误但继续尝试 unmount
+          microAppLogger.error('safeUnmount: mountPromise failed, continuing unmount:', mountErr);
+        }
+      }
+
+      // 重新检查状态，因为等待 mountPromise 后状态可能已变化
+      const currentStatus = microApp.getStatus();
+      if (currentStatus === 'MOUNTED') {
         await withTimeout(microApp.unmount(), UNMOUNT_TIMEOUT, 'Unmount timeout');
+        microAppLogger.log('safeUnmount: unmount completed');
+      } else {
+        microAppLogger.log('safeUnmount: skipped unmount, status =', currentStatus);
       }
     } catch (err) {
-      microAppLogger.warn('safeUnmount error:', err);
+      microAppLogger.error('safeUnmount error:', err);
     }
   }
 }

package/package.json

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

package/generators/micro-react/templates/apps/layout/mock/menus.json

@@ -1,100 +0,0 @@
-[
-  {
-    "id": 1,
-    "name": "首页",
-    "type": "page",
-    "path": null,
-    "icon": "Home",
-    "enabled": true,
-    "sortOrder": 0,
-    "pageId": 1,
-    "page": {
-      "id": 1,
-      "name": "home",
-      "route": "/",
-      "enabled": true,
-      "htmlUrl": null,
-      "jsUrls": [],
-      "cssUrls": []
-    },
-    "children": []
-  },
-  {
-    "id": 2,
-    "name": "示例模块",
-    "type": "group",
-    "path": null,
-    "icon": "List",
-    "enabled": true,
-    "sortOrder": 1,
-    "pageId": null,
-    "page": null,
-    "children": [
-      {
-        "id": 3,
-        "name": "示例页面",
-        "type": "page",
-        "path": "/example/page",
-        "icon": "File",
-        "enabled": true,
-        "sortOrder": 1,
-        "pageId": 45,
-        "page": {
-          "id": 45,
-          "name": "example-page",
-          "route": "/example/page",
-          "enabled": true,
-          "htmlUrl": null,
-          "jsUrls": [],
-          "cssUrls": []
-        },
-        "children": []
-      }
-    ]
-  },
-  {
-    "id": 5,
-    "name": "微应用示例",
-    "type": "group",
-    "path": null,
-    "icon": "Apps",
-    "enabled": true,
-    "sortOrder": 2,
-    "pageId": null,
-    "page": null,
-    "children": [
-      {
-        "id": 6,
-        "name": "子应用页面",
-        "type": "page",
-        "path": null,
-        "icon": "Desktop",
-        "enabled": true,
-        "sortOrder": 1,
-        "pageId": 55,
-        "page": {
-          "id": 55,
-          "name": "subapp-example",
-          "route": "/subapp",
-          "enabled": true,
-          "htmlUrl": "//localhost:8010",
-          "jsUrls": [],
-          "cssUrls": []
-        },
-        "children": []
-      }
-    ]
-  },
-  {
-    "id": 7,
-    "name": "外部链接",
-    "type": "link",
-    "path": "https://github.com",
-    "icon": "Link",
-    "enabled": true,
-    "sortOrder": 3,
-    "pageId": null,
-    "page": null,
-    "children": []
-  }
-]