generator-mico-cli 0.2.30 → 0.2.32

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

@@ -0,0 +1,121 @@
+import { cn } from '<%= packageScope %>/utils/tailwind';
+import {
+  useEffect,
+  useState,
+  type FC,
+  type PropsWithChildren,
+  type ReactNode,
+} from 'react';
+import ImmersiveHeader from './ImmersiveHeader';
+import LayoutFooter from './LayoutFooter';
+
+/**
+ * 确保 viewport meta 包含 viewport-fit=cover，
+ * 这是 env(safe-area-inset-*) 生效的前置条件。
+ */
+function useViewportFitCover() {
+  useEffect(() => {
+    const meta = document.querySelector<HTMLMetaElement>(
+      'meta[name="viewport"]',
+    );
+    if (meta) {
+      const content = meta.getAttribute('content') || '';
+      if (!content.includes('viewport-fit')) {
+        meta.setAttribute('content', `${content},viewport-fit=cover`);
+      }
+    } else {
+      const el = document.createElement('meta');
+      el.name = 'viewport';
+      el.content =
+        'width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover';
+      document.head.appendChild(el);
+    }
+  }, []);
+}
+
+export interface LayoutProps extends PropsWithChildren {
+  /** 是否沉浸式布局 */
+  immersive?: boolean;
+  /** 布局容器附加样式 */
+  className?: string;
+  /** 沉浸式布局时，自定义头部内容 */
+  header?: ReactNode;
+  /** 沉浸式布局时，头部样式变体 */
+  headerVariant?: 'light' | 'dark' | 'transparent';
+  /** 沉浸式布局时，头部附加样式 */
+  headerClassName?: string;
+  /** 沉浸式布局时，头部右侧内容 */
+  headerEnd?: ReactNode;
+  /** 沉浸式布局时，内容区域附加样式 */
+  contentClassName?: string;
+  /** 底部内容 */
+  footer?: ReactNode;
+  /** 底部区域附加样式 */
+  footerClassName?: string;
+  /** 底部内容是否fixed定位在底部 */
+  footerFixed?: boolean;
+}
+
+/**
+ * 页面布局组件。
+ *
+ * 普通布局：不渲染 header，仅处理左、右、下方安全区域。
+ * 沉浸式布局：额外渲染 header，并处理上方安全区域。
+ */
+const Layout: FC<LayoutProps> = ({
+  immersive = true,
+  headerVariant = 'dark',
+  children,
+  className,
+  header,
+  headerClassName,
+  headerEnd,
+  contentClassName,
+  footer,
+  footerClassName,
+  footerFixed,
+}) => {
+  useViewportFitCover();
+
+  const [footerHeight, setFooterHeight] = useState(0);
+  const onFooterHeightChange = (height: number) => {
+    setFooterHeight(height);
+  };
+  return (
+    <div
+      className={cn(
+        'flex flex-col w-screen h-screen overflow-hidden px-safe',
+        className,
+      )}
+    >
+      {immersive && (
+        <ImmersiveHeader
+          end={headerEnd}
+          className={headerClassName}
+          variant={headerVariant}
+        >
+          {header}
+        </ImmersiveHeader>
+      )}
+      <div className="flex flex-col flex-1 overflow-y-auto overscroll-contain">
+        <main
+          className={cn('flex-1 w-full', contentClassName)}
+          style={{
+            paddingBottom: footerHeight > 0 ? `${footerHeight}px` : undefined,
+          }}
+        >
+          {children}
+        </main>
+        <LayoutFooter
+          fixed={footerFixed}
+          className={footerClassName}
+          onFooterHeightChange={onFooterHeightChange}
+        >
+          {footer}
+        </LayoutFooter>
+      </div>
+    </div>
+  );
+};
+
+export default Layout;

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

@@ -0,0 +1,13 @@
+{
+  "extends": "./src/.umi/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "<%= packageScope %>/components/*": ["./src/*"],
+      "@/*": ["./src/*"],
+      "@@/*": ["./src/.umi/*"],
+      "umi": ["./node_modules/umi"],
+      "umi/typings": ["./src/.umi/typings"]
+    }
+  }
+}

package/generators/h5-react/templates/packages/components/typings.d.ts

@@ -0,0 +1 @@
+import 'umi/typings';

package/generators/h5-react/templates/packages/constant/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/constant/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "<%= packageScope %>/constant",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./src/*.ts"
+  },
+  "devDependencies": {
+    "<%= packageScope %>/eslint": "workspace:^",
+    "<%= packageScope %>/typescript": "workspace:^"
+  },
+  "scripts": {
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
+  }
+}

package/generators/h5-react/templates/packages/constant/src/member.ts

@@ -0,0 +1,8 @@
+/**
+ * 会员常量，示例
+ */
+export const enum MEMBER_CONSTANT {
+  NONE = 0, // 免费用户
+  MEMBER_TIER_BASIC = 1, // 基础会员
+  MEMBER_TIER_STANDARD = 2, // 标准会员
+}

package/generators/h5-react/templates/packages/constant/tsconfig.json

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

package/generators/h5-react/templates/packages/deeplink/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/deeplink/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "<%= packageScope %>/deeplink",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "devDependencies": {
+    "<%= packageScope %>/eslint": "workspace:^",
+    "<%= packageScope %>/typescript": "workspace:^"
+  },
+  "scripts": {
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
+  }
+}

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

