generator-mico-cli 0.2.29 → 0.2.30

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

@@ -15,6 +15,8 @@ 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 注入）
    */

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（亮色模式为白色）

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

@@ -1,4 +1,5 @@
 import PermissionFilter from '@/components/PermissionFilter';
+import { useSubappIntl } from '@/common/intl';
 import { getRequestSource, request } from '@/common/request';
 import {
   Alert,
@@ -55,6 +56,14 @@ interface IListItem {
  * 4. Less 变量自动适配主应用的主题切换
  */
 export default function HomePage() {
+  const {
+    formatMessage,
+    commonIntlEnabled,
+    locale,
+    subappOwnIntl,
+    subappOwnIntlTag,
+  } = useSubappIntl();
+
   const [loading, setLoading] = useState(false);
   const [userInfo, setUserInfo] = useState<IUserInfo | null>(null);
   const [stats, setStats] = useState<IStatsData | null>(null);
@@ -144,6 +153,48 @@ export default function HomePage() {
 
       <Divider />
 
+      <Card
+        title={formatMessage({
+          id: 'page.subapp.home.demoSectionTitle',
+          defaultMessage: '国际化示例',
+        })}
+        style={{ marginBottom: 16 }}
+      >
+        <Title heading={4}>
+          {formatMessage({
+            id: 'page.subapp.home.title',
+            defaultMessage: '子应用首页',
+          })}
+        </Title>
+        <Paragraph className="subapp-intl-hint">
+          common-intl 优先样例(使用主应用的tag)：
+          {formatMessage({
+            id: 'cs_web_workbench_userlist_chat',
+            defaultMessage: '看到该文案代表未启用 主应用commonIntl 或中台无该 key',
+          })}
+        </Paragraph>
+        <Paragraph className="subapp-intl-hint">
+          common-intl 优先样例(使用子应用的tag)：
+          {formatMessage({
+            id: 'sdk_h5_ticket_you_can_leave_us_a_message_we_will_reply_within_24_hours',
+            defaultMessage: '看到该文案代表未启用 子应用commonIntl 或中台无该 key',
+          })}
+        </Paragraph>
+        <Paragraph className="<%= appName %>-intl-hint">
+          仅子应用 locales 的 key（intl 通常无该 key）：
+          {formatMessage({
+            id: 'page.subapp.home.umiOnly',
+            defaultMessage: '若仍见此默认文案，请检查 locales 是否注册该 id',
+          })}
+        </Paragraph>
+        <Paragraph type="secondary" className="<%= appName %>-intl-meta">
+          commonIntlEnabled: {String(commonIntlEnabled)} · locale: {locale}
+          {subappOwnIntl
+            ? ` · subappOwnIntl: true · tag: ${subappOwnIntlTag ?? '-'}`
+            : ' · subappOwnIntl: false'}
+        </Paragraph>
+      </Card>
+
       {/* 请求示例 */}
       <Spin loading={loading} style={{ display: 'block' }}>
         <Card

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

@@ -87,6 +87,18 @@ declare global {
     __MICO_CONFIG__?: {
       appName?: string;
       apiBaseUrl?: string;
+      /** 多语言中台（与 commonIntl 二选一字段名，见 common-intl intlRuntime） */
+      intl?: {
+        tag: string;
+        app_name: string;
+        indexedDBParams?: { dbName?: string };
+      };
+      /** 多语言中台保底配置（可选）；与 packages/common-intl README、子应用可选 intl 模块配合 */
+      commonIntl?: {
+        tag: string;
+        app_name: string;
+        indexedDBParams?: { dbName?: string };
+      };
       [key: string]: unknown;
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-mico-cli",
-  "version": "0.2.29",
+  "version": "0.2.30",
   "description": "Yeoman generator for Mico CLI projects",
   "keywords": [
     "yeoman-generator",