feat: add task detail timeline components

2026-05-26 12:30:22 +08:00
parent dd9f40b38c
commit 9002d1206f
6 changed files with 681 additions and 0 deletions
--- a/app-instance/frontend/components/task-detail/TaskLiveHeader.tsx
+++ b/app-instance/frontend/components/task-detail/TaskLiveHeader.tsx
@ -0,0 +1,92 @@
+'use client';
+
+import Link from 'next/link';
+import { ArrowLeft, MessageSquare } from 'lucide-react';
+
+import { TaskRuntimeStatusBadge, formatTaskRuntimeDuration, formatTaskRuntimeTime } from '@/components/task-runtime/TaskRuntimeShared';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { pickAppText } from '@/lib/i18n/core';
+import { useAppI18n } from '@/lib/i18n/provider';
+import type { TaskRuntimeStatus } from '@/lib/task-runtime';
+import type { BackendTask } from '@/types';
+
+type Props = {
+  task: BackendTask;
+  activeLabel: string;
+  durationMs: number | null;
+};
+
+const RUNTIME_STATUSES = new Set<string>(['queued', 'running', 'waiting', 'blocked', 'done', 'error', 'cancelled']);
+
+function isRuntimeStatus(status: string): status is TaskRuntimeStatus {
+  return RUNTIME_STATUSES.has(status);
+}
+
+function humanTaskStatus(status: string, locale: 'zh-CN' | 'en-US') {
+  const map: Record<string, [string, string]> = {
+    open: ['已创建', 'Open'],
+    running: ['执行中', 'Running'],
+    awaiting_acceptance: ['等待验收', 'Awaiting acceptance'],
+    needs_revision: ['需要修改', 'Needs revision'],
+    closed: ['已完成', 'Closed'],
+    abandoned: ['已放弃', 'Abandoned'],
+  };
+  const item = map[status];
+  return item ? pickAppText(locale, item[0], item[1]) : status;
+}
+
+export function TaskLiveHeader({ task, activeLabel, durationMs }: Props) {
+  const { locale } = useAppI18n();
+  const title = task.short_title || String(task.metadata?.short_title || '') || task.description || task.goal || task.task_id;
+
+  return (
+    <header className="sticky top-0 z-20 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+      <div className="mx-auto flex max-w-7xl flex-col gap-3 px-4 py-3 sm:px-6">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <Button asChild variant="outline" size="sm">
+              <Link href="/tasks">
+                <ArrowLeft className="mr-2 h-4 w-4" />
+                {pickAppText(locale, '返回任务', 'Back to tasks')}
+              </Link>
+            </Button>
+            <Button asChild variant="ghost" size="sm">
+              <Link href="/">
+                <MessageSquare className="mr-2 h-4 w-4" />
+                {pickAppText(locale, '对话', 'Chat')}
+              </Link>
+            </Button>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            {isRuntimeStatus(task.status) ? (
+              <TaskRuntimeStatusBadge status={task.status} />
+            ) : (
+              <Badge variant="outline" className="text-[11px]">
+                {humanTaskStatus(task.status, locale)}
+              </Badge>
+            )}
+            {activeLabel ? <Badge variant="secondary">{activeLabel}</Badge> : null}
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2 lg:flex-row lg:items-end lg:justify-between">
+          <div className="min-w-0">
+            <h1 className="truncate text-xl font-semibold leading-tight">{title}</h1>
+            {task.description && task.description !== title ? (
+              <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">{task.description}</p>
+            ) : null}
+          </div>
+          <div className="flex shrink-0 flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+            <span>
+              {pickAppText(locale, '更新', 'Updated')}: {formatTaskRuntimeTime(task.updated_at, locale)}
+            </span>
+            <span>
+              {pickAppText(locale, '耗时', 'Duration')}: {formatTaskRuntimeDuration(durationMs, locale)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}