🚀 feat(web/channels): Deep modular refactor of Channels table

1. Split monolithic `ChannelsTable` (2200+ LOC) into focused components
   • `channels/index.jsx` – composition entry
   • `ChannelsTable.jsx` – pure `<Table>` rendering
   • `ChannelsActions.jsx` – bulk & settings toolbar
   • `ChannelsFilters.jsx` – search / create / column-settings form
   • `ChannelsTabs.jsx` – type tabs
   • `ChannelsColumnDefs.js` – column definitions & render helpers
   • `modals/` – BatchTag, ColumnSelector, ModelTest modals

2. Extract domain hook
   • Moved `useChannelsData.js` → `src/hooks/channels/useChannelsData.js`
     – centralises state, API calls, pagination, filters, batch ops
     – now exports `setActivePage`, fixing tab / status switch errors

3. Update wiring
   • All sub-components consume data via `useChannelsData` props
   • Adjusted import paths after hook relocation

4. Clean legacy file
   • Legacy `components/table/ChannelsTable.js` now re-exports new module

5. Bug fixes
   • Tab switching, status filter & tag aggregation restored
   • Column selector & batch actions operate via unified hook

This commit completes the first phase of modularising the Channels feature, laying groundwork for consistent, maintainable table architecture across the app.

web/src/hooks/playground/useApiRequest.js

