generator-mico-cli 0.2.28 → 0.2.30

package/generators/subapp-react/templates/homepage/src/app.tsx

@@ -5,13 +5,115 @@
  *
  * 注意：app.tsx 只能导出 Umi 规定的 API（qiankun、getInitialState 等）
  * 自定义函数请放在 @/common/mainApp.ts 中
+ *
+ * 国际化使用：
+ * 子应用默认共享主应用的 intl（同 tag），直接导入即可：
+ *   import { intl } from '<%= packageScope %>/common-intl';
+ *   intl.common_hello();
+ * 独立 intl：在 `src/common/intl/subappIntlConfig.ts` 填写 `getSubappIntlInitOptions()`；
+ * 页面统一用 `useSubappIntl`（intl 优先，未命中走子应用 Umi locales）。
+ *
+ * common-intl 的 getLocale/setLocale 与 Umi locale / 主应用 props.locale 对齐：入口调用 configureLocale（见下）。
  */
 
-import React from 'react';
+import {
+  configureLocale,
+  fetchMultilingualData,
+  type ILang,
+} from '<%= packageScope %>/common-intl';
+import { Message } from '@mico-platform/ui';
+import type { ReactNode } from 'react';
 import { history } from '@umijs/max';
 import { SentryErrorBoundary } from '@common-web/sentry';
 import { appLogger } from './common/logger';
+import { configureRequest } from '<%= packageScope %>/shared/services';
 import { type IMicroAppProps, setMainAppProps } from './common/mainApp';
+import { request } from './common/request';
+import { setLocaleToStorage } from './common/locale';
+import {
+  getSubappOwnFetchMultilingualData,
+  ilangToUmiLocale,
+  isCommonIntlEnabled,
+  umiLocaleToILang,
+} from './common/intl';
+import { getSubappCurrentLocale } from './common/intl/subappLocale';
+
+// 子应用：将本地 request（自动桥接主应用 / 独立 umi）注入 shared 包，供共享服务层（getRequest）使用
+// 注意：模块顶层注入，request 函数引用稳定；运行期由 request 内部根据是否处于 qiankun 选用 main / umi
+configureRequest(request as <T = unknown>(url: string, options?: Record<string, unknown>) => Promise<T>);
+
+// 子应用：common-intl initIntl 与 Umi `umi_locale` / 主应用注入 locale 对齐（与 layout app.tsx 同理）
+configureLocale({
+  getLocale: () => umiLocaleToILang(getSubappCurrentLocale()),
+  setLocale: (lang: ILang) => {
+    setLocaleToStorage(ilangToUmiLocale(lang));
+  },
+});
+
+/**
+ * @name 运行时国际化（Umi locale 插件）
+ * @see https://umijs.org/docs/max/i18n#%E8%BF%90%E8%A1%8C%E6%97%B6%E9%85%8D%E7%BD%AE
+ */
+export const locale = {
+  getLocale() {
+    return getSubappCurrentLocale();
+  },
+};
+
+/**
+ * 中台文案预加载：默认 tag 与（可选）子应用独立 intl tag 并行拉取，失败仍渲染。
+ * @see generators/micro-react/templates/apps/layout/src/app.tsx render
+ */
+export function render(oldRender: () => void): void {
+  const ownFetch = getSubappOwnFetchMultilingualData();
+  const tasks: Promise<unknown>[] = [];
+
+  if (isCommonIntlEnabled()) {
+    tasks.push(
+      fetchMultilingualData({
+        requestInstance: request as (
+          url: string,
+          options?: unknown,
+        ) => Promise<unknown>,
+        messageInstance: {
+          error: Message.error,
+          warning: Message.warning,
+        },
+        lang: umiLocaleToILang(getSubappCurrentLocale()) as ILang,
+        localeRequestUrl: process.env.LOCALE_REQUEST_URL,
+      }),
+    );
+  }
+
+  if (ownFetch) {
+    tasks.push(
+      ownFetch({
+        requestInstance: request as (
+          url: string,
+          options?: unknown,
+        ) => Promise<unknown>,
+        messageInstance: {
+          error: Message.error,
+          warning: Message.warning,
+        },
+        lang: umiLocaleToILang(getSubappCurrentLocale()) as ILang,
+        localeRequestUrl: process.env.LOCALE_REQUEST_URL,
+      }),
+    );
+  }
+
+  if (tasks.length === 0) {
+    oldRender();
+    return;
+  }
+
+  Promise.all(tasks)
+    .then(() => oldRender())
+    .catch((error: Error) => {
+      console.error('获取多语言文案失败', error);
+      oldRender();
+    });
+}
 
 /** 与 layout parser.findRouteByPath 一致：根路径 "/" 保持不变 */
 function stripTrailingSlash(path: string): string {
@@ -103,6 +205,6 @@ export async function getInitialState() {
   };
 }
 
