@qlover/create-app 0.4.4 → 0.4.6

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

@@ -4,11 +4,11 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 import HttpApi from 'i18next-http-backend';
 import merge from 'lodash/merge';
 import i18nConfig from '@config/i18n';
-import type { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
 import {
-  StoreInterface,
-  StoreStateInterface
-} from '@/base/port/StoreInterface';
+  type BootstrapExecutorPlugin,
+  type StoreStateInterface,
+  StoreInterface
+} from '@qlover/corekit-bridge';
 const { supportedLngs, fallbackLng } = i18nConfig;
 
 export type I18nServiceLocale = (typeof supportedLngs)[number];

package/{templates/react-app/src/base/services/ProcesserService.ts → dist/templates/react-app/src/base/services/ProcesserExecutor.ts}

@@ -2,12 +2,15 @@ import { AsyncExecutor, ExecutorPlugin } from '@qlover/fe-corekit';
 import { IOCIdentifier } from '@/core/IOC';
 import { injectable, inject } from 'inversify';
 import type { LoggerInterface } from '@qlover/logger';
+import { RouteService } from './RouteService';
 
 @injectable()
-export class ProcesserService {
+export class ProcesserExecutor {
+  protected executor: AsyncExecutor = new AsyncExecutor();
+
   constructor(
     @inject(IOCIdentifier.Logger) private logger: LoggerInterface,
-    @inject(AsyncExecutor) private executor: AsyncExecutor
+    @inject(RouteService) private routeService: RouteService
   ) {}
 
   use(plugin: ExecutorPlugin): this {
@@ -21,9 +24,16 @@ export class ProcesserService {
     });
   }
 
-  init(): Promise<unknown> {
-    return this.executor.exec(this.handler).catch((err) => {
+  async starup(): Promise<unknown> {
+    this.logger.info('PageProcesser startup');
+
+    try {
+      const result = await this.executor.exec(this.handler);
+      return result;
+    } catch (err) {
       this.logger.error('PageProcesser init failed', err);
-    });
+
+      this.routeService.gotoLogin();
+    }
   }
 }

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

@@ -3,23 +3,23 @@ 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, StoreStateInterface } from '@qlover/corekit-bridge';
 
 export type RouterServiceDependencies = {
   navigate: NavigateFunction;
 };
 
 export type RouterServiceOptions = {
-  config: {
-    routes: RouteConfigValue[];
-  };
+  routes: RouteConfigValue[];
   logger: LoggerInterface;
 };
 
-export type RouterServiceState = {
-  routes: RouteConfigValue[];
-};
+export class RouterServiceState implements StoreStateInterface {
+  constructor(public routes: RouteConfigValue[] = []) {}
+}
 
 export class RouteService
