generator-mico-cli 0.1.18

package/generators/micro-react/templates/apps/layout/src/app.tsx

@@ -0,0 +1,123 @@
+import { history } from '@umijs/max';
+// 解决「React19 中无法使用 Message/Notification」的问题。 @see https://github.com/arco-design/arco-design/issues/2900#issuecomment-2796571653
+import * as arco from '@arco-design/web-react';
+import '@arco-design/web-react/dist/css/arco.css';
+import '@arco-design/web-react/es/_util/react-19-adapter';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { getAuthInfo } from './common/auth/tool';
+import { ROUTES } from './common/constants';
+import { extractRoutes, getWindowMenus } from './common/menu';
+import { initTheme } from './common/theme';
+import MicroAppLoader from './components/MicroAppLoader';
+import './global.less';
+
+// ==================== 微前端共享依赖 ====================
+// 将公共库暴露到 window，供子应用复用，避免重复打包
+// 子应用通过 externals 配置引用这些全局变量
+if (typeof window !== 'undefined') {
+  const win = window as unknown as Record<string, unknown>;
+  win.React = React;
+  win.ReactDOM = ReactDOM;
+  win.arco = arco;
+}
+
+// 初始化主题（在页面加载时立即执行，避免闪烁）
+initTheme();
+
+/**
+ * @see https://umijs.org/docs/api/runtime-config#getinitialstate
+ */
+export async function getInitialState(): Promise<{
+  currentUser?: {
+    name: string;
+    avatar: string;
+    userid: string;
+    status: string;
+  };
+  loading?: boolean;
+  fetchUserInfo?: () => Promise<void>;
+}> {
+  const fetchUserInfo = async () => {};
+
+  // 如果不是登录页面，执行
+  const { location } = history;
+  if (!ROUTES.NO_AUTH_ROUTES.includes(location.pathname)) {
+    const authInfo = getAuthInfo();
+    const currentUser = {
+      name: authInfo.nickname || '未知用户',
+      avatar:
+        authInfo.avatar ||
+        'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
+      userid: authInfo.uid,
+      status: 'UNKNOWN',
+    };
+    return {
+      fetchUserInfo,
+      currentUser,
+    };
+  }
+  return {
+    fetchUserInfo,
+  };
+}
+
+/**
+ * Umi 路由类型定义
+ */
+interface UmiRoute {
+  path: string;
+  name?: string;
+  element?: React.ReactNode;
+  routes?: UmiRoute[];
+  meta?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+/**
+ * @name 动态路由配置
+ * 从 window.__MICO_MENUS__ 获取菜单数据，生成动态路由
+ * @doc https://umijs.org/docs/max/router#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1
+ */
+export function patchClientRoutes({ routes }: { routes: UmiRoute[] }) {
+  const menus = getWindowMenus();
+  const dynamicRoutes = extractRoutes(menus);
+
+  // 找到根路由
+  const rootRoute = routes.find((r) => r.path === '/');
+  if (!rootRoute) return;
+
+  // 为每个动态路由添加配置
+  dynamicRoutes.forEach((route) => {
+    // 检查是否已存在
+    const exists = rootRoute.routes?.some((r) => r.path === route.path);
+    if (exists) return;
+
+    // 根据加载类型决定如何添加路由
+    // 对于 microapp 类型，使用 MicroAppLoader 组件
+    // 对于 internal 类型，不需要添加 element（由本地路由处理）
+    rootRoute.routes = rootRoute.routes || [];
+
+    // 为 microapp 类型创建渲染元素
+    const element =
+      route.loadType === 'microapp' && route.entry
+        ? React.createElement(MicroAppLoader, {
+            entry: route.entry,
+            name: route.path,
+            displayName: route.name,
+          })
+        : undefined;
+
+    rootRoute.routes.push({
+      path: route.path,
+      name: route.name,
+      element,
+      // 动态路由的元数据
+      meta: {
+        loadType: route.loadType,
+        entry: route.entry,
+      },
+    });
+  });
+}

package/generators/micro-react/templates/apps/layout/src/common/auth/cs-auth-manager.ts

@@ -0,0 +1,220 @@
+import { getFromStorage, removeStorage, setStorage } from '../helpers';
+import {
+  AUTH_TOKEN_KEY,
+  AVATAR,
+  NICKNAME,
+  REFRESH_TOKEN_KEY,
+  UID,
+  WS_TOKEN_KEY,
+} from './type';
+
+/**
+ * 认证信息类型
+ */
+export interface IAuthInfo {
+  avatar: string;
+  nickname: string;
+  uid: string;
+  token: string;
+  wsToken: string;
+  refreshToken: string;
+}
+
+/**
+ * Mibot Token 信息类型
+ */
+interface MibotTokenInfo {
+  token?: string;
+  staff_uid?: string;
+  staff_prop?: {
+    avatar?: string;
+    nickname?: string;
+  };
+}
+
+/**
+ * 认证响应类型
+ */
+interface AuthResponseData {
+  access?: string;
+  refresh?: string;
+  mibot_token_info?: MibotTokenInfo;
+}
+
+interface AuthResponse {
+  code?: number;
+  data?: AuthResponseData;
+  refresh?: string;
+  mibot_token_info?: MibotTokenInfo;
+}
+
+/**
+ * 获取存储的认证 token
+ * @returns 认证 token，如果不存在则返回 undefined
+ */
+export const getStoredAuthToken = (): string | undefined => {
+  return getFromStorage(AUTH_TOKEN_KEY) ?? undefined;
+};
+
+/**
+ * 获取存储的刷新 token
+ * @returns 刷新 token，如果不存在则返回 undefined
+ */
+export const getStoredRefreshToken = (): string | undefined => {
+  return getFromStorage(REFRESH_TOKEN_KEY) ?? undefined;
+};
+
+/**
+ * 获取存储的 WebSocket token
+ * @returns WebSocket token，如果不存在则返回 undefined
+ */
+export const getStoredWsToken = (): string | undefined => {
+  return getFromStorage(WS_TOKEN_KEY) ?? undefined;
+};
+
+/**
+ * 设置存储的认证 token
+ * @param token - 认证 token，如果为 null 或 undefined 则删除
+ */
+export const setStoredAuthToken = (token?: string | null): void => {
+  if (!token) {
+    removeStorage(AUTH_TOKEN_KEY);
+    return;
+  }
+  setStorage(AUTH_TOKEN_KEY, token);
+};
+
+/**
+ * 设置存储的刷新 token
+ * @param token - 刷新 token，如果为 null 或 undefined 则删除
+ */
+export const setStoredRefreshToken = (token?: string | null): void => {
+  if (!token) {
+    removeStorage(REFRESH_TOKEN_KEY);
+    return;
+  }
+  setStorage(REFRESH_TOKEN_KEY, token);
+};
+
+/**
+ * 设置存储的 WebSocket token
+ * @param token - WebSocket token，如果为 null 或 undefined 则删除
+ */
+export const setStoredWsToken = (token?: string | null): void => {
+  if (!token) {
+    removeStorage(WS_TOKEN_KEY);
+    return;
+  }
+  setStorage(WS_TOKEN_KEY, token);
+};
+
+/**
+ * 清除所有存储的认证相关 token 和信息
+ */
+export const clearStoredTokens = (): void => {
+  removeStorage(AUTH_TOKEN_KEY);
+  removeStorage(REFRESH_TOKEN_KEY);
+  removeStorage(WS_TOKEN_KEY);
+  removeStorage(AVATAR);
+  removeStorage(NICKNAME);
+  removeStorage(UID);
+};
+
+/**
+ * 获取登录态用户信息，包括文件host、头像、昵称、uid
+ * @returns 认证信息对象
+ */
+export const getAuthInfo = (): IAuthInfo => {
+  return {
+    avatar: getFromStorage(AVATAR) || '',
+    nickname: getFromStorage(NICKNAME) || '',
+    uid: getFromStorage(UID) || '',
+    token: getFromStorage(AUTH_TOKEN_KEY) || '',
+    wsToken: getFromStorage(WS_TOKEN_KEY) || '',
+    refreshToken: getFromStorage(REFRESH_TOKEN_KEY) || '',
+  };
+};
+
+/**
+ * 设置登录态用户信息
+ * @param info - 认证信息对象
+ */
+export const setAuthInfo = (info: IAuthInfo): void => {
+  if (info.avatar) {
+    setStorage(AVATAR, info.avatar);
+  }
+  if (info.nickname) {
+    setStorage(NICKNAME, info.nickname);
+  }
+  if (info.uid) {
+    setStorage(UID, info.uid);
+  }
+  if (info.token) {
+    setStorage(AUTH_TOKEN_KEY, info.token);
+  }
+  if (info.wsToken) {
+    setStorage(WS_TOKEN_KEY, info.wsToken);
+  }
+  if (info.refreshToken) {
+    setStorage(REFRESH_TOKEN_KEY, info.refreshToken);
+  }
+};
+
+/**
+ * 持久化 Mibot Token 信息（提取的公共函数）
+ */
+const persistMibotTokenInfo = (mibotTokenInfo: MibotTokenInfo): void => {
+  if (mibotTokenInfo.token) {
+    setStoredWsToken(mibotTokenInfo.token);
+  }
+  if (mibotTokenInfo.staff_uid) {
+    setStorage(UID, mibotTokenInfo.staff_uid);
+  }
+  if (mibotTokenInfo.staff_prop?.avatar) {
+    setStorage(AVATAR, mibotTokenInfo.staff_prop.avatar);
+  }
+  if (mibotTokenInfo.staff_prop?.nickname) {
+    setStorage(NICKNAME, mibotTokenInfo.staff_prop.nickname);
+  }
+};
+
+/**
+ * 从响应数据中持久化 token 信息
+ * 支持多种响应格式：
+ * - payload.code === 0 格式
+ * - payload.code === 200 格式（登录接口）
+ * @param payload - 响应数据
+ */
+export const maybePersistTokens = (payload: AuthResponse | null): void => {
+  if (!payload) return;
+
+  // 处理 code === 0 格式的响应
+  if (payload.code === 0) {
+    const refresh = payload.refresh ?? payload.data?.refresh;
+    if (refresh) {
+      setStoredRefreshToken(refresh);
+    }
+
+    const mibotTokenInfo =
+      payload.mibot_token_info ?? payload.data?.mibot_token_info;
+    if (mibotTokenInfo) {
+      console.info('设置用户TOKEN信息', mibotTokenInfo);
+      persistMibotTokenInfo(mibotTokenInfo);
+    }
+  }
+
+  // 处理 code === 200 格式的响应（登录接口）
+  if (payload.code === 200 && payload.data) {
+    const { data } = payload;
+
+    if (data.access) {
+      setStoredAuthToken(data.access);
+    }
+    if (data.refresh) {
+      setStoredRefreshToken(data.refresh);
+    }
+    if (data.mibot_token_info) {
+      persistMibotTokenInfo(data.mibot_token_info);
+    }
+  }
+};

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

@@ -0,0 +1,41 @@
+import { authLogger } from '@/common/logger';
+import { checkStaffAuth } from '@/services/auth';
+import { handleAuthFailureRedirect } from '../request';
+import { clearStoredTokens, getAuthInfo } from './cs-auth-manager';
+
+export function logout(): void {
+  clearStoredTokens();
+}
+
+/**
+ * 检查登录信息是否完整
+ */
+const isAuthInfoComplete = (
+  authInfo: ReturnType<typeof getAuthInfo>,
+): boolean => {
+  return Object.values(authInfo).every(Boolean);
+};
+
+export async function checkLogin(): Promise<void> {
+  const authInfo = getAuthInfo();
+
+  if (!isAuthInfoComplete(authInfo)) {
+    authLogger.warn('登录信息不完整，清除所有token,重新走登录流程');
+    clearStoredTokens();
+  }
+
+  await checkStaffAuth();
+}
+
+let hasTriggeredSsoReLogin = false;
+
+export function triggerSsoReLogin(reason?: string) {
+  if (hasTriggeredSsoReLogin) {
+    return;
+  }
+  hasTriggeredSsoReLogin = true;
+  const message = reason ? `，原因：${reason}` : '';
+  console.warn(`[Auth] trigger SSO re-login${message}`);
+  logout();
+  handleAuthFailureRedirect();
+}

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

@@ -0,0 +1,3 @@
+// localStorage 相关的认证函数已迁移到 @/common/auth/cs-auth-manager
+// 重新导出以保持向后兼容
+export { getAuthInfo, setAuthInfo, type IAuthInfo } from './cs-auth-manager';

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

@@ -0,0 +1,6 @@
+export const AUTH_TOKEN_KEY = 'auth';
+export const WS_TOKEN_KEY = 'ws_auth';
+export const REFRESH_TOKEN_KEY = 'refresh';
+export const AVATAR = 'avatar';
+export const NICKNAME = 'nickname';
+export const UID = 'uid';

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

@@ -0,0 +1,38 @@
+/**
+ * 应用常量定义
+ */
+
+/**
+ * 路由路径常量
+ */
+export const ROUTES = {
+  /** 登录页 */
+  LOGIN: '/user/login',
+  /** 注册页 */
+  REGISTER: '/user/register',
+  /** 注册结果页 */
+  REGISTER_RESULT: '/user/register-result',
+  /** 无需认证的路由列表 */
+  NO_AUTH_ROUTES: ['/user/login', '/user/register', '/user/register-result'],
+} as const;
+
+/**
+ * 主题相关常量
+ */
+export const THEME = {
+  /** localStorage 存储键 */
+  STORAGE_KEY: '<%= projectName %>-theme',
+  /** 默认主题 */
+  DEFAULT: 'light' as const,
+  /** 可选主题值 */
+  VALUES: ['light', 'dark'] as const,
+} as const;
+
+/**
+ * 存储键常量
+ */
+export const STORAGE_KEYS = {
+  APP_INFO: 'appInfo',
+  IS_SUPERUSER: 'is_superuser',
+  GROUPS: 'groups',
+} as const;

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

@@ -0,0 +1,73 @@
+export enum EEnv {
+  Development = 'development',
+  Testing = 'testing',
+  Production = 'production',
+}
+
+export type CanonicalEnv = `${EEnv}`;
+
+const ENV_NORMALIZED: Record<string, EEnv> = {
+  development: EEnv.Development,
+  testing: EEnv.Testing,
+  production: EEnv.Production,
+};
+
+const normalizeEnv = (value?: string): EEnv | undefined => {
+  if (!value) return undefined;
+  return ENV_NORMALIZED[value.toLowerCase()];
+};
+
+export const getEnvKeys = (env: EEnv): string[] => [env];
+
+let cachedEnv: EEnv | null = null;
+
+/**
+ * 获取当前环境标识
+ * @returns 'development' | 'testing' | 'production'
+ */
+export const getEnv = (): EEnv => {
+  if (cachedEnv) {
+    return cachedEnv;
+  }
+
+  const envFromNode = normalizeEnv(process.env.NODE_ENV);
+  if (envFromNode) {
+    cachedEnv = envFromNode;
+    return cachedEnv;
+  }
+
+  if (typeof window !== 'undefined') {
+    const { hostname } = window.location;
+    const segments = hostname.split('.');
+    // 至少三级域名且第一级含 'test' 视为测试环境
+    if (segments.length >= 3 && segments[0].toLowerCase().includes('test')) {
+      cachedEnv = EEnv.Testing;
+      return cachedEnv;
+    }
+  }
+
+  cachedEnv = EEnv.Production;
+  return cachedEnv;
+};
+
+/**
+ * 判断是否为开发环境
+ */
+export const isDevelopment = getEnv() === EEnv.Development;
+
+/**
+ * 判断是否为测试环境
+ */
+export const isTesting = getEnv() === EEnv.Testing;
+
+/**
+ * 判断是否为生产环境
+ */
+export const isProduction = getEnv() === EEnv.Production;
+
+/**
+ * 判断是否为开发或测试环境（用于兼容旧代码）
+ */
+export const isDevOrTest = (() => {
+  return isDevelopment || isTesting;
+})();

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

@@ -0,0 +1,69 @@
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+// 扩展 dayjs
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+/**
+ * 获取静态资源的完整 URL
+ * 用于 public 目录下的静态资源，自动拼接 publicPath 前缀
+ *
+ * @param path - 资源路径（相对于 public 目录，如 '/empty-states/404.png'）
+ * @returns 完整的资源 URL
+ *
+ * @example
+ * withPublicPath('/empty-states/404.png')
+ * // 开发环境 => 'http://localhost:8000/empty-states/404.png'
+ * // 生产环境 => 'https://cdn.example.com/path/empty-states/404.png'
+ */
+export const withPublicPath = (path: string): string => {
+  const publicPath =
+    process.env.NODE_ENV === 'development'
+      ? ''
+      : (window as any).publicPath || '';
+
+  // 移除 publicPath 末尾的斜杠
+  const base = publicPath.replace(/\/+$/, '');
+  // 确保 path 以 / 开头
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+
+  return `${base}${normalizedPath}`;
+};
+
+export const safeParseJSON = <T = any>(value: string | null): T | undefined => {
+  if (!value) return undefined;
+  try {
+    return JSON.parse(value) as T;
+  } catch {
+    return undefined;
+  }
+};
+
+export const getFromStorage = (key: string): string | null => {
+  if (typeof window === 'undefined') return null;
+  try {
+    return window.localStorage?.getItem(key) ?? null;
+  } catch {
+    return null;
+  }
+};
+
+export const setStorage = (key: string, value: string) => {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage?.setItem(key, value);
+  } catch {
+    // ignore
+  }
+};
+
+export const removeStorage = (key: string) => {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage?.removeItem(key);
+  } catch {
+    // ignore
+  }
+};

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

