generator-mico-cli 0.1.18

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": {
+    "<%= packageScope %>/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 %>',
+  };
+}

package/generators/subapp-react/templates/homepage/src/common/logger.ts

@@ -0,0 +1,42 @@
+/**
+ * 日志工具
+ * 仅在开发环境下输出日志，生产环境自动静默
+ *
+ * 使用 bind 保持原始调用位置，避免错误栈指向 logger 内部
+ */
+
+const isDev = process.env.NODE_ENV === 'development';
+
+// 空操作函数（生产环境使用）
+const noop = (): void => {};
+
+/**
+ * 创建带前缀的日志函数
+ * 使用 bind 绑定前缀，保持控制台显示正确的调用位置
+ */
+const createLogger = (prefix: string) => {
+  if (!isDev) {
+    // 生产环境返回空操作
+    return {
+      log: noop,
+      info: noop,
+      warn: noop,
+      error: noop,
+    };
+  }
+
+  const formattedPrefix = `[${prefix}]`;
+
+  return {
+    log: console.log.bind(console, formattedPrefix),
+    info: console.info.bind(console, formattedPrefix),
+    warn: console.warn.bind(console, formattedPrefix),
+    error: console.error.bind(console, formattedPrefix),
+  };
+};
+
+// 预定义的日志实例
+export const appLogger = createLogger('<%= appName %>');
+
+// 导出创建器供自定义使用
+export { createLogger };

package/generators/subapp-react/templates/homepage/src/common/mainApp.ts

@@ -0,0 +1,53 @@
+/**
+ * @name 主应用共享依赖管理
+ * @description 存储和获取主应用传递的 props
+ */
+
+/**
+ * 主应用传递的 props 类型定义
+ */
+export interface IMicroAppProps {
+  /** 主应用标识 */
+  mainApp: string;
+  /** 主应用共享的 request 实例 */
+  request: <T = any>(url: string, options?: any) => Promise<T>;
+}
+
+/** 存储主应用传递的 props */
+let mainAppProps: IMicroAppProps | null = null;
+
+/**
+ * 设置主应用 props（由 qiankun 生命周期调用）
+ * @internal
+ */
+export const setMainAppProps = (props: IMicroAppProps | null) => {
+  mainAppProps = props;
+};
+
+/**
+ * 获取主应用共享的 request 实例
+ * 子应用内部使用此方法获取 request，确保复用主应用的认证和拦截器
+ *
+ * @example
+ * ```tsx
+ * import { getMainAppRequest } from '@/common/mainApp';
+ *
+ * const request = getMainAppRequest();
+ * if (request) {
+ *   const data = await request('/api/xxx');
+ * }
+ * ```
+ */
+export const getMainAppRequest = () => mainAppProps?.request;
+
+/**
+ * 判断是否作为微前端子应用运行
+ */
+export const isRunningInQiankun = () => !!mainAppProps;
+
+/**
+ * 获取主应用标识
+ */
+export const getMainAppName = () => mainAppProps?.mainApp;
+
+

package/generators/subapp-react/templates/homepage/src/common/request.ts

@@ -0,0 +1,49 @@
+/**
+ * @name 统一请求封装
+ * @description 优先使用主应用的 request，独立运行时使用 umi request
+ */
+
+import { getMainAppRequest } from '@/common/mainApp';
+import { request as umiRequest } from '@umijs/max';
+
+/**
+ * 统一请求方法
+ * - 作为微前端子应用时：使用主应用传递的 request（共享认证和拦截器）
+ * - 独立运行时：使用 umi 内置的 request
+ *
+ * @example
+ * ```tsx
+ * import { request } from '@/common/request';
+ *
+ * const data = await request('/api/user/info');
+ * ```
+ */
+export async function request<T = any>(
+  url: string,
+  options?: any,
+): Promise<T> {
+  const mainAppRequest = getMainAppRequest();
+
+  if (mainAppRequest) {
+    // 微前端模式：使用主应用的 request
+    console.log('[homepage] Using main app request:', url);
+    return mainAppRequest<T>(url, options);
+  }
+
+  // 独立运行模式：使用 umi request
+  console.log('[homepage] Using umi request:', url);
+  // umi request 默认返回 data，skipErrorHandler 可选
+  return umiRequest<T>(url, {
+    skipErrorHandler: true,
+    ...options,
+  }) as Promise<T>;
+}
+
+/**
+ * 判断当前使用的是哪个 request
+ */
+export function getRequestSource(): 'main-app' | 'umi' {
+  return getMainAppRequest() ? 'main-app' : 'umi';
+}
+
+

