feat: config for render proxies in same page

This commit is contained in:
Zephyruso 2023-09-04 19:12:27 +08:00
parent 98f6293290
commit 5bc540eeff
8 changed files with 103 additions and 63 deletions

View File

@ -17,7 +17,12 @@ import { For, ParentComponent, Show, createMemo, createSignal } from 'solid-js'
import { twMerge } from 'tailwind-merge'
import { Button } from '~/components'
import { LANG, ROUTES, themes } from '~/constants'
import { setCurTheme, setSelectedEndpoint, useProxies } from '~/signals'
import {
renderProxiesInSamePage,
setCurTheme,
setSelectedEndpoint,
useProxies,
} from '~/signals'
const Nav: ParentComponent<{ href: string; tooltip: string }> = ({
href,
@ -101,7 +106,7 @@ export const Header = () => {
},
]
if (proxyProviders().length > 0) {
if (proxyProviders().length > 0 && !renderProxiesInSamePage()) {
list.splice(2, 0, {
href: ROUTES.ProxyProvider,
name: t('proxyProviders'),

View File

@ -56,4 +56,6 @@ export default {
orderName_asc: 'By name alphabetically (A-Z)',
orderName_desc: 'By name alphabetically (Z-A)',
ms: 'ms',
updated: 'Updated',
renderProxiesInSamePage: 'Render proxies and proxy provider in same page',
}

View File

@ -56,4 +56,6 @@ export default {
orderName_asc: '按名称字母排序 (A-Z)',
orderName_desc: '按名称字母排序 (Z-A)',
ms: '毫秒',
updated: '更新于',
renderProxiesInSamePage: '将代理和代理提供者显示在同一页',
}

View File

@ -18,6 +18,7 @@ import {
proxiesOrderingType,
proxiesPreviewType,
renderInTwoColumn,
renderProxiesInSamePage,
setAutoCloseConns,
setAutoSwitchTheme,
setFavDayTheme,
@ -25,6 +26,7 @@ import {
setProxiesOrderingType,
setProxiesPreviewType,
setRenderInTwoColumn,
setRenderProxiesInSamePage,
setUrlForLatencyTest,
urlForLatencyTest,
useRequest,
@ -214,6 +216,19 @@ const ConfigForXd = () => {
}}
/>
</div>
<div class="flex flex-col">
<div class="pb-4 text-lg font-semibold">
{t('renderProxiesInSamePage')}
</div>
<input
type="checkbox"
class="toggle"
checked={renderProxiesInSamePage()}
onChange={(e) => {
setRenderProxiesInSamePage(e.target.checked)
}}
/>
</div>
<div class="flex flex-col">
<div class="pb-4 text-lg font-semibold">{t('autoSwitchTheme')}</div>
<input

View File

@ -12,8 +12,13 @@ import {
handleAnimatedBtnClickWithCallback,
sortProxiesByOrderingType,
} from '~/helpers'
import { proxiesOrderingType, useProxies } from '~/signals'
import {
proxiesOrderingType,
renderProxiesInSamePage,
useProxies,
} from '~/signals'
import type { Proxy } from '~/types'
import ProxyProvider from './ProxyProvider'
export default () => {
const [t] = useI18n()
@ -41,66 +46,72 @@ export default () => {
}
return (
<div class="flex flex-col gap-2">
<h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
{t('proxies')}
</h1>
<ForTwoColumns
subChild={proxies().map((proxy) => {
const sortedProxyNames = sortProxiesByOrderingType(
proxy.all ?? [],
latencyMap(),
proxiesOrderingType(),
)
<>
<div class="flex flex-col gap-2">
<h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
{t('proxies')}
</h1>
<ForTwoColumns
subChild={proxies().map((proxy) => {
const sortedProxyNames = sortProxiesByOrderingType(
proxy.all ?? [],
latencyMap(),
proxiesOrderingType(),
)
const title = (
<>
<div class="mr-10 flex items-center justify-between">
<span>{proxy.name}</span>
<Button
class="btn-circle btn-sm"
onClick={(e) => onSpeedTestClick(e, proxy.name)}
>
<IconBrandSpeedtest />
</Button>
</div>
<div class="text-sm text-slate-500">
{proxy.type} :: {proxy.now}
</div>
<Show when={!collapsedMap()[`group-${proxy.name}`]}>
<ProxyNodePreview
proxyNameList={sortedProxyNames}
now={proxy.now}
/>
</Show>
</>
)
const title = (
<>
<div class="mr-10 flex items-center justify-between">
<span>{proxy.name}</span>
<Button
class="btn-circle btn-sm"
onClick={(e) => onSpeedTestClick(e, proxy.name)}
>
<IconBrandSpeedtest />
</Button>
</div>
<div class="text-sm text-slate-500">
{proxy.type} :: {proxy.now}
</div>
<Show when={!collapsedMap()[`group-${proxy.name}`]}>
<ProxyNodePreview
proxyNameList={sortedProxyNames}
now={proxy.now}
/>
</Show>
</>
)
const content = (
<ProxyCardGroups
proxyNames={sortedProxyNames}
now={proxy.now}
onClick={(name) => {
void onProxyNodeClick(proxy, name)
}}
/>
)
const content = (
<ProxyCardGroups
proxyNames={sortedProxyNames}
now={proxy.now}
onClick={(name) => {
void onProxyNodeClick(proxy, name)
}}
/>
)
return (
<Collapse
isOpen={collapsedMap()[`group-${proxy.name}`]}
title={title}
content={content}
onCollapse={(val) =>
setCollapsedMap({
...collapsedMap(),
[`group-${proxy.name}`]: val,
})
}
/>
)
})}
/>
</div>
return (
<Collapse
isOpen={collapsedMap()[`group-${proxy.name}`]}
title={title}
content={content}
onCollapse={(val) =>
setCollapsedMap({
...collapsedMap(),
[`group-${proxy.name}`]: val,
})
}
/>
)
})}
/>
</div>
<Show when={renderProxiesInSamePage()}>
<div class="divider"></div>
<ProxyProvider />
</Show>
</>
)
}

View File

@ -95,7 +95,7 @@ export default () => {
subscriptionInfo={proxyProvider.subscriptionInfo}
/>
<div class="text-sm text-slate-500">
{proxyProvider.vehicleType} :: Updated{' '}
{proxyProvider.vehicleType} :: {t('updated')}{' '}
{formatTimeFromNow(proxyProvider.updatedAt)}
</div>
<Show when={!collapsedMap()[`provider-${proxyProvider.name}`]}>

View File

@ -90,7 +90,7 @@ export default () => {
</div>
<div class="text-xs text-slate-500">
{rulesProvider.vehicleType} / {rulesProvider.behavior} /
Updated {formatTimeFromNow(rulesProvider.updatedAt)}
{t('updated')} {formatTimeFromNow(rulesProvider.updatedAt)}
</div>
</div>
)}

View File

@ -40,6 +40,11 @@ export const [renderInTwoColumn, setRenderInTwoColumn] = makePersisted(
createSignal(true),
{ name: 'renderInTwoColumn', storage: localStorage },
)
export const [renderProxiesInSamePage, setRenderProxiesInSamePage] =
makePersisted(createSignal(false), {
name: 'renderProxiesInSamePage',
storage: localStorage,
})
export const isLatencyTestByHttps = () =>
urlForLatencyTest().startsWith('https')