mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat: proxy page style (#47)
This commit is contained in:
parent
fa167100c7
commit
51f712157f
46
src/components/Collpase.tsx
Normal file
46
src/components/Collpase.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import { JSX, ParentComponent } from 'solid-js'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
type Props = {
|
||||
title: JSX.Element
|
||||
content: JSX.Element
|
||||
isOpen: boolean | undefined
|
||||
onCollapse: (collapsed: boolean) => void
|
||||
}
|
||||
|
||||
const Collapse: ParentComponent<Props> = (props) => {
|
||||
const { title, content, onCollapse } = props
|
||||
|
||||
const getCollapseClassName = () => {
|
||||
return props.isOpen ? 'collapse-open' : 'collapse-close'
|
||||
}
|
||||
const getCollapseContentClassName = () => {
|
||||
return props.isOpen ? 'opacity-100' : 'opacity-0 scale-y-0'
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
class={twMerge(
|
||||
getCollapseClassName(),
|
||||
'collapse collapse-arrow border-secondary bg-base-200 p-1',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
class={'collapse-title text-xl font-medium'}
|
||||
onClick={() => onCollapse(!props.isOpen)}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
<div
|
||||
class={twMerge(
|
||||
getCollapseContentClassName(),
|
||||
'collapse-content grid grid-cols-1 gap-2 overflow-hidden transition-opacity duration-1000 sm:grid-cols-3 lg:grid-cols-5',
|
||||
)}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Collapse
|
36
src/components/ProxyNodeCard.tsx
Normal file
36
src/components/ProxyNodeCard.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import { useProxies } from '~/signals/proxies'
|
||||
|
||||
export default (props: {
|
||||
proxyName: string
|
||||
isSelected?: boolean
|
||||
onClick?: () => void
|
||||
}) => {
|
||||
const { proxyName, isSelected, onClick } = props
|
||||
const { delayMap } = useProxies()
|
||||
const Delay = (proxyname: string) => {
|
||||
const delay = delayMap()[proxyname]
|
||||
|
||||
if (typeof delay !== 'number' || delay === 0) {
|
||||
return ''
|
||||
}
|
||||
|
||||
return <span>{delay}ms</span>
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
class={twMerge(
|
||||
isSelected
|
||||
? 'border-primary bg-success-content text-success'
|
||||
: 'border-secondary',
|
||||
onClick ? 'cursor-pointer' : '',
|
||||
'card card-bordered card-compact m-1 flex-row justify-between border-secondary p-4',
|
||||
)}
|
||||
onClick={() => onClick?.()}
|
||||
>
|
||||
<span class="mr-2 overflow-hidden whitespace-nowrap">{proxyName}</span>
|
||||
<span>{Delay(proxyName)}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -1,6 +1,7 @@
|
||||
import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
|
||||
import { For, createSignal, onMount } from 'solid-js'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import Collapse from '~/components/Collpase'
|
||||
import ProxyNodeCard from '~/components/ProxyNodeCard'
|
||||
import { useProxies } from '~/signals/proxies'
|
||||
import type { Proxy } from '~/types'
|
||||
|
||||
@ -8,25 +9,15 @@ export default () => {
|
||||
const {
|
||||
proxies,
|
||||
proxyProviders,
|
||||
delayMap,
|
||||
updateProxy,
|
||||
setProxiesByProxyName,
|
||||
delayTestByProxyGroupName,
|
||||
} = useProxies()
|
||||
const [collapseMap, setCollapseMap] = createSignal<Record<string, boolean>>(
|
||||
|
||||
const [collapsedMap, setCollapsedMap] = createSignal<Record<string, boolean>>(
|
||||
{},
|
||||
)
|
||||
|
||||
const renderDelay = (proxyname: string) => {
|
||||
const delay = delayMap()[proxyname]
|
||||
|
||||
if (typeof delay !== 'number' || delay === 0) {
|
||||
return ''
|
||||
}
|
||||
|
||||
return <span>{delay}ms</span>
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await updateProxy()
|
||||
})
|
||||
@ -35,22 +26,11 @@ export default () => {
|
||||
setProxiesByProxyName(proxy, proxyName)
|
||||
}
|
||||
|
||||
const onCollapseTitleClick = (name: string) => {
|
||||
const cMap = collapseMap()
|
||||
|
||||
cMap[name] = !cMap[name]
|
||||
setCollapseMap({ ...cMap })
|
||||
}
|
||||
|
||||
const onSpeedTestClick = (e: MouseEvent, name: string) => {
|
||||
e.stopPropagation()
|
||||
delayTestByProxyGroupName(name)
|
||||
}
|
||||
|
||||
const getCollapseClassName = (name: string) => {
|
||||
return collapseMap()[name] ? 'collapse-open' : 'collapse-close'
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
@ -58,42 +38,47 @@ export default () => {
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
|
||||
<For each={proxies()}>
|
||||
{(proxy) => (
|
||||
<div
|
||||
class={twMerge(
|
||||
getCollapseClassName(proxy.name),
|
||||
'collapse collapse-arrow border-secondary bg-base-200 p-4',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
class="collapse-title flex h-10 items-center text-xl font-medium"
|
||||
onClick={() => onCollapseTitleClick(proxy.name)}
|
||||
>
|
||||
{proxy.name} {proxy.type}
|
||||
<IconBrandSpeedtest
|
||||
class="m-4 cursor-pointer"
|
||||
onClick={(e) => onSpeedTestClick(e, proxy.name)}
|
||||
/>
|
||||
</div>
|
||||
<div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-5">
|
||||
<For each={proxy.all}>
|
||||
{(proxyName) => (
|
||||
<div
|
||||
class={twMerge(
|
||||
proxy.now === proxyName
|
||||
? 'border-primary bg-success-content text-success'
|
||||
: 'border-secondary',
|
||||
'card card-bordered card-compact m-1 cursor-pointer flex-row justify-between p-4',
|
||||
)}
|
||||
onClick={() => onProxyNodeClick(proxy, proxyName)}
|
||||
>
|
||||
{proxyName} {renderDelay(proxyName)}
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(proxy) => {
|
||||
const title = (
|
||||
<>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-3">{proxy.name}</span>
|
||||
<IconBrandSpeedtest
|
||||
class="cursor-pointer"
|
||||
onClick={(e) => onSpeedTestClick(e, proxy.name)}
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm text-slate-500">
|
||||
{proxy.type} :: {proxy.now}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
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,
|
||||
})
|
||||
}
|
||||
></Collapse>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
@ -103,30 +88,28 @@ export default () => {
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
|
||||
<For each={proxyProviders()}>
|
||||
{(proxy) => (
|
||||
<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}>
|
||||
{(proxyNode) => (
|
||||
<div class="card card-bordered card-compact m-1 flex-row justify-between border-secondary p-4">
|
||||
{proxyNode.name} {renderDelay(proxyNode.name)}
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(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,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -2,11 +2,13 @@ import { createSignal } from 'solid-js'
|
||||
import { useRequest } from '~/signals'
|
||||
import type { Proxy, ProxyProvider } from '~/types'
|
||||
|
||||
// these signals should be global state
|
||||
const [proxies, setProxies] = createSignal<Proxy[]>([])
|
||||
const [delayMap, setDelayMap] = createSignal<Record<string, number>>({})
|
||||
const [proxyProviders, setProxyProviders] = createSignal<ProxyProvider[]>([])
|
||||
|
||||
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
|
||||
|
Loading…
Reference in New Issue
Block a user