generator-mico-cli 0.1.18 → 0.1.20

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

@@ -0,0 +1,54 @@
+// 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'),
+);
+
+const config: ReturnType<typeof defineConfig> = {
+  publicPath: '/',
+  /**
+   * @name 注入到 HTML head 的脚本
+   * @description 开发环境注入 mock 菜单数据
+   * @doc https://umijs.org/docs/api/config#headscripts
+   */
+  headScripts: [
+    {
+      content: `
+        window.__MICO_MENUS__ = ${JSON.stringify(mockMenus)};
+        window.__MICO_CONFIG__ = {
+          appName: 'Audit Center',
+          apiBaseUrl: '',
+        };
+      `,
+    },
+  ],
+
+  proxy: {
+    '/api/': {
+      // 要代理的地址
+      target: 'https://preview.pro.ant.design',
+      // 配置了这个可以从 http 代理到 https
+      // 依赖 origin 的功能可能需要这个，比如 cookie
+      changeOrigin: true,
+    },
+  },
+  define: {
+    'process.env.NODE_ENV': 'development',
+    'process.env.APP_ID': 'mibot_dev',
+    'process.env.API_BASE_URL': 'https://dashboard-api-test.micoplatform.com',
+    'process.env.PROXY_SUFFIX': '/',
+    'process.env.LOGIN_ENDPOINT':
+      '',
+    'process.env.REFRESH_ENDPOINT':
+      '',
+    'process.env.EXTERNAL_LOGIN_PATH':
+      '',
+  },
+};
+
+export default defineConfig(config);

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

@@ -4,8 +4,8 @@
   "author": "Easton <easton@micous.com>",
   "scripts": {
     "build": "npm run build:production",
-    "build:development": "cross-env UMI_ENV=dev max build",
-    "build:production": "cross-env UMI_ENV=prod max build",
+    "build:development": "cross-env UMI_ENV=development max build",
+    "build:production": "cross-env UMI_ENV=production max build",
     "build:testing": "cross-env UMI_ENV=testing max build",
     "dev": "npm run start:development",
     "format": "prettier --cache --write .",

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

@@ -0,0 +1,202 @@
+/**
+ * 微应用容器管理器
+ *
+ * 核心策略：
+ * 1. 容器在 document.body 中创建，与 React 生命周期解耦
+ * 2. 激活时移动到占位元素内，参与正常文档流
+ * 3. 停用时移回 body 并隐藏
+ *
+ * 这样既避免了 React unmount 时删除容器导致的竞态问题，
+ * 又能让容器在激活时参与正常的 CSS 布局。
+ *
+ * @see https://github.com/umijs/qiankun/issues/2845
+ */
+
+import type { MicroApp } from 'qiankun';
+
+// ============================================================================
+// 类型定义
+// ============================================================================
+
+type ContainerStatus = 'active' | 'hidden' | 'pending-delete';
+
+interface ContainerEntry {
+  container: HTMLElement;
+  microApp: MicroApp | null;
+  status: ContainerStatus;
+  deleteTimer: ReturnType<typeof setTimeout> | null;
+}
+
+// ============================================================================
+// 常量
+// ============================================================================
+
+/** 容器删除延迟（毫秒）- 给 qiankun 足够时间完成清理 */
+const DELETE_DELAY = 5000;
+
+/** 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>();
+
+// ============================================================================
+// 私有方法
+// ============================================================================
+
+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;
+}
+
+// ============================================================================
+// 公开 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 = {
+    container,
+    microApp: null,
+    status: 'hidden',
+    deleteTimer: null,
+  };
+  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';
+}
+
+/**
+ * 设置微应用实例
+ */
+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;
+}
+
+/**
+ * 安全卸载微应用并安排容器延迟删除
+ */
+export async function unmountApp(appName: string): Promise<void> {
+  const entry = containers.get(appName);
+  if (!entry) return;
+
+  const { microApp } = entry;
+
+  if (microApp) {
+    entry.microApp = null;
+
+    // 等待各阶段完成再卸载
+    try {
+      await microApp.loadPromise;
+      await microApp.bootstrapPromise;
+      await microApp.mountPromise;
+    } catch {
+      // 忽略
+    }
+
+    try {
+      await microApp.unmount();
+    } catch {
+      // 忽略
+    }
+  }
+
+  // 安排延迟删除
+  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;
+  }
+}

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

@@ -1,3 +1,7 @@
+// ============================================================================
+// 占位容器（在 React 树中）
+// ============================================================================
+
 .micro-app-container {
   width: 100%;
   height: 100%;
@@ -18,18 +22,6 @@
   z-index: 10;
 }
 
