generator-mico-cli 0.1.0

package/README.md

@@ -0,0 +1,65 @@
+# Mico CLI Generator
+
+用于搭建基于 TypeScript 的 Node.js CLI 项目的 Yeoman 生成器。
+
+## 文档索引
+
+- `docs/subapp-react-generator.md` React 子应用生成器说明
+
+## 要求
+
+- Node >= 18
+- Yeoman CLI: `npm install -g yo`
+
+## 安装和使用
+
+```bash
+npm install -g yo generator-mico-cli
+```
+
+## 包装器 CLI
+
+全局安装后，`mico` 命令可用于委托给 Yeoman 生成器。
+如果 `generators/<name>` 下存在本地生成器，它将作为 `yo mico-cli:<name>` 运行。
+
+```bash
+mico create subapp-react
+```
+
+等同于：
+
+```bash
+yo subapp-react
+```
+
+将额外参数传递给生成器：
+
+```bash
+mico create mirco-react -- --help
+```
+
+## React 子应用生成器（audit-center）
+
+该生成器会复制 `apps/homepage` 为新的子应用，并替换标识字符串。
+`config/` 目录下的多环境配置会完整保留。
+
+```bash
+cd <monorepo-root>
+mico create subapp-react
+```
+
+## 同步子应用模板
+
+将 `audit-center/apps/homepage` 同步到生成器模板目录：
+
+```bash
+AUDIT_CENTER_ROOT=<audit-center-root> npm run sync:subapp-react-template
+```
+
+也可以直接传入路径：
+
+```bash
+npm run sync:subapp-react-template -- <audit-center-root>
+```
+
+忽略清单位于 `generators/subapp-react/ignore-list.json`。

package/bin/mico.js

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+'use strict';
+
+const { spawn } = require('node:child_process');
+const fs = require('node:fs');
+const path = require('node:path');
+
+function printHelp() {
+  console.log('Usage: mico create <generator> [args]');
+  console.log('       mico create <generator> -- [args]');
+  console.log('');
+  console.log('Examples:');
+  console.log('  mico create mirco-react');
+  console.log('  mico create mico-cli -- --help');
+  console.log('');
+  console.log('Notes:');
+  console.log('  Requires Yeoman CLI (yo) installed globally.');
+  console.log('  If a local generator exists at generators/<name>, it will be used.');
+}
+
+const args = process.argv.slice(2);
+const doubleDashIndex = args.indexOf('--');
+const passthroughArgs =
+  doubleDashIndex === -1 ? [] : args.slice(doubleDashIndex + 1);
+const mainArgs = doubleDashIndex === -1 ? args : args.slice(0, doubleDashIndex);
+const hasHelp = mainArgs.includes('--help') || mainArgs.includes('-h');
+
+if (mainArgs.length === 0 || hasHelp) {
+  printHelp();
+  process.exit(0);
+}
+
+const [command, generator, ...rest] = mainArgs;
+
+if (command !== 'create' || !generator) {
+  printHelp();
+  process.exit(1);
+}
+
+const rootDir = path.resolve(__dirname, '..');
+const localGeneratorEntry = path.join(
+  rootDir,
+  'generators',
+  generator,
+  'index.js'
+);
+
+let localNamespace = 'generator';
+try {
+  const pkg = JSON.parse(
+    fs.readFileSync(path.join(rootDir, 'package.json'), 'utf8')
+  );
+  const pkgName = typeof pkg.name === 'string' ? pkg.name : '';
+  localNamespace = pkgName.replace(/^generator-/, '') || pkgName || localNamespace;
+} catch {
+  // Fall back to a generic namespace
+}
+
+const yoGenerator = fs.existsSync(localGeneratorEntry)
+  ? `${localNamespace}:${generator}`
+  : generator;
+const yoArgs = [yoGenerator, ...rest];
+
+if (passthroughArgs.length > 0) {
+  yoArgs.push('--', ...passthroughArgs);
+}
+
+const child = spawn('yo', yoArgs, { stdio: 'inherit' });
+
+child.on('error', (error) => {
+  if (error && error.code === 'ENOENT') {
+    console.error('Cannot find "yo". Install it with: npm install -g yo');
+  } else {
+    console.error(error);
+  }
+  process.exit(1);
+});
+
+child.on('exit', (code) => {
+  process.exit(typeof code === 'number' ? code : 1);
+});

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

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

package/generators/subapp-react/index.js

