feat(proxies): display specialTypes on mobile in title

This commit is contained in:
kunish 2024-10-13 00:33:11 +08:00
parent e7ef8b3735
commit 09736863df
No known key found for this signature in database
GPG Key ID: 67D3ACD788F3A7CD
2 changed files with 19 additions and 20 deletions

View File

@ -20,14 +20,21 @@ export const ProxyNodeCard = (props: {
useProxies() useProxies()
const proxyNode = createMemo(() => proxyNodeMap()[proxyName]) const proxyNode = createMemo(() => proxyNodeMap()[proxyName])
const specialType = () => const specialTypes = createMemo(() => {
filterSpecialProxyType(proxyNode()?.type) if (!filterSpecialProxyType(proxyNode()?.type)) return null
? proxyNode()?.xudp
? 'xudp' return `(${[
: proxyNode()?.udp proxyNode().xudp && 'xudp',
? 'udp' proxyNode().udp && 'udp',
: null proxyNode().tfo && 'TFO',
: null ]
.filter(Boolean)
.join(' / ')})`
})
const title = createMemo(() =>
[proxyName, specialTypes()].filter(Boolean).join(' - '),
)
return ( return (
<Tooltip <Tooltip
@ -44,7 +51,7 @@ export const ProxyNodeCard = (props: {
isSelected && 'bg-primary text-primary-content', isSelected && 'bg-primary text-primary-content',
onClick && 'cursor-pointer', onClick && 'cursor-pointer',
)} )}
title={proxyName} title={title()}
> >
<Tooltip.Trigger> <Tooltip.Trigger>
<div class="card-body space-y-1 p-2.5" onClick={onClick}> <div class="card-body space-y-1 p-2.5" onClick={onClick}>
@ -79,15 +86,8 @@ export const ProxyNodeCard = (props: {
<div class="flex flex-col items-center gap-2 rounded-box bg-neutral p-2.5 text-neutral-content"> <div class="flex flex-col items-center gap-2 rounded-box bg-neutral p-2.5 text-neutral-content">
<h2 class="text-lg font-bold">{proxyName}</h2> <h2 class="text-lg font-bold">{proxyName}</h2>
<div <div class="w-full text-xs text-neutral-content">
class={twMerge( {specialTypes()}
'w-full text-start text-xs',
isSelected ? 'text-info-content' : 'text-neutral-content',
)}
>
{[specialType(), proxyNode().tfo && 'TFO']
.filter(Boolean)
.join(' / ')}
</div> </div>
<ul class="timeline timeline-vertical timeline-compact timeline-snap-icon"> <ul class="timeline timeline-vertical timeline-compact timeline-snap-icon">

View File

@ -32,7 +32,6 @@ export const getLatencyClassName = (latency: LATENCY_QUALITY_MAP_HTTP) => {
} }
export const filterSpecialProxyType = (type = '') => { export const filterSpecialProxyType = (type = '') => {
const t = type.toLowerCase()
const conditions = [ const conditions = [
'selector', 'selector',
'direct', 'direct',
@ -43,7 +42,7 @@ export const filterSpecialProxyType = (type = '') => {
'relay', 'relay',
] ]
return !conditions.includes(t) return !conditions.includes(type.toLowerCase())
} }
export const sortProxiesByOrderingType = ( export const sortProxiesByOrderingType = (