refactor(ui): 优化消息区域渲染性能并添加日志记录

echoVic · echoVic · commit 005c8ea97cbc · 2025-11-01T12:21:31.000+08:00
重构消息区域组件，使用 Static 组件隔离已完成消息避免重复渲染
为关键操作添加调试日志记录
移除 Header 组件中未使用的 isInitialized 属性
优化终端宽度更新逻辑，添加防抖处理
diff --git a/src/ui/components/BladeInterface.tsx b/src/ui/components/BladeInterface.tsx
@@ -1,5 +1,6 @@
 import { useMemoizedFn } from 'ahooks';
 import { Box, useApp, useStdout } from 'ink';
+import { debounce } from 'lodash-es';
 import React, { useEffect, useRef, useState } from 'react';
 import { ConfigManager } from '../../config/ConfigManager.js';
 import { PermissionMode, type SetupConfig } from '../../config/types.js';
@@ -197,9 +198,11 @@ export const BladeInterface: React.FC<BladeInterfaceProps> = ({
   }, [otherProps.resume, handleResume]);
 
   // 获取终端宽度
-  const updateTerminalWidth = useMemoizedFn(() => {
-    setTerminalWidth(stdout.columns || 80);
-  });
+  const updateTerminalWidth = useMemoizedFn(
+    debounce(() => {
+      setTerminalWidth(stdout.columns || 80);
+    }, 200)
+  );
 
   useEffect(() => {
     updateTerminalWidth();
@@ -429,8 +432,7 @@ export const BladeInterface: React.FC<BladeInterfaceProps> = ({
         />
       ) : (
         <>
-          <Header isInitialized={readyForChat} />
-
+          {/* MessageArea 内部直接引入 Header，作为 Static 的第一个子项 */}
           <MessageArea
             sessionState={sessionState}
             terminalWidth={terminalWidth}
@@ -457,7 +459,6 @@ export const BladeInterface: React.FC<BladeInterfaceProps> = ({
             selectedIndex={selectedSuggestionIndex}
             visible={showSuggestions}
           />
-
           <ChatStatusBar
             messageCount={sessionState.messages.length}
             hasApiKey={readyForChat}
diff --git a/src/ui/components/Header.tsx b/src/ui/components/Header.tsx
@@ -4,15 +4,12 @@ import Gradient from 'ink-gradient';
 import React from 'react';
 import { getCopyright } from '../../utils/packageInfo.js';
 
-interface HeaderProps {
-  isInitialized: boolean; // API 是否已初始化
-}
-
 /**
  * 应用头部组件
  * 显示 ASCII Logo、使用指南
+ * 
  */
-export const Header: React.FC<HeaderProps> = React.memo(({ isInitialized }) => {
+export const Header: React.FC = React.memo(() => {
   return (
     <Box flexDirection="column" paddingX={2} paddingTop={1} paddingBottom={1}>
       {/* Logo 使用 BigText + Gradient 渲染渐变效果 */}
@@ -40,13 +37,6 @@ export const Header: React.FC<HeaderProps> = React.memo(({ isInitialized }) => {
         <Text color="white">2. 使用 /init 创建项目配置文件</Text>
         <Text color="white">3. 输入 /help 查看所有 slash 命令</Text>
       </Box>
-
-      {/* API 密钥警告（如未初始化） */}
-      {!isInitialized && (
-        <Box>
-          <Text color="yellow">⚠️ API 密钥未配置，请先设置环境变量 BLADE_API_KEY</Text>
-        </Box>
-      )}
     </Box>
   );
 });
diff --git a/src/ui/components/MessageArea.tsx b/src/ui/components/MessageArea.tsx
@@ -1,7 +1,8 @@
-import { Box } from 'ink';
-import React from 'react';
+import { Box, Static } from 'ink';
+import React, { ReactNode, useMemo } from 'react';
 import type { TodoItem } from '../../tools/builtin/todo/types.js';
-import type { SessionState } from '../contexts/SessionContext.js';
+import type { SessionMessage, SessionState } from '../contexts/SessionContext.js';
+import { Header } from './Header.js';
 import { MessageRenderer } from './MessageRenderer.js';
 import { TodoPanel } from './TodoPanel.js';
 
@@ -15,32 +16,83 @@ interface MessageAreaProps {
 /**
  * 消息区域组件
  * 负责显示消息列表
+ *
+ * 性能优化：
+ * - 使用 Ink 的 Static 组件将已完成的消息隔离，避免重新渲染
+ * - 只有正在流式传输的消息会重新渲染
+ * - 使用 useMemo 缓存计算结果
+ *
+ * 布局优化：
+ * - Header 作为 Static 的第一个子项，确保永远在历史消息顶部
  */
 export const MessageArea: React.FC<MessageAreaProps> = React.memo(
   ({ sessionState, terminalWidth, todos = [], showTodoPanel = false }) => {
-    // 找到最后一条用户消息的索引（TodoPanel 将显示在这之后）
-    const lastUserMessageIndex = sessionState.messages.findLastIndex(
-      (msg) => msg.role === 'user'
+    // 分离已完成的消息和正在流式传输的消息
+    const { completedMessages, streamingMessage } = useMemo(() => {
+      const messages = sessionState.messages;
+      const isStreaming = sessionState.isThinking;
+
+      // 如果正在思考，最后一条消息视为流式传输中
+      if (isStreaming && messages.length > 0) {
+        return {
+          completedMessages: messages.slice(0, -1),
+          streamingMessage: messages[messages.length - 1],
+        };
+      }
+
+      // 否则所有消息都是已完成的
+      return {
+        completedMessages: messages,
+        streamingMessage: null,
+      };
+    }, [sessionState.messages, sessionState.isThinking]);
+
+    // 找到最后一条用户消息的索引（用于 TodoPanel 定位）
+    const lastUserMessageIndex = useMemo(() => {
+      return sessionState.messages.findLastIndex((msg) => msg.role === 'user');
+    }, [sessionState.messages]);
+
+    // 渲染单个消息（用于 Static 和 dynamic 区域）
+    const renderMessage = (msg: SessionMessage, index: number, isPending = false) => (
+      <Box key={msg.id} flexDirection="column">
+        <MessageRenderer
+          content={msg.content}
+          role={msg.role}
+          terminalWidth={terminalWidth}
+          metadata={msg.metadata as Record<string, unknown>}
+          isPending={isPending}
+        />
+        {/* 在最后一条用户消息后显示 TodoPanel */}
+        {index === lastUserMessageIndex && showTodoPanel && todos.length > 0 && (
+          <TodoPanel todos={todos} visible={true} compact={false} />
+        )}
+      </Box>
     );
 
+    // 构建 Static items：Header + 已完成的消息
+    const staticItems = useMemo(() => {
+      const items: ReactNode[] = [];
+
+      // 1. Header 作为第一个子项（永远在顶部）
+      items.push(<Header key="header" />);
+
+      // 2. 已完成的消息
+      completedMessages.forEach((msg, index) => {
+        items.push(renderMessage(msg, index));
+      });
+
+      return items;
+    }, [completedMessages, lastUserMessageIndex, showTodoPanel, todos]);
+
     return (
       <Box flexDirection="column" flexGrow={1} paddingX={2}>
         <Box flexDirection="column" flexGrow={1}>
-          {/* 渲染消息列表 */}
-          {sessionState.messages.map((msg, index) => (
-            <Box key={msg.id} flexDirection="column">
-              <MessageRenderer
-                content={msg.content}
-                role={msg.role}
-                terminalWidth={terminalWidth}
-                metadata={msg.metadata as Record<string, unknown>}
-              />
-              {/* 在最后一条用户消息后显示 TodoPanel */}
-              {index === lastUserMessageIndex && showTodoPanel && todos.length > 0 && (
-                <TodoPanel todos={todos} visible={true} compact={false} />
-              )}
-            </Box>
-          ))}
+          {/* 静态区域：Header + 已完成的消息永不重新渲染 */}
+          <Static items={staticItems}>{(item) => item}</Static>
+
+          {/* 动态区域：只有流式传输的消息会重新渲染 */}
+          {streamingMessage &&
+            renderMessage(streamingMessage, completedMessages.length, true)}
         </Box>
       </Box>
     );
diff --git a/src/ui/components/MessageRenderer.tsx b/src/ui/components/MessageRenderer.tsx
@@ -25,6 +25,7 @@ export interface MessageRendererProps {
   role: MessageRole;
   terminalWidth: number;
   metadata?: Record<string, unknown>; // 🆕 用于 tool-progress 等消息的元数据
+  isPending?: boolean; // 🆕 标记是否为流式传输中的消息
 }
 
 // 获取角色样式配置
@@ -517,8 +518,12 @@ const ToolDetailRenderer: React.FC<{
  * 主要的消息渲染器组件
  */
 export const MessageRenderer: React.FC<MessageRendererProps> = React.memo(
-  ({ content, role, terminalWidth, metadata }) => {
-    const roleStyle = getRoleStyle(role, metadata);
+  ({ content, role, terminalWidth, metadata, isPending = false }) => {
+    // 使用 useMemo 缓存角色样式计算
+    const roleStyle = React.useMemo(
+      () => getRoleStyle(role, metadata),
+      [role, metadata]
+    );
     const { color, prefix } = roleStyle;
 
     // 处理 tool 消息的详细内容
@@ -549,8 +554,11 @@ export const MessageRenderer: React.FC<MessageRendererProps> = React.memo(
       }
     }
 
-    // 正常渲染（摘要行或无 detail 的消息）
-    const blocks = parseMarkdown(content);
+    // 使用 useMemo 缓存 Markdown 解析结果（仅在 content 变化时重新解析）
+    const blocks = React.useMemo(
+      () => parseMarkdown(content),
+      [content]
+    );
 
     return (
       <Box flexDirection="column" marginBottom={1}>
@@ -614,5 +622,16 @@ export const MessageRenderer: React.FC<MessageRendererProps> = React.memo(
         })}
       </Box>
     );
+  },
+  // 自定义比较函数：只在关键属性变化时才重新渲染
+  (prevProps, nextProps) => {
+    return (
+      prevProps.content === nextProps.content &&
+      prevProps.role === nextProps.role &&
+      prevProps.terminalWidth === nextProps.terminalWidth &&
+      prevProps.isPending === nextProps.isPending &&
+      // 对 metadata 进行浅比较
+      JSON.stringify(prevProps.metadata) === JSON.stringify(nextProps.metadata)
+    );
   }
 );
diff --git a/src/ui/contexts/SessionContext.tsx b/src/ui/contexts/SessionContext.tsx
@@ -6,6 +6,10 @@ import React, {
   useContext,
   useReducer,
 } from 'react';
+import { createLogger, LogCategory } from '../../logging/Logger.js';
+
+// 创建 SessionContext 专用 Logger
+const logger = createLogger(LogCategory.UI);
 
 /**
  * 消息角色类型
@@ -144,13 +148,18 @@ export function SessionProvider({ children }: { children: ReactNode }) {
   const [state, dispatch] = useReducer(sessionReducer, initialState);
 
   const addUserMessage = useCallback((content: string) => {
+    logger.debug('[DIAG] addUserMessage called:', {
+      contentLength: content.length,
+      contentPreview: content.substring(0, 50) + (content.length > 50 ? '...' : ''),
+    });
     const message: SessionMessage = {
       id: `user-${Date.now()}-${Math.random()}`,
       role: 'user',
       content,
       timestamp: Date.now(),
     };
     dispatch({ type: 'ADD_MESSAGE', payload: message });
+    logger.debug('[DIAG] User message dispatched:', { messageId: message.id });
   }, []);
 
   const addAssistantMessage = useCallback((content: string) => {
diff --git a/src/ui/hooks/useCommandHandler.ts b/src/ui/hooks/useCommandHandler.ts
@@ -487,22 +487,48 @@ export const useCommandHandler = (
         isProcessing
       );
 
+      logger.debug('[DIAG] executeCommand called:', {
+        command: command.substring(0, 50) + (command.length > 50 ? '...' : ''),
+        isProcessing,
+        isEmpty: !command.trim(),
+      });
+
+      if (!command.trim()) {
+        logger.debug('[DIAG] Command blocked: empty command');
+        return;
+      }
+
+      if (isProcessing) {
+        logger.debug('[DIAG] Command blocked: isProcessing=true (another command is running)');
+        return;
+      }
+
       if (command.trim() && !isProcessing) {
         const trimmedCommand = command.trim();
 
+        logger.debug('[DIAG] Command accepted, starting execution');
+
         // 清空上一轮对话的 todos
         appDispatch({ type: 'SET_TODOS', payload: [] });
 
         setIsProcessing(true);
         dispatch({ type: 'SET_THINKING', payload: true });
 
+        logger.debug('[DIAG] States set: isProcessing=true, isThinking=true');
+
         try {
+          logger.debug('[DIAG] Calling handleCommandSubmit');
           const result = await handleCommandSubmit(
             trimmedCommand,
             addUserMessage,
             addAssistantMessage
           );
 
+          logger.debug('[DIAG] handleCommandSubmit completed:', {
+            success: result.success,
+            hasError: !!result.error,
+          });
+
           if (!result.success && result.error) {
             dispatch({ type: 'SET_ERROR', payload: result.error });
           }
@@ -511,14 +537,29 @@ export const useCommandHandler = (
           const errorMessage = error instanceof Error ? error.message : '未知错误';
           dispatch({ type: 'SET_ERROR', payload: `执行失败: ${errorMessage}` });
         } finally {
-          setIsProcessing(false);
-          setLoopState({
-            active: false,
-            turn: 0,
-            maxTurns: 50,
-            currentTool: undefined,
-          });
-          dispatch({ type: 'SET_THINKING', payload: false });
+          // 为每个状态重置添加独立的错误处理，防止某一个失败导致其他状态无法重置
+          try {
+            setIsProcessing(false);
+          } catch (e) {
+            console.error('[CRITICAL] Failed to reset isProcessing:', e);
+          }
+
+          try {
+            setLoopState({
+              active: false,
+              turn: 0,
+              maxTurns: 50,
+              currentTool: undefined,
+            });
+          } catch (e) {
+            console.error('[CRITICAL] Failed to reset loopState:', e);
+          }
+
+          try {
+            dispatch({ type: 'SET_THINKING', payload: false });
+          } catch (e) {
+            console.error('[CRITICAL] Failed to reset isThinking:', e);
+          }
         }
       }
     }
diff --git a/src/ui/hooks/useMainInput.ts b/src/ui/hooks/useMainInput.ts
