From a5e256330a6730a19e61ef291431888d3edafa54 Mon Sep 17 00:00:00 2001
From: duxingchen <duxingchen@iris-rs.cn>
Date: Wed, 12 Aug 2026 16:08:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20parseImages=E6=94=AF=E6=8C=81=E6=95=B0?=
 =?UTF-8?q?=E7=BB=84=E8=BE=93=E5=85=A5=20=E2=80=94=20Pydantic=E5=BA=8F?=
 =?UTF-8?q?=E5=88=97=E5=8C=96=E5=90=8Eimages=E5=B7=B2=E6=98=AF=E6=95=B0?=
 =?UTF-8?q?=E7=BB=84=E9=9D=9E=E5=AD=97=E7=AC=A6=E4=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TaskTree/TaskFlowView.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/TaskTree/TaskFlowView.tsx b/frontend/src/components/TaskTree/TaskFlowView.tsx
index 3813d18..65e11c3 100644
--- a/frontend/src/components/TaskTree/TaskFlowView.tsx
+++ b/frontend/src/components/TaskTree/TaskFlowView.tsx
@@ -22,7 +22,12 @@ function ArrowRight({ color = "#9ca3af" }: { color?: string }) {
 function ArrowLeft({ color = "#9ca3af" }: { color?: string }) {
   return <svg className="h-3 w-3 shrink-0" viewBox="0 0 8 8"><polygon points="8,0 0,4 8,8" fill={color} /></svg>;
 }
-function parseImages(s: string | null | undefined): string[] { if (!s) return []; try { return JSON.parse(s); } catch { return []; } }
+function parseImages(s: any): string[] {
+  if (!s) return [];
+  if (Array.isArray(s)) return s;                      // Pydantic 序列化后的数组
+  if (typeof s === "string") { try { return JSON.parse(s); } catch { return []; } }
+  return [];
+}
 function imageUrl(u: string) { if (!u) return ""; return u.startsWith("http") ? u : import.meta.env.VITE_API_BASE_URL + (u.startsWith("/") ? u : "/" + u); }
 
 const ALL_TASKS = new Set<TaskResponse>();
@@ -218,7 +223,7 @@ 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-[10px] text-gray-400">{fmtTime(r.created_at)}</p>
                     {(r.note || r.remark) && <p className="mt-0.5 text-xs text-gray-700">{r.note || r.remark}</p>}
-                    {(() => { const imgs = parseImages((r as any).images); if (!imgs.length) return null; return <div className="mt-1 flex gap-1">{imgs.map((img, j) => <img key={j} src={imageUrl(img)} className="h-12 w-12 rounded border object-cover cursor-pointer" onClick={() => window.open(imageUrl(img))} />)}</div>; })()}
+                    {(() => { 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="h-14 w-14 rounded border object-cover cursor-pointer hover:opacity-80 transition-opacity" onClick={() => window.open(imageUrl(img))} />)}</div>; })()}
                   </div>
                 </div>
               ))}</div>}