fix(图片): 记录弹窗图片从页面跳转改为点击放大预览
- TaskFlowView 记录图片 window.open 跳转 → antd Image.PreviewGroup 点击放大 - 与人员看板/效能分析的图片查看模式全局统一
This commit is contained in:
@ -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>}
|
||||
|
||||
Reference in New Issue
Block a user