generator-mico-cli 0.1.18

package/generators/micro-react/templates/README.md

@@ -0,0 +1,84 @@
+# <%= projectName %>
+
+基于 qiankun 微前端架构的 Monorepo 项目。
+
+## 技术栈
+
+- **Monorepo**：Turborepo + pnpm Workspace
+- **前端框架**：UmiJS 4 / @umijs/max
+- **微前端**：qiankun
+- **UI 组件**：Arco Design
+- **样式方案**：Tailwind CSS + Less
+- **代码规范**：ESLint、Stylelint、lint-staged、Husky、Commitlint
+
+## 环境准备
+
+- Node.js ≥ 18
+- pnpm，建议执行 `corepack prepare pnpm@10.18.2 --activate`
+
+## 安装依赖
+
+```bash
+pnpm install
+```
+
+## 常用脚本
+
+| 命令 | 说明 |
+|------|------|
+| `pnpm dev` | 交互式选择并启动应用开发服务器 |
+| `pnpm build` | 构建所有应用（生产环境） |
+| `pnpm build:development` | 构建所有应用（开发环境） |
+| `pnpm build:testing` | 构建所有应用（测试环境） |
+| `pnpm build:production` | 构建所有应用（生产环境） |
+| `pnpm lint` | 运行 ESLint + Turborepo lint 校验 |
+| `pnpm lint:fix` | 自动修复 lint 问题 |
+
+## 新建子应用
+
+使用 Mico CLI 快速创建新的 React 子应用：
+
+```bash
+# 全局安装（一次性）
+pnpm add -g yo mico-cli
+
+# 在仓库根目录执行
+mico create subapp-react
+```
+
+## 仓库结构
+
+```
+.
+├── apps/                     # 业务应用目录
+│   └── layout/               # 主应用（qiankun master）
+├── packages/                 # 共享包目录
+│   └── shared-styles/        # 共享样式
+├── scripts/                  # 构建与开发脚本
+│   ├── dev.js                # 交互式启动脚本
+│   ├── collect-dist.js       # 构建产物收集
+│   └── create-umi-app.sh     # 创建新应用
+├── turbo.json                # Turborepo 任务管道
+├── pnpm-workspace.yaml       # Workspace 包含范围
+└── .editorconfig             # 编辑器统一约束
+```
+
+## 环境变量管理
+
+- 根目录 `.env` / `.env.local` / `.env.[mode][.local]` 通过 `dotenv-cli` 注入所有应用
+- 应用专属变量可在 `apps/<app>/.env.local` 中补充
+- 影响缓存的变量需在 `turbo.json` 的 `globalEnv` 中登记
+
+## 微前端架构
+
+项目采用 qiankun 微前端方案：
+
+- **主应用**：`apps/layout` 负责全局布局、路由管理、子应用加载
+- **子应用**：通过 `mico create subapp-react` 创建，自动注册到主应用
+
+## 代码规范与提交
+
+- **ESLint**：负责 JavaScript/TypeScript lint
+- **Stylelint**：配合 Umi 预设处理 Less/CSS，兼容 Tailwind 语法
+- **lint-staged**：提交前仅处理暂存区文件
+- **Husky**：`pre-commit`（lint-staged）+ `commit-msg`（commitlint）钩子

package/generators/micro-react/templates/_gitignore

