generator-mico-cli 0.1.28 → 0.2.1

package/generators/micro-react/templates/apps/layout/src/common/request/url-resolver.ts

@@ -2,40 +2,24 @@
  * URL 解析与拼接工具
  */
 
-import {
-  resolveProxySuffix as getProxySuffix,
-  resolveApiBaseUrl,
-} from './config';
+import { resolveApiBaseUrl, resolveProxySuffix } from './config';
 import type { UnifiedRequestOptions } from './types';
 
 /**
- * 拼接 baseUrl 和路径，自动处理多余的斜杠
+ * 判断是否为绝对 URL
  */
-export const joinBaseUrl = (baseUrl: string, url: string): string => {
-  if (
+const isAbsoluteUrl = (url: string): boolean => {
+  return (
     url.startsWith('http://') ||
     url.startsWith('https://') ||
     url.startsWith('//')
-  ) {
-    return url;
-  }
-  const normalizedBase = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
-  const normalizedPath = url.startsWith('/') ? url : `/${url}`;
-  return `${normalizedBase}${normalizedPath}`;
+  );
 };
 
 /**
  * 拼接代理路径和 API 路径，避免双斜杠
  */
-export const joinProxyAndPath = (proxySuffix: string, path: string): string => {
-  if (
-    path.startsWith('http://') ||
-    path.startsWith('https://') ||
-    path.startsWith('//')
-  ) {
-    // 绝对 URL 直接透传，不拼接代理前缀
-    return path;
-  }
+const joinProxyAndPath = (proxySuffix: string, path: string): string => {
   const normalizedProxy = proxySuffix.endsWith('/')
     ? proxySuffix.slice(0, -1)
     : proxySuffix;
@@ -43,30 +27,22 @@ export const joinProxyAndPath = (proxySuffix: string, path: string): string => {
   return `${normalizedProxy}${normalizedPath}`;
 };
 
-/**
- * 判断是否为绝对 URL
- */
-const isAbsoluteUrl = (url: string): boolean => {
-  return (
-    url.startsWith('http://') ||
-    url.startsWith('https://') ||
-    url.startsWith('//')
-  );
-};
-
 /**
  * 解析最终请求 URL
  *
  * 配置优先级：
  * 1. rawUrl: true → 直接返回原始 url
  * 2. 绝对 URL → 直接返回
- * 3. 开发环境 → 返回相对路径
- * 4. 生产环境 → baseURL + (skipProxy ? '' : proxySuffix) + url
+ * 3. skipProxy: true → 拼接 apiBaseUrl + url（跳过 proxySuffix）
+ * 4. 其他情况 → 拼接 apiBaseUrl + proxySuffix + url
+ *
+ * 示例（testing 环境，apiBaseUrl = https://dashboard-api-test.micoplatform.com）：
+ * - 默认: /api/user/info → https://dashboard-api-test.micoplatform.com/proxy/audit_svr/api/user/info
+ * - skipProxy: /api/user/info → https://dashboard-api-test.micoplatform.com/api/user/info
  */
 export const resolveRequestUrl = (
   url: string,
   options?: UnifiedRequestOptions,
-  isAlwaysRemote = false,
 ): string => {
   // rawUrl: 完全透传，不做任何处理
   if (options?.rawUrl) {
@@ -78,21 +54,29 @@ export const resolveRequestUrl = (
     return url;
   }
 
-  const useRelative = process.env.NODE_ENV !== 'production' && !isAlwaysRemote;
-  if (useRelative) {
-    return url;
-  }
+  // 拼接 apiBaseUrl + proxySuffix + url
+  const apiBaseUrl = resolveApiBaseUrl();
+  // skipProxy: true 时不拼接 proxySuffix
+  const proxySuffix = options?.skipProxy
+    ? ''
+    : resolveProxySuffix(options?.proxySuffix);
 
-  // 确定 baseURL
-  const baseURL = options?.baseURL ?? resolveApiBaseUrl();
+  if (apiBaseUrl) {
+    // 有 apiBaseUrl 时，拼接完整的绝对路径
+    const pathPart = proxySuffix ? joinProxyAndPath(proxySuffix, url) : url;
+    const normalizedBase = apiBaseUrl.endsWith('/')
+      ? apiBaseUrl.slice(0, -1)
+      : apiBaseUrl;
+    const normalizedPath = pathPart.startsWith('/') ? pathPart : `/${pathPart}`;
+    return `${normalizedBase}${normalizedPath}`;
+  }
 
-  // 确定是否拼接 proxySuffix
-  const shouldUseProxy = !options?.skipProxy;
-  const proxySuffix = shouldUseProxy ? getProxySuffix(options?.proxySuffix) : '';
+  // 没有 apiBaseUrl 时，仅拼接 proxySuffix（相对路径）
+  if (proxySuffix) {
+    return joinProxyAndPath(proxySuffix, url);
+  }
 
-  // 拼接最终 URL
-  const pathWithProxy = proxySuffix ? joinProxyAndPath(proxySuffix, url) : url;
-  return joinBaseUrl(baseURL, pathWithProxy);
+  return url;
 };
 
 /**

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

@@ -1,4 +1,4 @@
-@import '@/styles/variables.less';
+@import '<%= packageScope %>/shared-styles/variables-only';
 
 .app-tabs.arco-tabs {
   min-height: 46px;

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

@@ -1,4 +1,4 @@
-import { getAuthInfo } from '@/common/auth/cs-auth-manager';
+import { getAuthInfo } from '@/common/auth/auth-manager';
 import { EEnv, getEnv } from '@/common/env';
 import { request } from '@/common/request';
 import { Spin } from '@arco-design/web-react';
@@ -63,7 +63,6 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
       mainApp: 'portal-web',
       env,
       authToken: authInfo.token,
-      wsToken: authInfo.wsToken,
       uid: authInfo.uid,
       avatar: authInfo.avatar,
       nickname: authInfo.nickname,
@@ -116,16 +115,60 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
             container,
             props: buildPropsRef.current(),
           },
-          { sandbox: { loose: true } },
+          {
+            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) {
@@ -134,7 +177,12 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
         }
       } catch (err) {
         if (!isCancelled) {
-          setError(err instanceof Error ? err.message : 'Unknown error');
+          const message = err instanceof Error ? err.message : 'Unknown error';
+          // 提取更友好的错误信息
+          const friendlyMessage = message.includes('Failed to fetch')
+            ? '无法连接到子应用服务，请检查子应用是否已启动'
+            : message;
+          setError(friendlyMessage);
           setLoading(false);
         }
       }
@@ -157,24 +205,24 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
     // 注意：不依赖 sharedServices，websocket 变化时通过 update() 更新 props 而不重新加载微应用
   }, [entry, appName, env]);
 
-  if (error) {
-    return (
-      <div className="micro-app-container">
+  return (
+    <div className="micro-app-container">
+      {error && (
         <div className="micro-app-error">
           <p>微应用加载失败</p>
           <p className="error-detail">{error}</p>
         </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="micro-app-container" ref={wrapperRef}>
-      {loading && (
+      )}
+      {loading && !error && (
         <div className="micro-app-loading">
           <Spin dot tip={`正在加载 ${displayName || name}...`} />
         </div>
       )}
+      {/* qiankun 容器挂载点，error 时隐藏 */}
+      <div
+        ref={wrapperRef}
+        style={{ display: error ? 'none' : 'block', height: '100%' }}
+      />
     </div>
   );
 };

package/generators/micro-react/templates/apps/layout/src/global.less

@@ -1,5 +1,9 @@
 // ==================== 全局样式 ====================
-// 导入共享主题变量（CSS Variables + Less Variables）
+// 先导入 Arco Design CSS（确保它在项目样式之前）
+@import (css) '~@arco-design/web-react/dist/css/arco.css';
+
+// 再导入共享主题变量（CSS Variables + Less Variables）
+// 这样项目的变量定义会在 Arco 之后，可以正确覆盖
 @import '<%= packageScope %>/shared-styles';
 
 * {

package/generators/micro-react/templates/apps/layout/src/hooks/useAuth.ts

@@ -1,5 +1,4 @@
-import { getAuthInfo } from '@/common/auth/tool';
-import type { AuthInfo } from '@/common/auth/type';
+import { getAuthInfo, type IAuthInfo } from '@/common/auth/auth-manager';
 import { handleAuthFailureRedirect, resolveAuthToken } from '@/common/request';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -13,7 +12,7 @@ interface UseAuthOptions {
  */
 export const useAuth = (options: UseAuthOptions = {}) => {
   const { skipAuthCheck = false } = options;
-  const [authInfo, setAuthInfo] = useState<AuthInfo | null>(null);
+  const [authInfo, setAuthInfo] = useState<IAuthInfo | null>(null);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [loading, setLoading] = useState(true);
 

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

@@ -1,4 +1,4 @@
-@import '@/styles/variables.less';
+@import '<%= packageScope %>/shared-styles/variables-only';
 
 // Common mixins
 .header-gray-btn-mixin() {

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

@@ -1,5 +1,6 @@
-import { getAuthInfo } from '@/common/auth/tool';
 import { useTheme } from '@/hooks/useTheme';
+import { logout } from '@/common/auth';
+import { ROUTES } from '@/common/constants';
 import {
   Avatar,
   Divider,
@@ -24,12 +25,14 @@ const Header = Layout.Header;
 const LayoutHeader: React.FC = () => {
   const { initialState } = useModel('@@initialState');
   const { theme, toggleTheme } = useTheme();
-  const authInfo = getAuthInfo();
 
   const handleMenuClick = useCallback((key: string) => {
     if (key === 'logout') {
-      // TODO: Implement logout logic
-      console.log('logout');
+      // 清除本地存储的认证信息
+      logout();
+      // 跳转到登录页
+      window.location.href = ROUTES.LOGIN;
+      return;
     } else if (key === 'settings') {
       // TODO: Navigate to settings page
       console.log('settings');
@@ -55,7 +58,7 @@ const LayoutHeader: React.FC = () => {
       {/* Logo */}
       <div className="layout-header-logo">
         <span className="logo-text">
-          {window.__MICO_MENUS__?.appName || 'AUDIT CENTER'}
+          {window.__MICO_MENUS__?.appName || 'Mico CENTER'}
         </span>
       </div>
 
@@ -76,15 +79,16 @@ const LayoutHeader: React.FC = () => {
           {/* User info */}
           <Dropdown droplist={droplist} position="br" trigger="click">
             <div className="layout-header-user">
-              <Avatar size={32} style={{ marginRight: 8 }}>
-                {authInfo.avatar ? (
-                  <img src={authInfo.avatar} alt="avatar" />
-                ) : (
-                  <IconUser />
-                )}
-              </Avatar>
+              {initialState?.currentUser?.avatar && (
+                <Avatar size={32} style={{ marginRight: 8 }}>
+                  {initialState?.currentUser?.avatar ? (
+                    <img src={initialState.currentUser.avatar} alt="avatar" />
+                  ) : null}
+                </Avatar>
+              )}
               <span className="user-name">
-                {authInfo.nickname || initialState?.currentUser?.name || '用户'}
+                {initialState?.currentUser?.user_name ||
+                  initialState?.currentUser?.email}
               </span>
             </div>
           </Dropdown>

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

@@ -1,4 +1,4 @@
-@import '@/styles/variables.less';
+@import '<%= packageScope %>/shared-styles/variables-only';
 
 .arco-layout-sider-collapsed {
   .layout-menu {

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

@@ -1,10 +1,11 @@
 import type { ParsedMenuItem } from '@/common/menu';
-import { getWindowMenus, parseMenuItems } from '@/common/menu';
+import { filterMenuItems, getWindowMenus, parseMenuItems } from '@/common/menu';
 import IconFont from '@/components/IconFont';
 import { useMenuState } from '@/hooks/useMenuState';
 import { useTheme } from '@/hooks/useTheme';
 import { Layout, Menu } from '@arco-design/web-react';
 import * as Icons from '@arco-design/web-react/icon';
+import { useModel } from '@umijs/max';
 import React, { useEffect, useMemo, useRef } from 'react';
 import './index.less';
 
@@ -103,11 +104,18 @@ const LayoutMenu: React.FC<LayoutMenuProps> = () => {
   const siderRef = useRef<HTMLDivElement>(null);
   const { isDark } = useTheme();
 
+  const { initialState } = useModel('@@initialState');
+  const currentUser = initialState?.currentUser;
+
   // Parse menu data
   const menuItems = useMemo(() => {
     const menus = getWindowMenus();
-    return parseMenuItems(menus);
-  }, []);
+    const filteredMenus = filterMenuItems(menus, {
+      isSuperuser: currentUser?.is_superuser,
+      sideMenus: (currentUser?.side_menus || []) as string[],
+    });
+    return parseMenuItems(filteredMenus);
+  }, [currentUser?.is_superuser, currentUser?.side_menus]);
 
   // 使用菜单状态 Hook
   const {

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

@@ -1,4 +1,4 @@
-@import '@/styles/variables.less';
+@import '<%= packageScope %>/shared-styles/variables-only';
 
 .layout-container {
   min-width: 100vw;

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

@@ -1,10 +1,11 @@
 import { layoutLogger } from '@/common/logger';
-import { extractRoutes, findRouteByPath, getWindowMenus } from '@/common/menu';
+import { extractRoutes, filterMenuItems, findRouteByPath, getWindowMenus } from '@/common/menu';
 import AppTabs from '@/components/AppTabs';
 import MicroAppLoader from '@/components/MicroAppLoader';
 import { NO_AUTH_ROUTE_LIST } from '@/constants';
+import ForbiddenPage from '@/pages/403';
 import { Layout, Spin } from '@arco-design/web-react';
-import { Outlet, useLocation } from '@umijs/max';
+import { Outlet, useLocation, useModel } from '@umijs/max';
 import React, { Suspense, useMemo } from 'react';
 import LayoutHeader from './components/header';
 import LayoutMenu from './components/menu';
@@ -38,17 +39,55 @@ const getAppNameFromEntry = (entry: string): string => {
  */
 const BasicLayout: React.FC = () => {
   const location = useLocation();
+  const { initialState } = useModel('@@initialState');
+  const currentUser = initialState?.currentUser;
 
-  // 解析路由配置
-  const routes = useMemo(() => {
+  const filterOptions = useMemo(
+    () => ({
+      isSuperuser: currentUser?.is_superuser,
+      sideMenus: (currentUser?.side_menus || []) as string[],
+    }),
+    [currentUser?.is_superuser, currentUser?.side_menus],
+  );
+  // 所有路由（不过滤权限，用于判断路径是否存在）
+  const allRoutes = useMemo(() => {
     const menus = getWindowMenus();
     return extractRoutes(menus);
   }, []);
 
-  // 查找当前路由配置
+  // 有权限的路由
+  const allowedRoutes = useMemo(() => {
+    const menus = getWindowMenus();
+    const filteredMenus = filterMenuItems(menus, filterOptions);
+    return extractRoutes(filteredMenus);
+  }, [filterOptions]);
+
+  // 查找当前路由配置（优先从有权限的路由中查找）
   const currentRoute = useMemo(() => {
-    return findRouteByPath(routes, location.pathname);
-  }, [routes, location.pathname]);
+    return findRouteByPath(allowedRoutes, location.pathname);
+  }, [allowedRoutes, location.pathname]);
+
+  // 判断是否是动态路由但无权限
+  const isForbidden = useMemo(() => {
+    // 如果在有权限的路由中找到了，说明有权限
+    if (currentRoute) return false;
+    // 如果在所有路由中也找不到，说明不是动态路由，交给 Umi 处理
+    const routeInAll = findRouteByPath(allRoutes, location.pathname);
+    // 在所有路由中存在，但在有权限的路由中不存在 → 无权限
+    const forbidden = !!routeInAll;
+
+    layoutLogger.log('isForbidden check:', {
+      pathname: location.pathname,
+      currentRoute,
+      routeInAll,
+      forbidden,
+      allRoutesCount: allRoutes.length,
+      allowedRoutesCount: allowedRoutes.length,
+      filterOptions,
+    });
+
+    return forbidden;
+  }, [currentRoute, allRoutes, allowedRoutes, location.pathname, filterOptions]);
 
   // 判断是否需要显示布局
   const showLayout = !NO_AUTH_ROUTE_LIST.includes(location.pathname);
@@ -58,9 +97,14 @@ const BasicLayout: React.FC = () => {
     layoutLogger.log('renderContent:', {
       pathname: location.pathname,
       currentRoute,
-      routes,
+      isForbidden,
     });
 
+    // 无权限，显示 403
+    if (isForbidden) {
+      return <ForbiddenPage />;
+    }
+
     // 如果有匹配的动态路由配置且需要加载微应用
     if (currentRoute?.loadType === 'microapp' && currentRoute.entry) {
       layoutLogger.log('Loading microapp:', currentRoute);

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

@@ -0,0 +1,28 @@
+import { Button, Result } from '@arco-design/web-react';
+import { history } from '@umijs/max';
+import React from 'react';
+
+const ForbiddenPage: React.FC = () => {
+  return (
+    <div style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      minHeight: 400,
+    }}>
+      <Result
+        status="403"
+        title="无权限访问"
+        subTitle="抱歉，您没有权限访问此页面"
+        extra={
+          <Button type="primary" onClick={() => history.push('/')}>
+            返回首页
+          </Button>
+        }
+      />
+    </div>
+  );
+};
+
+export default ForbiddenPage;