-export function rootContainer(container: React.ReactNode) {
+export function rootContainer(container: ReactNode) {
   return <SentryErrorBoundary>{container}</SentryErrorBoundary>;
 }

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

@@ -0,0 +1,15 @@
+export { isCommonIntlEnabled, getCommonIntlConfig } from './intlRuntime';
+export type { IMicoConfigCommonIntl } from './types';
+export {
+  getSubappIntlInitOptions,
+  type ISubappIntlInitOptions,
+} from './subappIntlConfig';
+export {
+  getSubappOwnFetchMultilingualData,
+  getSubappOwnI18n,
+  getSubappOwnIntlTag,
+  isSubappOwnIntlEnabled,
+} from './subappOwnIntl';
+export { useSubappIntl } from './useSubappIntl';
+export { ilangToUmiLocale, umiLocaleToILang } from './localeMapping';
+export { getSubappCurrentLocale } from './subappLocale';

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

@@ -0,0 +1,14 @@
+import type { IMicoConfigCommonIntl } from './types';
+
+/**
+ * 是否启用多语言中台拉取：以 __MICO_CONFIG__.intl 或 commonIntl 含有效 tag、app_name 为准
+ */
+export function isCommonIntlEnabled(): boolean {
+  const c = getCommonIntlConfig();
+  return !!(c?.tag && c?.app_name);
+}
+
+export function getCommonIntlConfig(): IMicoConfigCommonIntl | undefined {
+  const w = window.__MICO_CONFIG__;
+  return w?.intl ?? w?.commonIntl;
+}

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

@@ -0,0 +1,24 @@
+import { LANG, type ILang } from '<%= packageScope %>/common-intl';
+import type { SupportedLocale } from '@/common/locale';
+import { LOCALE } from '@/common/locale';
+
+/** 与 packages/common-intl/src/umiLocaleBridge.ts、layout localeMapping 保持一致 */
+const UMI_TO_ILANG: Record<SupportedLocale, ILang> = {
+  [LOCALE.ZH_CN]: LANG.ZH_CN,
+  [LOCALE.EN_US]: LANG.EN,
+};
+
+export function umiLocaleToILang(locale: SupportedLocale): ILang {
+  return UMI_TO_ILANG[locale] ?? LANG.EN;
+}
+
+const ILANG_TO_UMI: Partial<Record<ILang, SupportedLocale>> = {
+  [LANG.ZH_CN]: LOCALE.ZH_CN,
+  [LANG.EN]: LOCALE.EN_US,
+  [LANG.AR]: LOCALE.EN_US,
+  [LANG.TR]: LOCALE.EN_US,
+};
+
+export function ilangToUmiLocale(lang: ILang): SupportedLocale {
+  return ILANG_TO_UMI[lang] ?? LOCALE.EN_US;
+}

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

@@ -0,0 +1,28 @@
+/**
+ * 子应用独立 intl（与主应用不同 tag / 独立 IndexedDB）时，在此返回 initIntl 参数。
+ * 默认 `undefined`：使用 <%= packageScope %>/common-intl 包内默认实例（与主应用 externals 共享）。
+ *
+ * 启用方式：返回含有效 `tag`、`app_name` 的对象（与 packages/common-intl README 一致）。
+ */
+export interface ISubappIntlInitOptions {
+  tag: string;
+  app_name: string;
+  indexedDBParams?: {
+    dbName?: string;
+    dbVersion?: number;
+    storeName?: string;
+    keyPathKey?: string;
+  };
+}
+
+export function getSubappIntlInitOptions():
+  | ISubappIntlInitOptions
+  | undefined {
+  return undefined;
+  // 如果需要启用独立 intl，请取消注释并修改 tag 和 app_name
+  // return {
+  //   tag: 'cs_fe_mobile',
+  //   app_name: 'middle',
+  //   indexedDBParams: { dbName: 'mico_cs_mobile_i18n_db' },
+  // };
+}

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

@@ -0,0 +1,18 @@
+import { getCurrentLocale, type SupportedLocale, SUPPORTED_LOCALES } from '@/common/locale';
+import { getMainAppProps } from '@/common/mainApp';
+
+function isSupportedLocale(value: string | undefined): value is SupportedLocale {
+  return !!value && (SUPPORTED_LOCALES as readonly string[]).includes(value);
+}
+
+/**
+ * 子应用当前 Umi 风格 locale：qiankun 下优先主应用 MicroAppLoader 注入的 `locale`，
+ * 否则与主应用相同规则（URL / umi_locale / 浏览器）。
+ */
+export function getSubappCurrentLocale(): SupportedLocale {
+  const fromMain = getMainAppProps()?.locale;
+  if (isSupportedLocale(fromMain)) {
+    return fromMain;
+  }
+  return getCurrentLocale();
+}

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

@@ -0,0 +1,63 @@
+import { initIntl, type ILang } from '<%= packageScope %>/common-intl';
+import { setLocaleToStorage } from '@/common/locale';
+import { getSubappIntlInitOptions } from './subappIntlConfig';
+import { ilangToUmiLocale, umiLocaleToILang } from './localeMapping';
+import { getSubappCurrentLocale } from './subappLocale';
+
+type TI18nFn = (opts: {
+  key: string;
+  defaultMessage: string;
+  interpolations?: (string | number | boolean)[];
+}) => string;
+
+type TFetchFn = (params: {
+  requestInstance: (url: string, options?: unknown) => Promise<unknown>;
+  messageInstance: { error: (msg: string) => void; warning: (msg: string) => void };
+  lang: ILang;
+  localeRequestUrl?: string;
+}) => Promise<unknown>;
+
+function createSubappOwnIntl(): {
+  i18nFn: TI18nFn | null;
+  fetchFn: TFetchFn | null;
+  tag: string | undefined;
+} {
+  const opts = getSubappIntlInitOptions();
+  if (!opts?.tag || !opts.app_name) {
+    return { i18nFn: null, fetchFn: null, tag: undefined };
+  }
+
+  const { fetchMultilingualData, i18n } = initIntl({
+    ...opts,
+    getLocale: () => umiLocaleToILang(getSubappCurrentLocale()),
+    setLocale: (lang: ILang) => {
+      setLocaleToStorage(ilangToUmiLocale(lang));
+    },
+  });
+
+  return {
+    i18nFn: i18n as TI18nFn,
+    fetchFn: fetchMultilingualData as TFetchFn,
+    tag: opts.tag,
+  };
+}
+
+const subappOwnIntlRuntime = createSubappOwnIntl();
+
+export function isSubappOwnIntlEnabled(): boolean {
+  return subappOwnIntlRuntime.i18nFn != null;
+}
+
+export function getSubappOwnIntlTag(): string | undefined {
+  return subappOwnIntlRuntime.tag;
+}
+
+/** 独立 intl 实例的 i18n；未配置时为 `null` */
+export function getSubappOwnI18n(): TI18nFn | null {
+  return subappOwnIntlRuntime.i18nFn;
+}
+
+/** 与默认 tag 的 fetch 相同入参；未配置独立 intl 时为 `null` */
+export function getSubappOwnFetchMultilingualData(): TFetchFn | null {
+  return subappOwnIntlRuntime.fetchFn;
+}

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

@@ -0,0 +1,14 @@
+/**
+ * 运行时 common-intl 配置（见 window.__MICO_CONFIG__.intl，兼容 commonIntl）
+ */
+export interface IMicoConfigCommonIntl {
+  /** 多语言中台 tag */
+  tag: string;
+  app_name: string;
+  indexedDBParams?: {
+    dbName?: string;
+    dbVersion?: number;
+    storeName?: string;
+    keyPathKey?: string;
+  };
+}

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

@@ -0,0 +1,61 @@
+import { i18n } from '<%= packageScope %>/common-intl';
+import { useIntl } from '@umijs/max';
+import { getSubappCurrentLocale } from './subappLocale';
+import { isCommonIntlEnabled } from './intlRuntime';
+import { getSubappOwnI18n, isSubappOwnIntlEnabled, getSubappOwnIntlTag } from './subappOwnIntl';
+
+/**
+ * 子应用统一国际化 Hook：
+ * - 配置了 {@link getSubappIntlInitOptions} 时：优先独立 intl 实例的 `i18n`，无命中再 Umi
+ * - 否则与 layout `useLayoutIntl` 一致：未启用 commonIntl 时仅 Umi；启用后包内 `i18n` 优先，无命中再 Umi
+ */
+export function useSubappIntl() {
+  const umiIntl = useIntl();
+  const commonIntlEnabled = isCommonIntlEnabled();
+  const locale = getSubappCurrentLocale();
+  const subappOwnIntl = isSubappOwnIntlEnabled();
+  const ownI18n = getSubappOwnI18n();
+  const subappOwnIntlTag = getSubappOwnIntlTag();
+
+  const formatMessage = (
+    descriptor: { id: string; defaultMessage?: string },
+    values?: Record<string, string | number | boolean | Date | null | undefined>,
+  ): string => {
+    const dm = descriptor.defaultMessage ?? descriptor.id;
+    const fromUmi = umiIntl.formatMessage(descriptor, values);
+
+    if (subappOwnIntl && ownI18n) {
+      const fromOwn = ownI18n({
+        key: descriptor.id,
+        defaultMessage: dm,
+      });
+      if (fromOwn === dm && fromUmi !== fromOwn) {
+        return fromUmi;
+      }
+      return fromOwn;
+    }
+
+    if (!commonIntlEnabled) {
+      return fromUmi;
+    }
+
+    const fromIntl = i18n({
+      key: descriptor.id,
+      defaultMessage: dm,
+    });
+    if (fromIntl === dm && fromUmi !== fromIntl) {
+      return fromUmi;
+    }
+    return fromIntl;
+  };
+
+  return {
+    commonIntlEnabled,
+    formatMessage,
+    locale,
+    /** 是否启用子应用内独立 initIntl 配置 */
+    subappOwnIntl,
+    /** 独立 intl 的 tag（仅 subappOwnIntl 为 true 时有值） */
+    subappOwnIntlTag,
+  };
+}

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

@@ -0,0 +1,80 @@
+/**
+ * 语言管理（与主应用 layout `umi_locale` 规则一致：URL > localStorage > 浏览器）
+ * 独立运行子应用时使用；qiankun 下 {@link getSubappCurrentLocale} 优先主应用 props.locale
+ */
+
+const LOCALE_STORAGE_KEY = 'umi_locale';
+const URL_PARAM_KEY = 'lang';
+
+export const SUPPORTED_LOCALES = ['zh-CN', 'en-US'] as const;
+export type SupportedLocale = (typeof SUPPORTED_LOCALES)[number];
+
+export const LOCALE = {
+  ZH_CN: 'zh-CN',
+  EN_US: 'en-US',
+} as const;
+
+const DEFAULT_LOCALE: SupportedLocale = 'en-US';
+
+function getLocaleFromUrl(): string | null {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  const urlParams = new URLSearchParams(window.location.search);
+  return urlParams.get(URL_PARAM_KEY);
+}
+
+function getLocaleFromStorage(): string | null {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  try {
+    return localStorage.getItem(LOCALE_STORAGE_KEY);
+  } catch {
+    return null;
+  }
+}
+
+function getBrowserLocale(): SupportedLocale {
+  if (typeof window === 'undefined') {
+    return DEFAULT_LOCALE;
+  }
+  const browserLang = navigator.language || (navigator as { userLanguage?: string }).userLanguage;
+  const locales = [...SUPPORTED_LOCALES];
+  if (locales.includes(browserLang as SupportedLocale)) {
+    return browserLang as SupportedLocale;
+  }
+  const langPrefix = browserLang.split('-')[0];
+  const matchedLocale = 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] as string[]).includes(locale);
+}
+
+export function getCurrentLocale(): SupportedLocale {
+  const urlLocale = getLocaleFromUrl();
+  if (isValidLocale(urlLocale)) {
+    return urlLocale;
+  }
+  const storageLocale = getLocaleFromStorage();
+  if (isValidLocale(storageLocale)) {
+    return storageLocale;
+  }
+  return getBrowserLocale();
+}
+
+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);
+  }
+}

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

