style: format template literals for better readability

Improve code formatting for conditional className expressions.
- Break long template literals across multiple lines
- Maintain consistent formatting in MCP form and endpoint test components
This commit is contained in:
YoVinchen
2025-11-22 17:22:36 +08:00
parent eefb764f72
commit cf57fbed7b
2 changed files with 15 additions and 10 deletions

View File

@@ -442,10 +442,11 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
<button <button
type="button" type="button"
onClick={applyCustom} onClick={applyCustom}
className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${selectedPreset === -1 className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
selectedPreset === -1
? "bg-emerald-500 text-white dark:bg-emerald-600" ? "bg-emerald-500 text-white dark:bg-emerald-600"
: "bg-accent text-muted-foreground hover:bg-accent/80" : "bg-accent text-muted-foreground hover:bg-accent/80"
}`} }`}
> >
{t("presetSelector.custom")} {t("presetSelector.custom")}
</button> </button>
@@ -456,10 +457,11 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
key={preset.id} key={preset.id}
type="button" type="button"
onClick={() => applyPreset(idx)} onClick={() => applyPreset(idx)}
className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${selectedPreset === idx className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
selectedPreset === idx
? "bg-emerald-500 text-white dark:bg-emerald-600" ? "bg-emerald-500 text-white dark:bg-emerald-600"
: "bg-accent text-muted-foreground hover:bg-accent/80" : "bg-accent text-muted-foreground hover:bg-accent/80"
}`} }`}
title={t(descriptionKey)} title={t(descriptionKey)}
> >
{preset.id} {preset.id}

View File

@@ -550,18 +550,20 @@ 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 ${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-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 ${isSelected className={`h-1.5 w-1.5 flex-shrink-0 rounded-full transition ${
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"
}`} }`}
/> />
{/* 内容 */} {/* 内容 */}
@@ -577,14 +579,15 @@ 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 ${latency < 300 className={`font-mono text-sm font-medium ${
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>