2023-08-30 11:01:19 +08:00
|
|
|
import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
|
2023-08-24 04:20:53 +08:00
|
|
|
import { For, createSignal, onMount } from 'solid-js'
|
2023-08-30 23:02:55 +08:00
|
|
|
import Collapse from '~/components/Collpase'
|
|
|
|
import ProxyNodeCard from '~/components/ProxyNodeCard'
|
2023-08-29 20:20:01 +08:00
|
|
|
import { useProxies } from '~/signals/proxies'
|
|
|
|
import type { Proxy } from '~/types'
|
2023-08-24 04:20:53 +08:00
|
|
|
|
2023-08-29 14:44:49 +08:00
|
|
|
export default () => {
|
2023-08-29 20:20:01 +08:00
|
|
|
const {
|
|
|
|
proxies,
|
|
|
|
proxyProviders,
|
|
|
|
updateProxy,
|
|
|
|
setProxiesByProxyName,
|
2023-08-30 11:01:19 +08:00
|
|
|
delayTestByProxyGroupName,
|
2023-08-29 20:20:01 +08:00
|
|
|
} = useProxies()
|
2023-08-30 23:02:55 +08:00
|
|
|
|
|
|
|
const [collapsedMap, setCollapsedMap] = createSignal<Record<string, boolean>>(
|
2023-08-29 20:20:01 +08:00
|
|
|
{},
|
|
|
|
)
|
2023-08-24 04:20:53 +08:00
|
|
|
|
2023-08-29 12:28:52 +08:00
|
|
|
onMount(async () => {
|
2023-08-29 20:20:01 +08:00
|
|
|
await updateProxy()
|
|
|
|
})
|
2023-08-29 12:28:52 +08:00
|
|
|
|
2023-08-29 20:20:01 +08:00
|
|
|
const onProxyNodeClick = async (proxy: Proxy, proxyName: string) => {
|
|
|
|
setProxiesByProxyName(proxy, proxyName)
|
|
|
|
}
|
2023-08-24 04:20:53 +08:00
|
|
|
|
2023-08-30 11:01:19 +08:00
|
|
|
const onSpeedTestClick = (e: MouseEvent, name: string) => {
|
|
|
|
e.stopPropagation()
|
|
|
|
delayTestByProxyGroupName(name)
|
|
|
|
}
|
|
|
|
|
2023-08-24 04:20:53 +08:00
|
|
|
return (
|
2023-08-28 00:51:10 +08:00
|
|
|
<div class="flex flex-col gap-4">
|
2023-08-24 04:20:53 +08:00
|
|
|
<div>
|
2023-08-28 00:51:10 +08:00
|
|
|
<h1 class="pb-4 text-lg font-semibold">Proxies</h1>
|
2023-08-24 04:20:53 +08:00
|
|
|
|
2023-08-31 00:00:50 +08:00
|
|
|
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
2023-08-24 04:20:53 +08:00
|
|
|
<For each={proxies()}>
|
2023-08-30 23:02:55 +08:00
|
|
|
{(proxy) => {
|
|
|
|
const title = (
|
|
|
|
<>
|
2023-08-30 23:36:25 +08:00
|
|
|
<div class="flex items-center gap-2">
|
|
|
|
<span>{proxy.name}</span>
|
|
|
|
|
2023-08-30 23:02:55 +08:00
|
|
|
<IconBrandSpeedtest
|
|
|
|
class="cursor-pointer"
|
|
|
|
onClick={(e) => onSpeedTestClick(e, proxy.name)}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div class="text-sm text-slate-500">
|
|
|
|
{proxy.type} :: {proxy.now}
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)
|
2023-08-31 00:00:50 +08:00
|
|
|
|
2023-08-30 23:02:55 +08:00
|
|
|
const content = (
|
|
|
|
<For each={proxy.all}>
|
|
|
|
{(proxyName) => (
|
|
|
|
<ProxyNodeCard
|
|
|
|
proxyName={proxyName}
|
|
|
|
isSelected={proxy.now === proxyName}
|
|
|
|
onClick={() => onProxyNodeClick(proxy, proxyName)}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</For>
|
|
|
|
)
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Collapse
|
|
|
|
isOpen={collapsedMap()[`group-${proxy.name}`]}
|
|
|
|
title={title}
|
|
|
|
content={content}
|
|
|
|
onCollapse={(val) =>
|
|
|
|
setCollapsedMap({
|
|
|
|
...collapsedMap(),
|
|
|
|
[`group-${proxy.name}`]: val,
|
|
|
|
})
|
|
|
|
}
|
2023-08-31 00:00:50 +08:00
|
|
|
/>
|
2023-08-30 23:02:55 +08:00
|
|
|
)
|
|
|
|
}}
|
2023-08-24 04:20:53 +08:00
|
|
|
</For>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
2023-08-28 00:51:10 +08:00
|
|
|
<h1 class="pb-4 text-lg font-semibold">Proxy Providers</h1>
|
2023-08-24 04:20:53 +08:00
|
|
|
|
2023-08-31 00:00:50 +08:00
|
|
|
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
2023-08-24 04:20:53 +08:00
|
|
|
<For each={proxyProviders()}>
|
2023-08-30 23:02:55 +08:00
|
|
|
{(proxyProvider) => {
|
|
|
|
const title = <>{proxyProvider.name}</>
|
|
|
|
const content = (
|
|
|
|
<For each={proxyProvider.proxies}>
|
|
|
|
{(proxy) => <ProxyNodeCard proxyName={proxy.name} />}
|
|
|
|
</For>
|
|
|
|
)
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Collapse
|
|
|
|
isOpen={collapsedMap()[`provider-${proxyProvider.name}`]}
|
|
|
|
title={title}
|
|
|
|
content={content}
|
|
|
|
onCollapse={(val) =>
|
|
|
|
setCollapsedMap({
|
|
|
|
...collapsedMap(),
|
|
|
|
[`provider-${proxyProvider.name}`]: val,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}}
|
2023-08-24 04:20:53 +08:00
|
|
|
</For>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|