@@ -3,6 +3,8 @@
  * @description 存储和获取主应用传递的 props
  */
 
+import { useSyncExternalStore } from 'react';
+
 /**
  * 主应用传递的 props 类型定义
  */
@@ -13,17 +15,56 @@ export interface IMicroAppProps {
   request?: <T = any>(url: string, options?: any) => Promise<T>;
   /** 当前路由路径（由主应用传递，用于子应用内部路由切换） */
   routePath?: string;
+  /** 当前语言（与主应用 getCurrentLocale 一致，如 zh-CN / en-US），供国际化与 common-intl 对齐 */
+  locale?: string;
+  /**
+   * 按钮权限列表（与主应用 fetchUserInfo.button_perms 一致，由主应用 MicroAppLoader 注入）
+   */
+  button_perms?: string[];
+  /** 是否超级用户（与主应用用户信息一致） */
+  is_superuser?: boolean;
 }
 
 /** 存储主应用传递的 props */
 let mainAppProps: IMicroAppProps | null = null;
 
+const propsListeners = new Set<() => void>();
+
+const notifyPropsListeners = (): void => {
+  propsListeners.forEach((listener) => listener());
+};
+
+/**
+ * 订阅主应用 props 变更（qiankun update 时触发，供 PermissionFilter 等订阅刷新）
+ */
+export const subscribeMainAppProps = (listener: () => void): (() => void) => {
+  propsListeners.add(listener);
+  return () => propsListeners.delete(listener);
+};
+
 /**
  * 设置主应用 props（由 qiankun 生命周期调用）
  * @internal
  */
 export const setMainAppProps = (props: IMicroAppProps | null) => {
   mainAppProps = props;
+  notifyPropsListeners();
+};
+
+/**
+ * 获取当前主应用注入的 props（非 React 场景）
+ */
+export const getMainAppProps = (): IMicroAppProps | null => mainAppProps;
+
+/**
+ * React Hook：订阅主应用 props，与 qiankun update 同步
+ */
+export const useMainAppProps = (): IMicroAppProps | null => {
+  return useSyncExternalStore(
+    subscribeMainAppProps,
+    () => mainAppProps,
+    () => null,
+  );
 };
 
 /**
@@ -51,5 +92,3 @@ export const isRunningInQiankun = () => !!mainAppProps;
  * 获取主应用标识
  */
 export const getMainAppName = () => mainAppProps?.mainApp;