package/generators/subapp-react/templates/homepage/src/global.less

@@ -0,0 +1,26 @@
+/**
+ * @name 全局样式
+ * @description homepage 子应用的全局样式
+ */
+
+// 仅导入 Less 变量（不包含 CSS 变量定义，避免重复打包）
+// CSS 变量由主应用（layout）注入到 body 上
+// Less 变量通过 var(--xxx) 引用 CSS 变量，自动适配主题
+@import '<%= packageScope %>/shared-styles/variables-only';
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    'Noto Sans', sans-serif;
+}
+
+#homepage-root {
+  width: 100%;
+  height: 100%;
+}

package/generators/subapp-react/templates/homepage/src/pages/index.less

@@ -0,0 +1,139 @@
+/**
+ * @name 首页样式
+ * @description 使用主题色变量的示例
+ */
+
+// 导入共享样式变量
+@import '<%= packageScope %>/shared-styles/variables-only';
+
+.homepage {
+  padding: @spacing-lg;
+  min-height: 100vh;
+  // 使用主题色变量 - 背景色会随主题切换自动变化
+  background-color: @color-fill-1;
+  transition: background-color 0.3s ease;
+
+  &-title {
+    font-size: @font-size-xxl;
+    font-weight: @font-weight-bold;
+    // 主要文字色 - 亮色模式为深色，暗色模式为浅色
+    color: @color-text-1;
+    margin-bottom: @spacing-md;
+  }
+
+  &-subtitle {
+    font-size: @font-size-md;
+    // 次要文字色
+    color: @color-text-2;
+    margin-bottom: @spacing-lg;
+  }
+
+  &-card {
+    padding: @card-padding;
+    // 卡片背景色 - 使用 color-text-5（亮色模式为白色）
+    background-color: @color-text-5;
+    border-radius: @border-radius-card;
+    // 边框色
+    border: 1px solid @color-border-2;
+    box-shadow: @shadow-card;
+    margin-bottom: @spacing-md;
+  }
+
+  &-colors {
+    display: flex;
+    flex-wrap: wrap;
+    gap: @spacing-md;
+    margin-top: @spacing-lg;
+  }
+
+  &-color-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: @spacing-xs;
+  }
+
+  &-color-box {
+    width: 60px;
+    height: 60px;
+    border-radius: @border-radius-md;
+    border: 1px solid @color-border-2;
+  }
+
+  &-color-label {
+    font-size: @font-size-sm;
+    color: @color-text-3;
+  }
+
+  // 品牌色示例
+  .brand-1 { background-color: @Brand1-6; }
+  .brand-2 { background-color: @Brand2-6; }
+
+  // 功能色示例
+  .success { background-color: @Success-6; }
+  .warning { background-color: @Warning-6; }
+  .danger { background-color: @Danger-6; }
+
+  // 中性色示例
+  .fill-1 { background-color: @color-fill-1; }
+  .fill-2 { background-color: @color-fill-2; }
+  .fill-3 { background-color: @color-fill-3; }
+
+  // 按钮示例
+  &-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: @spacing-sm @spacing-md;
+    font-size: @font-size-base;
+    border-radius: @border-radius-button;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &--primary {
+      background-color: @Brand1-6;
+      color: @color-text-5;
+      border: none;
+
+      &:hover {
+        background-color: @Brand1-5;
+      }
+    }
+
+    &--secondary {
+      background-color: transparent;
+      color: @Brand1-6;
+      border: 1px solid @Brand1-6;
+
+      &:hover {
+        background-color: @Brand1-1;
+      }
+    }
+  }
+
+  // 提示信息示例
+  &-tip {
+    padding: @spacing-md;
+    border-radius: @border-radius-md;
+    margin-top: @spacing-lg;
+
+    &--info {
+      background-color: @Brand2-1;
+      border: 1px solid @Brand2-3;
+      color: @Brand2-7;
+    }
+
+    &--success {
+      background-color: @Success-1;
+      border: 1px solid @Success-3;
+      color: @Success-7;
+    }
+
+    &--warning {
+      background-color: @Warning-1;
+      border: 1px solid @Warning-3;
+      color: @Warning-7;
+    }
+  }
+}
+