feat: collapse auto-selected workflow panels
This commit is contained in:
Your Name
parent
cb4cf50337
commit
8aa0595741
@ -61,6 +61,7 @@ export function AgentWorkflowMaterialPicker({
|
||||
const isDark = theme === "dark";
|
||||
const [isImagePreviewExpanded, setIsImagePreviewExpanded] = useState(true);
|
||||
const [hasManualSelectionInteraction, setHasManualSelectionInteraction] = useState(false);
|
||||
const [isResultDetailsExpanded, setIsResultDetailsExpanded] = useState(true);
|
||||
const selectedSet = useMemo(
|
||||
() => new Set((selectedImageIds || []).map((item) => String(item || "").trim()).filter(Boolean)),
|
||||
[selectedImageIds]
|
||||
@ -118,6 +119,10 @@ export function AgentWorkflowMaterialPicker({
|
||||
recommendedImageIds.every((id) => selectedSet.has(id));
|
||||
const isAutoSelectedResult =
|
||||
Boolean(hasSystemRecommendedSelection) && !hasManualSelectionInteraction;
|
||||
const collapsedResultSummary = useMemo(() => {
|
||||
const title = result?.goodsInfo?.productName || result?.matchedSku || result?.query || "当前SKU";
|
||||
return `${title} · 系统已自动选中 ${selectedCount} 张图`;
|
||||
}, [result?.goodsInfo?.productName, result?.matchedSku, result?.query, selectedCount]);
|
||||
const previewResetKey = useMemo(
|
||||
() =>
|
||||
JSON.stringify({
|
||||
@ -132,6 +137,7 @@ export function AgentWorkflowMaterialPicker({
|
||||
useEffect(() => {
|
||||
setHasManualSelectionInteraction(false);
|
||||
setIsImagePreviewExpanded(!hasSystemRecommendedSelection);
|
||||
setIsResultDetailsExpanded(!hasSystemRecommendedSelection);
|
||||
}, [hasSystemRecommendedSelection, previewResetKey]);
|
||||
|
||||
const handleToggleImage = (imageId: string) => {
|
||||
@ -281,6 +287,42 @@ export function AgentWorkflowMaterialPicker({
|
||||
) : null}
|
||||
|
||||
{!disabled && result ? (
|
||||
isAutoSelectedResult && !isResultDetailsExpanded ? (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-wrap items-center justify-between gap-3 rounded-[22px] border px-4 py-3",
|
||||
isDark
|
||||
? "border-emerald-500/18 bg-emerald-500/[0.06] text-emerald-100"
|
||||
: "border-emerald-200 bg-emerald-50 text-emerald-700"
|
||||
)}
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] uppercase tracking-[0.12em] text-emerald-200/70">
|
||||
已自动准备完成
|
||||
</div>
|
||||
<div className="mt-1 truncate text-sm font-medium text-white/92">
|
||||
{collapsedResultSummary}
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-emerald-100/72">
|
||||
需要检查商品信息、已选图片或手动微调时，再展开查看。
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsResultDetailsExpanded(true)}
|
||||
className={cn(
|
||||
"shrink-0",
|
||||
isDark &&
|
||||
"border-white/12 bg-white/[0.04] text-white/82 hover:bg-white/[0.10] hover:text-white"
|
||||
)}
|
||||
>
|
||||
<ChevronDown className="mr-2 h-4 w-4" />
|
||||
展开详情
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<div className={cn("flex flex-wrap gap-2 text-xs", isDark ? "text-white/52" : "text-muted-foreground")}>
|
||||
@ -340,6 +382,21 @@ export function AgentWorkflowMaterialPicker({
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{isAutoSelectedResult ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsResultDetailsExpanded(false)}
|
||||
className={cn(
|
||||
isDark &&
|
||||
"border-white/12 bg-white/[0.04] text-white/82 hover:bg-white/[0.10] hover:text-white disabled:text-white/35"
|
||||
)}
|
||||
>
|
||||
<ChevronUp className="mr-2 h-4 w-4" />
|
||||
收起详情
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
@ -595,6 +652,7 @@ export function AgentWorkflowMaterialPicker({
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div
|
||||
className={cn(
|
||||
|
||||
@ -516,8 +516,13 @@ export function AgentWorkflowPanelDarkV2({
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
<div className="mb-5 space-y-4">
|
||||
<div className="agent-dark-scrollbar -mx-1 overflow-x-auto px-1 pb-2">
|
||||
<div className="flex min-w-max items-start">
|
||||
<div className="mt-3">
|
||||
<div
|
||||
className="grid items-start gap-x-2 gap-y-3"
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${flattenedResolvedSteps.length}, minmax(0, 1fr))`,
|
||||
}}
|
||||
>
|
||||
{flattenedResolvedSteps.map(({ step }, stepIndex) => {
|
||||
const completed = isAgentWorkflowStepSelectionComplete({
|
||||
step,
|
||||
@ -534,12 +539,12 @@ export function AgentWorkflowPanelDarkV2({
|
||||
setPendingAutoAdvanceStepKey(null);
|
||||
setActiveEmbeddedStepKey(step.key);
|
||||
}}
|
||||
className="group flex w-[156px] shrink-0 flex-col items-start pr-4 text-left transition-transform duration-200 hover:-translate-y-[1px]"
|
||||
className="group relative flex min-w-0 flex-col items-start pr-2 text-left transition-transform duration-200 hover:-translate-y-[1px]"
|
||||
>
|
||||
<div className="flex w-full items-center gap-3">
|
||||
<span
|
||||
className={cn(
|
||||
"flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-[12px] font-semibold transition-colors",
|
||||
"flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-[11px] font-semibold transition-colors",
|
||||
active
|
||||
? "border-emerald-300 bg-emerald-300 text-black shadow-[0_0_18px_rgba(52,211,153,0.28)]"
|
||||
: completed
|
||||
@ -551,7 +556,7 @@ export function AgentWorkflowPanelDarkV2({
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"truncate text-[15px] font-semibold transition-colors",
|
||||
"truncate text-[13px] font-semibold transition-colors",
|
||||
active
|
||||
? "text-white"
|
||||
: completed
|
||||
@ -564,7 +569,7 @@ export function AgentWorkflowPanelDarkV2({
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
"mt-2 pl-11 text-[11px] leading-5",
|
||||
"mt-1.5 pl-10 text-[10px] leading-4",
|
||||
active
|
||||
? "text-emerald-100/78"
|
||||
: completed
|
||||
@ -574,17 +579,17 @@ export function AgentWorkflowPanelDarkV2({
|
||||
>
|
||||
{stepSummary || "待选择"}
|
||||
</span>
|
||||
{stepIndex < flattenedResolvedSteps.length - 1 ? (
|
||||
<div
|
||||
className={cn(
|
||||
"pointer-events-none absolute left-[calc(100%-4px)] top-3.5 h-px w-2",
|
||||
stepIndex < activeEmbeddedStepIndex
|
||||
? "bg-emerald-400/35"
|
||||
: "bg-white/10"
|
||||
)}
|
||||
/>
|
||||
) : null}
|
||||
</button>
|
||||
{stepIndex < flattenedResolvedSteps.length - 1 ? (
|
||||
<div
|
||||
className={cn(
|
||||
"mr-4 mt-4 h-px min-w-[40px] transition-colors",
|
||||
stepIndex < activeEmbeddedStepIndex
|
||||
? "bg-emerald-400/35"
|
||||
: "bg-white/10"
|
||||
)}
|
||||
/>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user