Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-24 09:45:35 +08:00
Code Issues Projects Releases Wiki Activity

feat: update proxy layout

Browse Source
This commit is contained in:
kunish 2023-08-31 00:00:50 +08:00
parent 4a03662bbd
commit 83b0de831a
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
3 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Collpase.tsx
View File

@ -27,7 +27,7 @@ const Collapse: ParentComponent<Props> = (props) => {
<div
class={twMerge(
getCollapseClassName(),
'collapse collapse-arrow overflow-visible border-secondary bg-base-200 p-1',
'collapse collapse-arrow overflow-visible border-secondary bg-base-200',
)}
>
<div
@ -39,7 +39,7 @@ const Collapse: ParentComponent<Props> = (props) => {
<div
class={twMerge(
getCollapseContentClassName(),
'collapse-content grid grid-cols-1 gap-2 overflow-hidden transition-opacity duration-1000 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
'collapse-content grid auto-rows-min grid-cols-2 gap-2 transition-opacity duration-1000 lg:grid-cols-3 xl:grid-cols-4',
)}
>
{content}

26
src/components/ProxyNodeCard.tsx
View File

@ -10,14 +10,16 @@ export default (props: {
const { proxyName, isSelected, onClick } = props
const { delayMap, proxyNodeMap } = useProxies()
const proxyNode = createMemo(() => proxyNodeMap()[proxyName])
const Delay = (proxyname: string) => {
const delay = delayMap()[proxyname]
let textClassName = 'text-green-500'
if (typeof delay !== 'number' || delay === 0) {
return ''
}
let textClassName = 'text-green-500'
if (delay > 500) {
textClassName = 'text-red-500'
} else if (delay > 200) {
@ -27,25 +29,35 @@ export default (props: {
return <span class={textClassName}>{delay}ms</span>
}
const formatProxyType = (type: string) => {
const t = type.toLowerCase()
if (t === 'shadowsocks') {
return 'SS'
}
return t
}
return (
<div
class={twMerge(
'card card-bordered tooltip tooltip-bottom card-compact flex gap-1 p-4',
isSelected
? 'border-primary bg-success-content text-success'
: 'border-secondary',
onClick && 'cursor-pointer',
'card card-bordered tooltip tooltip-bottom card-compact gap-2 p-4',
)}
onClick={() => onClick?.()}
data-tip={proxyName}
>
<div class="flex truncate">{proxyName}</div>
<div class="flex flex-row">
<div class="flex flex-1 truncate text-sm text-slate-500">
{proxyNode().type}
<div class="truncate text-left">{proxyName}</div>
<div class="flex items-center justify-between gap-1">
<div class="truncate text-xs text-slate-500">
{formatProxyType(proxyNode().type)}
{proxyNode().udp ? ' :: udp' : ''}
</div>
<div>{Delay(proxyName)}</div>
<div class="text-xs">{Delay(proxyName)}</div>
</div>
</div>
)

7
src/pages/Proxies.tsx
View File

@ -36,7 +36,7 @@ export default () => {
<div>
<h1 class="pb-4 text-lg font-semibold">Proxies</h1>
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
<For each={proxies()}>
{(proxy) => {
const title = (
@ -54,6 +54,7 @@ export default () => {
</div>
</>
)
const content = (
<For each={proxy.all}>
{(proxyName) => (
@ -77,7 +78,7 @@ export default () => {
[`group-${proxy.name}`]: val,
})
}
></Collapse>
/>
)
}}
</For>
@ -87,7 +88,7 @@ export default () => {
<div>
<h1 class="pb-4 text-lg font-semibold">Proxy Providers</h1>
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
<For each={proxyProviders()}>
{(proxyProvider) => {
const title = <>{proxyProvider.name}</>