generator-mico-cli 0.2.31 → 0.2.32

package/generators/h5-react/templates/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "<%= projectName %>",
+  "version": "0.0.1",
+  "private": true,
+  "author": "<%= author %>",
+  "packageManager": "pnpm@10.18.2",
+  "scripts": {
+    "dev": "node scripts/dev.js",
+    "dev:preset": "node scripts/dev-preset.js",
+    "list:preset": "node scripts/dev-preset.js --list",
+    "dev:gateway": "dotenv -e .env -e .env.local -e .env.development -e .env.development.local -- node scripts/gateway.ts",
+    "build": "dotenv -e .env -e .env.local -e .env.production -e .env.production.local -- turbo run build && node scripts/collect-dist.js",
+    "build:development": "dotenv -e .env -e .env.local -e .env.development -e .env.development.local -- turbo run build:development ${TURBO_FILTER:+--filter=${TURBO_FILTER}} && node scripts/collect-dist.js",
+    "build:testing": "dotenv -e .env -e .env.local -e .env.testing -e .env.testing.local -- turbo run build:testing ${TURBO_FILTER:+--filter=${TURBO_FILTER}} && node scripts/collect-dist.js",
+    "build:production": "dotenv -e .env -e .env.local -e .env.production -e .env.production.local -- turbo run build:production ${TURBO_FILTER:+--filter=${TURBO_FILTER}} && node scripts/collect-dist.js",
+    "lint": "turbo run lint",
+    "lint:fix": "turbo run lint:fix",
+    "lint-staged": "lint-staged",
+    "prepare": "husky"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^20.5.0",
+    "@commitlint/config-conventional": "^20.5.0",
+    "@types/http-proxy": "^1.17.17",
+    "@types/mockjs": "^1.0.10",
+    "@types/node": "^20",
+    "chalk": "^5.6.2",
+    "dotenv-cli": "^11.0.0",
+    "eslint": "catalog:",
+    "http-proxy": "^1.18.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
+    "mockjs": "^1.1.0",
+    "portfinder": "^1.0.38",
+    "prettier": "^3.8.1",
+    "prettier-plugin-organize-imports": "^3.2.2",
+    "prettier-plugin-packagejson": "^2.4.3",
+    "stylelint": "catalog:",
+    "turbo": "^2.8.20",
+    "typescript": "^5",
+    "zod": "^4.3.6"
+  },
+  "pnpm": {
+    "overrides": {
+      "eslint": "catalog:",
+      "jiti": "^2"
+    },
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "eslint": "9",
+        "react": "18",
+        "react-dom": "18"
+      }
+    }
+  }
+}

package/generators/h5-react/templates/packages/common-intl/README.md

