generator-mico-cli 0.2.1 → 0.2.2-8.beta.1

package/generators/micro-react/templates/apps/layout/config/config.prod.development.ts

@@ -1,43 +1,38 @@
 // https://umijs.org/config/
 
 import { defineConfig } from '@umijs/max';
-import fs from 'fs';
-import path from 'path';
+// 开发环境，不上传 sourcemap。调试时如有需要再解开
+// import { applySentryPlugin } from "../../../scripts/apply-sentry-plugin";
+const { CDN_PUBLIC_PATH } = process.env;
 
-// 使用 fs 读取 JSON 避免成为配置依赖，修改 menus.json 不会触发服务器重启
-const mockMenus = JSON.parse(
-  fs.readFileSync(path.join(__dirname, '../mock/menus.json'), 'utf-8'),
-);
+const PUBLIC_PATH: string = CDN_PUBLIC_PATH
+  ? `${CDN_PUBLIC_PATH.replace(/\/?$/, '/')}layout/`
+  : '/layout/';
 
 const config: ReturnType<typeof defineConfig> = {
-  publicPath: '/',
-  /**
-   * @name 注入到 HTML head 的脚本
-   * @description 开发环境注入 mock 菜单数据
-   * @doc https://umijs.org/docs/api/config#headscripts
-   */
-  headScripts: [
-    {
-      content: `
-        window.__MICO_MENUS__ = ${JSON.stringify(mockMenus)};
-        window.__MICO_CONFIG__ = {
-          appName: 'Mico Center',
-          apiBaseUrl: '',
-        };
-      `,
-    },
-  ],
+  // 开发环境，不上传 sourcemap。调试时如有需要再解开
+  // devtool: 'hidden-source-map',
+
+  // chainWebpack(memo) {
+  //   // 开发环境，不上传 sourcemap。调试时如有需要再解开
+  //   applySentryPlugin({ memo, appName: 'layout' });
+  //   return memo;
+  // },
+
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    '@common-web/sentry': 'CommonWebSentry',
+  },
+  publicPath: PUBLIC_PATH,
+  cssPublicPath: PUBLIC_PATH,
   define: {
     'process.env.NODE_ENV': 'development',
-    'process.env.APP_ID': 'mibot_dev',
     'process.env.API_BASE_URL': 'https://dashboard-api-test.micoplatform.com',
-    'process.env.PROXY_SUFFIX': '/',
     'process.env.LOGIN_ENDPOINT':
-      '',
+      'https://dashboard-api-test.micoplatform.com/api/yufu_login/',
     'process.env.REFRESH_ENDPOINT':
-      '',
-    'process.env.EXTERNAL_LOGIN_PATH':
-      '',
+      'https://dashboard-api-test.micoplatform.com/api/yufu_login/refresh/',
   },
 };
 

package/generators/micro-react/templates/apps/layout/config/config.prod.testing.ts

@@ -1,19 +1,38 @@
 // https://umijs.org/config/
 
 import { defineConfig } from '@umijs/max';
+// 测试环境，不上传 sourcemap。调试时如有需要再解开
+// import { applySentryPlugin } from "../../../scripts/apply-sentry-plugin";
+const { CDN_PUBLIC_PATH } = process.env;
+
+const PUBLIC_PATH: string = CDN_PUBLIC_PATH
+  ? `${CDN_PUBLIC_PATH.replace(/\/?$/, '/')}layout/`
+  : '/layout/';
 
 const config: ReturnType<typeof defineConfig> = {
+  // 测试环境，不上传 sourcemap。调试时如有需要再解开
+  // devtool: 'hidden-source-map',
+
+  // chainWebpack(memo) {
+  //   // 测试环境，不上传 sourcemap。调试时如有需要再解开
+  //   applySentryPlugin({ memo, appName: 'layout' });
+  //   return memo;
+  // },
+
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    '@common-web/sentry': 'CommonWebSentry',
+  },
+  publicPath: PUBLIC_PATH,
+  cssPublicPath: PUBLIC_PATH,
   define: {
     'process.env.NODE_ENV': 'testing',
-    'process.env.APP_ID': 'mibot',
     'process.env.API_BASE_URL': 'https://dashboard-api-test.micoplatform.com',
-    'process.env.PROXY_SUFFIX': '/',
     'process.env.LOGIN_ENDPOINT':
-      '',
+      'https://dashboard-api-test.micoplatform.com/api/yufu_login/',
     'process.env.REFRESH_ENDPOINT':
-      '',
-    'process.env.EXTERNAL_LOGIN_PATH':
-      '',
+      'https://dashboard-api-test.micoplatform.com/api/yufu_login/refresh/',
   },
 };
 

package/generators/micro-react/templates/apps/layout/config/config.prod.ts

@@ -1,6 +1,7 @@
 // https://umijs.org/config/
 
 import { defineConfig } from '@umijs/max';
+import { applySentryPlugin } from '../../../scripts/apply-sentry-plugin';
 const { CDN_PUBLIC_PATH } = process.env;
 
 const PUBLIC_PATH: string = CDN_PUBLIC_PATH
