generator-mico-cli 0.1.21 → 0.1.22

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

@@ -17,6 +17,8 @@ interface MicroAppLoaderProps {
   entry: string;
   name: string;
   displayName?: string;
+  /** 当前路由路径，用于通知子应用进行内部路由切换 */
+  routePath?: string;
 }
 
 const sanitizeId = (path: string): string => {
@@ -33,6 +35,7 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
   entry,
   name,
   displayName,
+  routePath,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const mountIdRef = useRef(0);
@@ -63,16 +66,18 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
       uid: authInfo.uid,
       avatar: authInfo.avatar,
       nickname: authInfo.nickname,
+      // 传递当前路由路径，让子应用进行内部路由切换
+      routePath,
     };
   };
 
-  // 当 sharedServices（websocket）变化时，更新子应用的 props
+  // 当路由等"无需重载"的状态更新时，通过 update() 通知子应用
   useEffect(() => {
     if (!isMountedRef.current) return;
 
     const microApp = getMicroApp(appName);
     microApp?.update?.(buildPropsRef.current());
-  }, [appName]);
+  }, [appName, routePath]);
 
   useEffect(() => {
     const wrapper = wrapperRef.current;

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

@@ -11,6 +11,26 @@ 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
@@ -43,13 +63,17 @@ const BasicLayout: React.FC = () => {
     // 如果有匹配的动态路由配置且需要加载微应用
     if (currentRoute?.loadType === 'microapp' && currentRoute.entry) {
       layoutLogger.log('Loading microapp:', currentRoute);
+      // 使用 entry 的 origin 作为微应用标识，同一个 entry 的所有路由共用一个实例
+      const appName = getAppNameFromEntry(currentRoute.entry);
       return (
         <MicroAppLoader
           entry={currentRoute.entry}
-          // 使用 path 作为微应用唯一标识（如 /homepage）
-          name={currentRoute.path}
+          // 使用 entry 生成的标识，而不是 path
+          name={appName}
           // 显示名称用于 loading 提示
           displayName={currentRoute.name}
+          // 传递当前路由路径，让子应用进行内部路由切换
+          routePath={currentRoute.path}
         />
       );
     }

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

@@ -7,6 +7,7 @@
  * 自定义函数请放在 @/common/mainApp.ts 中
  */
 
+import { history } from '@umijs/max';
 import { appLogger } from './common/logger';
 import { type IMicroAppProps, setMainAppProps } from './common/mainApp';
 
@@ -48,6 +49,22 @@ export const qiankun = {
     appLogger.log('mount', props);
     // 保存主应用传递的 props，包括 request 实例
     setMainAppProps(props);
+
+    // 初始路由同步：确保子应用加载后跳转到主应用指定的路由
+    // 使用 requestAnimationFrame 延迟执行，确保 React 组件已完成初始化
+    if (props.routePath) {
+      requestAnimationFrame(() => {
+        if (!history) return;
+        const currentPath = history.location.pathname;
+        if (currentPath !== props.routePath) {
+          appLogger.log('initial route sync:', {
+            from: currentPath,
+            to: props.routePath,
+          });
+          history.push(props.routePath);
+        }
+      });
+    }
   },
 
   /**
@@ -61,9 +78,20 @@ export const qiankun = {
 
   /**
    * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
+   * 当主应用传递的 props 变化时调用（如路由变化、时区变化等）
    */
   async update(props: IMicroAppProps) {
     appLogger.log('update', props);
+
+    // 处理路由变化：主应用路由切换时，子应用进行内部路由同步
+    if (props.routePath && history) {
+      const currentPath = history.location.pathname;
+      if (currentPath !== props.routePath) {
+        appLogger.log('route sync:', { from: currentPath, to: props.routePath });
+        history.push(props.routePath);
+      }
+    }
+
     // 更新 props
     setMainAppProps(props);
   },

package/generators/subapp-react/templates/homepage/src/common/mainApp.ts

@@ -10,7 +10,9 @@ export interface IMicroAppProps {
   /** 主应用标识 */
   mainApp: string;
   /** 主应用共享的 request 实例 */
-  request: <T = any>(url: string, options?: any) => Promise<T>;
+  request?: <T = any>(url: string, options?: any) => Promise<T>;
+  /** 当前路由路径（由主应用传递，用于子应用内部路由切换） */
+  routePath?: string;
 }
 
 /** 存储主应用传递的 props */

package/package.json

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