generator-mico-cli 0.1.18

package/generators/micro-react/templates/apps/layout/src/common/upload/oss.ts

@@ -0,0 +1,401 @@
+import { fetchUploadSignedUrl } from '@/services/oss';
+import type { UploadProps } from '@arco-design/web-react';
+import { Message } from '@arco-design/web-react';
+import type { UploadItem } from '@arco-design/web-react/es/Upload';
+import SparkMD5 from 'spark-md5';
+import type { TDirCategory } from '../constants';
+import type {
+  OssUploadError,
+  UploadLifecycleEvent,
+  UploadNamedFile,
+  UploadOptions,
+  UploadResult,
+} from './types';
+
+const DEFAULT_CHUNK_SIZE = 10 * 1024 * 1024; // 10MB
+const DEFAULT_SIZE_LIMIT = 100 * 1024 * 1024; // 100MB
+
+export interface FileDigestResult {
+  hex: string;
+  base64: string;
+}
+
+const binaryStringToHex = (input: string): string => {
+  let hex = '';
+  for (let i = 0; i < input.length; i += 1) {
+    hex += input.charCodeAt(i).toString(16).padStart(2, '0');
+  }
+  return hex;
+};
+
+const binaryStringToBase64 = (input: string): string => {
+  if (typeof window === 'undefined') {
+    return Buffer.from(input, 'binary').toString('base64');
+  }
+  return btoa(input);
+};
+
+export async function calculateFileMD5(
+  file: File,
+  options?: {
+    chunkSize?: number;
+    signal?: AbortSignal;
+    onProgress?: (percent: number) => void;
+  },
+): Promise<FileDigestResult> {
+  const chunkSize = options?.chunkSize ?? DEFAULT_CHUNK_SIZE;
+  const spark = new SparkMD5.ArrayBuffer();
+  const chunks = Math.ceil(file.size / chunkSize);
+  let currentChunk = 0;
+
+  return new Promise<FileDigestResult>((resolve, reject) => {
+    const reader = new FileReader();
+
+    const abort = (reason?: Error) => {
+      cleanup();
+      reject(reason ?? new DOMException('Aborted', 'AbortError'));
+    };
+
+    const onAbort = () => abort();
+
+    const cleanup = () => {
+      reader.onload = null;
+      reader.onerror = null;
+      options?.signal?.removeEventListener('abort', onAbort);
+    };
+
+    if (options?.signal?.aborted) {
+      abort();
+      return;
+    }
+
+    options?.signal?.addEventListener('abort', onAbort);
+
+    reader.onload = (event) => {
+      const target = event.target;
+      if (!target?.result) {
+        abort(new Error('读取文件分片失败'));
+        return;
+      }
+
+      spark.append(target.result as ArrayBuffer);
+      currentChunk += 1;
+      options?.onProgress?.(Number(((currentChunk / chunks) * 100).toFixed(2)));
+
+      if (currentChunk < chunks) {
+        loadNextChunk();
+      } else {
+        const raw = spark.end(true) as string;
+        const hex = binaryStringToHex(raw);
+        const base64 = binaryStringToBase64(raw);
+        cleanup();
+        resolve({ hex, base64 });
+      }
+    };
+
+    reader.onerror = () => {
+      abort(reader.error ?? new Error('读取文件失败'));
+    };
+
+    function loadNextChunk() {
+      const start = currentChunk * chunkSize;
+      const end = Math.min(start + chunkSize, file.size);
+      const slice =
+        file.slice ??
+        (
+          file as File & {
+            mozSlice?: File['slice'];
+            webkitSlice?: File['slice'];
+          }
+        )?.mozSlice ??
+        (file as File & { webkitSlice?: File['slice'] })?.webkitSlice;
+      if (!slice) {
+        abort(new Error('当前环境不支持文件分片读取'));
+        return;
+      }
+      reader.readAsArrayBuffer(slice.call(file, start, end));
+    }
+
+    loadNextChunk();
+  });
+}
+
+export function getFileExtension(file: File): string {
+  const name = file.name;
+  if (name?.includes('.')) {
+    const explicitExt = name.split('.').pop();
+    if (explicitExt && explicitExt.length > 0 && explicitExt !== name) {
+      return explicitExt.toLowerCase();
+    }
+  }
+
+  const mime = file.type;
+  if (mime) {
+    const parts = mime.split('/');
+    const candidate = parts.pop();
+    if (candidate && candidate.length > 0) {
+      return candidate.toLowerCase();
+    }
+  }
+
+  return 'bin';
+}
+
+function createAbortError(message: string): DOMException {
+  return new DOMException(message, 'AbortError');
+}
+
+async function uploadViaSignedUrl(
+  uploadUrl: string,
+  payload: {
+    data: Blob | File | ArrayBuffer;
+    contentType?: string;
+    contentMd5?: string;
+  },
+  options?: {
+    signal?: AbortSignal;
+    onProgress?: (event: UploadLifecycleEvent) => void;
+  },
+): Promise<void> {
+  await new Promise<void>((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('PUT', uploadUrl, true);
+    xhr.responseType = 'text';
+
+    const resolvedType =
+      payload.contentType ||
+      (payload.data instanceof Blob ? payload.data.type : '') ||
+      'application/octet-stream';
+    xhr.setRequestHeader('Content-Type', resolvedType);
+    if (payload.contentMd5) {
+      xhr.setRequestHeader('Content-MD5', payload.contentMd5);
+    }
+
+    const abort = () => {
+      xhr.abort();
+      reject(createAbortError('上传被取消'));
+    };
+
+    const handleAbort = () => abort();
+
+    if (options?.signal?.aborted) {
+      abort();
+      return;
+    }
+
+    options?.signal?.addEventListener('abort', handleAbort);
+
+    xhr.upload.onprogress = (event) => {
+      options?.onProgress?.({
+        stage: 'uploading',
+        loaded: event.loaded,
+        total: event.total,
+        percent: Number(((event.loaded / event.total) * 100).toFixed(2)),
+      });
+    };
+
+    xhr.onerror = () => {
+      options?.signal?.removeEventListener('abort', handleAbort);
+      reject(new Error('上传失败，请重试'));
+    };
+
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 4) {
+        options?.signal?.removeEventListener('abort', handleAbort);
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve();
+        } else {
+          reject(
+            new Error(
+              `上传失败，状态码 ${xhr.status}${
+                xhr.responseText ? `: ${xhr.responseText}` : ''
+              }`,
+            ),
+          );
+        }
+      }
+    };
+
+    xhr.send(payload.data);
+  });
+}
+
+export async function uploadToOss(
+  options: UploadOptions,
+): Promise<UploadResult> {
+  const { file, dirCategory, signal, onProgress } = options;
+  const sizeLimit =
+    typeof options.sizeLimit === 'number'
+      ? options.sizeLimit
+      : DEFAULT_SIZE_LIMIT;
+
+  if (sizeLimit > 0 && file.size > sizeLimit) {
+    const error: OssUploadError = Object.assign(new Error('文件超出大小限制'), {
+      code: 'FILE_TOO_LARGE',
+    });
+    throw error;
+  }
+
+  onProgress?.({ stage: 'hashing', percent: 0 });
+  const digest = await calculateFileMD5(file, {
+    signal,
+    onProgress: (percent) => {
+      onProgress?.({ stage: 'hashing', percent });
+    },
+  });
+
+  onProgress?.({ stage: 'signing', percent: 50 });
+  const ext = getFileExtension(file);
+  const sign = await fetchUploadSignedUrl({
+    md5_content: digest.base64,
+    file_extension: ext,
+    dir_category: dirCategory,
+  });
+
+  const blob = new Blob([file], {
+    type: sign.content_type || file.type || 'application/octet-stream',
+  });
+
+  await uploadViaSignedUrl(
+    sign.upload_url,
+    {
+      data: blob,
+      contentType: blob.type,
+      contentMd5: sign.content_md5 ?? digest.base64,
+    },
+    {
+      signal,
+      onProgress: (event) => {
+        onProgress?.({
+          ...event,
+          stage: 'uploading',
+        });
+      },
+    },
+  );
+
+  onProgress?.({ stage: 'uploading', percent: 100 });
+
+  return {
+    fileUrl: sign.file_url,
+    uploadUrl: sign.upload_url,
+    contentType: sign.content_type,
+    md5: digest.hex,
+    fileName: file.name,
+    fileKey: sign.file_key,
+  };
+}
+
+export interface CreateArcoUploadHandlerOptions {
+  dirCategory: TDirCategory;
+  sizeLimit?: number;
+  beforeUpload?: (file: File) => boolean | Promise<boolean>;
+  onUploaded?: (result: UploadResult) => void;
+  onUploadError?: (error: Error) => void;
+}
+
+export function createArcoUploadHandler(
+  options: CreateArcoUploadHandlerOptions,
+): UploadProps['customRequest'] {
+  type CustomRequestOptions = Parameters<
+    NonNullable<UploadProps['customRequest']>
+  >[0];
+
+  return (requestOptions: CustomRequestOptions) => {
+    const { file, onProgress, onError, onSuccess } = requestOptions;
+    const rawFile = file as File;
+
+    const controller = new AbortController();
+
+    const uploadRoutine = async () => {
+      try {
+        if (options.beforeUpload) {
+          const canUpload = await options.beforeUpload(rawFile);
+          if (!canUpload) {
+            throw Object.assign(new Error('文件未通过预检查'), {
+              code: 'PRE_CHECK_FAILED',
+            });
+          }
+        }
+
+        const result = await uploadToOss({
+          file: rawFile,
+          dirCategory: options.dirCategory,
+          sizeLimit: options.sizeLimit,
+          signal: controller.signal,
+          onProgress: (event) => {
+            let percent = 0;
+            if (event.stage === 'hashing') {
+              percent = (event.percent ?? 0) * 0.3;
+            } else if (event.stage === 'signing') {
+              percent = 40;
+            } else {
+              percent = 40 + (event.percent ?? 0) * 0.6;
+            }
+            onProgress?.(Math.min(100, Number(percent.toFixed(2))));
+          },
+        });
+
+        options.onUploaded?.(result);
+
+        onSuccess?.(result as unknown as UploadNamedFile);
+      } catch (error) {
+        if (error instanceof DOMException && error.name === 'AbortError') {
+          Message.info('上传已取消');
+        } else if ((error as OssUploadError)?.code === 'FILE_TOO_LARGE') {
+          Message.error('文件大小超过限制，无法上传');
+        } else if (error instanceof Error) {
+          Message.error(error.message);
+        }
+
+        options.onUploadError?.(error as Error);
+        onError?.(error as Error);
+      }
+    };
+
+    uploadRoutine().catch((error) => {
+      options.onUploadError?.(error as Error);
+      onError?.(error as Error);
+    });
+
+    return {
+      abort() {
+        controller.abort();
+      },
+    };
+  };
+}
+
+export function mapUploadItemsToNamedFiles(
+  items: UploadItem[],
+): UploadNamedFile[] {
+  return items
+    .filter((item) => item.status === 'done')
+    .map((item) => {
+      const response = item.response as
+        | UploadResult
+        | UploadNamedFile
+        | undefined;
+      if (response && 'fileUrl' in response) {
+        return {
+          name: item.name ?? response.fileName ?? '文件',
+          url: response.fileUrl,
+          fileKey: response.fileKey,
+        };
+      }
+      if (response && 'url' in response) {
+        return {
+          name: response.name ?? item.name ?? '文件',
+          url: response.url,
+          fileKey: response.fileKey,
+        };
+      }
+      if (item.url) {
+        return {
+          name: item.name ?? '文件',
+          url: item.url,
+        };
+      }
+      throw new Error('上传项缺少可用的文件地址');
+    });
+}

