diff --git a/frontend/src/components/TaskTree/TaskFlowView.tsx b/frontend/src/components/TaskTree/TaskFlowView.tsx
index e6bddc0..4c94722 100644
--- a/frontend/src/components/TaskTree/TaskFlowView.tsx
+++ b/frontend/src/components/TaskTree/TaskFlowView.tsx
@@ -2,6 +2,7 @@
  * 流转树双模式可视化 — 焦点模式 + 全景模式
  */
 import { memo, useMemo, useState, useEffect } from "react";
+import { Image } from "antd";
 import { FileText, X } from "lucide-react";
 import type { TaskResponse } from "../../types/api";
 import { TASK_STATUS } from "../../types/api";
@@ -288,7 +289,11 @@ export const TaskFlowView = memo(function TaskFlowView({ tasks, onAction, curren
                   <div className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${i === 0 ? "bg-blue-500" : "bg-gray-300"}`} />
                   <div className="flex-1 rounded bg-gray-50 px-3 py-2"><p className={`text-gray-400 ${size === "lg" ? "text-xs" : "text-[10px]"}`}>{fmtTime(r.created_at)}</p>
                     {r.remark && <p className={`mt-0.5 text-gray-700 ${size === "lg" ? "text-sm" : "text-xs"}`}>{r.remark}</p>}
-                    {(() => { const imgs = parseImages(r.images); if (!imgs.length) return null; return <div className="mt-1 flex gap-1 flex-wrap">{imgs.map((img, j) => <img key={j} src={imageUrl(img)} className={`rounded border object-cover cursor-pointer hover:opacity-80 transition-opacity ${size === "lg" ? "h-24 w-24" : "h-14 w-14"}`} onClick={() => window.open(imageUrl(img))} />)}</div>; })()}
+                    {(() => { const imgs = parseImages(r.images); if (!imgs.length) return null; return (
+                      <Image.PreviewGroup>
+                        <div className="mt-1 flex gap-1 flex-wrap">{imgs.map((img, j) => <Image key={j} src={imageUrl(img)} width={size === "lg" ? 96 : 56} height={size === "lg" ? 96 : 56} className="rounded border object-cover" style={{ objectFit: "cover" }} />)}</div>
+                      </Image.PreviewGroup>
+                    ); })()}
                   </div>
                 </div>
               ))}</div>}