generator-mico-cli 0.1.0

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 '@audit-center/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 '@audit-center/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;
+    }
+  }
+}
+

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

@@ -0,0 +1,342 @@
+import { getRequestSource, request } from '@/common/request';
+import {
+  Alert,
+  Button,
+  Card,
+  Descriptions,
+  Divider,
+  Message,
+  Space,
+  Spin,
+  Switch,
+  Table,
+  Tag,
+  Typography,
+} from '@arco-design/web-react';
+import { IconMoon, IconRefresh, IconSun } from '@arco-design/web-react/icon';
+import { useState } from 'react';
+import './index.less';
+
+const { Title, Paragraph, Text } = Typography;
+
+// 定义响应类型
+interface IUserInfo {
+  id: number;
+  name: string;
+  email: string;
+  avatar: string;
+  role: string;
+  department: string;
+}
+
+interface IStatsData {
+  totalUsers: number;
+  activeUsers: number;
+  pendingTasks: number;
+  completedTasks: number;
+  lastUpdated: string;
+}
+
+interface IListItem {
+  id: number;
+  title: string;
+  status: 'pending' | 'approved' | 'rejected';
+  createdAt: string;
+}
+
+/**
+ * 主题色变量 & Arco Design 组件使用示例
+ *
+ * 子应用使用主题色变量和 Arco Design 的方式：
+ * 1. 在 config.ts 中配置 externals，将 react/react-dom/@arco-design/web-react 排除打包
+ * 2. 运行时从主应用的 window.React / window.arco 获取
+ * 3. 在 global.less 中导入 @import '@audit-center/shared-styles/variables-only';
+ * 4. Less 变量自动适配主应用的主题切换
+ */
+export default function HomePage() {
+  const [loading, setLoading] = useState(false);
+  const [userInfo, setUserInfo] = useState<IUserInfo | null>(null);
+  const [stats, setStats] = useState<IStatsData | null>(null);
+  const [listData, setListData] = useState<IListItem[]>([]);
+
+  // 获取用户信息
+  const fetchUserInfo = async () => {
+    setLoading(true);
+    try {
+      const res = await request<{ success: boolean; data: IUserInfo }>('/api/user/info');
+      if (res.success) {
+        setUserInfo(res.data);
+        Message.success('获取用户信息成功');
+      }
+    } catch (err) {
+      Message.error('获取用户信息失败');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 获取统计数据
+  const fetchStats = async () => {
+    setLoading(true);
+    try {
+      const res = await request<{ success: boolean; data: IStatsData }>('/api/dashboard/stats');
+      if (res.success) {
+        setStats(res.data);
+        Message.success('获取统计数据成功');
+      }
+    } catch (err) {
+      Message.error('获取统计数据失败');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 获取列表数据
+  const fetchList = async () => {
+    setLoading(true);
+    try {
+      const res = await request<{ success: boolean; data: { list: IListItem[] } }>('/api/items');
+      if (res.success) {
+        setListData(res.data.list);
+        Message.success('获取列表数据成功');
+      }
+    } catch (err) {
+      Message.error('获取列表数据失败');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 状态颜色映射
+  const statusColorMap = {
+    pending: 'orange',
+    approved: 'green',
+    rejected: 'red',
+  };
+
+  const statusTextMap = {
+    pending: '待审核',
+    approved: '已通过',
+    rejected: '已拒绝',
+  };
+
+  const showMessage = () => {
+    Message.success('Arco Design Message 组件正常工作！');
+  };
+
+  return (
+    <div className="homepage">
+      <Title heading={2}>🎨 子应用主题 & 组件示例</Title>
+      <Paragraph type="secondary">
+        子应用复用主应用的 React 和 Arco Design，无重复打包，主题自动同步
+      </Paragraph>
+
+      <Divider />
+
+      {/* 请求示例 */}
+      <Spin loading={loading} style={{ display: 'block' }}>
+        <Card
+          title="🔗 Request 请求示例"
+          style={{ marginBottom: 16 }}
+          extra={
+            <Tag color={getRequestSource() === 'main-app' ? 'green' : 'blue'}>
+              {getRequestSource() === 'main-app' ? '使用主应用 Request' : '使用 Umi Request'}
+            </Tag>
+          }
+        >
+          <Paragraph>
+            子应用优先使用主应用传递的 <Text code>request</Text> 实例，独立运行时使用 Umi
+            内置的 request。两种模式都支持 Mock。
+          </Paragraph>
+
+          <Space size="medium" style={{ marginTop: 16 }}>
+            <Button type="primary" icon={<IconRefresh />} onClick={fetchUserInfo}>
+              获取用户信息
+            </Button>
+            <Button type="secondary" icon={<IconRefresh />} onClick={fetchStats}>
+              获取统计数据
+            </Button>
+            <Button type="outline" icon={<IconRefresh />} onClick={fetchList}>
+              获取列表数据
+            </Button>
+          </Space>
+
+          {/* 用户信息展示 */}
+          {userInfo && (
+            <>
+              <Divider />
+              <Title heading={6}>用户信息</Title>
+              <Descriptions
+                column={2}
+                data={[
+                  { label: 'ID', value: userInfo.id },
+                  { label: '姓名', value: userInfo.name },
+                  { label: '邮箱', value: userInfo.email },
+                  { label: '角色', value: <Tag color="arcoblue">{userInfo.role}</Tag> },
+                  { label: '部门', value: userInfo.department },
+                ]}
+              />
+            </>
+          )}
+
+          {/* 统计数据展示 */}
+          {stats && (
+            <>
+              <Divider />
+              <Title heading={6}>统计数据</Title>
+              <Descriptions
+                column={2}
+                data={[
+                  { label: '总用户数', value: stats.totalUsers.toLocaleString() },
+                  { label: '活跃用户', value: stats.activeUsers.toLocaleString() },
+                  { label: '待处理任务', value: <Tag color="orange">{stats.pendingTasks}</Tag> },
+                  { label: '已完成任务', value: <Tag color="green">{stats.completedTasks}</Tag> },
+                  { label: '更新时间', value: new Date(stats.lastUpdated).toLocaleString() },
+                ]}
+              />
+            </>
+          )}
+
+          {/* 列表数据展示 */}
+          {listData.length > 0 && (
+            <>
+              <Divider />
+              <Title heading={6}>列表数据</Title>
+              <Table
+                size="small"
+                pagination={false}
+                columns={[
+                  { title: 'ID', dataIndex: 'id', width: 80 },
+                  { title: '标题', dataIndex: 'title' },
+                  {
+                    title: '状态',
+                    dataIndex: 'status',
+                    width: 100,
+                    render: (status: keyof typeof statusColorMap) => (
+                      <Tag color={statusColorMap[status]}>{statusTextMap[status]}</Tag>
+                    ),
+                  },
+                  { title: '创建时间', dataIndex: 'createdAt', width: 180 },
+                ]}
+                data={listData}
+              />
+            </>
+          )}
+        </Card>
+      </Spin>
+
+      {/* Arco Design 组件示例 */}
+      <Card title="📦 Arco Design 组件" style={{ marginBottom: 16 }}>
+        <Paragraph>
+          子应用通过 <Text code>externals</Text> 配置复用主应用的 Arco Design，
+          避免重复打包（节省 ~800KB）。
+        </Paragraph>
+
+        <Space size="medium" style={{ marginTop: 16 }}>
+          <Button type="primary" onClick={showMessage}>
+            主要按钮
+          </Button>
+          <Button type="secondary">次要按钮</Button>
+          <Button type="outline">线框按钮</Button>
+          <Button type="text">文字按钮</Button>
+        </Space>
+
+        <Divider />
+
+        <Space size="medium">
+          <Tag color="arcoblue">Arco Blue</Tag>
+          <Tag color="green">Success</Tag>
+          <Tag color="gold">Warning</Tag>
+          <Tag color="red">Danger</Tag>
+          <Tag color="purple">Purple</Tag>
+        </Space>
+
+        <Divider />
+
+        <Space size="medium" align="center">
+          <Text>主题切换：</Text>
+          <Switch
+            checkedIcon={<IconMoon />}
+            uncheckedIcon={<IconSun />}
+            onChange={(checked: boolean) => {
+              Message.info(`切换到 ${checked ? '暗色' : '亮色'} 模式（需在主应用操作）`);
+            }}
+          />
+          <Text type="secondary">（实际切换请在主应用 Header 操作）</Text>
+        </Space>
+      </Card>
+
+      {/* 自定义主题色示例 */}
+      <Card title="🎨 自定义主题色变量" style={{ marginBottom: 16 }}>
+        <Paragraph>
+          在 Less 中使用 <Text code>@audit-center/shared-styles/variables-only</Text>{' '}
+          导入主题变量，自动适配亮色/暗色主题。
+        </Paragraph>
+
+        <Title heading={6}>品牌色 & 功能色</Title>
+        <div className="homepage-colors">
+          <div className="homepage-color-item">
+            <div className="homepage-color-box brand-1" />
+            <span className="homepage-color-label">@Brand1-6</span>
+          </div>
+          <div className="homepage-color-item">
+            <div className="homepage-color-box brand-2" />
+            <span className="homepage-color-label">@Brand2-6</span>
+          </div>
+          <div className="homepage-color-item">
+            <div className="homepage-color-box success" />
+            <span className="homepage-color-label">@Success-6</span>
+          </div>
+          <div className="homepage-color-item">
+            <div className="homepage-color-box warning" />
+            <span className="homepage-color-label">@Warning-6</span>
+          </div>
+          <div className="homepage-color-item">
+            <div className="homepage-color-box danger" />
+            <span className="homepage-color-label">@Danger-6</span>
+          </div>
+        </div>
+
+        <Title heading={6} style={{ marginTop: 16 }}>
+          中性色（随主题自动切换）
+        </Title>
+        <div className="homepage-colors">
+          <div className="homepage-color-item">
+            <div className="homepage-color-box fill-1" />
+            <span className="homepage-color-label">@color-fill-1</span>
+          </div>
+          <div className="homepage-color-item">
+            <div className="homepage-color-box fill-2" />
+            <span className="homepage-color-label">@color-fill-2</span>
+          </div>
+          <div className="homepage-color-item">
+            <div className="homepage-color-box fill-3" />
+            <span className="homepage-color-label">@color-fill-3</span>
+          </div>
+        </div>
+      </Card>
+
+      {/* 提示信息 */}
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Alert
+          type="info"
+          title="依赖共享"
+          content="通过 externals 配置，子应用复用主应用的 React 和 Arco Design，打包体积减少 ~1MB"
+        />
+        <Alert
+          type="success"
+          title="主题同步"
+          content="子应用的 Arco 组件和自定义样式自动跟随主应用主题切换"
+        />
+        <Alert
+          type="warning"
+          title="注意事项"
+          content="使用 variables-only 导入，避免重复打包 CSS 变量定义"
+        />
+      </Space>
+    </div>
+  );
+}

package/generators/subapp-react/templates/homepage/src/styles/theme.less

@@ -0,0 +1,6 @@
+// ==================== 子应用主题注入 ====================
+// 此文件仅在独立运行时被动态导入
+// 作为微前端子应用时不会被导入（使用主应用的主题）
+
+@import '@audit-center/shared-styles/theme-inject';
+

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

@@ -0,0 +1,3 @@
+{
+  "extends": "./src/.umi/tsconfig.json"
+}

package/generators/subapp-react/templates/homepage/typings.d.ts

@@ -0,0 +1,17 @@
+import '@umijs/max/typings';
+
+declare global {
+  interface Window {
+    /**
+     * @name qiankun 环境标识
+     * @description 当应用作为 qiankun 子应用运行时为 true
+     */
+    __POWERED_BY_QIANKUN__?: boolean;
+
+    /**
+     * @name qiankun 注入的公共路径
+     * @description qiankun 运行时注入的资源路径前缀
+     */
+    __INJECTED_PUBLIC_PATH_BY_QIANKUN__?: string;
+  }
+}