-
-

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

@@ -0,0 +1,48 @@
+import { type IMicroAppProps, useMainAppProps } from '@/common/mainApp';
+import React from 'react';
+
+export interface IPermissionFilterProps {
+  /** 按钮/操作权限标识，需在主应用传入的 `button_perms` 中 */
+  permissionKey: string;
+  children?: React.ReactNode;
+  /** 无权限时渲染内容；不传则渲染 null */
+  fallback?: React.ReactNode;
+}
+
+const isSuperuserUser = (value?: boolean | number): boolean => {
+  return value === true || value === 1;
+};
+
+function hasButtonPermission(
+  permissionKey: string,
+  props: IMicroAppProps | null,
+): boolean {
+  if (!permissionKey?.trim()) {
+    return false;
+  }
+  if (isSuperuserUser(props?.is_superuser)) {
+    return true;
+  }
+  const buttonPerms = props?.button_perms ?? [];
+  return buttonPerms.includes(permissionKey);
+}
+
+/**
+ * 按主应用通过 qiankun 传入的 `button_perms` / `is_superuser` 判断是否渲染子节点。
+ * 独立运行子应用时无主应用 props，默认无按钮权限。
+ */
+const PermissionFilter: React.FC<IPermissionFilterProps> = ({
+  permissionKey,
+  children,
+  fallback = null,
+}) => {
+  const mainProps = useMainAppProps();
+  const allowed = hasButtonPermission(permissionKey, mainProps);
+
+  if (!allowed) {
+    return <>{fallback}</>;
+  }
+  return <>{children}</>;
+};
+
+export default PermissionFilter;

