46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import { Globe, Hand, Play } from './Icons';
|
||
import { STATUS_LABEL, type Task } from '../types';
|
||
|
||
export function TopBar({ task, browserOpen, onToggleBrowser, onTakeover, onTakeoverDone }: {
|
||
task: Task | null;
|
||
browserOpen: boolean;
|
||
onToggleBrowser: () => void;
|
||
onTakeover: () => void;
|
||
onTakeoverDone: () => void;
|
||
}) {
|
||
const canBrowse = Boolean(task?.live_session);
|
||
const canTakeover = Boolean(task?.live_session && task.status === 'running' && !task.takeover);
|
||
return (
|
||
<header className="topbar">
|
||
<div className="topbar-copy">
|
||
<h1>{task ? task.business_name || '任务' : '新任务'}</h1>
|
||
<p className="topbar-sub" title={task?.inputs.goal ?? ''}>
|
||
{task ? task.inputs.goal ?? task.id : '告诉我你要在学校系统里办什么'}
|
||
</p>
|
||
</div>
|
||
<div className="topbar-actions">
|
||
{task && <span className={`status-chip ${task.status}`} role="status">{STATUS_LABEL[task.status] ?? task.status}</span>}
|
||
{task?.takeover ? (
|
||
<button type="button" className="primary-button small" onClick={onTakeoverDone} data-testid="takeover-done">
|
||
<Play size={16} />接管完成，继续
|
||
</button>
|
||
) : (
|
||
<button type="button" className="secondary-button small" disabled={!canTakeover} onClick={onTakeover} data-testid="takeover">
|
||
<Hand size={16} />我来接管
|
||
</button>
|
||
)}
|
||
<button
|
||
type="button"
|
||
className={`secondary-button small${browserOpen ? ' active' : ''}`}
|
||
disabled={!canBrowse && !browserOpen}
|
||
onClick={onToggleBrowser}
|
||
aria-pressed={browserOpen}
|
||
data-testid="toggle-browser"
|
||
>
|
||
<Globe size={16} />{browserOpen ? '收起浏览器' : '浏览器'}
|
||
</button>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|