@qlover/create-app 0.8.0 → 0.10.0

package/dist/templates/react-app/src/core/clientIoc/ClientIOCRegister.ts

@@ -14,8 +14,8 @@ import { RequestStatusCatcher } from '@/base/cases/RequestStatusCatcher';
 import type { IocRegisterOptions } from '@/base/port/IOCInterface';
 import type { UserServiceInterface } from '@/base/port/UserServiceInterface';
 import { I18nService } from '@/base/services/I18nService';
-import { ProcesserExecutor } from '@/base/services/ProcesserExecutor';
 import { RouteService } from '@/base/services/RouteService';
+import { UserGatewayPlugin } from '@/base/services/UserGatewayPlugin';
 import { UserService } from '@/base/services/UserService';
 import { ExecutorPageBridge } from '@/uikit/bridges/ExecutorPageBridge';
 import { JSONStoragePageBridge } from '@/uikit/bridges/JSONStoragePageBridge';
@@ -28,7 +28,6 @@ import type {
   IOCContainerInterface,
   IOCRegisterInterface
 } from '@qlover/corekit-bridge';
-import type { SyncStorageInterface } from '@qlover/fe-corekit';
 import type { LoggerInterface } from '@qlover/logger';
 
 export class ClientIOCRegister
@@ -71,30 +70,34 @@ export class ClientIOCRegister
    */
   protected registerImplement(ioc: IOCContainerInterface): void {
     ioc.bind(I.I18nServiceInterface, new I18nService(this.options.pathname));
-    ioc.bind(
-      I.RouteServiceInterface,
-      new RouteService(
-        ioc.get(NavigateBridge),
-        ioc.get(I.I18nServiceInterface),
-        {
-          routes: useLocaleRoutes ? baseRoutes : baseNoLocaleRoutes,
-          logger: ioc.get(I.Logger),
-          hasLocalRoutes: useLocaleRoutes,
-          routerPrefix: routerPrefix
-        }
-      )
+
+    const routeService = new RouteService(
+      ioc.get(NavigateBridge),
+      ioc.get(I.I18nServiceInterface),
+      {
+        routes: useLocaleRoutes ? baseRoutes : baseNoLocaleRoutes,
+        logger: ioc.get(I.Logger),
+        hasLocalRoutes: useLocaleRoutes,
+        routerPrefix: routerPrefix
+      }
     );
+    ioc.bind(I.RouteServiceInterface, routeService);
     ioc.bind(
       I.ThemeService,
       new ThemeService({
         ...(themeConfig as unknown as ThemeServiceProps),
-        storage: ioc.get<SyncStorageInterface<string, string>>(I.LocalStorage)
+        storage: ioc.get(I.LocalStorage)
       })
     );
 
     ioc.bind(I.I18nKeyErrorPlugin, ioc.get(I18nKeyErrorPlugin));
-    ioc.bind(I.ProcesserExecutorInterface, ioc.get(ProcesserExecutor));
-    ioc.bind(I.UserServiceInterface, ioc.get(UserService));
+
+    ioc.bind(
+      I.UserServiceInterface,
+      ioc
+        .get<UserServiceInterface>(UserService)
+        .use(new UserGatewayPlugin(routeService))
+    );
     ioc.bind(I.RequestCatcherInterface, ioc.get(RequestStatusCatcher));
     ioc.bind(I.ExecutorPageBridgeInterface, ioc.get(ExecutorPageBridge));
     ioc.bind(I.JSONStoragePageInterface, ioc.get(JSONStoragePageBridge));
@@ -111,7 +114,10 @@ export class ClientIOCRegister
       token: () =>
         ioc.get<UserServiceInterface>(I.UserServiceInterface).getToken()
     });
