generator-mico-cli 0.2.22 → 0.2.23

package/README.md

@@ -9,6 +9,7 @@
 | [docs/mico-cli.md](docs/mico-cli.md) | Mico CLI 功能概述与技术方案 |
 | [docs/micro-react-generator.md](docs/micro-react-generator.md) | Monorepo 项目生成器说明 |
 | [docs/subapp-react-generator.md](docs/subapp-react-generator.md) | React 子应用生成器说明 |
+| [docs/subapp-umd-generator.md](docs/subapp-umd-generator.md) | UMD 组件包生成器说明 |
 
 ## 要求
 
@@ -97,6 +98,7 @@ mico create micro-react
 - @mico-platform/ui、@mico-platform/theme
 - Turborepo + pnpm Workspace
 - Husky + Commitlint
+- @common-web/sentry 错误监控与 SourceMap 上传
 
 ## React 子应用生成器
 
@@ -108,6 +110,34 @@ cd <monorepo-root>
 mico create subapp-react
 ```
 
+## UMD 组件包生成器
+
+在 Monorepo 的 `packages/` 目录下创建 UMD 格式的组件包，使用 Webpack 构建。适用于通过 `<script>` 标签加载的场景（如主应用菜单挂载组件、第三方系统嵌入 Widget 等）。
+
+```bash
+cd <monorepo-root>
+mico create subapp-umd
+```
+
+生成器会提示输入：
+- **Package name** — 包名（如 `my-widget`）
+- **UMD global variable name** — 全局变量名（如 `MyWidget`）
+- **Package scope** — 包作用域（自动从根 `package.json` 检测）
+- **Dev server port** — 开发端口（默认 `9100`）
+
+生成的包支持：
+- `pnpm dev` — 启动 webpack-dev-server，同时提供 HTML 预览页和 UMD JS 文件
+- `pnpm build` — 构建生产环境 UMD 产物到 `dist/`
+
+开发模式下：
+
+| URL | 用途 |
+|---|---|
+| `http://localhost:<port>/` | HTML 预览页，独立调试 |
+| `http://localhost:<port>/<name>.umd.js` | UMD JS 文件，供主应用通过 `jsUrls` 联调 |
+
+DevTools Sources 面板中可在 `webpack://<name>/src/` 下定位原始 TypeScript 源码进行断点调试。
+
 ## 本地调试
 
 克隆项目后，执行以下步骤进行本地开发和调试：
@@ -133,6 +163,9 @@ mico create micro-react
 
 # 测试 subapp-react 生成器（需在已有 monorepo 中执行）
 mico create subapp-react
