mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat: separate provider page
This commit is contained in:
parent
78ecf12306
commit
419d3e33f3
19
src/App.tsx
19
src/App.tsx
@ -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} />
|
||||
|
@ -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,40 +74,57 @@ const ThemeSwitcher = () => (
|
||||
|
||||
export const Header = () => {
|
||||
const [t, { locale }] = useI18n()
|
||||
const { updateProxy, proxyProviders } = useProxies()
|
||||
|
||||
const navs = () => [
|
||||
onMount(() => {
|
||||
updateProxy()
|
||||
})
|
||||
|
||||
const navs = createMemo(() => {
|
||||
const list = [
|
||||
{
|
||||
href: '/overview',
|
||||
href: ROUTE.Overview,
|
||||
name: t('overview'),
|
||||
icon: <IconHome />,
|
||||
},
|
||||
{
|
||||
href: '/proxies',
|
||||
href: ROUTE.Proxies,
|
||||
name: t('proxies'),
|
||||
icon: <IconGlobe />,
|
||||
},
|
||||
{
|
||||
href: '/rules',
|
||||
href: ROUTE.Rules,
|
||||
name: t('rules'),
|
||||
icon: <IconRuler />,
|
||||
},
|
||||
{
|
||||
href: '/conns',
|
||||
href: ROUTE.Conns,
|
||||
name: t('connections'),
|
||||
icon: <IconNetwork />,
|
||||
},
|
||||
{
|
||||
href: '/logs',
|
||||
href: ROUTE.Log,
|
||||
name: t('logs'),
|
||||
icon: <IconFileStack />,
|
||||
},
|
||||
{
|
||||
href: '/config',
|
||||
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()
|
||||
|
||||
|
@ -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',
|
||||
|
@ -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,30 +30,9 @@ 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">
|
||||
<h1 class="pb-2 text-lg font-semibold">{t('proxies')}</h1>
|
||||
<ForTwoLine
|
||||
subChild={proxies().map((proxy) => {
|
||||
const title = (
|
||||
@ -118,83 +84,5 @@ export default () => {
|
||||
})}
|
||||
/>
|
||||
</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,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
126
src/pages/ProxyProvider.tsx
Normal file
126
src/pages/ProxyProvider.tsx
Normal 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>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue
Block a user