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 <div
class={twMerge( class={twMerge(
getCollapseContentClassName(), 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} {content}

View File

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

View File

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

10
src/types.d.ts vendored
View File

@ -21,9 +21,7 @@ export type Proxy = {
now: string now: string
} }
export type ProxyProvider = { export type ProxyNode = {
name: string
proxies: {
alive: boolean alive: boolean
type: string type: string
name: string name: string
@ -36,7 +34,11 @@ export type ProxyProvider = {
time: string time: string
delay: number delay: number
}[] }[]
}[] }
export type ProxyProvider = {
name: string
proxies: ProxyNode[]
testUrl: string testUrl: string
updatedAt: string updatedAt: string
vehicleType: string vehicleType: string