feat: rules provider pages

This commit is contained in:
Zephyruso 2023-09-02 17:42:13 +08:00
parent d7fb0b41ef
commit 65346ca743
5 changed files with 122 additions and 44 deletions

View File

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

View File

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

View File

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

View File

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