fix(proxy): proxy preview dots layout issue

This commit is contained in:
kunish 2023-09-25 22:39:36 +08:00
parent c4bfde288c
commit 4b7f4c899f
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
2 changed files with 20 additions and 5 deletions

View File

@ -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"

View File

@ -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>