@qlover/create-app 0.7.5 → 0.7.7

package/dist/templates/react-app/src/base/cases/RouterLoader.ts

@@ -2,6 +2,7 @@ import type { ComponentType, LazyExoticComponent, ReactNode } from 'react';
 import { RouteObject } from 'react-router-dom';
 import isString from 'lodash/isString';
 import { RouteMeta } from '../types/Page';
+import { LoggerInterface } from '@qlover/logger';
 
 /**
  * Component mapping type for lazy-loaded components
@@ -79,6 +80,11 @@ export type RouterLoaderOptions = {
    * @required
    */
   render: RouterLoaderRender;
+
+  /**
+   * Logger
+   */
+  logger?: LoggerInterface;
 };
 
 /**
@@ -107,7 +113,7 @@ export type RouterLoaderOptions = {
  * });
  */
 export class RouterLoader {
-  constructor(private readonly options: RouterLoaderOptions) {
+  constructor(protected options: RouterLoaderOptions) {
     if (!options.render) {
       throw new Error('RouterLoader render is required');
     }
@@ -149,7 +155,7 @@ export class RouterLoader {
     const { element, children, ...rest } = route;
 
     if (!element || !isString(element)) {
-      console.warn(
+      this.options.logger?.warn(
         `Invalid route, path is: ${route.path}, element is: ${element}`
       );
     }

package/dist/templates/react-app/src/base/port/AsyncStateInterface.ts

@@ -0,0 +1,7 @@
+export interface AsyncStateInterface<T> {
+  loading: boolean;
+  result: T | null;
+  error: unknown | null;
+  startTime: number;
+  endTime: number;
+}

package/dist/templates/react-app/src/base/port/ExecutorPageBridgeInterface.ts

@@ -0,0 +1,24 @@
+import { StoreInterface, StoreStateInterface } from '@qlover/corekit-bridge';
+import { RequestState } from '../cases/RequestState';
+
+export interface ExecutorPageStateInterface extends StoreStateInterface {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  helloState: RequestState<any>;
+}
+
+/**
+ * Executor Page Bridge Interface
+ *
+ * This interface provides a bridge for the ExecutorPage component to interact with the ExecutorController.
+ * It allows the ExecutorPage component to subscribe to the ExecutorController's state and trigger actions.
+ *
+ * @example
+ * const executorPageBridge = new ExecutorPageBridge();
+ */
+export abstract class ExecutorPageBridgeInterface extends StoreInterface<ExecutorPageStateInterface> {
+  selector = {
+    helloState: (state: ExecutorPageStateInterface) => state.helloState
+  };
+
+  abstract onTestPlugins: () => Promise<void>;
+}

package/dist/templates/react-app/src/base/port/I18nServiceInterface.ts

@@ -0,0 +1,10 @@
+import { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
+
+export interface I18nServiceInterface extends BootstrapExecutorPlugin {
+  t(key: string, params?: Record<string, unknown>): string;
+  changeLanguage(language: string): void;
+  changeLoading(loading: boolean): void;
+  getCurrentLanguage(): string;
+  isValidLanguage(language: string): boolean;
+  getSupportedLanguages(): string[];
+}

package/dist/templates/react-app/src/base/port/JSONStoragePageBridgeInterface.ts

@@ -0,0 +1,20 @@
+import { StoreInterface, StoreStateInterface } from '@qlover/corekit-bridge';
+
+export interface JSONStoragePageStateInterface extends StoreStateInterface {
+  testKey1?: number;
+  testKey2?: number;
+  expireTime: number;
+  requestTimeout: number;
+}
+
+export abstract class JSONStoragePageBridgeInterface extends StoreInterface<JSONStoragePageStateInterface> {
+  selector = {
+    requestTimeout: (state: JSONStoragePageStateInterface) =>
+      state.requestTimeout
+  };
+
+  abstract changeRandomTestKey1: () => void;
+  abstract onChangeRandomTestKey2: () => void;
+  abstract changeExpireTime: (expireTime: number) => void;
+  abstract changeRequestTimeout: (requestTimeout: number) => void;
+}

package/dist/templates/react-app/src/base/port/ProcesserExecutorInterface.ts

@@ -0,0 +1,20 @@
+import { ExecutorPlugin } from '@qlover/fe-corekit';
+
+export interface ProcesserExecutorInterface extends ExecutorPlugin {
+  /**
+   * 使用插件
+   *
+   * @param plugin - 插件
+   */
+  use(plugin: ExecutorPlugin): this;
+
+  /**
+   * 处理函数
+   */
+  handler(): Promise<{ success: boolean }>;
+
+  /**
+   * 启动
+   */
+  starup(): Promise<unknown>;
+}

package/dist/templates/react-app/src/base/port/RequestPageBridgeInterface.ts

@@ -0,0 +1,23 @@
+import { StoreInterface, StoreStateInterface } from '@qlover/corekit-bridge';
+import { RequestState } from '../cases/RequestState';
+
+export interface RequestPageStateInterface extends StoreStateInterface {
+  helloState: RequestState<unknown>;
+  ipInfoState: RequestState<unknown>;
+  randomUserState: RequestState<unknown>;
+  abortState: RequestState<unknown>;
+  apiCatchResultState: RequestState<unknown>;
+}
+
+export abstract class RequestPageBridgeInterface extends StoreInterface<RequestPageStateInterface> {
+  abstract onHello: () => void;
+  abstract onIpInfo: () => void;
+  abstract onRandomUser: () => void;
+  abstract onTriggerApiCatchResult: () => void;
+  abstract onTriggerAbortRequest: () => void;
+  abstract stopAbortRequest: () => void;
+
+  emitState(state: Partial<RequestPageStateInterface>): void {
+    this.emit(this.cloneState(state));
+  }
+}

package/dist/templates/react-app/src/base/port/RequestStatusInterface.ts

@@ -0,0 +1,5 @@
+export interface RequestStatusInterface {
+  loading: boolean;
+  result: unknown | null;
+  error: unknown | null;
+}

package/dist/templates/react-app/src/base/port/RouteServiceInterface.ts

@@ -0,0 +1,27 @@
+import {
+  LoggerInterface,
+  StoreInterface,
+  StoreStateInterface
+} from '@qlover/corekit-bridge';
+import { RouteConfigValue } from '../cases/RouterLoader';
+import { NavigateFunction, NavigateOptions } from 'react-router-dom';
+
+export interface RouteServiceStateInterface extends StoreStateInterface {
+  routes: RouteConfigValue[];
+  localeRoutes: boolean;
+}
+
+export abstract class RouteServiceInterface extends StoreInterface<RouteServiceStateInterface> {
+  abstract get logger(): LoggerInterface;
+
+  abstract getRoutes(): RouteConfigValue[];
+  abstract changeRoutes(routes: RouteConfigValue[]): void;
+  abstract goto(
+    path: string,
+    options?: NavigateOptions & { navigate?: NavigateFunction }
+  ): void;
+  abstract gotoLogin(): void;
+  abstract replaceToHome(): void;
+  abstract redirectToDefault(navigate: NavigateFunction): void;
+  abstract i18nGuard(lng: string, navigate: NavigateFunction): void;
+}

package/dist/templates/react-app/src/base/port/UserServiceInterface.ts

@@ -0,0 +1,12 @@
+import { UserAuthService } from '@qlover/corekit-bridge';
+import { ExecutorPlugin } from '@qlover/fe-corekit';
+import type { UserInfo } from '@/base/apis/userApi/UserApiType';
+
+export abstract class UserServiceInterface
+  extends UserAuthService<UserInfo>
+  implements ExecutorPlugin
+{
+  readonly pluginName = 'UserService';
+
+  abstract getToken(): string | null;
+}

package/dist/templates/react-app/src/base/services/I18nService.ts

@@ -5,11 +5,11 @@ import HttpApi from 'i18next-http-backend';
 import merge from 'lodash/merge';
 import i18nConfig from '@config/i18n';
 import {
-  type BootstrapExecutorPlugin,
   type StoreStateInterface,
   StoreInterface
 } from '@qlover/corekit-bridge';
 import { useLocaleRoutes } from '@config/common';
+import { I18nServiceInterface } from '../port/I18nServiceInterface';
 
 const { supportedLngs, fallbackLng } = i18nConfig;
 
@@ -22,7 +22,7 @@ export class I18nServiceState implements StoreStateInterface {
 
 export class I18nService
   extends StoreInterface<I18nServiceState>
-  implements BootstrapExecutorPlugin
+  implements I18nServiceInterface
 {
   readonly pluginName = 'I18nService';
 
@@ -30,7 +30,7 @@ export class I18nService
     loading: (state: I18nServiceState) => state.loading
   };
 
-  constructor(private pathname: string) {
+  constructor(protected pathname: string) {
     super(() => new I18nServiceState(i18n.language as I18nServiceLocale));
   }
 
@@ -64,7 +64,7 @@ export class I18nService
         const paths = this.pathname.split('/');
 
         for (const path of paths) {
-          if (I18nService.isValidLanguage(path)) {
+          if (this.isValidLanguage(path)) {
             return path;
           }
         }
@@ -93,7 +93,7 @@ export class I18nService
     this.emit({ ...this.state, loading });
   }
 
-  static getCurrentLanguage(): I18nServiceLocale {
+  getCurrentLanguage(): I18nServiceLocale {
     return i18n.language as I18nServiceLocale;
   }
 
@@ -102,10 +102,14 @@ export class I18nService
    * @param language - language to check
    * @returns true if the language is supported, false otherwise
    */
-  static isValidLanguage(language: string): language is I18nServiceLocale {
+  isValidLanguage(language: string): language is I18nServiceLocale {
     return supportedLngs.includes(language as I18nServiceLocale);
   }
 
+  getSupportedLanguages(): I18nServiceLocale[] {
+    return [...supportedLngs];
+  }
+
   /**
    * translate the key
    * @param key - key to translate

package/dist/templates/react-app/src/base/services/ProcesserExecutor.ts

@@ -1,18 +1,36 @@
-import { AsyncExecutor, ExecutorPlugin } from '@qlover/fe-corekit';
+import {
+  AsyncExecutor,
+  ExecutorContext,
+  ExecutorPlugin
+} from '@qlover/fe-corekit';
 import { IOCIdentifier } from '@config/IOCIdentifier';
 import { injectable, inject } from 'inversify';
 import type { LoggerInterface } from '@qlover/logger';
-import { RouteService } from './RouteService';
+import type { ProcesserExecutorInterface } from '../port/ProcesserExecutorInterface';
+import type { BootstrapContextValue } from '@qlover/corekit-bridge';
+import type { RouteServiceInterface } from '../port/RouteServiceInterface';
 
 @injectable()
-export class ProcesserExecutor {
+export class ProcesserExecutor implements ProcesserExecutorInterface {
+  pluginName = 'ProcesserExecutor';
   protected executor: AsyncExecutor = new AsyncExecutor();
 
   constructor(
-    @inject(IOCIdentifier.Logger) private logger: LoggerInterface,
-    @inject(RouteService) private routeService: RouteService
+    @inject(IOCIdentifier.Logger) protected logger: LoggerInterface,
+    @inject(IOCIdentifier.RouteServiceInterface)
+    protected routeService: RouteServiceInterface
   ) {}
 
+  /**
+   * @override
+   */
+  onBefore({
+    parameters: { ioc }
+  }: ExecutorContext<BootstrapContextValue>): void | Promise<void> {
+    this.use(ioc.get(IOCIdentifier.I18nKeyErrorPlugin));
+    this.use(ioc.get(IOCIdentifier.UserServiceInterface));
+  }
+
   use(plugin: ExecutorPlugin): this {
     this.executor.use(plugin);
     return this;

package/dist/templates/react-app/src/base/services/RouteService.ts

@@ -1,16 +1,12 @@
 import type { RouteConfigValue } from '@/base/cases/RouterLoader';
 import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
-import type { UIDependenciesInterface } from '@/base/port/UIDependenciesInterface';
 import type { LoggerInterface } from '@qlover/logger';
-import { I18nService } from '@/base/services/I18nService';
-import {
-  StoreInterface,
-  type StoreStateInterface
+import { RouteServiceInterface } from '../port/RouteServiceInterface';
+import type {
+  UIBridgeInterface,
+  StoreStateInterface
 } from '@qlover/corekit-bridge';
-
-export type RouterServiceDependencies = {
-  navigate: NavigateFunction;
-};
+import { I18nServiceInterface } from '../port/I18nServiceInterface';
 
 export type RouterServiceOptions = {
   routes: RouteConfigValue[];
@@ -30,64 +26,38 @@ export class RouterServiceState implements StoreStateInterface {
   ) {}
 }
 
-export class RouteService
-  extends StoreInterface<RouterServiceState>
-  implements UIDependenciesInterface<RouterServiceDependencies>
-{
-  /**
-   * @override
-   */
-  dependencies?: RouterServiceDependencies;
-
-  constructor(private options: RouterServiceOptions) {
+export class RouteService extends RouteServiceInterface {
+  constructor(
+    protected uiBridge: UIBridgeInterface<NavigateFunction>,
+    protected i18nService: I18nServiceInterface,
+    protected options: RouterServiceOptions
+  ) {
     super(
       () => new RouterServiceState(options.routes, !!options.hasLocalRoutes)
     );
   }
 
-  get logger(): LoggerInterface {
+  override get logger(): LoggerInterface {
     return this.options.logger;
   }
 
-  get navigate(): NavigateFunction | undefined {
-    const navigate = this.dependencies?.navigate;
-
-    if (!navigate) {
-      this.logger.debug(
-        'Please use `RouteService.setDependencies` to set dependencies'
-      );
-    }
-
-    return navigate;
-  }
-
-  composePath(path: string): string {
+  protected composePath(path: string): string {
     if (this.state.localeRoutes) {
-      const targetLang = I18nService.getCurrentLanguage();
+      const targetLang = this.i18nService.getCurrentLanguage();
       return `/${targetLang}${path}`;
     }
     return path.startsWith('/') ? path : `/${path}`;
   }
 
-  /**
-   * @override
-   */
-  setDependencies(dependencies: Partial<RouterServiceDependencies>): void {
-    this.dependencies = Object.assign(
-      this.dependencies || {},
-      dependencies
-    ) as RouterServiceDependencies;
-  }
-
-  getRoutes(): RouteConfigValue[] {
+  override getRoutes(): RouteConfigValue[] {
     return this.state.routes;
   }
 
-  changeRoutes(routes: RouteConfigValue[]): void {
-    this.emit({ routes, localeRoutes: this.state.localeRoutes });
+  override changeRoutes(routes: RouteConfigValue[]): void {
+    this.emit(this.cloneState({ routes }));
   }
 
-  goto(
+  override goto(
     path: string,
     options?: NavigateOptions & {
       navigate?: NavigateFunction;
@@ -96,29 +66,30 @@ export class RouteService
     const { navigate, ...rest } = options || {};
     path = this.composePath(path);
     this.logger.debug('Goto path => ', path);
-    (navigate || this.navigate)?.(path, rest);
+
+    (navigate || this.uiBridge.getUIBridge())?.(path, rest);
   }
 
-  gotoLogin(): void {
+  override gotoLogin(): void {
     this.goto('/login', { replace: true });
   }
 
-  replaceToHome(): void {
+  override replaceToHome(): void {
     this.goto('/', { replace: true });
   }
 
-  redirectToDefault(navigate: NavigateFunction): void {
+  override redirectToDefault(navigate?: NavigateFunction): void {
     this.goto('/', { replace: true, navigate });
   }
 
-  i18nGuard(lng: string, navigate: NavigateFunction): void {
+  override i18nGuard(lng: string, navigate?: NavigateFunction): void {
     if (!this.state.localeRoutes) {
       return;
     }
 
     if (!lng) {
       this.goto('/404', { replace: true, navigate });
-    } else if (!I18nService.isValidLanguage(lng)) {
+    } else if (!this.i18nService.isValidLanguage(lng)) {
       this.goto('/404', { replace: true, navigate });
     }
   }

package/dist/templates/react-app/src/base/services/UserService.ts

@@ -1,14 +1,12 @@
-import { ExecutorPlugin, type SyncStorageInterface } from '@qlover/fe-corekit';
+import { type SyncStorageInterface } from '@qlover/fe-corekit';
 import type {
   UserApiLoginTransaction,
   UserInfo
 } from '@/base/apis/userApi/UserApiType';
-import { RouteService } from './RouteService';
 import {
   type UserAuthApiInterface,
   type UserAuthState,
   LoginResponseData,
-  UserAuthService,
   UserAuthStore
 } from '@qlover/corekit-bridge';
 import { inject, injectable } from 'inversify';
@@ -17,6 +15,8 @@ import { AppError } from '@/base/cases/AppError';
 import * as errKeys from '@config/Identifier/common.error';
 import { IOCIdentifier } from '@config/IOCIdentifier';
 import { AppConfig } from '../cases/AppConfig';
+import { UserServiceInterface } from '../port/UserServiceInterface';
+import { RouteServiceInterface } from '../port/RouteServiceInterface';
 
 export interface UserApiState extends UserAuthState<UserInfo> {}
 
@@ -29,14 +29,10 @@ export interface RegisterFormData {
 }
 
 @injectable()
-export class UserService
-  extends UserAuthService<UserInfo>
-  implements ExecutorPlugin
-{
-  readonly pluginName = 'UserService';
-
+export class UserService extends UserServiceInterface {
   constructor(
-    @inject(RouteService) protected routerService: RouteService,
+    @inject(IOCIdentifier.RouteServiceInterface)
+    protected routerService: RouteServiceInterface,
     @inject(UserApi)
     userApi: UserAuthApiInterface<UserInfo>,
     @inject(IOCIdentifier.AppConfig) appConfig: AppConfig,
@@ -62,7 +58,7 @@ export class UserService
     return super.store as UserAuthStore<UserApiState>;
   }
 
-  getToken(): string | null {
+  override getToken(): string | null {
     return this.store.getCredential();
   }
 
@@ -88,14 +84,6 @@ export class UserService
     this.store.authSuccess();
   }
 
-  /**
-   * @override
-   */
-  onSuccess(): void {}
-
-  /**
-   * @override
-   */
   override async logout(): Promise<void> {
     await super.logout();
 
@@ -103,7 +91,9 @@ export class UserService
     this.routerService.gotoLogin();
   }
 
-  async register(params: RegisterFormData): Promise<LoginResponseData> {
+  override async register(
+    params: RegisterFormData
+  ): Promise<LoginResponseData> {
     const response = (await this.api.register(
       params
     )) as UserApiLoginTransaction['response'];

package/dist/templates/react-app/src/core/IOC.ts

@@ -3,32 +3,7 @@ import type { AppConfig } from '@/base/cases/AppConfig';
 import type { IOCRegisterInterface } from '@qlover/corekit-bridge';
 import { createIOCFunction } from '@qlover/corekit-bridge';
 import { InversifyContainer } from '@/base/cases/InversifyContainer';
-import { IOCIdentifier } from '@config/IOCIdentifier';
-
-/**
- * IOC identifier map
- *
- * Define the implementation class corresponding to the string identifier
- */
-export interface IOCIdentifierMap {
-  [IOCIdentifier.JSON]: import('@qlover/fe-corekit').JSONSerializer;
-  [IOCIdentifier.LocalStorage]: import('@qlover/fe-corekit').ObjectStorage<
-    string,
-    string
-  >;
-  [IOCIdentifier.LocalStorageEncrypt]: import('@qlover/fe-corekit').ObjectStorage<
-    string,
-    string
-  >;
-  [IOCIdentifier.CookieStorage]: import('@qlover/corekit-bridge').CookieStorage;
-  [IOCIdentifier.Logger]: import('@qlover/logger').LoggerInterface;
-  [IOCIdentifier.FeApiToken]: import('@qlover/corekit-bridge').TokenStorage<string>;
-  [IOCIdentifier.FeApiCommonPlugin]: import('@qlover/corekit-bridge').RequestCommonPlugin;
-  [IOCIdentifier.AppConfig]: import('@qlover/corekit-bridge').EnvConfigInterface;
-  [IOCIdentifier.ApiMockPlugin]: import('@qlover/corekit-bridge').ApiMockPlugin;
-  [IOCIdentifier.ApiCatchPlugin]: import('@qlover/corekit-bridge').ApiCatchPlugin;
-  [IOCIdentifier.DialogHandler]: import('@/base/cases/DialogHandler').DialogHandler;
-}
+import { IOCIdentifierMap } from '@config/IOCIdentifier';
 
 /**
  * IOC register options

package/dist/templates/react-app/src/core/IocRegisterImpl.ts

@@ -0,0 +1,125 @@
+import type { IOCContainer, IOCRegister, IocRegisterOptions } from './IOC';
+import {
+  ApiCatchPlugin,
+  ApiMockPlugin,
+  RequestCommonPlugin,
+  ThemeService,
+  type IOCManagerInterface
+} from '@qlover/corekit-bridge';
+import * as globals from './globals';
+import { IOCIdentifier as I } from '@config/IOCIdentifier';
+import mockDataJson from '@config/feapi.mock.json';
+import { I18nService } from '@/base/services/I18nService';
+import { themeConfig } from '@config/theme';
+import { useLocaleRoutes } from '@config/common';
+import { baseNoLocaleRoutes, baseRoutes } from '@config/app.router';
+import { SyncStorageInterface } from '@qlover/fe-corekit';
+import { RouteService } from '@/base/services/RouteService';
+import { RequestStatusCatcher } from '@/base/cases/RequestStatusCatcher';
+import { UserService } from '@/base/services/UserService';
+import { I18nKeyErrorPlugin } from '@/base/cases/I18nKeyErrorPlugin';
+import { ProcesserExecutor } from '@/base/services/ProcesserExecutor';
+import { NavigateBridge } from '@/uikit/bridges/NavigateBridge';
+import { ExecutorPageBridge } from '@/uikit/bridges/ExecutorPageBridge';
+import { JSONStoragePageBridge } from '@/uikit/bridges/JSONStoragePageBridge';
+import { RequestPageBridge } from '@/uikit/bridges/RequestPageBridge';
+
+export class IocRegisterImpl implements IOCRegister {
+  constructor(protected options: IocRegisterOptions) {}
+
+  /**
+   * Register globals
+   *
+   * 一般用于注册全局
+   *
+   * @param ioc - IOC container
+   */
+  protected registerGlobals(ioc: IOCContainer): void {
+    const { appConfig } = this.options;
+    const { dialogHandler, localStorageEncrypt, JSON, logger } = globals;
+
+    ioc.bind(I.JSONSerializer, JSON);
+    ioc.bind(I.Logger, logger);
+    ioc.bind(I.AppConfig, appConfig);
+    ioc.bind(I.EnvConfigInterface, appConfig);
+    ioc.bind(I.DialogHandler, dialogHandler);
+    ioc.bind(I.UIDialogInterface, dialogHandler);
+    ioc.bind(I.AntdStaticApiInterface, dialogHandler);
+    ioc.bind(I.LocalStorage, globals.localStorage);
+    ioc.bind(I.LocalStorageEncrypt, localStorageEncrypt);
+    ioc.bind(I.CookieStorage, globals.cookieStorage);
+  }
+
+  /**
+   * 一般用于注册没有其他复杂依赖的项目实现类
+   *
+   * 比如:
+   * - 路由服务
+   * - 国际化服务
+   * - 主题服务
+   *
+   * @param ioc
+   */
+  protected registerImplement(ioc: IOCContainer): void {
+    ioc.bind(I.I18nServiceInterface, new I18nService(this.options.pathname));
+    ioc.bind(
+      I.RouteServiceInterface,
+      new RouteService(
+        ioc.get(NavigateBridge),
+        ioc.get(I.I18nServiceInterface),
+        {
+          routes: useLocaleRoutes ? baseRoutes : baseNoLocaleRoutes,
+          logger: ioc.get(I.Logger),
+          hasLocalRoutes: useLocaleRoutes
+        }
+      )
+    );
+    ioc.bind(
+      I.ThemeService,
+      new ThemeService({
+        ...themeConfig,
+        storage: ioc.get<SyncStorageInterface<string, string>>(I.LocalStorage)
+      })
+    );
+
+    ioc.bind(I.I18nKeyErrorPlugin, ioc.get(I18nKeyErrorPlugin));
+    ioc.bind(I.ProcesserExecutorInterface, ioc.get(ProcesserExecutor));
+    ioc.bind(I.UserServiceInterface, ioc.get(UserService));
+    ioc.bind(I.RequestCatcherInterface, ioc.get(RequestStatusCatcher));
+    ioc.bind(I.ExecutorPageBridgeInterface, ioc.get(ExecutorPageBridge));
+    ioc.bind(I.JSONStoragePageInterface, ioc.get(JSONStoragePageBridge));
+    ioc.bind(I.RequestPageBridgeInterface, ioc.get(RequestPageBridge));
+  }
+
+  protected registerCommon(ioc: IOCContainer): void {
+    const { appConfig } = this.options;
+    const logger = ioc.get(I.Logger);
+
+    const feApiRequestCommonPlugin = new RequestCommonPlugin({
+      tokenPrefix: appConfig.openAiTokenPrefix,
+      requiredToken: true,
+      token: () => ioc.get(UserService).getToken()
+    });
+    const apiMockPlugin = new ApiMockPlugin(mockDataJson, logger);
+    const apiCatchPlugin = new ApiCatchPlugin(
+      logger,
+      ioc.get(RequestStatusCatcher)
+    );
+
+    ioc.bind(I.FeApiCommonPlugin, feApiRequestCommonPlugin);
+    ioc.bind(I.ApiMockPlugin, apiMockPlugin);
+    ioc.bind(I.ApiCatchPlugin, apiCatchPlugin);
+  }
+
+  /**
+   * @override
+   */
+  register(
+    ioc: IOCContainer,
+    _manager: IOCManagerInterface<IOCContainer>
+  ): void {
+    this.registerGlobals(ioc);
+    this.registerCommon(ioc);
+    this.registerImplement(ioc);
+  }
+}