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

package/generators/micro-react/templates/apps/layout/src/common/theme.ts

@@ -3,7 +3,7 @@
  * 支持在 localStorage 中存储主题状态，并在页面加载时动态加载对应的主题
  */
 
-import { THEME } from './constants';
+import { THEME } from '@/constants';
 
 export type ThemeMode = 'light' | 'dark';
 
@@ -44,16 +44,14 @@ export function setTheme(theme: ThemeMode): void {
 
 /**
  * 应用主题到 DOM
- * 通过切换 body 的 data-theme 和 arco-theme 属性来应用不同的主题
+ * 通过切换 body 的 data-theme 和 arco-theme 属性来应用不同的主题（@mico-platform/ui 基于 Arco，兼容 arco-theme）
  */
 export function applyTheme(theme: ThemeMode): void {
   if (typeof document === 'undefined') return;
 
   if (theme === 'dark') {
-    document.body.setAttribute('arco-theme', 'dark');
     document.body.setAttribute('data-theme', 'dark');
   } else {
-    document.body.removeAttribute('arco-theme');
     document.body.setAttribute('data-theme', 'normal');
   }
 }

package/generators/micro-react/templates/apps/layout/src/common/upload/oss.ts

@@ -1,9 +1,8 @@
 import { fetchUploadSignedUrl } from '@/services/oss';
-import type { UploadProps } from '@arco-design/web-react';
-import { Message } from '@arco-design/web-react';
-import type { UploadItem } from '@arco-design/web-react/es/Upload';
+import type { UploadProps, UploadItem } from '@mico-platform/ui';
+import { Message } from '@mico-platform/ui';
 import SparkMD5 from 'spark-md5';
-import type { TDirCategory } from '../constants';
+import type { TDirCategory } from '@/constants';
 import type {
   OssUploadError,
   UploadLifecycleEvent,

package/generators/micro-react/templates/apps/layout/src/common/upload/types.ts

@@ -1,4 +1,4 @@
-import type { TDirCategory } from '../constants';
+import type { TDirCategory } from '@/constants';
 
 export interface UploadLifecycleEvent {
   stage: 'hashing' | 'signing' | 'uploading';

package/generators/micro-react/templates/apps/layout/src/common/uploadFiles.ts

@@ -1,7 +1,7 @@
 // ! 这个函数不能放到 ./helpers.ts 中，因为 ./request/index.ts 从 ./helpers.ts 导入了 getFromStorage, safeParseJSON，如果放到 ./helpers.ts 中，会导致循环引入
 // ! 开发态下，发生循环引入时， mako 不会有编译时报错，但运行时会报错
 
-import type { TDirCategory } from './constants';
+import type { TDirCategory } from '@/constants';
 import { uploadToOss } from './upload/oss';
 
 /** 上传文件到 OSS 并获取 URL */

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

@@ -1,10 +1,15 @@
-@import '<%= packageScope %>/shared-styles/variables-only';
+@import '@mico-platform/theme/variables';
 
 .app-tabs.arco-tabs {
+  // margin-bottom: 8px;
   min-height: 46px;
   position: fixed;
+  // width: calc(100vw - @sidebar-width - 63px + 48px);
+  // transform: translateX(-24px);
+  // padding-left: 24px;
+  // width: calc(100vw - var(--sider-width) - 46px);
   right: 0;
-  left: var(--sider-width, 200px);
+  left: var(--sider-width);
   padding-left: 16px;
   transition: left 0.2s ease;
   z-index: 999;
@@ -15,11 +20,11 @@
 
   .arco-tabs-header-title {
     border: none;
-    background-color: transparent;
     border-radius: @border-radius-lg;
 
     &-active {
       border: none;
+      // background-color: @color-fill-3;
     }
 
     &-active:hover {

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,131 +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 } },
-        );
-
-        // 立即给 loadPromise 添加错误处理器，防止 unhandled rejection
-        // 虽然提前检查了服务可达性，但 qiankun 可能因其他原因失败（CORS、HTML 解析等）
-        microApp.loadPromise.catch((err) => {
-          console.error(`[MicroAppLoader] ${appName} loadPromise rejected:`, err);
-        });
-
-        setMicroApp(appName, microApp);
-
-        if (isCancelled) {
-          unmountApp(appName);
-          return;
-        }
-
-        // mountPromise 内部会等待 loadPromise，错误会传递到 catch 块
-        await microApp.mountPromise;
-
-        if (!isCancelled) {
-          isMountedRef.current = true;
-          setLoading(false);
-        }
-      } catch (err) {
-        if (!isCancelled) {
-          setError(err instanceof Error ? err.message : 'Unknown error');
-          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>
   );