generator-mico-cli 0.2.32 → 0.2.34

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-react/index.js

@@ -9,7 +9,7 @@ const {
   collectFiles,
   transformDestPath,
   isTemplateFile,
-  getPackageVersionsParallel,
+  getMicoTemplateVersions,
   detectPackageScope,
   setupErrorHandlers,
   createLogger,
@@ -147,23 +147,14 @@ module.exports = class extends Generator {
 
       // 在 mico_cli 根目录执行 npm view，以使用该目录 .npmrc 中的 Nexus 认证
       const cliRoot = path.resolve(__dirname, '../..');
-      this.logger.verbose('Fetching latest package versions (parallel)...');
-
-      // 并行获取版本
-      const versions = await getPackageVersionsParallel(
-        [
-          { name: '@mico-platform/ui', fallback: '1.0.0' },
-          { name: '@mico-platform/theme', fallback: '1.0.0' },
-        ],
-        8000,
-        cliRoot,
-      );
+      this.logger.verbose('Fetching mico package versions from manifest...');
 
-      const micoUiVer = versions['@mico-platform/ui'];
-      const themeVer = versions['@mico-platform/theme'];
+      const micoVersions = await getMicoTemplateVersions(cliRoot, 8000);
+      const ui = micoVersions['@mico-platform/ui'];
+      const theme = micoVersions['@mico-platform/theme'];
 
-      this.logger.verbose('@mico-platform/ui version:', micoUiVer);
-      this.logger.verbose('@mico-platform/theme version:', themeVer);
+      this.logger.verbose('@mico-platform/ui range:', ui.range, 'resolved:', ui.resolved);
+      this.logger.verbose('@mico-platform/theme range:', theme.range, 'resolved:', theme.resolved);
 
       const templateData = {
         appName: this.appName,
@@ -172,9 +163,9 @@ module.exports = class extends Generator {
         appNameSnake: this.appName.replace(/-/g, '_'),
         packageScope: this.packageScope,
         devPort: this.devPort,
-        micoUiVersion: `^${micoUiVer}`,
-        themeVersion: `^${themeVer}`,
-        micoUiVersionExact: micoUiVer
+        micoUiVersion: `^${ui.resolved}`,
+        themeVersion: `^${theme.resolved}`,
+        micoUiVersionExact: ui.resolved,
       };
 
       this.logger.verbose('Template data:', JSON.stringify(templateData, null, 2));

package/generators/subapp-react/templates/homepage/src/common/logger.ts

@@ -23,7 +23,7 @@ function readVerboseDebugQueryOnce(): boolean {
   }
   try {
     const v = new URLSearchParams(window.location.search).get(DEBUG_LOGS_QUERY_KEY);
-    if (v == null || v === '') {
+    if (v === null || v === '') {
       return false;
     }
     const normalized = v.toLowerCase();

package/generators/subapp-umd/index.js

@@ -14,6 +14,7 @@ const {
   setupErrorHandlers,
   createLogger,
   loadMicorc,
+  getMicoTemplateVersions,
 } = require('../../lib/utils');
 
 const IGNORE_LIST = require('./ignore-list.json');
@@ -145,6 +146,10 @@ module.exports = class extends Generator {
       this.logger.verbose('Template directory:', this.templateDir);
       this.logger.verbose('Destination directory:', this.destDir);
 
+      const cliRoot = path.resolve(__dirname, '../..');
+      const micoVersions = await getMicoTemplateVersions(cliRoot, 8000);
+      const ui = micoVersions['@mico-platform/ui'];
+
       const templateData = {
         appName: this.appName,
         AppName: this.appNamePascal,
@@ -152,6 +157,7 @@ module.exports = class extends Generator {
         umdGlobalName: this.umdGlobalName,
         packageScope: this.packageScope,
         devPort: this.devPort,
+        micoUiPeerRange: `^${ui.resolved}`,
       };
 
       this.logger.verbose('Template data:', JSON.stringify(templateData, null, 2));

package/generators/subapp-umd/templates/package.json

@@ -15,7 +15,7 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@mico-platform/ui": ">=0.0.13"
+    "@mico-platform/ui": "<%= micoUiPeerRange %>"
   },
   "devDependencies": {
     "@types/react": "^18.3.26",