From 88f02cbdcf973dc544d3a4dd951c230b940d9bf0 Mon Sep 17 00:00:00 2001
From: duxingchen <duxingchen@iris-rs.cn>
Date: Fri, 28 Aug 2026 11:33:46 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E7=89=87):=20=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=9B=BE=E7=89=87=E4=BB=8E=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E6=94=B9=E4=B8=BA=E7=82=B9=E5=87=BB=E6=94=BE?=
 =?UTF-8?q?=E5=A4=A7=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TaskFlowView 记录图片 window.open 跳转 → antd Image.PreviewGroup 点击放大
- 与人员看板/效能分析的图片查看模式全局统一
---
 frontend/src/components/TaskTree/TaskFlowView.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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>}