mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
refactor(config): split config page components
This commit is contained in:
parent
33fa191cfe
commit
9e3055ba85
@ -33,4 +33,5 @@ export default {
|
|||||||
destination: 'Destination',
|
destination: 'Destination',
|
||||||
close: 'Close',
|
close: 'Close',
|
||||||
reset: 'Reset',
|
reset: 'Reset',
|
||||||
|
dnsQuery: 'DNS Query',
|
||||||
}
|
}
|
||||||
|
@ -33,4 +33,5 @@ export default {
|
|||||||
destination: '目标地址',
|
destination: '目标地址',
|
||||||
close: '关闭',
|
close: '关闭',
|
||||||
reset: '重置',
|
reset: '重置',
|
||||||
|
dnsQuery: 'DNS 查询',
|
||||||
}
|
}
|
||||||
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
<button type="submit" class="btn btn-primary">
|
)}
|
||||||
DNS Query
|
</For>
|
||||||
</button>
|
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
<Show when={DNSQueryResult().length > 0}>
|
export const [proxiesPreviewType, setProxiesPreviewType] = makePersisted(
|
||||||
<div class="flex flex-col p-4">
|
createSignal(PROXIES_PREVIEW_TYPE.BAR),
|
||||||
<For each={DNSQueryResult()}>
|
{ name: 'proxiesPreviewType', storage: localStorage },
|
||||||
{(item) => <div class="py-2">{item}</div>}
|
)
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
<div class="mt-4">
|
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
5
src/types.d.ts
vendored
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user