package/generators/micro-react/templates/apps/layout/src/common/upload/types.ts

@@ -0,0 +1,47 @@
+import type { TDirCategory } from '../constants';
+
+export interface UploadLifecycleEvent {
+  stage: 'hashing' | 'signing' | 'uploading';
+  /**
+   * 百分比 (0-100)，可选。
+   */
+  percent?: number;
+  /**
+   * 已上传/已处理字节。
+   */
+  loaded?: number;
+  /**
+   * 总字节数。
+   */
+  total?: number;
+}
+
+export interface UploadResult {
+  fileUrl: string;
+  uploadUrl: string;
+  contentType?: string;
+  md5: string;
+  fileName: string;
+  fileKey?: string;
+}
+
+export interface UploadOptions {
+  file: File;
+  dirCategory: TDirCategory;
+  /**
+   * 默认 20MB，可传入 0 或 undefined 表示不限制。
+   */
+  sizeLimit?: number;
+  signal?: AbortSignal;
+  onProgress?: (event: UploadLifecycleEvent) => void;
+}
+
+export interface OssUploadError extends Error {
+  code?: string;
+}
+
+export interface UploadNamedFile {
+  name: string;
+  url: string;
+  fileKey?: string;
+}

package/generators/micro-react/templates/apps/layout/src/common/uploadFiles.ts

