feat: separate provider page

This commit is contained in:
Zephyruso 2023-09-02 16:58:22 +08:00
parent 78ecf12306
commit 419d3e33f3
5 changed files with 258 additions and 205 deletions

View File

@ -2,19 +2,21 @@ import { Navigate, Route, Routes, useNavigate } from '@solidjs/router'
import { Show, lazy, onMount } from 'solid-js'
import { Header } from '~/components/Header'
import { curTheme, selectedEndpoint } from '~/signals'
import { ROUTE } from './config/enum'
const Setup = lazy(() => import('~/pages/Setup'))
const Overview = lazy(() => import('~/pages/Overview'))
const Connections = lazy(() => import('~/pages/Connections'))
const Logs = lazy(() => import('~/pages/Logs'))
const Proxies = lazy(() => import('~/pages/Proxies'))
const ProxyProvider = lazy(() => import('~/pages/ProxyProvider'))
const Rules = lazy(() => import('~/pages/Rules'))
const Config = lazy(() => import('~/pages/Config'))
export const App = () => {
const navigate = useNavigate()
onMount(() => {
onMount(async () => {
if (!selectedEndpoint()) {
navigate('/setup')
}
@ -30,13 +32,14 @@ export const App = () => {
<div class="flex-1 overflow-y-auto overflow-x-hidden p-2 sm:p-4">
<Routes>
<Show when={selectedEndpoint()}>
<Route path="/overview" component={Overview} />
<Route path="/proxies" component={Proxies} />
<Route path="/rules" component={Rules} />
<Route path="/conns" component={Connections} />
<Route path="/logs" component={Logs} />
<Route path="/config" component={Config} />
<Route path="*" element={<Navigate href="/overview" />} />
<Route path={ROUTE.Overview} component={Overview} />
<Route path={ROUTE.Proxies} component={Proxies} />
<Route path={ROUTE.Proxyprovider} component={ProxyProvider} />
<Route path={ROUTE.Rules} component={Rules} />
<Route path={ROUTE.Conns} component={Connections} />
<Route path={ROUTE.Log} component={Logs} />
<Route path={ROUTE.Config} component={Config} />
<Route path="*" element={<Navigate href={ROUTE.Overview} />} />
</Show>
<Route path="/setup" component={Setup} />

View File

@ -4,6 +4,7 @@ import {
IconArrowsExchange,
IconFileStack,
IconGlobe,
IconGlobeFilled,
IconHome,
IconLanguage,
IconMenu,
@ -12,11 +13,19 @@ import {
IconRuler,
IconSettings,
} from '@tabler/icons-solidjs'
import { For, ParentComponent, Show, createSignal } from 'solid-js'
import {
For,
ParentComponent,
Show,
createMemo,
createSignal,
onMount,
} from 'solid-js'
import { twMerge } from 'tailwind-merge'
import { LANG } from '~/config/enum'
import { LANG, ROUTE } from '~/config/enum'
import { themes } from '~/constants'
import { setCurTheme, setSelectedEndpoint } from '~/signals'
import { useProxies } from '~/signals/proxies'
const Nav: ParentComponent<{ href: string; tooltip: string }> = ({
href,
@ -65,39 +74,56 @@ const ThemeSwitcher = () => (
export const Header = () => {
const [t, { locale }] = useI18n()
const { updateProxy, proxyProviders } = useProxies()
const navs = () => [
{
href: '/overview',
name: t('overview'),
icon: <IconHome />,
},
{
href: '/proxies',
name: t('proxies'),
icon: <IconGlobe />,
},
{
href: '/rules',
name: t('rules'),
icon: <IconRuler />,
},
{
href: '/conns',
name: t('connections'),
icon: <IconNetwork />,
},
{
href: '/logs',
name: t('logs'),
icon: <IconFileStack />,
},
{
href: '/config',
name: t('config'),
icon: <IconSettings />,
},
]
onMount(() => {
updateProxy()
})
const navs = createMemo(() => {
const list = [
{
href: ROUTE.Overview,
name: t('overview'),
icon: <IconHome />,
},
{
href: ROUTE.Proxies,
name: t('proxies'),
icon: <IconGlobe />,
},
{
href: ROUTE.Rules,
name: t('rules'),
icon: <IconRuler />,
},
{
href: ROUTE.Conns,
name: t('connections'),
icon: <IconNetwork />,
},
{
href: ROUTE.Log,
name: t('logs'),
icon: <IconFileStack />,
},
{
href: ROUTE.Config,
name: t('config'),
icon: <IconSettings />,
},
]
if (proxyProviders().length > 0) {
list.splice(2, 0, {
href: ROUTE.Proxyprovider,
name: t('proxyProviders'),
icon: <IconGlobeFilled />,
})
}
return list
})
const location = useLocation()
const navigate = useNavigate()

View File

@ -1,3 +1,13 @@
export enum ROUTE {
Overview = '/overview',
Proxies = '/proxies',
Proxyprovider = '/proxyprovider',
Rules = '/rules',
Conns = '/conns',
Log = '/logs',
Config = '/config',
}
export enum AccessorKey {
Close = 'close',
ID = 'ID',

View File

@ -1,35 +1,22 @@
import { useI18n } from '@solid-primitives/i18n'
import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
import { Show, createSignal, onMount } from 'solid-js'
import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
import { Show, createSignal } from 'solid-js'
import Collapse from '~/components/Collpase'
import ForTwoLine from '~/components/ForTwoLine'
import ProxyCardGroups from '~/components/ProxyCardGroups'
import ProxyNodePreview from '~/components/ProxyNodePreview'
import SubscriptionInfo from '~/components/SubscriptionInfo'
import { useProxies } from '~/signals/proxies'
import type { Proxy } from '~/types'
import { formatTimeFromNow } from '~/utils/proxies'
export default () => {
const [t] = useI18n()
const {
proxies,
proxyProviders,
updateProxy,
setProxyGroupByProxyName,
delayTestByProxyGroupName,
updateProviderByProviderName,
healthCheckByProviderName,
} = useProxies()
const { proxies, setProxyGroupByProxyName, delayTestByProxyGroupName } =
useProxies()
const [collapsedMap, setCollapsedMap] = createSignal<Record<string, boolean>>(
{},
)
onMount(async () => {
await updateProxy()
})
const onProxyNodeClick = async (proxy: Proxy, proxyName: string) => {
setProxyGroupByProxyName(proxy, proxyName)
}
@ -43,158 +30,59 @@ export default () => {
el.classList.remove('animate-pulse')
}
const onHealthCheckClick = async (e: MouseEvent, name: string) => {
const el = e.target as HTMLElement
el.classList.add('animate-pulse')
e.stopPropagation()
await healthCheckByProviderName(name)
el.classList.remove('animate-pulse')
}
const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
const el = e.target as HTMLElement
el.classList.add('animate-spin')
e.stopPropagation()
await updateProviderByProviderName(name)
el.classList.remove('animate-spin')
}
return (
<div class="flex flex-col gap-2">
<div class="collapse collapse-arrow">
<input type="checkbox" checked />
<h1 class="collapse-title p-2 text-lg font-semibold">{t('proxies')}</h1>
<div class="collapse-content p-0">
<ForTwoLine
subChild={proxies().map((proxy) => {
const title = (
<>
<div class="mr-10 flex items-center justify-between">
<span>{proxy.name}</span>
<button
class="btn btn-circle btn-sm"
onClick={(e) => onSpeedTestClick(e, proxy.name)}
>
<IconBrandSpeedtest />
</button>
</div>
<div class="text-sm text-slate-500">
{proxy.type} :: {proxy.now}
</div>
<Show when={!collapsedMap()[`group-${proxy.name}`]}>
<ProxyNodePreview
proxyNameList={proxy.all ?? []}
now={proxy.now}
/>
</Show>
</>
)
const content = (
<ProxyCardGroups
proxies={proxy.all!}
<h1 class="pb-2 text-lg font-semibold">{t('proxies')}</h1>
<ForTwoLine
subChild={proxies().map((proxy) => {
const title = (
<>
<div class="mr-10 flex items-center justify-between">
<span>{proxy.name}</span>
<button
class="btn btn-circle btn-sm"
onClick={(e) => onSpeedTestClick(e, proxy.name)}
>
<IconBrandSpeedtest />
</button>
</div>
<div class="text-sm text-slate-500">
{proxy.type} :: {proxy.now}
</div>
<Show when={!collapsedMap()[`group-${proxy.name}`]}>
<ProxyNodePreview
proxyNameList={proxy.all ?? []}
now={proxy.now}
onClick={(name) => {
onProxyNodeClick(proxy, name)
}}
/>
)
</Show>
</>
)
return (
<Collapse
isOpen={collapsedMap()[`group-${proxy.name}`]}
title={title}
content={content}
onCollapse={(val) =>
setCollapsedMap({
...collapsedMap(),
[`group-${proxy.name}`]: val,
})
}
/>
)
})}
/>
</div>
</div>
<Show when={proxyProviders().length > 0}>
<div class="collapse-arrow collapse">
<input type="checkbox" checked />
<h1 class="collapse-title p-2 text-lg font-semibold">
{t('proxyProviders')}
</h1>
<div class="collapse-content p-0">
<ForTwoLine
subChild={proxyProviders().map((proxyProvider) => {
const title = (
<>
<div class="mr-10 flex items-center justify-between">
<span>{proxyProvider.name}</span>
<div>
<button
class="btn btn-circle btn-sm mr-2"
onClick={(e) =>
onUpdateProviderClick(e, proxyProvider.name)
}
>
<IconReload />
</button>
<button
class="btn btn-circle btn-sm"
onClick={(e) =>
onHealthCheckClick(e, proxyProvider.name)
}
>
<IconBrandSpeedtest />
</button>
</div>
</div>
<SubscriptionInfo
subscriptionInfo={proxyProvider.subscriptionInfo}
/>
<div class="text-sm text-slate-500">
{proxyProvider.vehicleType} :: Updated{' '}
{formatTimeFromNow(proxyProvider.updatedAt)}
</div>
<Show
when={!collapsedMap()[`provider-${proxyProvider.name}`]}
>
<ProxyNodePreview
proxyNameList={
proxyProvider.proxies.map((i) => i.name) ?? []
}
/>
</Show>
</>
)
const content = (
<ProxyCardGroups
proxies={proxyProvider.proxies.map((i) => i.name)}
/>
)
return (
<Collapse
isOpen={collapsedMap()[`provider-${proxyProvider.name}`]}
title={title}
content={content}
onCollapse={(val) =>
setCollapsedMap({
...collapsedMap(),
[`provider-${proxyProvider.name}`]: val,
})
}
/>
)
})}
const content = (
<ProxyCardGroups
proxies={proxy.all!}
now={proxy.now}
onClick={(name) => {
onProxyNodeClick(proxy, name)
}}
/>
</div>
</div>
</Show>
)
return (
<Collapse
isOpen={collapsedMap()[`group-${proxy.name}`]}
title={title}
content={content}
onCollapse={(val) =>
setCollapsedMap({
...collapsedMap(),
[`group-${proxy.name}`]: val,
})
}
/>
)
})}
/>
</div>
)
}

126
src/pages/ProxyProvider.tsx Normal file
View File

@ -0,0 +1,126 @@
import { useI18n } from '@solid-primitives/i18n'
import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
import { Show, createSignal } from 'solid-js'
import Collapse from '~/components/Collpase'
import ForTwoLine from '~/components/ForTwoLine'
import ProxyCardGroups from '~/components/ProxyCardGroups'
import ProxyNodePreview from '~/components/ProxyNodePreview'
import SubscriptionInfo from '~/components/SubscriptionInfo'
import { useProxies } from '~/signals/proxies'
import { formatTimeFromNow } from '~/utils/proxies'
export default () => {
const [t] = useI18n()
const {
proxyProviders,
updateProviderByProviderName,
healthCheckByProviderName,
} = useProxies()
const [collapsedMap, setCollapsedMap] = createSignal<Record<string, boolean>>(
{},
)
const onHealthCheckClick = async (e: MouseEvent, name: string) => {
const el = e.target as HTMLElement
el.classList.add('animate-pulse')
e.stopPropagation()
await healthCheckByProviderName(name)
el.classList.remove('animate-pulse')
}
const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
const el = e.target as HTMLElement
el.classList.add('animate-spin')
e.stopPropagation()
await updateProviderByProviderName(name)
el.classList.remove('animate-spin')
}
const onUpdateAllProviderClick = async (e: MouseEvent) => {
const el = e.target as HTMLElement
const list = proxyProviders().map((provider) => {
return updateProviderByProviderName(provider.name)
})
el.classList.add('animate-spin')
e.stopPropagation()
await Promise.all(list)
el.classList.remove('animate-spin')
}
return (
<div class="flex flex-col gap-2">
<h1 class="pm-4 flex items-center text-lg font-semibold">
{t('proxyProviders')}
<button
class="btn btn-circle btn-ghost btn-sm ml-2"
onClick={(e) => onUpdateAllProviderClick(e)}
>
<IconReload />
</button>
</h1>
<ForTwoLine
subChild={proxyProviders().map((proxyProvider) => {
const title = (
<>
<div class="mr-10 flex items-center justify-between">
<span>{proxyProvider.name}</span>
<div>
<button
class="btn btn-circle btn-sm mr-2"
onClick={(e) =>
onUpdateProviderClick(e, proxyProvider.name)
}
>
<IconReload />
</button>
<button
class="btn btn-circle btn-sm"
onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
>
<IconBrandSpeedtest />
</button>
</div>
</div>
<SubscriptionInfo
subscriptionInfo={proxyProvider.subscriptionInfo}
/>
<div class="text-sm text-slate-500">
{proxyProvider.vehicleType} :: Updated{' '}
{formatTimeFromNow(proxyProvider.updatedAt)}
</div>
<Show when={!collapsedMap()[`provider-${proxyProvider.name}`]}>
<ProxyNodePreview
proxyNameList={proxyProvider.proxies.map((i) => i.name) ?? []}
/>
</Show>
</>
)
const content = (
<ProxyCardGroups
proxies={proxyProvider.proxies.map((i) => i.name)}
/>
)
return (
<Collapse
isOpen={collapsedMap()[`provider-${proxyProvider.name}`]}
title={title}
content={content}
onCollapse={(val) =>
setCollapsedMap({
...collapsedMap(),
[`provider-${proxyProvider.name}`]: val,
})
}
/>
)
})}
/>
</div>
)
}