-    const apiMockPlugin = new ApiMockPlugin(mockDataJson, logger);
+    const apiMockPlugin = new ApiMockPlugin({
+      mockData: mockDataJson,
+      logger: logger
+    });
     const apiCatchPlugin = new ApiCatchPlugin(
       logger,
       ioc.get(RequestStatusCatcher)

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

@@ -1,17 +1,13 @@
 // ! global variables, don't import any dependencies and don't have side effects
 import { loggerStyles } from '@config/common';
-import {
-  ColorFormatter,
-  ConsoleHandler,
-  CookieStorage,
-  Logger
-} from '@qlover/corekit-bridge';
+import { ColorFormatter, CookieStorage } from '@qlover/corekit-bridge';
 import {
   Base64Serializer,
   JSONSerializer,
   ObjectStorage,
   SyncStorage
 } from '@qlover/fe-corekit';
+import { Logger, ConsoleHandler } from '@qlover/logger';
 import { AppConfig } from '@/base/cases/AppConfig';
 import { DialogHandler } from '@/base/cases/DialogHandler';
 import type { SyncStorageInterface } from '@qlover/fe-corekit';
@@ -37,11 +33,14 @@ export const JSON = new JSONSerializer();
 /**
  * Override localStorage to use the global local storage
  */
-export const localStorage = new SyncStorage(new ObjectStorage(), [
-  JSON,
-  new Base64Serializer(),
-  window.localStorage as unknown as SyncStorageInterface<string>
-]);
+export const localStorage = new SyncStorage<string>(
+  new ObjectStorage(),
+  [
+    JSON,
+    appConfig.isProduction ? new Base64Serializer() : undefined,
+    window.localStorage as unknown as SyncStorageInterface<string>
+  ].filter(Boolean) as any[]
+);
 
 export const localStorageEncrypt = localStorage;
 

package/dist/templates/react-app/src/main.tsx

@@ -4,7 +4,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import { BootstrapClient } from './core/bootstraps/BootstrapClient';
-import { clientIOC } from './core/clientIoc/ClientIOC.ts';
+import { clientIOC } from './core/clientIoc/ClientIOC';
 
 BootstrapClient.main({
   root: window,

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

@@ -1,18 +1,18 @@
 import { useStore } from '@brain-toolkit/react-kit/hooks/useStore';
 import { IOCIdentifier } from '@config/IOCIdentifier';
 import { Navigate, Outlet } from 'react-router-dom';
-import { useI18nGuard } from '@/uikit/hooks/useI18nGuard';
 import { useIOC } from '@/uikit/hooks/useIOC';
+import { useRouterI18nGuard } from '@/uikit/hooks/useRouterI18nGuard';
 import { BaseHeader } from '../../uikit/components/BaseHeader';
 
 export default function Layout() {
   const userService = useIOC(IOCIdentifier.UserServiceInterface);
-  useStore(userService.store);
+  const state = useStore(userService.getStore());
 
-  useI18nGuard();
+  useRouterI18nGuard();
 
   // If user is authenticated, redirect to home page
-  if (userService.isAuthenticated()) {
+  if (userService.isAuthenticated() && userService.isUserInfo(state.result)) {
     return <Navigate data-testid="Layout" to="/" replace />;
   }
 

package/dist/templates/react-app/src/pages/auth/RegisterPage.tsx

@@ -3,7 +3,7 @@ import { register18n } from '@config/i18n/register18n';
 import { IOCIdentifier } from '@config/IOCIdentifier';
 import { Form, Input, Button, Checkbox } from 'antd';
 import { useState } from 'react';
-import type { RegisterFormData } from '@/base/services/UserService';
+import type { RegisterFormData } from '@/base/apis/userApi/UserApiType';
 import { useI18nInterface } from '@/uikit/hooks/useI18nInterface';
 import { useIOC } from '@/uikit/hooks/useIOC';
 

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

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

package/dist/templates/react-app/src/pages/base/MessagePage.tsx

@@ -0,0 +1,40 @@
+import { useFactory } from '@brain-toolkit/react-kit';
+import { chatMessageI18n } from '@config/i18n/chatMessageI18n';
+import {
+  ChatMessageStore,
+  ChatSenderStrategy,
+  SendFailureStrategy
+} from '@qlover/corekit-bridge';
+import { useState } from 'react';
+import { logger } from '@/core/globals';
+import { ChatMessageBridge } from '@/uikit/components/chatMessage/ChatMessageBridge';
+import { ChatRoot } from '@/uikit/components/chatMessage/ChatRoot';
+import { MessageApi } from '@/uikit/components/chatMessage/MessageApi';
+import { MessageBaseList } from '@/uikit/components/MessageBaseList';
+import { useI18nInterface } from '@/uikit/hooks/useI18nInterface';
+
+export default function MessagePage() {
+  const tt = useI18nInterface(chatMessageI18n);
+  const messagesStore = useFactory(ChatMessageStore<string>);
+  const messageApi = useFactory(MessageApi, messagesStore);
+
+  const [bridge] = useState(() => {
+    return new ChatMessageBridge<string>(messagesStore, {
+      gateway: messageApi,
+      logger: logger,
+      senderName: 'ChatSender',
+      gatewayOptions: { stream: true }
+    }).use(new ChatSenderStrategy(SendFailureStrategy.KEEP_FAILED, logger));
+  });
+
+  return (
+    <div
+      data-testid="MessagePage"
+      className="min-h-screen bg-primary py-8 px-4 sm:px-6 lg:px-8"
+    >
+      <MessageBaseList />
+
+      <ChatRoot bridge={bridge} tt={tt} />
+    </div>
+  );
+}

package/dist/templates/react-app/src/uikit/components/BaseLayoutProvider.tsx

@@ -0,0 +1,44 @@
+import { useStore } from '@brain-toolkit/react-kit';
+import { I } from '@config/IOCIdentifier';
+import { BaseLayoutService } from '@/base/services/BaseLayoutService';
+import { Loading } from './Loading';
+import { useIOC } from '../hooks/useIOC';
+import { useNavigateBridge } from '../hooks/useNavigateBridge';
+import { useRouterI18nGuard } from '../hooks/useRouterI18nGuard';
+import { useStrictEffect } from '../hooks/useStrictEffect';
+
+/**
+ * BaseLayoutProvider
+ *
+ * /pages/base/Layout.tsx 布局组件的服务提供者
+ *
+ * - 验证用户信息渲染组件，如果用户未登录则渲染 loading
+ *
+ * @param children - The children to render
+ * @returns
+ */
+export function BaseLayoutProvider({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  const ioc = useIOC();
+  const baseLayoutService = ioc(BaseLayoutService);
+  const userService = ioc(I.UserServiceInterface);
+
+  useStore(userService.getStore());
+
+  useRouterI18nGuard();
+
+  useNavigateBridge();
+
+  useStrictEffect(() => {
+    baseLayoutService.use(ioc(I.I18nKeyErrorPlugin)).starup(ioc);
+  }, []);
+
+  if (!userService.isAuthenticated()) {
+    return <Loading data-testid="BaseLayoutProviderLoading" fullscreen />;
+  }
+
+  return children;
+}

package/dist/templates/react-app/src/uikit/components/LogoutButton.tsx

@@ -29,9 +29,7 @@ export function LogoutButton() {
         'data-testid': 'LogoutButton-CancelButton'
       },
       content: tContent,
-      onOk: () => {
-        userService.logout();
-      }
+      onOk: () => userService.logout()
     });
   }, [tTitle, tContent]);
 

package/dist/templates/react-app/src/uikit/components/MessageBaseList.tsx

@@ -0,0 +1,240 @@
+import { useFactory, useStore } from '@brain-toolkit/react-kit';
+import { messageBaseListI18n } from '@config/i18n/messageBaseListI18n';
+import { I } from '@config/IOCIdentifier';
+import {
+  MessageSender,
+  MessagesStore,
+  MessageStatus,
+  SenderStrategyPlugin,
+  SendFailureStrategy,
+  ThreadUtil
+} from '@qlover/corekit-bridge';
+import { Button, Input } from 'antd';
+import { random } from 'lodash';
+import { useCallback, useMemo, useState } from 'react';
+import { useI18nInterface } from '../hooks/useI18nInterface';
+import { useIOC } from '../hooks/useIOC';
+import type {
+  MessageGetwayInterface,
+  MessagesStateInterface,
+  MessageStoreMsg
+} from '@qlover/corekit-bridge';
+
+interface MessageBaseMsg extends MessageStoreMsg<string, unknown> {}
+
+function createMessagesState(): MessagesStateInterface<MessageBaseMsg> {
+  return {
+    messages: []
+  };
+}
+
+class MessageBaseApi implements MessageGetwayInterface {
+  async sendMessage<M extends MessageStoreMsg<string>>(
+    message: M
+  ): Promise<unknown> {
+    const times = random(200, 1000);
+
+    await ThreadUtil.sleep(times);
+
+    const messageContent = message.content ?? '';
+    if (messageContent.includes('Failed') || messageContent.includes('error')) {
+      throw new Error('Failed to send message');
+    }
+
+    if (times % 5 === 0) {
+      throw new Error(`Network error(${times})`);
+    }
+
+    // Return object response to demonstrate formatting
+    return {
+      status: 'success',
+      timestamp: new Date().toISOString(),
+      delay: `${times}ms`,
+      echo: message.content,
+      data: {
+        message: 'Message received successfully',
+        processed: true,
+        metadata: {
+          length: message.content?.length || 0,
+          type: 'text'
+        }
+      }
+    };
+  }
+}
+
+export function MessageBaseList() {
+  const [inputValue, setInputValue] = useState('');
+  const logger = useIOC(I.Logger);
+  const tt = useI18nInterface(messageBaseListI18n);
+  const messagesStore = useFactory(
+    MessagesStore<MessageBaseMsg>,
+    createMessagesState
+  );
+  const messageBaseApi = useFactory(MessageBaseApi);
+
+  const [messagesSender] = useState(() =>
+    new MessageSender<MessageBaseMsg>(messagesStore, {
+      gateway: messageBaseApi,
+      logger
+    }).use(new SenderStrategyPlugin(SendFailureStrategy.KEEP_FAILED))
+  );
+
+  const messages = useStore(messagesStore, (state) => state.messages);
+
+  const loadingMessage = useMemo(() => {
+    return messages.find((message) => message.loading);
+  }, [messages]);
+
+  const onSend = useCallback(() => {
+    messagesSender.send({
+      content: inputValue
+    });
+    setInputValue('');
+  }, [inputValue, messagesSender]);
+
+  /**
+   * Render message result with proper formatting
+   * - For objects/arrays: display as formatted JSON
+   * - For strings: display as plain text
+   */
+  const renderResult = (result: unknown) => {
+    if (!result) return null;
+
+    // Check if result is an object or array
+    if (typeof result === 'object') {
+      try {
+        const jsonString = JSON.stringify(result, null, 2);
+        return (
+          <pre
+            data-testid="MessageResultJson"
+            className="text-xs font-mono bg-green-100 p-2 rounded mt-1 overflow-x-auto whitespace-pre-wrap"
+          >
+            {jsonString}
+          </pre>
+        );
+      } catch {
+        return String(result);
+      }
+    }
+
+    // For strings and other primitives
+    return <span data-testid="MessageResultText">{String(result)}</span>;
+  };
+
+  return (
+    <div data-testid="MessageBaseList" className="max-w-4xl mx-auto">
+      {/* Page Title */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-text mb-2">{tt.title}</h1>
+        <p className="text-sm text-text-secondary">{tt.description}</p>
+      </div>
+
+      {/* Messages Container */}
+      <div className="bg-secondary rounded-lg shadow-sm border border-primary mb-4">
+        <div
+          data-testid="MessageBaseListItems"
+          className="flex flex-col gap-3 p-4 max-h-96 min-h-64 overflow-y-auto"
+        >
+          {messages.length === 0 ? (
+            <div className="flex items-center justify-center h-full text-text-secondary">
+              <div className="text-center">
+                <p className="text-base mb-1">{tt.noMessages}</p>
+                <p className="text-sm">{tt.getStarted}</p>
+              </div>
+            </div>
+          ) : (
+            messages.map((message) => (
+              <div
+                key={message.id}
+                data-testid="MessageBaseListItem"
+                className="space-y-2"
+              >
+                {/* User Message */}
+                <div className="flex justify-end">
+                  <div className="max-w-[70%] bg-blue-500 text-white rounded-lg px-4 py-2 shadow-sm">
+                    <div className="text-sm font-medium mb-1">{tt.user}</div>
+                    <div className="wrap-break-word">{message.content}</div>
+                  </div>
+                </div>
+
+                {/* Gateway Response */}
+                <div className="flex justify-start">
+                  <div className="max-w-[70%]">
+                    {message.loading ? (
+                      <div className="bg-base rounded-lg px-4 py-2 shadow-sm border border-primary">
+                        <div className="text-sm font-medium text-text-secondary mb-1">
+                          {tt.gateway}
+                        </div>
+                        <div className="flex items-center gap-2 text-text-secondary">
+                          <div className="flex gap-1">
+                            <span
+                              className="animate-bounce inline-block w-1.5 h-1.5 bg-text-secondary rounded-full"
+                              style={{ animationDelay: '0ms' }}
+                            ></span>
+                            <span
+                              className="animate-bounce inline-block w-1.5 h-1.5 bg-text-secondary rounded-full"
+                              style={{ animationDelay: '150ms' }}
+                            ></span>
+                            <span
+                              className="animate-bounce inline-block w-1.5 h-1.5 bg-text-secondary rounded-full"
+                              style={{ animationDelay: '300ms' }}
+                            ></span>
+                          </div>
+                          <span className="text-sm">{tt.processing}</span>
+                        </div>
+                      </div>
+                    ) : message.status === MessageStatus.FAILED ? (
+                      <div className="bg-red-50 border border-red-200 rounded-lg px-4 py-2 shadow-sm">
+                        <div className="text-sm font-medium text-red-800 mb-1">
+                          {tt.gatewayFailed}
+                        </div>
+                        <div className="text-red-600 text-sm">
+                          ❌ {(message as any).error?.message || tt.sendFailed}
+                        </div>
+                      </div>
+                    ) : message.result ? (
+                      <div className="bg-green-50 border border-green-200 rounded-lg px-4 py-2 shadow-sm">
+                        <div className="text-sm font-medium text-green-800 mb-1">
+                          ✓ {tt.gatewayResponse}
+                        </div>
+                        <div className="text-green-900">
+                          {renderResult(message.result)}
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Input Area */}
+      <div className="bg-secondary rounded-lg shadow-sm border border-primary p-4">
+        <div className="flex gap-2">
+          <Input
+            value={inputValue}
+            onPressEnter={onSend}
+            onChange={(e) => setInputValue(e.target.value)}
+            placeholder={tt.inputPlaceholder}
+            size="large"
+            className="flex-1"
+            disabled={loadingMessage?.loading}
+          />
+          <Button
+            disabled={!inputValue || loadingMessage?.loading}
+            loading={loadingMessage?.loading}
+            type="primary"
+            size="large"
+            onClick={onSend}
+          >
+            {tt.sendButton}
+          </Button>
+        </div>
+        <div className="mt-2 text-xs text-text-secondary">{tt.errorTip}</div>
+      </div>
+    </div>
+  );
+}