@qlover/create-app 0.3.1 → 0.3.3

package/templates/react-app/config/app.router.json

@@ -21,7 +21,7 @@
             "meta": {
               "title": "fe-utils/home",
               "icon": "home",
-              "localNamespace": "home"
+              "localNamespace": "common"
             }
           },
           {
@@ -30,7 +30,7 @@
             "meta": {
               "title": "关于",
               "icon": "info",
-              "localNamespace": "about"
+              "localNamespace": "common"
             }
           },
           {
@@ -39,7 +39,7 @@
             "meta": {
               "title": "FE-Utils JSONStorage",
               "icon": "info",
-              "localNamespace": "jsonStorage"
+              "localNamespace": "common"
             }
           },
           {
@@ -48,7 +48,7 @@
             "meta": {
               "title": "FE-Utils Request",
               "icon": "info",
-              "localNamespace": "request"
+              "localNamespace": "common"
             }
           },
           {
@@ -57,7 +57,7 @@
             "meta": {
               "title": "FE-Utils Executor",
               "icon": "info",
-              "localNamespace": "executor"
+              "localNamespace": "common"
             }
           },
           {
@@ -109,7 +109,7 @@
             "meta": {
               "title": "登录",
               "icon": "info",
-              "localNamespace": "login"
+              "localNamespace": "common"
             }
           },
           {
@@ -118,7 +118,7 @@
             "meta": {
               "title": "注册",
               "icon": "info",
-              "localNamespace": "register"
+              "localNamespace": "common"
             }
           }
         ]

package/templates/react-app/config/common.ts

@@ -8,8 +8,11 @@ export const browserGlobalsName = 'feGlobals';
 export const envBlackList = ['env', 'userNodeEnv'];
 
 export const loggerStyles = {
-  INFO: 'color: blue;',
-  WARN: 'color: orange; font-weight: bold;',
-  ERROR: 'color: red; font-weight: bold;',
-  DEBUG: 'color: #8d7'
+  fatal: { color: '#ff0000', fontWeight: 'bold' },
+  error: { color: '#ff0000' },
+  warn: { color: '#ffa500' },
+  info: { color: '#0000ff' },
+  debug: { color: '#008000' },
+  trace: { color: '#808080' },
+  log: { color: '#000000' }
 };

package/templates/react-app/config/theme.json

@@ -1,90 +1,9 @@
 {
-  "base": {
-    "domAttribute": "data-theme",
-    "defaultTheme": "system",
-    "target": "html",
-    "storageKey": "fe_theme",
-    "supportedThemes": ["light", "dark", "pink"],
-    "styleThemeKeyTemplate": "${target}[${domAttribute}='${theme}']",
-    "colors": {
-      "light": {
-        "primary": "#00f",
-        "secondary": "#fff",
-        "text": "#000",
-        "background": "#fff"
-      },
-      "dark": {
-        "primary": "#f00",
-        "secondary": "#000",
-        "text": "#fff",
-        "background": "#000"
-      },
-      "pink": {
-        "primary": "#f0f",
-        "secondary": "#aaa",
-        "text": "#ddd",
-        "background": "#e0e0e0"
-      }
-    }
-  },
-  "override": {
-    "domAttribute": "data-theme",
-    "defaultTheme": "system",
-    "target": "html",
-    "supportedThemes": ["light", "dark", "pink"],
-    "storageKey": "fe_theme",
-    "styleThemeKeyTemplate": "${target}[${domAttribute}='${theme}']",
-    "styleKeyTemplate": "--fe-color-${colorKey}",
-    "colorsValueTemplate": "rgb(var(${styleKey}))",
-    "colors": {
-      "light": {
-        "white": "255 255 255",
-        "black": "0 0 0",
-        "gray": {
-          "50": "249 250 251",
-          "100": "243 244 246",
-          "200": "229 231 235",
-          "300": "209 213 219",
-          "400": "156 163 175",
-          "500": "107 114 128",
-          "600": "75 85 99",
-          "700": "55 65 81",
-          "800": "31 41 55",
-          "900": "17 24 39"
-        }
-      },
-      "dark": {
-        "white": "226 232 240",
-        "black": "0 0 0",
-        "gray": {
-          "50": "10 10 10",
-          "100": "28 28 28",
-          "200": "46 46 46",
-          "300": "64 64 64",
-          "400": "82 82 82",
-          "500": "100 100 100",
-          "600": "120 120 120",
-          "700": "138 138 138",
-          "800": "156 156 156",
-          "900": "176 176 176"
-        }
-      },
-      "pink": {
-        "white": "255 228 225",
-        "black": "51 51 51",
-        "gray": {
-          "50": "255 245 245",
-          "100": "255 234 234",
-          "200": "255 194 194",
-          "300": "255 153 153",
-          "400": "255 112 112",
-          "500": "255 71 71",
-          "600": "255 31 31",
-          "700": "230 0 0",
-          "800": "179 0 0",
-          "900": "128 0 0"
-        }
-      }
-    }
-  }
+  "domAttribute": "data-theme",
+  "defaultTheme": "system",
+  "target": "html",
+  "supportedThemes": ["light", "dark", "pink"],
+  "storageKey": "fe_theme",
+  "init": true,
+  "prioritizeStore": true
 }