@@ -0,0 +1,410 @@
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SSE } from 'sse.js';
+import {
+  API_ENDPOINTS,
+  MESSAGE_STATUS,
+  DEBUG_TABS
+} from '../../constants/playground.constants';
+import {
+  getUserIdFromLocalStorage,
+  handleApiError,
+  processThinkTags,
+  processIncompleteThinkTags
+} from '../../helpers';
+
+export const useApiRequest = (
+  setMessage,
+  setDebugData,
+  setActiveDebugTab,
+  sseSourceRef,
+  saveMessages
+) => {
+  const { t } = useTranslation();
+
+  // 处理消息自动关闭逻辑的公共函数
+  const applyAutoCollapseLogic = useCallback((message, isThinkingComplete = true) => {
+    const shouldAutoCollapse = isThinkingComplete && !message.hasAutoCollapsed;
+    return {
+      isThinkingComplete,
+      hasAutoCollapsed: shouldAutoCollapse || message.hasAutoCollapsed,
+      isReasoningExpanded: shouldAutoCollapse ? false : message.isReasoningExpanded,
+    };
+  }, []);
+
+  // 流式消息更新
+  const streamMessageUpdate = useCallback((textChunk, type) => {
+    setMessage(prevMessage => {
+      const lastMessage = prevMessage[prevMessage.length - 1];
+      if (!lastMessage) return prevMessage;
+      if (lastMessage.role !== 'assistant') return prevMessage;
+      if (lastMessage.status === MESSAGE_STATUS.ERROR) {
+        return prevMessage;
+      }
+
+      if (lastMessage.status === MESSAGE_STATUS.LOADING ||
+        lastMessage.status === MESSAGE_STATUS.INCOMPLETE) {
+
+        let newMessage = { ...lastMessage };
+
+        if (type === 'reasoning') {
+          newMessage = {
+            ...newMessage,
+            reasoningContent: (lastMessage.reasoningContent || '') + textChunk,
+            status: MESSAGE_STATUS.INCOMPLETE,
+            isThinkingComplete: false,
+          };
+        } else if (type === 'content') {
+          const shouldCollapseReasoning = !lastMessage.content && lastMessage.reasoningContent;
+          const newContent = (lastMessage.content || '') + textChunk;
+
+          let shouldCollapseFromThinkTag = false;
+          let thinkingCompleteFromTags = lastMessage.isThinkingComplete;
+
+          if (lastMessage.isReasoningExpanded && newContent.includes('</think>')) {
+            const thinkMatches = newContent.match(/<think>/g);
+            const thinkCloseMatches = newContent.match(/<\/think>/g);
+            if (thinkMatches && thinkCloseMatches &&
+              thinkCloseMatches.length >= thinkMatches.length) {
+              shouldCollapseFromThinkTag = true;
+              thinkingCompleteFromTags = true; // think标签闭合也标记思考完成
+            }
+          }
+
+          // 如果开始接收content内容，且之前有reasoning内容，或者think标签已闭合，则标记思考完成
+          const isThinkingComplete = (lastMessage.reasoningContent && !lastMessage.isThinkingComplete) ||
+            thinkingCompleteFromTags;
+
+          const autoCollapseState = applyAutoCollapseLogic(lastMessage, isThinkingComplete);
+
+          newMessage = {
+            ...newMessage,
+            content: newContent,
+            status: MESSAGE_STATUS.INCOMPLETE,
+            ...autoCollapseState,
+          };
+        }
+
+        return [...prevMessage.slice(0, -1), newMessage];
+      }
+
+      return prevMessage;
+    });
+  }, [setMessage, applyAutoCollapseLogic]);
+
+  // 完成消息
+  const completeMessage = useCallback((status = MESSAGE_STATUS.COMPLETE) => {
+    setMessage(prevMessage => {
+      const lastMessage = prevMessage[prevMessage.length - 1];
+      if (lastMessage.status === MESSAGE_STATUS.COMPLETE ||
+        lastMessage.status === MESSAGE_STATUS.ERROR) {
+        return prevMessage;
+      }
+
+      const autoCollapseState = applyAutoCollapseLogic(lastMessage, true);
+
+      const updatedMessages = [
+        ...prevMessage.slice(0, -1),
+        {
+          ...lastMessage,
+          status: status,
+          ...autoCollapseState,
+        }
+      ];
+
+      // 在消息完成时保存，传入更新后的消息列表
+      if (status === MESSAGE_STATUS.COMPLETE || status === MESSAGE_STATUS.ERROR) {
+        setTimeout(() => saveMessages(updatedMessages), 0);
+      }
+
+      return updatedMessages;
+    });
+  }, [setMessage, applyAutoCollapseLogic, saveMessages]);
+
+  // 非流式请求
+  const handleNonStreamRequest = useCallback(async (payload) => {
+    setDebugData(prev => ({
+      ...prev,
+      request: payload,
+      timestamp: new Date().toISOString(),
+      response: null
+    }));
+    setActiveDebugTab(DEBUG_TABS.REQUEST);
+
+    try {
+      const response = await fetch(API_ENDPOINTS.CHAT_COMPLETIONS, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'New-Api-User': getUserIdFromLocalStorage(),
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        let errorBody = '';
+        try {
+          errorBody = await response.text();
+        } catch (e) {
+          errorBody = '无法读取错误响应体';
+        }
+
+        const errorInfo = handleApiError(
+          new Error(`HTTP error! status: ${response.status}, body: ${errorBody}`),
+          response
+        );
+
+        setDebugData(prev => ({
+          ...prev,
+          response: JSON.stringify(errorInfo, null, 2)
+        }));
+        setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+        throw new Error(`HTTP error! status: ${response.status}, body: ${errorBody}`);
+      }
+
+      const data = await response.json();
+
+      setDebugData(prev => ({
+        ...prev,
+        response: JSON.stringify(data, null, 2)
+      }));
+      setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+      if (data.choices?.[0]) {
+        const choice = data.choices[0];
+        let content = choice.message?.content || '';
+        let reasoningContent = choice.message?.reasoning_content || '';
+
+        const processed = processThinkTags(content, reasoningContent);
+
+        setMessage(prevMessage => {
+          const newMessages = [...prevMessage];
+          const lastMessage = newMessages[newMessages.length - 1];
+          if (lastMessage?.status === MESSAGE_STATUS.LOADING) {
+            const autoCollapseState = applyAutoCollapseLogic(lastMessage, true);
+
+            newMessages[newMessages.length - 1] = {
+              ...lastMessage,
+              content: processed.content,
+              reasoningContent: processed.reasoningContent,
+              status: MESSAGE_STATUS.COMPLETE,
+              ...autoCollapseState,
+            };
+          }
+          return newMessages;
+        });
+      }
+    } catch (error) {
+      console.error('Non-stream request error:', error);
+
+      const errorInfo = handleApiError(error);
+      setDebugData(prev => ({
+        ...prev,
+        response: JSON.stringify(errorInfo, null, 2)
+      }));
+      setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+      setMessage(prevMessage => {
+        const newMessages = [...prevMessage];
+        const lastMessage = newMessages[newMessages.length - 1];
+        if (lastMessage?.status === MESSAGE_STATUS.LOADING) {
+          const autoCollapseState = applyAutoCollapseLogic(lastMessage, true);
+
+          newMessages[newMessages.length - 1] = {
+            ...lastMessage,
+            content: t('请求发生错误: ') + error.message,
+            status: MESSAGE_STATUS.ERROR,
+            ...autoCollapseState,
+          };
+        }
+        return newMessages;
+      });
+    }
+  }, [setDebugData, setActiveDebugTab, setMessage, t, applyAutoCollapseLogic]);
+
+  // SSE请求
+  const handleSSE = useCallback((payload) => {
+    setDebugData(prev => ({
+      ...prev,
+      request: payload,
+      timestamp: new Date().toISOString(),
+      response: null
+    }));
+    setActiveDebugTab(DEBUG_TABS.REQUEST);
+
+    const source = new SSE(API_ENDPOINTS.CHAT_COMPLETIONS, {
+      headers: {
+        'Content-Type': 'application/json',
+        'New-Api-User': getUserIdFromLocalStorage(),
+      },
+      method: 'POST',
+      payload: JSON.stringify(payload),
+    });
+
+    sseSourceRef.current = source;
+
+    let responseData = '';
+    let hasReceivedFirstResponse = false;
+    let isStreamComplete = false; // 添加标志位跟踪流是否正常完成
+
+    source.addEventListener('message', (e) => {
+      if (e.data === '[DONE]') {
+        isStreamComplete = true; // 标记流正常完成
+        source.close();
+        sseSourceRef.current = null;
+        setDebugData(prev => ({ ...prev, response: responseData }));
+        completeMessage();
+        return;
+      }
+
+      try {
+        const payload = JSON.parse(e.data);
+        responseData += e.data + '\n';
+
+        if (!hasReceivedFirstResponse) {
+          setActiveDebugTab(DEBUG_TABS.RESPONSE);
+          hasReceivedFirstResponse = true;
+        }
+
+        const delta = payload.choices?.[0]?.delta;
+        if (delta) {
+          if (delta.reasoning_content) {
+            streamMessageUpdate(delta.reasoning_content, 'reasoning');
+          }
+          if (delta.content) {
+            streamMessageUpdate(delta.content, 'content');
+          }
+        }
+      } catch (error) {
+        console.error('Failed to parse SSE message:', error);
+        const errorInfo = `解析错误: ${error.message}`;
+
+        setDebugData(prev => ({
+          ...prev,
+          response: responseData + `\n\nError: ${errorInfo}`
+        }));
+        setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+        streamMessageUpdate(t('解析响应数据时发生错误'), 'content');
+        completeMessage(MESSAGE_STATUS.ERROR);
+      }
+    });
+
+    source.addEventListener('error', (e) => {
+      // 只有在流没有正常完成且连接状态异常时才处理错误
+      if (!isStreamComplete && source.readyState !== 2) {
+        console.error('SSE Error:', e);
+        const errorMessage = e.data || t('请求发生错误');
+
+        const errorInfo = handleApiError(new Error(errorMessage));
+        errorInfo.readyState = source.readyState;
+
+        setDebugData(prev => ({
+          ...prev,
+          response: responseData + '\n\nSSE Error:\n' + JSON.stringify(errorInfo, null, 2)
+        }));
+        setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+        streamMessageUpdate(errorMessage, 'content');
+        completeMessage(MESSAGE_STATUS.ERROR);
+        sseSourceRef.current = null;
+        source.close();
+      }
+    });
+
+    source.addEventListener('readystatechange', (e) => {
+      // 检查 HTTP 状态错误，但避免与正常关闭重复处理
+      if (e.readyState >= 2 && source.status !== undefined && source.status !== 200 && !isStreamComplete) {
+        const errorInfo = handleApiError(new Error('HTTP状态错误'));
+        errorInfo.status = source.status;
+        errorInfo.readyState = source.readyState;
+
+        setDebugData(prev => ({
+          ...prev,
+          response: responseData + '\n\nHTTP Error:\n' + JSON.stringify(errorInfo, null, 2)
+        }));
+        setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+        source.close();
+        streamMessageUpdate(t('连接已断开'), 'content');
+        completeMessage(MESSAGE_STATUS.ERROR);
+      }
+    });
+
+    try {
+      source.stream();
+    } catch (error) {
+      console.error('Failed to start SSE stream:', error);
+      const errorInfo = handleApiError(error);
+
+      setDebugData(prev => ({
+        ...prev,
+        response: 'Stream启动失败:\n' + JSON.stringify(errorInfo, null, 2)
+      }));
+      setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+      streamMessageUpdate(t('建立连接时发生错误'), 'content');
+      completeMessage(MESSAGE_STATUS.ERROR);
+    }
+  }, [setDebugData, setActiveDebugTab, streamMessageUpdate, completeMessage, t, applyAutoCollapseLogic]);
+
+  // 停止生成
+  const onStopGenerator = useCallback(() => {
+    // 如果仍有活动的 SSE 连接，首先关闭
+    if (sseSourceRef.current) {
+      sseSourceRef.current.close();
+      sseSourceRef.current = null;
+    }
+
+    // 无论是否存在 SSE 连接，都尝试处理最后一条正在生成的消息
+    setMessage(prevMessage => {
+      if (prevMessage.length === 0) return prevMessage;
+      const lastMessage = prevMessage[prevMessage.length - 1];
+
+      if (lastMessage.status === MESSAGE_STATUS.LOADING ||
+        lastMessage.status === MESSAGE_STATUS.INCOMPLETE) {
+
+        const processed = processIncompleteThinkTags(
+          lastMessage.content || '',
+          lastMessage.reasoningContent || ''
+        );
+
+        const autoCollapseState = applyAutoCollapseLogic(lastMessage, true);
+
+        const updatedMessages = [
+          ...prevMessage.slice(0, -1),
+          {
+            ...lastMessage,
+            status: MESSAGE_STATUS.COMPLETE,
+            reasoningContent: processed.reasoningContent || null,
+            content: processed.content,
+            ...autoCollapseState,
+          }
+        ];
+
+        // 停止生成时也保存，传入更新后的消息列表
+        setTimeout(() => saveMessages(updatedMessages), 0);
+
+        return updatedMessages;
+      }
+      return prevMessage;
+    });
+  }, [setMessage, applyAutoCollapseLogic, saveMessages]);
+
+  // 发送请求
+  const sendRequest = useCallback((payload, isStream) => {
+    if (isStream) {
+      handleSSE(payload);
+    } else {
+      handleNonStreamRequest(payload);
+    }
+  }, [handleSSE, handleNonStreamRequest]);
+
+  return {
+    sendRequest,
+    onStopGenerator,
+    streamMessageUpdate,
+    completeMessage,
+  };
+};

