fix: remount task detail on taskId change

Author: safe1ine

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { Route, BrowserRouter, Routes, Navigate } from "react-router-dom"
+import { Route, BrowserRouter, Routes, Navigate, useParams } from "react-router-dom"
 import { ThemeProvider, ThemePathListener } from "@/components/theme-provider"
 import LoginPage from "@/pages/login"
 import WelcomePage from "@/pages/welcome"
@@ -28,6 +28,11 @@ import PostCreatePage from "./pages/post-create"
 import ProjectOverviewPage from "./pages/console/user/project/overview"
 import TaskDetailPage from "./pages/console/user/task/task-detail"
 
+function TaskDetailRoute() {
+  const { taskId } = useParams()
+  return <TaskDetailPage key={taskId} />
+}
+
 function App() {
   return (
     <ThemeProvider defaultTheme="light" storageKey="monkeycode-theme">
@@ -45,7 +50,7 @@ function App() {
           <Route path="/console" element={<UserConsolePage />}>
             <Route index element={<Navigate to="/console/tasks" replace />} />
             <Route path="tasks" element={<TasksPage />} />
-            <Route path="task/:taskId" element={<TaskDetailPage />} />
+            <Route path="task/:taskId" element={<TaskDetailRoute />} />
             <Route path="project/:projectId" element={<ProjectOverviewPage />} />
             <Route path="gitbot" element={<GitBotsPage />} />
             <Route path="ide" element={<IDEIDE />} />

frontend/src/pages/console/user/task/task-detail.tsx

@@ -84,6 +84,7 @@ export default function TaskDetailPage() {
   const taskManager = React.useRef<TaskWebSocketManager | null>(null)
   const connectedRef = React.useRef(false)
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+  const cancelledRef = React.useRef(false)
   const planVersionRef = React.useRef<number | undefined>(undefined)
   const availableCommandsVersionRef = React.useRef<number | undefined>(undefined)
   const fileChangesVersionRef = React.useRef<number | undefined>(undefined)
@@ -124,7 +125,7 @@ export default function TaskDetailPage() {
     await apiRequest("v1UsersTasksDetail", {}, [taskId], (resp) => {
       if (resp.code === 0) {
         result = resp.data
-        setTask(resp.data)
+        if (!cancelledRef.current) setTask(resp.data)
       } else {
         toast.error(resp.message || "获取任务详情失败")
       }
@@ -134,6 +135,7 @@ export default function TaskDetailPage() {
 
   const scheduleFetchTaskDetail = React.useCallback(async () => {
     const currentTask = await fetchTaskDetail()
+    if (cancelledRef.current) return
     const vmStatus = currentTask?.virtualmachine?.status
     let delay = 1000
     switch (vmStatus) {
@@ -204,8 +206,10 @@ export default function TaskDetailPage() {
   // 定时获取任务详情
   React.useEffect(() => {
     if (!taskId) return
+    cancelledRef.current = false
     scheduleFetchTaskDetail()
     return () => {
+      cancelledRef.current = true
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current)
         timeoutRef.current = null