package/templates/react-app/package.json

@@ -51,9 +51,14 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@qlover/corekit-bridge": "^0.0.5",
-    "@qlover/fe-corekit": "^1.2.5",
+    "@qlover/corekit-bridge": "^1.0.3",
+    "@qlover/fe-corekit": "^1.3.1",
+    "@qlover/logger": "^0.1.1",
     "@qlover/slice-store-react": "^1.0.8",
+    "@tailwindcss/postcss": "^4.1.8",
+    "@tailwindcss/vite": "^4.1.8",
+    "antd": "^5.25.3",
+    "clsx": "^2.1.1",
     "i18next": "^24.2.0",
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^3.0.1",
@@ -85,10 +90,10 @@
     "eslint-plugin-react-refresh": "^0.4.14",
     "eslint-plugin-vitest": "^0.5.4",
     "globals": "^15.12.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.4",
     "prettier": "^3.5.3",
     "sass-embedded": "^1.79.4",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.1.8",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.15.0",
     "vite": "^5.4.8",

package/templates/react-app/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
+    '@tailwindcss/postcss': {}
   }
 };

package/templates/react-app/public/locales/en/common.json

@@ -6,5 +6,122 @@
   "err.ioc.not.implemented": "IOC not implemented",
   "err.local.no.user.token": "Local no user token",
   "err.global.no.window": "Global no window",