package/generators/subapp-react/templates/homepage/src/locales/en-US.ts

@@ -0,0 +1,6 @@
+export default {
+  'page.subapp.home.demoSectionTitle': 'i18n demo',
+  'page.subapp.home.title': 'Subapp home',
+  'page.subapp.home.umiOnly':
+    'Fallback copy provided only in subapp Umi locales',
+};

package/generators/subapp-react/templates/homepage/src/locales/zh-CN.ts

@@ -0,0 +1,6 @@
+export default {
+  'page.subapp.home.demoSectionTitle': '国际化示例',
+  'page.subapp.home.title': '子应用首页',
+  /** 仅存在于子应用 locales，用于演示 intl 无该 key 时走 Umi 兜底 */
+  'page.subapp.home.umiOnly': '仅子应用 Umi locales 提供的兜底文案',
+};

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

@@ -28,6 +28,16 @@
     margin-bottom: @spacing-lg;
   }
 
+  &-intl-hint {
+    margin-bottom: @spacing-sm;
+    color: @color-text-2;
+  }
+
+  &-intl-meta {
+    font-size: @font-size-sm;
+    margin-top: @spacing-md;
+  }
+
   &-card {
     padding: @card-padding;
     // 卡片背景色 - 使用 color-text-5（亮色模式为白色）