mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 17:25:34 +08:00
feat: preview by auto
This commit is contained in:
parent
bfb1c12819
commit
3257791dec
@ -1,16 +1,35 @@
|
|||||||
import { Show } from 'solid-js'
|
import { Show, createMemo } from 'solid-js'
|
||||||
import { PROXIES_PREVIEW_TYPE } from '~/config/enum'
|
import { PROXIES_PREVIEW_TYPE } from '~/config/enum'
|
||||||
import { proxiesPreviewType } from '~/pages/Config'
|
import { proxiesPreviewType } from '~/pages/Config'
|
||||||
import ProxyPreviewBar from './ProxyPreviewBar'
|
import ProxyPreviewBar from './ProxyPreviewBar'
|
||||||
import ProxyPreviewDots from './ProxyPreviewDots'
|
import ProxyPreviewDots from './ProxyPreviewDots'
|
||||||
|
|
||||||
export default (props: { proxyNameList: string[]; now?: string }) => {
|
export default (props: { proxyNameList: string[]; now?: string }) => {
|
||||||
|
const isSmallGroup = createMemo(() => props.proxyNameList.length <= 30)
|
||||||
|
const isShowBar = createMemo(() => {
|
||||||
|
const type = proxiesPreviewType()
|
||||||
|
|
||||||
|
return (
|
||||||
|
type === PROXIES_PREVIEW_TYPE.BAR ||
|
||||||
|
(type === PROXIES_PREVIEW_TYPE.Auto && !isSmallGroup())
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
const isShowDots = createMemo(() => {
|
||||||
|
const type = proxiesPreviewType()
|
||||||
|
|
||||||
|
return (
|
||||||
|
type === PROXIES_PREVIEW_TYPE.BAR ||
|
||||||
|
(type === PROXIES_PREVIEW_TYPE.Auto && isSmallGroup())
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Show when={proxiesPreviewType() === PROXIES_PREVIEW_TYPE.BAR}>
|
<Show when={isShowBar()}>
|
||||||
<ProxyPreviewBar proxyNameList={props.proxyNameList} now={props.now} />
|
<ProxyPreviewBar proxyNameList={props.proxyNameList} now={props.now} />
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={proxiesPreviewType() === PROXIES_PREVIEW_TYPE.DOTS}>
|
<Show when={isShowDots()}>
|
||||||
<ProxyPreviewDots proxyNameList={props.proxyNameList} now={props.now} />
|
<ProxyPreviewDots proxyNameList={props.proxyNameList} now={props.now} />
|
||||||
</Show>
|
</Show>
|
||||||
</>
|
</>
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { createMemo } from 'solid-js'
|
import { createMemo } from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
|
||||||
import Delay from '~/components/Delay'
|
import Delay from '~/components/Delay'
|
||||||
import { DELAY } from '~/config/enum'
|
import { DELAY } from '~/config/enum'
|
||||||
import { useProxies } from '~/signals/proxies'
|
import { useProxies } from '~/signals/proxies'
|
||||||
@ -32,28 +31,28 @@ export default (props: { proxyNameList: string[]; now?: string }) => {
|
|||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex w-full items-center">
|
<div class="flex h-6 w-full items-center">
|
||||||
<div class="flex flex-1 overflow-hidden rounded-2xl">
|
<div class="flex flex-1 overflow-hidden rounded-2xl">
|
||||||
<div
|
<div
|
||||||
class={twMerge('h-2 bg-success')}
|
class="h-2 bg-success"
|
||||||
style={{
|
style={{
|
||||||
width: `${(good() * 100) / all()}%`, // cant use tw class cause dynamic classname wont import
|
width: `${(good() * 100) / all()}%`, // cant use tw class cause dynamic classname wont import
|
||||||
}}
|
}}
|
||||||
></div>
|
></div>
|
||||||
<div
|
<div
|
||||||
class={twMerge('h-2 bg-warning')}
|
class="h-2 bg-warning"
|
||||||
style={{
|
style={{
|
||||||
width: `${(middle() * 100) / all()}%`,
|
width: `${(middle() * 100) / all()}%`,
|
||||||
}}
|
}}
|
||||||
></div>
|
></div>
|
||||||
<div
|
<div
|
||||||
class={twMerge('h-2 bg-error')}
|
class="h-2 bg-error"
|
||||||
style={{
|
style={{
|
||||||
width: `${(slow() * 100) / all()}%`,
|
width: `${(slow() * 100) / all()}%`,
|
||||||
}}
|
}}
|
||||||
></div>
|
></div>
|
||||||
<div
|
<div
|
||||||
class={twMerge('h-2 bg-neutral')}
|
class="h-2 bg-neutral"
|
||||||
style={{
|
style={{
|
||||||
width: `${(notConnected() * 100) / all()}%`,
|
width: `${(notConnected() * 100) / all()}%`,
|
||||||
}}
|
}}
|
||||||
|
@ -23,6 +23,7 @@ export enum DELAY {
|
|||||||
export enum PROXIES_PREVIEW_TYPE {
|
export enum PROXIES_PREVIEW_TYPE {
|
||||||
DOTS = 'dots',
|
DOTS = 'dots',
|
||||||
BAR = 'bar',
|
BAR = 'bar',
|
||||||
|
Auto = 'auto',
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum LANG {
|
export enum LANG {
|
||||||
|
@ -34,4 +34,8 @@ export default {
|
|||||||
close: 'Close',
|
close: 'Close',
|
||||||
reset: 'Reset',
|
reset: 'Reset',
|
||||||
dnsQuery: 'DNS Query',
|
dnsQuery: 'DNS Query',
|
||||||
|
dots: 'Dots',
|
||||||
|
bar: 'Bar',
|
||||||
|
auto: 'Auto',
|
||||||
|
proxiesPreviewType: 'Proxies preview type',
|
||||||
}
|
}
|
||||||
|
@ -34,4 +34,8 @@ export default {
|
|||||||
close: '关闭',
|
close: '关闭',
|
||||||
reset: '重置',
|
reset: '重置',
|
||||||
dnsQuery: 'DNS 查询',
|
dnsQuery: 'DNS 查询',
|
||||||
|
dots: '点阵',
|
||||||
|
bar: '条形',
|
||||||
|
auto: '自适应',
|
||||||
|
proxiesPreviewType: '节点组预览样式',
|
||||||
}
|
}
|
||||||
|
@ -134,6 +134,8 @@ export const [proxiesPreviewType, setProxiesPreviewType] = makePersisted(
|
|||||||
)
|
)
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
|
const [t] = useI18n()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-4">
|
||||||
<DNSQueryForm />
|
<DNSQueryForm />
|
||||||
@ -141,31 +143,23 @@ export default () => {
|
|||||||
<ConfigForm />
|
<ConfigForm />
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div>Proxies preview type:</div>
|
<div>{t('proxiesPreviewType')}</div>
|
||||||
|
<div class="flex">
|
||||||
<div class="join">
|
<For each={Object.values(PROXIES_PREVIEW_TYPE)}>
|
||||||
|
{(value) => (
|
||||||
<label class="flex items-center">
|
<label class="flex items-center">
|
||||||
Bar
|
{t(value)}
|
||||||
<input
|
<input
|
||||||
class="radio m-4"
|
class="radio m-4"
|
||||||
aria-label="Bar"
|
aria-label={value}
|
||||||
type="radio"
|
type="radio"
|
||||||
name="proxiesPreviewType"
|
name="proxiesPreviewType"
|
||||||
checked={PROXIES_PREVIEW_TYPE.BAR === proxiesPreviewType()}
|
checked={value === proxiesPreviewType()}
|
||||||
onChange={() => setProxiesPreviewType(PROXIES_PREVIEW_TYPE.BAR)}
|
onChange={() => setProxiesPreviewType(value)}
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label class="flex items-center">
|
|
||||||
Dots
|
|
||||||
<input
|
|
||||||
class="radio m-4"
|
|
||||||
aria-label="Dots"
|
|
||||||
type="radio"
|
|
||||||
name="proxiesPreviewType"
|
|
||||||
checked={PROXIES_PREVIEW_TYPE.DOTS === proxiesPreviewType()}
|
|
||||||
onChange={() => setProxiesPreviewType(PROXIES_PREVIEW_TYPE.DOTS)}
|
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user