generator-mico-cli 0.1.18

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

package/lib/utils.js

@@ -0,0 +1,165 @@
+'use strict';
+
+const fs = require('node:fs');
+const path = require('node:path');
+
+/**
+ * 转换为 kebab-case
+ * @param {string} input
+ * @returns {string}
+ */
+function toKebab(input) {
+  return String(input)
+    .trim()
+    .replace(/[\s_]+/g, '-')
+    .replace(/[^a-zA-Z0-9-]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+    .toLowerCase();
+}
+
+/**
+ * 转换为 PascalCase
+ * @param {string} input
+ * @returns {string}
+ */
+function toPascal(input) {
+  return toKebab(input)
+    .split('-')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+}
+
+/**
+ * 转换为 camelCase
+ * @param {string} input
+ * @returns {string}
+ */
+function toCamel(input) {
+  const pascal = toPascal(input);
+  return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+}
+
+// ============ Generator 工具函数 ============
+
+/**
+ * 检查路径是否应该被忽略
+ * @param {string} sourceRoot - 源目录根路径
+ * @param {string} currentPath - 当前路径
+ * @param {string[]} ignoreList - 忽略列表
+ * @returns {boolean}
+ */
+function shouldIgnorePath(sourceRoot, currentPath, ignoreList) {
+  const rel = path.relative(sourceRoot, currentPath);
+  if (!rel || rel.startsWith('..')) return false;
+  const parts = rel.split(path.sep);
+  return parts.some((part) => ignoreList.includes(part));
+}
+
+/**
+ * 递归遍历目录，收集所有文件的相对路径
+ * @param {string} dir - 目录路径
+ * @param {string} sourceRoot - 源目录根路径
+ * @param {string[]} ignoreList - 忽略列表
+ * @param {string[]} files - 已收集的文件列表
+ * @returns {string[]}
+ */
+function collectFiles(dir, sourceRoot, ignoreList, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = path.join(dir, entry.name);
+    if (shouldIgnorePath(sourceRoot, fullPath, ignoreList)) continue;
+
+    if (entry.isDirectory()) {
+      collectFiles(fullPath, sourceRoot, ignoreList, files);
+    } else if (entry.isFile()) {
+      files.push(path.relative(sourceRoot, fullPath));
+    }
+  }
+  return files;
+}
+
+/**
+ * 转换目标文件路径
+ * - 处理 npm 忽略的点文件：_gitignore -> .gitignore
+ * - 使用下划线前缀约定（Yeoman 社区标准做法）
+ * @param {string} relPath - 相对路径
+ * @returns {string}
+ */
+function transformDestPath(relPath) {
+  const fileName = path.basename(relPath);
+  // 下划线前缀约定：_gitignore -> .gitignore, _npmrc -> .npmrc
+  if (fileName.startsWith('_')) {
+    const newFileName = '.' + fileName.slice(1);
+    return path.join(path.dirname(relPath), newFileName);
+  }
+  return relPath;
+}
+
+/**
+ * 需要使用 EJS 模板处理的文件扩展名
+ */
+const TEMPLATE_EXTENSIONS = new Set([
+  '.ts',
+  '.tsx',
+  '.js',
+  '.jsx',
+  '.json',
+  '.less',
+  '.md',
+  '.mdc',
+  '.sh'
+]);
+
+/**
+ * 判断文件是否需要模板处理
+ * @param {string} filePath - 文件路径
+ * @returns {boolean}
+ */
+function isTemplateFile(filePath) {
+  return TEMPLATE_EXTENSIONS.has(path.extname(filePath));
+}
+
+/**
+ * 安装全局未捕获异常处理
+ */
+function setupErrorHandlers() {
+  process.on('uncaughtException', (error) => {
+    console.error('');
+    console.error('❌ Unexpected error:');
+    console.error(`   ${error.message}`);
+    if (error.stack) {
+      console.error('');
+      console.error('   Stack trace:');
+      console.error(error.stack.split('\n').map(line => `   ${line}`).join('\n'));
+    }
+    console.error('');
+    process.exit(1);
+  });
+
+  process.on('unhandledRejection', (reason) => {
+    console.error('');
+    console.error('❌ Unhandled promise rejection:');
+    console.error(`   ${reason instanceof Error ? reason.message : String(reason)}`);
+    if (reason instanceof Error && reason.stack) {
+      console.error('');
+      console.error('   Stack trace:');
+      console.error(reason.stack.split('\n').map(line => `   ${line}`).join('\n'));
+    }
+    console.error('');
+    process.exit(1);
+  });
+}
+
+module.exports = {
+  // 字符串转换
+  toKebab,
+  toPascal,
+  toCamel,
+  // Generator 工具
+  shouldIgnorePath,
+  collectFiles,
+  transformDestPath,
+  isTemplateFile,
+  setupErrorHandlers,
+  TEMPLATE_EXTENSIONS
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "generator-mico-cli",
+  "version": "0.1.18",
+  "description": "Yeoman generator for Mico CLI projects",
+  "keywords": [
+    "yeoman-generator",
+    "generator",
+    "cli"
+  ],
+  "license": "MIT",
+  "main": "generators/subapp-react/index.js",
+  "bin": {
+    "mico": "bin/mico.js"
+  },
+  "files": [
+    "bin",
+    "lib",
+    "generators"
+  ],
+  "scripts": {
+    "sync:subapp-react-template": "node scripts/sync-subapp-react-template.js"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "semver": "^7.6.3",
+    "update-notifier": "^7.3.1",
+    "yeoman-generator": "^5.9.0"
+  }
+}