@@ -8,30 +9,38 @@ const PUBLIC_PATH: string = CDN_PUBLIC_PATH
   : '/layout/';
 
 const config: ReturnType<typeof defineConfig> = {
+  /**
+   * 启用 Source Map（用于 Sentry 错误追踪）
+   * hidden-source-map 会生成 .map 文件但不在 JS 中添加 sourcemap 注释
+   */
+  devtool: 'hidden-source-map',
   define: {
     'process.env.NODE_ENV': 'production',
-    'process.env.APP_ID': 'mibot',
     'process.env.API_BASE_URL': 'https://dashboard-api.micoplatform.com',
-    'process.env.PROXY_SUFFIX': '/',
     'process.env.LOGIN_ENDPOINT':
-      '',
+      'https://dashboard-api.micoplatform.com/api/yufu_login/',
     'process.env.REFRESH_ENDPOINT':
-      '',
-    'process.env.EXTERNAL_LOGIN_PATH':
-      '',
+      'https://dashboard-api.micoplatform.com/api/yufu_login/refresh/',
+  },
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    '@common-web/sentry': 'CommonWebSentry',
   },
   // 生产环境：将所有代码打包到一个文件
   extraBabelPlugins: ['babel-plugin-dynamic-import-node'],
 
   // 禁用代码分割，只输出一个 JS 和一个 CSS
-  chainWebpack(memo) {
+  chainWebpack(memo: any) {
     // 禁用 splitChunks
     memo.optimization.splitChunks(false);
     // 禁用 runtimeChunk
     memo.optimization.runtimeChunk(false);
+    applySentryPlugin({ memo, appName: 'layout' });
     return memo;
   },
   publicPath: PUBLIC_PATH,
+  cssPublicPath: PUBLIC_PATH,
 };
 
 export default defineConfig(config);

package/generators/micro-react/templates/apps/layout/config/config.ts

@@ -16,7 +16,7 @@ const config: ReturnType<typeof defineConfig> = {
    * @description React 应用挂载的 DOM 元素 id
    * @doc https://umijs.org/docs/api/config#mountelementid
    */
-  mountElementId: '<%= projectName %>',
+  mountElementId: 'root',
 
   /**
    * @name 开启 hash 模式
@@ -36,7 +36,7 @@ const config: ReturnType<typeof defineConfig> = {
 
   /**
    * @name Less 配置
-   * @description 全局导入 Arco Design 主题变量
+   * @description 主题变量由 @mico-platform/theme 提供，在 global.less 中导入
    */
   lessLoader: {
     modifyVars: {},
@@ -77,7 +77,7 @@ const config: ReturnType<typeof defineConfig> = {
 
   /**
    * @name layout 插件
-   * @description 禁用内置 layout，使用自定义 Arco Design 布局
+   * @description 禁用内置 layout，使用自定义 @mico-platform/ui 布局
    * @doc https://umijs.org/docs/max/layout-menu
    */
   layout: false,
@@ -89,7 +89,8 @@ const config: ReturnType<typeof defineConfig> = {
   locale: {
     default: 'zh-CN',
     antd: false,
-    baseNavigator: true,
+    // 禁用浏览器语言自动检测，由运行时 getLocale 统一处理
+    baseNavigator: false,
   },
 
   /**
@@ -98,6 +99,7 @@ const config: ReturnType<typeof defineConfig> = {
    */
   mock: {
     include: ['mock/**/_mock.ts', 'mock/**/*.mock.ts', 'src/pages/**/_mock.ts'],
+    exclude: ['mock/**/menus.ts'],
   },
 
   /**
@@ -116,6 +118,27 @@ const config: ReturnType<typeof defineConfig> = {
    */
   tailwindcss: {},
 
+  /**
+   * @name 额外 Babel Presets
+   * @description 使用 @mico-platform/ui 的 babel preset，实现组件与图标的按需加载
+   */
+  extraBabelPresets: ['@mico-platform/ui/babel-preset'],
+
+  /**
+   * @name MFSU 配置
+   * @description
+   * - exclude: theme 子路径解析；ui 尽量与主应用一起编译
+   * - shared: React 单例，确保 MFSU 预打包里的组件（如 Layout）与主应用共用同一份 React，否则 useContext 报 null
+   * @doc https://umijs.org/docs/guides/mfsu
+   */
+  mfsu: {
+    exclude: ['@mico-platform/theme', '@mico-platform/ui'],
+    shared: {
+      react: { singleton: true },
+      'react-dom': { singleton: true },
+    },
+  },
+
   /**
    * @name qiankun 微前端配置
    * @description 作为主应用，动态加载子应用

package/generators/micro-react/templates/apps/layout/config/routes.ts

@@ -5,11 +5,6 @@
  * @note Umi Max 会自动使用 src/layouts/index.tsx 作为全局布局，无需显式配置
  */
 export default [
-  {
-    path: '/user/login',
-    component: './User/Login',
-    name: '登录',
-  },
   {
     path: '/',
     component: './Home',
@@ -20,4 +15,9 @@ export default [
     component: './403',
     name: '无权限',
   },
+  {
+    path: '/*',
+    component: './404',
+    name: '页面不存在',
+  },
 ];

package/generators/micro-react/templates/apps/layout/docs/arch-/346/227/245/345/277/227/344/270/216/345/270/270/351/207/217.md

@@ -37,7 +37,7 @@ const createLogger = (prefix: string) => ({
 
 ## 常量定义
 
-集中管理魔法字符串，位于 `src/common/constants.ts`。
+集中管理魔法字符串，位于 `src/constants/index.ts`。
 
 ### ROUTES
 
@@ -95,7 +95,7 @@ export const STORAGE_KEYS = {
 | 文件                                 | 说明          |
 | ------------------------------------ | ------------- |
 | `src/common/logger.ts`               | Logger 工具   |
-| `src/common/constants.ts`            | 常量定义      |
+| `src/constants/index.ts`             | 常量定义      |
 | `apps/homepage/src/common/logger.ts` | 子应用 Logger |
 
 ## 注意事项

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

@@ -0,0 +1,372 @@
+# 通用国际化库使用指南
+
+## 概述
+
+`<%= 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),
+    })),
+  [],
+);
+```