⚡perf: Optimize message persistence and reduce localStorage operations

- Refactor message saving strategy from automatic to manual saving
  - Save messages only on key operations: send, complete, edit, delete, role toggle, clear
  - Prevent frequent localStorage writes during streaming responses

- Remove excessive console logging
  - Remove all console.log statements from save/load operations
  - Clean up debug logs to reduce console noise

- Optimize initial state loading with lazy initialization
  - Replace useRef with useState lazy initialization for config and messages
  - Ensure loadConfig and loadMessages are called only once on mount
  - Prevent redundant localStorage reads during re-renders

- Update hooks to support new save strategy
  - Pass saveMessages callback through component hierarchy
  - Add saveMessagesImmediately to relevant hooks (useApiRequest, useMessageActions, useMessageEdit)
  - Trigger saves at appropriate lifecycle points

This significantly improves performance by reducing localStorage I/O operations
from continuous writes during streaming to discrete saves at meaningful points.

web/src/pages/Playground/index.js

@@ -83,6 +83,7 @@ const Playground = () => {
     handleInputChange,
     handleParameterToggle,
     debouncedSaveConfig,
+    saveMessagesImmediately,
     handleConfigImport,
     handleConfigReset,
     setShowSettings,
@@ -103,7 +104,8 @@ const Playground = () => {
     setMessage,
     setDebugData,
     setActiveDebugTab,
-    sseSourceRef
+    sseSourceRef,
+    saveMessagesImmediately
   );
 
   // 数据加载
@@ -117,7 +119,7 @@ const Playground = () => {
     handleMessageEdit,
     handleEditSave,
     handleEditCancel
-  } = useMessageEdit(setMessage, inputs, parameterEnabled, sendRequest);
+  } = useMessageEdit(setMessage, inputs, parameterEnabled, sendRequest, saveMessagesImmediately);
 
   // 消息和自定义请求体同步
   const { syncMessageToCustomBody, syncCustomBodyToMessage } = useSyncMessageAndCustomBody(
@@ -147,7 +149,7 @@ const Playground = () => {
   };
 
   // 消息操作
-  const messageActions = useMessageActions(message, setMessage, onMessageSend);
+  const messageActions = useMessageActions(message, setMessage, onMessageSend, saveMessagesImmediately);
 
   // 构建预览请求体
   const constructPreviewPayload = useCallback(() => {
@@ -212,6 +214,9 @@ const Playground = () => {
           // 发送自定义请求体
           sendRequest(customPayload, customPayload.stream !== false);
 
+          // 发送消息后保存
+          setTimeout(() => saveMessagesImmediately(), 0);
+
           return newMessages;
         });
         return;
@@ -240,6 +245,9 @@ const Playground = () => {
         }, 100);
       }
 
+      // 发送消息后保存
+      setTimeout(() => saveMessagesImmediately(), 0);
+
       return [...newMessages, loadingMessage];
     });
   }
@@ -351,6 +359,13 @@ const Playground = () => {
     debouncedSaveConfig();
   }, [inputs, parameterEnabled, showDebugPanel, customRequestMode, customRequestBody, debouncedSaveConfig]);
 
+  // 清空对话的处理函数
+  const handleClearMessages = useCallback(() => {
+    setMessage([]);
+    // 清空对话后保存
+    setTimeout(() => saveMessagesImmediately(), 0);
+  }, [setMessage, saveMessagesImmediately]);
+
   return (
     <div className="h-full bg-gray-50">
       <Layout style={{ height: '100%', background: 'transparent' }} className="flex flex-col md:flex-row">
@@ -413,7 +428,7 @@ const Playground = () => {
                 onMessageReset={messageActions.handleMessageReset}
                 onMessageDelete={messageActions.handleMessageDelete}
                 onStopGenerator={onStopGenerator}
-                onClearMessages={() => setMessage([])}
+                onClearMessages={handleClearMessages}
                 onToggleDebugPanel={() => setShowDebugPanel(!showDebugPanel)}
                 renderCustomChatContent={renderCustomChatContent}
                 renderChatBoxAction={renderChatBoxAction}