-.micro-app-iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-  transition: opacity 0.3s;
-}
-
-.micro-app-content {
-  width: 100%;
-  height: 100%;
-}
-
 .micro-app-error {
   display: flex;
   flex-direction: column;
@@ -41,4 +33,41 @@
   p {
     margin: 8px 0;
   }
+
+  .error-detail {
+    font-size: 12px;
+    color: var(--color-text-4);
+  }
+}
+
+// ============================================================================
+// 托管容器（在 body 中创建，激活时移动到占位元素内）
+// ============================================================================
+
+.micro-app-container-managed {
+  // 激活时在文档流中，继承占位元素的尺寸
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  > div {
+    height: 100%;
+  }
+
+  // 隐藏状态（在 body 中）
+  &--hidden {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  // 激活状态（在占位元素内，参与文档流）
+  &--active {
+    visibility: visible;
+    pointer-events: auto;
+  }
 }

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

@@ -1,99 +1,153 @@
-import { microAppLogger } from '@/common/logger';
-import { request } from '@/common/request';
+import { getAuthInfo } from '@/common/auth/cs-auth-manager';
+import { EEnv, getEnv } from '@/common/env';
 import { Spin } from '@arco-design/web-react';
-import { loadMicroApp, type MicroApp } from 'qiankun';
-import React, { useEffect, useRef, useState } from 'react';
+import { loadMicroApp } from 'qiankun';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  activateContainer,
+  deactivateContainer,
+  getContainer,
+  getMicroApp,
+  setMicroApp,
+  unmountApp,
+} from './container-manager';
 import './index.less';
 
 interface MicroAppLoaderProps {
-  /** 微应用入口 URL */
   entry: string;
-  /** 微应用唯一标识（用于生成容器 ID，应为无空格的技术名称） */
   name: string;
-  /** 微应用显示名称（用于 loading 提示，可包含中文） */
   displayName?: string;
 }
 
-/**
- * 将路由路径转换为有效的 HTML ID
- * 例如：/homepage → homepage, /audit/pending → audit-pending
- */
 const sanitizeId = (path: string): string => {
   return (
     path
-      .replace(/^\/+/, '') // 移除开头的斜杠
-      .replace(/\/+/g, '-') // 斜杠替换为连字符
-      .replace(/\s+/g, '-') // 空格替换为连字符
-      .replace(/[^a-zA-Z0-9_-]/g, '') || // 移除其他特殊字符
-    `app-${Date.now()}`
-  ); // 如果结果为空，使用时间戳
+      .replace(/^\/+/, '')
+      .replace(/\/+/g, '-')
+      .replace(/\s+/g, '-')
+      .replace(/[^a-zA-Z0-9_-]/g, '') || `app-${Date.now()}`
+  );
 };
 
-/**
- * qiankun 微应用加载器
- * 使用 loadMicroApp API 动态加载微前端应用
- */
 const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
   entry,
   name,
   displayName,
 }) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const microAppRef = useRef<MicroApp | null>(null);
+  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);
+
+  const appName = sanitizeId(name);
 
-  // 生成安全的容器 ID（避免空格和特殊字符导致选择器失效）
-  const safeAppName = sanitizeId(name);
-  const containerId = `micro-app-${safeAppName}`;
-  // 用于显示的名称（支持中文）
-  const label = displayName || name;
+  const env = useMemo(() => {
+    const currentEnv = getEnv();
+    return currentEnv === EEnv.Development
+      ? 'development'
+      : currentEnv === EEnv.Testing
+      ? 'testing'
+      : 'production';
+  }, []);
 
+  // 使用 ref 存储构建 props 的函数，避免 effect 依赖变化导致微应用重新加载
+  const buildPropsRef = useRef(() => ({}));
+  buildPropsRef.current = () => {
+    const authInfo = getAuthInfo();
+    return {
+      mainApp: 'portal-web',
+      env,
+      authToken: authInfo.token,
+      wsToken: authInfo.wsToken,
+      uid: authInfo.uid,
+      avatar: authInfo.avatar,
+      nickname: authInfo.nickname,
+    };
+  };
+
+  // 当 sharedServices（websocket）变化时，更新子应用的 props
   useEffect(() => {
-    if (!containerRef.current) return;
+    if (!isMountedRef.current) return;
+
+    const microApp = getMicroApp(appName);
+    microApp?.update?.(buildPropsRef.current());
+  }, [appName]);
+
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+
+    const currentMountId = ++mountIdRef.current;
+    let isCancelled = false;
+
+    setLoading(true);
+    setError(null);
 