-  "err.within.page.provider": "Must be used in PageProvider"
+  "err.within.page.provider": "Must be used in PageProvider",
+  "page.about.title": "About",
+  "page.about.description": "Learn more about our project and team information",
+  "about.title": "About",
+  "jsonStorage.title": "JSONStorage Demo",
+  "jsonStorage.title2": "Permanent storage test",
+  "jsonStorage.title3": "Expire time test",
+  "jsonStorage.title4": "Request Timeout",
+  "jsonStorage.format.title": "Test key: ${key}, Random value range: ${min}~${max}",
+  "jsonStorage.setRandomValue": "Set random value",
+  "jsonStorage.currentValue": "Current value",
+  "jsonStorage.ms": "ms",
+  "jsonStorage.setExpireTime": "Set random value(with expire time)",
+  "login.title": "Login",
+  "login.email": "Email",
+  "login.username": "Username",
+  "login.password": "Password",
+  "login.login": "Login",
+  "request.requestTimeout": "Request Timeout",
+  "request.helloResult": "Hello result is",
+  "request.helloError": "Hello error is",
+  "request.ipInfoResult": "IpInfo result is",
+  "request.ipInfo": "IpInfo",
+  "request.randomUser": "RandomUser",
+  "request.loading": "Loading...",
+  "request.randomUserResult": "RandomUser result is",
+  "request.randomUserError": "RandomUser error is",
+  "request.triggerAbortRequest": "Trigger Abort Request",
+  "request.stopAbortRequest": "Stop Abort Request",
+  "request.abortRequestResult": "Abort Request Result",
+  "request.abortRequestError": "Abort Request Error",
+  "executor.executorDemo": "Executor Demo",
+  "executor.requestTimeout": "Request Timeout",
+  "executor.executorTestPlugin": "Executor Test Plugin",
+  "executor.testPlugin": "Test Plugin",
+  "home.welcome": "Welcome to the home page",
+  "home.description": "A modern frontend utility library collection providing various practical tools and components",
+  "home.about": "About Us",
+  "home.about_description": "Learn more about our project and team information",
+  "home.jsonstorage": "JSONStorage",
+  "home.jsonstorage_description": "Efficient JSON data storage solution",
+  "home.request": "Request",
+  "home.request_description": "A modern frontend utility library collection providing various practical tools and components",
+  "page.jsonstorage.title": "JSONStorage Page",
+  "page.jsonstorage.description": "Use JSONStorage for data storage and management",
+  "page.request.title": "Request Examples",
+  "page.request.description": "Demonstrate various request examples and usage",
+  "page.executor.title": "Executor Examples",
+  "page.executor.description": "A powerful task executor supporting multiple task types and state management",
+  "page.error.identifier.title": "Error Identifier",
+  "page.error.identifier.description": "Error identifier usage and examples",
+  "home.explore": "Explore",
+  "home.get_started.title": "Ready to Get Started?",
+  "home.get_started.description": "Join us and discover the power of our utilities",
+  "home.get_started.button": "Get Started Now",
+  "header.theme.default": "Default Theme",
+  "header.theme.dark": "Dark Theme",
+  "header.theme.pink": "Pink Theme",
+  "page.jsonstorage.main_title": "JSONStorage Demo",
+  "page.jsonstorage.permanent_title": "Permanent Storage Test",
+  "page.jsonstorage.expire_title": "Expire Time Test",
+  "page.jsonstorage.timeout_title": "Request Timeout Setting",
+  "page.jsonstorage.format_title": "Test key: ${key}, Random value range: ${min}~${max}",
+  "page.jsonstorage.set_random": "Set Random Value",
+  "page.jsonstorage.current_value": "Current Value",
+  "page.jsonstorage.set_expire": "Set Random Value (with expire time)",
+  "page.jsonstorage.ms": "ms",
+  "page.request.timeout": "Request Timeout",
+  "page.request.hello.title": "AI API: Hello",
+  "page.request.hello.description": "Functional API using FetchURLPlugin, RequestCommonPlugin, ApiMockPlugin, RequestLogger plugins",
+  "page.request.hello.button": "Hello",
+  "page.request.ip_info.title": "FeApi: IP Information",
+  "page.request.ip_info.description": "RequestScheduler class API using FetchURLPlugin, RequestCommonPlugin, RequestLogger, ApiPickDataPlugin plugins, where ApiPickDataPlugin can flatten return types to data field",
+  "page.request.random_user.title": "UserApi: Random User",
+  "page.request.random_user.description": "RequestTransaction class API using FetchURLPlugin, RequestCommonPlugin, ApiMockPlugin, FetchAbortPlugin, RequestLogger, ApiCatchPlugin plugins, where FetchAbortPlugin can abort requests, ApiCatchPlugin can unify caught errors to apiCatchResult field",
+  "page.request.api_catch.title": "UserApi: Api Catch Result",
+  "page.request.abort.title": "UserApi: Abort Request",
+  "page.request.trigger_abort": "Trigger Abort Request",
+  "page.request.stop_abort": "Stop Abort Request",
+  "page.request.trigger_api_catch": "Trigger API Catch Result",
+  "page.request.stop_api_catch": "Stop API Catch Result",
+  "page.executor.main_title": "Executor",
+  "page.executor.test_plugin.title": "Test Plugin",
+  "page.executor.task.status.pending": "Pending",
+  "page.executor.task.status.running": "Running",
+  "page.executor.task.status.completed": "Completed",
+  "page.executor.task.status.failed": "Failed",
+  "page.executor.task.type.data_sync": "Data Sync",
+  "page.executor.task.type.report": "Report Generation",
+  "page.executor.task.type.maintenance": "System Maintenance",
+  "page.executor.task.type.backup": "Backup",
+  "page.executor.task.duration.unit": "minutes",
+  "page.executor.task.start": "Start",
+  "page.executor.task.stop": "Stop",
+  "page.executor.task.success": "Task %{name} executed successfully",
+  "page.executor.task.failure": "Task %{name} execution failed",
+  "page.executor.plugin.test.success": "Plugin test successful",
+  "page.executor.plugin.test.failure": "Plugin test failed",
+  "page.executor.custom_task.url_required": "Please enter URL",
+  "page.executor.custom_task.name": "Custom Task %{method} %{url}",
+  "page.executor.create_task.title": "Create Custom Task",
+  "page.executor.create_button": "Create",
+  "page.executor.enter_url": "Enter URL",
+  "page.executor.task_list.title": "Task List",
+  "page.executor.task_stats.total": "Total Tasks",
+  "page.executor.task_stats.running": "Running",
+  "page.executor.task_stats.completed": "Completed",
+  "page.executor.task_stats.failed": "Failed",
+  "page.executor.task_history.title": "Execution History",
+  "page.executor.help.title": "Need Help?",
+  "page.executor.help.description": "Having issues? Check our task execution guide or contact support",
+  "page.executor.view_guide": "View Guide",
+  "page.executor.contact_support": "Contact Support",
+  "page.error.identifier.main_title": "Error Identifier",
+  "page.error.identifier.source_description": "Identifier From: '@config/Identifier.Error'",
+  "page.error.identifier.help.title": "Need Help?",
+  "page.error.identifier.help.description": "If you encounter any issues while using error identifiers, please contact our support team",
+  "page.error.identifier.contact_support": "Contact Support"
 }