web/src/hooks/playground/useDataLoader.js

@@ -0,0 +1,69 @@
+import { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { API, processModelsData, processGroupsData } from '../../helpers';
+import { API_ENDPOINTS } from '../../constants/playground.constants';
+
+export const useDataLoader = (
+  userState,
+  inputs,
+  handleInputChange,
+  setModels,
+  setGroups
+) => {
+  const { t } = useTranslation();
+
+  const loadModels = useCallback(async () => {
+    try {
+      const res = await API.get(API_ENDPOINTS.USER_MODELS);
+      const { success, message, data } = res.data;
+
+      if (success) {
+        const { modelOptions, selectedModel } = processModelsData(data, inputs.model);
+        setModels(modelOptions);
+
+        if (selectedModel !== inputs.model) {
+          handleInputChange('model', selectedModel);
+        }
+      } else {
+        showError(t(message));
+      }
+    } catch (error) {
+      showError(t('加载模型失败'));
+    }
+  }, [inputs.model, handleInputChange, setModels, t]);
+
+  const loadGroups = useCallback(async () => {
+    try {
+      const res = await API.get(API_ENDPOINTS.USER_GROUPS);
+      const { success, message, data } = res.data;
+
+      if (success) {
+        const userGroup = userState?.user?.group || JSON.parse(localStorage.getItem('user'))?.group;
+        const groupOptions = processGroupsData(data, userGroup);
+        setGroups(groupOptions);
+
+        const hasCurrentGroup = groupOptions.some(option => option.value === inputs.group);
+        if (!hasCurrentGroup) {
+          handleInputChange('group', groupOptions[0]?.value || '');
+        }
+      } else {
+        showError(t(message));
+      }
+    } catch (error) {
+      showError(t('加载分组失败'));
+    }
+  }, [userState, inputs.group, handleInputChange, setGroups, t]);
+
+  // 自动加载数据
+  useEffect(() => {
+    if (userState?.user) {
+      loadModels();
+      loadGroups();
+    }
+  }, [userState?.user, loadModels, loadGroups]);
+
+  return {
+    loadModels,
+    loadGroups
+  };
+}; 

web/src/hooks/playground/useMessageActions.js

@@ -0,0 +1,223 @@
+import { useCallback } from 'react';
+import { Toast, Modal } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
+import { getTextContent } from '../../helpers';
+import { ERROR_MESSAGES } from '../../constants/playground.constants';
+
+export const useMessageActions = (message, setMessage, onMessageSend, saveMessages) => {
+  const { t } = useTranslation();
+
+  // 复制消息
+  const handleMessageCopy = useCallback((targetMessage) => {
+    const textToCopy = getTextContent(targetMessage);
+
+    if (!textToCopy) {
+      Toast.warning({
+        content: t(ERROR_MESSAGES.NO_TEXT_CONTENT),
+        duration: 2,
+      });
+      return;
+    }
+
+    const copyToClipboard = async (text) => {
+      if (navigator.clipboard?.writeText) {
+        try {
+          await navigator.clipboard.writeText(text);
+          Toast.success({
+            content: t('消息已复制到剪贴板'),
+            duration: 2,
+          });
+        } catch (err) {
+          console.error('Clipboard API 复制失败:', err);
+          fallbackCopy(text);
+        }
+      } else {
+        fallbackCopy(text);
+      }
+    };
+
+    const fallbackCopy = (text) => {
+      try {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.style.cssText = `
+          position: fixed;
+          top: -9999px;
+          left: -9999px;
+          opacity: 0;
+          pointer-events: none;
+          z-index: -1;
+        `;
+        textArea.setAttribute('readonly', '');
+
+        document.body.appendChild(textArea);
+        textArea.select();
+        textArea.setSelectionRange(0, text.length);
+
+        const successful = document.execCommand('copy');
+        document.body.removeChild(textArea);
+
+        if (successful) {
+          Toast.success({
+            content: t('消息已复制到剪贴板'),
+            duration: 2,
+          });
+        } else {
+          throw new Error('execCommand copy failed');
+        }
+      } catch (err) {
+        console.error('回退复制方案也失败:', err);
+
+        let errorMessage = t(ERROR_MESSAGES.COPY_FAILED);
+        if (window.location.protocol === 'http:' && window.location.hostname !== 'localhost') {
+          errorMessage = t(ERROR_MESSAGES.COPY_HTTPS_REQUIRED);
+        } else if (!navigator.clipboard && !document.execCommand) {
+          errorMessage = t(ERROR_MESSAGES.BROWSER_NOT_SUPPORTED);
+        }
+
+        Toast.error({
+          content: errorMessage,
+          duration: 4,
+        });
+      }
+    };
+
+    copyToClipboard(textToCopy);
+  }, [t]);
+
+  // 重新生成消息
+  const handleMessageReset = useCallback((targetMessage) => {
+    setMessage(prevMessages => {
+      // 使用引用查找索引，防止重复 id 造成误匹配
+      let messageIndex = prevMessages.findIndex(msg => msg === targetMessage);
+
+      // 回退到 id 匹配（兼容不同引用场景）
+      if (messageIndex === -1) {
+        messageIndex = prevMessages.findIndex(msg => msg.id === targetMessage.id);
+      }
+
+      if (messageIndex === -1) return prevMessages;
+
+      if (targetMessage.role === 'user') {
+        const newMessages = prevMessages.slice(0, messageIndex);
+        const contentToSend = getTextContent(targetMessage);
+
+        setTimeout(() => {
+          onMessageSend(contentToSend);
+        }, 100);
+
+        return newMessages;
+      } else if (targetMessage.role === 'assistant' || targetMessage.role === 'system') {
+        let userMessageIndex = messageIndex - 1;
+        while (userMessageIndex >= 0 && prevMessages[userMessageIndex].role !== 'user') {
+          userMessageIndex--;
+        }
+
+        if (userMessageIndex >= 0) {
+          const userMessage = prevMessages[userMessageIndex];
+          const newMessages = prevMessages.slice(0, userMessageIndex);
+          const contentToSend = getTextContent(userMessage);
+
+          setTimeout(() => {
+            onMessageSend(contentToSend);
+          }, 100);
+
+          return newMessages;
+        }
+      }
+
+      return prevMessages;
+    });
+  }, [setMessage, onMessageSend]);
+
+  // 删除消息
+  const handleMessageDelete = useCallback((targetMessage) => {
+    Modal.confirm({
+      title: t('确认删除'),
+      content: t('确定要删除这条消息吗？'),
+      okText: t('确定'),
+      cancelText: t('取消'),
+      okButtonProps: {
+        type: 'danger',
+      },
+      onOk: () => {
+        setMessage(prevMessages => {
+          // 使用引用查找索引，防止重复 id 造成误匹配
+          let messageIndex = prevMessages.findIndex(msg => msg === targetMessage);
+
+          // 回退到 id 匹配（兼容不同引用场景）
+          if (messageIndex === -1) {
+            messageIndex = prevMessages.findIndex(msg => msg.id === targetMessage.id);
+          }
+
+          if (messageIndex === -1) return prevMessages;
+
+          let updatedMessages;
+          if (targetMessage.role === 'user' && messageIndex < prevMessages.length - 1) {
+            const nextMessage = prevMessages[messageIndex + 1];
+            if (nextMessage.role === 'assistant') {
+              Toast.success({
+                content: t('已删除消息及其回复'),
+                duration: 2,
+              });
+              updatedMessages = prevMessages.filter((_, index) =>
+                index !== messageIndex && index !== messageIndex + 1
+              );
+            } else {
+              Toast.success({
+                content: t('消息已删除'),
+                duration: 2,
+              });
+              updatedMessages = prevMessages.filter(msg => msg.id !== targetMessage.id);
+            }
+          } else {
+            Toast.success({
+              content: t('消息已删除'),
+              duration: 2,
+            });
+            updatedMessages = prevMessages.filter(msg => msg.id !== targetMessage.id);
+          }
+
+          // 删除消息后保存，传入更新后的消息列表
+          setTimeout(() => saveMessages(updatedMessages), 0);
+          return updatedMessages;
+        });
+      },
+    });
+  }, [setMessage, t, saveMessages]);
+
+  // 切换角色
+  const handleRoleToggle = useCallback((targetMessage) => {
+    if (!(targetMessage.role === 'assistant' || targetMessage.role === 'system')) {
+      return;
+    }
+
+    const newRole = targetMessage.role === 'assistant' ? 'system' : 'assistant';
+
+    setMessage(prevMessages => {
+      const updatedMessages = prevMessages.map(msg => {
+        if (msg.id === targetMessage.id &&
+          (msg.role === 'assistant' || msg.role === 'system')) {
+          return { ...msg, role: newRole };
+        }
+        return msg;
+      });
+
+      // 切换角色后保存，传入更新后的消息列表
+      setTimeout(() => saveMessages(updatedMessages), 0);
+      return updatedMessages;
+    });
+
+    Toast.success({
+      content: t(`已切换为${newRole === 'system' ? 'System' : 'Assistant'}角色`),
+      duration: 2,
+    });
+  }, [setMessage, t, saveMessages]);
+
+  return {
+    handleMessageCopy,
+    handleMessageReset,
+    handleMessageDelete,
+    handleRoleToggle,
+  };
+}; 

web/src/hooks/playground/useMessageEdit.js

@@ -0,0 +1,109 @@
+import { useCallback, useState, useRef } from 'react';
+import { Toast, Modal } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
+import { getTextContent, buildApiPayload, createLoadingAssistantMessage } from '../../helpers';
+import { MESSAGE_ROLES } from '../../constants/playground.constants';
+
+export const useMessageEdit = (
+  setMessage,
+  inputs,
+  parameterEnabled,
+  sendRequest,
+  saveMessages
+) => {
+  const { t } = useTranslation();
+  const [editingMessageId, setEditingMessageId] = useState(null);
+  const [editValue, setEditValue] = useState('');
+  const editingMessageRef = useRef(null);
+
+  const handleMessageEdit = useCallback((targetMessage) => {
+    const editableContent = getTextContent(targetMessage);
+    setEditingMessageId(targetMessage.id);
+    editingMessageRef.current = targetMessage;
+    setEditValue(editableContent);
+  }, []);
+
+  const handleEditSave = useCallback(() => {
+    if (!editingMessageId || !editValue.trim()) return;
+
+    setMessage(prevMessages => {
+      let messageIndex = prevMessages.findIndex(msg => msg === editingMessageRef.current);
+
+      if (messageIndex === -1) {
+        messageIndex = prevMessages.findIndex(msg => msg.id === editingMessageId);
+      }
+
+      const targetMessage = prevMessages[messageIndex];
+      let newContent;
+
+      if (Array.isArray(targetMessage.content)) {
+        newContent = targetMessage.content.map(item =>
+          item.type === 'text' ? { ...item, text: editValue.trim() } : item
+        );
+      } else {
+        newContent = editValue.trim();
+      }
+
+      const updatedMessages = prevMessages.map(msg =>
+        msg.id === editingMessageId ? { ...msg, content: newContent } : msg
+      );
+
+      // 处理用户消息编辑后的重新生成
+      if (targetMessage.role === MESSAGE_ROLES.USER) {
+        const hasSubsequentAssistantReply = messageIndex < prevMessages.length - 1 &&
+          prevMessages[messageIndex + 1].role === MESSAGE_ROLES.ASSISTANT;
+
+        if (hasSubsequentAssistantReply) {
+          Modal.confirm({
+            title: t('消息已编辑'),
+            content: t('检测到该消息后有AI回复，是否删除后续回复并重新生成？'),
+            okText: t('重新生成'),
+            cancelText: t('仅保存'),
+            onOk: () => {
+              const messagesUntilUser = updatedMessages.slice(0, messageIndex + 1);
+              setMessage(messagesUntilUser);
+              // 编辑后保存（重新生成的情况），传入更新后的消息列表
+              setTimeout(() => saveMessages(messagesUntilUser), 0);
+
+              setTimeout(() => {
+                const payload = buildApiPayload(messagesUntilUser, null, inputs, parameterEnabled);
+                setMessage(prevMsg => [...prevMsg, createLoadingAssistantMessage()]);
+                sendRequest(payload, inputs.stream);
+              }, 100);
+            },
+            onCancel: () => {
+              setMessage(updatedMessages);
+              // 编辑后保存（仅保存的情况），传入更新后的消息列表
+              setTimeout(() => saveMessages(updatedMessages), 0);
+            }
+          });
+          return prevMessages;
+        }
+      }
+
+      // 编辑后保存（普通情况），传入更新后的消息列表
+      setTimeout(() => saveMessages(updatedMessages), 0);
+      return updatedMessages;
+    });
+
+    setEditingMessageId(null);
+    editingMessageRef.current = null;
+    setEditValue('');
+    Toast.success({ content: t('消息已更新'), duration: 2 });
+  }, [editingMessageId, editValue, t, inputs, parameterEnabled, sendRequest, setMessage, saveMessages]);
+
+  const handleEditCancel = useCallback(() => {
+    setEditingMessageId(null);
+    editingMessageRef.current = null;
+    setEditValue('');
+  }, []);
+
+  return {
+    editingMessageId,
+    editValue,
+    setEditValue,
+    handleMessageEdit,
+    handleEditSave,
+    handleEditCancel
+  };
+}; 

web/src/hooks/playground/usePlaygroundState.js

@@ -0,0 +1,225 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { DEFAULT_MESSAGES, DEFAULT_CONFIG, DEBUG_TABS, MESSAGE_STATUS } from '../../constants/playground.constants';
+import { loadConfig, saveConfig, loadMessages, saveMessages } from '../../components/playground/configStorage';
+import { processIncompleteThinkTags } from '../../helpers';
+
+export const usePlaygroundState = () => {
+  // 使用惰性初始化，确保只在组件首次挂载时加载配置和消息
+  const [savedConfig] = useState(() => loadConfig());
+  const [initialMessages] = useState(() => loadMessages() || DEFAULT_MESSAGES);
+
+  // 基础配置状态
+  const [inputs, setInputs] = useState(savedConfig.inputs || DEFAULT_CONFIG.inputs);
+  const [parameterEnabled, setParameterEnabled] = useState(
+    savedConfig.parameterEnabled || DEFAULT_CONFIG.parameterEnabled
+  );
+  const [showDebugPanel, setShowDebugPanel] = useState(
+    savedConfig.showDebugPanel || DEFAULT_CONFIG.showDebugPanel
+  );
+  const [customRequestMode, setCustomRequestMode] = useState(
+    savedConfig.customRequestMode || DEFAULT_CONFIG.customRequestMode
+  );
+  const [customRequestBody, setCustomRequestBody] = useState(
+    savedConfig.customRequestBody || DEFAULT_CONFIG.customRequestBody
+  );
+
+  // UI状态
+  const [showSettings, setShowSettings] = useState(false);
+  const [models, setModels] = useState([]);
+  const [groups, setGroups] = useState([]);
+  const [status, setStatus] = useState({});
+
+  // 消息相关状态 - 使用加载的消息初始化
+  const [message, setMessage] = useState(initialMessages);
+
+  // 调试状态
+  const [debugData, setDebugData] = useState({
+    request: null,
+    response: null,
+    timestamp: null,
+    previewRequest: null,
+    previewTimestamp: null
+  });
+  const [activeDebugTab, setActiveDebugTab] = useState(DEBUG_TABS.PREVIEW);
+  const [previewPayload, setPreviewPayload] = useState(null);
+
+  // 编辑状态
+  const [editingMessageId, setEditingMessageId] = useState(null);
+  const [editValue, setEditValue] = useState('');
+
+  // Refs
+  const sseSourceRef = useRef(null);
+  const chatRef = useRef(null);
+  const saveConfigTimeoutRef = useRef(null);
+  const saveMessagesTimeoutRef = useRef(null);
+
+  // 配置更新函数
+  const handleInputChange = useCallback((name, value) => {
+    setInputs(prev => ({ ...prev, [name]: value }));
+  }, []);
+
+  const handleParameterToggle = useCallback((paramName) => {
+    setParameterEnabled(prev => ({
+      ...prev,
+      [paramName]: !prev[paramName]
+    }));
+  }, []);
+
+  // 消息保存函数 - 改为立即保存，可以接受参数
+  const saveMessagesImmediately = useCallback((messagesToSave) => {
+    // 如果提供了参数，使用参数；否则使用当前状态
+    saveMessages(messagesToSave || message);
+  }, [message]);
+
+  // 配置保存
+  const debouncedSaveConfig = useCallback(() => {
+    if (saveConfigTimeoutRef.current) {
+      clearTimeout(saveConfigTimeoutRef.current);
+    }
+
+    saveConfigTimeoutRef.current = setTimeout(() => {
+      const configToSave = {
+        inputs,
+        parameterEnabled,
+        showDebugPanel,
+        customRequestMode,
+        customRequestBody,
+      };
+      saveConfig(configToSave);
+    }, 1000);
+  }, [inputs, parameterEnabled, showDebugPanel, customRequestMode, customRequestBody]);
+
+  // 配置导入/重置
+  const handleConfigImport = useCallback((importedConfig) => {
+    if (importedConfig.inputs) {
+      setInputs(prev => ({ ...prev, ...importedConfig.inputs }));
+    }
+    if (importedConfig.parameterEnabled) {
+      setParameterEnabled(prev => ({ ...prev, ...importedConfig.parameterEnabled }));
+    }
+    if (typeof importedConfig.showDebugPanel === 'boolean') {
+      setShowDebugPanel(importedConfig.showDebugPanel);
+    }
+    if (importedConfig.customRequestMode) {
+      setCustomRequestMode(importedConfig.customRequestMode);
+    }
+    if (importedConfig.customRequestBody) {
+      setCustomRequestBody(importedConfig.customRequestBody);
+    }
+    // 如果导入的配置包含消息，也恢复消息
+    if (importedConfig.messages && Array.isArray(importedConfig.messages)) {
+      setMessage(importedConfig.messages);
+    }
+  }, []);
+
+  const handleConfigReset = useCallback((options = {}) => {
+    const { resetMessages = false } = options;
+
+    setInputs(DEFAULT_CONFIG.inputs);
+    setParameterEnabled(DEFAULT_CONFIG.parameterEnabled);
+    setShowDebugPanel(DEFAULT_CONFIG.showDebugPanel);
+    setCustomRequestMode(DEFAULT_CONFIG.customRequestMode);
+    setCustomRequestBody(DEFAULT_CONFIG.customRequestBody);
+
+    // 只有在明确指定时才重置消息
+    if (resetMessages) {
+      setMessage([]);
+      setTimeout(() => {
+        setMessage(DEFAULT_MESSAGES);
+      }, 0);
+    }
+  }, []);
+
+  // 清理定时器
+  useEffect(() => {
+    return () => {
+      if (saveConfigTimeoutRef.current) {
+        clearTimeout(saveConfigTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // 页面首次加载时，若最后一条消息仍处于 LOADING/INCOMPLETE 状态，自动修复
+  useEffect(() => {
+    if (!Array.isArray(message) || message.length === 0) return;
+
+    const lastMsg = message[message.length - 1];
+    if (lastMsg.status === MESSAGE_STATUS.LOADING || lastMsg.status === MESSAGE_STATUS.INCOMPLETE) {
+      const processed = processIncompleteThinkTags(
+        lastMsg.content || '',
+        lastMsg.reasoningContent || ''
+      );
+
+      const fixedLastMsg = {
+        ...lastMsg,
+        status: MESSAGE_STATUS.COMPLETE,
+        content: processed.content,
+        reasoningContent: processed.reasoningContent || null,
+        isThinkingComplete: true,
+      };
+
+      const updatedMessages = [...message.slice(0, -1), fixedLastMsg];
+      setMessage(updatedMessages);
+
+      // 保存修复后的消息列表
+      setTimeout(() => saveMessagesImmediately(updatedMessages), 0);
+    }
+  }, []);
+
+  return {
+    // 配置状态
+    inputs,
+    parameterEnabled,
+    showDebugPanel,
+    customRequestMode,
+    customRequestBody,
+
+    // UI状态
+    showSettings,
+    models,
+    groups,
+    status,
+
+    // 消息状态
+    message,
+
+    // 调试状态
+    debugData,
+    activeDebugTab,
+    previewPayload,
+
+    // 编辑状态
+    editingMessageId,
+    editValue,
+
+    // Refs
+    sseSourceRef,
+    chatRef,
+    saveConfigTimeoutRef,
+
+    // 更新函数
+    setInputs,
+    setParameterEnabled,
+    setShowDebugPanel,
+    setCustomRequestMode,
+    setCustomRequestBody,
+    setShowSettings,
+    setModels,
+    setGroups,
+    setStatus,
+    setMessage,
+    setDebugData,
+    setActiveDebugTab,
+    setPreviewPayload,
+    setEditingMessageId,
+    setEditValue,
+
+    // 处理函数
+    handleInputChange,
+    handleParameterToggle,
+    debouncedSaveConfig,
+    saveMessagesImmediately,
+    handleConfigImport,
+    handleConfigReset,
+  };
+}; 

web/src/hooks/playground/useSyncMessageAndCustomBody.js

@@ -0,0 +1,111 @@
+import { useCallback, useRef } from 'react';
+import { MESSAGE_ROLES } from '../../constants/playground.constants';
+
+export const useSyncMessageAndCustomBody = (
+  customRequestMode,
+  customRequestBody,
+  message,
+  inputs,
+  setCustomRequestBody,
+  setMessage,
+  debouncedSaveConfig
+) => {
+  const isUpdatingFromMessage = useRef(false);
+  const isUpdatingFromCustomBody = useRef(false);
+  const lastMessageHash = useRef('');
+  const lastCustomBodyHash = useRef('');
+
+  const getMessageHash = useCallback((messages) => {
+    return JSON.stringify(messages.map(msg => ({
+      id: msg.id,
+      role: msg.role,
+      content: msg.content
+    })));
+  }, []);
+
+  const getCustomBodyHash = useCallback((customBody) => {
+    try {
+      const parsed = JSON.parse(customBody);
+      return JSON.stringify(parsed.messages || []);
+    } catch {
+      return '';
+    }
+  }, []);
+
+  const syncMessageToCustomBody = useCallback(() => {
+    if (!customRequestMode || isUpdatingFromCustomBody.current) return;
+
+    const currentMessageHash = getMessageHash(message);
+    if (currentMessageHash === lastMessageHash.current) return;
+
+    try {
+      isUpdatingFromMessage.current = true;
+      let customPayload;
+
+      try {
+        customPayload = JSON.parse(customRequestBody || '{}');
+      } catch {
+        customPayload = {
+          model: inputs.model || 'gpt-4o',
+          messages: [],
+          temperature: inputs.temperature || 0.7,
+          stream: inputs.stream !== false
+        };
+      }
+
+      customPayload.messages = message.map(msg => ({
+        role: msg.role,
+        content: msg.content
+      }));
+
+      const newCustomBody = JSON.stringify(customPayload, null, 2);
+      setCustomRequestBody(newCustomBody);
+      lastMessageHash.current = currentMessageHash;
+      lastCustomBodyHash.current = getCustomBodyHash(newCustomBody);
+
+      setTimeout(() => {
+        debouncedSaveConfig();
+      }, 0);
+    } finally {
+      isUpdatingFromMessage.current = false;
+    }
+  }, [customRequestMode, customRequestBody, message, inputs.model, inputs.temperature, inputs.stream, getMessageHash, getCustomBodyHash, setCustomRequestBody, debouncedSaveConfig]);
+
+  const syncCustomBodyToMessage = useCallback(() => {
+    if (!customRequestMode || isUpdatingFromMessage.current) return;
+
+    const currentCustomBodyHash = getCustomBodyHash(customRequestBody);
+    if (currentCustomBodyHash === lastCustomBodyHash.current) return;
+
+    try {
+      isUpdatingFromCustomBody.current = true;
+      const customPayload = JSON.parse(customRequestBody || '{}');
+
+      if (customPayload.messages && Array.isArray(customPayload.messages)) {
+        const newMessages = customPayload.messages.map((msg, index) => ({
+          id: msg.id || (index + 1).toString(),
+          role: msg.role || MESSAGE_ROLES.USER,
+          content: msg.content || '',
+          createAt: Date.now(),
+          ...(msg.role === MESSAGE_ROLES.ASSISTANT && {
+            reasoningContent: msg.reasoningContent || '',
+            isReasoningExpanded: false
+          })
+        }));
+
+        setMessage(newMessages);
+        lastCustomBodyHash.current = currentCustomBodyHash;
+        lastMessageHash.current = getMessageHash(newMessages);
+      }
+    } catch (error) {
+      console.warn('同步自定义请求体到消息失败:', error);
+    } finally {
+      isUpdatingFromCustomBody.current = false;
+    }
+  }, [customRequestMode, customRequestBody, getCustomBodyHash, getMessageHash, setMessage]);
+
+  return {
+    syncMessageToCustomBody,
+    syncCustomBodyToMessage
+  };
+};