mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat: rules page (#10)
This commit is contained in:
parent
b04fe0daf4
commit
457b49827d
@ -1,3 +1,76 @@
|
|||||||
|
import { useRequest } from '~/signals'
|
||||||
|
import { For, onMount } from 'solid-js'
|
||||||
|
import type { Config as IConfig } from '~/types'
|
||||||
|
import { z } from 'zod'
|
||||||
|
import { validator } from '@felte/validator-zod'
|
||||||
|
import { createForm } from '@felte/solid'
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
port: z.number(),
|
||||||
|
'socks-port': z.number(),
|
||||||
|
'redir-port': z.number(),
|
||||||
|
'tproxy-port': z.number(),
|
||||||
|
'mixed-port': z.number(),
|
||||||
|
})
|
||||||
|
|
||||||
export const Config = () => {
|
export const Config = () => {
|
||||||
return <div>config</div>
|
const request = useRequest()
|
||||||
|
const formItemList = [
|
||||||
|
{
|
||||||
|
key: 'port',
|
||||||
|
label: 'port',
|
||||||
|
type: 'number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'socks-port',
|
||||||
|
label: 'socks-port',
|
||||||
|
type: 'number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'redir-port',
|
||||||
|
label: 'redir-port',
|
||||||
|
type: 'number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'tproxy-port',
|
||||||
|
label: 'tproxy-port',
|
||||||
|
type: 'number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'mixed-port',
|
||||||
|
label: 'mixed-port',
|
||||||
|
type: 'number',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const { form, setInitialValues, reset } = createForm<z.infer<typeof schema>>({
|
||||||
|
extend: validator({ schema }),
|
||||||
|
})
|
||||||
|
onMount(async () => {
|
||||||
|
const configs = await request.get('configs').json<IConfig>()
|
||||||
|
|
||||||
|
setInitialValues(configs)
|
||||||
|
reset()
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
config
|
||||||
|
<form class="contents" use:form={form}>
|
||||||
|
<For each={formItemList}>
|
||||||
|
{(item) => (
|
||||||
|
<div class="flex flex-row items-center gap-4">
|
||||||
|
{item.label}:
|
||||||
|
<input
|
||||||
|
name={item.key}
|
||||||
|
type={item.type}
|
||||||
|
class="input input-bordered"
|
||||||
|
placeholder={item.label}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
@ -46,7 +46,11 @@ export const Connections = () => {
|
|||||||
|
|
||||||
const onCloseConnection = (id: string) => request.delete(`connections/${id}`)
|
const onCloseConnection = (id: string) => request.delete(`connections/${id}`)
|
||||||
|
|
||||||
const [sorting, setSorting] = createSignal<SortingState>([])
|
const defaultSorting = Object.freeze({
|
||||||
|
id: 'ID',
|
||||||
|
desc: true,
|
||||||
|
})
|
||||||
|
const [sorting, setSorting] = createSignal<SortingState>([defaultSorting])
|
||||||
|
|
||||||
const columns: ColumnDef<Connection>[] = [
|
const columns: ColumnDef<Connection>[] = [
|
||||||
{
|
{
|
||||||
@ -182,7 +186,6 @@ export const Connections = () => {
|
|||||||
header.column.columnDef.header,
|
header.column.columnDef.header,
|
||||||
header.getContext(),
|
header.getContext(),
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{{
|
{{
|
||||||
asc: <IconSortAscending />,
|
asc: <IconSortAscending />,
|
||||||
desc: <IconSortDescending />,
|
desc: <IconSortDescending />,
|
||||||
|
@ -1,3 +1,62 @@
|
|||||||
|
import { For, createSignal, onMount } from 'solid-js'
|
||||||
|
import { useRequest } from '~/signals'
|
||||||
|
import type { Rule, RuleProvider } from '~/types'
|
||||||
|
|
||||||
export const Rules = () => {
|
export const Rules = () => {
|
||||||
return <div>rules</div>
|
const request = useRequest()
|
||||||
|
const [rules, setRules] = createSignal<Rule[]>([])
|
||||||
|
const [rulesProviders, setRulesProviders] = createSignal<RuleProvider[]>([])
|
||||||
|
|
||||||
|
onMount(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))
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 class="pb-4 text-lg font-semibold">Rules</h1>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-2 sm:grid-cols-1">
|
||||||
|
<For each={rules()}>
|
||||||
|
{(rule) => (
|
||||||
|
<div class="card card-bordered card-compact border-secondary p-4">
|
||||||
|
<div>{rule.payload}</div>
|
||||||
|
<div>
|
||||||
|
{rule.type}: {rule.proxy}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1 class="pb-4 text-lg font-semibold">Rules Providers</h1>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-2 sm:grid-cols-1">
|
||||||
|
<For each={rulesProviders()}>
|
||||||
|
{(rulesProvider) => (
|
||||||
|
<div class="card card-bordered card-compact border-secondary p-4">
|
||||||
|
<div>{rulesProvider.name}</div>
|
||||||
|
<div>
|
||||||
|
{rulesProvider.vehicleType}: {rulesProvider.behavior} (
|
||||||
|
{rulesProvider.ruleCount})
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
@ -37,7 +37,7 @@ export const Setup = () => {
|
|||||||
{
|
{
|
||||||
id: uuid(),
|
id: uuid(),
|
||||||
url: values.url,
|
url: values.url,
|
||||||
secret: '',
|
secret: values.secret,
|
||||||
},
|
},
|
||||||
...endpointList(),
|
...endpointList(),
|
||||||
])
|
])
|
||||||
|
7
src/types.d.ts
vendored
7
src/types.d.ts
vendored
@ -42,6 +42,13 @@ export type ProxyProvider = {
|
|||||||
vehicleType: string
|
vehicleType: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type Rule = {
|
||||||
|
type: string
|
||||||
|
payload: string
|
||||||
|
proxy: string
|
||||||
|
size: number
|
||||||
|
}
|
||||||
|
|
||||||
export type RuleProvider = {
|
export type RuleProvider = {
|
||||||
behavior: string
|
behavior: string
|
||||||
format: string
|
format: string
|
||||||
|
Loading…
Reference in New Issue
Block a user