From accaa47a831d0fd63f5e6d14b78bd8ef1c6e373f Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Fri, 30 Jan 2026 14:35:45 +0800
Subject: [PATCH] =?UTF-8?q?fix(components):=20=E4=BF=AE=E5=A4=8D=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=AD=E5=AE=9A=E6=97=B6=E5=99=A8=E5=86=85=E5=AD=98?=
 =?UTF-8?q?=E6=B3=84=E6=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在TopLoadingBar组件中添加timeoutRef并正确清理定时器
- 在Agent页面中添加timeoutRef管理AI响应模拟定时器
- 修复BasicInformation组件中useCallback依赖数组缺失问题
- 在CreateDataset页面中传递hidden属性控制数据源显示
- 在Orchestration页面中添加intervalRef管理工作流执行进度
- 在SynthesisTask中添加testTimeoutRef管理模板测试定时器
- 确保所有组件卸载时正确清除定时器避免内存泄漏
---
 frontend/src/components/TopLoadingBar.tsx     | 11 ++++++-
 frontend/src/pages/Agent/Agent.tsx            | 16 +++++++++-
 .../DataManagement/Create/CreateDataset.tsx   |  6 +++-
 .../Create/components/BasicInformation.tsx    |  3 +-
 .../src/pages/Orchestration/Orchestration.tsx | 30 ++++++++++++++++---
 .../pages/SynthesisTask/CreateTemplate.tsx    | 20 +++++++++++--
 6 files changed, 76 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/TopLoadingBar.tsx b/frontend/src/components/TopLoadingBar.tsx
