mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat: render protocl and udp
This commit is contained in:
parent
6db7ceddac
commit
44df379fd6
@ -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}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
|
30
src/types.d.ts
vendored
30
src/types.d.ts
vendored
@ -21,22 +21,24 @@ export type Proxy = {
|
|||||||
now: string
|
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 = {
|
export type ProxyProvider = {
|
||||||
name: string
|
name: string
|
||||||
proxies: {
|
proxies: ProxyNode[]
|
||||||
alive: boolean
|
|
||||||
type: string
|
|
||||||
name: string
|
|
||||||
tfo: boolean
|
|
||||||
udp: boolean
|
|
||||||
xudp: boolean
|
|
||||||
id: string
|
|
||||||
extra: Record<string, unknown>
|
|
||||||
history: {
|
|
||||||
time: string
|
|
||||||
delay: number
|
|
||||||
}[]
|
|
||||||
}[]
|
|
||||||
testUrl: string
|
testUrl: string
|
||||||
updatedAt: string
|
updatedAt: string
|
||||||
vehicleType: string
|
vehicleType: string
|
||||||
|
Loading…
Reference in New Issue
Block a user