@@ -0,0 +1,7 @@
+/**
+ * 跳转到首页
+ */
+export function togoHome() {
+  // 示例：跳转到首页，请根据客户端的deeplink规则修改
+  location.href = '<%= projectName %>://router/home';
+}

package/generators/h5-react/templates/packages/deeplink/tsconfig.json

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

package/generators/h5-react/templates/packages/domain/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/domain/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "<%= packageScope %>/domain",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "devDependencies": {
+    "<%= packageScope %>/eslint": "workspace:^",
+    "<%= packageScope %>/typescript": "workspace:^"
+  },
+  "scripts": {
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
+  }
+}

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

@@ -0,0 +1,29 @@
+import '../types.d';
+
+function getMicoConfig() {
+  return window?.__MICO_CONFIG__;
+}
+
+/**
+ * 接口基础URL
+ */
+export const apiBaseUrl: string = (() => {
+  const micoConfig = getMicoConfig();
+  return micoConfig?.API_BASE_URL ?? process.env.UMI_APP_API_BASE_URL ?? '';
+})();
+
+/**
+ * oss CDN 基础URL
+ */
+export const cdnBaseUrl: string = (() => {
+  const micoConfig = getMicoConfig();
+  return micoConfig?.CDN_BASE_URL ?? process.env.UMI_APP_CDN_BASE_URL ?? '';
+})();
+
+/**
+ * 多语言接口基础URL
+ */
+export const langBaseUrl: string = (() => {
+  const micoConfig = getMicoConfig();
+  return micoConfig?.LANG_BASE_URL ?? process.env.UMI_APP_LANG_BASE_URL ?? '';
+})();

package/generators/h5-react/templates/packages/domain/tsconfig.json

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

package/generators/h5-react/templates/packages/domain/types.d.ts

@@ -0,0 +1,11 @@
+declare global {
+  interface Window {
+    __MICO_CONFIG__?: MicoConfig;
+  }
+}
+
+export interface MicoConfig {
+  API_BASE_URL?: string; // 接口基础URL
+  CDN_BASE_URL?: string; // oss CDN 基础URL
+  LANG_BASE_URL?: string; // 多语言接口基础URL
+}

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

@@ -0,0 +1,36 @@
+import { defineConfig } from 'eslint/config';
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+
+/**
+ * 基础配置
+ */
+export default defineConfig([
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+      },
+    },
+  },
+  {
+    ignores: [
+      'node_modules',
+      'dist',
+      'public',
+      '.turbo',
+      'type/**',
+      'mock/**',
+      '**/.stylelintrc.*',
+      '**/tailwind.config.*',
+      '**/postcss.config.*',
+      'src/.umi',
+      'src/.umi-production',
+      'src/.umi-test',
+    ],
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  eslintPluginPrettierRecommended,
+]);

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

@@ -0,0 +1,33 @@
+import { defineConfig } from 'eslint/config';
+import eslintPluginReact from 'eslint-plugin-react';
+import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
+import eslintPluginReactRefresh from 'eslint-plugin-react-refresh';
+
+import eslintConfigBase from './eslint.config.base';
+
+import type { ESLint } from 'eslint';
+
+/**
+ * React 配置
+ */
+export default defineConfig([
+  ...eslintConfigBase,
+  {
+    files: ['**/*.{ts,tsx,js,jsx}'],
+    plugins: {
+      react: eslintPluginReact,
+      'react-hooks': eslintPluginReactHooks as ESLint.Plugin,
+      'react-refresh': eslintPluginReactRefresh,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      ...eslintPluginReact.configs.recommended.rules,
+      ...eslintPluginReact.configs['jsx-runtime'].rules,
+      ...eslintPluginReactHooks.configs.recommended.rules,
+    },
+  },
+]);

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

@@ -0,0 +1,22 @@
+{
+  "name": "<%= packageScope %>/eslint",
+  "version": "1.0.0",
+  "private": true,
+  "main": "./eslint.config.base.ts",
+  "type": "module",
+  "exports": {
+    ".": "./eslint.config.base.ts",
+    "./react": "./eslint.config.react.ts"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "eslint": "catalog:",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "typescript-eslint": "^8.57.2"
+  }
+}

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

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