@@ -0,0 +1,131 @@
+'use strict';
+
+const Generator = require('yeoman-generator');
+const fs = require('node:fs');
+const path = require('node:path');
+const { toKebab, toPascal } = require('../../lib/utils');
+
+const IGNORE_LIST = require('./ignore-list.json');
+
+/**
+ * 检查路径是否应该被忽略
+ */
+function shouldIgnorePath(sourceRoot, currentPath) {
+  const rel = path.relative(sourceRoot, currentPath);
+  if (!rel || rel.startsWith('..')) return false;
+  const parts = rel.split(path.sep);
+  return parts.some((part) => IGNORE_LIST.includes(part));
+}
+
+/**
+ * 递归遍历目录，收集所有文件的相对路径
+ */
+function collectFiles(dir, sourceRoot, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = path.join(dir, entry.name);
+    if (shouldIgnorePath(sourceRoot, fullPath)) continue;
+
+    if (entry.isDirectory()) {
+      collectFiles(fullPath, sourceRoot, files);
+    } else if (entry.isFile()) {
+      files.push(path.relative(sourceRoot, fullPath));
+    }
+  }
+  return files;
+}
+
+/**
+ * 需要使用 EJS 模板处理的文件扩展名
+ */
+const TEMPLATE_EXTENSIONS = new Set([
+  '.ts',
+  '.tsx',
+  '.js',
+  '.jsx',
+  '.json',
+  '.less',
+  '.md'
+]);
+
+module.exports = class extends Generator {
+  async prompting() {
+    this.answers = await this.prompt([
+      {
+        type: 'input',
+        name: 'appName',
+        message: 'Sub app name',
+        default: 'subapp',
+        filter: (input) => toKebab(input),
+        validate: (input) => {
+          const value = toKebab(input);
+          if (!value) return 'App name is required';
+          return true;
+        }
+      }
+    ]);
+
+    this.monorepoRoot = this.destinationRoot();
+    this.appName = toKebab(this.answers.appName);
+    this.appNamePascal = toPascal(this.appName);
+    this.templateDir = this.templatePath('homepage');
+    this.destDir = path.join(this.monorepoRoot, 'apps', this.appName);
+  }
+
+  writing() {
+    const appsDir = path.join(this.monorepoRoot, 'apps');
+    const workspaceFile = path.join(this.monorepoRoot, 'pnpm-workspace.yaml');
+
+    // 检查是否在 monorepo 中
+    if (!fs.existsSync(appsDir)) {
+      this.env.error(
+        `apps directory not found in ${this.monorepoRoot}. Run this generator from the monorepo root.`
+      );
+      return;
+    }
+
+    // 警告：检查是否是 pnpm workspace
+    if (!fs.existsSync(workspaceFile)) {
+      this.log.warning(
+        'pnpm-workspace.yaml not found. Make sure you are in the correct monorepo.'
+      );
+    }
+
+    if (fs.existsSync(this.destDir)) {
+      this.env.error(`Target already exists: ${this.destDir}`);
+      return;
+    }
+
+    // 模板数据
+    const templateData = {
+      appName: this.appName,
+      AppName: this.appNamePascal
+    };
+
+    // 收集所有文件
+    const files = collectFiles(this.templateDir, this.templateDir);
+
+    for (const relPath of files) {
+      const srcPath = path.join(this.templateDir, relPath);
+      const destPath = path.join(this.destDir, relPath);
+      const ext = path.extname(relPath);
+
+      if (TEMPLATE_EXTENSIONS.has(ext)) {
+        // 使用 EJS 模板处理
+        this.fs.copyTpl(srcPath, destPath, templateData);
+      } else {
+        // 直接复制（图片等二进制文件）
+        this.fs.copy(srcPath, destPath);
+      }
+    }
+  }
+
+  end() {
+    this.log('');
+    this.log('✅ 子应用创建成功！');
+    this.log('');
+    this.log(`   cd apps/${this.appName}`);
+    this.log('   pnpm install');
+    this.log('   pnpm dev');
+    this.log('');
+  }
+};

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

@@ -0,0 +1,4 @@
+# Default: 5
+CHECK_TIMEOUT=10
+DID_YOU_KNOW=none
+PORT=8010

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

@@ -0,0 +1,50 @@
+// https://umijs.org/config/
+
+import { defineConfig } from '@umijs/max';
+
+/**
+ * 开发环境配置
+ * - 不配置 externals，直接打包依赖，方便独立运行调试
+ * - 生产环境通过 config.prod.ts 配置 externals 复用主应用依赖
+ */
+const config: ReturnType<typeof defineConfig> = {
+  publicPath: '/',
+  base: '/',
+
+  define: {
+    'process.env.NODE_ENV': 'development',
+  },
+  // /**
+  //  * @name 脚本加载配置
+  //  * @description 开发环境独立运行时，通过 CDN 加载公共依赖
+  //  * 作为微前端子应用运行时，这些库由主应用提供
+  //  */
+  // headScripts: [
+  //   'https://unpkg.com/react@18/umd/react.development.js',
+  //   'https://unpkg.com/react-dom@18/umd/react-dom.development.js',
+  //   'https://unpkg.com/@arco-design/web-react@latest/dist/arco.min.js',
+  // ],
+
+  // /**
+  //  * @name 样式加载配置
+  //  * @description 开发环境独立运行时加载 Arco Design CSS
+  //  */
+  // links: [
+  //   {
+  //     rel: 'stylesheet',
+  //     href: 'https://unpkg.com/@arco-design/web-react@latest/dist/css/arco.min.css',
+  //   },
+  // ],
+
+  // /**
+  //  * @name 外部依赖配置
+  //  * @description 开发环境也需要 externals，配合 CDN 使用
+  //  */
+  // externals: {
+  //   react: 'window.React',
+  //   'react-dom': 'window.ReactDOM',
+  //   '@arco-design/web-react': 'window.arco',
+  // },
+};
+
+export default defineConfig(config);

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

