lunanting/lovart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复预览弹窗中标注点相对于图片实际区域的定位

Browse Source
This commit is contained in:
Your Name 2026-02-02 13:16:47 +08:00
parent c74d2b7d44
commit 5f88eb44b3
1 changed files with 44 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
components/canvas/CanvasChatPanel.tsx
View File

@ -1506,50 +1506,52 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
setTagPreview(null); setTagPreview(null);
}} }}
> >
{/* 图片全貌 */} {/* 图片全貌 - 使用 inline-block + 居中，让标注点相对于图片本身定位 */}
<div className="relative"> <div className="flex justify-center bg-zinc-100 dark:bg-zinc-800">
<img <div className="relative inline-block">
src={tagPreview.url} <img
alt={tagPreview.name} src={tagPreview.url}
className="w-full h-auto max-h-[180px] object-contain bg-zinc-100 dark:bg-zinc-800" alt={tagPreview.name}
/> className="block max-w-full max-h-[180px] h-auto"
{/* 如果是物品标签，显示标注位置 */} />
{tagPreview.pickedObject && ( {/* 如果是物品标签，显示标注位置 */}
<> {tagPreview.pickedObject && (
{/* 标注点 */} <>
<div {/* 标注点 */}
className="absolute pointer-events-none" <div
style={{ className="absolute pointer-events-none"
left: `${tagPreview.pickedObject.clickX * 100}%`, style={{
top: `${tagPreview.pickedObject.clickY * 100}%`, left: `${tagPreview.pickedObject.clickX * 100}%`,
transform: 'translate(-50%, -50%)', top: `${tagPreview.pickedObject.clickY * 100}%`,
}} transform: 'translate(-50%, -50%)',
> }}
{/* 序号标记 */} >
<div className="relative flex items-center justify-center"> {/* 序号标记 */}
{/* 脉冲动画背景 */} <div className="relative flex items-center justify-center">
<div className="absolute w-6 h-6 rounded-full bg-blue-500/30 animate-ping" /> {/* 脉冲动画背景 */}
{/* 主标记点 */} <div className="absolute w-6 h-6 rounded-full bg-blue-500/30 animate-ping" />
<div className="relative w-5 h-5 rounded-full bg-blue-500 border-2 border-white shadow-lg flex items-center justify-center"> {/* 主标记点 */}
<svg className="w-2.5 h-2.5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"> <div className="relative w-5 h-5 rounded-full bg-blue-500 border-2 border-white shadow-lg flex items-center justify-center">
<path d="M12 2v20M2 12h20" /> <svg className="w-2.5 h-2.5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
</svg> <path d="M12 2v20M2 12h20" />
</svg>
</div>
</div> </div>
</div> </div>
</div> {/* 物品名称标签 */}
{/* 物品名称标签 */} <div
<div className="absolute bg-blue-500 text-white text-xs px-1.5 py-0.5 rounded shadow-lg whitespace-nowrap"
className="absolute bg-blue-500 text-white text-xs px-1.5 py-0.5 rounded shadow-lg whitespace-nowrap" style={{
style={{ left: `${tagPreview.pickedObject.clickX * 100}%`,
left: `${tagPreview.pickedObject.clickX * 100}%`, top: `${tagPreview.pickedObject.clickY * 100}%`,
top: `${tagPreview.pickedObject.clickY * 100}%`, transform: 'translate(-50%, -140%)',
transform: 'translate(-50%, -140%)', }}
}} >
> {tagPreview.pickedObject.objectName}
{tagPreview.pickedObject.objectName} </div>
</div> </>
</> )}
)} </div>
</div> </div>
{/* 底部信息 */} {/* 底部信息 */}
<div className="px-3 py-2 bg-zinc-50 dark:bg-zinc-800/50 border-t border-border/30"> <div className="px-3 py-2 bg-zinc-50 dark:bg-zinc-800/50 border-t border-border/30">