mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-27 22:54:03 +08:00
feat: proxy selectable (#19)
This commit is contained in:
parent
b67664b68f
commit
6b0802023d
@ -76,7 +76,7 @@ export default () => {
|
|||||||
onCleanup(() => clearInterval(preventLeakTimer))
|
onCleanup(() => clearInterval(preventLeakTimer))
|
||||||
|
|
||||||
const trafficWS = createReconnectingWS(
|
const trafficWS = createReconnectingWS(
|
||||||
`${wsEndpointURL()}/traffic?token=${secret()}}`,
|
`${wsEndpointURL()}/traffic?token=${secret()}`,
|
||||||
)
|
)
|
||||||
|
|
||||||
const trafficWSMessageEvent = createEventSignal<{
|
const trafficWSMessageEvent = createEventSignal<{
|
||||||
@ -148,7 +148,7 @@ export default () => {
|
|||||||
])
|
])
|
||||||
|
|
||||||
const connectionsWS = createReconnectingWS(
|
const connectionsWS = createReconnectingWS(
|
||||||
`${wsEndpointURL()}/connections?token=${secret()}}`,
|
`${wsEndpointURL()}/connections?token=${secret()}`,
|
||||||
)
|
)
|
||||||
|
|
||||||
const connectionsWSMessageEvent = createEventSignal<{
|
const connectionsWSMessageEvent = createEventSignal<{
|
||||||
|
@ -1,13 +1,19 @@
|
|||||||
import { For, createSignal, onMount } from 'solid-js'
|
import { For, createSignal, onMount } from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
import { useRequest } from '~/signals'
|
import { useProxies } from '~/signals/proxies'
|
||||||
import type { Proxy, ProxyProvider } from '~/types'
|
import type { Proxy } from '~/types'
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const request = useRequest()
|
const {
|
||||||
const [proxies, setProxies] = createSignal<Proxy[]>([])
|
proxies,
|
||||||
const [delayMap, setDelayMap] = createSignal<Record<string, number>>({})
|
proxyProviders,
|
||||||
const [proxyProviders, setProxyProviders] = createSignal<ProxyProvider[]>([])
|
delayMap,
|
||||||
|
updateProxy,
|
||||||
|
setProxiesByProxyName,
|
||||||
|
} = useProxies()
|
||||||
|
const [collapseMap, setCollapseMap] = createSignal<Record<string, boolean>>(
|
||||||
|
{},
|
||||||
|
)
|
||||||
|
|
||||||
const renderDelay = (proxyname: string) => {
|
const renderDelay = (proxyname: string) => {
|
||||||
const delay = delayMap()[proxyname]
|
const delay = delayMap()[proxyname]
|
||||||
@ -20,26 +26,23 @@ export default () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const { providers } = await request
|
await updateProxy()
|
||||||
.get('providers/proxies')
|
|
||||||
.json<{ providers: Record<string, ProxyProvider> }>()
|
|
||||||
const delay = delayMap()
|
|
||||||
|
|
||||||
Object.values(providers).forEach((provider) => {
|
|
||||||
provider.proxies.forEach((proxy) => {
|
|
||||||
delay[proxy.name] = proxy.history[proxy.history.length - 1]?.delay
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
setDelayMap(delay)
|
const onProxyNodeClick = async (proxy: Proxy, proxyName: string) => {
|
||||||
setProxyProviders(Object.values(providers))
|
setProxiesByProxyName(proxy, proxyName)
|
||||||
|
}
|
||||||
|
|
||||||
const { proxies } = await request
|
const onCollapseTitleClick = (name: string) => {
|
||||||
.get('proxies')
|
const cMap = collapseMap()
|
||||||
.json<{ proxies: Record<string, Proxy> }>()
|
|
||||||
|
|
||||||
setProxies(Object.values(proxies))
|
cMap[name] = !cMap[name]
|
||||||
})
|
setCollapseMap({ ...cMap })
|
||||||
|
}
|
||||||
|
|
||||||
|
const getCollapseClassName = (name: string) => {
|
||||||
|
return collapseMap()[name] ? 'collapse-open' : 'collapse-close'
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-4">
|
||||||
@ -49,23 +52,31 @@ export default () => {
|
|||||||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
|
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
|
||||||
<For each={proxies()}>
|
<For each={proxies()}>
|
||||||
{(proxy) => (
|
{(proxy) => (
|
||||||
<div class="collapse collapse-arrow border-secondary bg-base-200 p-4">
|
<div
|
||||||
<input type="checkbox" />
|
class={twMerge(
|
||||||
<div class="collapse-title text-xl font-medium">
|
getCollapseClassName(proxy.name),
|
||||||
|
'collapse collapse-arrow border-secondary bg-base-200 p-4',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="collapse-title text-xl font-medium"
|
||||||
|
onClick={() => onCollapseTitleClick(proxy.name)}
|
||||||
|
>
|
||||||
{proxy.name} {proxy.type}
|
{proxy.name} {proxy.type}
|
||||||
</div>
|
</div>
|
||||||
<div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-5">
|
<div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-5">
|
||||||
<For each={proxy.all}>
|
<For each={proxy.all}>
|
||||||
{(proxyPoint) => (
|
{(proxyName) => (
|
||||||
<div
|
<div
|
||||||
class={twMerge(
|
class={twMerge(
|
||||||
proxy.now === proxyPoint
|
proxy.now === proxyName
|
||||||
? 'border-primary bg-success-content text-success'
|
? 'border-primary bg-success-content text-success'
|
||||||
: 'border-secondary',
|
: 'border-secondary',
|
||||||
'card card-bordered card-compact m-1 flex-row justify-between p-4',
|
'card card-bordered card-compact m-1 cursor-pointer flex-row justify-between p-4',
|
||||||
)}
|
)}
|
||||||
|
onClick={() => onProxyNodeClick(proxy, proxyName)}
|
||||||
>
|
>
|
||||||
{proxyPoint} {renderDelay(proxyPoint)}
|
{proxyName} {renderDelay(proxyName)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</For>
|
</For>
|
||||||
@ -82,16 +93,23 @@ export default () => {
|
|||||||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
|
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
|
||||||
<For each={proxyProviders()}>
|
<For each={proxyProviders()}>
|
||||||
{(proxy) => (
|
{(proxy) => (
|
||||||
<div class="collapse-arrow collapse border-secondary bg-base-200 p-4">
|
<div
|
||||||
<input type="checkbox" />
|
class={twMerge(
|
||||||
<div class="collapse-title text-xl font-medium">
|
getCollapseClassName(proxy.name),
|
||||||
|
'collapse-arrow collapse border-secondary bg-base-200 p-4',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="collapse-title text-xl font-medium"
|
||||||
|
onClick={() => onCollapseTitleClick(proxy.name)}
|
||||||
|
>
|
||||||
{proxy.name}
|
{proxy.name}
|
||||||
</div>
|
</div>
|
||||||
<div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-5">
|
<div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-5">
|
||||||
<For each={proxy.proxies}>
|
<For each={proxy.proxies}>
|
||||||
{(proxyPoint) => (
|
{(proxyNode) => (
|
||||||
<div class="card card-bordered card-compact m-1 flex-row justify-between border-secondary p-4">
|
<div class="card card-bordered card-compact m-1 flex-row justify-between border-secondary p-4">
|
||||||
{proxyPoint.name} {renderDelay(proxyPoint.name)}
|
{proxyNode.name} {renderDelay(proxyNode.name)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</For>
|
</For>
|
||||||
|
58
src/signals/proxies.ts
Normal file
58
src/signals/proxies.ts
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import { createSignal } from 'solid-js'
|
||||||
|
import { useRequest } from '~/signals'
|
||||||
|
import type { Proxy, ProxyProvider } from '~/types'
|
||||||
|
|
||||||
|
export function useProxies() {
|
||||||
|
const request = useRequest()
|
||||||
|
const [proxies, setProxies] = createSignal<Proxy[]>([])
|
||||||
|
const [proxyProviders, setProxyProviders] = createSignal<ProxyProvider[]>([])
|
||||||
|
const [delayMap, setDelayMap] = createSignal<Record<string, number>>({})
|
||||||
|
|
||||||
|
const updateProxy = async () => {
|
||||||
|
const { providers } = await request
|
||||||
|
.get('providers/proxies')
|
||||||
|
.json<{ providers: Record<string, ProxyProvider> }>()
|
||||||
|
const delay = delayMap()
|
||||||
|
|
||||||
|
Object.values(providers).forEach((provider) => {
|
||||||
|
provider.proxies.forEach((proxy) => {
|
||||||
|
delay[proxy.name] = proxy.history[proxy.history.length - 1]?.delay
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
setDelayMap(delay)
|
||||||
|
setProxyProviders(
|
||||||
|
Object.values(providers).filter(
|
||||||
|
(provider) =>
|
||||||
|
provider.name !== 'default' && provider.vehicleType !== 'Compatible',
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
||||||
|
const { proxies } = await request
|
||||||
|
.get('proxies')
|
||||||
|
.json<{ proxies: Record<string, Proxy> }>()
|
||||||
|
|
||||||
|
setProxies(
|
||||||
|
Object.values(proxies).filter(
|
||||||
|
(proxy) => proxy.all && proxy.all.length > 0,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const setProxiesByProxyName = async (proxy: Proxy, proxyName: string) => {
|
||||||
|
await request.put(`proxies/${proxy.name}`, {
|
||||||
|
body: JSON.stringify({
|
||||||
|
name: proxyName,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
await updateProxy()
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
proxies,
|
||||||
|
proxyProviders,
|
||||||
|
delayMap,
|
||||||
|
updateProxy,
|
||||||
|
setProxiesByProxyName,
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user