lunanting/ai-chatbot
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);
}}
>
{/* 图片全貌 */}
<div className="relative">
<img
src={tagPreview.url}
alt={tagPreview.name}
className="w-full h-auto max-h-[180px] object-contain bg-zinc-100 dark:bg-zinc-800"
/>
{/* 如果是物品标签，显示标注位置 */}
{tagPreview.pickedObject && (
<>
{/* 标注点 */}
<div
className="absolute pointer-events-none"
style={{
left: `${tagPreview.pickedObject.clickX * 100}%`,
top: `${tagPreview.pickedObject.clickY * 100}%`,
transform: 'translate(-50%, -50%)',
}}
>
{/* 序号标记 */}
<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="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">
<path d="M12 2v20M2 12h20" />
</svg>
{/* 图片全貌 - 使用 inline-block + 居中，让标注点相对于图片本身定位 */}
<div className="flex justify-center bg-zinc-100 dark:bg-zinc-800">
<div className="relative inline-block">
<img
src={tagPreview.url}
alt={tagPreview.name}
className="block max-w-full max-h-[180px] h-auto"
/>
{/* 如果是物品标签，显示标注位置 */}
{tagPreview.pickedObject && (
<>
{/* 标注点 */}
<div
className="absolute pointer-events-none"
style={{
left: `${tagPreview.pickedObject.clickX * 100}%`,
top: `${tagPreview.pickedObject.clickY * 100}%`,
transform: 'translate(-50%, -50%)',
}}
>
{/* 序号标记 */}
<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="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">
<path d="M12 2v20M2 12h20" />
</svg>
</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"
style={{
left: `${tagPreview.pickedObject.clickX * 100}%`,
top: `${tagPreview.pickedObject.clickY * 100}%`,
transform: 'translate(-50%, -140%)',
}}
>
{tagPreview.pickedObject.objectName}
</div>
</>
)}
{/* 物品名称标签 */}
<div
className="absolute bg-blue-500 text-white text-xs px-1.5 py-0.5 rounded shadow-lg whitespace-nowrap"
style={{
left: `${tagPreview.pickedObject.clickX * 100}%`,
top: `${tagPreview.pickedObject.clickY * 100}%`,
transform: 'translate(-50%, -140%)',
}}
>
{tagPreview.pickedObject.objectName}
</div>
</>
)}
</div>
</div>
{/* 底部信息 */}
<div className="px-3 py-2 bg-zinc-50 dark:bg-zinc-800/50 border-t border-border/30">