package/templates/react-app/public/locales/zh/common.json

@@ -6,5 +6,122 @@
   "err.ioc.not.implemented": "IOC 未实现",
   "err.local.no.user.token": "本地未找到 user token",
   "err.global.no.window": "全局未找到 window",
-  "err.within.page.provider": "必须在 PageProvider 中使用"
+  "err.within.page.provider": "必须在 PageProvider 中使用",
+  "page.about.title": "关于",
+  "page.about.description": "了解更多关于我们的项目和团队信息",
+  "about.title": "关于我们",
+  "jsonStorage.title": "JSONStorage Demo",
+  "jsonStorage.title2": "永久存储测试",
+  "jsonStorage.title3": "过期时间测试",
+  "jsonStorage.title4": "请求超时时间设置",
+  "jsonStorage.format.title": "测试 key: ${key}, 随机值范围: ${min}~${max}",
+  "jsonStorage.setRandomValue": "设置随机值",
+  "jsonStorage.currentValue": "当前值",
+  "jsonStorage.ms": "毫秒",
+  "jsonStorage.setExpireTime": "设置随机值(带过期时间)",
+  "login.title": "登录",
+  "login.email": "邮箱",
+  "login.username": "用户名",
+  "login.password": "密码",
+  "login.login": "登录",
+  "request.requestTimeout": "请求超时",
+  "request.helloResult": "Hello 结果是",
+  "request.helloError": "Hello 错误是",
+  "request.ipInfoResult": "IpInfo 结果是",
+  "request.ipInfo": "IpInfo",
+  "request.randomUser": "随机用户",
+  "request.loading": "加载中...",
+  "request.randomUserResult": "随机用户 结果是",
+  "request.randomUserError": "随机用户 错误是",
+  "request.triggerAbortRequest": "触发中止请求",
+  "request.stopAbortRequest": "停止中止请求",
+  "request.abortRequestResult": "中止请求 结果是",
+  "request.abortRequestError": "中止请求 错误是",
+  "executor.executorDemo": "执行器 Demo",
+  "executor.requestTimeout": "请求超时",
+  "executor.executorTestPlugin": "执行器 测试插件",
+  "executor.testPlugin": "测试插件",
+  "home.welcome": "欢迎来到主页",
+  "home.description": "一个现代前端实用库集合，提供各种实用工具和组件",
+  "home.about": "关于我们",
+  "home.about_description": "了解更多关于我们的项目和团队信息",
+  "home.jsonstorage": "JSON存储",
+  "home.jsonstorage_description": "高效的JSON数据存储解决方案",
+  "home.request": "请求",
+  "home.request_description": "一个现代前端实用库集合，提供各种实用工具和组件",
+  "page.jsonstorage.title": "JSONStorage 页面",
+  "page.jsonstorage.description": "使用 JSONStorage 进行数据存储和管理",
+  "page.request.title": "请求示例",
+  "page.request.description": "展示各种请求示例和用法",
+  "page.executor.title": "执行器示例",
+  "page.executor.description": "一个强大的任务执行器，支持多种任务类型和状态管理",
+  "page.error.identifier.title": "错误标识符",
+  "page.error.identifier.description": "错误标识符的使用和示例",
+  "home.explore": "探索",
+  "home.get_started.title": "准备开始使用？",
+  "home.get_started.description": "加入我们，探索实用工具的力量",
+  "home.get_started.button": "立即开始",
+  "header.theme.default": "默认主题",
+  "header.theme.dark": "暗色主题",
+  "header.theme.pink": "粉色主题",
+  "page.jsonstorage.main_title": "JSONStorage 演示",
+  "page.jsonstorage.permanent_title": "永久存储测试",
+  "page.jsonstorage.expire_title": "过期时间测试",
+  "page.jsonstorage.timeout_title": "请求超时时间设置",
+  "page.jsonstorage.format_title": "测试 key: ${key}, 随机值范围: ${min}~${max}",
+  "page.jsonstorage.set_random": "设置随机值",
+  "page.jsonstorage.current_value": "当前值",
+  "page.jsonstorage.set_expire": "设置随机值(带过期时间)",
+  "page.jsonstorage.ms": "毫秒",
+  "page.request.timeout": "请求超时时间",
+  "page.request.hello.title": "AI API: Hello",
+  "page.request.hello.description": "函数式 api, 使用了 FetchURLPlugin, RequestCommonPlugin, ApiMockPlugin, RequestLogger 插件",
+  "page.request.hello.button": "Hello",
+  "page.request.ip_info.title": "FeApi: IP Information",
+  "page.request.ip_info.description": "RequestScheduler 类式 api, 使用了 FetchURLPlugin, RequestCommonPlugin, RequestLogger, ApiPickDataPlugin 插件, 其中 ApiPickDataPlugin 插件可以将返回类型统一扁平到 data 字段",
+  "page.request.random_user.title": "UserApi: Random User",
+  "page.request.random_user.description": "RequestTransaction 类式 api, 使用了 FetchURLPlugin, RequestCommonPlugin, ApiMockPlugin, FetchAbortPlugin, RequestLogger, ApiCatchPlugin 插件, 其中 FetchAbortPlugin 可以中止请求, ApiCatchPlugin 可以将捕获的错误统一到 apiCatchResult 字段",
+  "page.request.api_catch.title": "UserApi: Api Catch Result",
+  "page.request.abort.title": "UserApi: Abort Request",
+  "page.request.trigger_abort": "触发中止请求",
+  "page.request.stop_abort": "停止中止请求",
+  "page.request.trigger_api_catch": "触发 API 捕获结果",
+  "page.request.stop_api_catch": "停止 API 捕获结果",
+  "page.executor.main_title": "执行器",
+  "page.executor.test_plugin.title": "测试插件",
+  "page.executor.task.status.pending": "等待中",
+  "page.executor.task.status.running": "运行中",
+  "page.executor.task.status.completed": "已完成",
+  "page.executor.task.status.failed": "失败",
+  "page.executor.task.type.data_sync": "数据同步",
+  "page.executor.task.type.report": "报告生成",
+  "page.executor.task.type.maintenance": "系统维护",
+  "page.executor.task.type.backup": "数据备份",
+  "page.executor.task.duration.unit": "分钟",
+  "page.executor.task.start": "开始",
+  "page.executor.task.stop": "停止",
+  "page.executor.task.success": "任务 %{name} 执行成功",
+  "page.executor.task.failure": "任务 %{name} 执行失败",
+  "page.executor.plugin.test.success": "插件测试成功",
+  "page.executor.plugin.test.failure": "插件测试失败",
+  "page.executor.custom_task.url_required": "请输入URL",
+  "page.executor.custom_task.name": "自定义任务 %{method} %{url}",
+  "page.executor.create_task.title": "创建自定义任务",
+  "page.executor.create_button": "创建",
+  "page.executor.enter_url": "输入URL",
+  "page.executor.task_list.title": "任务列表",
+  "page.executor.task_stats.total": "总任务数",
+  "page.executor.task_stats.running": "运行中",
+  "page.executor.task_stats.completed": "已完成",
+  "page.executor.task_stats.failed": "失败",
+  "page.executor.task_history.title": "执行历史",
+  "page.executor.help.title": "需要帮助？",
+  "page.executor.help.description": "遇到问题？查看我们的任务执行指南或联系支持团队",
+  "page.executor.view_guide": "查看指南",
+  "page.executor.contact_support": "联系支持",
+  "page.error.identifier.main_title": "错误标识符",
+  "page.error.identifier.source_description": "来自 '@config/Identifier.Error' 的标识符",
+  "page.error.identifier.help.title": "需要帮助？",
+  "page.error.identifier.help.description": "如果您在使用错误标识符时遇到问题，请联系我们的支持团队",
+  "page.error.identifier.contact_support": "联系支持"
 }