-    microAppLogger.log('Loading micro app:', {
-      name,
-      entry,
-      containerId,
-      containerExists: !!document.getElementById(containerId),
-    });
+    const container = getContainer(appName);
+    activateContainer(appName, wrapper);
 
-    // 加载微应用
     const loadApp = async () => {
+      // 卸载旧实例
+      const existingApp = getMicroApp(appName);
+      if (existingApp) {
+        try {
+          await existingApp.unmount();
+        } catch {
+          // 忽略
+        }
+      }
+
+      if (isCancelled) return;
+
       try {
-        microAppRef.current = loadMicroApp({
-          name,
-          entry,
-          container: `#${containerId}`,
-          props: {
-            // 传递给子应用的数据
-            mainApp: '<%= projectName %>',
-            // 共享主应用的 request 实例
-            request,
+        const microApp = loadMicroApp(
+          {
+            name: `${appName}_${currentMountId}`,
+            entry,
+            container,
+            props: buildPropsRef.current(),
           },
-        });
+          { sandbox: { loose: true } },
+        );
+
+        setMicroApp(appName, microApp);
+
+        if (isCancelled) {
+          unmountApp(appName);
+          return;
+        }
 
-        // 等待微应用挂载完成
-        await microAppRef.current.mountPromise;
-        setLoading(false);
+        await microApp.mountPromise;
+
+        if (!isCancelled) {
+          isMountedRef.current = true;
+          setLoading(false);
+        }
       } catch (err) {
-        microAppLogger.error(`Failed to load micro app [${label}]:`, err);
-        setError(err instanceof Error ? err.message : 'Unknown error');
-        setLoading(false);
+        if (!isCancelled) {
+          setError(err instanceof Error ? err.message : 'Unknown error');
+          setLoading(false);
+        }
       }
     };
 
     loadApp();
 
-    // 卸载微应用
     return () => {
-      if (microAppRef.current) {
-        microAppRef.current.unmount();
-        microAppRef.current = null;
-      }
+      isCancelled = true;
+      isMountedRef.current = false;
+
+      // 同步执行，确保在下一次 activate 前移走容器
+      deactivateContainer(appName);
+
+      // 异步卸载微应用，给 qiankun 足够时间完成清理
+      requestAnimationFrame(() => {
+        unmountApp(appName);
+      });
     };
-  }, [entry, name, containerId, label]);
+    // 注意：不依赖 sharedServices，websocket 变化时通过 update() 更新 props 而不重新加载微应用
+  }, [entry, appName, env]);
 
   if (error) {
     return (
@@ -107,13 +161,12 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
   }
 
   return (
-    <div className="micro-app-container" ref={containerRef}>
+    <div className="micro-app-container" ref={wrapperRef}>
       {loading && (
         <div className="micro-app-loading">
-          <Spin dot tip={`正在加载 ${label}...`} />
+          <Spin dot tip={`正在加载 ${displayName || name}...`} />
         </div>
       )}
-      <div id={containerId} className="micro-app-content" />
     </div>
   );
 };

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

@@ -0,0 +1,40 @@
+// https://umijs.org/config/
+
+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> = {
+  // 测试环境：将所有代码打包到一个文件
+  extraBabelPlugins: ['babel-plugin-dynamic-import-node'],
+
+  // 禁用代码分割，只输出一个 JS 和一个 CSS
+  chainWebpack(memo) {
+    // 禁用 splitChunks
+    memo.optimization.splitChunks(false);
+    // 禁用 runtimeChunk
+    memo.optimization.runtimeChunk(false);
+    return memo;
+  },
+  publicPath: PUBLIC_PATH,
+
+  /**
+   * @name 外部依赖配置
+   * @description 将大型公共库排除打包，运行时从主应用获取
+   * @doc https://umijs.org/docs/api/config#externals
+   *
+   * 作为 qiankun 子应用时，这些库由主应用提供：
+   * - react / react-dom: 主应用已加载，避免多实例问题
+   * - @arco-design/web-react: 主应用已加载，复用组件和样式
+   */
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    '@arco-design/web-react': 'arco',
+  },
+};
+
+export default defineConfig(config);

package/generators/subapp-react/templates/homepage/package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "dev": "max dev",
     "build": "npm run build:production",
-    "build:development": "cross-env UMI_ENV=dev max build",
-    "build:production": "cross-env UMI_ENV=prod max build",
+    "build:development": "cross-env UMI_ENV=development max build",
+    "build:production": "cross-env UMI_ENV=production max build",
     "build:testing": "cross-env UMI_ENV=testing max build",
     "postinstall": "max setup",
     "setup": "max setup",

package/package.json

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