@@ -0,0 +1,57 @@
+# Dependencies
+node_modules
+
+# Turborepo cache
+.turbo
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Build outputs
+dist
+.umi
+.umi-production
+
+# Editor directories
+.idea
+.vscode
+
+
+# misc
+.DS_Store
+npm-debug.log*
+yarn-error.log
+
+/coverage
+.idea
+yarn.lock
+package-lock.json
+*bak
+.vscode
+
+
+# visual studio code
+.history
+*.log
+functions/*
+.temp/**
+
+# umi
+.umi
+.umi-production
+.umi-test
+
+# screenshot
+screenshot
+.firebase
+
+build
+
+
+# OpenSpec 规范文档（仅供 AI agent 使用，不提交到 git）
+/openspec
+
+**/tasks/*

package/generators/micro-react/templates/_npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.com/
+

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

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

package/generators/micro-react/templates/apps/layout/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true, // 不继承根目录配置
+  extends: [require.resolve('@umijs/max/eslint')],
+  // 如需覆盖规则，可在此添加
+  rules: {
+    // 关闭 "变量在定义前使用" 的警告（函数声明/const 函数表达式会被提升引用）
+    '@typescript-eslint/no-use-before-define': 'off',
+    'no-use-before-define': 'off',
+  },
+};

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

@@ -0,0 +1,17 @@
+{
+  "*.{md,json}": [
+    "prettier --cache --write"
+  ],
+  "*.{js,jsx}": [
+    "max lint --fix --eslint-only",
+    "prettier --cache --write"
+  ],
+  "*.{css,less}": [
+    "max lint --fix --stylelint-only",
+    "prettier --cache --write"
+  ],
+  "*.ts?(x)": [
+    "max lint --fix --eslint-only",
+    "prettier --cache --parser=typescript --write"
+  ]
+}

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

@@ -0,0 +1,3 @@
+node_modules
+.umi
+.umi-production

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

@@ -0,0 +1,8 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "proseWrap": "never",
+  "overrides": [{ "files": ".prettierrc", "options": { "parser": "json" } }],
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-packagejson"]
+}

package/generators/micro-react/templates/apps/layout/.stylelintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  extends: require.resolve('@umijs/max/stylelint'),
+  rules: {
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+          'layer',
+        ],
+      },
+    ],
+    // 允许设计系统中使用 PascalCase 命名的 CSS 自定义属性（如 --Brand1-1, --Success-1）
+    'custom-property-pattern': null,
+  },
+};

package/generators/micro-react/templates/apps/layout/README.md

@@ -0,0 +1,37 @@
+# Layout 应用
+
+主应用（qiankun master），提供统一布局、菜单导航、主题切换和微前端容器功能。
+
+## 启动开发
+
+```bash
+pnpm -C apps/layout dev
+```
+
+## 目录结构
+
+```
+src/
+├── app.tsx              # Umi 运行时配置，patchClientRoutes 动态路由
+├── layouts/             # 主布局组件
+├── pages/               # 内部路由页面
+├── components/          # 公共组件（MicroAppLoader 等）
+├── common/              # 工具模块
+│   ├── auth/            # 认证管理
+│   ├── menu/            # 菜单解析（parser.ts, types.ts）
+│   └── request/         # 请求封装
+├── hooks/               # 自定义 Hooks（useTheme 等）
+├── styles/              # 主题变量与样式
+└── locales/             # 国际化文件
+```
+
+## 功能文档
+
+| 文档 | 说明 |
+| --- | --- |
+| [微前端模式](./docs/feature-微前端模式.md) | qiankun 架构、MicroAppLoader、子应用配置 |
+| [主题色切换](./docs/feature-主题色切换.md) | useTheme Hook、CSS 变量系统 |
+
+## 更多信息
+
+参见 [项目根目录 README](../../README.md)

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

@@ -0,0 +1,54 @@
+// https://umijs.org/config/
+
+import { defineConfig } from '@umijs/max';
+import fs from 'fs';
+import path from 'path';
+
+// 使用 fs 读取 JSON 避免成为配置依赖，修改 menus.json 不会触发服务器重启
+const mockMenus = JSON.parse(
+  fs.readFileSync(path.join(__dirname, '../mock/menus.json'), 'utf-8'),
+);
+
+const config: ReturnType<typeof defineConfig> = {
+  publicPath: '/',
+  /**
+   * @name 注入到 HTML head 的脚本
+   * @description 开发环境注入 mock 菜单数据
+   * @doc https://umijs.org/docs/api/config#headscripts
+   */
+  headScripts: [
+    {
+      content: `
+        window.__MICO_MENUS__ = ${JSON.stringify(mockMenus)};
+        window.__MICO_CONFIG__ = {
+          appName: 'Audit Center',
+          apiBaseUrl: '',
+        };
+      `,
+    },
+  ],
+
+  proxy: {
+    '/api/': {
+      // 要代理的地址
+      target: 'https://preview.pro.ant.design',
+      // 配置了这个可以从 http 代理到 https
+      // 依赖 origin 的功能可能需要这个，比如 cookie
+      changeOrigin: true,
+    },
+  },
+  define: {
+    'process.env.NODE_ENV': 'development',
+    'process.env.APP_ID': 'mibot_dev',
+    'process.env.API_BASE_URL': 'https://dashboard-api-test.micoplatform.com',
+    'process.env.PROXY_SUFFIX': '/',
+    'process.env.LOGIN_ENDPOINT':
+      '',
+    'process.env.REFRESH_ENDPOINT':
+      '',
+    'process.env.EXTERNAL_LOGIN_PATH':
+      '',
+  },
+};
+
+export default defineConfig(config);

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

@@ -0,0 +1,37 @@
+// 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(/\/?$/, '/')}layout/`
+  : '/layout/';
+
+const config: ReturnType<typeof defineConfig> = {
+  define: {
+    'process.env.NODE_ENV': 'production',
+    'process.env.APP_ID': 'mibot',
+    'process.env.API_BASE_URL': 'https://dashboard-api.micoplatform.com',
+    'process.env.PROXY_SUFFIX': '/',
+    'process.env.LOGIN_ENDPOINT':
+      '',
+    'process.env.REFRESH_ENDPOINT':
+      '',
+    'process.env.EXTERNAL_LOGIN_PATH':
+      '',
+  },
+  // 生产环境：将所有代码打包到一个文件
+  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,
+};
+
+export default defineConfig(config);

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