@@ -0,0 +1,35 @@
+// ! 这个函数不能放到 ./helpers.ts 中，因为 ./request/index.ts 从 ./helpers.ts 导入了 getFromStorage, safeParseJSON，如果放到 ./helpers.ts 中，会导致循环引入
+// ! 开发态下，发生循环引入时， mako 不会有编译时报错，但运行时会报错
+
+import type { TDirCategory } from './constants';
+import { uploadToOss } from './upload/oss';
+
+/** 上传文件到 OSS 并获取 URL */
+const uploadFiles = async ({
+  files,
+  dirCategory,
+}: {
+  files: Array<File>;
+  dirCategory: TDirCategory;
+}): Promise<string[]> => {
+  if (files.length === 0) {
+    return [];
+  }
+
+  const uploadPromises = files.map(async (file) => {
+    try {
+      const result = await uploadToOss({
+        file,
+        dirCategory,
+      });
+      return new URL(result.fileUrl).pathname;
+    } catch (error) {
+      console.error('文件上传失败:', error);
+      throw new Error(`文件 ${file.name} 上传失败`);
+    }
+  });
+
+  return Promise.all(uploadPromises);
+};
+
+export default uploadFiles;

package/generators/micro-react/templates/apps/layout/src/components/IconFont/index.tsx