@@ -0,0 +1,41 @@
+// https://umijs.org/config/
+
+import { defineConfig } from '@umijs/max';
+const { CDN_PUBLIC_PATH } = process.env;
+
+const PUBLIC_PATH: string = CDN_PUBLIC_PATH
+? `${CDN_PUBLIC_PATH.replace(/\/?$/, '/') }homepage/`
+: '/homepage/';
+
+const config: ReturnType<typeof defineConfig> = {
+  // 生产环境：将所有代码打包到一个文件
+  extraBabelPlugins: ['babel-plugin-dynamic-import-node'],
+
+  // 禁用代码分割，只输出一个 JS 和一个 CSS
+  chainWebpack(memo) {
+    // 禁用 splitChunks
+    memo.optimization.splitChunks(false);
+    // 禁用 runtimeChunk
+    memo.optimization.runtimeChunk(false);
+    return memo;
+  },
+  publicPath: PUBLIC_PATH,
+
+
+  /**
+   * @name 外部依赖配置
+   * @description 将大型公共库排除打包，运行时从主应用获取
+   * @doc https://umijs.org/docs/api/config#externals
+   *
+   * 作为 qiankun 子应用时，这些库由主应用提供：
+   * - react / react-dom: 主应用已加载，避免多实例问题
+   * - @arco-design/web-react: 主应用已加载，复用组件和样式
+   */
+  externals: {
+    react: 'window.React',
+    'react-dom': 'window.ReactDOM',
+    '@arco-design/web-react': 'window.arco',
+  },
+};
+
+export default defineConfig(config);

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

@@ -0,0 +1,8 @@
+// https://umijs.org/config/
+
+import { defineConfig } from '@umijs/max';
+
+const config: ReturnType<typeof defineConfig> = {
+};
+
+export default defineConfig(config);

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

@@ -0,0 +1,102 @@
+// https://umijs.org/config/
+
+import { defineConfig } from '@umijs/max';
+import routes from './routes';
+
+/**
+ * @name 使用公共路径
+ * @description 部署时的路径
+ */
+const PUBLIC_PATH = '/dist/<%= appName %>/';
+
+const config: ReturnType<typeof defineConfig> = {
+  /**
+   * @name 挂载元素 ID
+   * @description React 应用挂载的 DOM 元素 id
+   */
+  mountElementId: '<%= appName %>-root',
+
+  /**
+   * @name 基础路径
+   * @description 子应用的路由前缀
+   */
+  base: '/',
+
+  /**
+   * @name 开启 hash 模式
+   * @description 让 build 之后的产物包含 hash 后缀
+   */
+  hash: false,
+
+  publicPath: PUBLIC_PATH,
+
+  /**
+   * @name 路由配置
+   */
+  routes,
+
+  /**
+   * @name moment 的国际化配置
+   */
+  ignoreMomentLocale: true,
+
+  /**
+   * @name 快速热更新配置
+   */
+  fastRefresh: true,
+
+  //============== 以下都是 max 的插件配置 ===============
+
+  /**
+   * @name 网络请求配置
+   * @doc https://umijs.org/docs/max/request
+   */
+  request: {},
+
+  /**
+   * @name 数据流插件
+   * @doc https://umijs.org/docs/max/data-flow
+   */
+  model: {},
+
+  /**
+   * @name 全局初始状态
+   */
+  initialState: {},
+
+  /**
+   * @name layout 插件
+   * @description 禁用内置 layout，子应用使用自定义布局
+   */
+  layout: false,
+
+  /**
+   * @name 其他配置
+   */
+  esbuildMinifyIIFE: true,
+
+  define: {
+    'process.env.NODE_ENV': process.env.NODE_ENV,
+  },
+
+  /**
+   * @name qiankun 微前端配置
+   * @description 作为子应用
+   * @doc https://umijs.org/docs/max/micro-frontend
+   */
+  qiankun: {
+    slave: {},
+  },
+
+  /**
+   * @name 代码拆分配置
+   * @description 确保动态 import 的模块打包为独立 chunk
+   * @doc https://umijs.org/docs/api/config#codeSplitting
+   */
+  codeSplitting: {
+    jsStrategy: 'granularChunks',
+  },
+};
+
+export default defineConfig(config);
+

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