@@ -0,0 +1,123 @@
+import { withPublicPath } from './helpers';
+
+/**
+ * 语言管理工具
+ * 支持三种配置渠道，优先级从高到低：
+ * 1. URL 参数 (lang)
+ * 2. localStorage 配置 (umi_locale)
+ * 3. 默认浏览器语言
+ */
+
+const LOCALE_STORAGE_KEY = 'umi_locale';
+const URL_PARAM_KEY = 'lang';
+
+/**
+ * 支持的语言列表
+ */
+export const SUPPORTED_LOCALES = ['zh-CN', 'en-US', 'ar-SA'] as const;
+export type SupportedLocale = (typeof SUPPORTED_LOCALES)[number];
+
+/**
+ * 默认语言
+ */
+const DEFAULT_LOCALE: SupportedLocale = 'en-US';
+
+/**
+ * 从 URL 参数获取语言
+ */
+function getLocaleFromUrl(): string | null {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  const urlParams = new URLSearchParams(window.location.search);
+  return urlParams.get(URL_PARAM_KEY);
+}
+
+/**
+ * 从 localStorage 获取语言
+ */
+function getLocaleFromStorage(): string | null {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  try {
+    return localStorage.getItem(LOCALE_STORAGE_KEY);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * 获取浏览器默认语言
+ */
+function getBrowserLocale(): string {
+  if (typeof window === 'undefined') {
+    return DEFAULT_LOCALE;
+  }
+  const browserLang = navigator.language || (navigator as any).userLanguage;
+  // 检查是否支持该语言
+  if (SUPPORTED_LOCALES.includes(browserLang as SupportedLocale)) {
+    return browserLang;
+  }
+  // 检查语言前缀（如 zh-TW -> zh-CN）
+  const langPrefix = browserLang.split('-')[0];
+  const matchedLocale = SUPPORTED_LOCALES.find((locale) =>
+    locale.startsWith(langPrefix),
+  );
+  return matchedLocale || DEFAULT_LOCALE;
+}
+
+/**
+ * 验证语言是否支持
+ */
+function isValidLocale(locale: string | null): locale is SupportedLocale {
+  if (!locale) {
+    return false;
+  }
+  return SUPPORTED_LOCALES.includes(locale as SupportedLocale);
+}
+
+/**
+ * 获取当前语言（按优先级）
+ * 优先级：URL 参数 > localStorage > 浏览器默认语言
+ */
+export function getCurrentLocale(): SupportedLocale {
+  // 1. 优先从 URL 参数获取
+  const urlLocale = getLocaleFromUrl();
+  if (isValidLocale(urlLocale)) {
+    return urlLocale;
+  }
+
+  // 2. 从 localStorage 获取
+  const storageLocale = getLocaleFromStorage();
+  if (isValidLocale(storageLocale)) {
+    return storageLocale;
+  }
+
+  // 3. 使用浏览器默认语言
+  return getBrowserLocale() as SupportedLocale;
+}
+
+/**
+ * 设置语言到 localStorage
+ */
+export function setLocaleToStorage(locale: SupportedLocale): void {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  try {
+    localStorage.setItem(LOCALE_STORAGE_KEY, locale);
+  } catch (error) {
+    console.error('Failed to save locale to localStorage:', error);
+  }
+}
+
+/**
+ * 根据语言获取图标库路径
+ */
+export function getIconFontPath(locale: SupportedLocale): string {
+  if (locale === 'ar-SA') {
+    return withPublicPath('/font/ar-SA.js');
+  }
+  return withPublicPath('/font/default.js');
+}