generator-mico-cli 0.2.28 → 0.2.30

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

@@ -1,3 +1,5 @@
+import PermissionFilter from '@/components/PermissionFilter';
+import { useSubappIntl } from '@/common/intl';
 import { getRequestSource, request } from '@/common/request';
 import {
   Alert,
@@ -54,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);
@@ -143,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
@@ -265,6 +317,39 @@ export default function HomePage() {
         </Card>
       </Spin>
 
+      {/* PermissionFilter：按主应用传入的 button_perms 控制展示 */}
+      <Card title="🔐 PermissionFilter 按钮权限示例" style={{ marginBottom: 16 }}>
+        <Paragraph>
+          子应用通过 qiankun 接收主应用注入的{' '}
+          <Text code>button_perms</Text> / <Text code>is_superuser</Text>。
+          仅当权限匹配（或超级用户）时渲染 <Text code>children</Text>，否则渲染{' '}
+          <Text code>fallback</Text>。
+        </Paragraph>
+        <Paragraph type="secondary" style={{ marginBottom: 12 }}>
+          示例 permissionKey 为 <Text code>cs_web_btn_subapp_demo</Text>
+          。嵌入主应用时，需在主应用用户信息接口的{' '}
+          <Text code>button_perms</Text> 中包含该标识；独立运行子应用时无主应用
+          props，将始终走 fallback。
+        </Paragraph>
+        <PermissionFilter
+          permissionKey="cs_web_btn_subapp_demo"
+          fallback={
+            <Alert
+              type="warning"
+              title="无权限"
+              content="未在 button_perms 中包含 cs_web_btn_subapp_demo，或为独立运行子应用。"
+            />
+          }
+        >
+          <Space>
+            <Button type="primary" status="success">
+              有权限时可见的操作
+            </Button>
+            <Text type="success">（当前用户具备该按钮权限）</Text>
+          </Space>
+        </PermissionFilter>
+      </Card>
+
       {/* @mico-platform/ui 组件示例 */}
       <Card title="📦 @mico-platform/ui 组件" style={{ marginBottom: 16 }}>
         <Paragraph>
@@ -363,7 +448,7 @@ export default function HomePage() {
         <Alert
           type="info"
           title="依赖共享"
-          content="通过 externals 配置，子应用复用主应用的 React 和 @mico-platform/ui，打包体积减少 ~1MB"
+          content="通过 externals 配置，子应用复用主应用的 React、@mico-platform/ui 和 common-intl 包（含多语言文案数据），打包体积减少 ~1MB"
         />
         <Alert
           type="success"

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/lib/utils.js

@@ -376,7 +376,6 @@ async function runDoctorChecks() {
   const results = {
     node: checkNodeVersion('18'),
     pnpm: checkCommand('pnpm'),
-    yo: checkCommand('yo'),
     git: checkCommand('git'),
     npm: null
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-mico-cli",
-  "version": "0.2.28",
+  "version": "0.2.30",
   "description": "Yeoman generator for Mico CLI projects",
   "keywords": [
     "yeoman-generator",
@@ -30,7 +30,6 @@
     "@biomejs/biome": "^1.9.4",
     "husky": "^9.1.7",
     "vitest": "^4.0.18",
-    "yeoman-environment": "^3.19.3",
     "yeoman-test": "^6.3.0"
   },
   "engines": {
@@ -39,6 +38,7 @@
   "dependencies": {
     "semver": "^7.6.3",
     "update-notifier": "^7.3.1",
+    "yeoman-environment": "^3.19.3",
     "yeoman-generator": "^5.9.0"
   }
 }

package/generators/micro-react/templates/apps/layout/docs/common-intl.md

@@ -1,372 +0,0 @@
-# 通用国际化库使用指南
-
-## 概述
-
-`<%= packageScope %>/common-intl` 是 Portal 项目的通用国际化（i18n）库，用于管理多语言文案，支持从多语言中台拉取翻译数据。
-
-## 适用场景
-
-- 应用需要支持多语言切换（中文、英文、阿拉伯语、土耳其语等）
-- 需要从多语言中台动态获取翻译文案
-- 希望统一管理国际化逻辑，减少重复代码
-
-> **注意**：本文档描述的是 `@payment-portal/common-intl` 包的完整使用方式，涵盖了所有使用该包的应用（包括本仓库外的应用如 conversation-v2、session、workorder 等）。当前仓库仅包含 `layout` 和 `basis` 两个应用。
-
-## 核心特性
-
-| 特性       | 说明                                             |
-| ---------- | ------------------------------------------------ |
-| 跨端兼容   | 通过外部注入 `messageInstance`，适配不同 UI 框架 |
-| 离线缓存   | 支持 IndexedDB + 内存双重缓存                    |
-| 插值替换   | 支持 `%AA%`、`%BB%` 等动态占位符                 |
-| 降级兜底   | 翻译缺失时自动返回默认文案                       |
-| 微前端共享 | 主应用获取文案后，子应用可直接使用               |
-
-## 两种使用模式
-
-根据应用架构的不同，`<%= packageScope %>/common-intl` 支持两种使用模式：
-
-| 模式         | 适用场景                                         | 示例应用                                                     |
-| ------------ | ------------------------------------------------ | ------------------------------------------------------------ |
-| 微前端模式   | qiankun 主子应用架构，主应用获取文案后子应用共享 | layout、conversation-v2、session、workorder、faq、permission |
-| 独立应用模式 | 独立运行的应用，自己获取和管理文案               | mico-cs-mobile                                               |
-
-### 微前端模式
-
-在 qiankun 微前端架构中，**主应用负责获取文案**，子应用直接使用共享的文案对象，无需重复初始化。
-
-**工作原理**：
-
-- 主应用调用 `initIntl()` 获取远程文案
-- 文案数据存储到 `window.__MICO_COMMON_INTL_TRANSLATIONS__`
-- 子应用直接使用 `intl` 对象，自动从 window 读取共享数据
-
-```
-┌─────────────────────────────────────────────────────────────┐
-│                    apps/layout（主应用）                      │
-│  ┌─────────────────────────────────────────────────────────┐│
-│  │ initIntl() → 请求远程文案 → 存储到 window 对象           ││
-│  └─────────────────────────────────────────────────────────┘│
-└─────────────────────────────────────────────────────────────┘
-                              ↓
-        ┌─────────────────────┼─────────────────────┐
-        ↓                     ↓                     ↓
-┌───────────────┐   ┌───────────────┐   ┌───────────────┐
-│ conversation  │   │    session    │   │   workorder   │
-│   子应用      │   │    子应用     │   │    子应用     │
-│ import {intl} │   │ import {intl} │   │ import {intl} │
-│ 直接使用      │   │ 直接使用      │   │ 直接使用      │
-└───────────────┘   └───────────────┘   └───────────────┘
-```
-
-**主应用配置（apps/layout/src/app.tsx）**：
-
-```typescript
-import {
-  getCurrentLocale,
-  initIntl,
-  type ILang,
-} from "<%= packageScope %>/common-intl";
-import { Message } from "@mico-platform/ui";
-import { request } from "@umijs/max";
-
-// 初始化国际化模块
-const fetchMultilingualData = initIntl({
-  requestInstance: request,
-  messageInstance: {
-    error: (msg: string) => Message.error(msg),
-    warning: (msg: string) => Message.warning(msg),
-  },
-  fetchMultilingualDataParams: {
-    tag: "cs_fe_pc",
-    lang: getCurrentLocale() as ILang,
-    app_name: "middle",
-  },
-  indexedDBParams: {
-    dbName: "mico_cs_web_i18n_db",
-  },
-});
-
-// 在应用渲染前加载多语言数据
-export function render(oldRender: () => void): void {
-  fetchMultilingualData()
-    .then(oldRender)
-    .catch((error: Error) => {
-      console.error("获取多语言文案失败", error);
-      oldRender(); // 失败时继续渲染，使用兜底文案
-    });
-}
-```
-
-**子应用使用（无需初始化）**：
-
-```typescript
-// apps/conversation-v2、apps/session、apps/workorder 等子应用
-import { intl } from "<%= packageScope %>/common-intl";
-
-// 直接使用，文案来自主应用
-<h1>{intl.cs_web_workbench_conversation_record()}</h1>;
-```
-
-### 独立应用模式
-
-对于非 qiankun 架构的独立应用（如 H5 应用），需要自己调用 `initIntl()` 获取文案，并维护独立的文案文件。
-
-**独立应用配置（apps/mico-cs-mobile/src/app.ts）**：
-
-```typescript
-import { initIntl } from "<%= packageScope %>/common-intl";
-import { Toast } from "@arco-design/mobile-react";
-import { request } from "@umijs/max";
-import { convertLocaleToLangParam } from "./locales/utils";
-import { getSearchParams } from "@/common/jsbridge/jsbridge";
-
-// 初始化国际化模块
-const fetchMultilingualData = initIntl({
-  requestInstance: request,
-  messageInstance: {
-    error: (msg: string) => Toast.error(msg),
-    warning: (msg: string) => Toast.warn(msg),
-  },
-  fetchMultilingualDataParams: {
-    tag: "cs_fe_mobile", // 独立应用使用不同的 tag
-    lang: convertLocaleToLangParam(getSearchParams().language as string),
-    app_name: "middle",
-  },
-  indexedDBParams: {
-    dbName: "mico_cs_mobile_i18n_db",
-  },
-});
-
-export function render(oldRender: () => void): void {
-  fetchMultilingualData()
-    .then(oldRender)
-    .catch((error: Error) => {
-      console.error("获取多语言文案失败", error);
-      oldRender();
-    });
-}
-```
-
-**独立应用的文案文件（apps/mico-cs-mobile/src/locales/index.ts）**：
-
-```typescript
-import { i18n } from "<%= packageScope %>/common-intl";
-
-const intl = {
-  sdk_h5_ticket_record: () =>
-    i18n({
-      key: "sdk_h5_ticket_record",
-      defaultMessage: "工单记录",
-    }),
-  // ... 其他文案
-};
-
-export default intl;
-```
-
-**在组件中使用**：
-
-```typescript
-import intl from "@/locales";
-
-<h1>{intl.sdk_h5_ticket_record()}</h1>;
-```
-
-## 导出 API
-
-`<%= packageScope %>/common-intl` 提供以下导出：
-
-| 导出                 | 类型 | 说明                                                      |
-| -------------------- | ---- | --------------------------------------------------------- |
-| `initIntl`           | 函数 | 初始化国际化模块，返回 `fetchMultilingualData` 函数       |
-| `i18n`               | 函数 | 翻译函数，用于获取单条翻译文案                            |
-| `intl`               | 对象 | PC 端主子应用共享的文案对象（仅供 layout 及其子应用使用） |
-| `LANG`               | 常量 | 支持的语言常量：`ZH_CN`、`EN`、`AR`、`TR`                 |
-| `LOCALE`             | 常量 | `LANG` 的别名，用于兼容                                   |
-| `SUPPORTED_LOCALES`  | 常量 | 支持的语言列表数组                                        |
-| `getCurrentLocale`   | 函数 | 获取当前语言环境（按优先级：URL > localStorage > 浏览器） |
-| `setLocaleToStorage` | 函数 | 设置语言到 localStorage                                   |
-| `ILang`              | 类型 | 语言类型定义                                              |
-| `TLocale`            | 类型 | `ILang` 的别名，用于兼容                                  |
-
-### 导入示例
-
-```typescript
-// 微前端子应用 - 直接使用共享的 intl 对象
-import { intl } from "<%= packageScope %>/common-intl";
-intl.cs_web_common_request_failed();
-
-// 独立应用 - 使用 i18n 函数构建自己的文案对象
-import { i18n, initIntl, LANG } from "<%= packageScope %>/common-intl";
-
-// 获取当前语言环境
-import { getCurrentLocale } from "<%= packageScope %>/common-intl";
-const currentLang = getCurrentLocale(); // 'zh_CN' | 'en' | 'ar' | 'tr'
-
-// 获取支持的语言列表
-import { SUPPORTED_LOCALES } from "<%= packageScope %>/common-intl";
-console.log(SUPPORTED_LOCALES); // ['zh_CN', 'en', 'ar', 'tr']
-```
-
-## 文案管理规则
-
-### PC 端主子应用
-
-- **文案位置**：[packages/common-intl/src/intl.ts](../packages/common-intl/src/intl.ts)
-- **使用方式**：`import { intl } from '<%= packageScope %>/common-intl'`
-- **适用应用**：
-  - apps/layout（主应用）
-  - apps/conversation-v2（工作台子应用）
-  - apps/session（服务记录子应用）
-  - apps/workorder（工单子应用）
-  - apps/faq（FAQ 子应用）
-  - apps/permission（权限管理子应用）
-  - packages/shared（公共包）
-
-### 独立应用（如 mico-cs-mobile）
-
-- **文案位置**：各应用自己的 `src/locales/index.ts`
-- **使用方式**：`import intl from '@/locales'`
-- **原因**：独立应用有自己的多语言标签（tag），文案独立管理
-
-### layout-crm 应用
-
-- **角色**：另一个主应用（类似 layout）
-- **使用方式**：使用 `getCurrentLocale`、`LOCALE` 等工具函数
-- **说明**：layout-crm 是独立的布局应用，可按需配置国际化初始化
-
-## 快速接入
-
-### 1. 添加依赖
-
-```json
-// apps/your-app/package.json
-{
-  "dependencies": {
-    "<%= packageScope %>/common-intl": "workspace:*"
-  }
-}
-```
-
-### 2. 根据模式选择接入方式
-
-**如果是 layout 的子应用**：
-
-- 无需调用 `initIntl()`
-- 直接使用 `import { intl } from '<%= packageScope %>/common-intl'`
-
-**如果是独立应用**：
-
-- 在 `app.ts` 中调用 `initIntl()` 并配置
-- 创建自己的国际化文案集中管理文件，如 `src/locales/index.ts`
-- 使用 `import intl from '@/locales'`
-
-## 语言优先级
-
-`getCurrentLocale()` 函数按以下优先级确定当前语言：
-
-1. **URL 参数**：`?lang=zh_CN`
-2. **localStorage**：`umi_locale` 键
-3. **浏览器默认语言**：`navigator.language`
-
-## 详细文档
-
-完整的 API 参考、类型定义和占位符规则，请参阅：
-
-- **[packages/common-intl/README.md](../packages/common-intl/README.md)**
-
-## 常见问题
-
-### Q: 微前端子应用需要调用 initIntl 吗？
-
-不需要。主应用（layout）负责初始化和获取文案，子应用直接使用共享的 `intl` 对象即可。
-
-### Q: 如何获取多语言中台的 `tag` 和 `app_name`？
-
-请联系多语言中台管理员，根据你的应用申请对应的配置参数。
-
-### Q: 翻译数据什么时候加载？
-
-推荐在 UmiJS 的 `render` 钩子中调用 `fetchMultilingualData()`，确保在应用渲染前完成加载。
-
-### Q: 如何添加新的翻译文案？
-
-1. 在多语言中台添加新的翻译 key 和对应的各语言翻译
-2. PC 端：在 `packages/common-intl/src/intl.ts` 中添加对应的函数
-3. 独立应用：在应用自己的 `src/locales/index.ts` 中添加
-4. 在代码中通过 `intl.xxx()` 调用
-
-### Q: IndexedDB 不可用怎么办？
-
-库会自动降级到内存缓存模式，不影响正常使用，但页面刷新后需要重新拉取数据。
-
-### Q: 主应用获取文案失败，子应用会怎样？
-
-会显示兜底文案（`defaultMessage`）。建议在定义文案时始终提供有意义的兜底文案。
-
-### Q: 如何切换语言？
-
-语言切换由主应用（layout）的 AvatarDropdown 组件处理，切换后会刷新页面重新加载对应语言的文案。
-
-### Q: 支持哪些语言？
-
-目前支持以下语言：
-
-| 语言常量      | 值      | 说明     |
-| ------------- | ------- | -------- |
-| `LANG.ZH_CN`  | `zh_CN` | 简体中文 |
-| `LANG.EN_US`  | `en`    | 英语     |
-| `LANG.AR_SA`  | `ar`    | 阿拉伯语 |
-| `LANG.TR_TR`  | `tr`    | 土耳其语 |
-
-### Q: 如何在代码中获取当前语言？
-
-```typescript
-import { getCurrentLocale } from "<%= packageScope %>/common-intl";
-
-const currentLang = getCurrentLocale();
-if (currentLang === "ar") {
-  // 处理阿拉伯语的 RTL 布局
-}
-```
-
-### Q: 模块级常量中使用 intl 时，为什么文案显示不正确？
-
-当在模块顶层定义常量时，`intl.xxx()` 会在模块加载时立即执行，此时多语言文案可能还未加载完成，导致显示兜底文案或空值。
-
-**错误示例**：
-
-```typescript
-// ❌ 模块加载时立即执行，此时文案可能未加载
-export const STATUS_TEXT = {
-  pending: intl.cs_web_status_pending(),
-  completed: intl.cs_web_status_completed(),
-};
-```
-
-**正确做法**：用函数包裹，延迟到运行时获取文案。
-
-```typescript
-// ✅ 函数形式，运行时调用才获取文案
-export const getStatusText = (status: TStatus): string => {
-  const map: Record<TStatus, string> = {
-    pending: intl.cs_web_status_pending(),
-    completed: intl.cs_web_status_completed(),
-  };
-  return map[status];
-};
-```
-
-**在组件中使用时**，如果需要构建选项列表，可用 `useMemo`：
-
-```tsx
-const options = useMemo(
-  () =>
-    Object.values(Status).map((status) => ({
-      value: status,
-      label: getStatusText(status),
-    })),
-  [],
-);
-```

package/generators/micro-react/templates/packages/common-intl/src/indexedDBUtils.ts

@@ -1,51 +0,0 @@
-/**
- * 检查当前环境是否支持 IndexedDB
- */
-export function isIndexedDBSupported(): boolean {
-  try {
-    return (
-      typeof window !== 'undefined' &&
-      'indexedDB' in window &&
-      window.indexedDB !== null
-    );
-  } catch {
-    return false;
-  }
-}
-
-/**
- * 打开 IndexedDB 数据库
- * @param dbName 数据库名称
- * @param dbVersion 数据库版本号
- * @param storeName 对象存储名称
- * @param keyPathKey keyPath 字段名，用于对象存储的主键索引
- * @param onUpgradeNeeded 数据库升级回调
- */
-export function openDatabase(
-  dbName: string,
-  dbVersion: number,
-  storeName: string,
-  keyPathKey?: string,
-  onUpgradeNeeded?: (database: IDBDatabase) => void,
-): Promise<IDBDatabase> {
-  return new Promise((resolve, reject) => {
-    const request = indexedDB.open(dbName, dbVersion);
-
-    request.onerror = () => {
-      reject(request.error);
-    };
-
-    request.onsuccess = () => {
-      resolve(request.result);
-    };
-
-    request.onupgradeneeded = (event) => {
-      const database = (event.target as IDBOpenDBRequest).result;
-      if (!database.objectStoreNames.contains(storeName)) {
-        const options = keyPathKey ? { keyPath: keyPathKey } : undefined;
-        database.createObjectStore(storeName, options);
-      }
-      onUpgradeNeeded?.(database);
-    };
-  });
-}