feat: 优化任务查看页面功能

- 添加 URL 参数支持，刷新页面时保持选中任务状态
- 实现侧边栏宽窄模式切换（320px/160px）
- 优化任务列表样式：去边框、改图标、调整间隔
- 窄模式只显示任务名称，宽模式显示状态、名称、时间
- pending 和 processing 状态统一使用加载图标
- 添加定时刷新避免频繁重新渲染，解决卡顿问题
- 项目启动 AI 后跳转到新的任务查看页面
- 窄模式按钮文字简化为'新任务'
Co-authored-by: monkeycode-ai <monkeycode-ai@chaitin.com>

Author: safe1ine

frontend/src/components/console/project/start-develop-task-dialog.tsx

@@ -46,7 +46,7 @@ export default function StartDevelopTaskDialog({
       if (resp.code === 0) {
         toast.success('对话任务已启动')
         onOpenChange(false)
-        window.open(`/console/task/develop/${resp.data?.id}`, "_blank")
+        window.open(`/console/task/view?taskId=${resp.data?.id}`, "_blank")
       } else {
         toast.error(resp.message || '任务启动失败')
       }

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

@@ -1,23 +1,36 @@
 import { type DomainProjectTask } from "@/api/Api"
-import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Spinner } from "@/components/ui/spinner"
 import { cn } from "@/lib/utils"
 import { stripMarkdown } from "@/utils/common"
 import { apiRequest } from "@/utils/requestUtils"
-import { IconPlus } from "@tabler/icons-react"
+import { IconPlus, IconCircleCheck, IconAlertTriangle, IconLoader, IconLayoutSidebar } from "@tabler/icons-react"
 import dayjs from "dayjs"
+import relativeTime from "dayjs/plugin/relativeTime"
 import { useCallback, useEffect, useState } from "react"
+import { useSearchParams } from "react-router-dom"
 import { toast } from "sonner"
 
+dayjs.extend(relativeTime)
+
 const PAGE_SIZE = 50
 
 export default function TaskViewPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
   const [tasks, setTasks] = useState<DomainProjectTask[]>([])
   const [loading, setLoading] = useState(false)
-  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null)
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(searchParams.get('taskId') || null)
   const [selectedTask, setSelectedTask] = useState<DomainProjectTask | null>(null)
+  const [sidebarWidth, setSidebarWidth] = useState<'wide' | 'narrow'>('wide')
+  const [, update] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      update(v => v + 1)
+    }, 30000)
+    return () => clearInterval(interval)
+  }, [])
 
   const fetchTasks = useCallback(async () => {
     setLoading(true)
@@ -29,13 +42,19 @@ export default function TaskViewPage() {
           const firstTask = fetchedTasks[0]
           setSelectedTaskId(firstTask.id)
           setSelectedTask(firstTask)
+          setSearchParams({ taskId: firstTask.id }, { replace: true })
+        } else if (selectedTaskId) {
+          const foundTask = fetchedTasks.find(t => t.id === selectedTaskId)
+          if (foundTask) {
+            setSelectedTask(foundTask)
+          }
         }
       } else {
         toast.error("获取任务列表失败: " + resp.message)
       }
     })
     setLoading(false)
-  }, [selectedTaskId])
+  }, [selectedTaskId, setSearchParams])
 
   useEffect(() => {
     fetchTasks()
@@ -45,20 +64,28 @@ export default function TaskViewPage() {
 
   return (
     <div className="flex h-screen overflow-hidden">
-      <div className="w-80 border-r flex flex-col h-full bg-background overflow-hidden">
-        <div className="p-2">
+      <div className={cn("border-r flex flex-col h-full bg-muted/30 overflow-hidden transition-all duration-300", sidebarWidth === 'wide' ? 'w-80' : 'w-40')}>
+        <div className="flex p-2 gap-2">
           <Button 
             variant="outline" 
             size="sm"
-            className="w-full"
+            className="flex-1"
             onClick={() => window.location.href = '/console/tasks'}
           >
-            <IconPlus className="w-4 h-4 mr-2" />
-            启动新任务
+            <IconPlus className="w-4 h-4" />
+            {sidebarWidth === 'wide' ? '启动新任务' : '新任务'}
+          </Button>
+          <Button 
+            variant="outline" 
+            size="sm"
+            className="flex-shrink-0"
+            onClick={() => setSidebarWidth(sidebarWidth === 'wide' ? 'narrow' : 'wide')}
+          >
+            <IconLayoutSidebar className="w-4 h-4" />
           </Button>
         </div>
         <ScrollArea className="flex-1 h-0">
-          <div className="p-2 space-y-2">
+          <div className="p-2 space-y-1">
             {loading && tasks.length === 0 ? (
               <div className="flex justify-center py-8">
                 <Spinner className="size-6" />
@@ -67,32 +94,40 @@ export default function TaskViewPage() {
               <div className="text-center py-8 text-muted-foreground text-sm">
                 暂无任务
               </div>
-            ) : (
+              ) : (
               tasks.map((task) => (
                 <div
                   key={task.id}
                   className={cn(
-                    "p-3 rounded-lg border cursor-pointer transition-all hover:bg-accent",
-                    selectedTaskId === task.id && "bg-accent border-primary"
+                    "cursor-pointer transition-all hover:bg-accent rounded",
+                    selectedTaskId === task.id && "bg-accent"
                   )}
                   onClick={() => {
                     setSelectedTaskId(task.id)
                     setSelectedTask(task)
+                    setSearchParams({ taskId: task.id })
                   }}
                 >
-                  <div className="font-medium text-sm line-clamp-1 break-all mb-2">
-                    {task.summary || stripMarkdown(task.content)}
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <Badge variant="outline" className="text-xs">
-                      {task.status === "finished" && "已完成"}
-                      {task.status === "error" && "失败"}
-                      {task.status === "pending" && "等待中"}
-                      {task.status === "processing" && "执行中"}
-                    </Badge>
-                    <div className="text-xs text-muted-foreground">
-                      {dayjs.unix(task.created_at as number).fromNow()}
-                    </div>
+                  <div className={cn(sidebarWidth === 'wide' ? "px-3 py-2" : "px-2 py-2")}>
+                    {sidebarWidth === 'wide' ? (
+                      <div className="flex items-center gap-2 text-sm">
+                        <div className="flex-shrink-0">
+                          {task.status === "finished" && <IconCircleCheck className="w-4 h-4 text-muted-foreground/50" />}
+                          {task.status === "error" && <IconAlertTriangle className="w-4 h-4 text-muted-foreground/50" />}
+                          {(task.status === "pending" || task.status === "processing") && <IconLoader className="w-4 h-4 text-muted-foreground animate-spin" style={{ animationDuration: '3s' }} />}
+                        </div>
+                        <div className="flex-1 min-w-0 line-clamp-1">
+                          {task.summary || stripMarkdown(task.content)}
+                        </div>
+                        <div className="flex-shrink-0 text-xs text-muted-foreground">
+                          {dayjs.unix(task.created_at as number).fromNow()}
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="text-sm line-clamp-1">
+                        {task.summary || stripMarkdown(task.content)}
+                      </div>
+                    )}
                   </div>
                 </div>
               ))