mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat: rules provider pages
This commit is contained in:
parent
d7fb0b41ef
commit
65346ca743
@ -32,7 +32,9 @@ export default () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<h1 class="pb-2 text-lg font-semibold">{t('proxies')}</h1>
|
<h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
|
||||||
|
{t('proxies')}
|
||||||
|
</h1>
|
||||||
<ForTwoLine
|
<ForTwoLine
|
||||||
subChild={proxies().map((proxy) => {
|
subChild={proxies().map((proxy) => {
|
||||||
const title = (
|
const title = (
|
||||||
|
@ -51,7 +51,7 @@ export default () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<h1 class="pm-4 flex items-center text-lg font-semibold">
|
<h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
|
||||||
{t('proxyProviders')}
|
{t('proxyProviders')}
|
||||||
<button
|
<button
|
||||||
class="btn btn-circle btn-ghost btn-sm ml-2"
|
class="btn btn-circle btn-ghost btn-sm ml-2"
|
||||||
@ -64,7 +64,7 @@ export default () => {
|
|||||||
subChild={proxyProviders().map((proxyProvider) => {
|
subChild={proxyProviders().map((proxyProvider) => {
|
||||||
const title = (
|
const title = (
|
||||||
<>
|
<>
|
||||||
<div class="mr-10 flex items-center justify-between">
|
<div class="mr-8 flex items-center justify-between">
|
||||||
<span>{proxyProvider.name}</span>
|
<span>{proxyProvider.name}</span>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
|
@ -1,44 +1,55 @@
|
|||||||
import { useI18n } from '@solid-primitives/i18n'
|
import { useI18n } from '@solid-primitives/i18n'
|
||||||
|
import { IconReload } from '@tabler/icons-solidjs'
|
||||||
import InfiniteScroll from 'solid-infinite-scroll'
|
import InfiniteScroll from 'solid-infinite-scroll'
|
||||||
import { For, createMemo, createSignal, onMount } from 'solid-js'
|
import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
|
||||||
import { useRequest } from '~/signals'
|
import { useRules } from '~/signals/rules'
|
||||||
import type { Rule, RuleProvider } from '~/types'
|
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const [t] = useI18n()
|
const [t] = useI18n()
|
||||||
const request = useRequest()
|
const {
|
||||||
|
rules,
|
||||||
|
rulesProviders,
|
||||||
|
updateRules,
|
||||||
|
updateAllRuleProvider,
|
||||||
|
updateRuleProviderByName,
|
||||||
|
} = useRules()
|
||||||
const [maxRuleRender, setMaxRuleRender] = createSignal(100)
|
const [maxRuleRender, setMaxRuleRender] = createSignal(100)
|
||||||
const [rules, setRules] = createSignal<Rule[]>([])
|
|
||||||
const [rulesProviders, setRulesProviders] = createSignal<RuleProvider[]>([])
|
|
||||||
const renderRules = createMemo(() => rules().slice(0, maxRuleRender()))
|
const renderRules = createMemo(() => rules().slice(0, maxRuleRender()))
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const { rules } = await request
|
updateRules()
|
||||||
.get('rules')
|
|
||||||
.json<{ rules: Record<string, Rule> }>()
|
|
||||||
|
|
||||||
setRules(Object.values(rules))
|
|
||||||
|
|
||||||
const { providers } = await request
|
|
||||||
.get('providers/rules')
|
|
||||||
.json<{ providers: Record<string, RuleProvider> }>()
|
|
||||||
|
|
||||||
setRulesProviders(Object.values(providers))
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
|
||||||
|
const el = e.target as HTMLElement
|
||||||
|
|
||||||
|
el.classList.add('animate-spin')
|
||||||
|
e.stopPropagation()
|
||||||
|
await updateRuleProviderByName(name)
|
||||||
|
el.classList.remove('animate-spin')
|
||||||
|
}
|
||||||
|
|
||||||
|
const onUpdateAllProviderClick = async (e: MouseEvent) => {
|
||||||
|
const el = e.target as HTMLElement
|
||||||
|
|
||||||
|
el.classList.add('animate-spin')
|
||||||
|
e.stopPropagation()
|
||||||
|
await updateAllRuleProvider()
|
||||||
|
el.classList.remove('animate-spin')
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex w-full flex-row gap-4">
|
||||||
<div>
|
<div class="flex-1">
|
||||||
<h1 class="pb-4 text-lg font-semibold">{t('rules')}</h1>
|
<h1 class="pb-4 text-lg font-semibold">{t('rules')}</h1>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
|
|
||||||
<InfiniteScroll
|
<InfiniteScroll
|
||||||
each={renderRules()}
|
each={renderRules()}
|
||||||
hasMore={renderRules().length < rules().length}
|
hasMore={renderRules().length < rules().length}
|
||||||
next={() => setMaxRuleRender(maxRuleRender() + 100)}
|
next={() => setMaxRuleRender(maxRuleRender() + 100)}
|
||||||
>
|
>
|
||||||
{(rule) => (
|
{(rule) => (
|
||||||
<div class="card card-bordered card-compact bg-base-200 p-4">
|
<div class="card card-bordered card-compact mb-2 bg-base-200 p-4">
|
||||||
<div class="break-all">{rule.payload}</div>
|
<div class="break-all">{rule.payload}</div>
|
||||||
<div class="text-xs text-slate-500">
|
<div class="text-xs text-slate-500">
|
||||||
{rule.type} :: {rule.proxy}
|
{rule.type} :: {rule.proxy}
|
||||||
@ -47,16 +58,35 @@ export default () => {
|
|||||||
)}
|
)}
|
||||||
</InfiniteScroll>
|
</InfiniteScroll>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<Show when={rulesProviders().length > 0}>
|
||||||
<h1 class="pb-4 text-lg font-semibold">{t('ruleProviders')}</h1>
|
<div class="flex-1">
|
||||||
|
<h1 class="flex h-11 items-center pb-4 text-lg font-semibold">
|
||||||
|
{t('ruleProviders')}
|
||||||
|
<button
|
||||||
|
class="btn btn-circle btn-ghost btn-sm ml-2"
|
||||||
|
onClick={(e) => onUpdateAllProviderClick(e)}
|
||||||
|
>
|
||||||
|
<IconReload />
|
||||||
|
</button>
|
||||||
|
</h1>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
|
|
||||||
<For each={rulesProviders()}>
|
<For each={rulesProviders()}>
|
||||||
{(rulesProvider) => (
|
{(rulesProvider) => (
|
||||||
<div class="card card-bordered card-compact bg-base-200 p-4">
|
<div class="card card-bordered card-compact mb-2 bg-base-200 p-4">
|
||||||
<div>{rulesProvider.name}</div>
|
<div class="flex h-6 items-center justify-between">
|
||||||
|
<span>{rulesProvider.name}</span>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="btn btn-circle btn-sm mr-2"
|
||||||
|
onClick={(e) =>
|
||||||
|
onUpdateProviderClick(e, rulesProvider.name)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<IconReload />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="text-xs text-slate-500">
|
<div class="text-xs text-slate-500">
|
||||||
{rulesProvider.vehicleType} :: {rulesProvider.behavior} (
|
{rulesProvider.vehicleType} :: {rulesProvider.behavior} (
|
||||||
{rulesProvider.ruleCount})
|
{rulesProvider.ruleCount})
|
||||||
@ -65,7 +95,7 @@ export default () => {
|
|||||||
)}
|
)}
|
||||||
</For>
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -85,7 +85,7 @@ export function useProxies() {
|
|||||||
proxyGroup.now = proxyName
|
proxyGroup.now = proxyName
|
||||||
|
|
||||||
setProxies(proxyGroupList)
|
setProxies(proxyGroupList)
|
||||||
queueMicrotask(updateProxy)
|
// queueMicrotask(updateProxy)
|
||||||
}
|
}
|
||||||
|
|
||||||
const delayTestByProxyGroupName = async (proxyGroupName: string) => {
|
const delayTestByProxyGroupName = async (proxyGroupName: string) => {
|
||||||
|
46
src/signals/rules.ts
Normal file
46
src/signals/rules.ts
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { createSignal } from 'solid-js'
|
||||||
|
import { useRequest } from '~/signals'
|
||||||
|
import type { Rule, RuleProvider } from '~/types'
|
||||||
|
|
||||||
|
const request = useRequest()
|
||||||
|
|
||||||
|
export const useRules = () => {
|
||||||
|
const [rules, setRules] = createSignal<Rule[]>([])
|
||||||
|
const [rulesProviders, setRulesProviders] = createSignal<RuleProvider[]>([])
|
||||||
|
|
||||||
|
const updateRules = async () => {
|
||||||
|
const { rules } = await request
|
||||||
|
.get('rules')
|
||||||
|
.json<{ rules: Record<string, Rule> }>()
|
||||||
|
|
||||||
|
setRules(Object.values(rules))
|
||||||
|
|
||||||
|
const { providers } = await request
|
||||||
|
.get('providers/rules')
|
||||||
|
.json<{ providers: Record<string, RuleProvider> }>()
|
||||||
|
|
||||||
|
setRulesProviders(Object.values(providers))
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateAllRuleProvider = async () => {
|
||||||
|
await Promise.all(
|
||||||
|
rulesProviders().map((provider) => {
|
||||||
|
return request.put(`providers/rules/${provider.name}`)
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
await updateRules()
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateRuleProviderByName = async (name: string) => {
|
||||||
|
await request.put(`providers/rules/${name}`)
|
||||||
|
await updateRules()
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
rules,
|
||||||
|
rulesProviders,
|
||||||
|
updateRules,
|
||||||
|
updateAllRuleProvider,
|
||||||
|
updateRuleProviderByName,
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user