93 lines
3.7 KiB
TypeScript
93 lines
3.7 KiB
TypeScript
'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>
|
|
);
|
|
}
|