generator-mico-cli 0.2.1 → 0.2.2-8.beta.1

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

@@ -1,7 +1,7 @@
-import { findRouteByPath } from '@/common/menu';
-import { NO_AUTH_ROUTE_LIST } from '@/constants';
+import { findRouteByPath, getMenuLabel, isChineseLocale } from '@/common/menu';
+import { isNoLayoutRoute } from '@/constants';
 import useMenu from '@/hooks/useMenu';
-import { Tabs } from '@arco-design/web-react';
+import { Tabs } from '@mico-platform/ui';
 import { history, useLocation } from '@umijs/max';
 import { useEffect, useMemo, useState } from 'react';
 import './index.less';
@@ -9,7 +9,12 @@ import './index.less';
 const TabPane = Tabs.TabPane;
 
 interface TabItem {
+  /** 菜单显示名称（中文） */
   title: string;
+  /** 菜单显示名称（英文） */
+  titleEn?: string;
+  /** 国际化 key */
+  nameKey?: string;
   key: string;
   path: string;
   icon?: string;
@@ -47,7 +52,7 @@ function AppTabs() {
   const [tabs, setTabs] = useState<TabItem[]>([]);
 
   const showTabs = useMemo(() => {
-    return !NO_AUTH_ROUTE_LIST.includes(location.pathname);
+    return !isNoLayoutRoute(location.pathname);
   }, [location.pathname]);
 
   const microAppPrefixes = useMemo(() => {
@@ -110,6 +115,8 @@ function AppTabs() {
       if (!existingTab) {
         const newTab: TabItem = {
           title: currentRoute.name,
+          titleEn: currentRoute.nameEn,
+          nameKey: currentRoute.nameKey,
           key: tabKey,
           path: tabPath,
           icon: currentRoute.icon,
@@ -120,7 +127,12 @@ function AppTabs() {
 
       return prevTabs.map((tab) => {
         if (shouldReuseTab(tab.path, actualPath)) {
-          return { ...tab, title: currentRoute.name };
+          return {
+            ...tab,
+            title: currentRoute.name,
+            titleEn: currentRoute.nameEn,
+            nameKey: currentRoute.nameKey,
+          };
         }
         return tab;
       });
@@ -174,9 +186,14 @@ function AppTabs() {
       onDeleteTab={handleDeleteTab}
       onChange={handleTabChange}
     >
-      {tabs.map((tab) => (
-        <TabPane destroyOnHide key={tab.key} title={tab.title} />
-      ))}
+      {tabs.map((tab) => {
+        const isChinese = isChineseLocale();
+        const label = getMenuLabel(
+          { name: tab.title, nameEn: tab.titleEn, nameKey: tab.nameKey },
+          isChinese,
+        );
+        return <TabPane destroyOnHide key={tab.key} title={label} />;
+      })}
     </Tabs>
   );
 }

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

@@ -0,0 +1,20 @@
+import { Dropdown, type DropdownProps } from '@mico-platform/ui';
+import React from 'react';
+
+export type HeaderDropdownProps = {
+  placement?:
+    | 'bottomLeft'
+    | 'bottomRight'
+    | 'topLeft'
+    | 'topCenter'
+    | 'topRight'
+    | 'bottomCenter';
+} & Omit<DropdownProps, 'overlay'>;
+
+const HeaderDropdown: React.FC<HeaderDropdownProps> = ({
+  ...restProps
+}) => {
+  return <Dropdown {...restProps} />;
+};
+
+export default HeaderDropdown;

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

@@ -1,5 +1,5 @@
-import { getCurrentLocale, getIconFontPath } from '@/common/locale';
-import { Icon } from '@arco-design/web-react';
+import { getIconFontPath } from '@/common/locale';
+import { Icon } from '@mico-platform/ui';
 
 // 该组件用于自定义的图标，用法见https://arco.design/react/components/icon#%E6%B7%BB%E5%8A%A0-iconbox-%E9%A1%B9%E7%9B%AE
 // 图标的名称可以在设计图ued里面找到 https://www.figma.com/design/skTJZPfwLCDgEV9JC6wzpP/%E5%AE%A2%E6%9C%8D%E4%B8%AD%E5%BF%83_%E4%BC%9A%E8%AF%9D%E7%AE%A1%E7%90%86_%E5%B7%A5%E4%BD%9C%E5%8F%B0?node-id=647-4835&t=8swGel7i3bPnKkul-0
@@ -7,13 +7,12 @@ import { Icon } from '@arco-design/web-react';
 // 字体库地址：https://arco.design/iconbox/mime/lib/1945/0
 
 /**
- * 根据当前语言加载对应的图标库
+ * 根据当前语言加载对应的图标库(当前只有中文)
  * 语言切换时会重新加载页面，所以这里只需要在初始化时根据当前语言加载
  */
 function createIconFont() {
-  // 获取当前语言（按优先级：URL参数 > localStorage > 浏览器默认）
-  const currentLocale = getCurrentLocale();
-  const iconPath = getIconFontPath(currentLocale);
+  // TODO: 后续支持多语言时，需要根据当前语言加载对应的图标库
+  const iconPath = getIconFontPath();
 
   // 创建 IconFont 实例
   return Icon.addFromIconFontCn({ src: iconPath });

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

@@ -4,20 +4,17 @@
 
 .micro-app-container {
   width: 100%;
-  height: 100%;
   position: relative;
+  display: flex;
+  flex-direction: column;
   overflow: auto;
 }
 
 .micro-app-loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  min-height: 600px;
   background: var(--color-bg-1);
   z-index: 10;
 }
@@ -48,10 +45,28 @@
   // 激活时在文档流中，继承占位元素的尺寸
   width: 100%;
   height: 100%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
   overflow: auto;
+  min-height: calc(100vh - 134px);
+
 
   > div {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  > div > div {
     height: 100%;
+    display: flex;
+    flex: 1 1;
+  }
+
+  > div > div > div {
+    width: 100%;
+    flex: 1 1;
   }
 
   // 隐藏状态（在 body 中）

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

@@ -1,20 +1,18 @@
 import { getAuthInfo } from '@/common/auth/auth-manager';
 import { EEnv, getEnv } from '@/common/env';
+import { getCurrentLocale } from '@/common/locale';
 import { request } from '@/common/request';
-import { Spin } from '@arco-design/web-react';
-import { loadMicroApp } from 'qiankun';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  activateContainer,
-  deactivateContainer,
-  getContainer,
-  getMicroApp,
-  setMicroApp,
-  unmountApp,
-} from './container-manager';
+import { isPageAuthFree } from '@/common/menu/parser';
+import { isAuthDisabled, isNoAuthRoute, isNoPermissionRoute } from '@/constants';
+import { Spin } from '@mico-platform/ui';
+import { useLocation, useModel } from '@umijs/max';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import './index.less';
+import { microAppManager, type MicroAppState } from './micro-app-manager';
 
 interface MicroAppLoaderProps {
+  /** 微应用在主应用中的挂载路径前缀（来自 ParsedRoute.base / 页面配置 base），经 normalizeMicroAppBase 后传给子应用 */
+  base: string;
   entry: string;
   name: string;
   displayName?: string;
@@ -22,6 +20,10 @@ interface MicroAppLoaderProps {
   routePath?: string;
 }
 
+/** 微应用 base：先去掉末尾 /，再去掉末尾 *（与路由 path 约定一致） */
+export const normalizeMicroAppBase = (path: string): string =>
+  path.replace(/\/+$/, '').replace(/\*+$/, '');
+
 const sanitizeId = (path: string): string => {
   return (
     path
@@ -32,17 +34,34 @@ const sanitizeId = (path: string): string => {
   );
 };
 
+/**
+ * 微应用加载器
+ *
+ * 使用 MicroAppManager 统一管理微应用的加载和卸载。
+ * 用户意图追踪在 MicroAppManager 内部处理。
+ */
 const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
+  base,
   entry,
   name,
   displayName,
   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);
+  const [state, setState] = useState<MicroAppState>({
+    loading: true,
+    error: null,
+    mounted: false,
+  });
+
+  const { initialState } = useModel('@@initialState');
+  const location = useLocation();
+  const isAuthReady =
+    isAuthDisabled() ||
+    isPageAuthFree(location.pathname) ||
+    isNoAuthRoute(location.pathname) ||
+    isNoPermissionRoute(location.pathname) ||
+    !!initialState?.currentUser;
 
   const appName = sanitizeId(name);
 
@@ -55,173 +74,88 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
       : 'production';
   }, []);
 
-  // 使用 ref 存储构建 props 的函数，避免 effect 依赖变化导致微应用重新加载
-  const buildPropsRef = useRef(() => ({}));
-  buildPropsRef.current = () => {
+  // 构建传递给子应用的 props
+  const buildProps = useCallback(() => {
     const authInfo = getAuthInfo();
     return {
-      mainApp: 'portal-web',
+      mainApp: '<%= projectName %>',
       env,
       authToken: authInfo.token,
       uid: authInfo.uid,
       avatar: authInfo.avatar,
       nickname: authInfo.nickname,
+      base: normalizeMicroAppBase(base || '/'),
       // 传递当前路由路径，让子应用进行内部路由切换
       routePath,
       // 传递主应用的 request 实例，子应用可直接使用
       request,
+      // 传递当前多语言类型给子应用（zh-CN, en-US）
+      locale: getCurrentLocale(),
     };
-  };
+  }, [base, env, routePath]);
 
-  // 当路由等"无需重载"的状态更新时，通过 update() 通知子应用
-  useEffect(() => {
-    if (!isMountedRef.current) return;
+  // ref 持有最新的 buildProps，避免加载 effect 依赖它导致子应用被重载
+  const buildPropsRef = useRef(buildProps);
+  buildPropsRef.current = buildProps;
 
-    const microApp = getMicroApp(appName);
-    microApp?.update?.(buildPropsRef.current());
-  }, [appName, routePath]);
+  // 当 props 变化时，通知子应用更新（不重新加载）
+  useEffect(() => {
+    if (state.mounted) {
+      microAppManager.updateProps(buildProps());
+    }
+  }, [state.mounted, buildProps]);
 
+  // 加载微应用（只在 entry/appName/isAuthReady 变化时触发）
   useEffect(() => {
     const wrapper = wrapperRef.current;
-    if (!wrapper) return;
-
-    const currentMountId = ++mountIdRef.current;
-    let isCancelled = false;
-
-    setLoading(true);
-    setError(null);
-
-    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 {
-        const microApp = loadMicroApp(
-          {
-            name: `${appName}_${currentMountId}`,
-            entry,
-            container,
-            props: buildPropsRef.current(),
-          },
-          {
-            sandbox: { loose: true },
-            // 自定义 fetch，包装原生 fetch 以便在网络层面捕获错误
-            fetch: async (url, options) => {
-              try {
-                const response = await window.fetch(url, options);
-                if (!response.ok) {
-                  throw new Error(
-                    `HTTP ${response.status}: ${response.statusText}`,
-                  );
-                }
-                return response;
-              } catch (err) {
-                // 将网络错误转换为更友好的错误信息
-                const message =
-                  err instanceof Error ? err.message : 'Network error';
-                throw new Error(`加载资源失败 (${url}): ${message}`);
-              }
-            },
-          },
-        );
-
-        setMicroApp(appName, microApp);
-
-        // 关键：必须同时处理 loadPromise 和 bootstrapPromise/mountPromise 的错误
-        // qiankun 内部会产生多个 Promise 链，任何一个未处理的 rejection 都会导致页面崩溃
-        const handlePromiseError = (err: unknown) => {
-          if (!isCancelled) {
-            const message =
-              err instanceof Error ? err.message : 'Unknown error';
-            setError(message);
-            setLoading(false);
-          }
-        };
-
-        // 为所有 qiankun 返回的 Promise 添加错误处理器
-        microApp.loadPromise.catch(handlePromiseError);
-        microApp.bootstrapPromise.catch(handlePromiseError);
-        microApp.mountPromise.catch(handlePromiseError);
-
-        if (isCancelled) {
-          unmountApp(appName);
-          return;
-        }
-
-        // 等待加载完成，这里的错误会被上层 catch 捕获
-        await microApp.loadPromise;
-
-        if (isCancelled) {
-          unmountApp(appName);
-          return;
-        }
-
-        // 等待挂载完成
-        await microApp.mountPromise;
-
-        if (!isCancelled) {
-          isMountedRef.current = true;
-          setLoading(false);
-        }
-      } catch (err) {
-        if (!isCancelled) {
-          const message = err instanceof Error ? err.message : 'Unknown error';
-          // 提取更友好的错误信息
-          const friendlyMessage = message.includes('Failed to fetch')
-            ? '无法连接到子应用服务，请检查子应用是否已启动'
-            : message;
-          setError(friendlyMessage);
-          setLoading(false);
-        }
-      }
-    };
-
-    loadApp();
+    if (!wrapper) {
+      console.warn('[MicroAppLoader] wrapper is null, skip loading');
+      return;
+    }
+
+    // 等待认证信息准备好
+    if (!isAuthReady) {
+      console.log('[MicroAppLoader] waiting for auth ready:', { appName, entry });
+      return;
+    }
+
+    console.log('🔍[路由调试] MicroAppLoader useEffect 执行', { appName, entry });
+
+    // 设置状态回调
+    microAppManager.setStateCallback(setState);
+
+    // 切换到目标微应用
+    microAppManager.switchTo({
+      name: appName,
+      entry,
+      target: wrapper,
+      props: buildPropsRef.current(),
+    });
 
     return () => {
-      isCancelled = true;
-      isMountedRef.current = false;
-
-      // 同步执行，确保在下一次 activate 前移走容器
-      deactivateContainer(appName);
-
-      // 异步卸载微应用，给 qiankun 足够时间完成清理
-      requestAnimationFrame(() => {
-        unmountApp(appName);
-      });
+      console.log('🔍[路由调试] MicroAppLoader cleanup', { appName });
+      microAppManager.cancel();
+      microAppManager.setStateCallback(null);
     };
-    // 注意：不依赖 sharedServices，websocket 变化时通过 update() 更新 props 而不重新加载微应用
-  }, [entry, appName, env]);
+  }, [entry, appName, isAuthReady, buildProps]);
 
   return (
     <div className="micro-app-container">
-      {error && (
+      {state.error && (
         <div className="micro-app-error">
           <p>微应用加载失败</p>
-          <p className="error-detail">{error}</p>
+          <p className="error-detail">{state.error}</p>
         </div>
       )}
-      {loading && !error && (
+      {state.loading && !state.error && (
         <div className="micro-app-loading">
           <Spin dot tip={`正在加载 ${displayName || name}...`} />
         </div>
       )}
-      {/* qiankun 容器挂载点，error 时隐藏 */}
+      {/* qiankun 容器挂载点 */}
       <div
         ref={wrapperRef}
-        style={{ display: error ? 'none' : 'block', height: '100%' }}
+        style={{ display: state.error ? 'none' : 'block', height: '100%' }}
       />
     </div>
   );