From 27c725a8d4235878aa99065986e03227e0c862c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=BE=99?= <xiaolong@pags.cn>
Date: Mon, 6 Apr 2026 15:01:06 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 分类标签移至右上角
- 卡片最小高度调整
- 网格宽度调整
- 文字右侧留出空间避免被按钮遮挡
---
 frontend/src/App.jsx   |  2 +-
 frontend/src/index.css | 21 +++++++++++----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e0a2da3..4ffdfe2 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -279,12 +279,12 @@ function SiteCard({ site, onClick, onToggleFav, onEdit, onDelete }) {
 
   return (
     <div className="site-card" onClick={handleCardClick}>
+      {site.category && <span className="card-category">{site.category.name}</span>}
       <div className="card-icon">
         {site.icon && site.icon.startsWith('http') ? <img src={site.icon} alt=""/> : <Icon name="globe" size={26}/>}
       </div>
       <div className="card-name">{site.name}</div>
       {site.description && <div className="card-desc">{site.description}</div>}
-      {site.category && <span className="card-category">{site.category.name}</span>}
       <div className="card-bottom-actions">
         <button className={`card-favorite ${site.is_favorite ? 'active' : ''}`} onClick={handleFav} title="收藏">
           <Icon name="star" size={15}/>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f534499..516a589 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -231,7 +231,7 @@ body {
 /* 网站网格 */
 .website-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 20px;
 }
 
@@ -240,7 +240,8 @@ body {
   position: relative;
   background: white;
   border-radius: 16px;
-  padding: 24px 20px;
+  padding: 20px;
+  min-height: 140px;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
@@ -281,6 +282,8 @@ body {
   gap: 6px;
   justify-content: flex-end;
   align-items: center;
+  opacity: 0;
+  transition: opacity 0.2s ease;
 }
 
 .site-card:hover .external-icon {
@@ -322,24 +325,22 @@ body {
   font-weight: 600;
   color: #1a1a1a;
   margin-bottom: 4px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  padding-right: 80px;
 }
 
 .card-desc {
   font-size: 12px;
   color: #888;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  padding-right: 80px;
 }
 
 .card-category {
+  position: absolute;
+  top: 12px;
+  right: 12px;
   display: inline-block;
-  margin-top: 12px;
   padding: 4px 10px;
-  background: linear-gradient(135deg, #667eea10, #764ba210);
+  background: linear-gradient(135deg, #667eea20, #764ba220);
   border-radius: 6px;
   font-size: 11px;
   font-weight: 500;