优化 调整了历史记录预览窗口的实现

src/App.tsx

@@ -24,6 +24,8 @@ function AppContent() {
   
   const { showPromptPanel, setShowPromptPanel, setShowHistory } = useAppStore();
   const [hoveredImage, setHoveredImage] = useState<{url: string, title: string, width?: number, height?: number} | null>(null);
+  const [previewPosition, setPreviewPosition] = useState<{x: number, y: number} | null>(null);
+  const [isPreviewVisible, setIsPreviewVisible] = useState(false);
   
   // 在挂载时初始化IndexedDB并清理base64数据
   useEffect(() => {
@@ -73,6 +75,19 @@ function AppContent() {
     return () => clearInterval(interval);
   }, []);
 
+  // 控制预览窗口的显示和隐藏动画
+  useEffect(() => {
+    if (hoveredImage) {
+      // 延迟一小段时间后设置为可见，以触发动画
+      const timer = setTimeout(() => {
+        setIsPreviewVisible(true);
+      }, 10);
+      return () => clearTimeout(timer);
+    } else {
+      setIsPreviewVisible(false);
+    }
+  }, [hoveredImage]);
+
   return (
     <div className="h-screen bg-gray-50 text-gray-900 flex flex-col font-sans">
       <div className="card card-lg rounded-none">
@@ -92,7 +107,7 @@ function AppContent() {
         </div>
         <div className="flex-shrink-0">
           <div className="h-full card card-lg">
-            <HistoryPanel setHoveredImage={setHoveredImage} />
+            <HistoryPanel setHoveredImage={setHoveredImage} setPreviewPosition={setPreviewPosition} />
           </div>
         </div>
       </div>
@@ -102,7 +117,14 @@ function AppContent() {
         <div 
           className="fixed inset-0 z-[99999] flex items-center justify-center pointer-events-none"
         >
-          <div className="bg-white rounded-xl shadow-2xl border border-gray-300 overflow-hidden max-w-2xl max-h-[80vh] flex flex-col">
+          <div 
+            className="bg-white rounded-xl shadow-2xl border border-gray-300 overflow-hidden max-w-2xl max-h-[80vh] flex flex-col transition-all duration-200 ease-out"
+            style={{
+              transform: isPreviewVisible ? 'scale(1)' : 'scale(0.8)',
+              opacity: isPreviewVisible ? 1 : 0,
+              transformOrigin: previewPosition ? `${previewPosition.x}px ${previewPosition.y}px` : 'center'
+            }}
+          >
             <div className="bg-gray-900 text-white text-sm p-3 truncate font-medium">
               {hoveredImage.title}
             </div>