@@ -0,0 +1,180 @@
+# <%= packageScope %>/common-intl
+
+本包是 [`@common-web/common-intl`](https://gitlab-vywrajy.micoworld.net/micocenter/mico-portal/portal-center/common-web/-/blob/release/0.0.9/packages/common-intl/README.md) 的项目级封装：re-export 上游全部 API，并提供预配置的 **`init()`** 函数（自动绑定 `<%= packageScope %>/request`、`langBaseUrl`、`configureLocale`），子应用开箱即用。
+
+- **无构建步骤**：`package.json` 的 `exports` 直接指向 `./src/index.ts`（源码 TS），依赖方 dev / build 即可
+- 依赖：`@common-web/common-intl`、`<%= packageScope %>/domain`（`langBaseUrl`）、`<%= packageScope %>/request`（`request`）
+
+## 微前端模式
+
+在 qiankun 微前端架构中，**主应用负责获取文案**，子应用直接使用共享的文案对象，无需重复初始化。
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                  apps/layout（主应用）                     │
+│  initIntl() 绑定 tag → render() 中 fetchMultilingualData │
+│  → 文案存储到 window.__MICO_COMMON_INTL_TRANSLATIONS__    │
+└─────────────────────────────────────────────────────────┘
+                            ↓
+      ┌─────────────────────┼─────────────────────┐
+      ↓                     ↓                     ↓
+┌───────────┐         ┌───────────┐         ┌───────────┐
+│  子应用 A  │         │  子应用 B  │         │  子应用 C  │
+│ import {  │         │ import {  │         │ import {  │
+│   intl    │         │   intl    │         │   intl    │
+│ }         │         │ }         │         │ }         │
+│ 直接使用   │         │ 直接使用   │         │ 直接使用   │
+└───────────┘         └───────────┘         └───────────┘
+```
+
+## 快速开始（子应用推荐方式）
+
+`init()` 是本包提供的便捷入口，已预绑定 `<%= packageScope %>/request` 和 `langBaseUrl`，子应用只需提供 `tag` 和 `indexedDBParams`。
+
+### 1. 初始化 & 定义文案（`src/intl.ts`）
+
+```typescript
+import { addIntl, init } from '<%= packageScope %>/common-intl';
+
+const { fetchMultilingualData, i18n } = init({
+  tag: 'your_tag',          // 替换为多语言中台的标签
+  indexedDBParams: { dbName: 'i18n_your_tag' },
+});
+
+const intl = addIntl(
+  {
+    common_hello: () =>
+      i18n({ key: 'common_hello', defaultMessage: '你好' }),
+    common_welcome_aa: (name: string) =>
+      i18n({ key: 'common_welcome_aa', interpolations: [name], defaultMessage: `欢迎, ${name}` }),
+  },
+  i18n,
+);
+
+export { fetchMultilingualData };
+export default intl;
+```
+
+### 2. 首屏前加载文案（`src/app.tsx`）
+
+```typescript
+import { fetchMultilingualData } from '@/intl';
+
+export function render(oldRender: () => void) {
+  fetchMultilingualData()
+    .then(oldRender)
+    .catch((error: Error) => {
+      console.error('获取多语言文案失败', error);
+      oldRender();
+    });
+}
+```
+
+### 3. 业务组件中使用
+
+```typescript
+import intl from '@/intl';
+
+intl.common_hello();           // '你好'
+intl.common_welcome_aa('张三'); // '欢迎, 张三'
+```
+
+占位符为 `%AA%`、`%BB%`…，与 `interpolations` 数组顺序对应。
+
+## 主应用接入
+
+主应用（如 `apps/layout`）需要更多控制，可直接使用上游 `initIntl` + 完整参数的 `fetchMultilingualData`：
+
+```typescript
+import { fetchMultilingualData, getCurrentLocale, type ILang } from '<%= packageScope %>/common-intl';
+
+export function render(oldRender: () => void): void {
+  fetchMultilingualData({
+    requestInstance: commonRequest,
+    messageInstance: {
+      error: micoUI.Message.error,
+      warning: micoUI.Message.warning,
+    },
+    lang: getCurrentLocale() as ILang,
+    localeRequestUrl: process.env.LOCALE_REQUEST_URL,
+  })
+    .then(oldRender)
+    .catch((error: Error) => {
+      console.error('获取多语言文案失败', error);
+      oldRender();
+    });
+}
+```
+
+> **区别**：`init()` 返回的 `fetchMultilingualData()` 已预绑定 `requestInstance`、`messageInstance`、`lang`、`localeRequestUrl`，无需再传参；上游的 `fetchMultilingualData(params)` 需要手动传入全部运行时参数。
+
+## 子应用使用模式
+
+### 默认模式：共享主应用文案
+
+子应用默认与主应用共享同一个 `tag`，直接导入即可使用，**无需调用 `initIntl`**：
+
+```typescript
+import { intl } from '<%= packageScope %>/common-intl';
+
+intl.common_hello();
+```
+
+主应用通过 `window` 暴露 `<%= packageScope %>/common-intl`，子应用通过 `externals` 复用，不会重复打包。
+
+### 独立 tag 模式
+
+如果子应用需要使用**独立的多语言标签**（例如子应用有自己的多语言文案），直接依赖 `@common-web/common-intl`，在子应用内自行调用 `initIntl`，不需要经过本中转包：
+
+```typescript
+// apps/my-subapp/src/locales/index.ts
+import { initIntl, addIntl } from '@common-web/common-intl';
+
+const { fetchMultilingualData, i18n } = initIntl({
+  tag: 'my_subapp_tag',
+  app_name: 'middle',
+  indexedDBParams: { dbName: 'my_subapp_i18n_db' },
+});
+
+export { fetchMultilingualData };
+
+const intl = addIntl({
+  my_key: () => i18n({ key: 'my_key', defaultMessage: '我的文案' }),
+}, i18n);
+
+export default intl;
+```
+
+> `initIntl` 只管身份配置（tag、app_name、存储），`fetchMultilingualData` 管运行时依赖（请求实例、消息提示、语言、API 地址）。`i18n` 函数与 `tag` 绑定，不同 tag 的翻译数据互相隔离。
+
+## `init()` 内部行为
+
+`init(params)` 接收 `IInitIntlParams`（`app_name` 可选，默认 `<%= projectName %>`），执行：
+
+1. **`configureLocale`**：配置自定义 locale 获取/设置（H5 一般通过 JSBridge；默认模板返回 `'en'`，请按实际需求修改 `src/intl.ts` 中的 `getLocale` / `setLocale`）
+2. **`initIntl`**：绑定 `tag`、`app_name`、`indexedDBParams`
+3. 返回 **`fetchMultilingualData()`**（已绑定 `request` / `langBaseUrl` / 默认 `messageInstance`）和 **`i18n`**
+
+## 常见问题
+
+### Q: 子应用需要调用 initIntl 吗？
+
+默认不需要。主应用负责初始化和获取文案，子应用直接使用共享的 `intl` 对象。仅当子应用需要独立 tag 时才自行调用。
+
+### Q: 翻译数据什么时候加载？
+
+在 UmiJS 的 `render` 钩子中调用 `fetchMultilingualData()`，确保在应用渲染前完成加载。
+
+### Q: 如何添加新的翻译文案？
+
+在 `src/intl.ts` 的 `addIntl` 中添加对应的函数，然后在组件中通过 `intl.xxx()` 调用。
+
+### Q: 修改包内代码后需要构建吗？
+
+不需要。`exports` 直接指向源码 TS，依赖方重新 dev / build 即可生效。
+
+## 完整文档
+
+关于 `initIntl`、`fetchMultilingualData`、`i18n`、`addIntl` 的详细 API、类型定义、缓存策略、占位符规则等，请参阅：
+
+**[@common-web/common-intl README](https://gitlab-vywrajy.micoworld.net/micocenter/mico-portal/portal-center/common-web/-/blob/release/0.0.9/packages/common-intl/README.md)**

package/generators/h5-react/templates/packages/common-intl/eslint.config.ts

@@ -0,0 +1,12 @@
+import baseConfig from '<%= packageScope %>/eslint';
+import { defineConfig } from 'eslint/config';
+export default defineConfig([
+  ...baseConfig,
+  {
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+]);

package/generators/h5-react/templates/packages/common-intl/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "<%= packageScope %>/common-intl",
+  "version": "0.0.1",
+  "description": "通用国际化库 - re-exports @common-web/common-intl",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@common-web/common-intl": "^0.4.1",
+    "<%= packageScope %>/domain": "workspace:^",
+    "<%= packageScope %>/js-bridge": "workspace:^",
+    "<%= packageScope %>/request": "workspace:^"
+  },
+  "keywords": [
+    "i18n",
+    "intl",
+    "internationalization",
+    "mico"
+  ],
+  "devDependencies": {
+    "<%= packageScope %>/eslint": "workspace:^",
+    "<%= packageScope %>/typescript": "workspace:^"
+  }
+}

package/generators/h5-react/templates/packages/common-intl/src/index.ts

@@ -0,0 +1,3 @@
+export * from '@common-web/common-intl';
+
+export { init } from './intl';

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

@@ -0,0 +1,100 @@
+import {
+  configureLocale,
+  type IFetchParams,
+  type IInitIntlParams,
+  ILang,
+  initIntl,
+} from '@common-web/common-intl';
+import { langBaseUrl } from '<%= packageScope %>/domain';
+import getUserInfo from '<%= packageScope %>/js-bridge/getUserInfo';
+import { request, type UnifiedRequestOptions } from '<%= packageScope %>/request';
+
+type PartialProps<T extends object, K extends keyof T> = Partial<Pick<T, K>> &
+  Omit<T, K>;
+
+/**
+ * 使用<%= packageScope %>/request和@common-web/common-intl初始化国际化
+ * @param params 国际化参数
+ * @returns 国际化对象
+ */
+export const init = (params: PartialProps<IInitIntlParams, 'app_name'>) => {
+  /**
+   * 配置自定义的 locale 获取/设置行为，
+   * h5一般会使用客户端提供的JSBridge来获取语言
+   */
+  const { fetchMultilingualData: fetchMultilingualDataFn, i18n } = initIntl({
+    tag: params.tag,
+    app_name: params.app_name ?? '<%= projectName %>',
+    indexedDBParams: params.indexedDBParams,
+  });
+  const fetchMultilingualData = async () => {
+    let lang: ILang = 'en';
+    try {
+      const userInfo = await getUserInfo();
+      lang = userInfo.lang as ILang;
+    } catch (error) {
+      console.error(error);
+      lang = 'en';
+    }
+    configureLocale({
+      getLocale: () => {
+        return lang;
+      },
+      setLocale: (locale: string) => {
+        console.log('setLocale', locale);
+      },
+    });
+    return fetchMultilingualDataFn({
+      requestInstance: ((url: string, options) => {
+        return request(url, {
+          ...options,
+          skipRequestInterceptors: true,
+        } as UnifiedRequestOptions);
+      }) as IFetchParams['requestInstance'],
+      messageInstance: {
+        error: (msg: string) => {
+          console.error(msg);
+        },
+        warning: (msg: string) => {
+          console.warn(msg);
+        },
+      },
+      lang,
+      localeRequestUrl: langBaseUrl,
+    });
+  };
+  return {
+    fetchMultilingualData,
+    i18n,
+  };
+};
+
+/**
+ * 子应用使用方式：
+ * import { init } from '<%= packageScope %>/common-intl';
+ *
+ * 1. 初始化国际化
+ * const { fetchMultilingualData, i18n } = init({
+ *   tag: 'tag',
+ *   app_name: '<%= projectName %>', // 可不传，默认是'<%= projectName %>'
+ *   indexedDBParams: { dbName: `<%= projectName %>_i18n_${tag}` },
+ * });
+ *
+ * 2. 添加文案
+ * const intl = addIntl(
+ *  {
+ *    common_hello: () => i18n({ key: 'common_hello', defaultMessage: '你好' }),
+ *    common_welcome_aa: (name: string) => i18n({ key: 'common_welcome_aa', interpolations: [name], defaultMessage: `欢迎, ${name}` }),
+ *  },
+ *  i18n,
+ * );
+ * export default intl;
+ *
+ * 3. 调用方法
+ * fetchMultilingualData();
+ *
+ * 4. 使用文案
+ * import intl from '@/intl';
+ * intl.common_hello();
+ * intl.common_welcome_aa('张三');
+ */

package/generators/h5-react/templates/packages/common-intl/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "<%= packageScope %>/typescript"
+}

package/generators/h5-react/templates/packages/components/eslint.config.ts

@@ -0,0 +1,12 @@
+import baseConfig from '<%= packageScope %>/eslint/react';
+import { defineConfig } from 'eslint/config';
+export default defineConfig([
+  ...baseConfig,
+  {
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+]);

package/generators/h5-react/templates/packages/components/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "<%= packageScope %>/components",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "scripts": {
+    "postinstall": "umi setup",
+    "setup": "umi setup",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./Layout": "./src/Layout/index.tsx",
+    "./assets/*": "./src/assets/*"
+  },
+  "devDependencies": {
+    "umi": "catalog:",
+    "<%= packageScope %>/eslint": "workspace:^",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:"
+  },
+  "dependencies": {
+    "<%= packageScope %>/js-bridge": "workspace:^",
+    "<%= packageScope %>/utils": "workspace:^"
+  },
+  "peerDependencies": {
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  }
+}

package/generators/h5-react/templates/packages/components/src/Layout/ImmersiveHeader.tsx

@@ -0,0 +1,126 @@
+import closeH5Page from '<%= packageScope %>/js-bridge/closeH5Page';
+import { cn, cva, type VariantProps } from '<%= packageScope %>/utils/tailwind';
+import {
+  useCallback,
+  useLayoutEffect,
+  useState,
+  type FC,
+  type PropsWithChildren,
+  type ReactNode,
+} from 'react';
+import { history } from 'umi';
+
+// 图片
+import backIcon from '<%= packageScope %>/components/assets/image/back.png';
+
+// 记录 SPA 内相对入口页的栈深度，用于判断当前页是否为首屏（无应用内历史）。
+// 注意：window.history.length 会受同 tab/Webview 内此前页面影响，不能直接依赖；
+let inAppNavCount = 0;
+history.listen(({ action }) => {
+  if (action === 'PUSH') {
+    inAppNavCount += 1;
+  } else if (action === 'POP') {
+    inAppNavCount = Math.max(0, inAppNavCount - 1);
+  }
+  // REPLACE 不改变栈深度，忽略
+});
+
+const headerVariants = cva('flex items-center justify-between py-2 px-4', {
+  variants: {
+    variant: {
+      light: 'bg-white',
+      dark: 'bg-[#0C0C15]',
+      transparent: 'bg-transparent',
+    },
+  },
+  defaultVariants: {
+    variant: 'dark',
+  },
+});
+
+const titleVariants = cva(
+  'font-medium text-center text-[18px] overflow-hidden text-ellipsis whitespace-nowrap',
+  {
+    variants: {
+      variant: {
+        light: 'text-[#0C0C15]',
+        dark: 'text-white',
+        transparent: 'text-white',
+      },
+    },
+    defaultVariants: {
+      variant: 'dark',
+    },
+  },
+);
+
+interface HeaderProps
+  extends PropsWithChildren, VariantProps<typeof headerVariants> {
+  end?: ReactNode;
+  className?: string;
+}
+
+/**
+ * 默认头部组件。
+ */
+const DefaultHeader: FC<HeaderProps> = ({ end, variant }) => {
+  const [title, setTitle] = useState(document.title);
+  useLayoutEffect(() => {
+    let titleElement = document.querySelector('title');
+    if (!titleElement) {
+      titleElement = document.createElement('title');
+      document.head.appendChild(titleElement);
+    }
+    const observer = new MutationObserver(() => {
+      setTitle(document.title);
+    });
+    observer.observe(titleElement, {
+      childList: true,
+      subtree: true,
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  // 有应用内路由历史时返回上一页，否则关闭当前页面
+  const handleBack = useCallback(() => {
+    if (inAppNavCount > 0) {
+      history.back();
+    } else {
+      closeH5Page();
+    }
+  }, []);
+
+  return (
+    <div className={headerVariants({ variant })}>
+      <div className="flex-shrink-0 size-6" onClick={handleBack}>
+        <img src={backIcon} className="size-full" alt="back" />
+      </div>
+      <div className="flex flex-1 items-center justify-center overflow-hidden">
+        <h1 className={titleVariants({ variant })}>{title}</h1>
+      </div>
+      <div className="flex-shrink-0 size-6 flex items-center justify-center">
+        {end}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * 沉浸式布局头部组件。
+ */
+const ImmersiveHeader: FC<HeaderProps> = ({
+  children,
+  end,
+  className,
+  variant,
+}) => {
+  return (
+    <header className={cn('flex-shrink-0 pt-safe', className)}>
+      {children ?? <DefaultHeader end={end} variant={variant} />}
+    </header>
+  );
+};
+
+export default ImmersiveHeader;

package/generators/h5-react/templates/packages/components/src/Layout/LayoutFooter.tsx

@@ -0,0 +1,72 @@
+import { cn } from '<%= packageScope %>/utils/tailwind';
+import { useEffect, useRef, type FC, type PropsWithChildren } from 'react';
+
+export interface LayoutFooterProps extends PropsWithChildren {
+  /** 底部区域附加样式 */
+  className?: string;
+  /** 底部内容是否固定 */
+  fixed?: boolean;
+  /** 底部内容高度变化回调 */
+  onFooterHeightChange?: (height: number) => void;
+}
+
+/**
+ * 底部区域组件。
+ * - 无 children 时仅渲染底部安全区域占位。
+ * - fixed 模式下使用 fixed 定位，并通过 ResizeObserver 计算高度，main区域设置 padding-bottom 避免遮挡内容。
+ *   底部安全区 padding 通过 `[&>*]:pb-safe-or-4` 自动应用到直接子元素上，
+ *   这样调用方写在子元素上的背景（实色或渐变）会天然覆盖到安全区域，无需手动添加。
+ */
+const LayoutFooter: FC<LayoutFooterProps> = ({
+  children,
+  className,
+  fixed,
+  onFooterHeightChange,
+}) => {
+  const footerRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (!fixed) return;
+    const el = footerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => {
+      const height = el.offsetHeight;
+      onFooterHeightChange?.(height);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [fixed, onFooterHeightChange]);
+
+  // 无子元素时，仅渲染底部安全区域占位。
+  if (!children) {
+    return (
+      <div className={cn('flex-shrink-0 w-full pb-safe-or-4', className)} />
+    );
+  }
+
+  // fixed 模式下，使用 fixed 定位，并通过 ResizeObserver 计算高度，main区域设置 padding-bottom 避免遮挡内容。
+  if (fixed) {
+    return (
+      <footer
+        ref={footerRef}
+        className={cn(
+          'fixed bottom-0 left-0 right-0 z-40 px-safe [&>*]:pb-safe-or-4',
+          className,
+        )}
+      >
+        {children}
+      </footer>
+    );
+  }
+
+  // 非 fixed 模式
+  return (
+    <footer
+      className={cn('flex-shrink-0 w-full [&>*]:pb-safe-or-4', className)}
+    >
+      {children}
+    </footer>
+  );
+};
+
+export default LayoutFooter;