mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat: config for render proxies in same page
This commit is contained in:
parent
98f6293290
commit
5bc540eeff
@ -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'),
|
||||
|
@ -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',
|
||||
}
|
||||
|
@ -56,4 +56,6 @@ export default {
|
||||
orderName_asc: '按名称字母排序 (A-Z)',
|
||||
orderName_desc: '按名称字母排序 (Z-A)',
|
||||
ms: '毫秒',
|
||||
updated: '更新于',
|
||||
renderProxiesInSamePage: '将代理和代理提供者显示在同一页',
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -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}`]}>
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -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')
|
||||
|
Loading…
Reference in New Issue
Block a user