"use client"; import { useState } from "react"; import { getImageUrl } from "@/lib/api"; import { useApp } from "@/lib/app-context"; import { AnnotationCanvas } from "./annotation-canvas"; import type { Annotation, AnnotationData } from "@/lib/types"; interface ImageDetailPanelProps { onAnnotationComplete?: (data: AnnotationData) => void; } export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps) { const { detailImage, setDetailImage, toggleFavorite, tags, deleteAssetById } = useApp(); const [scale, setScale] = useState(1); const [showAnnotate, setShowAnnotate] = useState(false); if (!detailImage) return null; const tagMap = new Map(tags.map((t) => [t.id, t])); const handleDownload = async () => { try { const fullUrl = getImageUrl(detailImage.url); const response = await fetch(fullUrl); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `epeekit-${Date.now()}.png`; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(url); } catch { alert("下载失败"); } }; const handleCopyPrompt = () => { navigator.clipboard.writeText(detailImage.prompt); }; const handleAnnotationComplete = (annotations: Annotation[], snapshot: string) => { setShowAnnotate(false); const data: AnnotationData = { imageUrl: detailImage.url, annotations, snapshot, }; onAnnotationComplete?.(data); }; if (showAnnotate) { return ( ); } return ( ); }