package/templates/react-app/src/App.tsx

@@ -1,10 +1,11 @@
-import '@/uikit/styles/css/index.css';
+import '@/styles/css/index.css';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { lazy, useMemo } from 'react';
 import { RouterRenderComponent } from './uikit/components/RouterRenderComponent';
 import { IOC } from './core/IOC';
 import { RouterController } from './uikit/controllers/RouterController';
 import { RouterLoader, type ComponentValue } from '@/base/cases/router-loader';
+import { ConfigProvider } from 'antd';
 
 function getAllPages() {
   const modules = import.meta.glob('./pages/**/*.tsx');
@@ -34,7 +35,18 @@ function App() {
     return router;
   }, []);
 
-  return <RouterProvider router={routerBase} />;
+  return (
+    <ConfigProvider
+      theme={{
+        cssVar: {
+          key: 'fe-theme',
+          prefix: 'fe'
+        }
+      }}
+    >
+      <RouterProvider router={routerBase} />
+    </ConfigProvider>
+  );
 }
 
 export default App;

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

@@ -3,22 +3,21 @@ import {
   type ExecutorPlugin,
   type ExecutorContext,
   type RequestAdapterFetchConfig,
-  type RequestAdapterResponse,
-  Logger
+  type RequestAdapterResponse
 } from '@qlover/fe-corekit';
 import {
   type ApiCatchPluginConfig,
   type ApiCatchPluginResponse
 } from '@qlover/corekit-bridge';
 import { injectable, inject } from 'inversify';
