generator-mico-cli 0.2.31 → 0.2.33

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

@@ -13,6 +13,7 @@ import { isNoAuthRoute, ROUTES } from '@/constants';
 import { captureError } from '@common-web/sentry';
 import { formatLayoutMessage } from '@/common/intl';
 import { Modal } from '@mico-platform/ui';
+import React from 'react';
 import {
   getTicketParam,
   resolveAuthToken,
@@ -36,6 +37,38 @@ let tokenAcquiredAt: number | null = null;
 /** 登录失败弹窗是否已显示，防止多个请求同时失败时重复弹出 */
 let redirectLimitModalShown = false;
 
+/** 是否正在执行 SSO 硬跳转，置位后用于阻断渲染与拦截在途请求 */
+let redirecting = false;
+
+/** 是否正在执行 SSO 硬跳转 */
+export const isRedirecting = (): boolean => redirecting;
+
+/**
+ * ticket 换 token 阶段的网络层故障（Failed to fetch / NetworkError 等）。
+ * 由 ensureSsoSession() 在 catch 阶段抛出，供调用方识别是否为网络异常，
+ * 避免使用模块级 mutable 状态在函数间传递信号。
+ */
+export class SsoNetworkError extends Error {
+  constructor(
+    message: string,
+    public readonly cause?: unknown,
+  ) {
+    super(message);
+    this.name = 'SsoNetworkError';
+  }
+}
+
+/** 判断错误是否为网络层故障（无法建立连接，而非 HTTP 错误响应） */
+const isNetworkError = (err: Error): boolean => {
+  const msg = err.message.toLowerCase();
+  return (
+    msg.includes('failed to fetch') ||
+    msg.includes('networkerror') ||
+    msg.includes('network error') ||
+    msg.includes('load failed')
+  );
+};
+
 /**
  * 执行 SSO 重定向跳转，回跳地址中固定携带 redirect_count=1
  */
@@ -49,6 +82,9 @@ const performSsoRedirect = (): void => {
   redirectUrl.searchParams.delete('ticket');
   const serviceUrl = redirectUrl.toString();
 
+  // 在赋值 location.href 之前置位，浏览器导航期间用于阻断渲染与拦截在途请求
+  redirecting = true;
+
   window.location.href = `${
     externalLoginPath ?? ROUTES.LOGIN
   }?service=${encodeURIComponent(serviceUrl)}`;
@@ -56,21 +92,28 @@ const performSsoRedirect = (): void => {
 
 /**
  * 处理认证失败后的重定向
+ *
+ * @param options.isNetworkError 是否由 ticket 换 token 阶段的网络异常触发，
+ *   true 时弹窗展示 IOA/网络排障指引；其它认证失败入口（401 重试失败、登出等）
+ *   不传或传 false，使用默认「自动登录失败」文案。
  */
-export const handleAuthFailureRedirect = (): void => {
-  if (typeof window === 'undefined') return;
+export const handleAuthFailureRedirect = (
+  options: { isNetworkError?: boolean } = {},
+): boolean => {
+  const { isNetworkError: isNetworkErr = false } = options;
+  if (typeof window === 'undefined') return false;
 
   const authCheckPath = resolveAuthCheckPath(window.location.pathname);
 
   // 与 getInitialState 一致：用 authCheckPath 判断，避免「/ + defaultPath」首屏仍按 / 误判为免认证
   if (isNoAuthRoute(authCheckPath)) {
     console.log('[SSO] 当前路由在免认证列表中，跳过 SSO 重定向', { authCheckPath });
-    return;
+    return false;
   }
 
   if (isPageAuthFree(authCheckPath)) {
     console.log('[SSO] 页面 accessControlEnabled=false，跳过 SSO 重定向', { authCheckPath });
-    return;
+    return false;
   }
 
   // 从 URL 中获取当前 redirect 登录的次数
@@ -85,7 +128,7 @@ export const handleAuthFailureRedirect = (): void => {
   // 如果 redirect 次数小于 1 次，则执行自动 redirect 跳转登录
   if (redirectCount < 1) {
     performSsoRedirect();
-    return;
+    return true;
   }
 
   // redirect 次数已达上限，停止自动重定向，记录日志并弹窗询问用户是否手动重试
@@ -105,18 +148,69 @@ export const handleAuthFailureRedirect = (): void => {
         ? new Date(tokenAcquiredAt).toISOString()
         : null,
       tokenAgeSeconds: tokenAge,
+      isNetworkError: isNetworkErr,
     },
   });
 
   if (redirectLimitModalShown) {
     console.log('[SSO] 登录失败弹窗已显示，跳过重复弹出');
-    return;
+    return false;
   }
 
   redirectLimitModalShown = true;
+  const secondaryStyle: React.CSSProperties = {
+    marginTop: 8,
+    color: 'var(--color-text-3, #86909c)',
+    fontSize: 13,
+  };
+  const modalContent = isNetworkErr
+    ? React.createElement(
+        'div',
+        null,
+        React.createElement(
+          'div',
+          null,
+          formatLayoutMessage({
+            id: 'sso_auth_failure_network_primary',
+            defaultMessage: '网络异常，无法完成自动登录',
+          }),
+        ),
+        React.createElement(
+          'div',
+          { style: secondaryStyle },
+          React.createElement(
+            'div',
+            null,
+            formatLayoutMessage({
+              id: 'sso_auth_failure_network_hint_title',
+              defaultMessage: '请检查以下情况：',
+            }),
+          ),
+          React.createElement(
+            'div',
+            null,
+            formatLayoutMessage({
+              id: 'sso_auth_failure_network_hint_ioa',
+              defaultMessage: '1. IOA 是否已连接',
+            }),
+          ),
+          React.createElement(
+            'div',
+            null,
+            formatLayoutMessage({
+              id: 'sso_auth_failure_network_hint_network',
+              defaultMessage: '2. 当前网络是否可正常访问',
+            }),
+          ),
+        ),
+      )
+    : formatLayoutMessage({
+        id: 'sso_auth_failure_modal_content',
+        defaultMessage: '自动登录失败，是否重新尝试登录？',
+      });
   Modal.confirm({
     title: formatLayoutMessage({ id: 'sso_auth_failure_modal_title', defaultMessage: '登录提示' }),
-    content: formatLayoutMessage({ id: 'sso_auth_failure_modal_content', defaultMessage: '自动登录失败，是否重新尝试登录？' }),
+    content: modalContent,
     okText: formatLayoutMessage({ id: 'sso_auth_failure_modal_ok', defaultMessage: '重新登录' }),
     cancelText: formatLayoutMessage({ id: 'sso_auth_failure_modal_cancel', defaultMessage: '取消' }),
     onOk: () => {
@@ -128,6 +222,9 @@ export const handleAuthFailureRedirect = (): void => {
       redirectLimitModalShown = false;
     },
   });
+
+  // 仅弹出 Modal 询问，未执行硬跳转
+  return false;
 };
 
 /**
@@ -180,12 +277,32 @@ export const ensureSsoSession = async (): Promise<void> => {
           throw new Error('SSO 认证失败');
         }
       } catch (error) {
-        console.error('SSO ticket exchange failed', error);
+        const err = error instanceof Error ? error : new Error(String(error));
+        const networkError = isNetworkError(err);
+        console.error('[SSO] ticket 交换失败', err.message, err.stack);
+        captureError(err, {
+          tags: {
+            scene: 'sso_ticket_exchange_failed',
+            is_network_error: String(networkError),
+          },
+          extra: {
+            ticketParam,
+            message: err.message,
+          },
+        });
         setFetchingToken(false);
 
-        rejectPendingRequests(
-          error instanceof Error ? error : new Error('SSO 认证失败'),
-        );
+        const propagatedErr = networkError
+          ? new SsoNetworkError(err.message, err)
+          : err;
+        rejectPendingRequests(propagatedErr);
+
+        // 仅在网络异常时向外抛出，让调用方据此切换 UI 文案；
+        // 其它失败（如 SSO 业务态失败）保持原有「静默」语义，由调用方
+        // 通过 token 是否就绪判断后续走向。
+        if (networkError) {
+          throw propagatedErr;
+        }
       } finally {
         removeParamFromUrl(ticketParam);
         ticketPromise = null;

package/generators/micro-react/templates/apps/layout/src/constants/index.ts

@@ -132,6 +132,28 @@ export const isAuthDisabled = (): boolean => {
   return window.__MICO_CONFIG__?.disableAuth === true;
 };
 
+/**
+ * 布局模式
+ * - 'side'：经典左侧完整目录树
+ * - 'mix'：一级目录显示在头部 Tab，对应子级目录显示在侧边栏
+ */
+export type TLayoutMode = 'side' | 'mix';
+
+/**
+ * 获取布局模式
+ * 读取 window.__MICO_CONFIG__.layoutMode，未配置时默认 'side'（兼容旧版）
+ */
+export const getLayoutMode = (): TLayoutMode => {
+  return window.__MICO_CONFIG__?.layoutMode === 'mix' ? 'mix' : 'side';
+};
+
+/**
+ * 判断是否为「头部一级 + 侧边二级」混合布局
+ */
+export const isMixLayout = (): boolean => {
+  return getLayoutMode() === 'mix';
+};
+
 /**
  * 主题相关常量
  */

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

@@ -0,0 +1,29 @@
+import type { ParsedMenuItem } from '@/common/menu';
+import { filterMenuItems, parseMenuItems } from '@/common/menu';
+import { getMenus } from '@/common/portal-data';
+import { isAuthDisabled } from '@/constants';
+import { useModel } from '@umijs/max';
+import { useMemo } from 'react';
+
+/**
+ * 权限过滤 + 解析后的菜单树
+ * 供侧边栏与头部一级导航共用，避免重复解析
+ */
+export const useFilteredMenuItems = (): ParsedMenuItem[] => {
+  const { initialState } = useModel('@@initialState');
+  const currentUser = initialState?.currentUser;
+
+  return useMemo(() => {
+    const menus = getMenus();
+    if (isAuthDisabled()) {
+      return parseMenuItems(menus);
+    }
+    const filteredMenus = filterMenuItems(menus, {
+      isSuperuser: currentUser?.is_superuser,
+      menuPerms: currentUser?.menu_perms || [],
+    });
+    return parseMenuItems(filteredMenus);
+  }, [currentUser?.is_superuser, currentUser?.menu_perms]);
+};
+
+export default useFilteredMenuItems;

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

@@ -40,6 +40,7 @@
 .layout-header-logo {
   display: flex;
   align-items: center;
+  // side 布局保持原行为：Logo 居左，右侧内容靠右
   margin-right: auto;
 
   .logo-text {
@@ -47,12 +48,84 @@
     font-weight: @font-weight-bold;
     color: @Brand1-6;
     letter-spacing: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+// mix 布局：Logo 列对齐侧边栏宽度，使一级导航起始 x 与内容区左边界对齐
+// 左侧 padding(@spacing-lg) + 此宽度 = 侧边栏右边界(@sidebar-width)
+.layout-header--mix .layout-header-logo {
+  width: calc(@sidebar-width - @spacing-lg);
+  margin-right: 0;
+  flex-shrink: 0;
+}
+
+// 头部一级目录导航（mix 布局）
+// 样式对齐 Figma 中台组件「水平 Tab」：14/22 PingFang SC，
+// 激活态品牌紫 + Medium + 底部下划线，未激活 text/2 + Regular
+.layout-header-nav {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  margin-left: @spacing-xl;
+
+  .layout-header-tabs.arco-tabs {
+    width: 100%;
+
+    // 隐藏整条底部分隔线，仅保留激活态下划线，避免与头部阴影叠加
+    .arco-tabs-header-nav::before {
+      display: none;
+    }
+
+    .arco-tabs-header-title {
+      // 字号 14 / 行高 22，标题为「胶囊」形态，hover 显示浅灰圆角底
+      margin: 0 8px;
+      padding: 5px 12px;
+      font-size: 14px;
+      line-height: 22px;
+      font-weight: 400;
+      color: @color-text-2;
+      border-radius: @border-radius-md;
+      transition: background-color @animation-duration-fast,
+        color @animation-duration-fast;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      // 未选中 hover：仅加浅灰底（fill/2），文字保持灰色不变紫
+      &:hover {
+        color: @color-text-2;
+        background-color: @color-fill-2;
+      }
+
+      // 选中态：品牌紫 + Medium
+      &-active {
+        color: @Brand1-6;
+        font-weight: 500;
+      }
+
+      // 选中 + hover：品牌紫文字 + 浅灰圆角底
+      &-active:hover {
+        color: @Brand1-6;
+        background-color: @color-fill-2;
+      }
+    }
+
+    // 激活下划线（ink bar）：品牌紫
+    .arco-tabs-header-ink {
+      background-color: @Brand1-6;
+    }
   }
 }
 
 .layout-header-right {
   display: flex;
   align-items: center;
+  margin-left: auto;
 }
 
 .layout-header-action {

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

@@ -1,14 +1,45 @@
+import { findFirstLeaf, getActiveTopKey } from '@/common/menu';
 import { AvatarDropdown, TenantDropdown } from '@/components/RightContent';
-import { DEFAULT_NAME } from '@/constants';
-import { Layout, Space } from '@mico-platform/ui';
-import React from 'react';
+import { DEFAULT_NAME, isMixLayout } from '@/constants';
+import { useFilteredMenuItems } from '@/hooks/useFilteredMenuItems';
+import { Layout, Space, Tabs } from '@mico-platform/ui';
+import { history, useLocation } from '@umijs/max';
+import React, { useMemo } from 'react';
 import './index.less';
 
 const Header = Layout.Header;
+const TabPane = Tabs.TabPane;
 
 const LayoutHeader: React.FC = () => {
+  const location = useLocation();
+  const menuItems = useFilteredMenuItems();
+  const mix = isMixLayout();
+
+  // 头部一级导航数据（仅 mix 布局使用顶层菜单项）
+  const topMenuItems = mix ? menuItems : [];
+
+  const activeTopKey = useMemo(() => {
+    if (!mix) return undefined;
+    return getActiveTopKey(topMenuItems, location.pathname);
+  }, [mix, topMenuItems, location.pathname]);
+
+  // 点击一级 Tab：跳转到该一级目录下第一个可跳转叶子
+  // - 外链（link）：新窗口打开，避免外部 URL 被推进路由
+  // - 内部页面（page）：路由跳转
+  const handleTopTabChange = (key: string) => {
+    const target = topMenuItems.find((item) => item.key === key);
+    if (!target) return;
+    const leaf = findFirstLeaf(target);
+    if (!leaf?.path) return;
+    if (leaf.type === 'link') {
+      window.open(leaf.path, '_blank');
+      return;
+    }
+    history.push(leaf.path);
+  };
+
   return (
-    <Header className="layout-header">
+    <Header className={`layout-header${mix ? ' layout-header--mix' : ''}`}>
       {/* Logo */}
       <div className="layout-header-logo">
         <span className="logo-text">
@@ -16,6 +47,22 @@ const LayoutHeader: React.FC = () => {
         </span>
       </div>
 
+      {/* 一级目录导航（mix 布局） */}
+      {mix && topMenuItems.length > 0 && (
+        <div className="layout-header-nav">
+          <Tabs
+            className="layout-header-tabs"
+            type="line"
+            activeTab={activeTopKey}
+            onChange={handleTopTabChange}
+          >
+            {topMenuItems.map((item) => (
+              <TabPane key={item.key} title={item.label} />
+            ))}
+          </Tabs>
+        </div>
+      )}
+
       {/* Right section */}
       <div className="layout-header-right">
         <Space size="medium">

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

@@ -1,13 +1,13 @@
 import type { ParsedMenuItem } from '@/common/menu';
-import { filterMenuItems, parseMenuItems } from '@/common/menu';
-import { getMenus } from '@/common/portal-data';
+import { getActiveTopKey } from '@/common/menu';
 import IconFont from '@/components/IconFont';
-import { isAuthDisabled } from '@/constants';
+import { isMixLayout } from '@/constants';
+import { useFilteredMenuItems } from '@/hooks/useFilteredMenuItems';
 import { useMenuState } from '@/hooks/useMenuState';
 import { useTheme } from '@/hooks/useTheme';
 import { Layout, Menu } from '@mico-platform/ui';
 import * as Icons from '@mico-platform/ui/icon';
-import { useModel } from '@umijs/max';
+import { useLocation } from '@umijs/max';
 import React, { useEffect, useMemo, useRef } from 'react';
 import './index.less';
 
@@ -115,23 +115,25 @@ interface LayoutMenuProps {
 const LayoutMenu: React.FC<LayoutMenuProps> = () => {
   const siderRef = useRef<HTMLDivElement>(null);
   const { isDark } = useTheme();
-  const { initialState } = useModel('@@initialState');
-  const currentUser = initialState?.currentUser;
+  const location = useLocation();
 
-  // Parse menu data
+  // 权限过滤 + 解析后的完整菜单树（与头部一级导航共用）
   // getMenuItemFilterOutcome 内部已对每个菜单项单独检查 isNoPermissionRoute，
   // 无需在此按当前页面路径全局跳过过滤，避免菜单可见性随页面变化
+  const allMenuItems = useFilteredMenuItems();
+
+  // mix 布局：侧边栏只渲染「当前激活一级目录」下的子树；side 布局：渲染完整树
   const menuItems = useMemo(() => {
-    const menus = getMenus();
-    if (isAuthDisabled()) {
-      return parseMenuItems(menus);
+    if (!isMixLayout()) {
+      return allMenuItems;
     }
-    const filteredMenus = filterMenuItems(menus, {
-      isSuperuser: currentUser?.is_superuser,
-      menuPerms: currentUser?.menu_perms || [],
-    });
-    return parseMenuItems(filteredMenus);
-  }, [currentUser?.is_superuser, currentUser?.menu_perms]);
+    const activeTopKey = getActiveTopKey(allMenuItems, location.pathname);
+    const activeTop = allMenuItems.find((item) => item.key === activeTopKey);
+    return activeTop?.children ?? [];
+  }, [allMenuItems, location.pathname]);
+
+  // mix 布局下，当前一级目录没有子目录时隐藏侧边栏
+  const hideSider = isMixLayout() && menuItems.length === 0;
 
   // 使用菜单状态 Hook
   const {
@@ -150,10 +152,10 @@ const LayoutMenu: React.FC<LayoutMenuProps> = () => {
     if (layoutContent) {
       (layoutContent as HTMLElement).style.setProperty(
         '--sider-width',
-        collapsed ? '48px' : '200px',
+        hideSider ? '0px' : collapsed ? '48px' : '200px',
       );
     }
-  }, [collapsed]);
+  }, [collapsed, hideSider]);
 
   useEffect(() => {
     const sider = siderRef.current;
@@ -166,6 +168,11 @@ const LayoutMenu: React.FC<LayoutMenuProps> = () => {
     };
   }, [handleMouseEnter, handleMouseLeave]);
 
+  // 一级目录无子目录：不渲染侧边栏（内容区占满，--sider-width 已置 0）
+  if (hideSider) {
+    return null;
+  }
+
   // 点击触发按钮图标
   const clickTriggerBtnIcon = collapsed
     ? 'webcs-outline_fold'

package/generators/micro-react/templates/apps/layout/src/locales/en-US.ts

@@ -48,6 +48,10 @@ export default {
   sso_auth_failure_modal_content: 'Auto login failed. Would you like to try logging in again?',
   sso_auth_failure_modal_ok: 'Re-login',
   sso_auth_failure_modal_cancel: 'Cancel',
+  sso_auth_failure_network_primary: 'Network error. Unable to complete auto login.',
+  sso_auth_failure_network_hint_title: 'Please check:',
+  sso_auth_failure_network_hint_ioa: '1. Whether IOA is connected',
+  sso_auth_failure_network_hint_network: '2. Whether your network can access the service',
 
   // AvatarDropdown
   'avatar.language': 'Language',

package/generators/micro-react/templates/apps/layout/src/locales/zh-CN.ts

@@ -45,6 +45,10 @@ export default {
   sso_auth_failure_modal_content: '自动登录失败，是否重新尝试登录？',
   sso_auth_failure_modal_ok: '重新登录',
   sso_auth_failure_modal_cancel: '取消',
+  sso_auth_failure_network_primary: '网络异常，无法完成自动登录',
+  sso_auth_failure_network_hint_title: '请检查以下情况：',
+  sso_auth_failure_network_hint_ioa: '1. IOA 是否已连接',
+  sso_auth_failure_network_hint_network: '2. 当前网络是否可正常访问',
 
   // AvatarDropdown
   'avatar.language': '语言',

package/generators/micro-react/templates/apps/layout/src/services/config/index.ts

@@ -16,6 +16,7 @@ const STATIC_TIMEZONE_LIST: ITimezone[] = [
   { region: 'DE', utc_offset: 1 },
   { region: 'FJ', utc_offset: 15 },
   { region: 'FR', utc_offset: 1 },
+  { region: 'GB', utc_offset: 0 },
   { region: 'Global', utc_offset: 8 },
   { region: 'ID', utc_offset: 7 },
   { region: 'IN', utc_offset: 5 },

package/generators/micro-react/templates/packages/common-intl/src/intl.ts

@@ -132,6 +132,26 @@ const intl = addIntl({
       key: 'sso_auth_failure_modal_cancel',
       defaultMessage: '取消',
     }),
+  sso_auth_failure_network_primary: () =>
+    i18n({
+      key: 'sso_auth_failure_network_primary',
+      defaultMessage: '网络异常，无法完成自动登录',
+    }),
+  sso_auth_failure_network_hint_title: () =>
+    i18n({
+      key: 'sso_auth_failure_network_hint_title',
+      defaultMessage: '请检查以下情况：',
+    }),
+  sso_auth_failure_network_hint_ioa: () =>
+    i18n({
+      key: 'sso_auth_failure_network_hint_ioa',
+      defaultMessage: '1. IOA 是否已连接',
+    }),
+  sso_auth_failure_network_hint_network: () =>
+    i18n({
+      key: 'sso_auth_failure_network_hint_network',
+      defaultMessage: '2. 当前网络是否可正常访问',
+    }),
 }, i18n);
 
 export default intl;

package/generators/subapp-h5/ignore-list.json

@@ -0,0 +1 @@
+["node_modules", "dist", ".umi", ".umi-production", ".turbo"]