From 8aa05957416608046bdb3bc8c07e7a176a4595d3 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Mon, 23 Mar 2026 11:18:05 +0800
Subject: [PATCH] feat: collapse auto-selected workflow panels

---
 .../agents/AgentWorkflowMaterialPicker.tsx    | 58 +++++++++++++++++++
 .../agents/AgentWorkflowPanelDarkV2.tsx       | 37 +++++++-----
 2 files changed, 79 insertions(+), 16 deletions(-)

diff --git a/components/agents/AgentWorkflowMaterialPicker.tsx b/components/agents/AgentWorkflowMaterialPicker.tsx
index 2e601f33b..9d5bc6878 100644
--- a/components/agents/AgentWorkflowMaterialPicker.tsx
+++ b/components/agents/AgentWorkflowMaterialPicker.tsx
@@ -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(
diff --git a/components/agents/AgentWorkflowPanelDarkV2.tsx b/components/agents/AgentWorkflowPanelDarkV2.tsx
index 3207d58a9..05063a214 100644
--- a/components/agents/AgentWorkflowPanelDarkV2.tsx
+++ b/components/agents/AgentWorkflowPanelDarkV2.tsx
@@ -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>
                           );
                         })}