feat: render protocl and udp

This commit is contained in:
Zephyruso 2023-08-30 23:54:49 +08:00
parent 6db7ceddac
commit 44df379fd6
4 changed files with 45 additions and 23 deletions

View File

@ -39,7 +39,7 @@ const Collapse: ParentComponent<Props> = (props) => {
<div
class={twMerge(
getCollapseContentClassName(),
'collapse-content grid grid-cols-1 gap-2 transition-opacity duration-1000 sm:grid-cols-3 lg:grid-cols-5',
'collapse-content grid grid-cols-1 gap-2 overflow-hidden transition-opacity duration-1000 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
)}
>
{content}

View File

@ -1,3 +1,4 @@
import { createMemo } from 'solid-js'
import { twMerge } from 'tailwind-merge'
import { useProxies } from '~/signals/proxies'
@ -7,17 +8,24 @@ export default (props: {
onClick?: () => void
}) => {
const { proxyName, isSelected, onClick } = props
const { delayMap } = useProxies()
const { delayMap, proxyNodeMap } = useProxies()
const proxyNode = createMemo(() => proxyNodeMap()[proxyName])
const Delay = (proxyname: string) => {
const delay = delayMap()[proxyname]
let textClassName = 'text-green-500'
if (typeof delay !== 'number' || delay === 0) {
return ''
}
return <span>{delay}ms</span>
if (delay > 500) {
textClassName = 'text-red-500'
} else if (delay > 200) {
textClassName = 'text-yellow-500'
}
return <span class={textClassName}>{delay}ms</span>
}
console.log(proxyName)
return (
<div
@ -26,13 +34,19 @@ export default (props: {
? 'border-primary bg-success-content text-success'
: 'border-secondary',
onClick && 'cursor-pointer',
'card card-bordered tooltip tooltip-bottom card-compact flex flex-row justify-between gap-2 p-4',
'card card-bordered tooltip tooltip-bottom card-compact gap-2 p-4',
)}
onClick={() => onClick?.()}
data-tip={proxyName}
>
<span class="truncate">{proxyName}</span>
<span>{Delay(proxyName)}</span>
<div class="flex truncate">{proxyName}</div>
<div class="flex flex-row">
<div class="flex flex-1 truncate">
{proxyNode().type}
{proxyNode().udp ? ' :: udp' : ''}
</div>
<div>{Delay(proxyName)}</div>
</div>
</div>
)
}

View File

@ -1,12 +1,16 @@
import { createSignal } from 'solid-js'
import { useRequest } from '~/signals'
import type { Proxy, ProxyProvider } from '~/types'
import type { Proxy, ProxyNode, ProxyProvider } from '~/types'
// these signals should be global state
const [proxies, setProxies] = createSignal<Proxy[]>([])
const [delayMap, setDelayMap] = createSignal<Record<string, number>>({})
const [proxyProviders, setProxyProviders] = createSignal<ProxyProvider[]>([])
const [delayMap, setDelayMap] = createSignal<Record<string, number>>({})
const [proxyNodeMap, setProxyNodeMap] = createSignal<Record<string, ProxyNode>>(
{},
)
export function useProxies() {
const request = useRequest()
@ -18,6 +22,7 @@ export function useProxies() {
Object.values(providers).forEach((provider) => {
provider.proxies.forEach((proxy) => {
setProxyNodeMap({ ...proxyNodeMap(), [proxy.name]: proxy })
delay[proxy.name] = proxy.history[proxy.history.length - 1]?.delay
})
})
@ -73,6 +78,7 @@ export function useProxies() {
proxies,
proxyProviders,
delayTestByProxyGroupName,
proxyNodeMap,
delayMap,
updateProxy,
setProxiesByProxyName,

30
src/types.d.ts vendored
View File

@ -21,22 +21,24 @@ export type Proxy = {
now: string
}
export type ProxyNode = {
alive: boolean
type: string
name: string
tfo: boolean
udp: boolean
xudp: boolean
id: string
extra: Record<string, unknown>
history: {
time: string
delay: number
}[]
}
export type ProxyProvider = {
name: string
proxies: {
alive: boolean
type: string
name: string
tfo: boolean
udp: boolean
xudp: boolean
id: string
extra: Record<string, unknown>
history: {
time: string
delay: number
}[]
}[]
proxies: ProxyNode[]
testUrl: string
updatedAt: string
vehicleType: string