+
+# 测试 subapp-umd 生成器（需在已有 monorepo 中执行）
+mico create subapp-umd
 ```
 
 调试完成后，可以取消全局链接：

package/bin/mico.js

@@ -29,12 +29,14 @@ Options:
   --version, -v         Show version number
   --verbose             Show detailed output during generation
   --dry-run             Preview files without creating them
+  --force               Overwrite all existing files without confirmation
   --no-update-check     Skip update check
 
 Examples:
   mico create subapp-react
   mico create micro-react --verbose
   mico create micro-react --dry-run
+  mico create micro-react --force
   mico list
   mico update
   mico doctor
@@ -350,6 +352,7 @@ function performUpdate(latestVersion) {
  * @param {object} options - 选项
  * @param {boolean} options.verbose - 是否启用详细输出
  * @param {boolean} options.dryRun - 是否启用 dry-run 模式
+ * @param {boolean} options.force - 是否强制覆盖已有文件
  */
 function runGenerator(generator, rest, passthroughArgs, options = {}) {
   const localGeneratorEntry = path.join(
@@ -374,6 +377,10 @@ function runGenerator(generator, rest, passthroughArgs, options = {}) {
     yoArgs.push('--dry-run');
   }
 
+  if (options.force) {
+    yoArgs.push('--force');
+  }
+
   if (passthroughArgs.length > 0) {
     yoArgs.push('--', ...passthroughArgs);
   }
@@ -394,6 +401,9 @@ function runGenerator(generator, rest, passthroughArgs, options = {}) {
     if (options.dryRun) {
       console.log('  \x1b[2m[verbose] Dry-run mode enabled\x1b[0m');
     }
+    if (options.force) {
+      console.log('  \x1b[2m[verbose] Force mode enabled\x1b[0m');
+    }
     console.log('');
   }
 
@@ -432,6 +442,7 @@ async function main() {
   const skipUpdateCheck = mainArgs.includes('--no-update-check');
   const isVerbose = mainArgs.includes('--verbose');
   const isDryRun = mainArgs.includes('--dry-run');
+  const isForce = mainArgs.includes('--force');
 
   // 过滤掉标志参数
   const filteredArgs = mainArgs.filter(
@@ -442,7 +453,8 @@ async function main() {
       arg !== '-v' &&
       arg !== '--no-update-check' &&
       arg !== '--verbose' &&
-      arg !== '--dry-run'
+      arg !== '--dry-run' &&
+      arg !== '--force'
   );
 
   // 处理 --version
@@ -514,7 +526,8 @@ async function main() {
     // 运行生成器
     runGenerator(generator, rest.slice(1), passthroughArgs, {
       verbose: isVerbose,
-      dryRun: isDryRun
+      dryRun: isDryRun,
+      force: isForce
     });
     return;
   }

package/generators/micro-react/index.js

@@ -36,9 +36,9 @@ module.exports = class extends Generator {
       this.logger.verbose('Config:', JSON.stringify(rcConfig, null, 2));
     }
 
-    // 检查当前目录是否已是一个 monorepo
+    // 检查当前目录是否已是一个 monorepo（--force 跳过此检查）
     const workspaceFile = path.join(this.projectRoot, 'pnpm-workspace.yaml');
-    if (fs.existsSync(workspaceFile)) {
+    if (fs.existsSync(workspaceFile) && !this.options.force) {
       console.error('');
       console.error('❌ Error: Current directory is already a monorepo.');
       console.error('');
@@ -51,6 +51,9 @@ module.exports = class extends Generator {
       console.error('     mkdir my-project && cd my-project');
       console.error('     mico create micro-react');
       console.error('');
+      console.error('   To regenerate in an existing monorepo, use --force:');
+      console.error('     mico create micro-react --force');
+      console.error('');
       process.exit(1);
     }
   }
@@ -278,9 +281,31 @@ module.exports = class extends Generator {
 
     this.log('');
     this.log('📦 正在安装依赖...');
-    this.spawnCommandSync('pnpm', ['install'], {
-      cwd: this.destDir,
-    });
+    try {
+      this.spawnCommandSync('pnpm', ['install'], {
+        cwd: this.destDir,
+      });
+    } catch (e) {
+      this._installFailed = true;
+      this.log('');
+      this.log('⚠️  依赖安装失败，但项目文件已全部生成。');
+      this.logger.verbose('Install error:', e.message);
+      return;
+    }
+
+    // 依赖安装成功后，格式化生成的文件以消除风格差异
+    const layoutDir = path.join(this.destDir, 'apps/layout');
+    if (fs.existsSync(path.join(layoutDir, '.prettierrc'))) {
+      this.log('');
+      this.log('🎨 格式化生成的文件...');
+      try {
+        this.spawnCommandSync('pnpm', ['-C', 'apps/layout', 'format'], {
+          cwd: this.destDir,
+        });
+      } catch (e) {
+        this.logger.verbose('Formatting failed (non-critical):', e.message);
+      }
+    }
   }
 
   end() {
@@ -288,7 +313,20 @@ module.exports = class extends Generator {
     if (this._skipInstall) return;
 
     this.log('');
-    this.log('✅ 项目创建成功！');
+
+    if (this._installFailed) {
+      this.log('⚠️  项目文件已创建，但依赖安装未完成。');
+      this.log('');
+      this.log('   请手动安装依赖:');
+      this.log('');
+      this.log('   pnpm install');
+      this.log('');
+      this.log('   如果安装仍然失败，可尝试:');
+      this.log('   pnpm install --network-concurrency 4');
+    } else {
+      this.log('✅ 项目创建成功！');
+    }
+
     this.log('');
     this.log('   后续步骤:');
     this.log('');

package/generators/micro-react/meta.json

@@ -7,6 +7,7 @@
     "qiankun 微前端架构",
     "Arco Design + Tailwind CSS",
     "主题切换、国际化、认证模块",
-    "可配置 CDN 路径前缀（支持多业务线隔离）"
+    "可配置 CDN 路径前缀（支持多业务线隔离）",
+    "Sentry 错误监控与 SourceMap 上传"
   ]
 }

package/generators/micro-react/templates/_gitignore

@@ -56,4 +56,6 @@ build
 
 **/tasks/*
 
-.pnpm-store/**
+.pnpm-store/**
+
+.worktrees/**

package/generators/micro-react/templates/_npmrc

@@ -1,5 +1,6 @@
 registry=https://registry.npmjs.com/
 @mico-platform:registry=https://nexus-vywrajy.micoworld.net/repository/mico-base-common/
+@common-web:registry=https://nexus-vywrajy.micoworld.net/repository/mico-base-common/
 package-lock=false
 //nexus-vywrajy.micoworld.net/repository/mico-base-common/:_auth=bWljby1ucG06SDR4WUROazdad1NeczltblJMTw==
 

package/generators/micro-react/templates/apps/layout/config/config.prod.development.ts

@@ -3,6 +3,11 @@
 import { defineConfig } from '@umijs/max';
 
 const config: ReturnType<typeof defineConfig> = {
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    '@common-web/sentry': 'CommonWebSentry',
+  },
   define: {
     'process.env.NODE_ENV': 'development',
     'process.env.APP_ID': '<%= projectName %>',

package/generators/micro-react/templates/apps/layout/config/config.prod.testing.ts

@@ -3,6 +3,11 @@
 import { defineConfig } from '@umijs/max';
 
 const config: ReturnType<typeof defineConfig> = {
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    '@common-web/sentry': 'CommonWebSentry',
+  },
   define: {
     'process.env.NODE_ENV': 'testing',
     'process.env.APP_ID': '<%= projectName %>',

package/generators/micro-react/templates/apps/layout/config/config.prod.ts

@@ -1,6 +1,7 @@
 // https://umijs.org/config/
 
 import { defineConfig } from '@umijs/max';
+import { applySentryPlugin } from '../../../scripts/apply-sentry-plugin';
 const { CDN_PUBLIC_PATH } = process.env;
 
 const PUBLIC_PATH: string = CDN_PUBLIC_PATH
@@ -8,6 +9,11 @@ const PUBLIC_PATH: string = CDN_PUBLIC_PATH
   : '/layout/';
 
 const config: ReturnType<typeof defineConfig> = {
+  /**
+   * 启用 Source Map（用于 Sentry 错误追踪）
+   * hidden-source-map 会生成 .map 文件但不在 JS 中添加 sourcemap 注释
+   */
+  devtool: 'hidden-source-map',
   define: {
     'process.env.NODE_ENV': 'production',
     'process.env.APP_ID': '<%= projectName %>',
@@ -20,6 +26,11 @@ const config: ReturnType<typeof defineConfig> = {
     'process.env.EXTERNAL_LOGIN_PATH':
       'https://micous-idp.cig.tencentcs.com/sso/xxxxxxx/cas',
   },
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    '@common-web/sentry': 'CommonWebSentry',
+  },
   // 生产环境：将所有代码打包到一个文件
   extraBabelPlugins: ['babel-plugin-dynamic-import-node'],
 
@@ -29,6 +40,7 @@ const config: ReturnType<typeof defineConfig> = {
     memo.optimization.splitChunks(false);
     // 禁用 runtimeChunk
     memo.optimization.runtimeChunk(false);
+    applySentryPlugin({ memo, appName: 'layout' });
     return memo;
   },
   publicPath: PUBLIC_PATH,

package/generators/micro-react/templates/apps/layout/docs/feature-/345/276/256/345/211/215/347/253/257/346/250/241/345/274/217.md

@@ -334,7 +334,6 @@ 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/micro-react/templates/apps/layout/docs/feature-/350/217/234/345/215/225/346/235/203/351/231/220/346/216/247/345/210/266.md

@@ -64,12 +64,13 @@
 └──────────────────────────────────────────┘
     │
     ▼
-┌─────────────────────────────────┐
-│  3. 菜单渲染 (menu/index.tsx)    │
-│     isNoPermissionRoute(pathname)?
-│     ├── 是 → 显示全部菜单        │
-│     └── 否 → 按 side_menus 过滤  │
-└─────────────────────────────────┘
+┌──────────────────────────────────────────┐
+│  3. 菜单渲染 (menu/index.tsx)            │
+│     按 side_menus 过滤                   │
+│     每个菜单项独立检查 isNoPermissionRoute│
+│     ├── 匹配 → 该项始终显示              │
+│     └── 不匹配 → 按 sideMenus 白名单过滤 │
+└──────────────────────────────────────────┘
     │
     ▼
 ┌──────────────────────────────────────────────┐
@@ -99,7 +100,7 @@ page.accessControlEnabled === false？
     │
     ▼
 是否在 noPermissionRouteList 中？
-    ├── 是 → 允许访问，显示全部菜单
+    ├── 是 → 允许访问，菜单按各项独立判断
     │
     ▼
 是否是非动态路由（不在 PAGES 中）？
@@ -344,7 +345,7 @@ if (!isAuthReady) {
 | 403 处理 | 原地渲染组件 | 保持 URL 不变，用户体验更好，便于分享链接 |
 | 父级菜单显示 | 前缀匹配 | 子菜单有权限时，父级菜单需要作为容器显示 |
 | 超级用户 | 跳过所有检查 | 管理员需要完整访问权限 |
-| 免权限路由的菜单 | 显示全部 | 用户访问公开页面时应能看到所有导航选项 |
+| 免权限路由的菜单 | 按菜单项独立判断 | 每个菜单项根据自身路由是否匹配 noPermissionRouteList 独立决定显示，避免菜单随当前页面变化 |
 | 免认证路由的子应用 | 直接加载 | 不等待 currentUser，免认证路由本身不需要登录 |
 | 免权限路由的子应用 | 直接加载 | 不等待 currentUser，避免加载卡住 |
 | 静态路由不受权限控制 | 默认允许访问 | 见下方"静态路由与动态路由"说明 |

package/generators/micro-react/templates/apps/layout/mock/api.mock.ts

@@ -6,73 +6,93 @@
 
 export default {
   // 获取用户信息
-  // 'GET /api/user/info': {
+  'GET /api/user/info': {
+    "code": 200,
+    "data": {
+        "id": 381,
+        "last_login": "2026-03-06T02:37:10.050735Z",
+        "is_superuser": true,
+        "username": "本地测试mock用户",
+        "first_name": "",
+        "last_name": "",
+        "email": "本地测试mock用户@micous.com",
+        "is_staff": true,
+        "is_active": true,
+        "type": 1,
+        "phone": "",
+        "agency_id": 0,
+        "avatar": "https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png",
+        "user_name": "Easton",
+        "permission_tree": [
+        ],
+        "miss_permissions": [],
+        "side_menus": [
+          '首页',
+          '示例模块.示例页面',
+          '微应用示例.子应用页面',
+          '外部链接',
+          '权限管理',
+        ],
+        "region_permissions": []
+    },
+    "msg": "ok"
+},
+
+  // 获取统计数据
+  // 'GET /api/dashboard/stats': {
   //   success: true,
   //   data: {
-  //     id: 1001,
-  //     name: '张三',
-  //     email: 'zhangsan@example.com',
-  //     avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=homepage',
-  //     role: 'admin',
-  //     department: '技术部',
+  //     totalUsers: 12580,
+  //     activeUsers: 3420,
+  //     pendingTasks: 156,
+  //     completedTasks: 8934,
+  //     lastUpdated: new Date().toISOString(),
   //   },
   // },
 
-  // 获取统计数据
-  'GET /api/dashboard/stats': {
-    success: true,
-    data: {
-      totalUsers: 12580,
-      activeUsers: 3420,
-      pendingTasks: 156,
-      completedTasks: 8934,
-      lastUpdated: new Date().toISOString(),
-    },
-  },
-
   // 获取列表数据
-  'GET /api/items': {
-    success: true,
-    data: {
-      list: [
-        {
-          id: 1,
-          title: '待审核内容 A',
-          status: 'pending',
-          createdAt: '2025-12-27 10:00:00',
-        },
-        {
-          id: 2,
-          title: '待审核内容 B',
-          status: 'pending',
-          createdAt: '2025-12-27 09:30:00',
-        },
-        {
-          id: 3,
-          title: '已通过内容 C',
-          status: 'approved',
-          createdAt: '2025-12-26 15:00:00',
-        },
-        {
-          id: 4,
-          title: '已拒绝内容 D',
-          status: 'rejected',
-          createdAt: '2025-12-26 14:00:00',
-        },
-      ],
-      total: 4,
-      page: 1,
-      pageSize: 10,
-    },
-  },
+  // 'GET /api/items': {
+  //   success: true,
+  //   data: {
+  //     list: [
+  //       {
+  //         id: 1,
+  //         title: '待审核内容 A',
+  //         status: 'pending',
+  //         createdAt: '2025-12-27 10:00:00',
+  //       },
+  //       {
+  //         id: 2,
+  //         title: '待审核内容 B',
+  //         status: 'pending',
+  //         createdAt: '2025-12-27 09:30:00',
+  //       },
+  //       {
+  //         id: 3,
+  //         title: '已通过内容 C',
+  //         status: 'approved',
+  //         createdAt: '2025-12-26 15:00:00',
+  //       },
+  //       {
+  //         id: 4,
+  //         title: '已拒绝内容 D',
+  //         status: 'rejected',
+  //         createdAt: '2025-12-26 14:00:00',
+  //       },
+  //     ],
+  //     total: 4,
+  //     page: 1,
+  //     pageSize: 10,
+  //   },
+  // },
 
   // POST 请求示例
-  'POST /api/items/approve': (req: any, res: any) => {
-    const { id } = req.body || {};
-    res.json({
-      success: true,
-      message: `Item ${id} approved successfully`,
-      data: { id, status: 'approved' },
-    });
-  },
+  // 'POST /api/items/approve': (req: any, res: any) => {
+  //   const { id } = req.body || {};
+  //   res.json({
+  //     success: true,
+  //     message: `Item ${id} approved successfully`,
+  //     data: { id, status: 'approved' },
+  //   });
+  // },
 };

package/generators/micro-react/templates/apps/layout/mock/pages.ts

@@ -29,7 +29,7 @@ const mockPages: PublicPageItem[] = [
     nameKey: 'page.user.login',
     route: '/user/login',
     htmlUrl:
-      'https://cdn-portal.micoplatform.com/portal-center/common-web/0.0.2/login/index.html',
+      'https://cdn-portal.micoplatform.com/portal-center/common-web/0.0.4/login/index.html',
     jsUrls: [],
     cssUrls: [],
     prefixPath: '/user',
@@ -48,7 +48,7 @@ const mockPages: PublicPageItem[] = [
     nameKey: 'page.permission',
     route: '/permission',
     htmlUrl:
-      'https://cdn-portal.micoplatform.com/portal-center/common-web/0.0.1/permission/index.html',
+      'https://cdn-portal.micoplatform.com/portal-center/common-web/0.0.4/permission/index.html',
     jsUrls: [],
     cssUrls: [],
     prefixPath: '',
@@ -72,7 +72,7 @@ const mockPages: PublicPageItem[] = [
     prefixPath: '',
     routeMode: 'prefix',
     enabled: true,
-    accessControlEnabled: false,
+    accessControlEnabled: true,
     adminOnly: false,
     routeKey: null,
     mainDocumentId: 59,

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

@@ -32,6 +32,7 @@
     "spark-md5": "^3.0.2"
   },
   "devDependencies": {
+    "@common-web/sentry": "^0.0.3",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
     "@types/spark-md5": "^3.0.5",

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

@@ -1,11 +1,11 @@
 import { history, type RequestConfig } from '@umijs/max';
 import { addGlobalUncaughtErrorHandler } from 'qiankun';
+import { SentryErrorBoundary } from '@common-web/sentry';
 import { errorConfig } from './requestErrorConfig';
 // 将 @mico-platform/ui 暴露到 window，供子应用 externals 使用
 import * as micoUI from '@mico-platform/ui';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ReactDOMClient from 'react-dom/client';
 
 import { getStoredAuthToken } from './common/auth/auth-manager';
 import type { IUserInfo } from './common/auth/type';
@@ -88,7 +88,6 @@ if (typeof window !== 'undefined') {
   const win = window as unknown as Record<string, unknown>;
   win.React = React;
   win.ReactDOM = ReactDOM;
-  win.ReactDOMClient = ReactDOMClient;
   win.micoUI = micoUI;
 }
 
@@ -172,6 +171,10 @@ export const request: RequestConfig = {
   ...errorConfig,
 };
 
+export function rootContainer(container: React.ReactNode) {
+  return <SentryErrorBoundary>{container}</SentryErrorBoundary>;
+}
+
 /**
  * Umi 路由类型定义
  */

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

@@ -11,14 +11,10 @@
 }
 
 .micro-app-loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  min-height: 600px;
   background: var(--color-bg-1);
   z-index: 10;
 }

package/generators/micro-react/templates/apps/layout/src/components/RightContent/AvatarDropdown.tsx

@@ -1,4 +1,5 @@
 import { logout, STORAGE_KEYS } from '@/common/auth';
+import type { IUserInfo } from '@/common/auth/type';
 import {
 	getCurrentTimezone,
 	getTimezoneRegion,
@@ -39,13 +40,10 @@ interface IMenuItem {
 	children?: IMenuItem[];
 }
 
-const DEFAULT_AVATAR =
-	'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png';
-
 // TODO: 临时假数据，后续接入真实登录态
-const MOCK_USER = {
+const MOCK_USER: Partial<IUserInfo> = {
 	user_name: 'Test User',
-	avatar: DEFAULT_AVATAR,
+	username: 'test@micous.com',
 };
 
 export const AvatarName: React.FC<{ userName?: string }> = ({ userName }) => {
@@ -100,11 +98,11 @@ export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
 
 	// 管理头像 URL
 	const [avatarSrc, setAvatarSrc] = useState<string>(
-		currentUser?.avatar || DEFAULT_AVATAR,
+		currentUser?.avatar || '',
 	);
 
 	useEffect(() => {
-		setAvatarSrc(currentUser?.avatar || DEFAULT_AVATAR);
+		setAvatarSrc(currentUser?.avatar || '');
 	}, [currentUser?.avatar]);
 
 	// 加载时区列表
@@ -142,10 +140,6 @@ export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
 		};
 	}, []);
 
-	const handleAvatarError = () => {
-		setAvatarSrc(DEFAULT_AVATAR);
-	};
-
 	const loginOut = async () => {
 		logout();
 		const { search, pathname } = window.location;
@@ -370,11 +364,13 @@ export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
 			}
 		>
 			<div className="flex items-center avatar-dropdown-trigger">
-				<div className="flex items-center">
-					<Avatar size={24} shape="circle">
-						<img src={avatarSrc} alt="avatar" onError={handleAvatarError} />
-					</Avatar>
-				</div>
+				{avatarSrc && (
+					<div className="flex items-center">
+						<Avatar size={24} shape="circle">
+							<img src={avatarSrc} alt="avatar" />
+						</Avatar>
+					</div>
+				)}
 				<AvatarName userName={currentUser?.user_name} />
 				<IconFont
 					type="webcs-outline_down1"

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

@@ -135,11 +135,12 @@
 }
 
 // Sider styles
-.<%= projectName %>-sider {
+.layout-web-sider {
   box-shadow: none;
   background-color: @color-text-5 !important;
   position: fixed !important;
   height: calc(100vh - @header-height) !important;
+  z-index: 999;
 
   .arco-layout-sider-trigger {
     display: flex;