@@ -0,0 +1,27 @@
+// https://umijs.org/config/
+
+import { defineConfig } from '@umijs/max';
+
+const config: ReturnType<typeof defineConfig> = {
+  proxy: {
+    '/api/': {
+      target: 'https://proapi.azurewebsites.net',
+      changeOrigin: true,
+      pathRewrite: { '^': '' },
+    },
+  },
+  define: {
+    'process.env.NODE_ENV': 'testing',
+    'process.env.APP_ID': 'mibot',
+    'process.env.API_BASE_URL': 'https://dashboard-api-test.micoplatform.com',
+    'process.env.PROXY_SUFFIX': '/',
+    'process.env.LOGIN_ENDPOINT':
+      '',
+    'process.env.REFRESH_ENDPOINT':
+      '',
+    'process.env.EXTERNAL_LOGIN_PATH':
+      '',
+  },
+};
+
+export default defineConfig(config);

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

@@ -0,0 +1,132 @@
+// https://umijs.org/config/
+
+import { defineConfig } from '@umijs/max';
+import routes from './routes';
+
+/**
+ * @name 使用公共路径
+ * @description 部署时的路径，如果部署在非根目录下，需要配置这个变量
+ * @doc https://umijs.org/docs/api/config#publicpath
+ */
+const PUBLIC_PATH: string = '/';
+
+const config: ReturnType<typeof defineConfig> = {
+  /**
+   * @name 挂载元素 ID
+   * @description React 应用挂载的 DOM 元素 id
+   * @doc https://umijs.org/docs/api/config#mountelementid
+   */
+  mountElementId: '<%= projectName %>',
+
+  /**
+   * @name 开启 hash 模式
+   * @description 让 build 之后的产物包含 hash 后缀。通常用于增量发布和避免浏览器加载缓存。
+   * @doc https://umijs.org/docs/api/config#hash
+   */
+  hash: false,
+
+  publicPath: PUBLIC_PATH,
+
+  /**
+   * @name 路由配置
+   * @description 基础静态路由，动态路由通过 patchClientRoutes 在运行时添加
+   * @doc https://umijs.org/docs/guides/routes
+   */
+  routes,
+
+  /**
+   * @name Less 配置
+   * @description 全局导入 Arco Design 主题变量
+   */
+  lessLoader: {
+    modifyVars: {},
+  },
+
+  /**
+   * @name moment 的国际化配置
+   * @description 如果对国际化没有要求，打开之后能减少js的包大小
+   * @doc https://umijs.org/docs/api/config#ignoremomentlocale
+   */
+  ignoreMomentLocale: true,
+
+  /**
+   * @name 快速热更新配置
+   * @description 一个不错的热更新组件，更新时可以保留 state
+   */
+  fastRefresh: true,
+
+  //============== 以下都是max的插件配置 ===============
+
+  /**
+   * @name 网络请求配置
+   * @doc https://umijs.org/docs/max/request
+   */
+  request: {},
+
+  /**
+   * @name 数据流插件
+   * @doc https://umijs.org/docs/max/data-flow
+   */
+  model: {},
+
+  /**
+   * @name 全局初始状态
+   * @doc https://umijs.org/docs/max/data-flow#%E5%85%A8%E5%B1%80%E5%88%9D%E5%A7%8B%E7%8A%B6%E6%80%81
+   */
+  initialState: {},
+
+  /**
+   * @name layout 插件
+   * @description 禁用内置 layout，使用自定义 Arco Design 布局
+   * @doc https://umijs.org/docs/max/layout-menu
+   */
+  layout: false,
+
+  /**
+   * @name 国际化插件
+   * @doc https://umijs.org/docs/max/i18n
+   */
+  locale: {
+    default: 'zh-CN',
+    antd: false,
+    baseNavigator: true,
+  },
+
+  /**
+   * @name Mock 配置
+   * 注意：mock/menus.ts 是纯数据文件，不是 mock API，需要排除
+   */
+  mock: {
+    include: ['mock/**/_mock.ts', 'mock/**/*.mock.ts', 'src/pages/**/_mock.ts'],
+  },
+
+  /**
+   * @name 其他配置
+   */
+  esbuildMinifyIIFE: true,
+  exportStatic: {},
+
+  define: {
+    'process.env.NODE_ENV': process.env.NODE_ENV,
+  },
+
+  /**
+   * @name Tailwind CSS 配置
+   * @doc https://tailwindcss.com/docs/installation/using-postcss
+   */
+  tailwindcss: {},
+
+  /**
+   * @name qiankun 微前端配置
+   * @description 作为主应用，动态加载子应用
+   * @doc https://umijs.org/docs/max/micro-frontend
+   */
+  qiankun: {
+    master: {
+      // 子应用配置，可以在运行时通过 API 动态注册
+      apps: [],
+    },
+  },
+};
+
+export default defineConfig(config);

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

@@ -0,0 +1,13 @@
+/**
+ * @name 基础路由配置
+ * @description 这里只配置静态的基础路由，动态路由从 window.__MICO_MENUS__ 获取
+ * @doc https://umijs.org/docs/guides/routes
+ * @note Umi Max 会自动使用 src/layouts/index.tsx 作为全局布局，无需显式配置
+ */
+export default [
+  {
+    path: '/',
+    component: './Home',
+    name: '首页',
+  },
+];

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

@@ -0,0 +1,78 @@
+/**
+ * @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' },
+    });
+  },
+};