refactor: improve endpoint list UI consistency

- Show delete button for all endpoints on hover for uniform UI
- Change selected state to use blue theme matching main interface:
  * Blue border (border-blue-500) for selected items
  * Light blue background (bg-blue-50/dark:bg-blue-900/20)
  * Blue indicator dot (bg-blue-500/dark:bg-blue-400)
- Switch from compact list (space-y-px) to card-based layout (space-y-2)
- Add rounded corners to each endpoint item for better visual separation
This commit is contained in:
Jason
2025-10-06 21:30:11 +08:00
parent b4b176580e
commit 9932b92745

View File

@@ -387,8 +387,8 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
{/* 端点列表 */} {/* 端点列表 */}
{hasEndpoints ? ( {hasEndpoints ? (
<div className="space-y-px overflow-hidden rounded-md border border-gray-200 dark:border-gray-700"> <div className="space-y-2">
{sortedEntries.map((entry, index) => { {sortedEntries.map((entry) => {
const isSelected = normalizedSelected === entry.url; const isSelected = normalizedSelected === entry.url;
const latency = entry.latency; const latency = entry.latency;
@@ -396,18 +396,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 transition ${ className={`group flex cursor-pointer items-center justify-between px-3 py-2.5 rounded-lg border transition ${
isSelected isSelected
? "bg-gray-100 dark:bg-gray-800" ? "border-blue-500 bg-blue-50 dark:border-blue-500 dark:bg-blue-900/20"
: "bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-850" : "border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600 dark:hover:bg-gray-850"
} ${index > 0 ? "border-t border-gray-100 dark:border-gray-800" : ""}`} }`}
> >
<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-gray-900 dark:bg-gray-100" ? "bg-blue-500 dark:bg-blue-400"
: "bg-gray-300 dark:bg-gray-700" : "bg-gray-300 dark:bg-gray-700"
}`} }`}
/> />
@@ -436,7 +436,6 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
<div className="text-xs text-gray-400"></div> <div className="text-xs text-gray-400"></div>
)} )}
{entry.isCustom && (
<button <button
type="button" type="button"
onClick={(e) => { onClick={(e) => {
@@ -447,7 +446,6 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</button> </button>
)}
</div> </div>
</div> </div>
); );