generator-mico-cli 0.2.21 → 0.2.22

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

@@ -118,12 +118,26 @@ module.exports = class extends Generator {
             if (!input.startsWith('@')) return 'Package scope must start with @';
             return true;
           }
+        },
+        {
+          type: 'input',
+          name: 'devPort',
+          message: 'Dev server port',
+          default: rc.devPort || '8010',
+          validate: (input) => {
+            const port = Number(input);
+            if (!Number.isInteger(port) || port < 1024 || port > 65535) {
+              return 'Port must be an integer between 1024 and 65535';
+            }
+            return true;
+          }
         }
       ]);
 
       this.appName = toKebab(this.answers.appName);
       this.appNamePascal = toPascal(this.appName);
       this.packageScope = this.answers.packageScope;
+      this.devPort = this.answers.devPort;
       this.templateDir = this.templatePath('homepage');
       this.destDir = path.join(this.monorepoRoot, 'apps', this.appName);
     } catch (error) {
@@ -172,6 +186,7 @@ module.exports = class extends Generator {
         appName: this.appName,
         AppName: this.appNamePascal,
         packageScope: this.packageScope,
+        devPort: this.devPort,
         micoUiVersion: `^${micoUiVer}`,
         themeVersion: `^${themeVer}`,
         micoUiVersionExact: micoUiVer
@@ -206,7 +221,7 @@ module.exports = class extends Generator {
 
         for (const relPath of files) {
           const destRelPath = transformDestPath(relPath);
-          const isTemplate = isTemplateFile(relPath);
+          const isTemplate = isTemplateFile(relPath) || path.basename(relPath) === '.env';
           const tag = isTemplate ? '\x1b[32m[tpl]\x1b[0m' : '\x1b[36m[cpy]\x1b[0m';
           this.log(`   ${tag} apps/${this.appName}/${destRelPath}`);
 
@@ -243,7 +258,8 @@ module.exports = class extends Generator {
         const destRelPath = transformDestPath(relPath);
         const destPath = path.join(this.destDir, destRelPath);
 
-        if (isTemplateFile(relPath)) {
+        const isEnvFile = path.basename(relPath) === '.env';
+        if (isTemplateFile(relPath) || isEnvFile) {
           this.logger.file('template', destRelPath);
           this.fs.copyTpl(srcPath, destPath, templateData);
           templateCount++;
@@ -255,6 +271,10 @@ module.exports = class extends Generator {
       }
 
       this.logger.verbose(`Processed: ${templateCount} templates, ${copyCount} copied`);
+
+      this._updateDevPreset();
+      this._updateMockPages();
+      this._updateConfigDev();
     } catch (error) {
       console.error('');
       console.error('❌ Error during file generation:');
@@ -264,6 +284,144 @@ module.exports = class extends Generator {
     }
   }
 
+  _updateDevPreset() {
+    const presetPath = path.join(this.monorepoRoot, 'dev.preset.json');
+    if (!fs.existsSync(presetPath)) {
+      this.logger.verbose('dev.preset.json not found, skipping preset update');
+      return;
+    }
+
+    try {
+      const preset = JSON.parse(fs.readFileSync(presetPath, 'utf-8'));
+      const fullApps = preset.presets?.full?.apps;
+
+      if (!Array.isArray(fullApps)) {
+        this.logger.verbose('dev.preset.json has no full.apps array, skipping');
+        return;
+      }
+
+      if (fullApps.includes(this.appName)) {
+        this.logger.verbose(`"${this.appName}" already in full preset, skipping`);
+        return;
+      }
+
+      fullApps.push(this.appName);
+      fs.writeFileSync(presetPath, `${JSON.stringify(preset, null, 2)}\n`, 'utf-8');
+
+      this.log(`   📝 已将 "${this.appName}" 添加到 dev.preset.json 的 full 预设中`);
+    } catch (e) {
+      console.warn(`   ⚠️  更新 dev.preset.json 失败: ${e.message}`);
+    }
+  }
+
+  _updateMockPages() {
+    const pagesPath = path.join(this.monorepoRoot, 'apps/layout/mock/pages.ts');
+    if (!fs.existsSync(pagesPath)) {
+      this.logger.verbose('apps/layout/mock/pages.ts not found, skipping');
+      return;
+    }
+
+    try {
+      const content = fs.readFileSync(pagesPath, 'utf-8');
+
+      if (content.includes(`route: '/${this.appName}'`)) {
+        this.logger.verbose(`Route "/${this.appName}" already in mock pages, skipping`);
+        return;
+      }
+
+      // 找出已有的最大 id
+      const idMatches = [...content.matchAll(/id:\s*(\d+)/g)];
+      const maxId = idMatches.reduce((max, m) => Math.max(max, Number(m[1])), 0);
+
+      const newEntry = [
+        '  {',
+        `    id: ${maxId + 1},`,
+        `    name: '${this.appNamePascal}',`,
+        `    nameEn: '${this.appNamePascal}',`,
+        `    nameKey: 'page.${this.appName}',`,
+        `    route: '/${this.appName}',`,
+        `    htmlUrl: '//localhost:${this.devPort}',`,
+        '    jsUrls: [],',
+        '    cssUrls: [],',
+        "    prefixPath: '',",
+        "    routeMode: 'prefix',",
+        '    enabled: true,',
+        '    accessControlEnabled: false,',
+        '    adminOnly: false,',
+        '    routeKey: null,',
+        `    mainDocumentId: ${Math.floor(Math.random() * 900) + 100},`,
+        "    version: '',",
+        '  },',
+      ].join('\n');
+
+      // 插入到兜底路由 (route: '/*') 之前
+      const lines = content.split('\n');
+      let insertIdx = -1;
+
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].includes("route: '/*'")) {
+          for (let j = i - 1; j >= 0; j--) {
+            if (lines[j].trim() === '{') {
+              insertIdx = j;
+              break;
+            }
+          }
+          break;
+        }
+      }
+
+      if (insertIdx === -1) {
+        const closingIdx = lines.findIndex((l) => l.trim() === '];');
+        if (closingIdx > 0) insertIdx = closingIdx;
+      }
+
+      if (insertIdx > 0) {
+        lines.splice(insertIdx, 0, newEntry);
+        fs.writeFileSync(pagesPath, lines.join('\n'), 'utf-8');
+        this.log(`   📝 已将 "${this.appName}" 的页面配置添加到 mock/pages.ts`);
+      }
+    } catch (e) {
+      console.warn(`   ⚠️  更新 mock/pages.ts 失败: ${e.message}`);
+    }
+  }
+
+  _updateConfigDev() {
+    const configPath = path.join(this.monorepoRoot, 'apps/layout/config/config.dev.ts');
+    if (!fs.existsSync(configPath)) {
+      this.logger.verbose('apps/layout/config/config.dev.ts not found, skipping');
+      return;
+    }
+
+    try {
+      const content = fs.readFileSync(configPath, 'utf-8');
+      const routeEntry = `'/${this.appName}/*'`;
+
+      if (content.includes(routeEntry)) {
+        this.logger.verbose(`Route "${routeEntry}" already in noPermissionRouteList, skipping`);
+        return;
+      }
+
+      const updated = content.replace(
+        /noPermissionRouteList:\s*\[([^\]]*)\]/,
+        (match, inner) => {
+          const trimmed = inner.trim();
+          const entries = trimmed ? `${trimmed}, ${routeEntry}` : routeEntry;
+          return `noPermissionRouteList: [${entries}]`;
+        },
+      );
+
+      if (updated === content) {
+        this.logger.verbose('noPermissionRouteList not found in config.dev.ts, skipping');
+        return;
+      }
+
+      fs.writeFileSync(configPath, updated, 'utf-8');
+      this.log(`   📝 已将 "${routeEntry}" 添加到 config.dev.ts 的 noPermissionRouteList 中`);
+    } catch (e) {
+      console.warn(`   ⚠️  更新 config.dev.ts 失败: ${e.message}`);
+    }
+  }
+
   install() {
     // 跳过 dry-run 模式
     if (this._skipInstall) return;

package/generators/subapp-react/templates/homepage/.env

@@ -1,4 +1,5 @@
 # Default: 5
 CHECK_TIMEOUT=10
 DID_YOU_KNOW=none
-PORT=8010
+PORT=<%= devPort %>
+SOCKET_SERVER=http://localhost:<%= devPort %>

package/generators/subapp-react/templates/homepage/config/config.dev.ts

@@ -50,6 +50,7 @@ const config: ReturnType<typeof defineConfig> = {
   // externals: {
   //   react: 'window.React',
   //   'react-dom': 'window.ReactDOM',
+  //   'react-dom/client': 'window.ReactDOMClient',
   //   '@mico-platform/ui': 'window.micoUI',
   // },
   /**

package/generators/subapp-react/templates/homepage/config/config.prod.development.ts

@@ -21,12 +21,13 @@ const config: ReturnType<typeof defineConfig> = {
    * @doc https://umijs.org/docs/api/config#externals
    *
    * 作为 qiankun 子应用时，这些库由主应用提供：
-   * - react / react-dom: 主应用已加载，避免多实例问题
+   * - react / react-dom / react-dom/client: 主应用已加载，避免多实例问题
    * - @mico-platform/ui: 主应用已加载，复用组件和样式
    */
   externals: {
     react: 'React',
     'react-dom': 'ReactDOM',
+    'react-dom/client': 'ReactDOMClient',
     '@mico-platform/ui': 'micoUI',
   },
 };

package/generators/subapp-react/templates/homepage/config/config.prod.testing.ts

@@ -21,12 +21,13 @@ const config: ReturnType<typeof defineConfig> = {
    * @doc https://umijs.org/docs/api/config#externals
    *
    * 作为 qiankun 子应用时，这些库由主应用提供：
-   * - react / react-dom: 主应用已加载，避免多实例问题
+   * - react / react-dom / react-dom/client: 主应用已加载，避免多实例问题
    * - @mico-platform/ui: 主应用已加载，复用组件和样式
    */
   externals: {
     react: 'React',
     'react-dom': 'ReactDOM',
+    'react-dom/client': 'ReactDOMClient',
     '@mico-platform/ui': 'micoUI',
   },
 };

package/generators/subapp-react/templates/homepage/config/config.prod.ts

@@ -27,12 +27,13 @@ const config: ReturnType<typeof defineConfig> = {
    * @doc https://umijs.org/docs/api/config#externals
    *
    * 作为 qiankun 子应用时，这些库由主应用提供：
-   * - react / react-dom: 主应用已加载，避免多实例问题
+   * - react / react-dom / react-dom/client: 主应用已加载，避免多实例问题
    * - @mico-platform/ui: 主应用已加载，复用组件和样式
    */
   externals: {
     react: 'React',
     'react-dom': 'ReactDOM',
+    'react-dom/client': 'ReactDOMClient',
     '@mico-platform/ui': 'micoUI',
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-mico-cli",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "description": "Yeoman generator for Mico CLI projects",
   "keywords": ["yeoman-generator", "generator", "cli"],
   "license": "MIT",