@qlover/create-app 0.7.15 → 0.8.0

package/dist/templates/react-app/src/base/apis/userApi/UserApiBootstarp.ts

@@ -1,13 +1,4 @@
-import {
-  FetchAbortPlugin,
-  RequestAdapterConfig,
-  RequestAdapterResponse,
-  RequestTransactionInterface
-} from '@qlover/fe-corekit';
-import { IOC } from '@/core/IOC';
 import { IOCIdentifier } from '@config/IOCIdentifier';
-import { RequestLogger } from '@/base/cases/RequestLogger';
-import { FetchURLPlugin } from '@qlover/fe-corekit';
 import {
   type BootstrapContext,
   type BootstrapExecutorPlugin,
@@ -15,8 +6,15 @@ import {
   type ApiCatchPluginConfig,
   type ApiCatchPluginResponse
 } from '@qlover/corekit-bridge';
+import { FetchAbortPlugin, FetchURLPlugin } from '@qlover/fe-corekit';
+import { RequestLogger } from '@/base/cases/RequestLogger';
 import { UserApi } from './UserApi';
 import { RequestLanguages } from '../../cases/RequestLanguages';
+import type {
+  RequestAdapterConfig,
+  RequestAdapterResponse,
+  RequestTransactionInterface
+} from '@qlover/fe-corekit';
 
 /**
  * UserApiConfig
@@ -68,13 +66,13 @@ export class UserApiBootstarp implements BootstrapExecutorPlugin {
     ioc
       .get<UserApi>(UserApi)
       .usePlugin(new FetchURLPlugin())
-      .usePlugin(IOC.get(IOCIdentifier.FeApiCommonPlugin))
+      .usePlugin(ioc.get(IOCIdentifier.FeApiCommonPlugin))
       .usePlugin(
         new RequestLanguages(ioc.get(IOCIdentifier.I18nServiceInterface))
       )
-      .usePlugin(IOC.get(IOCIdentifier.ApiMockPlugin))
-      .usePlugin(IOC.get(RequestLogger))
-      .usePlugin(IOC.get(FetchAbortPlugin))
-      .usePlugin(IOC.get(IOCIdentifier.ApiCatchPlugin));
+      .usePlugin(ioc.get(IOCIdentifier.ApiMockPlugin))
+      .usePlugin(ioc.get(RequestLogger))
+      .usePlugin(ioc.get(FetchAbortPlugin))
+      .usePlugin(ioc.get(IOCIdentifier.ApiCatchPlugin));
   }
 }

package/dist/templates/react-app/src/base/apis/userApi/UserApiType.ts

@@ -1,4 +1,4 @@
-import { UserApiTransaction } from './UserApiBootstarp';
+import type { UserApiTransaction } from './UserApiBootstarp';
 
 export type UserInfo = {
   name: string;

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

@@ -4,8 +4,11 @@ import type {
   ModalApi,
   NotificationApi
 } from '@brain-toolkit/antd-theme-override/react';
-import { UIDialogInterface, NotificationOptions } from '@qlover/corekit-bridge';
-import { ModalFuncProps } from 'antd';
+import type {
+  UIDialogInterface,
+  NotificationOptions
+} from '@qlover/corekit-bridge';
+import type { ModalFuncProps } from 'antd';
 
 export interface DialogHandlerOptions
   extends NotificationOptions,

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

@@ -1,8 +1,8 @@
-import type { ExecutorContext, ExecutorPlugin } from '@qlover/fe-corekit';
-import type { LoggerInterface } from '@qlover/logger';
-import { inject, injectable } from 'inversify';
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import { inject, injectable } from 'inversify';
 import type { I18nServiceInterface } from '../port/I18nServiceInterface';
+import type { ExecutorContext, ExecutorPlugin } from '@qlover/fe-corekit';
+import type { LoggerInterface } from '@qlover/logger';
 
 /**
  * When throw error, it will be converted to i18n key

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

@@ -1,9 +1,9 @@
-import { IOCIdentifierMap } from '@config/IOCIdentifier';
-import {
+import { Container } from 'inversify';
+import type { IOCIdentifierMap } from '@config/IOCIdentifier';
+import type {
   IOCContainerInterface,
   ServiceIdentifier
 } from '@qlover/corekit-bridge';
-import { Container } from 'inversify';
 
 export class InversifyContainer implements IOCContainerInterface {
   protected container: Container;

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

@@ -1,5 +1,5 @@
-import { I18nServiceInterface } from '@/base/port/I18nServiceInterface';
-import {
+import type { I18nServiceInterface } from '@/base/port/I18nServiceInterface';
+import type {
   ExecutorContext,
   ExecutorPlugin,
   RequestAdapterConfig

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

@@ -1,14 +1,14 @@
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import {
+  type ApiCatchPluginConfig,
+  type ApiCatchPluginResponse
+} from '@qlover/corekit-bridge';
 import {
   type ExecutorPlugin,
   type ExecutorContext,
   type RequestAdapterFetchConfig,
   type RequestAdapterResponse
 } from '@qlover/fe-corekit';
-import {
-  type ApiCatchPluginConfig,
-  type ApiCatchPluginResponse
-} from '@qlover/corekit-bridge';
 import { injectable, inject } from 'inversify';
 import type { LoggerInterface } from '@qlover/logger';
 

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

@@ -1,8 +1,8 @@
 import { IOCIdentifier } from '@config/IOCIdentifier';
+import { inject, injectable } from 'inversify';
 import type { RequestCatcherInterface } from '@qlover/corekit-bridge';
 import type { RequestAdapterResponse } from '@qlover/fe-corekit';
 import type { LoggerInterface } from '@qlover/logger';
-import { inject, injectable } from 'inversify';
 
 @injectable()
 export class RequestStatusCatcher

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

@@ -0,0 +1,23 @@
+import { RequestState } from '@qlover/corekit-bridge';
+import type {
+  ResourceQuery,
+  ResourceStateInterface
+} from '@qlover/corekit-bridge';
+
+export interface PaginationInterface<T> {
+  list: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+}
+
+export class ResourceState implements ResourceStateInterface {
+  searchParams: ResourceQuery = {
+    page: 1,
+    pageSize: 10,
+    orderBy: 'updated_at',
+    order: 1
+  };
+  initState = new RequestState<unknown>();
+  listState = new RequestState<PaginationInterface<unknown>>();
+}

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

@@ -1,8 +1,8 @@
-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';
+import type { RouteMeta } from '../types/Page';
+import type { LoggerInterface } from '@qlover/logger';
+import type { ComponentType, LazyExoticComponent, ReactNode } from 'react';
+import type { RouteObject } from 'react-router-dom';
 
 /**
  * Component mapping type for lazy-loaded components

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

@@ -0,0 +1,26 @@
+import type { PageI18nInterface } from '@config/i18n/PageI18nInterface';
+import type { TFunction } from 'i18next';
+
+/**
+ * Translate I18n Interface tools class
+ *
+ * @param i18nInterface - The i18n interface to translate
+ * @param t - The translations function
+ * @returns The translated i18n interface
+ */
+export class TranslateI18nInterface {
+  static translate<T extends PageI18nInterface | Record<string, string>>(
+    source: T,
+    t: TFunction<string, string>
+  ): T {
+    return Object.fromEntries(
+      Object.entries(source).map(([key, value]) => {
+        if (typeof value === 'string') {
+          // 禁用命名空间分隔符，避免冒号被解析为命名空间
+          return [key, t(value, { nsSeparator: false })];
+        }
+        return [key, value];
+      })
+    ) as T;
+  }
+}

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

@@ -1,8 +1,7 @@
-import { StoreInterface, StoreStateInterface } from '@qlover/corekit-bridge';
-import { RequestState } from '../cases/RequestState';
+import { StoreInterface } from '@qlover/corekit-bridge';
+import type { StoreStateInterface, RequestState } from '@qlover/corekit-bridge';
 
 export interface ExecutorPageStateInterface extends StoreStateInterface {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   helloState: RequestState<any>;
 }
 

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

@@ -1,4 +1,4 @@
-import { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
+import type { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
 
 export interface I18nServiceInterface extends BootstrapExecutorPlugin {
   t(key: string, params?: Record<string, unknown>): string;

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

@@ -0,0 +1,36 @@
+import type {
+  EnvConfigInterface,
+  IOCContainerInterface,
+  IOCFunctionInterface,
+  IOCRegisterInterface
+} from '@qlover/corekit-bridge';
+
+/**
+ * IOC register options
+ */
+export type IocRegisterOptions = {
+  /**
+   * The pathname of the current page
+   */
+  pathname: string;
+
+  /**
+   * The app config
+   */
+  appConfig: EnvConfigInterface;
+};
+
+export interface IOCInterface<
+  IdentifierMap,
+  IOCContainer extends IOCContainerInterface
+> {
+  create(
+    options: IocRegisterOptions
+  ): IOCFunctionInterface<IdentifierMap, IOCContainer>;
+}
+
+/**
+ * 提供一个快捷的注册器类型名
+ */
+export interface IOCRegister
+  extends IOCRegisterInterface<IOCContainerInterface, IocRegisterOptions> {}

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

@@ -1,4 +1,5 @@
-import { StoreInterface, StoreStateInterface } from '@qlover/corekit-bridge';
+import { StoreInterface } from '@qlover/corekit-bridge';
+import type { StoreStateInterface } from '@qlover/corekit-bridge';
 
 export interface JSONStoragePageStateInterface extends StoreStateInterface {
   testKey1?: number;

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

@@ -1,4 +1,4 @@
-import { ExecutorPlugin } from '@qlover/fe-corekit';
+import type { ExecutorPlugin } from '@qlover/fe-corekit';
 
 export interface ProcesserExecutorInterface extends ExecutorPlugin {
   /**

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

@@ -1,5 +1,5 @@
-import { StoreInterface, StoreStateInterface } from '@qlover/corekit-bridge';
-import { RequestState } from '../cases/RequestState';
+import { StoreInterface } from '@qlover/corekit-bridge';
+import type { StoreStateInterface, RequestState } from '@qlover/corekit-bridge';
 
 export interface RequestPageStateInterface extends StoreStateInterface {
   helloState: RequestState<unknown>;

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

@@ -1,10 +1,10 @@
-import {
+import { StoreInterface } from '@qlover/corekit-bridge';
+import type { RouteConfigValue } from '../cases/RouterLoader';
+import type {
   LoggerInterface,
-  StoreInterface,
   StoreStateInterface
 } from '@qlover/corekit-bridge';
-import { RouteConfigValue } from '../cases/RouterLoader';
-import { NavigateFunction, NavigateOptions } from 'react-router-dom';
+import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
 
 export interface RouteServiceStateInterface extends StoreStateInterface {
   routes: RouteConfigValue[];
@@ -23,5 +23,9 @@ export abstract class RouteServiceInterface extends StoreInterface<RouteServiceS
   abstract gotoLogin(): void;
   abstract replaceToHome(): void;
   abstract redirectToDefault(navigate: NavigateFunction): void;
-  abstract i18nGuard(lng: string, navigate: NavigateFunction): void;
+  abstract i18nGuard(
+    currentPath: string,
+    lng: string,
+    navigate?: NavigateFunction
+  ): void;
 }

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

@@ -1,6 +1,6 @@
 import { UserAuthService } from '@qlover/corekit-bridge';
-import { ExecutorPlugin } from '@qlover/fe-corekit';
 import type { UserInfo } from '@/base/apis/userApi/UserApiType';
+import type { ExecutorPlugin } from '@qlover/fe-corekit';
 
 export abstract class UserServiceInterface
   extends UserAuthService<UserInfo>

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

@@ -1,23 +1,23 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import HttpApi from 'i18next-http-backend';
-import merge from 'lodash/merge';
-import i18nConfig from '@config/i18n';
+/* eslint-disable import/no-named-as-default-member */
+import { useLocaleRoutes } from '@config/common';
+import { i18nConfig } from '@config/i18n/i18nConfig';
 import {
   type StoreStateInterface,
   StoreInterface
 } from '@qlover/corekit-bridge';
-import { useLocaleRoutes } from '@config/common';
-import { I18nServiceInterface } from '../port/I18nServiceInterface';
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import HttpApi from 'i18next-http-backend';
+import merge from 'lodash/merge';
+import { initReactI18next } from 'react-i18next';
+import type { LocaleType } from '@config/i18n/i18nConfig';
+import type { I18nServiceInterface } from '../port/I18nServiceInterface';
 
 const { supportedLngs, fallbackLng } = i18nConfig;
 
-export type I18nServiceLocale = (typeof supportedLngs)[number];
-
 export class I18nServiceState implements StoreStateInterface {
   loading: boolean = false;
-  constructor(public language: I18nServiceLocale) {}
+  constructor(public language: LocaleType) {}
 }
 
 export class I18nService
@@ -27,11 +27,12 @@ export class I18nService
   readonly pluginName = 'I18nService';
 
   selector = {
-    loading: (state: I18nServiceState) => state.loading
+    loading: (state: I18nServiceState) => state.loading,
+    language: (state: I18nServiceState) => state.language
   };
 
   constructor(protected pathname: string) {
-    super(() => new I18nServiceState(i18n.language as I18nServiceLocale));
+    super(() => new I18nServiceState(i18n.language as LocaleType));
   }
 
   /**
@@ -70,31 +71,30 @@ export class I18nService
         }
 
         return fallbackLng;
-      },
-      cacheUserLanguage(lng: string) {
-        // Only cache language if not using locale routes
-        if (!useLocaleRoutes) {
-          localStorage.setItem('i18nextLng', lng);
-        }
       }
     };
     i18n.services.languageDetector.addDetector(pathLanguageDetector);
+
+    // Sync i18n.language with state.language
+    i18n.on('languageChanged', (lng: string) => {
+      if (this.isValidLanguage(lng) && this.state.language !== lng) {
+        this.emit({ ...this.state, language: lng as LocaleType });
+      }
+    });
   }
 
-  async changeLanguage(language: I18nServiceLocale): Promise<void> {
+  async changeLanguage(language: LocaleType): Promise<void> {
     await i18n.changeLanguage(language);
-    // 如果不使用本地化路由，则保存语言设置到本地存储
-    if (!useLocaleRoutes) {
-      localStorage.setItem('i18nextLng', language);
-    }
+    // Sync state with i18n.language
+    this.emit({ ...this.state, language });
   }
 
   changeLoading(loading: boolean): void {
     this.emit({ ...this.state, loading });
   }
 
-  getCurrentLanguage(): I18nServiceLocale {
-    return i18n.language as I18nServiceLocale;
+  getCurrentLanguage(): LocaleType {
+    return i18n.language as LocaleType;
   }
 
   /**
@@ -102,11 +102,11 @@ export class I18nService
    * @param language - language to check
    * @returns true if the language is supported, false otherwise
    */
-  isValidLanguage(language: string): language is I18nServiceLocale {
-    return supportedLngs.includes(language as I18nServiceLocale);
+  isValidLanguage(language: string): language is LocaleType {
+    return supportedLngs.includes(language as LocaleType);
   }
 
-  getSupportedLanguages(): I18nServiceLocale[] {
+  getSupportedLanguages(): LocaleType[] {
     return [...supportedLngs];
   }
 

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

@@ -0,0 +1,143 @@
+import { routerPrefix } from '@config/common';
+import { I } from '@config/IOCIdentifier';
+import {
+  RequestState,
+  type ResourceStateInterface,
+  type ResourceServiceInterface,
+  type ResourceInterface,
+  type ResourceQuery,
+  ResourceStore
+} from '@qlover/corekit-bridge';
+import { inject, injectable } from 'inversify';
+import type { LocaleType } from '@config/i18n/i18nConfig';
+import { I18nService } from './I18nService';
+import { PaginationInterface, ResourceState } from '../cases/ResourceState';
+
+export interface IdentifierRecord {
+  id: string;
+  locale: LocaleType;
+  localeValue: string;
+}
+
+@injectable()
+export class IdentifierService<T>
+  implements ResourceServiceInterface<T, ResourceStore<ResourceStateInterface>>
+{
+  readonly unionKey: string = 'id';
+  readonly serviceName: string = 'IdentifierService';
+  readonly store: ResourceStore<ResourceStateInterface>;
+  // Not implemented
+  readonly resourceApi!: ResourceInterface<T>;
+  private unsubscribe: (() => void) | null = null;
+
+  constructor(
+    @inject(I.I18nServiceInterface)
+    protected readonly i18nService: I18nService
+  ) {
+    this.store = new ResourceStore(() => new ResourceState());
+  }
+
+  getStore(): ResourceStore<ResourceStateInterface> {
+    return this.store;
+  }
+
+  protected async init(): Promise<unknown> {
+    this.store.changeInitState(new RequestState(true));
+
+    try {
+      const result = await this.search({
+        locale: this.i18nService.getCurrentLanguage() as LocaleType
+      });
+
+      this.store.changeInitState(new RequestState(false, result).end());
+      return result;
+    } catch (error) {
+      this.store.changeInitState(new RequestState(false, null, error).end());
+
+      return error;
+    }
+  }
+
+  /**
+   * @override
+   */
+  async created(): Promise<unknown> {
+    this.unsubscribe = this.i18nService.observe(
+      (state) => state.language,
+      () => {
+        this.init();
+      }
+    );
+
+    return this.init();
+  }
+
+  /**
+   * @override
+   */
+  destroyed(): void {
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+
+    this.store.reset();
+  }
+
+  /**
+   * @override
+   */
+  updated(): void {}
+
+  async search(
+    params: Partial<ResourceQuery & { locale: LocaleType }>
+  ): Promise<PaginationInterface<IdentifierRecord>> {
+    this.store.changeListState(
+      new RequestState(true, this.store.state.listState.result)
+    );
+
+    const locale = params.locale!;
+
+    const response = await fetch(
+      `${routerPrefix}/locales/${locale}/common.json`
+    );
+    const data = await response.json();
+
+    let index = 0;
+    const resultList: IdentifierRecord[] = Object.entries(data).map(
+      ([key, value]) => ({
+        index: (index += 1),
+        id: key,
+        locale: locale,
+        localeValue: value as string
+      })
+    );
+
+    const result: PaginationInterface<IdentifierRecord> = {
+      list: resultList,
+      total: resultList.length,
+      page: 1,
+      pageSize: 10
+    };
+
+    this.store.changeListState(new RequestState(false, result).end());
+
+    return result;
+  }
+
+  refresh(): Promise<unknown> {
+    return this.search(this.store.state.searchParams);
+  }
+
+  async update(_data: Partial<T>): Promise<unknown> {
+    return Promise.resolve(null);
+  }
+
+  create(_data: T): Promise<unknown> {
+    return Promise.resolve(null);
+  }
+  remove(_data: T): Promise<unknown> {
+    return Promise.resolve(null);
+  }
+  export(_data: T): Promise<unknown> {
+    return Promise.resolve(null);
+  }
+}

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

@@ -1,14 +1,14 @@
+import { IOCIdentifier } from '@config/IOCIdentifier';
 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 type { ProcesserExecutorInterface } from '../port/ProcesserExecutorInterface';
-import type { BootstrapContextValue } from '@qlover/corekit-bridge';
 import type { RouteServiceInterface } from '../port/RouteServiceInterface';
+import type { BootstrapContextValue } from '@qlover/corekit-bridge';
+import type { LoggerInterface } from '@qlover/logger';
 
 @injectable()
 export class ProcesserExecutor implements ProcesserExecutorInterface {

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

@@ -1,14 +1,16 @@
+import { i18nConfig } from '@config/i18n/i18nConfig';
 import type { RouteConfigValue } from '@/base/cases/RouterLoader';
-import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
-import type { LoggerInterface } from '@qlover/logger';
 import { RouteServiceInterface } from '../port/RouteServiceInterface';
+import type { I18nServiceInterface } from '../port/I18nServiceInterface';
 import type {
   UIBridgeInterface,
   StoreStateInterface
 } from '@qlover/corekit-bridge';
-import { I18nServiceInterface } from '../port/I18nServiceInterface';
+import type { LoggerInterface } from '@qlover/logger';
+import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
 
 export type RouterServiceOptions = {
+  routerPrefix: string;
   routes: RouteConfigValue[];
   /**
    * Whether to use locale routes
@@ -82,15 +84,32 @@ export class RouteService extends RouteServiceInterface {
     this.goto('/', { replace: true, navigate });
   }
 
-  override i18nGuard(lng: string, navigate?: NavigateFunction): void {
+  override i18nGuard(
+    currentPath: string,
+    lng: string,
+    navigate?: NavigateFunction
+  ): void {
+    // 只在使用本地化路由时才检查
     if (!this.state.localeRoutes) {
       return;
     }
 
-    if (!lng) {
-      this.goto('/404', { replace: true, navigate });
-    } else if (!this.i18nService.isValidLanguage(lng)) {
-      this.goto('/404', { replace: true, navigate });
+    const _navigate = navigate || this.uiBridge.getUIBridge();
+
+    lng = lng || i18nConfig.fallbackLng;
+
+    // 如果没有语言参数或语言无效
+    if (!this.i18nService.isValidLanguage(lng)) {
+      // 重定向到默认语言？
+      if (i18nConfig.noValidRedirectFallbackLng) {
+        const newPath = currentPath.replace(lng, i18nConfig.fallbackLng);
+
+        _navigate?.(newPath, { replace: true });
+        return;
+      }
+
+      // 不支持的语言直接404
+      _navigate?.('/404', { replace: true });
     }
   }
 }