594 lines
26 KiB
TypeScript
594 lines
26 KiB
TypeScript
import ReactECharts from "echarts-for-react";
|
||
import {
|
||
Activity,
|
||
AlertTriangle,
|
||
Check,
|
||
ChevronRight,
|
||
Clock3,
|
||
Database,
|
||
FileSearch,
|
||
Focus,
|
||
Map as MapIcon,
|
||
Minimize2,
|
||
PanelRightClose,
|
||
PanelRightOpen,
|
||
ShieldCheck,
|
||
Sparkles,
|
||
Trash2,
|
||
X
|
||
} from "lucide-react";
|
||
import { useEffect, useMemo, useState } from "react";
|
||
import { showMapNotice } from "@/features/map/core";
|
||
import { cn } from "@/shared/ui/cn";
|
||
import type {
|
||
AnalysisArtifact,
|
||
AnalysisArtifactAction,
|
||
AnalysisBlock,
|
||
AnalysisMetric,
|
||
ArtifactRequestedView,
|
||
WorkbenchSurfaceMode
|
||
} from "./workspace-model";
|
||
|
||
type AnalysisArtifactWorkspaceProps = {
|
||
artifact: AnalysisArtifact;
|
||
surfaceMode: WorkbenchSurfaceMode;
|
||
mapSplitAvailable: boolean;
|
||
onSetView: (view: ArtifactRequestedView) => void;
|
||
onCollapse: () => void;
|
||
onDestroy: () => void;
|
||
};
|
||
|
||
export function AnalysisArtifactWorkspace({
|
||
artifact,
|
||
surfaceMode,
|
||
mapSplitAvailable,
|
||
onSetView,
|
||
onCollapse,
|
||
onDestroy
|
||
}: AnalysisArtifactWorkspaceProps) {
|
||
const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
|
||
const metricBlock = artifact.blocks.find((block) => block.kind === "metric-grid");
|
||
const evidenceBlocks = artifact.blocks.filter((block) => block.kind !== "metric-grid");
|
||
const selectedBlock = useMemo(
|
||
() => artifact.blocks.find((block) => block.id === selectedBlockId) ?? null,
|
||
[artifact.blocks, selectedBlockId]
|
||
);
|
||
|
||
useEffect(() => {
|
||
setSelectedBlockId(null);
|
||
}, [artifact.id]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedBlock) return;
|
||
const handleKeyDown = (event: KeyboardEvent) => {
|
||
if (event.key === "Escape") setSelectedBlockId(null);
|
||
};
|
||
window.addEventListener("keydown", handleKeyDown);
|
||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||
}, [selectedBlock]);
|
||
|
||
return (
|
||
<article
|
||
aria-label={`${artifact.title}分析成果`}
|
||
className="acrylic-panel relative m-3 grid h-[calc(100%-1.5rem)] min-h-0 grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden rounded-2xl border text-slate-900"
|
||
lang="zh-CN"
|
||
>
|
||
<ArtifactHeader artifact={artifact} />
|
||
|
||
<div className="min-h-0 overflow-y-auto overscroll-contain px-4 py-4 xl:px-5">
|
||
<section aria-labelledby="artifact-summary-heading">
|
||
<div className="mb-3 flex items-end justify-between gap-4">
|
||
<div>
|
||
<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">Summary</p>
|
||
<h3 id="artifact-summary-heading" className="mt-1 text-sm font-semibold text-slate-950">结论摘要</h3>
|
||
</div>
|
||
<p className="max-w-[34rem] text-right text-xs leading-5 text-slate-500">{artifact.summary}</p>
|
||
</div>
|
||
{metricBlock?.kind === "metric-grid" ? (
|
||
<div className="grid grid-cols-2 gap-2.5 2xl:grid-cols-4">
|
||
{metricBlock.metrics.map((metric) => <MetricTile key={metric.label} metric={metric} />)}
|
||
</div>
|
||
) : null}
|
||
</section>
|
||
|
||
<section className="mt-5" aria-labelledby="artifact-evidence-heading">
|
||
<div className="mb-3 flex items-center justify-between gap-4">
|
||
<div>
|
||
<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">Evidence canvas</p>
|
||
<h3 id="artifact-evidence-heading" className="mt-1 text-sm font-semibold text-slate-950">证据画布</h3>
|
||
</div>
|
||
<span className="text-xs tabular-nums text-slate-500">{evidenceBlocks.length} 个证据模块</span>
|
||
</div>
|
||
<div className="grid grid-cols-12 gap-3.5">
|
||
{evidenceBlocks.map((block) => (
|
||
<AnalysisBlockView
|
||
key={block.id}
|
||
block={block}
|
||
selected={block.id === selectedBlockId}
|
||
onSelect={() => setSelectedBlockId(block.id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<ArtifactProvenance artifact={artifact} />
|
||
</div>
|
||
|
||
<ArtifactActionBar
|
||
artifact={artifact}
|
||
surfaceMode={surfaceMode}
|
||
mapSplitAvailable={mapSplitAvailable}
|
||
detailOpen={Boolean(selectedBlock)}
|
||
onToggleDetail={() => setSelectedBlockId((current) => current ? null : evidenceBlocks[0]?.id ?? null)}
|
||
onSetView={onSetView}
|
||
onCollapse={onCollapse}
|
||
onDestroy={onDestroy}
|
||
/>
|
||
|
||
{selectedBlock ? (
|
||
<ArtifactDetailDrawer
|
||
artifact={artifact}
|
||
block={selectedBlock}
|
||
onClose={() => setSelectedBlockId(null)}
|
||
/>
|
||
) : null}
|
||
</article>
|
||
);
|
||
}
|
||
|
||
function ArtifactHeader({ artifact }: { artifact: AnalysisArtifact }) {
|
||
return (
|
||
<header className="surface-control relative z-10 border-b px-4 py-4 xl:px-5">
|
||
<div className="flex items-start justify-between gap-5">
|
||
<div className="min-w-0">
|
||
<div className="flex flex-wrap items-center gap-2 text-xs font-medium text-slate-500">
|
||
<span className="inline-flex items-center gap-1.5 font-semibold text-blue-700">
|
||
<Sparkles size={14} aria-hidden="true" />
|
||
Agent Artifact
|
||
</span>
|
||
<span aria-hidden="true">·</span>
|
||
<span>{artifactTypeLabel(artifact.type)}</span>
|
||
<span aria-hidden="true">·</span>
|
||
<span>R{artifact.revision}</span>
|
||
</div>
|
||
<h2 className="mt-1.5 text-balance text-xl font-semibold leading-7 text-slate-950">{artifact.title}</h2>
|
||
<p className="mt-1 max-w-[68ch] text-sm leading-6 text-slate-600">{artifact.subtitle}</p>
|
||
</div>
|
||
<div className="flex shrink-0 flex-col items-end gap-2">
|
||
<LifecycleBadge lifecycle={artifact.lifecycle} />
|
||
<span className="inline-flex items-center gap-1.5 text-xs text-slate-500">
|
||
<Clock3 size={13} aria-hidden="true" />
|
||
{artifact.generatedAt}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="mt-3 flex flex-wrap gap-x-5 gap-y-1 text-xs text-slate-500">
|
||
<span><strong className="font-medium text-slate-700">范围</strong> {artifact.scope}</span>
|
||
<span><strong className="font-medium text-slate-700">置信度</strong> {artifact.confidence}</span>
|
||
<span><strong className="font-medium text-slate-700">地图关系</strong> {mapRelationLabel(artifact.mapRelation)}</span>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|
||
|
||
function AnalysisBlockView({
|
||
block,
|
||
selected,
|
||
onSelect
|
||
}: {
|
||
block: Exclude<AnalysisBlock, { kind: "metric-grid" }>;
|
||
selected: boolean;
|
||
onSelect: () => void;
|
||
}) {
|
||
const spanClass = block.span === 5
|
||
? "col-span-12 2xl:col-span-5"
|
||
: block.span === 7
|
||
? "col-span-12 2xl:col-span-7"
|
||
: "col-span-12";
|
||
|
||
return (
|
||
<section
|
||
aria-labelledby={`${block.id}-title`}
|
||
className={cn(
|
||
"surface-reading group min-w-0 overflow-hidden rounded-xl border shadow-[0_1px_4px_rgba(15,23,42,0.08)]",
|
||
"focus-within:shadow-[0_0_0_2px_rgba(37,99,235,0.35),0_8px_24px_rgba(15,23,42,0.12)]",
|
||
spanClass,
|
||
selected && "shadow-[0_0_0_2px_rgba(37,99,235,0.28),0_8px_24px_rgba(15,23,42,0.12)]"
|
||
)}
|
||
>
|
||
<button
|
||
type="button"
|
||
className="flex min-h-14 w-full items-start gap-3 px-4 py-3 text-left active:scale-[0.99]"
|
||
aria-label={`查看${block.title}详情`}
|
||
onClick={onSelect}
|
||
>
|
||
<span className="mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-md bg-blue-50 text-blue-700">
|
||
<FileSearch size={16} aria-hidden="true" />
|
||
</span>
|
||
<span className="min-w-0 flex-1">
|
||
<span id={`${block.id}-title`} className="block text-sm font-semibold text-slate-950">{block.title}</span>
|
||
{"description" in block ? <span className="mt-1 block text-xs leading-5 text-slate-500">{block.description}</span> : null}
|
||
</span>
|
||
<ChevronRight size={16} className="mt-2 shrink-0 text-slate-400 transition-transform group-hover:translate-x-0.5" aria-hidden="true" />
|
||
</button>
|
||
<div className="border-t border-slate-100 p-4">
|
||
<AnalysisBlockBody block={block} />
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function AnalysisBlockBody({ block }: { block: Exclude<AnalysisBlock, { kind: "metric-grid" }> }) {
|
||
if (block.kind === "chart") {
|
||
return (
|
||
<div className="h-[258px] min-h-0">
|
||
<ReactECharts notMerge lazyUpdate style={{ width: "100%", height: "100%" }} option={createChartOption(block)} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (block.kind === "process-flow") {
|
||
return (
|
||
<ol className="space-y-0" aria-label={block.title}>
|
||
{block.nodes.map((node, index) => (
|
||
<li key={node.id} className="relative flex gap-3 pb-4 last:pb-0">
|
||
{index < block.nodes.length - 1 ? <span className="absolute left-[15px] top-8 h-[calc(100%-1rem)] w-px bg-slate-200" aria-hidden="true" /> : null}
|
||
<span className={cn(
|
||
"relative z-[1] grid h-8 w-8 shrink-0 place-items-center rounded-full",
|
||
node.status === "complete" && "bg-emerald-100 text-emerald-700",
|
||
node.status === "active" && "bg-blue-600 text-white shadow-[0_0_0_4px_rgba(37,99,235,0.12)]",
|
||
node.status === "pending" && "bg-slate-100 text-slate-500"
|
||
)}>
|
||
{node.status === "complete" ? <Check size={15} aria-hidden="true" /> : node.status === "active" ? <Activity size={15} aria-hidden="true" /> : <Clock3 size={14} aria-hidden="true" />}
|
||
</span>
|
||
<div className="min-w-0 pt-0.5">
|
||
<div className="flex items-center gap-2">
|
||
<p className="text-sm font-semibold text-slate-900">{node.label}</p>
|
||
{node.status === "active" ? <span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-semibold text-blue-700">当前</span> : null}
|
||
</div>
|
||
<p className="mt-1 text-sm leading-5 text-slate-600">{node.detail}</p>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
);
|
||
}
|
||
|
||
if (block.kind === "data-table") {
|
||
return (
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full min-w-[520px] border-collapse text-sm">
|
||
<thead>
|
||
<tr className="border-b border-slate-200 bg-slate-50 text-xs font-semibold text-slate-500">
|
||
{block.columns.map((column) => <th key={column.key} scope="col" className={cn("px-3 py-2.5 text-left", column.numeric && "text-right")}>{column.label}</th>)}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{block.rows.map((row, index) => (
|
||
<tr key={`${block.id}-${index}`} className="border-b border-slate-100 last:border-0">
|
||
{block.columns.map((column) => <td key={column.key} className={cn("px-3 py-3 text-slate-700", column.numeric && "text-right tabular-nums")}>{row[column.key]}</td>)}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return <div className="space-y-3 text-sm leading-7 text-slate-700">{block.paragraphs.map((paragraph) => <p key={paragraph}>{paragraph}</p>)}</div>;
|
||
}
|
||
|
||
function ArtifactProvenance({ artifact }: { artifact: AnalysisArtifact }) {
|
||
return (
|
||
<section className="surface-well mt-5 grid overflow-hidden rounded-xl border xl:grid-cols-2 xl:divide-x xl:divide-slate-300/70" aria-label="成果依据与限制">
|
||
<div className="flex min-w-0 items-start gap-3 px-4 py-3">
|
||
<h3 className="flex shrink-0 items-center gap-1.5 pt-1 text-xs font-semibold text-slate-700">
|
||
<Database size={14} aria-hidden="true" />
|
||
数据来源
|
||
</h3>
|
||
<ul className="flex min-w-0 flex-wrap gap-1.5">
|
||
{artifact.sources.map((source) => (
|
||
<li key={source} className="surface-reading rounded-md border px-2.5 py-1 text-xs text-slate-600">{source}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
<div className="flex min-w-0 items-start gap-3 border-t border-slate-300/70 px-4 py-3 xl:border-t-0">
|
||
<h3 className="flex shrink-0 items-center gap-1.5 pt-0.5 text-xs font-semibold text-amber-800">
|
||
<AlertTriangle size={14} aria-hidden="true" />
|
||
分析限制
|
||
</h3>
|
||
<ul className="min-w-0 space-y-1 text-xs leading-5 text-slate-600">
|
||
{artifact.limitations.map((item) => (
|
||
<li key={item} className="before:mr-2 before:text-amber-600 before:content-['·']">{item}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function ArtifactDetailDrawer({
|
||
artifact,
|
||
block,
|
||
onClose
|
||
}: {
|
||
artifact: AnalysisArtifact;
|
||
block: AnalysisBlock;
|
||
onClose: () => void;
|
||
}) {
|
||
const blockFacts = getEvidenceBlockFacts(block);
|
||
|
||
return (
|
||
<aside
|
||
aria-label="证据详情"
|
||
className="surface-reading absolute bottom-[57px] right-0 top-0 z-30 w-full max-w-[440px] overflow-y-auto overscroll-contain border-l border-slate-300/80 shadow-[-18px_0_44px_rgba(15,23,42,0.14)]"
|
||
>
|
||
<div className="surface-control sticky top-0 z-10 flex items-start justify-between gap-4 border-b border-slate-300/70 px-5 py-4">
|
||
<div className="flex min-w-0 items-start gap-3">
|
||
<span className="surface-reading grid h-9 w-9 shrink-0 place-items-center rounded-lg border text-blue-700 shadow-[0_1px_3px_rgba(15,23,42,0.08)]">
|
||
<FileSearch size={17} aria-hidden="true" />
|
||
</span>
|
||
<div className="min-w-0">
|
||
<div className="flex flex-wrap items-center gap-2 text-[11px] font-semibold text-slate-500">
|
||
<span className="uppercase tracking-[0.12em]">证据详情</span>
|
||
<span className="h-1 w-1 rounded-full bg-slate-300" aria-hidden="true" />
|
||
<span className="text-blue-700">{evidenceBlockKindLabel(block)}</span>
|
||
</div>
|
||
<h3 className="mt-1 text-base font-semibold leading-6 text-slate-950">{block.title}</h3>
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
aria-label="关闭证据详情"
|
||
onClick={onClose}
|
||
className="grid h-9 w-9 shrink-0 place-items-center rounded-lg text-slate-500 hover:bg-slate-200/70 hover:text-slate-900 active:scale-95"
|
||
>
|
||
<X size={17} aria-hidden="true" />
|
||
</button>
|
||
</div>
|
||
<div className="space-y-6 px-5 py-5">
|
||
<section aria-labelledby="evidence-purpose-heading">
|
||
<p id="evidence-purpose-heading" className="text-xs font-semibold text-slate-500">证据说明</p>
|
||
<p className="mt-2 text-sm leading-6 text-slate-700">
|
||
{"description" in block ? block.description : "该模块汇总了当前成果中的关键判断依据。"}
|
||
</p>
|
||
</section>
|
||
|
||
<section className="material-tone-agent rounded-xl border px-4 py-3.5" aria-labelledby="evidence-relation-heading">
|
||
<div className="flex items-center gap-2 text-xs font-semibold text-blue-900">
|
||
<Sparkles size={14} aria-hidden="true" />
|
||
<h4 id="evidence-relation-heading">Agent 关联判断</h4>
|
||
</div>
|
||
<p className="mt-2 text-sm leading-6 text-slate-700">结合当前模块与其余证据，{artifact.summary}</p>
|
||
</section>
|
||
|
||
<section aria-labelledby="evidence-data-heading">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<h4 id="evidence-data-heading" className="text-xs font-semibold text-slate-500">数据概览</h4>
|
||
<span className="text-[11px] font-medium text-slate-400">Artifact R{artifact.revision}</span>
|
||
</div>
|
||
<dl className="surface-well mt-2 grid grid-cols-2 gap-px overflow-hidden rounded-xl border bg-slate-300/70">
|
||
{blockFacts.map((fact) => (
|
||
<div key={fact.label} className="surface-reading min-w-0 px-3.5 py-3">
|
||
<dt className="text-[11px] text-slate-500">{fact.label}</dt>
|
||
<dd className="mt-1 truncate text-sm font-semibold text-slate-900 tabular-nums" title={fact.value}>{fact.value}</dd>
|
||
</div>
|
||
))}
|
||
</dl>
|
||
</section>
|
||
|
||
<section className="border-t border-slate-200 pt-5" aria-labelledby="evidence-context-heading">
|
||
<h4 id="evidence-context-heading" className="text-xs font-semibold text-slate-500">分析上下文</h4>
|
||
<dl className="mt-3 grid grid-cols-[72px_minmax(0,1fr)] gap-x-4 gap-y-2.5 text-xs leading-5">
|
||
<dt className="text-slate-500">分析时间</dt>
|
||
<dd className="text-right font-medium text-slate-800">{formatAnalyticalTimeRange(artifact.analyticalTimeRange)}</dd>
|
||
<dt className="text-slate-500">分析范围</dt>
|
||
<dd className="text-right font-medium text-slate-800">{artifact.scope}</dd>
|
||
<dt className="text-slate-500">综合置信度</dt>
|
||
<dd className="text-right font-medium text-slate-800 tabular-nums">{artifact.confidence}</dd>
|
||
</dl>
|
||
</section>
|
||
|
||
<section className="border-t border-slate-200 pt-5" aria-labelledby="evidence-source-heading">
|
||
<div className="flex items-center gap-2">
|
||
<Database size={14} className="text-slate-500" aria-hidden="true" />
|
||
<h4 id="evidence-source-heading" className="text-xs font-semibold text-slate-700">本成果数据来源</h4>
|
||
</div>
|
||
<ul className="mt-3 flex flex-wrap gap-2">
|
||
{artifact.sources.map((source) => (
|
||
<li key={source} className="surface-control rounded-md border px-2.5 py-1.5 text-xs text-slate-600">{source}</li>
|
||
))}
|
||
</ul>
|
||
</section>
|
||
|
||
<section className="material-tone-warning rounded-xl border px-4 py-3.5" aria-labelledby="evidence-limit-heading">
|
||
<div className="flex items-center gap-2 text-xs font-semibold text-amber-900">
|
||
<AlertTriangle size={14} aria-hidden="true" />
|
||
<h4 id="evidence-limit-heading">使用限制</h4>
|
||
</div>
|
||
<ul className="mt-2 space-y-1.5 text-xs leading-5 text-amber-950/75">
|
||
{artifact.limitations.map((item) => <li key={item}>• {item}</li>)}
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
</aside>
|
||
);
|
||
}
|
||
|
||
function evidenceBlockKindLabel(block: AnalysisBlock) {
|
||
if (block.kind === "chart") return block.chartType === "line" ? "趋势图" : "对比图";
|
||
if (block.kind === "process-flow") return "流程证据";
|
||
if (block.kind === "data-table") return "明细数据";
|
||
if (block.kind === "narrative") return "分析说明";
|
||
return "指标摘要";
|
||
}
|
||
|
||
function getEvidenceBlockFacts(block: AnalysisBlock): Array<{ label: string; value: string }> {
|
||
if (block.kind === "chart") {
|
||
return [
|
||
{ label: "数据序列", value: `${block.series.length} 组` },
|
||
{ label: "时间 / 类别点", value: `${block.categories.length} 个` },
|
||
{ label: "计量单位", value: block.unit },
|
||
{ label: "图表类型", value: block.chartType === "line" ? "趋势曲线" : "对比柱图" }
|
||
];
|
||
}
|
||
if (block.kind === "data-table") {
|
||
return [
|
||
{ label: "证据记录", value: `${block.rows.length} 条` },
|
||
{ label: "数据字段", value: `${block.columns.length} 个` },
|
||
{ label: "展示方式", value: "明细表格" },
|
||
{ label: "证据状态", value: "已纳入结论" }
|
||
];
|
||
}
|
||
if (block.kind === "process-flow") {
|
||
return [
|
||
{ label: "流程步骤", value: `${block.nodes.length} 项` },
|
||
{ label: "已完成", value: `${block.nodes.filter((node) => node.status === "complete").length} 项` },
|
||
{ label: "当前进行", value: `${block.nodes.filter((node) => node.status === "active").length} 项` },
|
||
{ label: "展示方式", value: "处置流程" }
|
||
];
|
||
}
|
||
if (block.kind === "narrative") {
|
||
return [
|
||
{ label: "分析段落", value: `${block.paragraphs.length} 段` },
|
||
{ label: "展示方式", value: "分析说明" },
|
||
{ label: "证据状态", value: "已纳入结论" },
|
||
{ label: "内容来源", value: "Agent 生成" }
|
||
];
|
||
}
|
||
return [
|
||
{ label: "关键指标", value: `${block.metrics.length} 项` },
|
||
{ label: "展示方式", value: "指标摘要" },
|
||
{ label: "证据状态", value: "已纳入结论" },
|
||
{ label: "内容来源", value: "Agent 生成" }
|
||
];
|
||
}
|
||
|
||
function formatAnalyticalTimeRange(range: AnalysisArtifact["analyticalTimeRange"]) {
|
||
const formatter = new Intl.DateTimeFormat("zh-CN", {
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
hour12: false
|
||
});
|
||
return `${formatter.format(new Date(range.start))} 至 ${formatter.format(new Date(range.end))}`;
|
||
}
|
||
|
||
function ArtifactActionBar({
|
||
artifact,
|
||
surfaceMode,
|
||
mapSplitAvailable,
|
||
detailOpen,
|
||
onToggleDetail,
|
||
onSetView,
|
||
onCollapse,
|
||
onDestroy
|
||
}: {
|
||
artifact: AnalysisArtifact;
|
||
surfaceMode: WorkbenchSurfaceMode;
|
||
mapSplitAvailable: boolean;
|
||
detailOpen: boolean;
|
||
onToggleDetail: () => void;
|
||
onSetView: (view: ArtifactRequestedView) => void;
|
||
onCollapse: () => void;
|
||
onDestroy: () => void;
|
||
}) {
|
||
return (
|
||
<footer className="surface-control relative z-20 mb-[calc(var(--workbench-timeline-height)+0.25rem)] flex min-h-14 items-center justify-between gap-3 border-t px-3">
|
||
<div className="flex min-w-0 items-center gap-1">
|
||
{artifact.mapRelation !== "none" ? (
|
||
<button type="button" onClick={() => onSetView(surfaceMode === "map_split" ? "focus" : mapSplitAvailable ? "map_split" : "map_only")} className="inline-flex h-10 items-center gap-2 rounded-md px-3 text-xs font-semibold text-slate-700 hover:bg-slate-100 active:scale-95">
|
||
{surfaceMode === "map_split" ? <Focus size={15} aria-hidden="true" /> : <MapIcon size={15} aria-hidden="true" />}
|
||
{surfaceMode === "map_split" ? "专注分析" : "显示地图"}
|
||
</button>
|
||
) : null}
|
||
<button type="button" aria-pressed={detailOpen} onClick={onToggleDetail} className="inline-flex h-10 items-center gap-2 rounded-md px-3 text-xs font-semibold text-slate-700 hover:bg-slate-100 active:scale-95">
|
||
{detailOpen ? <PanelRightClose size={15} aria-hidden="true" /> : <PanelRightOpen size={15} aria-hidden="true" />}
|
||
证据详情
|
||
</button>
|
||
</div>
|
||
<div className="flex shrink-0 items-center gap-1">
|
||
{artifact.actions.slice(0, 1).map((action) => <ArtifactPrimaryAction key={action.id} action={action} artifact={artifact} />)}
|
||
<button type="button" aria-label="将成果收起为预览" title="收起为预览" onClick={onCollapse} className="grid h-10 w-10 place-items-center rounded-md text-slate-600 hover:bg-slate-100 active:scale-95"><Minimize2 size={16} aria-hidden="true" /></button>
|
||
<button type="button" aria-label="销毁当前成果" title="销毁当前成果" onClick={onDestroy} className="grid h-10 w-10 place-items-center rounded-md text-slate-500 hover:bg-rose-50 hover:text-rose-700 active:scale-95"><Trash2 size={16} aria-hidden="true" /></button>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|
||
|
||
function ArtifactPrimaryAction({ action, artifact }: { action: AnalysisArtifactAction; artifact: AnalysisArtifact }) {
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={() => showMapNotice({ tone: "info", title: action.label, message: `${artifact.title}：${action.description}` })}
|
||
className="hidden h-10 items-center gap-2 rounded-md bg-blue-600 px-3 text-xs font-semibold text-white shadow-[0_2px_6px_rgba(37,99,235,0.24)] hover:bg-blue-700 active:scale-95 sm:inline-flex"
|
||
>
|
||
<ShieldCheck size={15} aria-hidden="true" />
|
||
{action.label}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function MetricTile({ metric }: { metric: AnalysisMetric }) {
|
||
return (
|
||
<div className="surface-reading min-w-0 rounded-xl border px-3.5 py-3 shadow-[0_1px_4px_rgba(15,23,42,0.08)]">
|
||
<div className="flex items-center gap-2">
|
||
<span className={cn("h-2 w-2 rounded-full", metricToneClass(metric.tone))} aria-hidden="true" />
|
||
<p className="truncate text-xs font-medium text-slate-500">{metric.label}</p>
|
||
</div>
|
||
<p className="mt-2 text-lg font-semibold text-slate-950 tabular-nums">{metric.value}</p>
|
||
<p className="mt-1 text-xs leading-5 text-slate-500">{metric.detail}</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function LifecycleBadge({ lifecycle }: { lifecycle: AnalysisArtifact["lifecycle"] }) {
|
||
const labels = { draft: "草稿", reviewed: "已复核", published: "已发布", archived: "已归档" } as const;
|
||
return <span className={cn("inline-flex h-7 items-center rounded-full px-2.5 text-xs font-semibold", lifecycle === "published" ? "bg-emerald-100 text-emerald-800" : lifecycle === "reviewed" ? "bg-blue-100 text-blue-800" : lifecycle === "archived" ? "bg-slate-200 text-slate-700" : "bg-amber-100 text-amber-800")}>{labels[lifecycle]}</span>;
|
||
}
|
||
|
||
function artifactTypeLabel(type: AnalysisArtifact["type"]) {
|
||
if (type === "diagnosis") return "异常诊断";
|
||
if (type === "simulation") return "方案模拟";
|
||
return "指标分析";
|
||
}
|
||
|
||
function mapRelationLabel(relation: AnalysisArtifact["mapRelation"]) {
|
||
if (relation === "required") return "强关联";
|
||
if (relation === "optional") return "可选";
|
||
return "无空间依赖";
|
||
}
|
||
|
||
function createChartOption(block: Extract<AnalysisBlock, { kind: "chart" }>) {
|
||
return {
|
||
animationDuration: 260,
|
||
animationEasing: "cubicOut",
|
||
color: block.series.map((series) => series.color),
|
||
grid: { top: 40, right: 18, bottom: 34, left: 52, containLabel: false },
|
||
legend: { top: 0, right: 0, itemWidth: 12, itemHeight: 7, textStyle: { color: "#475569", fontSize: 11 } },
|
||
tooltip: { trigger: "axis", confine: true, borderWidth: 0, backgroundColor: "rgba(15,23,42,0.92)", textStyle: { color: "#f8fafc", fontSize: 12 } },
|
||
xAxis: { type: "category", data: block.categories, boundaryGap: block.chartType === "bar", axisLine: { lineStyle: { color: "#cbd5e1" } }, axisTick: { show: false }, axisLabel: { color: "#64748b", fontSize: 11 } },
|
||
yAxis: { type: "value", name: block.unit, nameTextStyle: { color: "#64748b", fontSize: 11, padding: [0, 0, 0, -26] }, splitLine: { lineStyle: { color: "rgba(148,163,184,0.18)" } }, axisLabel: { color: "#64748b", fontSize: 11 } },
|
||
series: block.series.map((series) => ({
|
||
name: series.name,
|
||
type: series.type ?? block.chartType,
|
||
data: series.values,
|
||
smooth: (series.type ?? block.chartType) === "line" ? 0.28 : undefined,
|
||
symbol: "circle",
|
||
symbolSize: 6,
|
||
barMaxWidth: 24,
|
||
lineStyle: { width: 2.5 },
|
||
itemStyle: { borderRadius: (series.type ?? block.chartType) === "bar" ? [3, 3, 0, 0] : undefined }
|
||
}))
|
||
};
|
||
}
|
||
|
||
function metricToneClass(tone: AnalysisMetric["tone"]) {
|
||
if (tone === "danger") return "bg-rose-500";
|
||
if (tone === "warning") return "bg-amber-500";
|
||
if (tone === "success") return "bg-emerald-500";
|
||
if (tone === "info") return "bg-blue-600";
|
||
return "bg-slate-400";
|
||
}
|