feat: proxy page style (#47)

This commit is contained in:
Zephyruso 2023-08-30 23:02:55 +08:00 committed by GitHub
parent fa167100c7
commit 51f712157f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 154 additions and 87 deletions

View 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

View 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>
)
}

View File

@ -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>

View File

@ -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