Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-27 22:54:03 +08:00
Code Issues Projects Releases Wiki Activity

feat: proxy selectable (#19)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/Overview.tsx
View File

@ -76,7 +76,7 @@ export default () => {
onCleanup(() => clearInterval(preventLeakTimer))
const trafficWS = createReconnectingWS(
`${wsEndpointURL()}/traffic?token=${secret()}}`,
`${wsEndpointURL()}/traffic?token=${secret()}`,
)
const trafficWSMessageEvent = createEventSignal<{
@ -148,7 +148,7 @@ export default () => {
])
const connectionsWS = createReconnectingWS(
`${wsEndpointURL()}/connections?token=${secret()}}`,
`${wsEndpointURL()}/connections?token=${secret()}`,
)
const connectionsWSMessageEvent = createEventSignal<{

92
src/pages/Proxies.tsx
View File

@ -1,13 +1,19 @@
import { For, createSignal, onMount } from 'solid-js'
import { twMerge } from 'tailwind-merge'
import { useRequest } from '~/signals'
import type { Proxy, ProxyProvider } from '~/types'
import { useProxies } from '~/signals/proxies'
import type { Proxy } from '~/types'
export default () => {
const request = useRequest()
const [proxies, setProxies] = createSignal<Proxy[]>([])
const [delayMap, setDelayMap] = createSignal<Record<string, number>>({})
const [proxyProviders, setProxyProviders] = createSignal<ProxyProvider[]>([])
const {
proxies,
proxyProviders,
delayMap,
updateProxy,
setProxiesByProxyName,
} = useProxies()
const [collapseMap, setCollapseMap] = createSignal<Record<string, boolean>>(
{},
)
const renderDelay = (proxyname: string) => {
const delay = delayMap()[proxyname]
@ -20,27 +26,24 @@ export default () => {
}
onMount(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))
const { proxies } = await request
.get('proxies')
.json<{ proxies: Record<string, Proxy> }>()
setProxies(Object.values(proxies))
await updateProxy()
})
const onProxyNodeClick = async (proxy: Proxy, proxyName: string) => {
setProxiesByProxyName(proxy, proxyName)
}
const onCollapseTitleClick = (name: string) => {
const cMap = collapseMap()
cMap[name] = !cMap[name]
setCollapseMap({ ...cMap })
}
const getCollapseClassName = (name: string) => {
return collapseMap()[name] ? 'collapse-open' : 'collapse-close'
}
return (
<div class="flex flex-col gap-4">
<div>
@ -49,23 +52,31 @@ export default () => {
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
<For each={proxies()}>
{(proxy) => (
<div class="collapse collapse-arrow border-secondary bg-base-200 p-4">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium">
<div
class={twMerge(
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}
</div>
<div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-5">
<For each={proxy.all}>
{(proxyPoint) => (
{(proxyName) => (
<div
class={twMerge(
proxy.now === proxyPoint
proxy.now === proxyName
? 'border-primary bg-success-content text-success'
: '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>
)}
</For>
@ -82,16 +93,23 @@ export default () => {
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
<For each={proxyProviders()}>
{(proxy) => (
<div class="collapse-arrow collapse border-secondary bg-base-200 p-4">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium">
<div
class={twMerge(
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}
</div>
<div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-5">
<For each={proxy.proxies}>
{(proxyPoint) => (
{(proxyNode) => (
<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>
)}
</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,
}
}