@qlover/create-app 0.0.1

package/templates/fe-react/src/pages/base/Layout.tsx

@@ -0,0 +1,17 @@
+import BaseHeader from './components/BaseHeader';
+import { Outlet } from 'react-router-dom';
+import { ProcessProvider } from '@/components/ProcessProvider';
+
+export default function Layout() {
+  return (
+    <ProcessProvider>
+      <div data-testid="basic-layout" className="text-base">
+        <BaseHeader />
+
+        <div className="text-black bg-white">
+          <Outlet />
+        </div>
+      </div>
+    </ProcessProvider>
+  );
+}

package/templates/fe-react/src/pages/base/RedirectPathname.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const RedirectToDefault = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Redirect to the default language path
+    navigate('/en', { replace: true });
+  }, [navigate]);
+
+  return null;
+};
+
+export default RedirectToDefault;

package/templates/fe-react/src/pages/base/Request.tsx

@@ -0,0 +1,91 @@
+import { jsonStorageController, requestController } from '@/containers';
+import { useControllerState } from '@lib/fe-react-controller';
+import { useBaseRoutePage } from '../../containers/context/BaseRouteContext';
+
+export default function Request() {
+  const requestControllerState = useControllerState(requestController);
+  const jsonStorageControllerState = useControllerState(jsonStorageController);
+  const { t } = useBaseRoutePage();
+
+  return (
+    <div className="min-h-screen bg-gray-100 py-6 flex flex-col sm:py-12">
+      <div className="bg-white shadow-lg rounded-lg px-8 py-6">
+        {t('requestTimeout')}: {jsonStorageControllerState.requestTimeout}
+      </div>
+
+      <div className="bg-white shadow-lg rounded-lg px-8 py-6">
+        <button
+          className="bg-blue-500 text-white px-4 py-2 rounded-md"
+          onClick={requestController.onHello}
+        >
+          {requestControllerState.helloState.loading ? 'Loading...' : 'Hello'}
+        </button>
+        <div className="mt-4">
+          {t('helloResult')}:{' '}
+          {JSON.stringify(requestControllerState.helloState.result)}
+        </div>
+        <div className="mt-4">
+          {t('helloError')}:{' '}
+          {JSON.stringify(requestControllerState.helloState.error)}
+        </div>
+      </div>
+
+      <div className="bg-white shadow-lg rounded-lg px-8 py-6">
+        <button
+          className="bg-blue-500 text-white px-4 py-2 rounded-md"
+          onClick={requestController.onIpInfo}
+        >
+          {requestControllerState.ipInfoState.loading
+            ? t('loading')
+            : t('ipInfo')}
+        </button>
+        <div className="mt-4">
+          {t('ipInfoResult')}:{' '}
+          {JSON.stringify(requestControllerState.ipInfoState.result)}
+        </div>
+      </div>
+
+      <div className="bg-white shadow-lg rounded-lg px-8 py-6">
+        <button
+          className="bg-blue-500 text-white px-4 py-2 rounded-md"
+          onClick={requestController.onRandomUser}
+        >
+          {requestControllerState.randomUserState.loading
+            ? t('loading')
+            : t('randomUser')}
+        </button>
+        <div className="mt-4">
+          {t('randomUserResult')}:{' '}
+          {JSON.stringify(requestControllerState.randomUserState.result)}
+        </div>
+        <div className="mt-4">
+          {t('randomUserError')}:{' '}
+          {JSON.stringify(requestControllerState.randomUserState.error)}
+        </div>
+      </div>
+
+      <div className="bg-white shadow-lg rounded-lg px-8 py-6">
+        <button
+          className="bg-blue-500 text-white px-4 py-2 rounded-md"
+          onClick={requestController.onTriggerAbortRequest}
+        >
+          {requestControllerState.abortState.loading
+            ? t('stopAbortRequest')
+            : t('triggerAbortRequest')}
+          <span className="text-xs">
+            {requestControllerState.abortState.loading ? t('loading') : ''}
+          </span>
+        </button>
+
+        <div className="mt-4">
+          {t('abortRequestResult')}:{' '}
+          {JSON.stringify(requestControllerState.abortState.result)}
+        </div>
+        <div className="mt-4">
+          {t('abortRequestError')}:{' '}
+          {JSON.stringify(requestControllerState.abortState.error)}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/fe-react/src/pages/base/components/BaseHeader.tsx

@@ -0,0 +1,19 @@
+import ThemeSwitcher from '@/components/ThemeSwitcher';
+import LocaleLink from '@/components/LocaleLink';
+
+export default function BaseHeader() {
+  return (
+    <header className="h-10 bg-white sticky top-0 z-50">
+      <div className="flex items-center justify-between h-full px-2">
+        <div className="flex items-center">
+          <LocaleLink href="/">
+            <img src="/logo.svg" alt="logo" />
+          </LocaleLink>
+        </div>
+        <div className="flex items-center">
+          <ThemeSwitcher />
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/fe-react/src/pages/index.tsx

@@ -0,0 +1,108 @@
+import { lazy, Suspense } from 'react';
+import isString from 'lodash/isString';
+import { LoadProps, PagesMaps, RouteCategory, RouteType } from '@/types/Page';
+import { Loading } from '@/components/Loading';
+import BaseRouteProvider from '../containers/context/BaseRouteProvider';
+import NotFound from './404';
+import NotFound500 from './500';
+
+const staticComponentsMaps: Record<string, () => React.ComponentType<unknown>> =
+  {
+    '404': () => NotFound as React.ComponentType<unknown>,
+    '500': () => NotFound500 as React.ComponentType<unknown>
+  };
+
+const getRealComponents = () => {
+  return import.meta.glob('./*/**/*.tsx');
+};
+
+const getLazyComponentMaps = () => {
+  const modules = getRealComponents();
+
+  const pagesMaps: PagesMaps = {};
+
+  for (const path in modules) {
+    const componentName = path.replace(/^\.\/(.*)\.tsx$/, '$1');
+
+    pagesMaps[componentName] = () =>
+      lazy(
+        modules[path] as () => Promise<{
+          default: React.ComponentType<unknown>;
+        }>
+      );
+  }
+
+  return pagesMaps;
+};
+
+// 懒加载组件
+const lazyLoad = ({ pagesMaps, componentPath, route, Provider }: LoadProps) => {
+  // first try static
+  let loadedComponent = staticComponentsMaps[componentPath];
+  if (!loadedComponent) {
+    loadedComponent = pagesMaps[componentPath];
+  }
+
+  if (!loadedComponent) {
+    console.warn(`Route ${componentPath} not found`);
+    return <NotFound route={componentPath} />;
+  }
+
+  const Component = loadedComponent();
+
+  return (
+    <Suspense fallback={<Loading fullscreen />}>
+      {Provider ? (
+        <Provider {...route.meta}>
+          <Component />
+        </Provider>
+      ) : (
+        <Component />
+      )}
+    </Suspense>
+  );
+};
+
+// 转换单个路由
+const transformRoute = (
+  route: RouteType,
+  options: Pick<LoadProps, 'pagesMaps' | 'Provider'>
+): RouteType => {
+  const result: RouteType = {
+    ...route,
+    path: route.path
+  };
+
+  if (isString(route.element)) {
+    result.element = lazyLoad({
+      ...options,
+      componentPath: route.element,
+      route
+    });
+  }
+
+  if (route.children) {
+    result.children = route.children.map((child) =>
+      transformRoute(child, options)
+    );
+  }
+
+  return result;
+};
+
+export function createFeReactRoutes(routes: RouteType[]) {
+  const pagesMaps = getLazyComponentMaps();
+
+  return routes.map((route) =>
+    transformRoute(route, { pagesMaps, Provider: BaseRouteProvider })
+  );
+}
+
+export function filterRoutesByCategory(
+  routes: RouteType[],
+  category: RouteCategory[]
+): RouteType[] {
+  return routes.filter((route) =>
+    route.meta?.category ? category.includes(route.meta?.category) : true
+  );
+}

package/templates/fe-react/src/services/controllers/ExecutorController.ts

@@ -0,0 +1,56 @@
+import { FeController } from '@lib/fe-react-controller';
+import { FeApi } from '@/services/feApi';
+import cloneDeep from 'lodash/cloneDeep';
+import {
+  ExecutorPlugin,
+  RequestAdapterResponse
+} from 'packages/fe-utils/interface';
+import { RequestAdapterFetchConfig } from '@qlover/fe-utils';
+
+function createDefaultState() {
+  return {
+    helloState: {
+      loading: false,
+      result: null as unknown,
+      error: null as unknown
+    }
+  };
+}
+
+export type ExecutorControllerState = ReturnType<typeof createDefaultState>;
+
+const TestPlugin: ExecutorPlugin<RequestAdapterFetchConfig> = {
+  pluginName: 'test',
+  async onSuccess({ parameters, returnValue }) {
+    if (
+      parameters.responseType === 'text' &&
+      (returnValue as RequestAdapterResponse).data instanceof Response
+    ) {
+      (returnValue as RequestAdapterResponse<unknown, string>).data = await (
+        returnValue as RequestAdapterResponse<unknown, Response>
+      ).data.text();
+    }
+  }
+};
+
+export class ExecutorController extends FeController<ExecutorControllerState> {
+  private feApi: FeApi;
+
+  constructor(feApi: FeApi) {
+    super(createDefaultState());
+
+    this.feApi = cloneDeep(feApi);
+
+    this.feApi.usePlugin(TestPlugin);
+  }
+
+  onTestPlugins = async () => {
+    console.log('onTestPlugins');
+
+    const res = await this.feApi.get('/api/v1/executor/test', {
+      responseType: 'text'
+    });
+
+    console.log('res', res);
+  };
+}

package/templates/fe-react/src/services/controllers/JSONStorageController.ts

@@ -0,0 +1,42 @@
+import { FeController } from '@lib/fe-react-controller';
+import { JSONStorage } from '@qlover/fe-utils';
+import { random } from 'lodash';
+
+interface JSONStoragePageState {
+  testKey1?: number;
+  testKey2?: number;
+  expireTime: number;
+  requestTimeout: number;
+}
+
+export class JSONStorageController extends FeController<JSONStoragePageState> {
+  constructor(private storage: JSONStorage) {
+    super({
+      testKey1: storage.getItem('testKey1') ?? 0,
+      testKey2: storage.getItem('testKey2') ?? 0,
+      expireTime: 5000,
+      requestTimeout: storage.getItem('requestTimeout') ?? 5000
+    });
+  }
+
+  changeRandomTestKey1 = (): void => {
+    const value = random(100, 9000);
+    this.storage.setItem('testKey1', value);
+    this.emit({ ...this.state, testKey1: value });
+  };
+
+  onChangeRandomTestKey2 = (): void => {
+    const value = random(100, 9000);
+    this.storage.setItem('testKey2', value, Date.now() + this.state.expireTime);
+    this.emit({ ...this.state, testKey2: value });
+  };
+
+  changeExpireTime = (expireTime: number): void => {
+    this.emit({ ...this.state, expireTime });
+  };
+
+  changeRequestTimeout = (requestTimeout: number): void => {
+    this.storage.setItem('requestTimeout', requestTimeout);
+    this.emit({ ...this.state, requestTimeout });
+  };
+}

package/templates/fe-react/src/services/controllers/RequestController.ts

@@ -0,0 +1,105 @@
+import { OpenAIClient } from '@lib/openAiApi/OpenAIClient';
+import { FeController } from '@lib/fe-react-controller';
+import { FeApi } from '@/services/feApi';
+import { logger } from '@/containers/globals';
+
+function createDefaultState() {
+  return {
+    helloState: {
+      loading: false,
+      result: null as unknown,
+      error: null as unknown
+    },
+    ipInfoState: {
+      loading: false,
+      result: null as unknown,
+      error: null as unknown
+    },
+    randomUserState: {
+      loading: false,
+      result: null as unknown,
+      error: null as unknown
+    },
+    abortState: {
+      loading: false,
+      result: null as unknown,
+      error: null as unknown
+    }
+  };
+}
+
+export type RequestControllerState = ReturnType<typeof createDefaultState>;
+
+export class RequestController extends FeController<RequestControllerState> {
+  constructor(
+    private readonly aiApi: OpenAIClient,
+    private readonly feApi: FeApi
+  ) {
+    super(createDefaultState());
+  }
+
+  onHello = async () => {
+    this.setState({ helloState: { loading: true, result: '', error: null } });
+
+    try {
+      const result = await this.aiApi.completion({
+        messages: [{ role: 'user', content: 'Hello, world!' }]
+      });
+      this.setState({ helloState: { loading: false, result, error: null } });
+    } catch (error) {
+      logger.error(error);
+      this.setState({ helloState: { loading: false, result: null, error } });
+    }
+  };
+
+  onIpInfo = async () => {
+    this.setState({
+      ipInfoState: { loading: true, result: null, error: null }
+    });
+    try {
+      const result = await this.feApi.getIpInfo();
+      this.setState({ ipInfoState: { loading: false, result, error: null } });
+    } catch (error) {
+      logger.error(error);
+      this.setState({ ipInfoState: { loading: false, result: null, error } });
+    }
+  };
+
+  onRandomUser = async () => {
+    this.setState({
+      randomUserState: { loading: true, result: null, error: null }
+    });
+    try {
+      const result = await this.feApi.getRandomUser();
+      this.setState({
+        randomUserState: { loading: false, result, error: null }
+      });
+    } catch (error) {
+      logger.error(error);
+      this.setState({
+        randomUserState: { loading: false, result: null, error }
+      });
+    }
+  };
+
+  onTriggerAbortRequest = async () => {
+    if (this.state.abortState.loading) {
+      this.stopAbortRequest();
+      return;
+    }
+
+    this.setState({ abortState: { loading: true, result: null, error: null } });
+    try {
+      await this.feApi.request({
+        method: 'GET',
+        url: 'https://api.example.com/users'
+      });
+    } catch (error) {
+      this.setState({ abortState: { loading: false, result: null, error } });
+    }
+  };
+
+  stopAbortRequest = async () => {
+    this.feApi.stop({ method: 'GET', url: 'https://api.example.com/users' });
+  };
+}

package/templates/fe-react/src/services/controllers/RouterController.ts

@@ -0,0 +1,90 @@
+import { I18nService } from '@/services/i18n';
+import { RouteConfig, RouteType } from '@/types/Page';
+import { UIDependenciesInterface } from '@/types/UIDependenciesInterface';
+import { i18nConfig } from '@config/i18n';
+import { Logger } from '@qlover/fe-utils';
+import { NavigateFunction, NavigateOptions } from 'react-router-dom';
+
+export type RouterControllerDependencies = {
+  location: globalThis.Location;
+  navigate: NavigateFunction;
+};
+
+export type RouterControllerOptions = {
+  config: RouteConfig;
+  logger: Logger;
+};
+
+export type RouterControllerState = {
+  routes: RouteType[];
+};
+
+export class RouterController
+  implements UIDependenciesInterface<RouterControllerDependencies>
+{
+  /**
+   * @override
+   */
+  dependencies?: RouterControllerDependencies;
+
+  state: RouterControllerState;
+
+  constructor(private options: RouterControllerOptions) {
+    this.state = {
+      routes: options.config.routes
+    };
+  }
+
+  get logger(): Logger {
+    return this.options.logger;
+  }
+
+  get navigate(): NavigateFunction | undefined {
+    const navigate = this.dependencies?.navigate;
+
+    if (!navigate) {
+      this.logger.debug('navigate is not set');
+    }
+
+    return navigate;
+  }
+
+  /**
+   * @override
+   */
+  setDependencies(dependencies: Partial<RouterControllerDependencies>): void {
+    this.dependencies = Object.assign(
+      this.dependencies || {},
+      dependencies
+    ) as RouterControllerDependencies;
+  }
+
+  getRoutes(): RouteType[] {
+    return this.state.routes;
+  }
+
+  changeRoutes(routes: RouteType[]): void {
+    this.state.routes = routes;
+  }
+
+  goto(path: string, options?: NavigateOptions): void {
+    console.trace('path');
+
+    const tryLng = path.split('/')[0];
+    if (!I18nService.isValidLanguage(tryLng)) {
+      path = i18nConfig.fallbackLng + path.replace(tryLng, '');
+    }
+
+    this.navigate?.(path, options);
+
+    this.navigate?.(path, options);
+  }
+
+  gotoLogin(): void {
+    this.goto('/login', { replace: true });
+  }
+
+  replaceToHome(): void {
+    this.goto('/', { replace: true });
+  }
+}

package/templates/fe-react/src/services/controllers/UserController.ts

@@ -0,0 +1,146 @@
+import { ExecutorPlugin, JSONStorage } from '@qlover/fe-utils';
+import { sleep } from '@/utils/thread';
+import { FeController } from '@lib/fe-react-controller';
+import { FeApi, } from '@/services/feApi';
+import { FeApiGetUserInfo, FeApiLogin } from '@/services/feApi/FeApiType';
+import { adjustExpirationTime } from '@/utils/datetime';
+import { RouterController } from './RouterController';
+
+export interface UserControllerState {
+  success: boolean;
+  userInfo: FeApiGetUserInfo['response']['data'];
+}
+
+export interface UserControllerOptions {
+  /**
+   * @default `month`
+   */
+  expiresIn?: number | 'day' | 'week' | 'month' | 'year';
+  storageKey: string;
+  storage: JSONStorage;
+  feApi: FeApi;
+  routerController: RouterController;
+}
+
+interface LoginInterface {
+  login(
+    params: FeApiLogin['request']
+  ): Promise<FeApiGetUserInfo['response']['data']>;
+  logout(): void;
+}
+
+function restoreUserSession(options: UserControllerOptions): {
+  state: UserControllerState;
+  token: string;
+} {
+  const { storageKey, storage } = options;
+  const token = storage.getItem(storageKey, '') as string;
+
+  return {
+    state: {
+      success: !!token,
+      userInfo: {
+        name: '',
+        email: '',
+        picture: ''
+      }
+    },
+    token
+  };
+}
+
+export class UserController
+  extends FeController<UserControllerState>
+  implements ExecutorPlugin, LoginInterface
+{
+  readonly pluginName = 'UserController';
+
+  private token = '';
+
+  constructor(private options: UserControllerOptions) {
+    const restoreSession = restoreUserSession(options);
+    super(restoreSession.state);
+
+    this.token = restoreSession.token;
+  }
+
+  selectorSuccess = (state: UserControllerState): boolean => state.success;
+
+  /**
+   * @override
+   */
+  async onBefore(): Promise<void> {
+    await sleep(1000);
+
+    if (!this.token) {
+      throw new Error('User not logged in');
+    }
+
+    const userInfo = await this.options.feApi.getUserInfo();
+
+    this.setState({
+      success: true,
+      userInfo: userInfo.data
+    });
+  }
+
+  /**
+   * @override
+   */
+  async onError(): Promise<void> {
+    this.logout();
+
+    this.options.routerController.gotoLogin();
+  }
+
+  /**
+   * @override
+   */
+  async login(
+    params: FeApiLogin['request']
+  ): Promise<FeApiGetUserInfo['response']['data']> {
+    const { feApi } = this.options;
+
+    const result = await feApi.login(params);
+
+    this.setToken(result.data.token);
+
+    const userInfo = await feApi.getUserInfo();
+
+    this.setState({
+      success: true,
+      userInfo: userInfo.data
+    });
+
+    return userInfo.data;
+  }
+
+  /**
+   * @override
+   */
+  logout(): void {
+    this.reset();
+  }
+
+  setToken(token: string): void {
+    this.token = token;
+
+    const { storageKey, storage } = this.options;
+
+    storage.setItem(
+      storageKey,
+      this.token,
+      adjustExpirationTime(Date.now(), this.options.expiresIn ?? 'month')
+    );
+  }
+
+  reset(): void {
+    this.token = '';
+    this.options.storage.removeItem(this.options.storageKey);
+    this.setState({ success: false });
+  }
+
+  isAuthenticated(): boolean {
+    return this.state.success;
+  }
+}