feat(proxies): update layout, disable twemoji font by default

This commit is contained in:
kunish 2024-10-11 22:29:36 +08:00
parent b5c5b286f1
commit 3d8fa080c3
No known key found for this signature in database
GPG Key ID: 67D3ACD788F3A7CD
3 changed files with 17 additions and 20 deletions

View File

@ -6,17 +6,15 @@ export const Latency = (props: { name?: string; class?: string }) => {
const [t] = useI18n() const [t] = useI18n()
const { getLatencyByName } = useProxies() const { getLatencyByName } = useProxies()
const [textClassName, setTextClassName] = createSignal('') const [textClassName, setTextClassName] = createSignal('')
const latency = createMemo(() => { const latency = createMemo(() => getLatencyByName(props.name || ''))
return getLatencyByName(props.name || '')
})
createEffect(() => { createEffect(() => {
setTextClassName('text-success')
if (latency() > latencyQualityMap().HIGH) { if (latency() > latencyQualityMap().HIGH) {
setTextClassName('text-error') setTextClassName('text-error')
} else if (latency() > latencyQualityMap().MEDIUM) { } else if (latency() > latencyQualityMap().MEDIUM) {
setTextClassName('text-warning') setTextClassName('text-warning')
} else {
setTextClassName('text-success')
} }
}) })

View File

@ -41,24 +41,23 @@ export const ProxyNodeCard = (props: {
data-tip={proxyName} data-tip={proxyName}
onClick={onClick} onClick={onClick}
> >
<div class="card-body"> <div class="card-body relative">
<div class="card-title flex items-center justify-between gap-2"> <div class="badge badge-secondary badge-sm absolute bottom-0 left-1/2 -translate-x-1/2 font-bold uppercase">
<span class="line-clamp-1 text-start text-sm">{proxyName}</span>
<div class="badge badge-primary badge-sm font-bold uppercase">
{formatProxyType(proxyNode()?.type)} {formatProxyType(proxyNode()?.type)}
</div> </div>
<div class="card-title flex items-center justify-between gap-2">
<span class="line-clamp-1 text-start text-sm">{proxyName}</span>
</div> </div>
<div class="flex flex-wrap items-center gap-2"> <span
<Show when={specialType()}> class={twMerge(
<div class="badge badge-secondary badge-sm">{specialType()}</div> 'text-start text-xs',
</Show> isSelected ? 'text-info-content' : 'text-neutral-content',
)}
<Show when={supportIPv6()}> >
<div class="badge badge-accent badge-sm">IPv6</div> {[specialType(), supportIPv6() && 'IPv6'].filter(Boolean).join(' / ')}
</Show> </span>
</div>
<div class="card-actions items-center justify-end"> <div class="card-actions items-center justify-end">
<Latency <Latency

View File

@ -67,7 +67,7 @@ export const [autoCloseConns, setAutoCloseConns] = makePersisted(
{ name: 'autoCloseConns', storage: localStorage }, { name: 'autoCloseConns', storage: localStorage },
) )
export const useTwemojiDefault = true export const useTwemojiDefault = false
export const [useTwemoji, setUseTwemoji] = makePersisted( export const [useTwemoji, setUseTwemoji] = makePersisted(
createSignal(useTwemojiDefault), createSignal(useTwemojiDefault),