@@ -0,0 +1,7 @@
+/**
+ * @name 路由配置
+ * @description homepage 子应用的路由配置
+ */
+export default [
+  { path: '/<%= appName %>', component: '@/pages/index' },
+];

package/generators/subapp-react/templates/homepage/mock/api.mock.ts

@@ -0,0 +1,59 @@
+/**
+ * @name Mock API
+ * @description homepage 子应用的 Mock 数据
+ * @doc https://umijs.org/docs/guides/mock
+ */
+
+export default {
+  // 获取用户信息
+  'GET /api/user/info': {
+    success: true,
+    data: {
+      id: 1001,
+      name: '张三',
+      email: 'zhangsan@example.com',
+      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=homepage',
+      role: 'admin',
+      department: '技术部',
+    },
+  },
+
+  // 获取统计数据
+  '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,
+    },
+  },
+
+  // 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' },
+    });
+  },
+};
+

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

@@ -0,0 +1,30 @@
+{
+  "name": "<%= appName %>",
+  "version": "0.0.1",
+  "private": true,
+  "author": "Easton <easton@micous.com>",
+  "scripts": {
+    "dev": "max dev",
+    "build": "npm run build:production",
+    "build:development": "cross-env UMI_ENV=dev max build",
+    "build:production": "cross-env UMI_ENV=prod max build",
+    "build:testing": "cross-env UMI_ENV=testing max build",
+    "postinstall": "max setup",
+    "setup": "max setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "@audit-center/shared-styles": "workspace:*",
+    "@umijs/max": "^4.4.8",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "cross-env": "^10.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@arco-design/web-react": "^2.66.6",
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^5.0.3"
+  }
+}

package/generators/subapp-react/templates/homepage/src/app.tsx

@@ -0,0 +1,80 @@
+/**
+ * @name 应用入口配置
+ * @description homepage 子应用的运行时配置
+ * @doc https://umijs.org/docs/max/micro-frontend#子应用配置
+ *
+ * 注意：app.tsx 只能导出 Umi 规定的 API（qiankun、getInitialState 等）
+ * 自定义函数请放在 @/common/mainApp.ts 中
+ */
+
+import { appLogger } from './common/logger';
+import { type IMicroAppProps, setMainAppProps } from './common/mainApp';
+
+/**
+ * @name 独立运行时加载主题
+ * @description 仅在开发环境且非 qiankun 环境中加载主题样式
+ *
+ * 实现原理：
+ * - 生产构建时 process.env.NODE_ENV !== 'development'，整个 if 块被 tree-shake
+ * - 开发环境独立运行时加载主题，支持本地预览
+ * - 作为微应用运行时（无论开发还是生产），使用主应用的主题
+ */
+if (process.env.NODE_ENV === 'development') {
+  // 开发环境：运行时检测是否独立运行
+  if (typeof window !== 'undefined' && !window.__POWERED_BY_QIANKUN__) {
+    // 直接导入主题样式（开发环境下会被打包）
+    import('./styles/theme.less');
+    appLogger.log('Running standalone in dev mode, theme loaded');
+  }
+}
+// 生产环境：作为微应用时，主题由主应用注入，无需加载
+
+/**
+ * @name qiankun 生命周期钩子
+ * @description 子应用生命周期配置，用于与主应用通信
+ */
+export const qiankun = {
+  /**
+   * 在应用 bootstrap 时调用
+   */
+  async bootstrap(props: IMicroAppProps) {
+    appLogger.log('bootstrap', props);
+  },
+
+  /**
+   * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
+   */
+  async mount(props: IMicroAppProps) {
+    appLogger.log('mount', props);
+    // 保存主应用传递的 props，包括 request 实例
+    setMainAppProps(props);
+  },
+
+  /**
+   * 应用每次切出/卸载会调用的方法，通常在这里我们会卸载微应用的应用实例
+   */
+  async unmount(props: IMicroAppProps) {
+    appLogger.log('unmount', props);
+    // 清理引用
+    setMainAppProps(null);
+  },
+
+  /**
+   * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
+   */
+  async update(props: IMicroAppProps) {
+    appLogger.log('update', props);
+    // 更新 props
+    setMainAppProps(props);
+  },
+};
+
+/**
+ * @name 全局初始状态
+ * @description 可以从主应用获取共享的状态
+ */
+export async function getInitialState() {
+  return {
+    name: '<%= appName %>',
+  };
+}