mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
fix(proxy): proxy preview dots layout issue
This commit is contained in:
parent
c4bfde288c
commit
4b7f4c899f
@ -41,7 +41,7 @@ export const ProxyPreviewBar = (props: {
|
|||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex h-6 w-full items-center gap-2">
|
<div class="flex items-center gap-2 py-2">
|
||||||
<div class="flex flex-1 overflow-hidden rounded-2xl">
|
<div class="flex flex-1 overflow-hidden rounded-2xl">
|
||||||
<div
|
<div
|
||||||
class="h-2 bg-success"
|
class="h-2 bg-success"
|
||||||
|
@ -3,7 +3,11 @@ import { twMerge } from 'tailwind-merge'
|
|||||||
import { Latency } from '~/components'
|
import { Latency } from '~/components'
|
||||||
import { latencyQualityMap, useProxies } from '~/signals'
|
import { latencyQualityMap, useProxies } from '~/signals'
|
||||||
|
|
||||||
const LatencyDots = (props: { latency?: number; selected: boolean }) => {
|
const LatencyDots = (props: {
|
||||||
|
name: string
|
||||||
|
latency?: number
|
||||||
|
selected: boolean
|
||||||
|
}) => {
|
||||||
let dotClassName = props.selected
|
let dotClassName = props.selected
|
||||||
? 'bg-white border-4 border-success'
|
? 'bg-white border-4 border-success'
|
||||||
: 'bg-success'
|
: 'bg-success'
|
||||||
@ -25,7 +29,12 @@ const LatencyDots = (props: { latency?: number; selected: boolean }) => {
|
|||||||
: 'bg-warning'
|
: 'bg-warning'
|
||||||
}
|
}
|
||||||
|
|
||||||
return <div class={twMerge('h-4 w-4 rounded-full', dotClassName)} />
|
return (
|
||||||
|
<div
|
||||||
|
class={twMerge('h-4 w-4 rounded-full', dotClassName)}
|
||||||
|
title={props.name}
|
||||||
|
/>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ProxyPreviewDots = (props: {
|
export const ProxyPreviewDots = (props: {
|
||||||
@ -35,7 +44,7 @@ export const ProxyPreviewDots = (props: {
|
|||||||
const { latencyMap } = useProxies()
|
const { latencyMap } = useProxies()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex h-6 items-center gap-2">
|
<div class="flex items-center gap-2 py-2">
|
||||||
<div class="flex flex-1 flex-wrap items-center gap-1">
|
<div class="flex flex-1 flex-wrap items-center gap-1">
|
||||||
<For
|
<For
|
||||||
each={props.proxyNameList.map((name): [string, number] => [
|
each={props.proxyNameList.map((name): [string, number] => [
|
||||||
@ -46,7 +55,13 @@ export const ProxyPreviewDots = (props: {
|
|||||||
{([name, latency]) => {
|
{([name, latency]) => {
|
||||||
const isSelected = props.now === name
|
const isSelected = props.now === name
|
||||||
|
|
||||||
return <LatencyDots latency={latency} selected={isSelected} />
|
return (
|
||||||
|
<LatencyDots
|
||||||
|
name={name}
|
||||||
|
latency={latency}
|
||||||
|
selected={isSelected}
|
||||||
|
/>
|
||||||
|
)
|
||||||
}}
|
}}
|
||||||
</For>
|
</For>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user