index ec95fd1..9ab113e 100644
--- a/frontend/src/components/TopLoadingBar.tsx
+++ b/frontend/src/components/TopLoadingBar.tsx
@@ -4,6 +4,7 @@ const TopLoadingBar = () => {
   const [isVisible, setIsVisible] = useState(false);
   const [progress, setProgress] = useState(0);
   const intervalRef = useRef(null);
+  const timeoutRef = useRef(null);
 
   useEffect(() => {
     // 监听全局事件
@@ -33,8 +34,13 @@ const TopLoadingBar = () => {
         clearInterval(intervalRef.current);
         intervalRef.current = null;
       }
+      // 清除旧的timeout
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
       setProgress(100);
-      setTimeout(() => {
+      timeoutRef.current = setTimeout(() => {
         setIsVisible(false);
         setProgress(0);
       }, 300);
@@ -49,6 +55,9 @@ const TopLoadingBar = () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
       }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
       window.removeEventListener("loading:show", handleShow);
       window.removeEventListener("loading:hide", handleHide);
     };
diff --git a/frontend/src/pages/Agent/Agent.tsx b/frontend/src/pages/Agent/Agent.tsx
index 94df683..528e813 100644
--- a/frontend/src/pages/Agent/Agent.tsx
+++ b/frontend/src/pages/Agent/Agent.tsx
@@ -151,6 +151,15 @@ export default function AgentPage() {
   const [isTyping, setIsTyping] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<any>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
 
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -174,8 +183,13 @@ export default function AgentPage() {
     setInputValue("");
     setIsTyping(true);
 
+    // 清理旧的 timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
     // 模拟AI响应
-    setTimeout(() => {
+    timeoutRef.current = setTimeout(() => {
       const response = generateResponse(content);
       const assistantMessage: Message = {
         id: (Date.now() + 1).toString(),
diff --git a/frontend/src/pages/DataManagement/Create/CreateDataset.tsx b/frontend/src/pages/DataManagement/Create/CreateDataset.tsx
index 5479324..ff19b4b 100644
--- a/frontend/src/pages/DataManagement/Create/CreateDataset.tsx
+++ b/frontend/src/pages/DataManagement/Create/CreateDataset.tsx
@@ -78,7 +78,11 @@ export default function DatasetCreate() {
             onValuesChange={handleValuesChange}
             layout="vertical"
           >
-            <BasicInformation data={newDataset} setData={setNewDataset} />
+            <BasicInformation
+              data={newDataset}
+              setData={setNewDataset}
+              hidden={["dataSource"]}
+            />
           </Form>
         </div>
         <div className="flex gap-2 justify-end p-6 border-top">
diff --git a/frontend/src/pages/DataManagement/Create/components/BasicInformation.tsx b/frontend/src/pages/DataManagement/Create/components/BasicInformation.tsx
index 290f8ac..5eadad2 100644
--- a/frontend/src/pages/DataManagement/Create/components/BasicInformation.tsx
+++ b/frontend/src/pages/DataManagement/Create/components/BasicInformation.tsx
@@ -39,6 +39,7 @@ export default function BasicInformation({
 
   // 获取归集任务
   const fetchCollectionTasks = useCallback(async () => {
+    if (hidden.includes("dataSource")) return;
     try {
       const res = await queryTasksUsingGet({ page: 0, size: 100 });
       const tasks = Array.isArray(res?.data?.content)
@@ -52,7 +53,7 @@ export default function BasicInformation({
     } catch (error) {
       console.error("Error fetching collection tasks:", error);
     }
-  }, []);
+  }, [hidden]);
 
   const fetchParentDatasets = useCallback(async () => {
     if (hidden.includes("parentDatasetId")) return;
diff --git a/frontend/src/pages/Orchestration/Orchestration.tsx b/frontend/src/pages/Orchestration/Orchestration.tsx
index 83325d8..333855f 100644
--- a/frontend/src/pages/Orchestration/Orchestration.tsx
+++ b/frontend/src/pages/Orchestration/Orchestration.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { Button, Card, Progress, Badge, Tabs } from "antd";
 import {
   GitBranch,
@@ -272,6 +272,19 @@ export default function OrchestrationPage() {
   );
   const [showWorkflowEditor, setShowWorkflowEditor] = useState(false);
 
+  // 使用 useRef 保存 interval 引用
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 组件卸载时清理 interval
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, []);
+
   const startNewFlow = () => {
     setShowWorkflowEditor(true);
   };
@@ -310,8 +323,14 @@ export default function OrchestrationPage() {
 
     setExecutions([newExecution, ...executions]);
 
+    // 清理旧的 interval
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
     // 模拟执行进度
-    const interval = setInterval(() => {
+    intervalRef.current = setInterval(() => {
       setExecutions((prev) =>
         prev.map((exec) => {
           if (exec.id === newExecution.id) {
@@ -319,6 +338,11 @@ export default function OrchestrationPage() {
               exec.progress + Math.random() * 10,
               100
             );
+            // 进度完成时清理 interval
+            if (newProgress >= 100 && intervalRef.current) {
+              clearInterval(intervalRef.current);
+              intervalRef.current = null;
+            }
             return {
               ...exec,
               progress: newProgress,
@@ -334,8 +358,6 @@ export default function OrchestrationPage() {
         })
       );
     }, 500);
-
-    setTimeout(() => clearInterval(interval), 10000);
   };
 
   const getStatusIcon = (status: string) => {
diff --git a/frontend/src/pages/SynthesisTask/CreateTemplate.tsx b/frontend/src/pages/SynthesisTask/CreateTemplate.tsx
index ca24bda..8186179 100644
--- a/frontend/src/pages/SynthesisTask/CreateTemplate.tsx
+++ b/frontend/src/pages/SynthesisTask/CreateTemplate.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import {
   Card,
   Select,
@@ -24,6 +24,7 @@ export default function InstructionTemplateCreate() {
   const [templates, setTemplates] = useState<Template[]>(mockTemplates);
   const [variables, setVariables] = useState<string[]>([]);
   const variableInputRef = useRef<Input | null>(null);
+  const testTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const [form] = Form.useForm();
 
@@ -70,12 +71,27 @@ export default function InstructionTemplateCreate() {
     setVariables(variables.filter((_, i) => i !== index));
   };
 
+  // 组件卸载时清理 timeout
+  useEffect(() => {
+    return () => {
+      if (testTimeoutRef.current) {
+        clearTimeout(testTimeoutRef.current);
+      }
+    };
+  }, []);
+
   // 测试模板
   const handleTestTemplate = async () => {
     const values = form.getFieldsValue();
     if (!values.prompt || !values.testInput) return;
+    
+    // 清理旧的 timeout
+    if (testTimeoutRef.current) {
+      clearTimeout(testTimeoutRef.current);
+    }
+    
     setIsTestingTemplate(true);
-    setTimeout(() => {
+    testTimeoutRef.current = setTimeout(() => {
       form.setFieldValue(
         "testOutput",
         `基于输入"${values.testInput}"生成的测试结果：