-
+import { LoggerInterface } from '@qlover/logger';
 @injectable()
 export class RequestLogger
   implements ExecutorPlugin<RequestAdapterFetchConfig>
 {
   readonly pluginName = 'RequestLogger';
 
-  constructor(@inject(IOCIdentifier.Logger) public logger: Logger) {}
+  constructor(@inject(IOCIdentifier.Logger) public logger: LoggerInterface) {}
 
   onBefore(context: ExecutorContext<RequestAdapterFetchConfig<unknown>>): void {
     this.logger.log(

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

@@ -1,6 +1,7 @@
 import type { RequestCatcherInterface } from '@/base/port/RequestCatcherInterface';
 import { IOCIdentifier } from '@/core/IOC';
-import type { Logger, RequestAdapterResponse } from '@qlover/fe-corekit';
+import type { RequestAdapterResponse } from '@qlover/fe-corekit';
+import type { LoggerInterface } from '@qlover/logger';
 import { inject, injectable } from 'inversify';
 
 @injectable()
@@ -9,7 +10,7 @@ export class RequestStatusCatcher
 {
   constructor(
     @inject(IOCIdentifier.Logger)
-    private readonly logger: Logger
+    private readonly logger: LoggerInterface
   ) {}
   /**
    * default handler

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

@@ -4,17 +4,37 @@ 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 {
+  SliceStore,
+  type BootstrapExecutorPlugin
+} from '@qlover/corekit-bridge';
 
 const { supportedLngs, fallbackLng } = i18nConfig;
 
 export type I18nServiceLocale = (typeof supportedLngs)[number];
 
-export class I18nService implements BootstrapExecutorPlugin {
+export class I18nServiceState {
+  loading: boolean = false;
+  constructor(public language: I18nServiceLocale) {}
+}
+
+export class I18nService
+  extends SliceStore<I18nServiceState>
+  implements BootstrapExecutorPlugin
+{
   readonly pluginName = 'I18nService';
 
-  constructor(private pathname: string) {}
+  selector = {
+    loading: (state: I18nServiceState) => state.loading
+  };
 
+  constructor(private pathname: string) {
+    super(() => new I18nServiceState(i18n.language as I18nServiceLocale));
+  }
+
+  /**
+   * @override
+   */
   onBefore(): void {
     const debug = false;
 
@@ -48,6 +68,14 @@ export class I18nService implements BootstrapExecutorPlugin {
     i18n.services.languageDetector.addDetector(pathLanguageDetector);
   }
 
+  async changeLanguage(language: I18nServiceLocale): Promise<void> {
+    await i18n.changeLanguage(language);
+  }
+
+  changeLoading(loading: boolean): void {
+    this.emit({ ...this.state, loading });
+  }
+
   static getCurrentLanguage(): I18nServiceLocale {
     return i18n.language as I18nServiceLocale;
   }

package/templates/react-app/src/base/services/ProcesserService.ts

@@ -1,11 +1,12 @@
-import { AsyncExecutor, ExecutorPlugin, Logger } from '@qlover/fe-corekit';
+import { AsyncExecutor, ExecutorPlugin } from '@qlover/fe-corekit';
 import { IOCIdentifier } from '@/core/IOC';
 import { injectable, inject } from 'inversify';
+import type { LoggerInterface } from '@qlover/logger';
 
 @injectable()
 export class ProcesserService {
   constructor(
-    @inject(IOCIdentifier.Logger) private logger: Logger,
+    @inject(IOCIdentifier.Logger) private logger: LoggerInterface,
     @inject(AsyncExecutor) private executor: AsyncExecutor
   ) {}