@qlover/create-app 0.1.14 → 0.1.16

package/templates/react-app/src/pages/auth/Layout.tsx

@@ -1,13 +1,14 @@
 import { IOC } from '@/core/IOC';
 import { UserController } from '@/uikit/controllers/UserController';
-import { useController } from '@lib/fe-react-controller';
 import { Navigate, Outlet } from 'react-router-dom';
+import { useSliceStore } from '@qlover/slice-store-react';
 
 export default function Layout() {
-  const controller = useController(IOC(UserController));
+  const userController = IOC(UserController);
+  useSliceStore(userController, (state) => state.success);
 
   // If user is authenticated, redirect to home page
-  if (controller.isAuthenticated()) {
+  if (userController.isAuthenticated()) {
     return <Navigate to="/" replace />;
   }
 

package/templates/react-app/src/pages/auth/Login.tsx

@@ -1,14 +1,16 @@
 import { useState } from 'react';
-import { useController } from '@lib/fe-react-controller';
 import { IOC } from '@/core/IOC';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import { RouterController } from '@/uikit/controllers/RouterController';
 import { UserController } from '@/uikit/controllers/UserController';
 import AppConfig from '@/core/AppConfig';
+import { useSliceStore } from '@qlover/slice-store-react';
 
 export default function Login() {
   const { t } = useBaseRoutePage();
-  const controller = useController(IOC(UserController));
+  const userController = IOC(UserController);
+  useSliceStore(userController);
+
   const [email, setEmail] = useState(AppConfig.loginUser);
   const [password, setPassword] = useState(AppConfig.loginPassword);
   const [loading, setLoading] = useState(false);
@@ -16,7 +18,7 @@ export default function Login() {
   const handleLogin = async () => {
     try {
       setLoading(true);
-      await controller.login({ username: email, password });
+      await userController.login({ username: email, password });
       // Redirect or show success message
       IOC(RouterController).replaceToHome();
     } catch (error) {

package/templates/react-app/src/pages/base/ErrorIdentifier.tsx

@@ -0,0 +1,39 @@
+import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
+import * as ErrorIdentifierList from '@config/ErrorIdentifier';
+
+export default function ErrorIdentifier() {
+  const { t } = useBaseRoutePage();
+
+  return (
+    <div className="min-h-screen bg-gray-100/90 py-8 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-3xl mx-auto">
+        <div className="bg-white shadow-lg rounded-lg overflow-hidden">
+          <div className="bg-gradient-to-r from-blue-500 to-purple-600 px-6 py-4">
+            <h1 className="text-2xl font-bold text-white">
+              {t('errorIdentifier')}
+            </h1>
+            <p className="text-blue-100 mt-1">
+              Identifier From: '@config/ErrorIdentifier'
+            </p>
+          </div>
+
+          <div className="divide-y divide-gray-200">
+            {Object.entries(ErrorIdentifierList).map(([key, value]) => (
+              <div
+                key={key}
+                className="px-6 py-4 flex flex-col sm:flex-row sm:items-center hover:bg-gray-50"
+              >
+                <span className="font-medium text-gray-700 mr-3 min-w-[200px]">
+                  {key}
+                </span>
+                <span className="mt-1 sm:mt-0 text-gray-600 bg-gray-100 px-3 py-1 rounded-md">
+                  {t(value)}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/react-app/src/pages/base/Executor.tsx

@@ -1,13 +1,22 @@
 import { IOC } from '@/core/IOC';
-import { useControllerState } from '@lib/fe-react-controller';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
 import { ExecutorController } from '@/uikit/controllers/ExecutorController';
+import { useSliceStore } from '@qlover/slice-store-react';
 
 export default function Executor() {
-  const jsonStorageControllerState = useControllerState(
-    IOC(JSONStorageController)
+  const executorController = IOC(ExecutorController);
+  const jSONStorageController = IOC(JSONStorageController);
+  const requestTimeout = useSliceStore(
+    jSONStorageController,
+    jSONStorageController.selector.requestTimeout
   );
+
+  const helloState = useSliceStore(
+    executorController,
+    executorController.selector.helloState
+  );
+
   const { t } = useBaseRoutePage();
 
   return (
@@ -20,7 +29,7 @@ export default function Executor() {
         </div>
 
         <div className="bg-white shadow-lg rounded-lg px-8 py-6">
-          {t('requestTimeout')}: {jsonStorageControllerState.requestTimeout}
+          {t('requestTimeout')}: {requestTimeout}
         </div>
         <div className="space-y-6">
           <div className="p-6 bg-gray-50 rounded-lg">
@@ -28,12 +37,24 @@ export default function Executor() {
               {t('executorTestPlugin')}
             </h2>
 
-            <button
-              className="bg-blue-500 text-white px-4 py-2 rounded-md"
-              onClick={IOC(ExecutorController).onTestPlugins}
-            >
-              {t('testPlugin')}
-            </button>
+            <div className="text-gray-800">
+              {helloState.loading ? (
+                <div>Loading...</div>
+              ) : (
+                <button
+                  className="bg-blue-500 px-4 py-2 rounded-md"
+                  onClick={executorController.onTestPlugins}
+                >
+                  {t('testPlugin')}
+                </button>
+              )}
+
+              {helloState.error instanceof Error ? (
+                <div>{helloState.error.message}</div>
+              ) : (
+                <div>{IOC('JSON').stringify(helloState.result?.data)}</div>
+              )}
+            </div>
           </div>
         </div>
       </div>

package/templates/react-app/src/pages/base/Home.tsx

@@ -1,6 +1,49 @@
-import LocaleLink from '@/components/LocaleLink';
+import LocaleLink from '@/uikit/components/LocaleLink';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 
+const navigationItems = [
+  {
+    href: '/about',
+    bgColor: 'bg-blue-50',
+    hoverColor: 'hover:bg-blue-100',
+    titleColor: 'text-blue-700',
+    titleKey: 'about',
+    descriptionKey: 'about_description'
+  },
+  {
+    href: '/jsonstorage',
+    bgColor: 'bg-green-50',
+    hoverColor: 'hover:bg-green-100',
+    titleColor: 'text-green-700',
+    titleKey: 'jsonstorage',
+    descriptionKey: 'jsonstorage_description'
+  },
+  {
+    href: '/request',
+    bgColor: 'bg-red-50',
+    hoverColor: 'hover:bg-red-100',
+    titleColor: 'text-red-700',
+    titleKey: 'request',
+    descriptionKey: 'request_description'
+  },
+  {
+    href: '/executor',
+    bgColor: 'bg-purple-50',
+    hoverColor: 'hover:bg-purple-100',
+    titleColor: 'text-purple-700',
+    titleKey: 'executor',
+    descriptionKey: 'executor_description'
+  },
+  {
+    href: '/errorIdentifier',
+    bgColor: 'bg-amber-50',
+    hoverColor: 'hover:bg-amber-100',
+    titleColor: 'text-amber-700',
+    titleKey: 'errorIdentifier',
+    descriptionKey: 'errorIdentifier_description'
+  }
+];
+
 export default function Home() {
   const { t } = useBaseRoutePage();
 
@@ -18,35 +61,20 @@ export default function Home() {
             </div>
 
             <div className="grid gap-4">
-              <LocaleLink
-                href="/about"
-                className="block p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors duration-200"
-              >
-                <h2 className="text-xl font-semibold text-blue-700 mb-2">
-                  {t('about')}
-                </h2>
-                <p className="text-gray-600">{t('about_description')}</p>
-              </LocaleLink>
-
-              <LocaleLink
-                href="/jsonstorage"
-                className="block p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors duration-200"
-              >
-                <h2 className="text-xl font-semibold text-green-700 mb-2">
-                  {t('jsonstorage')}
-                </h2>
-                <p className="text-gray-600">{t('jsonstorage_description')}</p>
-              </LocaleLink>
-
-              <LocaleLink
-                href="/request"
-                className="block p-4 bg-red-50 rounded-lg hover:bg-red-100 transition-colors duration-200"
-              >
-                <h2 className="text-xl font-semibold text-red-700 mb-2">
-                  {t('request')}
-                </h2>
-                <p className="text-gray-600">{t('request_description')}</p>
-              </LocaleLink>
+              {navigationItems.map((item, index) => (
+                <LocaleLink
+                  key={index}
+                  href={item.href}
+                  className={`block p-4 ${item.bgColor} rounded-lg ${item.hoverColor} transition-colors duration-200`}
+                >
+                  <h2
+                    className={`text-xl font-semibold ${item.titleColor} mb-2`}
+                  >
+                    {t(item.titleKey)}
+                  </h2>
+                  <p className="text-gray-600">{t(item.descriptionKey)}</p>
+                </LocaleLink>
+              ))}
             </div>
 
             <div className="mt-8 text-center">

package/templates/react-app/src/pages/base/JSONStorage.tsx

@@ -1,14 +1,12 @@
 import { IOC } from '@/core/IOC';
-import { useController, useControllerState } from '@lib/fe-react-controller';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import template from 'lodash/template';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
+import { useSliceStore } from '@qlover/slice-store-react';
 
 export default function JSONStorage() {
   const jsonStorageController = IOC(JSONStorageController);
-  const controllerState = useControllerState(
-    useController(jsonStorageController)
-  );
+  const controllerState = useSliceStore(jsonStorageController);
 
   const { t } = useBaseRoutePage();