From 0a50700e4b3287ff92b646d7e8ba7cdc340fe776 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Tue, 22 Jul 2025 17:22:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96markdown=E8=A7=A3?=
 =?UTF-8?q?=E6=9E=90=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/desktop/src/components/ImageCard.tsx | 25 ++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/apps/desktop/src/components/ImageCard.tsx b/apps/desktop/src/components/ImageCard.tsx
index 048225b..443bffc 100644
--- a/apps/desktop/src/components/ImageCard.tsx
+++ b/apps/desktop/src/components/ImageCard.tsx
@@ -46,12 +46,13 @@ export const ImageCard: React.FC<ImageCardProps> = ({
   position,
   onClose,
   onDownload,
-  onViewLarge,
   className = ''
 }) => {
   const [imageLoaded, setImageLoaded] = useState(false);
   const [imageError, setImageError] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
+  const [expandedEnvironmentTags, setExpandedEnvironmentTags] = useState(false);
+  const [expandedCategories, setExpandedCategories] = useState(false);
 
   // 解析图片内容
   const imageData = source.content?.text || source.content;
@@ -112,7 +113,7 @@ export const ImageCard: React.FC<ImageCardProps> = ({
             <img
               src={imageUri}
               alt={description || title}
-              className={`w-full h-48 object-cover transition-all duration-300 ${
+              className={`w-full max-h-64 object-contain transition-all duration-300 ${
                 imageLoaded ? 'opacity-100' : 'opacity-0'
               } group-hover:scale-105`}
               onLoad={handleImageLoad}
@@ -161,7 +162,7 @@ export const ImageCard: React.FC<ImageCardProps> = ({
             )}
           </div>
         ) : (
-          <div className="h-48 flex items-center justify-center text-gray-400 bg-gray-100">
+          <div className="min-h-32 max-h-64 flex items-center justify-center text-gray-400 bg-gray-100">
             <div className="text-center">
               <AlertCircle className="w-8 h-8 mx-auto mb-2" />
               <p className="text-sm">图片无法加载</p>
@@ -185,7 +186,7 @@ export const ImageCard: React.FC<ImageCardProps> = ({
               <div className="flex items-start space-x-2">
                 <MapPin className="w-3 h-3 text-gray-400 mt-0.5 flex-shrink-0" />
                 <div className="flex flex-wrap gap-1 min-w-0">
-                  {environmentTags.slice(0, 2).map((tag: string, index: number) => (
+                  {(expandedEnvironmentTags ? environmentTags : environmentTags.slice(0, 2)).map((tag: string, index: number) => (
                     <span
                       key={index}
                       className="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-md font-medium"
@@ -194,7 +195,12 @@ export const ImageCard: React.FC<ImageCardProps> = ({
                     </span>
                   ))}
                   {environmentTags.length > 2 && (
-                    <span className="text-xs text-gray-500 py-1">+{environmentTags.length - 2}</span>
+                    <button
+                      onClick={() => setExpandedEnvironmentTags(!expandedEnvironmentTags)}
+                      className="text-xs text-gray-500 hover:text-gray-700 py-1 cursor-pointer transition-colors"
+                    >
+                      {expandedEnvironmentTags ? '收起' : `+${environmentTags.length - 2}`}
+                    </button>
                   )}
                 </div>
               </div>
@@ -205,7 +211,7 @@ export const ImageCard: React.FC<ImageCardProps> = ({
               <div className="flex items-start space-x-2">
                 <Shirt className="w-3 h-3 text-gray-400 mt-0.5 flex-shrink-0" />
                 <div className="flex flex-wrap gap-1 min-w-0">
-                  {categories.slice(0, 2).map((category: string, index: number) => (
+                  {(expandedCategories ? categories : categories.slice(0, 2)).map((category: string, index: number) => (
                     <span
                       key={index}
                       className="px-2 py-1 bg-pink-50 text-pink-700 text-xs rounded-md font-medium"
@@ -214,7 +220,12 @@ export const ImageCard: React.FC<ImageCardProps> = ({
                     </span>
                   ))}
                   {categories.length > 2 && (
-                    <span className="text-xs text-gray-500 py-1">+{categories.length - 2}</span>
+                    <button
+                      onClick={() => setExpandedCategories(!expandedCategories)}
+                      className="text-xs text-gray-500 hover:text-gray-700 py-1 cursor-pointer transition-colors"
+                    >
+                      {expandedCategories ? '收起' : `+${categories.length - 2}`}
+                    </button>
                   )}
                 </div>
               </div>