refactor(config): split config page components

This commit is contained in:
kunish 2023-09-02 13:54:59 +08:00
parent 33fa191cfe
commit 9e3055ba85
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
4 changed files with 96 additions and 77 deletions

View File

@ -33,4 +33,5 @@ export default {
destination: 'Destination', destination: 'Destination',
close: 'Close', close: 'Close',
reset: 'Reset', reset: 'Reset',
dnsQuery: 'DNS Query',
} }

View File

@ -33,4 +33,5 @@ export default {
destination: '目标地址', destination: '目标地址',
close: '关闭', close: '关闭',
reset: '重置', reset: '重置',
dnsQuery: 'DNS 查询',
} }

View File

@ -1,11 +1,66 @@
import { createForm } from '@felte/solid' import { createForm } from '@felte/solid'
import { validator } from '@felte/validator-zod' import { validator } from '@felte/validator-zod'
import { useI18n } from '@solid-primitives/i18n'
import { makePersisted } from '@solid-primitives/storage'
import { For, Show, createSignal, onMount } from 'solid-js' import { For, Show, createSignal, onMount } from 'solid-js'
import { z } from 'zod' import { z } from 'zod'
import { PROXIES_PREVIEW_TYPE } from '~/config/enum'
import { useRequest } from '~/signals' import { useRequest } from '~/signals'
import type { DNSQuery, Config as IConfig } from '~/types' import type { DNSQuery, Config as IConfig } from '~/types'
const schema = z.object({ const dnsQueryFormSchema = z.object({
name: z.string(),
type: z.string(),
})
const DNSQueryForm = () => {
const [t] = useI18n()
const request = useRequest()
const { form } = createForm<z.infer<typeof dnsQueryFormSchema>>({
extend: validator({ schema: dnsQueryFormSchema }),
onSubmit: async (values) => {
request
.get('dns/query', {
searchParams: { name: values.name, type: values.type },
})
.json<DNSQuery>()
.then(({ Answer }) =>
setDNSQueryResult(Answer?.map(({ data }) => data) || []),
)
},
})
const [DNSQueryResult, setDNSQueryResult] = createSignal<string[]>([])
return (
<div class="flex items-center gap-2">
<form use:form={form} class="contents">
<input name="name" class="input input-bordered flex-1" />
<select name="type" class="select select-bordered">
<option>A</option>
<option>AAAA</option>
<option>MX</option>
</select>
<button type="submit" class="btn btn-primary">
{t('dnsQuery')}
</button>
</form>
<Show when={DNSQueryResult().length > 0}>
<div class="flex flex-col p-4">
<For each={DNSQueryResult()}>
{(item) => <div class="py-2">{item}</div>}
</For>
</div>
</Show>
</div>
)
}
const configFormSchema = z.object({
port: z.number(), port: z.number(),
'socks-port': z.number(), 'socks-port': z.number(),
'redir-port': z.number(), 'redir-port': z.number(),
@ -13,35 +68,9 @@ const schema = z.object({
'mixed-port': z.number(), 'mixed-port': z.number(),
}) })
import { makePersisted } from '@solid-primitives/storage' const ConfigForm = () => {
import { PROXIES_PREVIEW_TYPE } from '~/config/enum'
export const [proxiesPreviewType, setProxiesPreviewType] = makePersisted(
createSignal(PROXIES_PREVIEW_TYPE.BAR),
{
name: 'proxiesPreviewType',
storage: localStorage,
},
)
export default () => {
const request = useRequest() const request = useRequest()
const [DNSQueryName, setDNSQueryName] = createSignal('')
const [DNSQueryResult, setDNSQueryResult] = createSignal<string[]>([])
const onDNSQuery = () =>
request
.get('dns/query', {
searchParams: {
name: DNSQueryName(),
},
})
.json<DNSQuery>()
.then(({ Answer }) => {
setDNSQueryResult(Answer.map(({ data }) => data))
})
const portsList = [ const portsList = [
{ {
label: 'Http Port', label: 'Http Port',
@ -65,9 +94,9 @@ export default () => {
}, },
] ]
const { form, setInitialValues, reset } = createForm<z.infer<typeof schema>>({ const { form, setInitialValues, reset } = createForm<
extend: validator({ schema }), z.infer<typeof configFormSchema>
}) >({ extend: validator({ schema: configFormSchema }) })
onMount(async () => { onMount(async () => {
const configs = await request.get('configs').json<IConfig>() const configs = await request.get('configs').json<IConfig>()
@ -78,35 +107,42 @@ export default () => {
return ( return (
<div> <div>
<form <form class="contents" use:form={form}>
class="flex items-center gap-2" <For each={portsList}>
onSubmit={(e) => { {(item) => (
e.preventDefault() <div class="form-control w-64 max-w-xs">
onDNSQuery() <label class="label">
}} <span class="label-text">{item.label}</span>
> </label>
<input <input
class="input input-bordered flex-1" name={item.key}
value={DNSQueryName()} type="number"
onSubmit={onDNSQuery} class="input input-bordered"
onInput={(e) => setDNSQueryName(e.target.value)} placeholder={item.label}
/> />
<button type="submit" class="btn btn-primary">
DNS Query
</button>
</form>
<Show when={DNSQueryResult().length > 0}>
<div class="flex flex-col p-4">
<For each={DNSQueryResult()}>
{(item) => <div class="py-2">{item}</div>}
</For>
</div> </div>
</Show> )}
</For>
</form>
</div>
)
}
<div class="mt-4"> export const [proxiesPreviewType, setProxiesPreviewType] = makePersisted(
createSignal(PROXIES_PREVIEW_TYPE.BAR),
{ name: 'proxiesPreviewType', storage: localStorage },
)
export default () => {
return (
<div class="flex flex-col gap-4">
<DNSQueryForm />
<ConfigForm />
<div>
<div>Proxies preview type:</div> <div>Proxies preview type:</div>
<div class="join"> <div class="join">
<label class="flex items-center"> <label class="flex items-center">
Bar Bar
@ -132,24 +168,6 @@ export default () => {
</label> </label>
</div> </div>
</div> </div>
<form class="contents" use:form={form}>
<For each={portsList}>
{(item) => (
<div class="form-control w-64 max-w-xs">
<label class="label">
<span class="label-text">{item.label}</span>
</label>
<input
name={item.key}
type="number"
class="input input-bordered"
placeholder={item.label}
/>
</div>
)}
</For>
</form>
</div> </div>
) )
} }

5
src/types.d.ts vendored
View File

@ -1,8 +1,7 @@
declare module 'solid-js' { declare module 'solid-js' {
namespace JSX { namespace JSX {
interface Directives { interface Directives {
form: {} [name: string]: {}
sortable: {}
} }
} }
} }
@ -157,7 +156,7 @@ export type DNSQuery = {
Qtype: number Qtype: number
Qclass: number Qclass: number
}[] }[]
Answer: { Answer?: {
TTL: number TTL: number
data: string data: string
name: string name: string