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
This commit is contained in:
@@ -233,7 +233,7 @@ const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
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-1 min-w-0">
|
||||||
<div className="flex items-center gap-2 mb-1">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ const PromptListItem: React.FC<PromptListItemProps> = ({
|
|||||||
const enabled = prompt.enabled === true;
|
const enabled = prompt.enabled === true;
|
||||||
|
|
||||||
return (
|
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">
|
<div className="flex items-center gap-4 h-full">
|
||||||
{/* Toggle 开关 */}
|
{/* Toggle 开关 */}
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
|
|||||||
@@ -468,7 +468,7 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
|
|||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
footer={footer}
|
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="flex items-center justify-between">
|
||||||
<div className="text-sm text-muted-foreground">
|
<div className="text-sm text-muted-foreground">
|
||||||
@@ -550,20 +550,18 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
|
|||||||
<div
|
<div
|
||||||
key={entry.id}
|
key={entry.id}
|
||||||
onClick={() => handleSelect(entry.url)}
|
onClick={() => handleSelect(entry.url)}
|
||||||
className={`group flex cursor-pointer items-center justify-between px-3 py-2.5 rounded-lg border transition ${
|
className={`group flex cursor-pointer items-center justify-between px-3 py-2.5 rounded-lg border transition ${isSelected
|
||||||
isSelected
|
|
||||||
? "border-primary/70 bg-primary/5 shadow-sm"
|
? "border-primary/70 bg-primary/5 shadow-sm"
|
||||||
: "border-border-default bg-background hover:bg-muted"
|
: "border-border-default bg-background hover:bg-muted"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex min-w-0 flex-1 items-center gap-3">
|
<div className="flex min-w-0 flex-1 items-center gap-3">
|
||||||
{/* 选择指示器 */}
|
{/* 选择指示器 */}
|
||||||
<div
|
<div
|
||||||
className={`h-1.5 w-1.5 flex-shrink-0 rounded-full transition ${
|
className={`h-1.5 w-1.5 flex-shrink-0 rounded-full transition ${isSelected
|
||||||
isSelected
|
|
||||||
? "bg-blue-500 dark:bg-blue-400"
|
? "bg-blue-500 dark:bg-blue-400"
|
||||||
: "bg-gray-300 dark:bg-gray-700"
|
: "bg-gray-300 dark:bg-gray-700"
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 内容 */}
|
{/* 内容 */}
|
||||||
@@ -579,15 +577,14 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
|
|||||||
{latency !== null ? (
|
{latency !== null ? (
|
||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<div
|
<div
|
||||||
className={`font-mono text-sm font-medium ${
|
className={`font-mono text-sm font-medium ${latency < 300
|
||||||
latency < 300
|
|
||||||
? "text-emerald-600 dark:text-emerald-400"
|
? "text-emerald-600 dark:text-emerald-400"
|
||||||
: latency < 500
|
: latency < 500
|
||||||
? "text-yellow-600 dark:text-yellow-400"
|
? "text-yellow-600 dark:text-yellow-400"
|
||||||
: latency < 800
|
: latency < 800
|
||||||
? "text-orange-600 dark:text-orange-400"
|
? "text-orange-600 dark:text-orange-400"
|
||||||
: "text-red-600 dark:text-red-400"
|
: "text-red-600 dark:text-red-400"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{latency}ms
|
{latency}ms
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user