feat(workbench): integrate operational workflows and map state
This commit is contained in:
@@ -0,0 +1,555 @@
|
||||
import { useMemo, useState, type ReactNode } from "react";
|
||||
import {
|
||||
AlertTriangle,
|
||||
CheckCircle2,
|
||||
Clock3,
|
||||
FileText,
|
||||
GitFork,
|
||||
Loader2,
|
||||
MessageSquare,
|
||||
RefreshCw,
|
||||
Route,
|
||||
ShieldCheck,
|
||||
UserCheck
|
||||
} from "lucide-react";
|
||||
import type { AgentExecutionPlan } from "@/features/agent";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { cn } from "@/shared/ui/cn";
|
||||
import { Disclosure } from "@/shared/ui/disclosure";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import { StatusBadge, StatusIcon, type StatusTone } from "@/shared/ui/status";
|
||||
import type {
|
||||
OperationalTask,
|
||||
OperationalTaskAction,
|
||||
OperationalTaskDecision,
|
||||
OperationalTaskEvidence,
|
||||
OperationalTaskPlan,
|
||||
OperationalTaskDataSnapshot
|
||||
} from "../api/operational-task-client";
|
||||
|
||||
type ExecutionNode = {
|
||||
id: string;
|
||||
title: string;
|
||||
status: "pending" | "running" | "waiting" | "completed" | "failed" | "skipped" | "cancelled";
|
||||
owner: "agent" | "human";
|
||||
detail: string;
|
||||
};
|
||||
|
||||
type ExecutionEdge = {
|
||||
from: string;
|
||||
to: string;
|
||||
label?: string | null;
|
||||
condition?: string | null;
|
||||
};
|
||||
|
||||
export type ExecutionPlanView = {
|
||||
nodes: ExecutionNode[];
|
||||
edges: ExecutionEdge[];
|
||||
};
|
||||
|
||||
type AgentExecutionPlanPanelProps = {
|
||||
task: OperationalTask;
|
||||
onContinue: () => void;
|
||||
onDecision: (actionId: string, expectedVersion: number, decision: OperationalTaskDecision, comment?: string) => Promise<unknown>;
|
||||
onExecute: (actionId: string, expectedVersion: number) => Promise<unknown>;
|
||||
onReconcile: (actionId: string, expectedVersion: number) => Promise<unknown>;
|
||||
onLoadEvidenceSnapshot: (evidenceId: string) => Promise<OperationalTaskDataSnapshot>;
|
||||
onRefresh: () => void;
|
||||
};
|
||||
|
||||
export function AgentExecutionPlanPanel({
|
||||
task,
|
||||
onContinue,
|
||||
onDecision,
|
||||
onExecute,
|
||||
onReconcile,
|
||||
onLoadEvidenceSnapshot,
|
||||
onRefresh
|
||||
}: AgentExecutionPlanPanelProps) {
|
||||
const plan = task.latest_plan?.plan;
|
||||
const report = task.latest_report?.report;
|
||||
const planGeneration = task.latest_plan?.execution_generation;
|
||||
const planState = planGeneration == null
|
||||
? "historical"
|
||||
: planGeneration === task.execution_generation
|
||||
? "current"
|
||||
: "previous";
|
||||
const reportGeneration = task.latest_report?.execution_generation;
|
||||
const reportState = reportGeneration == null
|
||||
? "historical"
|
||||
: reportGeneration === task.execution_generation
|
||||
? "current"
|
||||
: "previous";
|
||||
const completed = plan?.nodes.filter((node) => node.status === "completed").length ?? 0;
|
||||
const active = plan?.nodes.filter((node) => node.status === "running").length ?? 0;
|
||||
const waiting = plan?.nodes.filter((node) => node.status === "waiting" || node.owner === "human" && node.status === "pending").length ?? 0;
|
||||
const externalEvidence = task.evidence.filter((item) => item.kind === "external_feedback");
|
||||
const taskActive = task.status === "queued" || task.status === "running";
|
||||
const planSummary = !plan
|
||||
? "任务已持久化，等待 Agent 发布首版处理计划。"
|
||||
: planState === "current"
|
||||
? `已完成 ${completed} 项 · 执行中 ${active} 项 · 待人工或资料 ${waiting} 项`
|
||||
: planState === "previous"
|
||||
? taskActive
|
||||
? "上一轮流程，本轮规划中"
|
||||
: `上一轮流程，当前任务${taskStatusLabel(task.status)}`
|
||||
: "历史流程";
|
||||
const reportLabel = reportState === "current"
|
||||
? "当前结论"
|
||||
: reportState === "previous"
|
||||
? taskActive
|
||||
? "上一轮报告，本轮分析中"
|
||||
: `上一轮报告，当前任务${taskStatusLabel(task.status)}`
|
||||
: "历史报告";
|
||||
const nodeActions = plan ? Object.fromEntries(plan.nodes.map((node) => [
|
||||
node.id,
|
||||
task.actions.filter((action) => action.node_id === node.id).map((action) => (
|
||||
<HumanActionCard key={action.action_id} task={task} action={action} onDecision={onDecision} onExecute={onExecute} onReconcile={onReconcile} onRefresh={onRefresh} />
|
||||
))
|
||||
])) : {};
|
||||
const unlinkedActions = task.actions.filter((action) => !action.node_id || !plan?.nodes.some((node) => node.id === action.node_id));
|
||||
|
||||
return (
|
||||
<section aria-label="工况任务处理" className="min-w-0 space-y-2.5">
|
||||
<section className="surface-reading overflow-hidden rounded-xl border border-slate-200/70">
|
||||
<div className="space-y-2 border-b border-slate-200/70 p-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<h3 className="flex items-center gap-1.5 text-xs font-semibold text-slate-800">
|
||||
<Route size={13} aria-hidden="true" />
|
||||
{task.task_type === "external_work_order" ? "外部工单进度" : "调查处理流程"}
|
||||
</h3>
|
||||
<StatusBadge tone={task.status === "failed" ? "danger" : task.status === "waiting_human" ? "warning" : task.status === "completed" ? "success" : "info"}>
|
||||
{taskStatusLabel(task.status)}
|
||||
</StatusBadge>
|
||||
</div>
|
||||
<p className="text-xs leading-5 text-slate-600" role="status">
|
||||
{planSummary}
|
||||
</p>
|
||||
<p className="text-[11px] leading-5 text-slate-500">
|
||||
{taskTypeLabel(task.task_type)} · 更新于 {formatDateTime(task.updated_at)}
|
||||
</p>
|
||||
</div>
|
||||
{task.task_type === "external_work_order" && externalEvidence.length > 0 ? (
|
||||
<ExternalProgress evidence={externalEvidence} />
|
||||
) : plan ? (
|
||||
<ExecutionPlanSteps plan={plan} nodeActions={nodeActions} />
|
||||
) : (
|
||||
<p className="p-3 text-xs leading-5 text-slate-500">尚无执行节点，页面不会按时间推算或虚构完成进度。</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section aria-label="任务报告" className="surface-reading space-y-3 rounded-xl border border-slate-200/70 p-3">
|
||||
<div>
|
||||
<h3 className="flex items-center gap-1.5 text-xs font-semibold text-slate-800"><FileText size={13} aria-hidden="true" />任务报告</h3>
|
||||
<p className="mt-1 text-[11px] leading-5 text-slate-500">结论与证据独立呈现，不展示模型推理或节点执行日志。</p>
|
||||
</div>
|
||||
{report ? (
|
||||
<>
|
||||
<div className={cn(
|
||||
"rounded-lg px-3 py-2.5",
|
||||
reportState === "current" ? "bg-blue-50/70" : "bg-amber-50/80"
|
||||
)}>
|
||||
<p className={cn(
|
||||
"text-[11px] font-semibold",
|
||||
reportState === "current" ? "text-blue-700" : "text-amber-800"
|
||||
)}>
|
||||
{reportLabel}
|
||||
</p>
|
||||
<p className="mt-1 text-xs leading-6 text-slate-800">{report.current_conclusion}</p>
|
||||
</div>
|
||||
{report.recommendations.length > 0 ? (
|
||||
<ReportList title="处置建议" items={report.recommendations} tone="blue" />
|
||||
) : null}
|
||||
{report.pending_items.length > 0 ? (
|
||||
<ReportList title="待确认事项" items={report.pending_items} tone="amber" />
|
||||
) : null}
|
||||
<p className="border-t border-slate-200/70 pt-2 text-[11px] leading-5 text-slate-500">结论边界：{report.conclusion_boundary}</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs leading-6 text-slate-600">尚未形成任务报告。</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<EvidenceSection evidence={task.evidence} referencedIds={report?.evidence_refs ?? []} onLoadSnapshot={onLoadEvidenceSnapshot} />
|
||||
|
||||
{unlinkedActions.length > 0 ? (
|
||||
<section aria-label="待人工确认动作" className="space-y-2.5">
|
||||
{unlinkedActions.map((action) => (
|
||||
<HumanActionCard
|
||||
key={action.action_id}
|
||||
task={task}
|
||||
action={action}
|
||||
onDecision={onDecision}
|
||||
onExecute={onExecute}
|
||||
onReconcile={onReconcile}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button variant="outline" size="sm" onClick={onContinue}>
|
||||
<MessageSquare size={14} aria-hidden="true" />Agent 协作
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ReportList({ title, items, tone }: { title: string; items: string[]; tone: "blue" | "amber" }) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold text-slate-600">{title}</p>
|
||||
<ul className="mt-1.5 grid gap-1.5">
|
||||
{items.map((item) => (
|
||||
<li key={item} className="grid grid-cols-[6px_1fr] gap-2 text-xs leading-5 text-slate-700">
|
||||
<span className={cn("mt-2 h-1.5 w-1.5 rounded-full", tone === "blue" ? "bg-blue-500" : "bg-amber-400")} aria-hidden="true" />
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ExecutionPlanSteps({ plan, nodeActions = {} }: { plan: ExecutionPlanView | AgentExecutionPlan | OperationalTaskPlan; nodeActions?: Record<string, ReactNode> }) {
|
||||
return <div aria-label="调查执行步骤" className="px-3 py-3"><ExecutionFlow plan={plan} nodeActions={nodeActions} depth={0} /></div>;
|
||||
}
|
||||
|
||||
function ExecutionFlow({ plan, nodeActions, depth }: { plan: ExecutionPlanView; nodeActions: Record<string, ReactNode>; depth: number }) {
|
||||
const layout = createBranchLayout(plan);
|
||||
if (!layout || depth > 8) return <ExactDependencyList plan={plan} nodeActions={nodeActions} />;
|
||||
return (
|
||||
<div className="grid gap-2">
|
||||
<ExecutionChain nodes={layout.prefix} plan={plan} nodeActions={nodeActions} />
|
||||
{layout.branches.length > 0 ? (
|
||||
<section aria-label={`并行分枝 ${layout.branches.length} 项`} data-execution-layout="branch" className="min-w-0 py-1">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<StatusIcon tone="info" shape="circle" size="md"><GitFork size={14} /></StatusIcon>
|
||||
<span className="text-xs font-semibold text-slate-800">并行处理</span>
|
||||
<StatusBadge tone="info">{layout.branches.length} 条独立分枝</StatusBadge>
|
||||
</div>
|
||||
<div className="grid snap-x snap-mandatory auto-cols-[86%] grid-flow-col gap-2 overflow-x-auto overscroll-x-contain pb-1 sm:snap-none sm:grid-flow-row sm:grid-cols-2 sm:overflow-visible">
|
||||
{layout.branches.map((branch, index) => {
|
||||
const firstEdge = plan.edges.find((edge) => edge.to === branch[0]?.id);
|
||||
return (
|
||||
<section key={branch.map((node) => node.id).join("-")} className="surface-control min-w-0 snap-start rounded-xl border border-slate-200/70 p-2.5">
|
||||
<p className="mb-2 text-[11px] font-semibold text-slate-500">分枝 {index + 1}{firstEdge?.condition ? ` · ${firstEdge.condition}` : ""}</p>
|
||||
<ExecutionChain nodes={branch} plan={plan} nodeActions={nodeActions} compact />
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
{layout.suffix.length > 0 ? (
|
||||
<div className="grid gap-2">
|
||||
<div className="flex items-center gap-2 text-[11px] text-slate-500"><span className="h-px flex-1 bg-slate-200" /><span>分枝汇合</span><span className="h-px flex-1 bg-slate-200" /></div>
|
||||
<ExecutionFlow plan={subPlan(plan, layout.suffix.map((node) => node.id))} nodeActions={nodeActions} depth={depth + 1} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ExecutionChain({ nodes, plan, nodeActions, compact = false }: { nodes: ExecutionNode[]; plan: ExecutionPlanView; nodeActions: Record<string, ReactNode>; compact?: boolean }) {
|
||||
return <div className="grid gap-0">{nodes.map((node, index) => {
|
||||
const edge = index > 0 ? plan.edges.find((item) => item.from === nodes[index - 1].id && item.to === node.id) : undefined;
|
||||
return <div key={node.id}>{index > 0 ? <div className="flex min-h-6 items-center gap-2 px-3 text-[10px] text-slate-500"><span className="h-6 w-px bg-slate-300" />{edge?.condition ? <span>{edge.condition}</span> : null}</div> : null}<ExecutionNodeCard node={node} action={nodeActions[node.id]} compact={compact} /></div>;
|
||||
})}</div>;
|
||||
}
|
||||
|
||||
function ExactDependencyList({ plan, nodeActions }: { plan: ExecutionPlanView; nodeActions: Record<string, ReactNode> }) {
|
||||
return <ol aria-label="调查执行步骤" className="grid gap-2">{topologicalNodes(plan).map((node) => <li key={node.id}><ExecutionNodeCard node={node} action={nodeActions[node.id]} /></li>)}</ol>;
|
||||
}
|
||||
|
||||
function subPlan(plan: ExecutionPlanView, nodeIds: string[]): ExecutionPlanView {
|
||||
const included = new Set(nodeIds);
|
||||
return {
|
||||
nodes: plan.nodes.filter((node) => included.has(node.id)),
|
||||
edges: plan.edges.filter((edge) => included.has(edge.from) && included.has(edge.to))
|
||||
};
|
||||
}
|
||||
|
||||
function ExecutionNodeCard({ node, action, compact = false }: { node: ExecutionNode; action?: ReactNode; compact?: boolean }) {
|
||||
const { tone, Icon, label } = executionNodePresentation(node);
|
||||
return (
|
||||
<article data-execution-node={node.id} className={cn("surface-reading min-w-0 rounded-xl border border-slate-200/70", compact ? "px-2.5 py-2" : "px-3 py-2.5")}>
|
||||
<div className="flex min-w-0 items-start gap-2">
|
||||
<StatusIcon tone={tone} activity={node.status === "running" ? "loading" : "static"} shape="circle" size="md" className="mt-0.5 shrink-0"><Icon size={14} /></StatusIcon>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex min-w-0 flex-wrap items-center justify-between gap-2"><span className="text-xs font-semibold leading-5 text-slate-900">{node.title}</span><StatusBadge tone={tone}>{label}</StatusBadge></div>
|
||||
<p className="mt-1 break-words text-xs leading-5 text-slate-700">{node.detail || (node.owner === "human" ? "等待人工补充执行事实。" : "等待 Agent 更新执行事实。")}</p>
|
||||
{action ? <div className="mt-2">{action}</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function ExternalProgress({ evidence }: { evidence: OperationalTaskEvidence[] }) {
|
||||
const ordered = [...evidence].sort((left, right) => Date.parse(left.observed_at) - Date.parse(right.observed_at));
|
||||
return (
|
||||
<ol className="grid gap-2 p-3">
|
||||
{ordered.map((item, index) => (
|
||||
<li key={item.evidence_id} className="grid grid-cols-[28px_1fr] gap-2">
|
||||
<span className="relative flex justify-center">
|
||||
{index < ordered.length - 1 ? <span className="absolute bottom-[-0.65rem] top-7 w-px bg-slate-200" aria-hidden="true" /> : null}
|
||||
<StatusIcon tone="info" shape="circle" size="md" className="relative z-10 ring-4 ring-white"><Clock3 size={14} /></StatusIcon>
|
||||
</span>
|
||||
<article className="surface-reading rounded-xl border border-slate-200/70 px-3 py-2.5">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2"><span className="text-xs font-semibold text-slate-900">{item.source_label}</span><span className="font-mono text-[11px] text-slate-500">{formatDateTime(item.observed_at)}</span></div>
|
||||
<p className="mt-1 text-xs leading-5 text-slate-700">{item.summary}</p>
|
||||
</article>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
|
||||
function EvidenceSection({ evidence, referencedIds, onLoadSnapshot }: { evidence: OperationalTaskEvidence[]; referencedIds: string[]; onLoadSnapshot: (evidenceId: string) => Promise<OperationalTaskDataSnapshot> }) {
|
||||
const ordered = useMemo(() => {
|
||||
const referenced = new Set(referencedIds);
|
||||
return [...evidence].sort((left, right) => Number(referenced.has(right.evidence_id)) - Number(referenced.has(left.evidence_id)));
|
||||
}, [evidence, referencedIds]);
|
||||
return (
|
||||
<section aria-label="关键证据" className="surface-reading rounded-xl border border-slate-200/70 p-3">
|
||||
<div className="flex items-center justify-between gap-2"><h3 className="flex items-center gap-1.5 text-xs font-semibold text-slate-800"><ShieldCheck size={13} />关键证据</h3><span className="text-[11px] text-slate-500">{ordered.length} 条</span></div>
|
||||
{ordered.length > 0 ? <div className="mt-2 grid gap-1.5">{ordered.map((item) => <EvidenceDisclosure key={item.evidence_id} item={item} onLoadSnapshot={onLoadSnapshot} />)}</div> : <p className="mt-2 text-xs leading-5 text-slate-500">尚无可核验的支撑证据。</p>}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function EvidenceDisclosure({ item, onLoadSnapshot }: { item: OperationalTaskEvidence; onLoadSnapshot: (evidenceId: string) => Promise<OperationalTaskDataSnapshot> }) {
|
||||
const [snapshot, setSnapshot] = useState<OperationalTaskDataSnapshot | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const load = async () => {
|
||||
setLoading(true); setError(null);
|
||||
try { setSnapshot(await onLoadSnapshot(item.evidence_id)); }
|
||||
catch (nextError) { setError(nextError instanceof Error ? nextError.message : "数据快照读取失败。"); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
return <Disclosure label={<span className="line-clamp-2 text-left text-xs leading-5 text-slate-700">{item.summary}</span>} className="surface-control rounded-lg border border-slate-200/70 px-2.5">
|
||||
<div className="border-t border-slate-200/70 py-2">
|
||||
<dl className="grid gap-1 text-[11px] leading-5"><EvidenceMeta label="来源" value={item.source_label} /><EvidenceMeta label="时间" value={formatDateTime(item.observed_at)} /><EvidenceMeta label="类型" value={evidenceKindLabel(item.kind)} />{item.source_ref ? <EvidenceMeta label="引用" value={item.source_ref} mono /> : null}</dl>
|
||||
{item.has_snapshot && !snapshot ? <Button className="mt-2" variant="outline" size="sm" disabled={loading} onClick={() => void load()}>{loading ? <Loader2 className="animate-spin" /> : null}查看数据快照</Button> : null}
|
||||
{error ? <p role="alert" className="mt-2 text-xs text-red-700">{error}</p> : null}
|
||||
{snapshot ? <SnapshotSummary snapshot={snapshot} /> : null}
|
||||
</div>
|
||||
</Disclosure>;
|
||||
}
|
||||
|
||||
function SnapshotSummary({ snapshot }: { snapshot: OperationalTaskDataSnapshot }) {
|
||||
const rows = snapshotRows(snapshot.data).slice(0, 12);
|
||||
return <section aria-label="数据快照" className="mt-2 rounded-lg bg-white px-2.5 py-2 shadow-[inset_0_0_0_1px_rgba(148,163,184,0.3)]"><p className="text-[11px] font-semibold text-slate-700">{snapshot.source_ref} · 查询于 {formatDateTime(snapshot.queried_at)}</p><dl className="mt-1 grid gap-1 text-[11px] leading-5">{rows.map(([key, value]) => <EvidenceMeta key={key} label={key} value={value} />)}</dl>{snapshot.truncated ? <p className="mt-1 text-[11px] text-amber-700">数据已按有界查询范围截断。</p> : null}</section>;
|
||||
}
|
||||
|
||||
function snapshotRows(value: unknown, prefix = ""): [string, string][] {
|
||||
if (Array.isArray(value)) return value.slice(0, 6).flatMap((item, index) => snapshotRows(item, `${prefix}${index + 1}`));
|
||||
if (value && typeof value === "object") return Object.entries(value as Record<string, unknown>).flatMap(([key, item]) => snapshotRows(item, prefix ? `${prefix}.${key}` : key));
|
||||
return [[prefix || "值", value === null || value === undefined ? "空" : String(value)]];
|
||||
}
|
||||
|
||||
function EvidenceMeta({ label, value, mono = false }: { label: string; value: string; mono?: boolean }) {
|
||||
return <div className="grid grid-cols-[48px_1fr] gap-2"><dt className="font-semibold text-slate-500">{label}</dt><dd className={cn("break-words text-slate-700", mono && "font-mono")}>{value}</dd></div>;
|
||||
}
|
||||
|
||||
function HumanActionCard({ task, action, onDecision, onExecute, onReconcile, onRefresh }: {
|
||||
task: OperationalTask;
|
||||
action: OperationalTaskAction;
|
||||
onDecision: AgentExecutionPlanPanelProps["onDecision"];
|
||||
onExecute: AgentExecutionPlanPanelProps["onExecute"];
|
||||
onReconcile: AgentExecutionPlanPanelProps["onReconcile"];
|
||||
onRefresh: () => void;
|
||||
}) {
|
||||
const [submitting, setSubmitting] = useState<"approve" | "reject" | "execute" | "reconcile" | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [stale, setStale] = useState(false);
|
||||
const [rejectComment, setRejectComment] = useState("");
|
||||
const command = action.kind === "issue_command";
|
||||
const canDecide = command ? task.permissions.can_decide_commands : task.permissions.can_decide_work_orders;
|
||||
const canExecute = command ? task.permissions.can_execute_commands : task.permissions.can_execute_work_orders;
|
||||
const run = async (kind: "approve" | "reject" | "execute" | "reconcile") => {
|
||||
setSubmitting(kind); setError(null);
|
||||
try {
|
||||
if (kind === "execute") await onExecute(action.action_id, action.version);
|
||||
else if (kind === "reconcile") await onReconcile(action.action_id, action.version);
|
||||
else {
|
||||
if (kind === "reject" && !rejectComment.trim()) {
|
||||
setError("请填写退回理由后再拒绝动作。");
|
||||
return;
|
||||
}
|
||||
await onDecision(action.action_id, action.version, kind === "approve" ? "approved" : "rejected", kind === "reject" ? rejectComment.trim() : undefined);
|
||||
}
|
||||
} catch (nextError) {
|
||||
const message = nextError instanceof Error ? nextError.message : "人工动作提交失败。";
|
||||
setError(message);
|
||||
setStale(/version|版本|409|conflict/i.test(message));
|
||||
} finally { setSubmitting(null); }
|
||||
};
|
||||
return (
|
||||
<article className="surface-reading rounded-xl border border-amber-200/80 p-3" data-action-id={action.action_id}>
|
||||
<div className="flex items-start gap-2.5">
|
||||
<StatusIcon tone="warning" shape="circle" size="md" className="mt-0.5"><UserCheck size={14} /></StatusIcon>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2"><h3 className="text-xs font-semibold text-slate-900">{command ? "命令下发确认" : "工单创建确认"}</h3><div className="flex flex-wrap gap-1.5"><StatusBadge tone={approvalTone(action.approval_status)}>{approvalLabel(action.approval_status)}</StatusBadge><StatusBadge tone={executionTone(action.execution_status)}>{executionLabel(action.execution_status)}</StatusBadge></div></div>
|
||||
<p className="mt-2 text-xs leading-5 text-slate-700"><span className="font-semibold text-slate-500">原因：</span>{action.reason}</p>
|
||||
<ActionPayloadSummary payload={action.payload} />
|
||||
{action.evidence_refs.length > 0 ? (
|
||||
<div className="mt-2 rounded-lg bg-blue-50/70 px-2.5 py-2 text-xs leading-5 text-slate-700">
|
||||
<p className="font-semibold text-blue-700">确认依据</p>
|
||||
<ul className="mt-1 grid gap-1">
|
||||
{action.evidence_refs.map((evidenceId) => {
|
||||
const evidence = task.evidence.find((item) => item.evidence_id === evidenceId);
|
||||
return <li key={evidenceId}>{evidence ? `${evidence.summary} · ${evidence.source_label}` : `证据 ${evidenceId}`}</li>;
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
) : null}
|
||||
{action.receipt ? <ActionReceipt receipt={action.receipt} /> : null}
|
||||
<Disclosure label="查看原始参数" className="surface-control mt-2 rounded-lg border border-slate-200/70 px-2.5"><pre className="max-h-52 overflow-auto whitespace-pre-wrap break-all border-t border-slate-200/70 py-2 font-mono text-[11px] leading-5 text-slate-700">{JSON.stringify(action.payload, null, 2)}</pre></Disclosure>
|
||||
<p className="mt-2 text-[11px] leading-5 text-slate-500">确认版本 v{action.version}。内容或版本变化后必须重新确认。</p>
|
||||
{error ? <p role="alert" className="mt-2 text-xs leading-5 text-red-700">{error} 当前状态未按成功处理。</p> : null}
|
||||
{stale ? <Button variant="outline" size="sm" className="mt-2" onClick={() => { setStale(false); onRefresh(); }}><RefreshCw size={14} />刷新后重新确认</Button> : null}
|
||||
{!canDecide && action.approval_status === "pending" ? <p className="mt-2 rounded-lg bg-slate-50 px-2.5 py-2 text-xs leading-5 text-slate-600">当前账号仅可查看，需要具备此动作审批权限的人员确认。</p> : null}
|
||||
{action.approval_status === "pending" && canDecide ? <Input className="mt-2" aria-label="退回理由" placeholder="退回理由，拒绝动作时必填" value={rejectComment} onChange={(event) => setRejectComment(event.target.value)} /> : null}
|
||||
<div className="mt-3 flex flex-wrap justify-end gap-2">
|
||||
{action.approval_status === "pending" && canDecide ? <><Button variant="outline" size="sm" disabled={submitting !== null} onClick={() => void run("reject")}>拒绝动作</Button><Button size="sm" disabled={submitting !== null} onClick={() => void run("approve")}>{submitting === "approve" ? <Loader2 className="animate-spin" /> : null}{command ? "批准下发命令" : "批准创建工单"}</Button></> : null}
|
||||
{action.approval_status === "approved" && action.execution_status === "not_submitted" ? <Button size="sm" disabled={!canExecute || submitting !== null} title={!canExecute ? "当前账号无此动作执行权限" : undefined} onClick={() => void run("execute")}>{submitting === "execute" ? <Loader2 className="animate-spin" /> : null}{command ? "下发命令" : "创建工单"}</Button> : null}
|
||||
{action.approval_status === "approved" && ["submitted", "unknown", "failed", "unsupported"].includes(action.execution_status) ? <Button variant="outline" size="sm" disabled={!canExecute || submitting !== null} onClick={() => void run("reconcile")}>{submitting === "reconcile" ? <Loader2 className="animate-spin" /> : <RefreshCw size={14} />}核对执行回执</Button> : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function ActionReceipt({ receipt }: { receipt: NonNullable<OperationalTaskAction["receipt"]> }) {
|
||||
return <section aria-label="执行回执" className="mt-2 rounded-lg bg-emerald-50/70 px-2.5 py-2">
|
||||
<p className="text-xs font-semibold text-emerald-800">执行回执</p>
|
||||
<dl className="mt-1 grid gap-1 text-[11px] leading-5">
|
||||
<EvidenceMeta label="回执编号" value={receipt.receipt_id} mono />
|
||||
<EvidenceMeta label="外部状态" value={externalStatusLabel(receipt.external_status)} />
|
||||
<EvidenceMeta label="提交时间" value={formatDateTime(receipt.submitted_at)} />
|
||||
{receipt.completed_at ? <EvidenceMeta label="完成时间" value={formatDateTime(receipt.completed_at)} /> : null}
|
||||
<EvidenceMeta label="说明" value={receipt.detail} />
|
||||
</dl>
|
||||
</section>;
|
||||
}
|
||||
|
||||
function ActionPayloadSummary({ payload }: { payload: Record<string, unknown> }) {
|
||||
const rows = Object.entries(payload).flatMap(([key, value]) => {
|
||||
if (key !== "parameters" && value && typeof value === "object" && !Array.isArray(value)) {
|
||||
return Object.entries(value as Record<string, unknown>).map(([childKey, childValue]) => ({ key: `${key}.${childKey}`, value: childValue }));
|
||||
}
|
||||
return [{ key, value }];
|
||||
});
|
||||
return <dl className="surface-control mt-2 grid gap-1 rounded-lg border border-slate-200/70 px-2.5 py-2 text-xs leading-5">{rows.map((row) => <div key={row.key} className="grid grid-cols-[76px_1fr] gap-2"><dt className="font-semibold text-slate-500">{payloadLabel(row.key)}</dt><dd className="break-words text-slate-800">{payloadValue(row.key, row.value)}</dd></div>)}</dl>;
|
||||
}
|
||||
|
||||
function payloadLabel(key: string) {
|
||||
const labels: Record<string, string> = {
|
||||
title: "工单标题", description: "工作内容", work_order_type: "工单类型", priority: "优先级",
|
||||
scheduled_at: "预约时间", location: "位置", assignee: "处理班组", command_type: "命令类型",
|
||||
"target.kind": "对象类型", "target.id": "目标对象", parameters: "执行参数", impact_summary: "影响说明",
|
||||
preconditions: "执行条件", expires_at: "失效时间"
|
||||
};
|
||||
return labels[key] ?? key;
|
||||
}
|
||||
|
||||
function payloadValue(key: string, value: unknown) {
|
||||
if (value === null || value === undefined || value === "") return "未指定";
|
||||
if (key === "command_type") return knownLabel(value, { set_valve: "调节阀门" });
|
||||
if (key === "target.kind") return knownLabel(value, { valve: "阀门", pump: "泵站", pipe: "管段" });
|
||||
if (key === "work_order_type") return knownLabel(value, { general: "一般工单", water_quality_complaint: "水质投诉", burst_report: "爆管上报" });
|
||||
if (key === "priority") return knownLabel(value, { normal: "普通", urgent: "紧急", high: "高", low: "低" });
|
||||
if (key === "scheduled_at" || key === "expires_at") return typeof value === "string" ? formatDateTime(value) : String(value);
|
||||
if (Array.isArray(value)) return value.map(String).join("、") || "无";
|
||||
if (key === "parameters" && typeof value === "object") {
|
||||
return Object.entries(value as Record<string, unknown>).map(([parameter, item]) =>
|
||||
parameter === "opening" ? `开度 ${String(item)}%` : `${parameter}=${String(item)}`
|
||||
).join("；");
|
||||
}
|
||||
if (typeof value === "object") return Object.entries(value as Record<string, unknown>).map(([itemKey, item]) => `${itemKey}=${String(item)}`).join("；");
|
||||
return String(value);
|
||||
}
|
||||
|
||||
function knownLabel(value: unknown, labels: Record<string, string>) {
|
||||
const raw = String(value);
|
||||
return labels[raw] ?? raw;
|
||||
}
|
||||
|
||||
function externalStatusLabel(value: string) {
|
||||
return ({ completed: "已完成", submitted: "已提交", accepted: "已接收", failed: "失败", pending: "处理中" } as Record<string, string>)[value] ?? value;
|
||||
}
|
||||
|
||||
function createBranchLayout(plan: ExecutionPlanView) {
|
||||
const ordered = topologicalNodes(plan);
|
||||
if (ordered.length !== plan.nodes.length) return null;
|
||||
const outgoing = new Map(plan.nodes.map((node) => [node.id, plan.edges.filter((edge) => edge.from === node.id)]));
|
||||
const incoming = new Map(plan.nodes.map((node) => [node.id, plan.edges.filter((edge) => edge.to === node.id)]));
|
||||
const fork = ordered.find((node) => (outgoing.get(node.id)?.length ?? 0) > 1);
|
||||
if (!fork) return { prefix: ordered, branches: [] as ExecutionNode[][], suffix: [] as ExecutionNode[] };
|
||||
const starts = outgoing.get(fork.id)!.map((edge) => edge.to);
|
||||
const descendants = starts.map((start) => reachableFrom(start, outgoing));
|
||||
const join = ordered.find((node) => node.id !== fork.id && (incoming.get(node.id)?.length ?? 0) > 1 && descendants.every((set) => set.has(node.id)));
|
||||
if (!join) return null;
|
||||
const nodeById = new Map(plan.nodes.map((node) => [node.id, node]));
|
||||
const branches: ExecutionNode[][] = [];
|
||||
for (const start of starts) {
|
||||
const branch: ExecutionNode[] = [];
|
||||
let current = start;
|
||||
const seen = new Set<string>();
|
||||
while (current !== join.id && !seen.has(current)) {
|
||||
seen.add(current);
|
||||
const node = nodeById.get(current);
|
||||
if (!node) return null;
|
||||
branch.push(node);
|
||||
const nextEdges = outgoing.get(current) ?? [];
|
||||
if (nextEdges.length !== 1) return null;
|
||||
current = nextEdges[0].to;
|
||||
}
|
||||
if (current !== join.id || branch.length === 0) return null;
|
||||
branches.push(branch);
|
||||
}
|
||||
const branchIds = new Set(branches.flatMap((branch) => branch.map((node) => node.id)));
|
||||
const forkIndex = ordered.findIndex((node) => node.id === fork.id);
|
||||
const joinIndex = ordered.findIndex((node) => node.id === join.id);
|
||||
return { prefix: ordered.slice(0, forkIndex + 1), branches, suffix: ordered.slice(joinIndex).filter((node) => !branchIds.has(node.id)) };
|
||||
}
|
||||
|
||||
function reachableFrom(start: string, outgoing: Map<string, ExecutionEdge[]>) {
|
||||
const seen = new Set<string>();
|
||||
const stack = [start];
|
||||
while (stack.length > 0) { const current = stack.pop()!; if (seen.has(current)) continue; seen.add(current); for (const edge of outgoing.get(current) ?? []) stack.push(edge.to); }
|
||||
return seen;
|
||||
}
|
||||
|
||||
function topologicalNodes(plan: ExecutionPlanView) {
|
||||
const remaining = new Map(plan.nodes.map((node) => [node.id, node]));
|
||||
const result: ExecutionNode[] = [];
|
||||
while (remaining.size > 0) {
|
||||
const ready = plan.nodes.filter((node) => remaining.has(node.id) && plan.edges.filter((edge) => edge.to === node.id).every((edge) => !remaining.has(edge.from)));
|
||||
if (ready.length === 0) return result;
|
||||
ready.forEach((node) => { result.push(node); remaining.delete(node.id); });
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function executionNodePresentation(node: ExecutionNode) {
|
||||
const tone: StatusTone = node.status === "completed" ? "success" : node.status === "running" ? "info" : node.status === "failed" ? "danger" : node.status === "waiting" ? "warning" : "neutral";
|
||||
const Icon = node.status === "completed" ? CheckCircle2 : node.status === "running" ? Loader2 : node.status === "waiting" || node.status === "failed" ? AlertTriangle : Clock3;
|
||||
const labels = { pending: "待执行", running: "执行中", waiting: "待人工／资料", completed: "已完成", failed: "失败", skipped: "不适用", cancelled: "已取消" } as const;
|
||||
return { tone, Icon, label: labels[node.status] };
|
||||
}
|
||||
|
||||
function taskTypeLabel(type: OperationalTask["task_type"]) { return { scheduled_flow: "定时流程", external_work_order: "外部工单", event_investigation: "事件调查" }[type]; }
|
||||
function taskStatusLabel(status: OperationalTask["status"]) { return { queued: "排队中", running: "处理中", waiting_human: "待人工", completed: "已完成", failed: "失败", cancelled: "已取消" }[status]; }
|
||||
function evidenceKindLabel(kind: OperationalTaskEvidence["kind"]) { return { system_data: "系统数据", external_feedback: "外部反馈", human_input: "人工提供", synthetic: "合成演练" }[kind]; }
|
||||
function formatDateTime(value: string) { const parsed = new Date(value); return Number.isNaN(parsed.getTime()) ? value : new Intl.DateTimeFormat("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hour12: false }).format(parsed); }
|
||||
function approvalLabel(status: OperationalTaskAction["approval_status"]) { return { pending: "待确认", approved: "已批准", rejected: "已拒绝" }[status]; }
|
||||
function approvalTone(status: OperationalTaskAction["approval_status"]): StatusTone { return status === "approved" ? "success" : status === "rejected" ? "danger" : "warning"; }
|
||||
function executionLabel(status: OperationalTaskAction["execution_status"]) { return { not_submitted: "未提交", submitted: "已提交", succeeded: "执行成功", failed: "执行失败", unsupported: "未接执行器", unknown: "结果未知" }[status]; }
|
||||
function executionTone(status: OperationalTaskAction["execution_status"]): StatusTone { return status === "succeeded" ? "success" : status === "failed" || status === "unsupported" ? "danger" : status === "submitted" || status === "unknown" ? "warning" : "neutral"; }
|
||||
Reference in New Issue
Block a user