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

feat(proxies): default proxies and remove all tab

Browse Source
This commit is contained in:
Zephyruso 2023-09-07 13:09:27 +08:00
parent 44739f6962
commit 66c793550a
1 changed files with 39 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/pages/Proxies.tsx
View File

@ -19,7 +19,6 @@ import { proxiesOrderingType, useProxies } from '~/signals'
import type { Proxy } from '~/types' import type { Proxy } from '~/types'
enum ActiveTab { enum ActiveTab {
all = 'all',
proxyProviders = 'proxyProviders', proxyProviders = 'proxyProviders',
proxies = 'proxies', proxies = 'proxies',
} }
@ -75,66 +74,60 @@ export default () => {
setIsAllProviderUpdating(false) setIsAllProviderUpdating(false)
} }
const [activeTab, setActiveTab] = createSignal(ActiveTab.all) const [activeTab, setActiveTab] = createSignal(ActiveTab.proxies)
const tabs = () => [ const tabs = () => [
{ {
type: ActiveTab.all, type: ActiveTab.proxies,
name: t('all'), name: t('proxies'),
count: proxyProviders().length + proxies().length, count: proxies().length,
}, },
{ {
type: ActiveTab.proxyProviders, type: ActiveTab.proxyProviders,
name: t('proxyProviders'), name: t('proxyProviders'),
count: proxyProviders().length, count: proxyProviders().length,
}, },
{
type: ActiveTab.proxies,
name: t('proxies'),
count: proxies().length,
},
] ]
return ( return (
<div class="flex h-full flex-col gap-2"> <div class="flex h-full flex-col gap-2">
<div class="flex items-center justify-between gap-2"> <Show when={proxyProviders().length > 0}>
<div class="tabs tabs-boxed gap-2"> <div class="flex items-center justify-between gap-2">
<For each={tabs()}> <div class="tabs-boxed tabs gap-2">
{(tab) => ( <For each={tabs()}>
<button {(tab) => (
class={twMerge( <button
activeTab() === tab.type && 'tab-active', class={twMerge(
'tab gap-2 px-2', activeTab() === tab.type && 'tab-active',
)} 'tab gap-2 px-2',
onClick={() => setActiveTab(tab.type)} )}
> onClick={() => setActiveTab(tab.type)}
<span>{tab.name}</span> >
<div class="badge badge-sm">{tab.count}</div> <span>{tab.name}</span>
</button> <div class="badge badge-sm">{tab.count}</div>
)} </button>
</For> )}
</div> </For>
</div>
<Button <Show when={activeTab() === ActiveTab.proxyProviders}>
class="btn btn-circle btn-sm" <Button
disabled={isAllProviderUpdating()} class="btn btn-circle btn-sm"
onClick={(e) => onUpdateAllProviderClick(e)} disabled={isAllProviderUpdating()}
> onClick={(e) => onUpdateAllProviderClick(e)}
<IconReload >
class={twMerge( <IconReload
isAllProviderUpdating() && 'animate-spin text-success', class={twMerge(
)} isAllProviderUpdating() && 'animate-spin text-success',
/> )}
</Button> />
</div> </Button>
</Show>
</div>
</Show>
<div class="flex-1 overflow-y-auto"> <div class="flex-1 overflow-y-auto">
<Show <Show when={activeTab() === ActiveTab.proxyProviders}>
when={
activeTab() === ActiveTab.all ||
activeTab() === ActiveTab.proxyProviders
}
>
<ForTwoColumns <ForTwoColumns
subChild={proxyProviders().map((proxyProvider) => { subChild={proxyProviders().map((proxyProvider) => {
const sortedProxyNames = sortProxiesByOrderingType( const sortedProxyNames = sortProxiesByOrderingType(
@ -215,15 +208,7 @@ export default () => {
/> />
</Show> </Show>
<Show when={activeTab() === ActiveTab.all}> <Show when={activeTab() === ActiveTab.proxies}>
<div class="divider" />
</Show>
<Show
when={
activeTab() === ActiveTab.all || activeTab() === ActiveTab.proxies
}
>
<ForTwoColumns <ForTwoColumns
subChild={proxies().map((proxy) => { subChild={proxies().map((proxy) => {
const sortedProxyNames = sortProxiesByOrderingType( const sortedProxyNames = sortProxiesByOrderingType(