@@ -0,0 +1,25 @@
+import { getCurrentLocale, getIconFontPath } from '@/common/locale';
+import { Icon } from '@arco-design/web-react';
+
+// 该组件用于自定义的图标，用法见https://arco.design/react/components/icon#%E6%B7%BB%E5%8A%A0-iconbox-%E9%A1%B9%E7%9B%AE
+// 图标的名称可以在设计图ued里面找到 https://www.figma.com/design/skTJZPfwLCDgEV9JC6wzpP/%E5%AE%A2%E6%9C%8D%E4%B8%AD%E5%BF%83_%E4%BC%9A%E8%AF%9D%E7%AE%A1%E7%90%86_%E5%B7%A5%E4%BD%9C%E5%8F%B0?node-id=647-4835&t=8swGel7i3bPnKkul-0
+// 目前设置的字体前缀为webcs-，因此使用时需要加上前缀，如<IconFont type="webcs-outline_copy" />
+// 字体库地址：https://arco.design/iconbox/mime/lib/1945/0
+
+/**
+ * 根据当前语言加载对应的图标库
+ * 语言切换时会重新加载页面，所以这里只需要在初始化时根据当前语言加载
+ */
+function createIconFont() {
+  // 获取当前语言（按优先级：URL参数 > localStorage > 浏览器默认）
+  const currentLocale = getCurrentLocale();
+  const iconPath = getIconFontPath(currentLocale);
+
+  // 创建 IconFont 实例
+  return Icon.addFromIconFontCn({ src: iconPath });
+}
+
+// 初始化 IconFont（在模块加载时根据当前语言加载对应的图标库）
+const IconFont = createIconFont();
+
+export default IconFont;

package/generators/micro-react/templates/apps/layout/src/components/MicroAppLoader/index.less

@@ -0,0 +1,44 @@
+.micro-app-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: auto;
+}
+
+.micro-app-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-1);
+  z-index: 10;
+}
+
+.micro-app-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  transition: opacity 0.3s;
+}
+
+.micro-app-content {
+  width: 100%;
+  height: 100%;
+}
+
+.micro-app-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--color-text-3);
+
+  p {
+    margin: 8px 0;
+  }
+}

package/generators/micro-react/templates/apps/layout/src/components/MicroAppLoader/index.tsx

