fix: enum of not connect for mihomo (#868)

* fix: enum of not connect for mihomo & replace all latencyMap() with a get

* feat: unify connections style
This commit is contained in:
YetAnotherZephyruso 2024-07-26 18:28:55 +08:00 committed by GitHub
parent bdd1986f05
commit f6a4d551ba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 50 additions and 62 deletions

View File

@ -110,7 +110,7 @@ export const Header = () => {
checked={openedDrawer()} checked={openedDrawer()}
/> />
<div class="drawer-content flex items-center"> <div class="drawer-content flex w-6 items-center">
<label for="navs" class="btn btn-circle drawer-button btn-sm"> <label for="navs" class="btn btn-circle drawer-button btn-sm">
<IconMenu /> <IconMenu />
</label> </label>

View File

@ -1,7 +1,7 @@
import { useProxies } from '~/signals' import { useProxies } from '~/signals'
import { proxyIPv6SupportMap } from '~/signals/ipv6' import { proxyIPv6SupportMap } from '~/signals/ipv6'
export const IPv6Support = (props: { name?: string; class?: string }) => { export const IPv6Support = (props: { name?: string }) => {
const { getNowProxyNodeName } = useProxies() const { getNowProxyNodeName } = useProxies()
const support = createMemo(() => { const support = createMemo(() => {
@ -10,7 +10,7 @@ export const IPv6Support = (props: { name?: string; class?: string }) => {
return ( return (
<Show when={support()}> <Show when={support()}>
<span class={`scale-75 ${props.class}`}>IPv6</span> <span class={`text-xs`}>IPv6</span>
</Show> </Show>
) )
} }

View File

@ -4,10 +4,10 @@ import { latencyQualityMap, useProxies } from '~/signals'
export const Latency = (props: { name?: string; class?: string }) => { export const Latency = (props: { name?: string; class?: string }) => {
const [t] = useI18n() const [t] = useI18n()
const { getNowProxyNodeName, latencyMap } = useProxies() const { getLatencyByName } = useProxies()
const [textClassName, setTextClassName] = createSignal('') const [textClassName, setTextClassName] = createSignal('')
const latency = createMemo(() => { const latency = createMemo(() => {
return latencyMap()[getNowProxyNodeName(props.name || '')] return getLatencyByName(props.name || '')
}) })
createEffect(() => { createEffect(() => {

View File

@ -5,9 +5,9 @@ export const ProxyPreviewBar = (props: {
proxyNameList: string[] proxyNameList: string[]
now?: string now?: string
}) => { }) => {
const { latencyMap } = useProxies() const { getLatencyByName } = useProxies()
const latencyList = createMemo(() => const latencyList = createMemo(() =>
props.proxyNameList.map((name) => latencyMap()[name]), props.proxyNameList.map((name) => getLatencyByName(name)),
) )
const all = createMemo(() => latencyList().length) const all = createMemo(() => latencyList().length)

View File

@ -40,7 +40,7 @@ export const ProxyPreviewDots = (props: {
proxyNameList: string[] proxyNameList: string[]
now?: string now?: string
}) => { }) => {
const { latencyMap } = useProxies() const { getLatencyByName } = useProxies()
return ( return (
<div class="flex items-center gap-2 py-2"> <div class="flex items-center gap-2 py-2">
@ -48,7 +48,7 @@ export const ProxyPreviewDots = (props: {
<For <For
each={props.proxyNameList.map((name): [string, number] => [ each={props.proxyNameList.map((name): [string, number] => [
name, name,
latencyMap()[name], getLatencyByName(name),
])} ])}
> >
{([name, latency]) => { {([name, latency]) => {

View File

@ -80,13 +80,13 @@ export const DEFAULT_CHART_OPTIONS: ApexOptions = {
} }
export enum LATENCY_QUALITY_MAP_HTTP { export enum LATENCY_QUALITY_MAP_HTTP {
NOT_CONNECTED = -1, NOT_CONNECTED = 0,
MEDIUM = 200, MEDIUM = 200,
HIGH = 500, HIGH = 500,
} }
export enum LATENCY_QUALITY_MAP_HTTPS { export enum LATENCY_QUALITY_MAP_HTTPS {
NOT_CONNECTED = -1, NOT_CONNECTED = 0,
MEDIUM = 800, MEDIUM = 800,
HIGH = 1500, HIGH = 1500,
} }

View File

@ -1,5 +1,5 @@
import { PROXIES_ORDERING_TYPE } from '~/constants' import { PROXIES_ORDERING_TYPE } from '~/constants'
import { latencyQualityMap } from '~/signals' import { latencyQualityMap, useProxies } from '~/signals'
export const formatProxyType = (type = '') => { export const formatProxyType = (type = '') => {
const t = type.toLowerCase() const t = type.toLowerCase()
@ -36,21 +36,17 @@ export const filterSpecialProxyType = (type = '') => {
export const sortProxiesByOrderingType = ( export const sortProxiesByOrderingType = (
proxyNames: string[], proxyNames: string[],
proxyLatencyMap: Record<string, number>,
orderingType: PROXIES_ORDERING_TYPE, orderingType: PROXIES_ORDERING_TYPE,
proxyGroupNames: Set<string> | undefined,
) => { ) => {
const { getLatencyByName } = useProxies()
if (orderingType === PROXIES_ORDERING_TYPE.NATURAL) { if (orderingType === PROXIES_ORDERING_TYPE.NATURAL) {
return proxyNames return proxyNames
} }
return proxyNames.sort((a, b) => { return proxyNames.sort((a, b) => {
if (proxyGroupNames?.has(a) && !proxyGroupNames?.has(b)) return -1 const prevLatency = getLatencyByName(a)
const nextLatency = getLatencyByName(b)
if (proxyGroupNames?.has(b) && !proxyGroupNames?.has(a)) return 1
const prevLatency = proxyLatencyMap[a]
const nextLatency = proxyLatencyMap[b]
switch (orderingType) { switch (orderingType) {
case PROXIES_ORDERING_TYPE.LATENCY_ASC: case PROXIES_ORDERING_TYPE.LATENCY_ASC:
@ -81,14 +77,13 @@ export const sortProxiesByOrderingType = (
export const filterProxiesByAvailability = ( export const filterProxiesByAvailability = (
proxyNames: string[], proxyNames: string[],
proxyLatencyMap: Record<string, number>,
excludes: Set<string>,
enabled?: boolean, enabled?: boolean,
) => ) => {
enabled const { getLatencyByName } = useProxies()
? proxyNames.filter((name) =>
excludes?.has(name) return enabled
? true ? proxyNames.filter(
: proxyLatencyMap[name] !== latencyQualityMap().NOT_CONNECTED, (name) => getLatencyByName(name) !== latencyQualityMap().NOT_CONNECTED,
) )
: proxyNames : proxyNames
}

View File

@ -358,13 +358,13 @@ export default () => {
<div class="flex h-full flex-col gap-2"> <div class="flex h-full flex-col gap-2">
<div class="flex w-full flex-wrap items-center gap-2"> <div class="flex w-full flex-wrap items-center gap-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="tabs-boxed tabs gap-2"> <div class="tabs-boxed tabs gap-2 pl-0">
<Index each={tabs()}> <Index each={tabs()}>
{(tab) => ( {(tab) => (
<button <button
class={twMerge( class={twMerge(
activeTab() === tab().type && 'tab-active', activeTab() === tab().type && 'tab-active',
'tab-sm sm:tab-md tab gap-2', 'tab-sm sm:tab-md tab gap-2 px-2',
)} )}
onClick={() => setActiveTab(tab().type)} onClick={() => setActiveTab(tab().type)}
> >
@ -386,7 +386,7 @@ export default () => {
</div> </div>
<select <select
class="select select-bordered select-primary select-sm w-full max-w-full flex-1 sm:select-md" class="select select-bordered select-primary select-sm w-full max-w-full flex-1"
onChange={(e) => setSourceIPFilter(e.target.value)} onChange={(e) => setSourceIPFilter(e.target.value)}
> >
<option value="">{t('all')}</option> <option value="">{t('all')}</option>
@ -410,19 +410,19 @@ export default () => {
<div class="join flex flex-1 items-center md:flex-1"> <div class="join flex flex-1 items-center md:flex-1">
<input <input
type="search" type="search"
class="input input-sm join-item input-primary min-w-0 flex-1 sm:input-md" class="input input-sm join-item input-primary min-w-0 flex-1"
placeholder={t('search')} placeholder={t('search')}
onInput={(e) => setGlobalFilter(e.target.value)} onInput={(e) => setGlobalFilter(e.target.value)}
/> />
<Button <Button
class="join-item btn-sm sm:btn-md" class="btn btn-primary join-item btn-sm"
onClick={() => setPaused((paused) => !paused)} onClick={() => setPaused((paused) => !paused)}
icon={paused() ? <IconPlayerPlay /> : <IconPlayerPause />} icon={paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
/> />
<Button <Button
class="join-item btn-sm sm:btn-md" class="btn btn-primary join-item btn-sm"
onClick={() => { onClick={() => {
if (table.getState().globalFilter) { if (table.getState().globalFilter) {
table table
@ -438,7 +438,7 @@ export default () => {
/> />
<Button <Button
class="btn join-item btn-sm sm:btn-md" class="btn btn-primary join-item btn-sm"
onClick={() => connectionsSettingsModalRef?.showModal()} onClick={() => connectionsSettingsModalRef?.showModal()}
icon={<IconSettings />} icon={<IconSettings />}
/> />

View File

@ -124,18 +124,18 @@ export default () => {
<div class="join w-full"> <div class="join w-full">
<input <input
type="search" type="search"
class="input input-sm join-item input-primary flex-1 flex-shrink-0 sm:input-md" class="input input-sm join-item input-primary flex-1 flex-shrink-0"
placeholder={t('search')} placeholder={t('search')}
onInput={(e) => setGlobalFilter(e.target.value)} onInput={(e) => setGlobalFilter(e.target.value)}
/> />
<Button <Button
class="join-item btn-sm sm:btn-md" class="btn-primary join-item btn-sm"
onClick={() => setPaused((paused) => !paused)} onClick={() => setPaused((paused) => !paused)}
icon={paused() ? <IconPlayerPlay /> : <IconPlayerPause />} icon={paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
/> />
<Button <Button
class="join-item btn-sm sm:btn-md" class="btn-primary join-item btn-sm"
onClick={() => logsSettingsModalRef?.showModal()} onClick={() => logsSettingsModalRef?.showModal()}
icon={<IconSettings />} icon={<IconSettings />}
/> />

View File

@ -49,8 +49,6 @@ export default () => {
fetchProxies, fetchProxies,
proxies, proxies,
selectProxyInGroup, selectProxyInGroup,
latencyMap,
proxyGroupNames,
proxyProviders, proxyProviders,
updateProviderByProviderName, updateProviderByProviderName,
updateAllProvider, updateAllProvider,
@ -120,7 +118,7 @@ export default () => {
return ( return (
<div class="flex h-full flex-col gap-2"> <div class="flex h-full flex-col gap-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="tabs-boxed tabs gap-2"> <div class="tabs-boxed tabs gap-2 pl-0">
<For each={tabs()}> <For each={tabs()}>
{(tab) => ( {(tab) => (
<button <button
@ -154,7 +152,7 @@ export default () => {
<div class="ml-auto"> <div class="ml-auto">
<Button <Button
class="btn-circle btn-sm sm:btn-md" class="btn-circle btn-primary btn-sm"
onClick={() => proxiesSettingsModalRef?.showModal()} onClick={() => proxiesSettingsModalRef?.showModal()}
icon={<IconSettings />} icon={<IconSettings />}
/> />
@ -175,12 +173,8 @@ export default () => {
filterProxiesByAvailability( filterProxiesByAvailability(
sortProxiesByOrderingType( sortProxiesByOrderingType(
proxyGroup.all ?? [], proxyGroup.all ?? [],
latencyMap(),
proxiesOrderingType(), proxiesOrderingType(),
proxyGroupNames(),
), ),
latencyMap(),
proxyGroupNames(),
hideUnAvailableProxies(), hideUnAvailableProxies(),
), ),
) )
@ -266,9 +260,7 @@ export default () => {
const sortedProxyNames = createMemo(() => const sortedProxyNames = createMemo(() =>
sortProxiesByOrderingType( sortProxiesByOrderingType(
proxyProvider.proxies.map((i) => i.name) ?? [], proxyProvider.proxies.map((i) => i.name) ?? [],
latencyMap(),
proxiesOrderingType(), proxiesOrderingType(),
undefined,
), ),
) )

View File

@ -126,7 +126,7 @@ export default () => {
return ( return (
<div class="flex h-full flex-col gap-2"> <div class="flex h-full flex-col gap-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="tabs-boxed tabs gap-2"> <div class="tabs-boxed tabs gap-2 pl-0">
<For each={tabs()}> <For each={tabs()}>
{(tab) => ( {(tab) => (
<button <button
@ -160,7 +160,7 @@ export default () => {
</div> </div>
<input <input
class="input input-bordered input-primary" class="input input-sm input-bordered input-primary"
placeholder={t('search')} placeholder={t('search')}
value={globalFilter()} value={globalFilter()}
onInput={(e) => setGlobalFilter(e.currentTarget.value)} onInput={(e) => setGlobalFilter(e.currentTarget.value)}

View File

@ -19,7 +19,7 @@ createEffect(() => {
seq++ seq++
}) })
export function useLogs() { export const useLogs = () => {
return { return {
logs, logs,
paused, paused,

View File

@ -56,13 +56,11 @@ const [isAllProviderUpdating, setIsAllProviderUpdating] = createSignal(false)
// these signals should be global state // these signals should be global state
const [proxies, setProxies] = createSignal<ProxyWithProvider[]>([]) const [proxies, setProxies] = createSignal<ProxyWithProvider[]>([])
const [proxyGroupNames, setProxyGroupNames] = createSignal<Set<string>>(
new Set(),
)
const [proxyProviders, setProxyProviders] = createSignal< const [proxyProviders, setProxyProviders] = createSignal<
(ProxyProvider & { proxies: ProxyNodeWithProvider[] })[] (ProxyProvider & { proxies: ProxyNodeWithProvider[] })[]
>([]) >([])
// DO NOT use latency from latency map directly use getLatencyByName instead
const [latencyMap, setLatencyMap] = createSignal<Record<string, number>>({}) const [latencyMap, setLatencyMap] = createSignal<Record<string, number>>({})
const [proxyNodeMap, setProxyNodeMap] = createSignal<Record<string, ProxyInfo>>( const [proxyNodeMap, setProxyNodeMap] = createSignal<Record<string, ProxyInfo>>(
{}, {},
@ -152,9 +150,6 @@ export const useProxies = () => {
batch(() => { batch(() => {
setProxies(sortedProxies) setProxies(sortedProxies)
setProxyGroupNames(
new Set(['DIRECT', 'REJECT', ...sortedProxies.map((p) => p.name)]),
)
setProxyProviders(sortedProviders) setProxyProviders(sortedProviders)
setProxiesInfo(allProxies) setProxiesInfo(allProxies)
}) })
@ -185,10 +180,12 @@ export const useProxies = () => {
} }
const proxyLatencyTest = async (proxyName: string, provider: string) => { const proxyLatencyTest = async (proxyName: string, provider: string) => {
setProxyLatencyTestingMap(proxyName, async () => { const nodeName = getNowProxyNodeName(proxyName)
await proxyIPv6SupportTest(proxyName, provider)
setProxyLatencyTestingMap(nodeName, async () => {
await proxyIPv6SupportTest(nodeName, provider)
const { delay } = await proxyLatencyTestAPI( const { delay } = await proxyLatencyTestAPI(
proxyName, nodeName,
provider, provider,
urlForLatencyTest(), urlForLatencyTest(),
latencyTestTimeoutDuration(), latencyTestTimeoutDuration(),
@ -196,7 +193,7 @@ export const useProxies = () => {
setLatencyMap((latencyMap) => ({ setLatencyMap((latencyMap) => ({
...latencyMap, ...latencyMap,
[proxyName]: delay, [nodeName]: delay,
})) }))
}) })
} }
@ -257,6 +254,10 @@ export const useProxies = () => {
return node.name return node.name
} }
const getLatencyByName = (name: string) => {
return latencyMap()[getNowProxyNodeName(name)]
}
return { return {
proxyLatencyTestingMap, proxyLatencyTestingMap,
proxyGroupLatencyTestingMap, proxyGroupLatencyTestingMap,
@ -264,7 +265,6 @@ export const useProxies = () => {
updatingMap, updatingMap,
isAllProviderUpdating, isAllProviderUpdating,
proxies, proxies,
proxyGroupNames,
proxyProviders, proxyProviders,
proxyLatencyTest, proxyLatencyTest,
proxyGroupLatencyTest, proxyGroupLatencyTest,
@ -276,5 +276,6 @@ export const useProxies = () => {
updateAllProvider, updateAllProvider,
proxyProviderLatencyTest, proxyProviderLatencyTest,
getNowProxyNodeName, getNowProxyNodeName,
getLatencyByName,
} }
} }