package/generators/h5-react/templates/packages/js-bridge/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "<%= packageScope %>/js-bridge",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "scripts": {
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./src/*.ts"
+  },
+  "devDependencies": {
+    "<%= packageScope %>/eslint": "workspace:^",
+    "<%= packageScope %>/typescript": "workspace:^"
+  },
+  "dependencies": {
+    "<%= packageScope %>/domain": "workspace:^",
+    "<%= packageScope %>/utils": "workspace:^"
+  }
+}

package/generators/h5-react/templates/packages/js-bridge/src/call.ts

@@ -0,0 +1,126 @@
+// 注册JSBridge方法
+import { isAndroid, isIOS } from '<%= packageScope %>/utils/env';
+import { canUseJSBridge } from './index';
+
+import type { JSBridgeResponse } from '../type';
+
+function createPostID() {
+  return `${Math.random().toString(36).substring(2, 6)}_${Date.now()}`;
+}
+
+function callIOSMethods<D = unknown, T = null>(
+  method: string,
+  payload: T,
+): Promise<JSBridgeResponse<D>> {
+  return new Promise((resolve, reject) => {
+    if (!canUseJSBridge()) {
+      reject(new Error('callIOSMethods: No bridge'));
+      return;
+    }
+    console.log(method, payload, '--->method, payload');
+    window.MCAIJsBridge!.post!<D, T>(method, payload, (response) => {
+      console.log(response, '<---response');
+      if (response === null) {
+        reject(new Error('callIOSMethods: No response'));
+      } else if (response.code === 0) {
+        resolve(response);
+      } else {
+        reject(
+          new Error(
+            `callIOSMethods: ${response.message ?? JSON.stringify(response)}`,
+          ),
+        );
+      }
+    });
+  });
+}
+
+interface AndroidMethodCallingIDMap {
+  resolve: (response: JSBridgeResponse<any>) => void;
+  reject: (error: Error) => void;
+}
+const androidMethodCallingIDMap = new Map<string, AndroidMethodCallingIDMap>();
+function callAndroidMethods<D = unknown, T = null>(
+  method: string,
+  payload: T,
+): Promise<JSBridgeResponse<D>> {
+  if (!window.AndroidJSBridgeCallback) {
+    window.AndroidJSBridgeCallback = (postID, response) => {
+      console.log(postID, '<---postID', response);
+      if (!postID) {
+        console.error('callAndroidMethods: No postID');
+      }
+      if (!androidMethodCallingIDMap.has(postID)) {
+        console.error('callAndroidMethods: postID not found');
+        return;
+      }
+      const { resolve, reject } = androidMethodCallingIDMap.get(postID)!;
+      androidMethodCallingIDMap.delete(postID);
+      if (response === null) {
+        reject(new Error('callAndroidMethods: No response'));
+      } else if (response.code === 0) {
+        resolve(response);
+      } else {
+        reject(
+          new Error(
+            `callAndroidMethods: ${response.message ?? JSON.stringify(response)}`,
+          ),
+        );
+      }
+    };
+  }
+  return new Promise((resolve, reject) => {
+    if (!canUseJSBridge()) {
+      reject(new Error('callAndroidMethods: No bridge'));
+      return;
+    }
+    let postID = createPostID();
+    while (androidMethodCallingIDMap.has(postID)) {
+      postID = createPostID();
+    }
+    androidMethodCallingIDMap.set(postID, { resolve, reject });
+    console.log(postID, 'postID--->', method, payload);
+    window.Omigo!.post!(method, payload ? JSON.stringify(payload) : '', postID);
+  });
+}
+
+interface CallOptions {
+  showToast?: boolean;
+  isShowLoading?: boolean;
+}
+const callJSBridgeMethodsMap = new Set<string>();
+export async function callJSBridgeMethods<D = unknown, T = null>(
+  method: string,
+  payload: T,
+  options?: CallOptions,
+) {
+  const { showToast = true, isShowLoading: _isShowLoading = false } =
+    options ?? {};
+  const isShowLoading = _isShowLoading;
+  if (isShowLoading) {
+    // 避免重复调用
+    if (callJSBridgeMethodsMap.has(method)) {
+      throw new Error(`callJSBridgeMethods: ${method} is already called`);
+    }
+    // 打开loading
+    callJSBridgeMethodsMap.add(method);
+  }
+  try {
+    if (isAndroid) {
+      return await callAndroidMethods<D, T>(method, payload);
+    } else if (isIOS) {
+      return await callIOSMethods<D, T>(method, payload);
+    }
+    throw new Error('callJSBridgeMethods: platform not supported');
+  } catch (error) {
+    if (showToast) {
+      // 显示toast
+    }
+    throw error;
+  } finally {
+    if (isShowLoading) {
+      // 关闭loading
+      callJSBridgeMethodsMap.delete(method);
+    }
+  }
+}

package/generators/h5-react/templates/packages/js-bridge/src/closeH5Page.ts

@@ -0,0 +1,9 @@
+import { callJSBridgeMethods } from './call';
+
+/**
+ * 关闭当前H5页面，示例，具体实现请根据客户端的JSBridge规则修改
+ */
+export default async function closeH5Page() {
+  const response = await callJSBridgeMethods('closeH5Page', null);
+  return response.data;
+}