fix: simplify agent material picker controls

components/agents/AgentGenerationWorkspaceDarkV2.tsx

@@ -3847,6 +3847,45 @@ export function AgentGenerationWorkspaceDarkV2({
                       生成参数
                     </h3>
                     <div className="space-y-3">
+                      {isDetailReplacementPreset ? (
+                        <div className="rounded-[24px] border border-emerald-400/22 bg-emerald-500/[0.08] p-3 shadow-[0_0_0_1px_rgba(52,211,153,0.08),0_12px_36px_rgba(16,185,129,0.08)]">
+                          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+                            <div className="space-y-1">
+                              <div className="text-sm font-semibold text-white">详情模式</div>
+                              <div className="text-xs text-emerald-100/72">
+                                顶部直接切换“参考图替换”或“AI详情生成”，生成结果会自动归档到对应分类。
+                              </div>
+                            </div>
+                            <div className="grid w-full grid-cols-2 gap-2 lg:w-auto lg:min-w-[360px]">
+                              <button
+                                type="button"
+                                onClick={() => updateDetailGenerationMethod("reference_replace")}
+                                className={cn(
+                                  "flex h-11 items-center justify-center rounded-[18px] border text-sm font-medium transition-all",
+                                  !isDetailAiGenerationMethod
+                                    ? "border-emerald-300/45 bg-emerald-400/18 text-white shadow-[0_0_0_1px_rgba(110,231,183,0.2),0_10px_28px_rgba(16,185,129,0.16)]"
+                                    : "border-white/12 bg-black/25 text-white/68 hover:border-white/22 hover:text-white"
+                                )}
+                              >
+                                参考图替换
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => updateDetailGenerationMethod("ai_detail_generate")}
+                                className={cn(
+                                  "flex h-11 items-center justify-center rounded-[18px] border text-sm font-medium transition-all",
+                                  isDetailAiGenerationMethod
+                                    ? "border-emerald-300/45 bg-emerald-400/18 text-white shadow-[0_0_0_1px_rgba(110,231,183,0.2),0_10px_28px_rgba(16,185,129,0.16)]"
+                                    : "border-white/12 bg-black/25 text-white/68 hover:border-white/22 hover:text-white"
+                                )}
+                              >
+                                AI详情生成
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      ) : null}
+
                       {isReplacementPreset || isDetailAiGenerationMethod ? (
                         <div className="rounded-[24px] border border-amber-400/20 bg-amber-500/[0.08] px-4 py-3 text-sm text-amber-100/90">
                           {isDetailAiGenerationMethod
@@ -3963,50 +4002,6 @@ export function AgentGenerationWorkspaceDarkV2({
             </div>
           </motion.section>
 
-          {isDetailReplacementPreset ? (
-            <motion.section
-              className="rounded-[28px] border border-white/12 bg-white/[0.04] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
-              initial={{ opacity: 0, scale: 0.98 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ delay: 0.075 }}
-            >
-              <div className="flex flex-wrap items-center justify-between gap-3">
-                <div>
-                  <div className="text-sm font-semibold text-white">详情模式</div>
-                  <div className="mt-1 text-xs text-white/45">
-                    在“参考图替换”和“AI详情生成”之间切换，结果会分别保存到各自分类中。
-                  </div>
-                </div>
-                <div className="inline-flex rounded-full border border-white/10 bg-black/20 p-1">
-                  <button
-                    type="button"
-                    onClick={() => updateDetailGenerationMethod("reference_replace")}
-                    className={cn(
-                      "rounded-full px-3 py-1.5 text-xs transition-colors",
-                      !isDetailAiGenerationMethod
-                        ? "bg-emerald-500/[0.16] text-emerald-100"
-                        : "text-white/60 hover:text-white"
-                    )}
-                  >
-                    参考图替换
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => updateDetailGenerationMethod("ai_detail_generate")}
-                    className={cn(
-                      "rounded-full px-3 py-1.5 text-xs transition-colors",
-                      isDetailAiGenerationMethod
-                        ? "bg-emerald-500/[0.16] text-emerald-100"
-                        : "text-white/60 hover:text-white"
-                    )}
-                  >
-                    AI详情生成
-                  </button>
-                </div>
-              </div>
-            </motion.section>
-          ) : null}
-
           {isDetailReplacementPreset && !isDetailAiGenerationMethod ? (
             <motion.section
               className="relative overflow-hidden rounded-[28px] border border-white/12 bg-white/[0.04] shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"

components/agents/AgentWorkflowMaterialPicker.tsx

@@ -59,7 +59,7 @@ export function AgentWorkflowMaterialPicker({
   theme = "light",
 }: AgentWorkflowMaterialPickerProps) {
   const isDark = theme === "dark";
-  const [isImagePreviewExpanded, setIsImagePreviewExpanded] = useState(true);
+  const [previewDisplayMode, setPreviewDisplayMode] = useState<"selected" | "all">("all");
   const [hasManualSelectionInteraction, setHasManualSelectionInteraction] = useState(false);
   const [isResultDetailsExpanded, setIsResultDetailsExpanded] = useState(true);
   const selectedSet = useMemo(
@@ -112,6 +112,7 @@ export function AgentWorkflowMaterialPicker({
   ].filter((item) => Boolean(item.value));
   const remainingSelectableCount =
     resolvedSelectionLimit === null ? null : Math.max(resolvedSelectionLimit - selectedCount, 0);
+  const totalImageCount = result?.images?.length || 0;
   const hasSystemRecommendedSelection =
     result?.queryType === "sku" &&
     recommendedImageIds.length > 0 &&
@@ -119,10 +120,20 @@ export function AgentWorkflowMaterialPicker({
     recommendedImageIds.every((id) => selectedSet.has(id));
   const isAutoSelectedResult =
     Boolean(hasSystemRecommendedSelection) && !hasManualSelectionInteraction;
+  const canTogglePreviewMode = totalImageCount > 0 && selectedCount > 0 && selectedCount < totalImageCount;
   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 visibleImages = useMemo(() => {
+    if (!result?.images?.length) {
+      return [];
+    }
+    if (previewDisplayMode === "selected" && selectedCount > 0) {
+      return result.images.filter((image) => selectedSet.has(image.id));
+    }
+    return result.images;
+  }, [previewDisplayMode, result?.images, selectedCount, selectedSet]);
   const previewResetKey = useMemo(
     () =>
       JSON.stringify({
@@ -136,9 +147,15 @@ export function AgentWorkflowMaterialPicker({
 
   useEffect(() => {
     setHasManualSelectionInteraction(false);
-    setIsImagePreviewExpanded(!hasSystemRecommendedSelection);
+  }, [previewResetKey]);
+
+  useEffect(() => {
+    if (hasManualSelectionInteraction) {
+      return;
+    }
+    setPreviewDisplayMode(hasSystemRecommendedSelection ? "selected" : "all");
     setIsResultDetailsExpanded(!hasSystemRecommendedSelection);
-  }, [hasSystemRecommendedSelection, previewResetKey]);
+  }, [hasManualSelectionInteraction, hasSystemRecommendedSelection, previewResetKey]);
 
   const handleToggleImage = (imageId: string) => {
     setHasManualSelectionInteraction(true);
@@ -304,7 +321,7 @@ export function AgentWorkflowMaterialPicker({
                 {collapsedResultSummary}
               </div>
               <div className="mt-1 text-xs text-emerald-100/72">
-                需要检查商品信息、已选图片或手动微调时，再展开查看。
+                默认先替你收起结果区，需要检查商品信息、已选图片或手动微调时再展开查看。
               </div>
             </div>
             <Button
@@ -319,7 +336,7 @@ export function AgentWorkflowMaterialPicker({
               )}
             >
               <ChevronDown className="mr-2 h-4 w-4" />
-              展开详情
+              查看已选内容
             </Button>
           </div>
         ) : (
@@ -381,21 +398,48 @@ export function AgentWorkflowMaterialPicker({
                 </span>
               ) : null}
             </div>
-            <div className="flex items-center gap-2">
-              {isAutoSelectedResult ? (
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setIsResultDetailsExpanded(false)}
+            <div className="flex flex-wrap items-center justify-end gap-2">
+              {canTogglePreviewMode ? (
+                <div
                   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"
+                    "inline-flex items-center rounded-full border p-1",
+                    isDark ? "border-white/12 bg-white/[0.04]" : "border-border bg-background"
                   )}
                 >
-                  <ChevronUp className="mr-2 h-4 w-4" />
-                  收起详情
-                </Button>
+                  <button
+                    type="button"
+                    onClick={() => setPreviewDisplayMode("selected")}
+                    disabled={selectedCount === 0}
+                    className={cn(
+                      "rounded-full px-3 py-1.5 text-xs font-medium transition-colors",
+                      previewDisplayMode === "selected"
+                        ? isDark
+                          ? "bg-emerald-500/[0.16] text-emerald-100"
+                          : "bg-primary/12 text-primary"
+                        : isDark
+                          ? "text-white/60 hover:text-white disabled:text-white/28"
+                          : "text-muted-foreground disabled:text-muted-foreground/50"
+                    )}
+                  >
+                    已选 {selectedCount}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setPreviewDisplayMode("all")}
+                    className={cn(
+                      "rounded-full px-3 py-1.5 text-xs font-medium transition-colors",
+                      previewDisplayMode === "all"
+                        ? isDark
+                          ? "bg-white/[0.08] text-white"
+                          : "bg-muted text-foreground"
+                        : isDark
+                          ? "text-white/60 hover:text-white"
+                          : "text-muted-foreground"
+                    )}
+                  >
+                    全部 {totalImageCount}
+                  </button>
+                </div>
               ) : null}
               <Button
                 type="button"
@@ -426,6 +470,21 @@ export function AgentWorkflowMaterialPicker({
               >
                 清空已选
               </Button>
+              {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}
             </div>
           </div>
 
@@ -523,7 +582,7 @@ export function AgentWorkflowMaterialPicker({
 
           {result.images?.length ? (
             <div className="space-y-3">
-              {isAutoSelectedResult ? (
+              {isAutoSelectedResult || canTogglePreviewMode ? (
                 <div
                   className={cn(
                     "flex flex-wrap items-center justify-between gap-3 rounded-[20px] border px-3 py-2.5",
@@ -533,37 +592,21 @@ export function AgentWorkflowMaterialPicker({
                   )}
                 >
                   <div className="text-xs leading-5">
-                    系统已按权重自动选中 {selectedCount} 张 SKU 图，默认收起预览；需要检查或微调时再手动展开。
+                    {previewDisplayMode === "selected"
+                      ? `当前优先展示已选中的 ${selectedCount} 张图片，便于你快速确认结果。`
+                      : `当前展示全部 ${totalImageCount} 张候选图片，可继续手动微调选图。`}
                   </div>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setIsImagePreviewExpanded((current) => !current)}
-                    className={cn(
-                      "shrink-0",
-                      isDark &&
-                        "border-white/12 bg-white/[0.04] text-white/82 hover:bg-white/[0.10] hover:text-white"
-                    )}
-                  >
-                    {isImagePreviewExpanded ? (
-                      <>
-                        <ChevronUp className="mr-2 h-4 w-4" />
-                        收起预览
-                      </>
-                    ) : (
-                      <>
-                        <ChevronDown className="mr-2 h-4 w-4" />
-                        展开预览
-                      </>
-                    )}
-                  </Button>
+                  {canTogglePreviewMode ? (
+                    <div className="text-[11px] text-emerald-100/72">
+                      在上方切换“已选 / 全部”即可，无需再单独收起预览。
+                    </div>
+                  ) : null}
                 </div>
               ) : null}
 
-              {(!isAutoSelectedResult || isImagePreviewExpanded) ? (
+              {visibleImages.length > 0 ? (
                 <div className="grid grid-cols-2 gap-3 lg:grid-cols-3 xl:grid-cols-4">
-                  {result.images.map((image) => {
+                  {visibleImages.map((image) => {
                     const selected = selectedSet.has(image.id);
                     const isPlaceholder = !String(image.imageUrl || "").trim();
                     return (
@@ -648,7 +691,23 @@ export function AgentWorkflowMaterialPicker({
                     );
                   })}
                 </div>
-              ) : null}
+              ) : (
+                <div
+                  className={cn(
+                    "flex min-h-[132px] flex-col items-center justify-center rounded-[24px] border border-dashed px-4 text-center",
+                    isDark
+                      ? "border-white/12 bg-white/[0.03] text-white/55"
+                      : "border-border bg-background/60 text-muted-foreground"
+                  )}
+                >
+                  <div className="text-sm font-medium">
+                    当前没有可展示的已选图片
+                  </div>
+                  <div className="mt-2 text-xs">
+                    切换到“全部 {totalImageCount}”可查看全部候选图片并重新调整。
+                  </div>
+                </div>
+              )}
             </div>
           ) : null}
         </div>