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