generator-mico-cli 0.2.20 → 0.2.22

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

@@ -1,14 +1,26 @@
 
 // 再导入 @mico-platform/theme 主题变量（CSS Variables + Less Variables）
 // 这样项目的变量定义会在 UI 库之后，可以正确覆盖
-@import '@mico-platform/theme';
+@import '@mico-platform/theme/variables';
 
 * {
   box-sizing: border-box;
 }
 
+// 禁用 Mac 触摸板双指左右滑动触发的浏览器前进/后退手势
+html {
+  overscroll-behavior-x: none;
+  height: 100%;
+}
+
+body {
+  overscroll-behavior-x: none;
+  height: 100%;
+  background-color: @color-fill-1;
+}
+
 #root {
-  height: 100vh;
-  min-height: 800px;
+  min-height: max(100%, 800px);
+  // 这里是为了让子容器撑满高度，正常的height: 100%并不能撑满
   display: flex;
 }

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

@@ -1,5 +1,6 @@
 import type { MenuItem, ParsedMenuItem, ParsedRoute } from '@/common/menu';
-import { extractRoutes, getWindowMenus, parseMenuItems } from '@/common/menu';
+import { extractRoutes, parseMenuItems } from '@/common/menu';
+import { getMenus } from '@/common/portal-data';
 import { useMemo } from 'react';
 
 /**
@@ -8,7 +9,7 @@ import { useMemo } from 'react';
 export const useMenu = () => {
   // 获取原始菜单数据
   const rawMenus = useMemo<MenuItem[]>(() => {
-    return getWindowMenus();
+    return getMenus();
   }, []);
 
   // 解析后的菜单项（用于渲染菜单组件）

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

@@ -9,8 +9,10 @@
   }
 }
 
-.layout-menu {
+.layout-menu.arco-menu-dark,
+.layout-menu.arco-menu {
   font-size: @font-size-base;
+  background-color: @color-text-5;
 
   // Base menu item styles
   .arco-menu-item {
@@ -48,7 +50,7 @@
   }
 
   .arco-menu-indent {
-    width: 32px;
+    width: 12px;
   }
 
   .layout-menu-level-3 {
@@ -135,8 +137,9 @@
 // Sider styles
 .<%= projectName %>-sider {
   box-shadow: none;
+  background-color: @color-text-5 !important;
   position: fixed !important;
-  height: calc(100vh - 56px) !important;
+  height: calc(100vh - @header-height) !important;
 
   .arco-layout-sider-trigger {
     display: flex;
@@ -148,6 +151,10 @@
   .click-trigger-btn {
     cursor: pointer;
     display: flex;
+    width: 24px;
+    height: 24px;
+    align-items: center;
+    justify-content: center;
 
     // 图标颜色适配主题
     .arco-icon {
@@ -163,4 +170,24 @@
   .click-trigger-btn.collapsed {
     justify-content: center;
   }
+
+  .arco-menu-collapse .arco-menu-item .arco-icon,
+  .arco-menu-collapse .arco-menu-pop-header .arco-icon {
+    margin-left: 0;
+  }
+
+  .arco-menu .arco-menu-item,
+  .arco-menu .arco-menu-group-title,
+  .arco-menu .arco-menu-pop-header,
+  .arco-menu .arco-menu-inline-header .arco-menu-dark .arco-menu-item,
+  .arco-menu-dark .arco-menu-group-title,
+  .arco-menu-dark .arco-menu-pop-header,
+  .arco-menu-dark .arco-menu-inline-header {
+    background-color: @color-text-5;
+    color: @color-text-2;
+
+    &.arco-menu-selected {
+      color: @Brand1-6;
+    }
+  }
 }

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

@@ -1,7 +1,8 @@
 import type { ParsedMenuItem } from '@/common/menu';
-import { filterMenuItems, getWindowMenus, parseMenuItems } from '@/common/menu';
-import { isAuthDisabled, isNoPermissionRoute } from '@/constants';
+import { filterMenuItems, parseMenuItems } from '@/common/menu';
+import { getMenus } from '@/common/portal-data';
 import IconFont from '@/components/IconFont';
+import { isAuthDisabled, isNoPermissionRoute } from '@/constants';
 import { useMenuState } from '@/hooks/useMenuState';
 import { useTheme } from '@/hooks/useTheme';
 import { Layout, Menu } from '@mico-platform/ui';
@@ -30,6 +31,16 @@ const ICON_ALIAS_MAP: Record<string, keyof typeof Icons> = {
 const getIconComponent = (iconName: string): React.ReactNode => {
   if (!iconName) return null;
 
+  // 从中台配置的 icon 是有 Icon 前缀的。类似 IconMenu 这种
+  const directIconKey = iconName as keyof typeof Icons;
+  const DirectIconComponent = Icons[directIconKey] as
+    | React.ComponentType
+    | undefined;
+
+  if (DirectIconComponent) {
+    return <DirectIconComponent />;
+  }
+
   // 尝试直接匹配 Icon${name} 格式
   const iconKey = `Icon${iconName}` as keyof typeof Icons;
   const IconComponent = Icons[iconKey] as React.ComponentType | undefined;
@@ -112,7 +123,7 @@ const LayoutMenu: React.FC<LayoutMenuProps> = () => {
   // Parse menu data
   // disableAuth 或免权限校验路由时不过滤，显示全部菜单
   const menuItems = useMemo(() => {
-    const menus = getWindowMenus();
+    const menus = getMenus();
     if (isAuthDisabled() || isNoPermissionRoute(location.pathname)) {
       return parseMenuItems(menus);
     }
@@ -166,7 +177,7 @@ const LayoutMenu: React.FC<LayoutMenuProps> = () => {
       onCollapse={handleCollapsed}
       collapsible
       breakpoint="xl"
-      className="<%= projectName %>-sider"
+      className="common-web-sider"
       trigger={clickTriggerBtn}
       theme={isDark ? 'dark' : 'light'}
     >

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

@@ -2,9 +2,12 @@ import { layoutLogger } from '@/common/logger';
 import {
   extractRoutes,
   filterMenuItems,
+  findPageByPath,
   findRouteByPath,
-  getWindowMenus,
+  getDynamicRoutes,
+  isSuperuserUser,
 } from '@/common/menu';
+import { getMenus, getPages, hasPages } from '@/common/portal-data';
 import { getAppNameFromEntry } from '@/common/micro';
 import AppTabs from '@/components/AppTabs';
 import MicroAppLoader from '@/components/MicroAppLoader';
@@ -46,57 +49,89 @@ const BasicLayout: React.FC = () => {
     [currentUser?.is_superuser, currentUser?.side_menus],
   );
 
-  // 所有路由（不过滤权限，用于判断路径是否存在）
-  const allRoutes = useMemo(() => {
-    const menus = getWindowMenus();
-    return extractRoutes(menus);
+  // 所有页面路由（优先 PAGES，降级 MENUS）— 用于路由匹配和渲染
+  const allPageRoutes = useMemo(() => {
+    return getDynamicRoutes();
   }, []);
 
-  // 有权限的路由（disableAuth 时不过滤，显示全部）
-  const allowedRoutes = useMemo(() => {
+  // 菜单路由（从 MENUS）— 用于权限交叉引用
+  const allMenuRoutes = useMemo(() => {
+    return extractRoutes(getMenus());
+  }, []);
+
+  const allowedMenuRoutes = useMemo(() => {
     if (isAuthDisabled()) {
-      return allRoutes;
+      return allMenuRoutes;
     }
-    const menus = getWindowMenus();
-    const filteredMenus = filterMenuItems(menus, filterOptions);
+    const filteredMenus = filterMenuItems(getMenus(), filterOptions);
     return extractRoutes(filteredMenus);
-  }, [filterOptions, allRoutes]);
+  }, [filterOptions, allMenuRoutes]);
 
-  // 查找当前路由配置（优先从有权限的路由中查找）
+  // 当前路由配置（从所有页面路由中查找）
   const currentRoute = useMemo(() => {
-    return findRouteByPath(allowedRoutes, location.pathname);
-  }, [allowedRoutes, location.pathname]);
+    return findRouteByPath(allPageRoutes, location.pathname);
+  }, [allPageRoutes, location.pathname]);
 
-  // 判断是否是动态路由但无权限（disableAuth 时始终返回 false）
+  // 权限判断：菜单交叉引用 + 隐藏页面级兜底
   const isForbidden = useMemo(() => {
-    // 关闭权限控制时，不校验权限
     if (isAuthDisabled()) return false;
-    // 免权限校验路由，不检查菜单权限
     if (isNoPermissionRoute(location.pathname)) return false;
-    // 如果在有权限的路由中找到了，说明有权限
-    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,
-    });
+    // 非动态路由，交给 Umi 处理（404 等）
+    if (!currentRoute) return false;
+    if (isSuperuserUser(currentUser?.is_superuser)) return false;
+
+    // Tier 1: 菜单权限交叉引用
+    const inAllMenu = findRouteByPath(allMenuRoutes, location.pathname);
+    if (inAllMenu) {
+      const inAllowed = findRouteByPath(allowedMenuRoutes, location.pathname);
+      const forbidden = !inAllowed;
+
+      layoutLogger.log('isForbidden (menu check):', {
+        pathname: location.pathname,
+        inAllMenu: true,
+        inAllowed: !!inAllowed,
+        forbidden,
+      });
+
+      return forbidden;
+    }
+
+    // Tier 2: 隐藏页面级权限（仅在 PAGES 数据可用时生效）
+    if (!hasPages()) return false;
+
+    const page = findPageByPath(getPages(), location.pathname);
+    if (!page) return false;
+
+    if (page.adminOnly) {
+      layoutLogger.log('isForbidden (hidden page adminOnly):', {
+        pathname: location.pathname,
+        pageId: page.id,
+      });
+      return true;
+    }
+
+    if (page.accessControlEnabled) {
+      const sideMenus = (currentUser?.side_menus || []) as string[];
+      const forbidden = !page.routeKey || !sideMenus.includes(page.routeKey);
+
+      layoutLogger.log('isForbidden (hidden page accessControl):', {
+        pathname: location.pathname,
+        pageId: page.id,
+        routeKey: page.routeKey,
+        hasSideMenuMatch: !forbidden,
+      });
+
+      return forbidden;
+    }
 
-    return forbidden;
+    return false;
   }, [
     currentRoute,
-    allRoutes,
-    allowedRoutes,
+    allMenuRoutes,
+    allowedMenuRoutes,
     location.pathname,
-    filterOptions,
+    currentUser?.is_superuser,
+    currentUser?.side_menus,
   ]);
 
   // 判断是否需要显示布局
@@ -195,7 +230,9 @@ const BasicLayout: React.FC = () => {
             <AppTabs />
             <Content className="layout-content-outlet">
               <Suspense
-                fallback={<Spin dot style={{ width: '100%', marginTop: 100 }} />}
+                fallback={
+                  <Spin dot style={{ width: '100%', marginTop: 100 }} />
+                }
               >
                 {renderContent()}
               </Suspense>

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

@@ -1,9 +1,5 @@
-import {
-  extractRoutes,
-  filterMenuItems,
-  getWindowMenus,
-  type MenuFilterOptions,
-} from '@/common/menu';
+import { extractRoutes, filterMenuItems, type MenuFilterOptions } from '@/common/menu';
+import { getMenus } from '@/common/portal-data';
 import { isAuthDisabled } from '@/constants';
 import { Button, Result, Space } from '@mico-platform/ui';
 import { history, useModel } from '@umijs/max';
@@ -13,7 +9,7 @@ import React, { useMemo } from 'react';
  * 获取第一个可访问的路由路径
  */
 const getFirstAvailablePath = (filterOptions: MenuFilterOptions): string => {
-  const menus = getWindowMenus();
+  const menus = getMenus();
 
   // 根据权限过滤菜单
   const filteredMenus = isAuthDisabled()

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

@@ -10,8 +10,8 @@ const USER_INFO_API = '/api/user/info';
  * - en: 2 (英文)
  */
 const LOCALE_TO_LANG: Partial<Record<SupportedLocale, number>> = {
-  zh_CN: 1,
-  en: 2,
+  'zh-CN': 1,
+  'en-US': 2,
 };
 
 /**

package/generators/micro-react/templates/dev.preset.json

@@ -10,5 +10,5 @@
       "apps": ["layout"]
     }
   },
-  "default": "minimal"
+  "default": "full"
 }

package/generators/micro-react/templates/package.json

@@ -26,7 +26,8 @@
     "lint-staged": "pnpm exec lint-staged --quiet",
     "prepare": "husky",
     "test": "dotenv -e .env -e .env.local -- turbo run test",
-    "create:umi-app": "./scripts/create-umi-app.sh"
+    "create:umi-app": "./scripts/create-umi-app.sh",
+    "upgrade:mico": "npx @mico-platform/mico-up"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",