+  extends StoreInterface<RouterServiceState>
   implements UIDependenciesInterface<RouterServiceDependencies>
 {
   /**
@@ -27,12 +27,8 @@ export class RouteService
    */
   dependencies?: RouterServiceDependencies;
 
-  state: RouterServiceState;
-
   constructor(private options: RouterServiceOptions) {
-    this.state = {
-      routes: options.config.routes
-    };
+    super(() => new RouterServiceState(options.routes));
   }
 
   get logger(): LoggerInterface {
@@ -43,7 +39,9 @@ export class RouteService
     const navigate = this.dependencies?.navigate;
 
     if (!navigate) {
-      this.logger.debug('navigate is not set');
+      this.logger.debug(
+        'Please use `RouterServiceProvider` to set dependencies'
+      );
     }
 
     return navigate;
@@ -69,7 +67,7 @@ export class RouteService
   }
 
   changeRoutes(routes: RouteConfigValue[]): void {
-    this.state.routes = routes;
+    this.emit({ routes });
   }
 
   goto(path: string, options?: NavigateOptions): void {

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

@@ -1,21 +1,34 @@
-import { ExecutorPlugin } from '@qlover/fe-corekit';
+import type { ExecutorPlugin } from '@qlover/fe-corekit';
 import type {
   UserApiGetUserInfoTransaction,
   UserApiLoginTransaction
 } from '@/base/apis/userApi/UserApiType';
 import { RouteService } from './RouteService';
-import { ThreadUtil, type StorageTokenInterface } from '@qlover/corekit-bridge';
+import {
+  StoreInterface,
+  StoreStateInterface,
+  type StorageTokenInterface
+} from '@qlover/corekit-bridge';
 import { inject, injectable } from 'inversify';
 import { IOCIdentifier } from '@/core/IOC';
-import { LoginInterface, RegisterFormData } from '@/base/port/LoginInterface';
 import { UserApi } from '@/base/apis/userApi/UserApi';
 import { AppError } from '@/base/cases/AppError';
-import { StoreInterface, StoreStateInterface } from '../port/StoreInterface';
-import * as errKeys from '@config/Identifier/Error';
+import * as errKeys from '@config/Identifier/error';
+
+export type UserServiceUserInfo =
+  UserApiGetUserInfoTransaction['response']['data'];
+
+export interface RegisterFormData {
+  username: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+  agreeToTerms: boolean;
+}
 
 class UserServiceState implements StoreStateInterface {
   success: boolean = false;
-  userInfo: UserApiGetUserInfoTransaction['response']['data'] = {
+  userInfo: UserServiceUserInfo = {
     name: '',
     email: '',
     picture: ''
@@ -25,28 +38,30 @@ class UserServiceState implements StoreStateInterface {
 @injectable()
 export class UserService
   extends StoreInterface<UserServiceState>
-  implements ExecutorPlugin, LoginInterface
+  implements ExecutorPlugin
 {
   readonly pluginName = 'UserService';
 
   constructor(
     @inject(UserApi) private userApi: UserApi,
-    @inject(RouteService) private routerController: RouteService,
+    @inject(RouteService) private routerService: RouteService,
     @inject(IOCIdentifier.FeApiToken)
     private userToken: StorageTokenInterface<string>
   ) {
     super(() => new UserServiceState());
   }
 
-  setState(state: Partial<UserServiceState>): void {
-    this.emit({ ...this.state, ...state });
-  }
+  selector = {
+    success: (state: UserServiceState) => state.success
+  };
 
   /**
    * @override
    */
   async onBefore(): Promise<void> {
-    await ThreadUtil.sleep(1000);
+    if (this.isAuthenticated()) {
+      return;
+    }
 
     const userToken = this.userToken.getToken();
 
@@ -56,19 +71,18 @@ export class UserService
 
     const userInfo = await this.userApi.getUserInfo();
 
-    this.setState({
+    this.emit({
       success: true,
       userInfo: userInfo.data
     });
   }
 
-  /**
-   * @override
-   */
-  async onError(): Promise<void> {
-    this.logout();
-
-    this.routerController.gotoLogin();
+  onSuccess(): void | Promise<void> {
+    if (this.isAuthenticated()) {
+      this.emit({ ...this.state, success: true });
+    } else {
+      this.logout();
+    }
   }
 
   /**
@@ -91,7 +105,7 @@ export class UserService
 
     const userInfo = await this.userApi.getUserInfo();
 
-    this.setState({
+    this.emit({
       success: true,
       userInfo: userInfo.data
     });
@@ -104,6 +118,8 @@ export class UserService
    */
   logout(): void {
     this.reset();
+    this.routerService.reset();
+    this.routerService.gotoLogin();
   }
 
   /**

package/{templates → dist/templates}/react-app/src/base/types/Page.ts

@@ -10,12 +10,22 @@ export interface BasePageProvider {
 type RouteCategory = 'main' | 'auth' | 'common';
 
 export interface RouteMeta {
-  category?: RouteCategory;
   /**
-   * from app.router.json
+   * The title of the route
    */
   title?: string;
+
+  /**
+   * The description of the route
+   */
+  description?: string;
+
+  /**
+   * The icon of the route
+   */
   icon?: string;
+
+  category?: RouteCategory;
   /**
    * from app.router.json
    *

package/{templates → dist/templates}/react-app/src/core/bootstrap.ts

@@ -4,7 +4,7 @@ import { IOC } from './IOC';
 import * as globals from '@/core/globals';
 import { IocRegister } from './registers';
 import { BootstrapsRegistry } from './bootstraps';
-import { GLOBAL_NO_WINDOW } from '@config/Identifier/Error';
+import { GLOBAL_NO_WINDOW } from '@config/Identifier/error';
 
 export default async function startup({
   root,

package/{templates → dist/templates}/react-app/src/core/bootstraps/index.ts

@@ -11,6 +11,7 @@ import { AiApiBootstarp } from '@/base/apis/AiApi';
 import { printBootstrap } from './PrintBootstrap';
 import { IOCIdentifier, type IOCIdentifierMap } from '../IOC';
 import { I18nService } from '@/base/services/I18nService';
+import { I18nKeyErrorPlugin } from '@/base/cases/I18nKeyErrorPlugin';
 
 export class BootstrapsRegistry {
   constructor(
@@ -29,7 +30,8 @@ export class BootstrapsRegistry {
       new UserApiBootstarp(),
       new FeApiBootstarp(),
       AiApiBootstarp,
-      new BootstrapApp()
+      new BootstrapApp(),
+      IOC(I18nKeyErrorPlugin)
     ];
 
     if (this.appConfig.env !== 'production') {

package/{templates → dist/templates}/react-app/src/core/globals.ts

@@ -16,7 +16,8 @@ export const dialogHandler = new DialogHandler();
  */
 export const logger = new Logger({
   handlers: new ConsoleHandler(new ColorFormatter(loggerStyles)),
-  silent: isProduction
+  silent: isProduction,
+  level: 'debug'
 });
 
 /**

package/{templates → dist/templates}/react-app/src/core/registers/RegisterCommon.ts

@@ -16,11 +16,11 @@ import {
 } from '@qlover/corekit-bridge';
 import mockDataJson from '@config/feapi.mock.json';
 import { RequestStatusCatcher } from '@/base/cases/RequestStatusCatcher';
-import themeConfig from '@config/theme.json';
+import { themeConfig } from '@config/theme';
 import { localJsonStorage, logger } from '../globals';
 import { I18nService } from '@/base/services/I18nService';
 import { RouteService } from '@/base/services/RouteService';
-import { base as baseRoutes } from '@config/app.router.json';
+import { baseRoutes } from '@config/app.router';
 
 export class RegisterCommon implements InversifyRegisterInterface {
   register(
@@ -30,10 +30,10 @@ export class RegisterCommon implements InversifyRegisterInterface {
   ): void {
     const AppConfig = container.get(IOCIdentifier.AppConfig);
 
-    const userToken = new UserToken(
-      AppConfig.userTokenStorageKey,
-      container.get(JSONStorage)
-    );
+    const userToken = new UserToken({
+      storageKey: AppConfig.userTokenStorageKey,
+      storage: container.get(JSONStorage)
+    });
     const feApiAbort = new FetchAbortPlugin();
     const feApiRequestCommonPlugin = new RequestCommonPlugin({
       tokenPrefix: AppConfig.openAiTokenPrefix,
@@ -69,7 +69,7 @@ export class RegisterCommon implements InversifyRegisterInterface {
     container.bind(
       RouteService,
       new RouteService({
-        config: baseRoutes,
+        routes: baseRoutes,
         logger
       })
     );

package/{templates → dist/templates}/react-app/src/core/registers/RegisterControllers.ts

@@ -1,15 +1,20 @@
 import { localJsonStorage } from '../globals';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
-import { ProcesserService } from '@/base/services/ProcesserService';
+import { ProcesserExecutor } from '@/base/services/ProcesserExecutor';
 import { UserService } from '@/base/services/UserService';
 import { InversifyRegisterInterface } from '../IOC';
 import { InversifyContainer } from '../IOC';
+import { I18nKeyErrorPlugin } from '@/base/cases/I18nKeyErrorPlugin';
+
 export class RegisterControllers implements InversifyRegisterInterface {
   register(container: InversifyContainer): void {
     const jsonStorageController = new JSONStorageController(localJsonStorage);
 
     container.bind(JSONStorageController, jsonStorageController);
 
-    container.get(ProcesserService).use(container.get(UserService));
+    container
+      .get(ProcesserExecutor)
+      .use(container.get(I18nKeyErrorPlugin))
+      .use(container.get(UserService));
   }
 }

package/{templates → dist/templates}/react-app/src/pages/404.tsx

@@ -1,4 +1,6 @@
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
+import { PAGE_404_TITLE } from '@config/Identifier/common';
+import { NOT_FOUND_COMPONENT } from '@config/Identifier/error';
 
 export default function NotFound({ route }: { route?: string }) {
   const { t } = useBaseRoutePage();
@@ -6,7 +8,8 @@ export default function NotFound({ route }: { route?: string }) {
     <div className="flex flex-col justify-center min-h-screen py-6 bg-background sm:py-12">
       <div className="relative py-3 mx-auto sm:max-w-xl">
         <h1 className="text-text text-2xl font-bold text-center">
-          404 -{route ? `${t('404.notComponent')}: ${route}` : t('404.notPage')}
+          404 -
+          {route ? `${t(NOT_FOUND_COMPONENT)}: ${route}` : t(PAGE_404_TITLE)}
         </h1>
       </div>
     </div>

package/{templates → dist/templates}/react-app/src/pages/500.tsx

@@ -1,4 +1,5 @@
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
+import { PAGE_500_TITLE } from '@config/Identifier/common';
 
 export default function NotFound500() {
   const { t } = useBaseRoutePage();
@@ -6,7 +7,7 @@ export default function NotFound500() {
     <div className="flex flex-col justify-center min-h-screen py-6 bg-background sm:py-12">
       <div className="relative py-3 mx-auto sm:max-w-xl">
         <h1 className="text-text text-2xl font-bold text-center">
-          500 - {t('500.title')}
+          500 - {t(PAGE_500_TITLE)}
         </h1>
       </div>
     </div>

package/{templates → dist/templates}/react-app/src/pages/auth/Layout.tsx

@@ -2,7 +2,7 @@ import { IOC } from '@/core/IOC';
 import { UserService } from '@/base/services/UserService';
 import { Navigate, Outlet } from 'react-router-dom';
 import { useStore } from '@/uikit/hooks/useStore';
-import BaseHeader from '../base/components/BaseHeader';
+import BaseHeader from '../../uikit/components/BaseHeader';
 
 export default function Layout() {
   const userService = IOC(UserService);
@@ -15,7 +15,7 @@ export default function Layout() {
 
   return (
     <>
-      <BaseHeader />
+      <BaseHeader showLogoutButton={false} />
       <div className="flex-1">
         <Outlet />
       </div>

package/{templates/react-app/src/pages/auth/Login.tsx → dist/templates/react-app/src/pages/auth/LoginPage.tsx}

@@ -6,7 +6,7 @@ import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import { RouteService } from '@/base/services/RouteService';
 import { UserService } from '@/base/services/UserService';
 import { useStore } from '@/uikit/hooks/useStore';
-import * as i18nKeys from '@config/Identifier/I18n';
+import * as i18nKeys from '@config/Identifier/page.login';
 import LocaleLink from '@/uikit/components/LocaleLink';
 
 interface LoginFormData {
@@ -14,7 +14,7 @@ interface LoginFormData {
   password: string;
 }
 
-export default function Login() {
+export default function LoginPage() {
   const { t } = useBaseRoutePage();
   const userService = IOC(UserService);
   const AppConfig = IOC('AppConfig');

package/{templates/react-app/src/pages/auth/Register.tsx → dist/templates/react-app/src/pages/auth/RegisterPage.tsx}

@@ -4,12 +4,11 @@ import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
 import { IOC } from '@/core/IOC';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import { RouteService } from '@/base/services/RouteService';
-import { UserService } from '@/base/services/UserService';
+import { RegisterFormData, UserService } from '@/base/services/UserService';
 import { useStore } from '@/uikit/hooks/useStore';
-import * as i18nKeys from '@config/Identifier/I18n';
-import type { RegisterFormData } from '@/base/port/LoginInterface';
+import * as i18nKeys from '@config/Identifier/page.register';
 
-export default function Register() {
+export default function RegisterPage() {
   const { t } = useBaseRoutePage();
   const userService = IOC(UserService);
   const AppConfig = IOC('AppConfig');

package/{templates/react-app/src/pages/base/About.tsx → dist/templates/react-app/src/pages/base/AboutPage.tsx}

@@ -1,5 +1,5 @@
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import * as i18nKeys from '@config/Identifier/I18n';
+import * as i18nKeys from '@config/Identifier/page.about';
 import {
   Button,
   Tooltip,
@@ -13,7 +13,7 @@ import {
 } from 'antd';
 import { useState } from 'react';
 
-export default function About() {
+export default function AboutPage() {
   const { t } = useBaseRoutePage();
   const [messageApi, contextHolder] = message.useMessage();
   const [notificationApi, contextHolder2] = notification.useNotification();
@@ -108,8 +108,8 @@ export default function About() {
           <Popconfirm
             title={t(i18nKeys.ABOUT_POPCONFIRM_TITLE)}
             description={t(i18nKeys.ABOUT_POPCONFIRM_DESC)}
-            okText={t(i18nKeys.COMMON_OK)}
-            cancelText={t(i18nKeys.COMMON_CANCEL)}
+            okText={t(i18nKeys.ABOUT_OK_TEXT)}
+            cancelText={t(i18nKeys.ABOUT_CANCEL_TEXT)}
           >
             <Button>{t(i18nKeys.ABOUT_BTN_POPCONFIRM)}</Button>
           </Popconfirm>

package/{templates/react-app/src/pages/base/ErrorIdentifier.tsx → dist/templates/react-app/src/pages/base/ErrorIdentifierPage.tsx}

@@ -1,9 +1,9 @@
 import { Button } from 'antd';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import * as ErrorIdentifierList from '@config/Identifier/Error';
-import * as i18nKeys from '@config/Identifier/I18n';
+import * as ErrorIdentifierList from '@config/Identifier/error';
+import * as i18nKeys from '@config/Identifier/page.identifiter';
 
-export default function ErrorIdentifier() {
+export default function ErrorIdentifierPage() {
   const { t } = useBaseRoutePage();
 
   return (

package/{templates/react-app/src/pages/base/Executor.tsx → dist/templates/react-app/src/pages/base/ExecutorPage.tsx}

@@ -5,7 +5,7 @@ import { IOC } from '@/core/IOC';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
 import { ExecutorController } from '@/uikit/controllers/ExecutorController';
 import { useStore } from '@/uikit/hooks/useStore';
-import * as i18nKeys from '@config/Identifier/I18n';
+import * as i18nKeys from '@config/Identifier/page.executor';
 
 interface Task {
   id: string;
@@ -20,7 +20,7 @@ interface Task {
   method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
 }
 
-export default function Executor() {
+export default function ExecutorPage() {
   const { t } = useBaseRoutePage();
   const executorController = IOC(ExecutorController);
   const jSONStorageController = IOC(JSONStorageController);
@@ -250,7 +250,7 @@ export default function Executor() {
           </h2>
           <div className="space-y-4">
             <div className="text-text-secondary">
-              {t(i18nKeys.PAGE_REQUEST_TIMEOUT)}: {requestTimeout}
+              {t(i18nKeys.PAGE_EXECUTOR_REQUEST_TIMEOUT)}: {requestTimeout}
             </div>
             <div>
               {helloState.loading ? (

package/{templates/react-app/src/pages/base/Home.tsx → dist/templates/react-app/src/pages/base/HomePage.tsx}

@@ -2,53 +2,23 @@ import { Button } from 'antd';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import LocaleLink from '@/uikit/components/LocaleLink';
 import clsx from 'clsx';
-import * as i18nKeys from '@config/Identifier/I18n';
+import * as i18nKeys from '@config/Identifier';
+import { baseRoutes } from '@config/app.router';
 
-export default function Home() {
-  const { t } = useBaseRoutePage();
+const layoutRoutes = baseRoutes.filter(
+  (route) => route.element === 'base/Layout'
+);
+
+const navigationItems = layoutRoutes[0]!
+  .children!.filter((route) => !route.index)
+  .map((route) => ({
+    href: `/${route.path}`,
+    titleKey: route.meta!.title!,
+    descriptionKey: route.meta!.description!
+  }));
 
-  const navigationItems = [
-    {
-      href: '/about',
-      bgColor: 'bg-blue-50',
-      hoverColor: 'hover:bg-blue-100',
-      titleColor: 'text-blue-700',
-      titleKey: i18nKeys.PAGE_ABOUT_TITLE,
-      descriptionKey: i18nKeys.PAGE_ABOUT_DESCRIPTION
-    },
-    {
-      href: '/jsonstorage',
-      bgColor: 'bg-green-50',
-      hoverColor: 'hover:bg-green-100',
-      titleColor: 'text-green-700',
-      titleKey: i18nKeys.PAGE_JSONSTORAGE_TITLE,
-      descriptionKey: i18nKeys.PAGE_JSONSTORAGE_DESCRIPTION
-    },
-    {
-      href: '/request',
-      bgColor: 'bg-red-50',
-      hoverColor: 'hover:bg-red-100',
-      titleColor: 'text-red-700',
-      titleKey: i18nKeys.PAGE_REQUEST_TITLE,
-      descriptionKey: i18nKeys.PAGE_REQUEST_DESCRIPTION
-    },
-    {
-      href: '/executor',
-      bgColor: 'bg-purple-50',
-      hoverColor: 'hover:bg-purple-100',
-      titleColor: 'text-purple-700',
-      titleKey: i18nKeys.PAGE_EXECUTOR_TITLE,
-      descriptionKey: i18nKeys.PAGE_EXECUTOR_DESCRIPTION
-    },
-    {
-      href: '/errorIdentifier',
-      bgColor: 'bg-amber-50',
-      hoverColor: 'hover:bg-amber-100',
-      titleColor: 'text-amber-700',
-      titleKey: i18nKeys.PAGE_ERROR_IDENTIFIER_TITLE,
-      descriptionKey: i18nKeys.PAGE_ERROR_IDENTIFIER_DESCRIPTION
-    }
-  ];
+export default function HomePage() {
+  const { t } = useBaseRoutePage();
 
   return (
     <div className="min-h-screen bg-primary">

package/{templates/react-app/src/pages/base/JSONStorage.tsx → dist/templates/react-app/src/pages/base/JSONStoragePage.tsx}

@@ -4,9 +4,9 @@ import template from 'lodash/template';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
 import { useStore } from '@/uikit/hooks/useStore';
 import { Button, Input } from 'antd';
-import * as i18nKeys from '@config/Identifier/I18n';
+import * as i18nKeys from '@config/Identifier/page.jsonStorage';
 
-export default function JSONStorage() {
+export default function JSONStoragePage() {
   const jsonStorageController = IOC(JSONStorageController);
   const controllerState = useStore(jsonStorageController);
   const { t } = useBaseRoutePage();

package/{templates → dist/templates}/react-app/src/pages/base/Layout.tsx

@@ -1,20 +1,20 @@
-import BaseHeader from './components/BaseHeader';
+import BaseHeader from '../../uikit/components/BaseHeader';
 import { Outlet } from 'react-router-dom';
-import { ProcessProvider } from '@/uikit/providers/ProcessProvider';
+import { ProcessExecutorProvider } from '@/uikit/providers/ProcessExecutorProvider';
 
 export default function Layout() {
   return (
-    <ProcessProvider>
+    <ProcessExecutorProvider>
       <div
         data-testid="basic-layout"
         className="text-base min-h-screen bg-primary"
       >
-        <BaseHeader />
+        <BaseHeader showLogoutButton />
 
         <div className="text-text bg-primary">
           <Outlet />
         </div>
       </div>
-    </ProcessProvider>
+    </ProcessExecutorProvider>
   );
 }

package/{templates/react-app/src/pages/base/Request.tsx → dist/templates/react-app/src/pages/base/RequestPage.tsx}

@@ -6,7 +6,7 @@ import { useMemo } from 'react';
 import { useStore } from '@/uikit/hooks/useStore';
 import { Button } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
-import * as i18nKeys from '@config/Identifier/I18n';
+import * as i18nKeys from '@config/Identifier/page.request';
 
 function JSONValue({ value }: { value: unknown }) {
   const output = useMemo(() => {
@@ -23,7 +23,7 @@ function JSONValue({ value }: { value: unknown }) {
   );
 }
 
-export default function Request() {
+export default function RequestPage() {
   const requestController = IOC(RequestController);
   const requestControllerState = useStore(requestController);
   const jsonStorageControllerState = useStore(IOC(JSONStorageController));