metacubexd/src/pages/Config.tsx

77 lines
1.6 KiB
TypeScript
Raw Normal View History

import { createForm } from '@felte/solid'
import { validator } from '@felte/validator-zod'
2023-08-28 22:13:48 +08:00
import { For, onMount } from 'solid-js'
import { z } from 'zod'
import { useRequest } from '~/signals'
import type { Config as IConfig } from '~/types'
2023-08-28 22:13:48 +08:00
const schema = z.object({
port: z.number(),
'socks-port': z.number(),
'redir-port': z.number(),
'tproxy-port': z.number(),
'mixed-port': z.number(),
})
2023-08-24 04:20:53 +08:00
export const Config = () => {
2023-08-28 22:13:48 +08:00
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>
)
2023-08-24 04:20:53 +08:00
}