feat: proxy selectable (#19)

This commit is contained in:
Zephyruso 2023-08-29 20:20:01 +08:00 committed by GitHub
parent b67664b68f
commit 6b0802023d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 115 additions and 39 deletions

View File

@ -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<{

View File

@ -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
View 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,
}
}