@@ -0,0 +1,121 @@
+import { microAppLogger } from '@/common/logger';
+import { request } from '@/common/request';
+import { Spin } from '@arco-design/web-react';
+import { loadMicroApp, type MicroApp } from 'qiankun';
+import React, { useEffect, useRef, useState } from 'react';
+import './index.less';
+
+interface MicroAppLoaderProps {
+  /** 微应用入口 URL */
+  entry: string;
+  /** 微应用唯一标识（用于生成容器 ID，应为无空格的技术名称） */
+  name: string;
+  /** 微应用显示名称（用于 loading 提示，可包含中文） */
+  displayName?: string;
+}
+
+/**
+ * 将路由路径转换为有效的 HTML ID
+ * 例如：/homepage → homepage, /audit/pending → audit-pending
+ */
+const sanitizeId = (path: string): string => {
+  return (
+    path
+      .replace(/^\/+/, '') // 移除开头的斜杠
+      .replace(/\/+/g, '-') // 斜杠替换为连字符
+      .replace(/\s+/g, '-') // 空格替换为连字符
+      .replace(/[^a-zA-Z0-9_-]/g, '') || // 移除其他特殊字符
+    `app-${Date.now()}`
+  ); // 如果结果为空，使用时间戳
+};
+
+/**
+ * qiankun 微应用加载器
+ * 使用 loadMicroApp API 动态加载微前端应用
+ */
+const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
+  entry,
+  name,
+  displayName,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const microAppRef = useRef<MicroApp | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // 生成安全的容器 ID（避免空格和特殊字符导致选择器失效）
+  const safeAppName = sanitizeId(name);
+  const containerId = `micro-app-${safeAppName}`;
+  // 用于显示的名称（支持中文）
+  const label = displayName || name;
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    microAppLogger.log('Loading micro app:', {
+      name,
+      entry,
+      containerId,
+      containerExists: !!document.getElementById(containerId),
+    });
+
+    // 加载微应用
+    const loadApp = async () => {
+      try {
+        microAppRef.current = loadMicroApp({
+          name,
+          entry,
+          container: `#${containerId}`,
+          props: {
+            // 传递给子应用的数据
+            mainApp: '<%= projectName %>',
+            // 共享主应用的 request 实例
+            request,
+          },
+        });
+
+        // 等待微应用挂载完成
+        await microAppRef.current.mountPromise;
+        setLoading(false);
+      } catch (err) {
+        microAppLogger.error(`Failed to load micro app [${label}]:`, err);
+        setError(err instanceof Error ? err.message : 'Unknown error');
+        setLoading(false);
+      }
+    };
+
+    loadApp();
+
+    // 卸载微应用
+    return () => {
+      if (microAppRef.current) {
+        microAppRef.current.unmount();
+        microAppRef.current = null;
+      }
+    };
+  }, [entry, name, containerId, label]);
+
+  if (error) {
+    return (
+      <div className="micro-app-container">
+        <div className="micro-app-error">
+          <p>微应用加载失败</p>
+          <p className="error-detail">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="micro-app-container" ref={containerRef}>
+      {loading && (
+        <div className="micro-app-loading">
+          <Spin dot tip={`正在加载 ${label}...`} />
+        </div>
+      )}
+      <div id={containerId} className="micro-app-content" />
+    </div>
+  );
+};
+
+export default MicroAppLoader;

package/generators/micro-react/templates/apps/layout/src/constants/index.ts

@@ -0,0 +1,15 @@
+export const DEFAULT_NAME = 'Umi Max';
+
+/**
+ * 无需认证的路由路径
+ */
+export const NO_AUTH_ROUTES = {
+  LOGIN: '/user/login',
+  FORBIDDEN: '/403',
+  NOT_FOUND: '/404',
+} as const;
+
+/**
+ * 无需认证的路由列表
+ */
+export const NO_AUTH_ROUTE_LIST = Object.values(NO_AUTH_ROUTES);

package/generators/micro-react/templates/apps/layout/src/global.less

@@ -0,0 +1,13 @@
+// ==================== 全局样式 ====================
+// 导入共享主题变量（CSS Variables + Less Variables）
+@import '<%= packageScope %>/shared-styles';
+
+* {
+  box-sizing: border-box;
+}
+
+#<%= projectName %> {
+  height: 100vh;
+  min-height: 800px;
+  display: flex;
+}

package/generators/micro-react/templates/apps/layout/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useAuth } from './useAuth';
+export { useMenu } from './useMenu';
+export { useTheme } from './useTheme';