From 608e74cffd27247f9fa8e616f9abc44ae85c7495 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 18:39:57 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=86=E7=B1=BB=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E5=88=B0=E5=8D=A1=E7=89=87=E6=82=AC=E5=81=9C?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 卡片悬停时顶部条使用分类颜色
- 卡片阴影和图标也使用分类颜色
- 使用CSS变量实现动态颜色
---
 frontend/src/App.jsx   |  8 +++++++-
 frontend/src/index.css | 15 +++++++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8014714..a7cf5e4 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -413,8 +413,14 @@ function App() {
 }
 
 function SiteCard({ site, onClick, onToggleFav, onEdit, onDelete }) {
+  const categoryColor = site.category?.color || '#667eea'
   return (
-    <div className="site-card" onClick={onClick}>
+    <div 
+      className="site-card" 
+      onClick={onClick}
+      data-category-color={categoryColor}
+      style={{ '--category-color': categoryColor }}
+    >
       {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={site.icon || 'globe'} size={26}/>}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0daf118..2395b78 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -305,14 +305,14 @@ body {
   left: 0;
   right: 0;
   height: 4px;
-  background: linear-gradient(90deg, #667eea, #764ba2);
+  background: var(--category-color, #667eea);
   opacity: 0;
   transition: opacity 0.3s ease;
 }
 
 .site-card:hover {
   transform: translateY(-6px);
-  box-shadow: 0 16px 50px rgba(102, 126, 234, 0.25);
+  box-shadow: 0 16px 50px color-mix(in srgb, var(--category-color, #667eea) 30%, transparent);
 }
 
 .site-card:hover::before {
@@ -323,6 +323,17 @@ body {
   opacity: 1;
 }
 
+.site-card:hover .card-icon {
+  background: linear-gradient(135deg, 
+    color-mix(in srgb, var(--category-color, #667eea) 15%, transparent),
+    color-mix(in srgb, var(--category-color, #667eea) 10%, transparent)
+  );
+}
+
+.site-card:hover .card-icon svg {
+  color: var(--category-color, #667eea);
+}
+
 .card-bottom-actions {
   position: absolute;
   bottom: 12px;