From eefb764f72b9afcce0db2fd72c6102f446d20607 Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Sat, 22 Nov 2025 16:50:35 +0800
Subject: [PATCH] style: unify list item styles with semantic colors

Apply consistent styling to list items across components.
- Replace hardcoded colors with semantic tokens in MCP and Prompt list items
- Add glass effect container to EndpointSpeedTest panel
- Format code for better readability
---
 src/components/mcp/UnifiedMcpPanel.tsx          |  2 +-
 src/components/prompts/PromptListItem.tsx       |  2 +-
 .../providers/forms/EndpointSpeedTest.tsx       | 17 +++++++----------
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/mcp/UnifiedMcpPanel.tsx b/src/components/mcp/UnifiedMcpPanel.tsx
index 4d5f3f8..0e5448c 100644
--- a/src/components/mcp/UnifiedMcpPanel.tsx
+++ b/src/components/mcp/UnifiedMcpPanel.tsx
@@ -233,7 +233,7 @@ const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
   };
 
   return (
-    <div className="group relative flex items-center gap-4 p-4 rounded-xl border border-white/10 bg-gray-900/40 hover:bg-gray-900/60 transition-all duration-300">
+    <div className="group relative flex items-center gap-4 p-4 rounded-xl border border-border-default bg-muted/50 hover:bg-muted hover:border-border-default/80 hover:shadow-sm transition-all duration-300">
       {/* 左侧：服务器信息 */}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2 mb-1">
diff --git a/src/components/prompts/PromptListItem.tsx b/src/components/prompts/PromptListItem.tsx
index b3ff132..1ba298b 100644
--- a/src/components/prompts/PromptListItem.tsx
+++ b/src/components/prompts/PromptListItem.tsx
@@ -25,7 +25,7 @@ const PromptListItem: React.FC<PromptListItemProps> = ({
   const enabled = prompt.enabled === true;
 
   return (
-    <div className="group relative h-16 rounded-xl border border-white/10 bg-gray-900/40 p-4 transition-all duration-300 hover:bg-gray-900/60 hover:border-white/20 hover:shadow-sm">
+    <div className="group relative h-16 rounded-xl border border-border-default bg-muted/50 p-4 transition-all duration-300 hover:bg-muted hover:border-border-default/80 hover:shadow-sm">
       <div className="flex items-center gap-4 h-full">
         {/* Toggle 开关 */}
         <div className="flex-shrink-0">
diff --git a/src/components/providers/forms/EndpointSpeedTest.tsx b/src/components/providers/forms/EndpointSpeedTest.tsx
index 6a0873e..8966c39 100644
--- a/src/components/providers/forms/EndpointSpeedTest.tsx
+++ b/src/components/providers/forms/EndpointSpeedTest.tsx
@@ -468,7 +468,7 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
       onClose={onClose}
       footer={footer}
     >
-      <div className="flex flex-col gap-4">
+      <div className="glass rounded-xl p-6 border border-white/10 flex flex-col gap-6">
         {/* 测速控制栏 */}
         <div className="flex items-center justify-between">
           <div className="text-sm text-muted-foreground">
@@ -550,20 +550,18 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
                 <div
                   key={entry.id}
                   onClick={() => handleSelect(entry.url)}
-                  className={`group flex cursor-pointer items-center justify-between px-3 py-2.5 rounded-lg border transition ${
-                    isSelected
+                  className={`group flex cursor-pointer items-center justify-between px-3 py-2.5 rounded-lg border transition ${isSelected
                       ? "border-primary/70 bg-primary/5 shadow-sm"
                       : "border-border-default bg-background hover:bg-muted"
-                  }`}
+                    }`}
                 >
                   <div className="flex min-w-0 flex-1 items-center gap-3">
                     {/* 选择指示器 */}
                     <div
-                      className={`h-1.5 w-1.5 flex-shrink-0 rounded-full transition ${
-                        isSelected
+                      className={`h-1.5 w-1.5 flex-shrink-0 rounded-full transition ${isSelected
                           ? "bg-blue-500 dark:bg-blue-400"
                           : "bg-gray-300 dark:bg-gray-700"
-                      }`}
+                        }`}
                     />
 
                     {/* 内容 */}
@@ -579,15 +577,14 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
                     {latency !== null ? (
                       <div className="text-right">
                         <div
-                          className={`font-mono text-sm font-medium ${
-                            latency < 300
+                          className={`font-mono text-sm font-medium ${latency < 300
                               ? "text-emerald-600 dark:text-emerald-400"
                               : latency < 500
                                 ? "text-yellow-600 dark:text-yellow-400"
                                 : latency < 800
                                   ? "text-orange-600 dark:text-orange-400"
                                   : "text-red-600 dark:text-red-400"
-                          }`}
+                            }`}
                         >
                           {latency}ms
                         </div>