60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
import { ChevronUp, FileChartColumnIncreasing, Sparkles, Trash2 } from "lucide-react";
|
|
import { cn } from "@/shared/ui/cn";
|
|
import {
|
|
ARTIFACT_DANGER_ICON_BUTTON_CLASS_NAME,
|
|
ARTIFACT_PRIMARY_ACTION_BUTTON_CLASS_NAME
|
|
} from "./artifact-view-control-styles";
|
|
import type { AnalysisArtifact, WorkbenchSurfaceMode } from "./workspace-model";
|
|
|
|
export function ArtifactPeekBar({
|
|
artifact,
|
|
surfaceMode,
|
|
onOpen,
|
|
onDestroy
|
|
}: {
|
|
artifact: AnalysisArtifact;
|
|
surfaceMode: WorkbenchSurfaceMode;
|
|
onOpen: () => void;
|
|
onDestroy: () => void;
|
|
}) {
|
|
return (
|
|
<aside
|
|
aria-label="Agent 成果预览"
|
|
className={cn(
|
|
"acrylic-panel pointer-events-auto absolute bottom-14 z-40 flex min-h-[76px] w-[min(680px,calc(100%-2rem))] items-center gap-3 rounded-2xl border px-3 py-2.5 text-slate-900",
|
|
"left-1/2 -translate-x-1/2",
|
|
surfaceMode === "map_split" && "2xl:left-[25%]"
|
|
)}
|
|
>
|
|
<span className="material-tone-agent hidden h-11 w-11 shrink-0 place-items-center rounded-xl border text-violet-700 sm:grid">
|
|
<FileChartColumnIncreasing size={21} aria-hidden="true" />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2 text-[11px] font-semibold text-violet-700">
|
|
<Sparkles size={12} aria-hidden="true" />
|
|
新分析成果 · R{artifact.revision}
|
|
</div>
|
|
<p className="mt-1 truncate text-sm font-semibold text-slate-950">{artifact.title}</p>
|
|
<p className="mt-0.5 line-clamp-1 text-xs text-slate-600">{artifact.summary}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onOpen}
|
|
className={ARTIFACT_PRIMARY_ACTION_BUTTON_CLASS_NAME}
|
|
>
|
|
<ChevronUp size={14} aria-hidden="true" />
|
|
打开成果
|
|
</button>
|
|
<button
|
|
type="button"
|
|
aria-label="销毁预览成果"
|
|
title="销毁预览成果"
|
|
onClick={onDestroy}
|
|
className={cn("surface-control border", ARTIFACT_DANGER_ICON_BUTTON_CLASS_NAME)}
|
|
>
|
|
<Trash2 size={15} aria-hidden="true" />
|
|
</button>
|
|
</aside>
|
|
);
|
|
}
|