@winspan/claude-forge 8.41.0 → 8.50.6

package/web/src/pages/TaskDetail.tsx

@@ -0,0 +1,511 @@
+import { useParams, Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
+import { format } from 'date-fns'
+import { parseUTC } from '../utils/time'
+import {
+  ArrowLeft,
+  Clock,
+  CheckCircle2,
+  Loader2,
+  ChevronDown,
+  ChevronRight,
+  FileText,
+  Terminal,
+  FileEdit,
+  Bot,
+  BookOpen,
+  Syringe,
+  FolderOpen,
+  Eye,
+  Pencil,
+  Search,
+  Globe,
+  MessageSquare,
+} from 'lucide-react'
+import clsx from 'clsx'
+
+interface Injection {
+  id: string
+  injection_type: 'systemMessage' | 'additionalContext'
+  source_handler: string
+  content: string
+  timestamp: string
+}
+
+interface TimelineEvent {
+  id: string
+  timestamp: string
+  tool_name: string
+  hook_type: string
+  input: unknown
+  output: unknown
+  is_agent_call: boolean
+  agent_detail?: {
+    subagent_type?: string
+    name?: string
+    prompt?: string
+  }
+}
+
+interface SkillInvocation {
+  id: string
+  skill_id: string
+  reason: string
+  workflow?: string
+  phase?: string
+  timestamp: string
+}
+
+interface UserPrompt {
+  timestamp: string
+  content: string
+}
+
+interface TaskDetailData {
+  id: string
+  title: string
+  status: 'active' | 'completed' | 'abandoned'
+  start_time: string
+  end_time?: string
+  event_count: number
+  session_id: string
+  userPrompts: UserPrompt[]
+  injections: Injection[]
+  timeline: TimelineEvent[]
+  skillInvocations: SkillInvocation[]
+  artifacts: string[]
+}
+
+async function fetchTaskDetail(taskId: string): Promise<TaskDetailData> {
+  const res = await fetch(`/api/tasks/${taskId}`)
+  if (!res.ok) throw new Error('Failed to fetch task detail')
+  const raw = await res.json()
+  // API returns { task: {...}, injections, timeline, skillInvocations, artifacts }
+  // Flatten task fields into top level for component consumption
+  return {
+    ...raw.task,
+    userPrompts: raw.userPrompts ?? [],
+    injections: raw.injections ?? [],
+    timeline: (raw.timeline ?? []).map((e: any, idx: number) => ({
+      id: `${e.timestamp}-${e.tool_name}-${idx}`,
+      timestamp: e.timestamp,
+      tool_name: e.tool_name,
+      hook_type: e.hook_type,
+      input: e.input,
+      output: e.output,
+      is_agent_call: e.is_agent_call,
+      agent_detail: e.agent_detail,
+    })),
+    skillInvocations: raw.skillInvocations ?? [],
+    artifacts: raw.artifacts ?? [],
+  }
+}
+
+function getToolIcon(toolName: string) {
+  switch (toolName) {
+    case 'Read':
+      return <Eye className="h-4 w-4 text-gray-500" />
+    case 'Edit':
+      return <Pencil className="h-4 w-4 text-amber-600" />
+    case 'Write':
+      return <FileEdit className="h-4 w-4 text-green-600" />
+    case 'Bash':
+      return <Terminal className="h-4 w-4 text-orange-600" />
+    case 'Agent':
+    case 'Task':
+      return <Bot className="h-4 w-4 text-blue-600" />
+    case 'Grep':
+    case 'Glob':
+      return <Search className="h-4 w-4 text-purple-500" />
+    case 'WebSearch':
+    case 'WebFetch':
+      return <Globe className="h-4 w-4 text-cyan-600" />
+    default:
+      return <Terminal className="h-4 w-4 text-gray-400" />
+  }
+}
+
+function getRelativeTime(eventTime: string, startTime: string): string {
+  const diff = parseUTC(eventTime).getTime() - parseUTC(startTime).getTime()
+  if (diff < 1000) return '+0s'
+  if (diff < 60000) return `+${Math.floor(diff / 1000)}s`
+  if (diff < 3600000) return `+${Math.floor(diff / 60000)}m${Math.floor((diff % 60000) / 1000)}s`
+  return `+${Math.floor(diff / 3600000)}h${Math.floor((diff % 3600000) / 60000)}m`
+}
+
+export default function TaskDetail() {
+  const { taskId } = useParams<{ taskId: string }>()
+  const [expandedInjections, setExpandedInjections] = useState<Set<string>>(new Set())
+  const [expandedEvents, setExpandedEvents] = useState<Set<number>>(new Set())
+  const [showInjections, setShowInjections] = useState(true)
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['task-detail', taskId],
+    queryFn: () => fetchTaskDetail(taskId!),
+    enabled: !!taskId,
+    refetchInterval: 10000,
+  })
+
+  if (isLoading) {
+    return (
+      <div className="bg-white rounded-lg shadow p-6">
+        <p className="text-gray-600">加载中...</p>
+      </div>
+    )
+  }
+
+  if (error || !data) {
+    return (
+      <div>
+        <Link to="/tasks" className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-4">
+          <ArrowLeft className="h-4 w-4 mr-1" />返回
+        </Link>
+        <div className="bg-white rounded-lg shadow p-6">
+          <p className="text-red-600">加载失败: {(error as Error)?.message || '未知错误'}</p>
+        </div>
+      </div>
+    )
+  }
+
+  const toggleInjection = (id: string) => {
+    setExpandedInjections(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const toggleEvent = (idx: number) => {
+    setExpandedEvents(prev => {
+      const next = new Set(prev)
+      if (next.has(idx)) next.delete(idx)
+      else next.add(idx)
+      return next
+    })
+  }
+
+  const duration = data.end_time
+    ? `${Math.round((parseUTC(data.end_time).getTime() - parseUTC(data.start_time).getTime()) / 1000)}s`
+    : '进行中'
+
+  return (
+    <div>
+      <Link to="/tasks" className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-4">
+        <ArrowLeft className="h-4 w-4 mr-1" />返回任务列表
+      </Link>
+
+      {/* 区域 1：任务概览 */}
+      <div className="bg-white rounded-lg shadow p-6 mb-6">
+        <div className="flex items-start justify-between mb-4">
+          <h1 className="text-xl font-bold text-gray-900">{data.title}</h1>
+          <span className={clsx(
+            'px-2 py-1 text-xs font-medium rounded-full',
+            data.status === 'completed' && 'bg-green-100 text-green-700',
+            data.status === 'active' && 'bg-blue-100 text-blue-700',
+            data.status === 'abandoned' && 'bg-gray-100 text-gray-600'
+          )}>
+            {data.status === 'completed' && <CheckCircle2 className="h-3 w-3 inline mr-1" />}
+            {data.status === 'active' && <Loader2 className="h-3 w-3 inline mr-1 animate-spin" />}
+            {data.status}
+          </span>
+        </div>
+        <div className="grid grid-cols-4 gap-4 text-sm">
+          <div>
+            <div className="text-xs text-gray-500 mb-1">开始时间</div>
+            <div className="text-gray-900">
+              {format(parseUTC(data.start_time), 'MM-dd HH:mm:ss')}
+            </div>
+          </div>
+          <div>
+            <div className="text-xs text-gray-500 mb-1">结束时间</div>
+            <div className="text-gray-900">
+              {data.end_time ? format(parseUTC(data.end_time), 'MM-dd HH:mm:ss') : '-'}
+            </div>
+          </div>
+          <div>
+            <div className="text-xs text-gray-500 mb-1">持续时间</div>
+            <div className="text-gray-900">{duration}</div>
+          </div>
+          <div>
+            <div className="text-xs text-gray-500 mb-1">事件数</div>
+            <div className="text-gray-900">{data.event_count}</div>
+          </div>
+        </div>
+      </div>
+
+      {/* 区域 1.5：用户消息 */}
+      {data.userPrompts.length > 0 && (
+        <div className="bg-white rounded-lg shadow p-6 mb-6">
+          <h2 className="text-base font-semibold text-gray-900 mb-4 flex items-center gap-2">
+            <MessageSquare className="h-4 w-4 text-purple-500" />
+            用户消息
+            <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
+              {data.userPrompts.length}
+            </span>
+          </h2>
+          <div className="space-y-3">
+            {data.userPrompts.map((up, idx) => (
+              <div key={idx} className="bg-purple-50 border border-purple-100 rounded-lg p-3">
+                <div className="text-xs text-gray-500 mb-1 font-mono">
+                  {format(parseUTC(up.timestamp), 'HH:mm:ss')}
+                </div>
+                <div className="text-sm text-gray-800 whitespace-pre-wrap">{up.content}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 空状态：所有详情区块都为空时的兜底提示 */}
+      {data.userPrompts.length === 0 &&
+        data.injections.length === 0 &&
+        data.timeline.length === 0 &&
+        data.skillInvocations.length === 0 &&
+        data.artifacts.length === 0 && (
+          <div className="bg-white rounded-lg shadow p-12 text-center">
+            <Clock className="h-12 w-12 text-gray-300 mx-auto mb-3" />
+            <p className="text-sm text-gray-500">该任务暂无可展示的执行内容</p>
+            <p className="text-xs text-gray-400 mt-1">事件可能仍在记录中，稍后刷新查看</p>
+          </div>
+        )}
+
+      {/* 区域 2：注入内容 */}
+      {data.injections.length > 0 && (
+        <div className="bg-white rounded-lg shadow mb-6">
+          <button
+            onClick={() => setShowInjections(!showInjections)}
+            className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 rounded-t-lg"
+          >
+            <div className="flex items-center gap-2">
+              <Syringe className="h-4 w-4 text-gray-500" />
+              <h2 className="text-base font-semibold text-gray-900">注入内容</h2>
+              <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
+                {data.injections.length}
+              </span>
+            </div>
+            {showInjections ? <ChevronDown className="h-4 w-4 text-gray-400" /> : <ChevronRight className="h-4 w-4 text-gray-400" />}
+          </button>
+          {showInjections && (
+            <div className="px-4 pb-4 space-y-2">
+              {data.injections.map((inj) => (
+                <div key={inj.id} className="bg-gray-50 rounded-lg border border-gray-100">
+                  <button
+                    onClick={() => toggleInjection(inj.id)}
+                    className="w-full flex items-center justify-between p-3 text-left"
+                  >
+                    <div className="flex items-center gap-2 text-sm">
+                      <span className={clsx(
+                        'px-1.5 py-0.5 text-xs rounded font-mono',
+                        inj.injection_type === 'systemMessage' ? 'bg-blue-50 text-blue-700' : 'bg-amber-50 text-amber-700'
+                      )}>
+                        {inj.injection_type}
+                      </span>
+                      <span className="text-gray-600">{inj.source_handler}</span>
+                    </div>
+                    {expandedInjections.has(inj.id) ? <ChevronDown className="h-3 w-3 text-gray-400" /> : <ChevronRight className="h-3 w-3 text-gray-400" />}
+                  </button>
+                  {expandedInjections.has(inj.id) && (
+                    <div className="px-3 pb-3">
+                      <pre className="text-xs text-gray-700 bg-white border border-gray-200 rounded p-3 overflow-x-auto max-h-64 overflow-y-auto whitespace-pre-wrap">
+                        {inj.content}
+                      </pre>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 区域 3：执行时间线 */}
+      {data.timeline.length > 0 && (
+        <div className="bg-white rounded-lg shadow p-6 mb-6">
+          <h2 className="text-base font-semibold text-gray-900 mb-4 flex items-center gap-2">
+            <Clock className="h-4 w-4 text-gray-500" />
+            执行时间线
+            <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
+              {data.timeline.length}
+            </span>
+          </h2>
+          <div className="relative">
+            {/* 竖线 */}
+            <div className="absolute left-[19px] top-2 bottom-2 w-px bg-gray-200" />
+            <div className="space-y-0">
+              {data.timeline.map((event, idx) => {
+                const isAgent = event.is_agent_call
+                const isFileOp = event.tool_name === 'Edit' || event.tool_name === 'Write'
+                const isExpanded = expandedEvents.has(idx)
+                const input = event.input as Record<string, unknown> | null
+                const filePath = input?.file_path as string | undefined
+                const description = (input?.description || input?.command) as string | undefined
+
+                return (
+                  <div key={event.id || idx} className={clsx(
+                    'relative flex items-start gap-3 py-2 px-2 rounded-md cursor-pointer hover:bg-gray-50 transition-colors',
+                    isAgent && 'bg-blue-50 hover:bg-blue-100',
+                  )}
+                  onClick={() => toggleEvent(idx)}
+                  >
+                    <div className="relative z-10 flex-shrink-0 w-10 flex justify-center">
+                      <div className={clsx(
+                        'w-8 h-8 rounded-full flex items-center justify-center',
+                        isAgent ? 'bg-blue-100' : 'bg-white border border-gray-200'
+                      )}>
+                        {getToolIcon(event.tool_name)}
+                      </div>
+                    </div>
+                    <div className="flex-1 min-w-0 pt-1">
+                      <div className="flex items-center gap-2">
+                        <span className={clsx(
+                          'text-sm font-medium',
+                          isAgent ? 'text-blue-700' : 'text-gray-900'
+                        )}>
+                          {event.tool_name}
+                        </span>
+                        {event.agent_detail?.subagent_type && (
+                          <span className="text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-mono">
+                            {event.agent_detail.subagent_type}
+                          </span>
+                        )}
+                        {event.agent_detail?.name && (
+                          <span className="text-xs text-blue-600">
+                            {event.agent_detail.name}
+                          </span>
+                        )}
+                        <span className="text-xs text-gray-400 font-mono ml-auto flex items-center gap-1">
+                          {getRelativeTime(event.timestamp, data.start_time)}
+                          {isExpanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+                        </span>
+                      </div>
+                      {!isExpanded && isFileOp && filePath && (
+                        <p className="text-xs text-green-700 font-mono mt-0.5 truncate" title={filePath}>
+                          {filePath}
+                        </p>
+                      )}
+                      {!isExpanded && !isFileOp && description && (
+                        <p className="text-xs text-gray-500 mt-0.5 truncate">{description}</p>
+                      )}
+                      {/* 展开的详细内容 */}
+                      {isExpanded && (
+                        <div className="mt-2 space-y-2 text-xs" onClick={e => e.stopPropagation()}>
+                          {/* Agent 调用详情 */}
+                          {isAgent && event.agent_detail && (
+                            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 space-y-2">
+                              {event.agent_detail.subagent_type && (
+                                <div>
+                                  <span className="text-blue-600 font-medium">subagent_type: </span>
+                                  <span className="font-mono text-blue-800">{event.agent_detail.subagent_type}</span>
+                                </div>
+                              )}
+                              {event.agent_detail.name && (
+                                <div>
+                                  <span className="text-blue-600 font-medium">name: </span>
+                                  <span className="font-mono text-blue-800">{event.agent_detail.name}</span>
+                                </div>
+                              )}
+                              {event.agent_detail.prompt && (
+                                <div>
+                                  <span className="text-blue-600 font-medium">prompt:</span>
+                                  <pre className="mt-1 p-2 bg-white rounded border border-blue-100 text-gray-800 whitespace-pre-wrap break-words max-h-60 overflow-y-auto">
+                                    {event.agent_detail.prompt}
+                                  </pre>
+                                </div>
+                              )}
+                            </div>
+                          )}
+                          {/* 文件操作详情 */}
+                          {isFileOp && filePath && (
+                            <div className="bg-green-50 border border-green-200 rounded-lg p-3">
+                              <span className="text-green-700 font-medium">file: </span>
+                              <span className="font-mono text-green-800">{filePath}</span>
+                            </div>
+                          )}
+                          {/* 通用工具详情 */}
+                          {!isAgent && description && (
+                            <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
+                              <pre className="text-gray-700 whitespace-pre-wrap break-words max-h-40 overflow-y-auto">
+                                {description}
+                              </pre>
+                            </div>
+                          )}
+                          {/* 文件路径（非文件操作工具，如 Read） */}
+                          {!isAgent && !isFileOp && filePath && (
+                            <div className="text-gray-500">
+                              <span className="font-medium">path: </span>
+                              <span className="font-mono">{filePath}</span>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 区域 4：Skill 调用 */}
+      {data.skillInvocations.length > 0 && (
+        <div className="bg-white rounded-lg shadow p-6 mb-6">
+          <h2 className="text-base font-semibold text-gray-900 mb-4 flex items-center gap-2">
+            <BookOpen className="h-4 w-4 text-purple-500" />
+            Skill 调用
+            <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
+              {data.skillInvocations.length}
+            </span>
+          </h2>
+          <div className="space-y-3">
+            {data.skillInvocations.map((skill) => (
+              <div key={skill.id} className="border border-purple-100 bg-purple-50 rounded-lg p-4">
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-sm font-medium text-purple-800 font-mono">
+                    {skill.skill_id}
+                  </span>
+                  {skill.workflow && (
+                    <span className="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">
+                      {skill.workflow}
+                    </span>
+                  )}
+                  {skill.phase && (
+                    <span className="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">
+                      phase: {skill.phase}
+                    </span>
+                  )}
+                </div>
+                <p className="text-xs text-purple-700">{skill.reason}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 区域 5：产物 */}
+      {data.artifacts.length > 0 && (
+        <div className="bg-white rounded-lg shadow p-6 mb-6">
+          <h2 className="text-base font-semibold text-gray-900 mb-4 flex items-center gap-2">
+            <FolderOpen className="h-4 w-4 text-green-600" />
+            产物
+            <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
+              {data.artifacts.length} 个文件
+            </span>
+          </h2>
+          <div className="space-y-1">
+            {data.artifacts.map((filePath) => (
+              <div key={filePath} className="flex items-center gap-2 py-1.5 px-3 rounded hover:bg-green-50">
+                <FileText className="h-4 w-4 text-green-600 flex-shrink-0" />
+                <span className="text-sm text-gray-800 font-mono truncate" title={filePath}>
+                  {filePath}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/web/src/pages/Tasks.tsx

@@ -0,0 +1,150 @@
+import { useQuery } from '@tanstack/react-query'
+import { useState, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { formatDistanceToNow } from 'date-fns'
+import { parseUTC } from '../utils/time'
+import { zhCN } from 'date-fns/locale'
+import { Clock, Activity, CheckCircle2, Loader2 } from 'lucide-react'
+import SearchInput from '../components/SearchInput'
+import clsx from 'clsx'
+
+interface Task {
+  id: string
+  title: string
+  status: 'active' | 'completed' | 'abandoned'
+  start_time: string
+  end_time?: string
+  event_count: number
+  session_id: string
+}
+
+async function fetchTasks(): Promise<Task[]> {
+  const res = await fetch('/api/tasks')
+  if (!res.ok) throw new Error('Failed to fetch tasks')
+  return res.json()
+}
+
+export default function Tasks() {
+  const navigate = useNavigate()
+  const [search, setSearch] = useState('')
+
+  const { data: tasks, isLoading, error } = useQuery({
+    queryKey: ['tasks'],
+    queryFn: fetchTasks,
+    refetchInterval: 10000,
+  })
+
+  const filteredTasks = useMemo(() => {
+    if (!tasks) return []
+    if (!search.trim()) return tasks
+    const q = search.toLowerCase()
+    return tasks.filter(t =>
+      t.title?.toLowerCase().includes(q) ||
+      t.id.toLowerCase().includes(q)
+    )
+  }, [tasks, search])
+
+  if (isLoading) {
+    return (
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 mb-6">任务</h1>
+        <div className="bg-white rounded-lg shadow p-6">
+          <p className="text-gray-600">加载中...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 mb-6">任务</h1>
+        <div className="bg-white rounded-lg shadow p-6">
+          <p className="text-red-600">加载失败: {(error as Error).message}</p>
+        </div>
+      </div>
+    )
+  }
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'completed':
+        return <CheckCircle2 className="h-4 w-4 text-green-600" />
+      case 'active':
+        return <Loader2 className="h-4 w-4 text-blue-600 animate-spin" />
+      default:
+        return <Activity className="h-4 w-4 text-gray-400" />
+    }
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4 flex-wrap gap-3">
+        <h1 className="text-2xl font-bold text-gray-900">任务</h1>
+        <SearchInput
+          value={search}
+          onChange={setSearch}
+          placeholder="搜索任务标题..."
+          className="w-64"
+        />
+      </div>
+
+      <div className="text-sm text-gray-500 mb-3">
+        显示 {filteredTasks.length} 个任务 {search && `（已过滤）`}
+      </div>
+
+      <div className="grid gap-4">
+        {filteredTasks.map((task) => (
+          <div
+            key={task.id}
+            onClick={() => navigate(`/tasks/${task.id}`)}
+            className="bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer p-5"
+          >
+            <div className="flex items-start justify-between mb-3">
+              <div className="flex items-start gap-3 flex-1">
+                <div className="mt-0.5">{getStatusIcon(task.status)}</div>
+                <div className="flex-1 min-w-0">
+                  <h3 className="text-base font-semibold text-gray-900 mb-1">
+                    {task.title}
+                  </h3>
+                  <p className="text-xs text-gray-500 font-mono">
+                    {task.id.slice(0, 16)}...
+                  </p>
+                </div>
+              </div>
+              <span className={clsx(
+                'px-2 py-1 text-xs font-medium rounded-full whitespace-nowrap ml-3',
+                task.status === 'completed' && 'bg-green-100 text-green-700',
+                task.status === 'active' && 'bg-blue-100 text-blue-700',
+                task.status === 'abandoned' && 'bg-gray-100 text-gray-600'
+              )}>
+                {task.status}
+              </span>
+            </div>
+
+            <div className="flex items-center gap-6 text-sm text-gray-600">
+              <span className="inline-flex items-center gap-1">
+                <Activity className="h-4 w-4" />
+                {task.event_count} 个事件
+              </span>
+              <span className="inline-flex items-center gap-1">
+                <Clock className="h-4 w-4" />
+                {task.start_time
+                  ? formatDistanceToNow(parseUTC(task.start_time), {
+                      addSuffix: true,
+                      locale: zhCN,
+                    })
+                  : '-'}
+              </span>
+            </div>
+          </div>
+        ))}
+        {filteredTasks.length === 0 && (
+          <div className="bg-white rounded-lg shadow p-12 text-center text-gray-500">
+            {search ? '无匹配结果' : '暂无任务记录'}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}