@qlover/create-app 0.10.2 → 0.10.3

package/dist/templates/react-app/docs/en/components/chat-message-component.md

@@ -42,6 +42,7 @@ src/pages/base/
 ### 1. ChatMessageBridge (Bridge Layer)
 
 Bridge connecting UI and data layer, handles:
+
 - Message sending logic
 - Draft management
 - State control
@@ -52,20 +53,23 @@ Bridge connecting UI and data layer, handles:
 Simulates backend API, supports three modes:
 
 #### Streaming Mode (stream: true)
+
 ```typescript
 {
-  stream: true  // Character-by-character output, stoppable
+  stream: true; // Character-by-character output, stoppable
 }
 ```
 
 #### Interruptible Normal Mode
+
 ```typescript
 {
-  stream: false  // One-time return, stoppable
+  stream: false; // One-time return, stoppable
 }
 ```
 
 #### Fast Normal Mode
+
 ```typescript
 // No options passed, one-time return, non-stoppable
 ```
@@ -73,6 +77,7 @@ Simulates backend API, supports three modes:
 ### 3. ChatMessageStore (State Management)
 
 Manages all message states:
+
 - `messages` - History message list
 - `draftMessages` - Draft message list
 - `streaming` - Whether streaming output is in progress
@@ -104,6 +109,7 @@ export default function ChatMessagePage() {
 ### Message Styles
 
 **User Messages**:
+
 - Blue background
 - Right-aligned
 - Max width 80%
@@ -111,6 +117,7 @@ export default function ChatMessagePage() {
 - Has retry button
 
 **AI Messages**:
+
 - Light background + border
 - Left-aligned
 - Max width 85%
@@ -132,25 +139,25 @@ export default function ChatMessagePage() {
 interface ChatMessageBridgeInterface<T> {
   // Send message
   send(message?: ChatMessage<T>): Promise<ChatMessage<T>>;
-  
+
   // Stop sending
   stop(messageId?: string): boolean;
-  
+
   // Stop all
   stopAll(): void;
-  
+
   // Update content
   onChangeContent(content: T): void;
-  
+
   // Get message store
   getMessageStore(): ChatMessageStore<T>;
-  
+
   // Get first draft message
   getFirstDraftMessage(): ChatMessage<T> | null;
-  
+
   // Get sending message
   getSendingMessage(): ChatMessage<T> | null;
-  
+
   // Is send disabled
   getDisabledSend(): boolean;
 }
@@ -160,21 +167,18 @@ interface ChatMessageBridgeInterface<T> {
 
 ```typescript
 class MessageApi {
-  async sendMessage<M>(
-    message: M,
-    options?: GatewayOptions<M>
-  ): Promise<M>;
+  async sendMessage<M>(message: M, options?: GatewayOptions<M>): Promise<M>;
 }
 
 interface GatewayOptions<M> {
-  stream?: boolean;           // Whether streaming
-  signal?: AbortSignal;       // Stop signal
-  onConnected?: () => void;   // Connection success
+  stream?: boolean; // Whether streaming
+  signal?: AbortSignal; // Stop signal
+  onConnected?: () => void; // Connection success
   onChunk?: (msg: M) => void; // Streaming chunk callback
   onProgress?: (p: number) => void; // Progress callback
-  onComplete?: (msg: M) => void;    // Completion callback
-  onAborted?: (msg: M) => void;     // Stop callback
-  onError?: (err: any) => void;     // Error callback
+  onComplete?: (msg: M) => void; // Completion callback
+  onAborted?: (msg: M) => void; // Stop callback
+  onError?: (err: any) => void; // Error callback
 }
 ```
 
@@ -189,8 +193,8 @@ const [bridge] = useState(() => {
     gateway: messageApi,
     logger: logger,
     senderName: 'ChatSender',
-    gatewayOptions: { 
-      stream: true  // Change to false for normal mode
+    gatewayOptions: {
+      stream: true // Change to false for normal mode
     }
   }).use(new ChatSenderStrategy(SendFailureStrategy.KEEP_FAILED, logger));
 });
@@ -199,8 +203,8 @@ const [bridge] = useState(() => {
 ### 2. Custom Message Component
 
 ```typescript
-<MessagesList 
-  bridge={bridge} 
+<MessagesList
+  bridge={bridge}
   getMessageComponent={(props) => CustomMessageItem}
 />
 ```
@@ -217,13 +221,13 @@ async sendMessage<M>(message: M, options?: GatewayOptions<M>): Promise<M> {
     body: JSON.stringify(message),
     signal: options?.signal
   });
-  
+
   // Handle streaming response
   if (options?.stream) {
     const reader = response.body?.getReader();
     // ... process streaming data
   }
-  
+
   return response.json();
 }
 ```
@@ -233,6 +237,7 @@ async sendMessage<M>(message: M, options?: GatewayOptions<M>): Promise<M> {
 ### Test Features
 
 **Normal Messages**:
+
 ```
 Hello
 你好
@@ -240,6 +245,7 @@ Test message
 ```
 
 **Trigger Errors**:
+
 ```
 error
 Failed
@@ -247,6 +253,7 @@ test error
 ```
 
 **See Streaming Effect**:
+
 - Send any message
 - Watch character-by-character output
 - Click stop button to test interruption
@@ -277,13 +284,13 @@ MessageSender → MessageApi
     ↓
 [Streaming Mode]
   onConnected → onChunk(word-by-word) → onComplete
-  
+
 [Normal Mode]
   onConnected → onComplete
-  
+
 [Error]
   onError
-  
+
 [Stop]
   onAborted
     ↓
@@ -311,4 +318,3 @@ UI Auto-updates
 ## 🎉 Summary
 
 ChatMessage is a fully-featured, elegantly designed chat component system, ready to use out of the box, supporting streaming output, error handling, state management, and other core features. Can be used directly in production or extended and customized as needed.
-

package/dist/templates/react-app/docs/en/components/chat-message-refactor.md

@@ -11,12 +11,14 @@ Refactored ChatMessage from a standalone page to a reusable component, integrate
 **File:** `src/uikit/components/chatMessage/ChatRoot.tsx`
 
 **Changes:**
+
 - Removed internal creation of `ChatMessageStore`, `MessageApi`, and `ChatMessageBridge`
 - Changed to accept `bridge` and `tt` (internationalization object) as props
 - Added `ChatRootProps` interface definition
 - Removed internal `useI18nInterface` call
 
 **Before:**
+
 ```typescript
 export function ChatRoot() {
   const messagesStore = useFactory(ChatMessageStore<string>);
@@ -29,7 +31,7 @@ export function ChatRoot() {
       gatewayOptions: { stream: true }
     }).use(new ChatSenderStrategy(SendFailureStrategy.KEEP_FAILED, logger));
   });
-  
+
   return (
     <div data-testid="ChatRoot">
       <MessagesList bridge={bridge} />
@@ -40,6 +42,7 @@ export function ChatRoot() {
 ```
 
 **After:**
+
 ```typescript
 export interface ChatRootProps {
   bridge: ChatMessageBridge<string>;
@@ -61,12 +64,14 @@ export function ChatRoot({ bridge, tt }: ChatRootProps) {
 **File:** `src/pages/base/MessagePage.tsx`
 
 **Changes:**
+
 - Use `useI18nInterface` to get the internationalization object `tt` in MessagePage
 - Create `ChatMessageStore`, `MessageApi`, and `ChatMessageBridge` in MessagePage
 - Pass both `bridge` and `tt` to `ChatRoot` component via props
 - Also integrated the `MessageBaseList` component
 
 **Implementation:**
+
 ```typescript
 import { useFactory } from '@brain-toolkit/react-kit';
 import { chatMessageI18n } from '@config/i18n/chatMessageI18n';
@@ -112,11 +117,13 @@ export default function MessagePage() {
 ### 3. Child Component Refactoring (MessagesList, FocusBar, MessageItem)
 
 **Changes:**
+
 - Removed internal `useI18nInterface` calls from all child components
 - Changed to accept `tt` parameter via props
 - Updated Props interface definitions for each component
 
 **Example - MessagesList:**
+
 ```typescript
 // Before
 export function MessagesList({ bridge, ... }: MessagesListProps) {
@@ -139,37 +146,44 @@ export function MessagesList({ bridge, tt, ... }: MessagesListProps) {
 ### 4. Removed Standalone ChatMessagePage
 
 **Deleted Files:**
+
 - `src/pages/base/ChatMessagePage.tsx`
 - `config/Identifier/pages/page.chat.ts`
 - `config/i18n/chatI18n.ts`
 
 **Updated Files:**
+
 - `config/app.router.ts` - Removed `/chat` route configuration
 - `config/Identifier/pages/index.ts` - Removed `page.chat` export
 
 ## Advantages of Refactoring
 
 ### 1. Improved Component Reusability
+
 - `ChatRoot` is now a pure presentational component that can be used anywhere
 - Creation and configuration of `bridge` and `tt` are controlled by parent component for better flexibility
 - Parent component can customize internationalization content, supporting different language environments
 
 ### 2. Simplified Routing Structure
+
 - Reduced unnecessary routing layers
 - Directly integrated chat functionality into message page, aligning with business logic
 
 ### 3. Better Separation of Concerns
+
 - `ChatRoot` and its child components focus only on UI presentation
 - Business logic (store, api, bridge) is managed at the page level
 - Internationalization configuration is centrally managed at the page level
 - Easier to test and maintain
 
 ### 4. Reduced Boilerplate
+
 - No need to create a separate page for chat functionality
 - No need to create separate i18n configuration for the page
 - Child components don't need to repeatedly call `useI18nInterface`
 
 ### 5. Performance Improvement
+
 - Reduced number of hook calls (multiple child components share the same `tt` object)
 - Avoided redundant internationalization configuration parsing
 
@@ -197,7 +211,7 @@ import { MessageApi } from '@/uikit/components/chatMessage/MessageApi';
 function MyCustomChatPage() {
   // Get internationalization object
   const tt = useI18nInterface(chatMessageI18n);
-  
+
   const messagesStore = useFactory(ChatMessageStore<string>);
   const messageApi = useFactory(MessageApi, messagesStore);
 
@@ -206,7 +220,7 @@ function MyCustomChatPage() {
       gateway: messageApi,
       logger: logger,
       senderName: 'MyCustomSender',
-      gatewayOptions: { 
+      gatewayOptions: {
         stream: true,
         // Can customize other options
       }
@@ -241,7 +255,7 @@ const customI18n: ChatMessageI18nInterface = {
 function MyCustomChatPage() {
   const tt = useI18nInterface(customI18n);
   // ... other logic
-  
+
   return <ChatRoot bridge={bridge} tt={tt} />;
 }
 ```
@@ -267,4 +281,3 @@ function MyCustomChatPage() {
 - [ChatMessage Component Documentation](./chat-message-component.md)
 - [MessagePage Simplification Guide](./message-page-简化说明.md)
 - [Development Guide](./development-guide.md)
-

package/dist/templates/react-app/docs/en/components/message-base-list-component.md

@@ -52,17 +52,17 @@ export default function MessagePage() {
 
 ### Supported Text
 
-| Text Item | Chinese | English |
-|-----------|---------|---------|
-| Title | 消息网关测试 | Message Gateway Test |
-| Description | 发送消息并等待网关响应 | Send messages and wait for gateway response |
-| Empty State | 暂无消息 | No messages yet |
-| User Label | 你 | You |
-| Gateway Label | 网关 | Gateway |
-| Processing | 处理中... | Processing... |
-| Failed Label | 网关（失败） | Gateway (Failed) |
-| Gateway Response | 网关响应 | Gateway Response |
-| Send Button | 发送 | Send |
+| Text Item        | Chinese                | English                                     |
+| ---------------- | ---------------------- | ------------------------------------------- |
+| Title            | 消息网关测试           | Message Gateway Test                        |
+| Description      | 发送消息并等待网关响应 | Send messages and wait for gateway response |
+| Empty State      | 暂无消息               | No messages yet                             |
+| User Label       | 你                     | You                                         |
+| Gateway Label    | 网关                   | Gateway                                     |
+| Processing       | 处理中...              | Processing...                               |
+| Failed Label     | 网关（失败）           | Gateway (Failed)                            |
+| Gateway Response | 网关响应               | Gateway Response                            |
+| Send Button      | 发送                   | Send                                        |
 
 ## 🧪 Testing Features
 
@@ -169,4 +169,3 @@ Possible feature expansion directions:
 ## 🎉 Summary
 
 `MessageBaseList` is a fully-featured, beautifully styled message component with complete internationalization support, perfect for testing and demonstrating message gateway functionality.
-

package/dist/templates/react-app/docs/en/request.md

@@ -158,9 +158,7 @@ apiAdapter.usePlugin(new ApiMockPlugin(mockDataJson, logger));
 
 ```typescript
 @injectable()
-export class RequestLogger
-  implements ExecutorPlugin<RequestAdapterFetchConfig>
-{
+export class RequestLogger implements ExecutorPlugin<RequestAdapterFetchConfig> {
   readonly pluginName = 'RequestLogger';
 
   onBefore(context) {

package/dist/templates/react-app/docs/zh/components/chat-message-component.md

@@ -42,6 +42,7 @@ src/pages/base/
 ### 1. ChatMessageBridge（桥接层）
 
 连接 UI 和数据层的桥梁，处理：
+
 - 消息发送逻辑
 - 草稿管理
 - 状态控制
@@ -52,20 +53,23 @@ src/pages/base/
 模拟后端 API，支持三种模式：
 
 #### 流式模式 (stream: true)
+
 ```typescript
 {
-  stream: true  // 逐字输出，可停止
+  stream: true; // 逐字输出，可停止
 }
 ```
 
 #### 可中断普通模式
+
 ```typescript
 {
-  stream: false  // 一次性返回，可停止
+  stream: false; // 一次性返回，可停止
 }
 ```
 
 #### 快速普通模式
+
 ```typescript
 // 不传 options，一次性返回，不可停止
 ```
@@ -73,6 +77,7 @@ src/pages/base/
 ### 3. ChatMessageStore（状态管理）
 
 管理所有消息状态：
+
 - `messages` - 历史消息列表
 - `draftMessages` - 草稿消息列表
 - `streaming` - 是否正在流式输出
@@ -104,6 +109,7 @@ export default function ChatMessagePage() {
 ### 消息样式
 
 **用户消息**：
+
 - 蓝色背景
 - 右对齐
 - 最大宽度 80%
@@ -111,6 +117,7 @@ export default function ChatMessagePage() {
 - 带重试按钮
 
 **AI 消息**：
+
 - 浅色背景 + 边框
 - 左对齐
 - 最大宽度 85%
@@ -132,25 +139,25 @@ export default function ChatMessagePage() {
 interface ChatMessageBridgeInterface<T> {
   // 发送消息
   send(message?: ChatMessage<T>): Promise<ChatMessage<T>>;
-  
+
   // 停止发送
   stop(messageId?: string): boolean;
-  
+
   // 停止所有
   stopAll(): void;
-  
+
   // 更新内容
   onChangeContent(content: T): void;
-  
+
   // 获取消息存储
   getMessageStore(): ChatMessageStore<T>;
-  
+
   // 获取第一个草稿消息
   getFirstDraftMessage(): ChatMessage<T> | null;
-  
+
   // 获取正在发送的消息
   getSendingMessage(): ChatMessage<T> | null;
-  
+
   // 是否禁用发送
   getDisabledSend(): boolean;
 }
@@ -160,21 +167,18 @@ interface ChatMessageBridgeInterface<T> {
 
 ```typescript
 class MessageApi {
-  async sendMessage<M>(
-    message: M,
-    options?: GatewayOptions<M>
-  ): Promise<M>;
+  async sendMessage<M>(message: M, options?: GatewayOptions<M>): Promise<M>;
 }
 
 interface GatewayOptions<M> {
-  stream?: boolean;           // 是否流式
-  signal?: AbortSignal;       // 停止信号
-  onConnected?: () => void;   // 连接成功
+  stream?: boolean; // 是否流式
+  signal?: AbortSignal; // 停止信号
+  onConnected?: () => void; // 连接成功
   onChunk?: (msg: M) => void; // 流式块回调
   onProgress?: (p: number) => void; // 进度回调
-  onComplete?: (msg: M) => void;    // 完成回调
-  onAborted?: (msg: M) => void;     // 停止回调
-  onError?: (err: any) => void;     // 错误回调
+  onComplete?: (msg: M) => void; // 完成回调
+  onAborted?: (msg: M) => void; // 停止回调
+  onError?: (err: any) => void; // 错误回调
 }
 ```
 
@@ -189,8 +193,8 @@ const [bridge] = useState(() => {
     gateway: messageApi,
     logger: logger,
     senderName: 'ChatSender',
-    gatewayOptions: { 
-      stream: true  // 改为 false 使用普通模式
+    gatewayOptions: {
+      stream: true // 改为 false 使用普通模式
     }
   }).use(new ChatSenderStrategy(SendFailureStrategy.KEEP_FAILED, logger));
 });
@@ -199,8 +203,8 @@ const [bridge] = useState(() => {
 ### 2. 自定义消息组件
 
 ```typescript
-<MessagesList 
-  bridge={bridge} 
+<MessagesList
+  bridge={bridge}
   getMessageComponent={(props) => CustomMessageItem}
 />
 ```
@@ -217,13 +221,13 @@ async sendMessage<M>(message: M, options?: GatewayOptions<M>): Promise<M> {
     body: JSON.stringify(message),
     signal: options?.signal
   });
-  
+
   // 处理流式响应
   if (options?.stream) {
     const reader = response.body?.getReader();
     // ... 处理流式数据
   }
-  
+
   return response.json();
 }
 ```
@@ -233,6 +237,7 @@ async sendMessage<M>(message: M, options?: GatewayOptions<M>): Promise<M> {
 ### 测试功能
 
 **正常消息**：
+
 ```
 Hello
 你好
@@ -240,6 +245,7 @@ Hello
 ```
 
 **触发错误**：
+
 ```
 error
 Failed
@@ -247,6 +253,7 @@ test error
 ```
 
 **查看流式效果**：
+
 - 发送任意消息
 - 观察逐字输出效果
 - 点击停止按钮测试中断
@@ -277,13 +284,13 @@ MessageSender → MessageApi
     ↓
 [流式模式]
   onConnected → onChunk(逐字) → onComplete
-  
+
 [普通模式]
   onConnected → onComplete
-  
+
 [错误]
   onError
-  
+
 [停止]
   onAborted
     ↓
@@ -311,4 +318,3 @@ UI 自动更新
 ## 🎉 总结
 
 ChatMessage 是一个功能完整、设计优雅的聊天组件系统，开箱即用，支持流式输出、错误处理、状态管理等核心功能。可以直接用于生产环境，也可以根据需要进行扩展和定制。
-