feat: preview by auto

This commit is contained in:
Zephyruso 2023-09-02 14:25:22 +08:00
parent bfb1c12819
commit 3257791dec
6 changed files with 55 additions and 34 deletions

View File

@ -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>
</> </>

View File

@ -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()}%`,
}} }}

View File

@ -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 {

View File

@ -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',
} }

View File

@ -34,4 +34,8 @@ export default {
close: '关闭', close: '关闭',
reset: '重置', reset: '重置',
dnsQuery: 'DNS 查询', dnsQuery: 'DNS 查询',
dots: '点阵',
bar: '条形',
auto: '自适应',
proxiesPreviewType: '节点组预览样式',
} }

View File

@ -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>