From 8a7429f1dfdd8a99c67ea943825b975a4efc8bee Mon Sep 17 00:00:00 2001
From: ShiYu <im@shiyu.dev>
Date: Tue, 17 Jun 2025 01:00:20 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E5=92=8C=E5=9B=BE=E7=89=87=E5=B1=95=E7=A4=BA=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80=E5=92=8C=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/src/pages/explore/Index.tsx | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/Web/src/pages/explore/Index.tsx b/Web/src/pages/explore/Index.tsx
index 8bcb287..7c616a2 100644
--- a/Web/src/pages/explore/Index.tsx
+++ b/Web/src/pages/explore/Index.tsx
@@ -190,20 +190,22 @@ const FaceExplore: React.FC = () => {
       className="cluster-card"
       cover={
         <div style={{ 
-          height: 200, 
+          height: 180, 
           display: 'flex', 
           alignItems: 'center', 
           justifyContent: 'center',
-          backgroundColor: '#f8f9fa'
+          backgroundColor: '#f8f9fa',
+          overflow: 'hidden'
         }}>
           {cluster.thumbnailPath ? (
             <Image
               src={cluster.thumbnailPath}
               alt={cluster.name}
+              width="100%"
+              height={180}
               style={{ 
-                maxWidth: '100%', 
-                maxHeight: '100%', 
-                objectFit: 'cover' 
+                objectFit: 'cover',
+                display: 'block'
               }}
               preview={false}
             />
@@ -446,10 +448,11 @@ const FaceExplore: React.FC = () => {
           {clusterPictures.length > 0 ? (
             <div style={{ 
               display: 'grid', 
-              gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', 
-              gap: 16,
+              gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))', 
+              gap: 12,
               maxHeight: 500,
-              overflowY: 'auto'
+              overflowY: 'auto',
+              padding: '8px'
             }}>
               {clusterPictures.map(picture => (
                 <div key={picture.id} style={{ textAlign: 'center' }}>
@@ -459,17 +462,21 @@ const FaceExplore: React.FC = () => {
                     src={picture.thumbnailPath || picture.path}
                     style={{ 
                       objectFit: 'cover', 
-                      borderRadius: 8,
+                      borderRadius: 6,
                       border: '1px solid #f0f0f0'
                     }}
+                    preview={{
+                      src: picture.path
+                    }}
                   />
                   <div style={{ 
-                    fontSize: '12px', 
+                    fontSize: '11px', 
                     color: '#666', 
                     marginTop: 4,
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap'
+                    whiteSpace: 'nowrap',
+                    maxWidth: '100px'
                   }}>
                     {picture.name || `图片${picture.id}`}
                   </div>