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 = () => {
|
||||
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 [sorting, setSorting] = createSignal<SortingState>([])
|
||||
const defaultSorting = Object.freeze({
|
||||
id: 'ID',
|
||||
desc: true,
|
||||
})
|
||||
const [sorting, setSorting] = createSignal<SortingState>([defaultSorting])
|
||||
|
||||
const columns: ColumnDef<Connection>[] = [
|
||||
{
|
||||
@ -182,7 +186,6 @@ export const Connections = () => {
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
|
||||
{{
|
||||
asc: <IconSortAscending />,
|
||||
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 = () => {
|
||||
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(),
|
||||
url: values.url,
|
||||
secret: '',
|
||||
secret: values.secret,
|
||||
},
|
||||
...endpointList(),
|
||||
])
|
||||
|
7
src/types.d.ts
vendored
7
src/types.d.ts
vendored
@ -42,6 +42,13 @@ export type ProxyProvider = {
|
||||
vehicleType: string
|
||||
}
|
||||
|
||||
export type Rule = {
|
||||
type: string
|
||||
payload: string
|
||||
proxy: string
|
||||
size: number
|
||||
}
|
||||
|
||||
export type RuleProvider = {
|
||||
behavior: string
|
||||
format: string
|
||||
|
Loading…
Reference in New Issue
Block a user