mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-24 09:45:35 +08:00
chore: identify sing-box (#373)
* chore: identify sing-box * feat(config): hide form elements when endpoint version is sing-box --------- Co-authored-by: kunish <kunish.butt@gmail.com>
This commit is contained in:
parent
ef1fa19e94
commit
79335831cb
@ -1,5 +1,9 @@
|
|||||||
import { createSignal } from 'solid-js'
|
import { createSignal } from 'solid-js'
|
||||||
|
|
||||||
|
export const isSingBox = (version: string) => {
|
||||||
|
return version.includes('sing-box')
|
||||||
|
}
|
||||||
|
|
||||||
export const transformEndpointURL = (url: string) =>
|
export const transformEndpointURL = (url: string) =>
|
||||||
/^https?/.test(url) ? url : `${window.location.protocol}//${url}`
|
/^https?/.test(url) ? url : `${window.location.protocol}//${url}`
|
||||||
|
|
||||||
|
@ -2,6 +2,8 @@ import { createForm } from '@felte/solid'
|
|||||||
import { validator } from '@felte/validator-zod'
|
import { validator } from '@felte/validator-zod'
|
||||||
import { useNavigate } from '@solidjs/router'
|
import { useNavigate } from '@solidjs/router'
|
||||||
import {
|
import {
|
||||||
|
Accessor,
|
||||||
|
Component,
|
||||||
For,
|
For,
|
||||||
Show,
|
Show,
|
||||||
createEffect,
|
createEffect,
|
||||||
@ -29,6 +31,7 @@ import {
|
|||||||
} from '~/apis'
|
} from '~/apis'
|
||||||
import { Button, ConfigTitle } from '~/components'
|
import { Button, ConfigTitle } from '~/components'
|
||||||
import { LANG, MODE_OPTIONS, ROUTES, themes } from '~/constants'
|
import { LANG, MODE_OPTIONS, ROUTES, themes } from '~/constants'
|
||||||
|
import { isSingBox } from '~/helpers'
|
||||||
import { locale, setLocale, useI18n } from '~/i18n'
|
import { locale, setLocale, useI18n } from '~/i18n'
|
||||||
import {
|
import {
|
||||||
autoSwitchTheme,
|
autoSwitchTheme,
|
||||||
@ -114,7 +117,9 @@ const configFormSchema = z.object({
|
|||||||
'mixed-port': z.number(),
|
'mixed-port': z.number(),
|
||||||
})
|
})
|
||||||
|
|
||||||
const ConfigForm = () => {
|
const ConfigForm: Component<{ backendVersion: Accessor<string> }> = ({
|
||||||
|
backendVersion,
|
||||||
|
}) => {
|
||||||
const [t] = useI18n()
|
const [t] = useI18n()
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
|
|
||||||
@ -196,109 +201,111 @@ const ConfigForm = () => {
|
|||||||
<option value={MODE_OPTIONS.Direct}>{t('direct')}</option>
|
<option value={MODE_OPTIONS.Direct}>{t('direct')}</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<form class="grid grid-cols-3 gap-2 sm:grid-cols-5" use:form={form}>
|
<Show when={!isSingBox(backendVersion())}>
|
||||||
<For each={portList}>
|
<form class="grid grid-cols-3 gap-2 sm:grid-cols-5" use:form={form}>
|
||||||
{(item) => (
|
<For each={portList}>
|
||||||
<div class="form-control">
|
{(item) => (
|
||||||
<label for={item.key} class="label">
|
<div class="form-control">
|
||||||
<span class="label-text">{item.label()}</span>
|
<label for={item.key} class="label">
|
||||||
</label>
|
<span class="label-text">{item.label()}</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
id={item.key}
|
id={item.key}
|
||||||
name={item.key}
|
name={item.key}
|
||||||
type="number"
|
type="number"
|
||||||
class="input input-bordered"
|
class="input input-bordered"
|
||||||
placeholder={item.label()}
|
placeholder={item.label()}
|
||||||
onChange={item.onChange}
|
onChange={item.onChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</For>
|
</For>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
<div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||||
<div class="form-control">
|
<div class="form-control">
|
||||||
<label for="enable-tun-device" class="label gap-2">
|
<label for="enable-tun-device" class="label gap-2">
|
||||||
<span class="label-text">{t('enableTunDevice')}</span>
|
<span class="label-text">{t('enableTunDevice')}</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
id="enable-tun-device"
|
id="enable-tun-device"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
class="toggle"
|
class="toggle"
|
||||||
checked={configsData()?.tun.enable}
|
checked={configsData()?.tun.enable}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
void updateBackendConfigAPI(
|
void updateBackendConfigAPI(
|
||||||
'tun',
|
'tun',
|
||||||
{ enable: e.target.checked },
|
{ enable: e.target.checked },
|
||||||
refetch,
|
refetch,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-control">
|
||||||
|
<label for="tun-ip-stack" class="label gap-2">
|
||||||
|
<span class="label-text">{t('tunModeStack')}</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<select
|
||||||
|
id="tun-ip-stack"
|
||||||
|
class="select select-bordered flex-1"
|
||||||
|
value={configsData()?.tun.stack}
|
||||||
|
onChange={(e) =>
|
||||||
|
void updateBackendConfigAPI(
|
||||||
|
'tun',
|
||||||
|
{ stack: e.target.value },
|
||||||
|
refetch,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<option>gVisor</option>
|
||||||
|
<option>System</option>
|
||||||
|
<option>LWIP</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-control">
|
||||||
|
<label for="device-name" class="label gap-2">
|
||||||
|
<span class="label-text">{t('tunDeviceName')}</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<input
|
||||||
|
id="device-name"
|
||||||
|
class="input input-bordered min-w-0"
|
||||||
|
value={configsData()?.tun.device}
|
||||||
|
onChange={(e) =>
|
||||||
|
void updateBackendConfigAPI(
|
||||||
|
'tun',
|
||||||
|
{ device: e.target.value },
|
||||||
|
refetch,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-control">
|
||||||
|
<label for="interface-name" class="label gap-2">
|
||||||
|
<span class="label-text">{t('interfaceName')}</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<input
|
||||||
|
id="interface-name"
|
||||||
|
class="input input-bordered min-w-0"
|
||||||
|
value={configsData()?.['interface-name']}
|
||||||
|
onChange={(e) =>
|
||||||
|
void updateBackendConfigAPI(
|
||||||
|
'interface-name',
|
||||||
|
e.target.value,
|
||||||
|
refetch,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Show>
|
||||||
<div class="form-control">
|
|
||||||
<label for="tun-ip-stack" class="label gap-2">
|
|
||||||
<span class="label-text">{t('tunModeStack')}</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<select
|
|
||||||
id="tun-ip-stack"
|
|
||||||
class="select select-bordered flex-1"
|
|
||||||
value={configsData()?.tun.stack}
|
|
||||||
onChange={(e) =>
|
|
||||||
void updateBackendConfigAPI(
|
|
||||||
'tun',
|
|
||||||
{ stack: e.target.value },
|
|
||||||
refetch,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option>gVisor</option>
|
|
||||||
<option>System</option>
|
|
||||||
<option>LWIP</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-control">
|
|
||||||
<label for="device-name" class="label gap-2">
|
|
||||||
<span class="label-text">{t('tunDeviceName')}</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="device-name"
|
|
||||||
class="input input-bordered min-w-0"
|
|
||||||
value={configsData()?.tun.device}
|
|
||||||
onChange={(e) =>
|
|
||||||
void updateBackendConfigAPI(
|
|
||||||
'tun',
|
|
||||||
{ device: e.target.value },
|
|
||||||
refetch,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-control">
|
|
||||||
<label for="interface-name" class="label gap-2">
|
|
||||||
<span class="label-text">{t('interfaceName')}</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="interface-name"
|
|
||||||
class="input input-bordered min-w-0"
|
|
||||||
value={configsData()?.['interface-name']}
|
|
||||||
onChange={(e) =>
|
|
||||||
void updateBackendConfigAPI(
|
|
||||||
'interface-name',
|
|
||||||
e.target.value,
|
|
||||||
refetch,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
<div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||||
<Button
|
<Button
|
||||||
@ -325,13 +332,15 @@ const ConfigForm = () => {
|
|||||||
{t('flushFakeIP')}
|
{t('flushFakeIP')}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button
|
<Show when={!isSingBox(backendVersion())}>
|
||||||
class="btn-error"
|
<Button
|
||||||
loading={upgradingBackend()}
|
class="btn-error"
|
||||||
onClick={upgradeBackendAPI}
|
loading={upgradingBackend()}
|
||||||
>
|
onClick={upgradeBackendAPI}
|
||||||
{t('upgradeCore')}
|
>
|
||||||
</Button>
|
{t('upgradeCore')}
|
||||||
|
</Button>
|
||||||
|
</Show>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
class="btn-warning"
|
class="btn-warning"
|
||||||
@ -453,14 +462,13 @@ const ConfigForXd = () => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const Versions = () => {
|
const Versions: Component<{ backendVersion: Accessor<string> }> = ({
|
||||||
const [backendVersion, setBackendVersion] = createSignal('')
|
backendVersion,
|
||||||
|
}) => {
|
||||||
const [isUpdateAvailable, setIsUpdateAvailable] = createSignal(false)
|
const [isUpdateAvailable, setIsUpdateAvailable] = createSignal(false)
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const version = await fetchBackendVersionAPI()
|
setIsUpdateAvailable(await isUpdateAvailableAPI(backendVersion()))
|
||||||
setBackendVersion(version)
|
|
||||||
setIsUpdateAvailable(await isUpdateAvailableAPI(version))
|
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -486,17 +494,26 @@ const Versions = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
|
const [backendVersion, setBackendVersion] = createSignal('')
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
const version = await fetchBackendVersionAPI()
|
||||||
|
setBackendVersion(version)
|
||||||
|
})
|
||||||
|
|
||||||
const [t] = useI18n()
|
const [t] = useI18n()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="mx-auto flex max-w-screen-md flex-col gap-4">
|
<div class="mx-auto flex max-w-screen-md flex-col gap-4">
|
||||||
<ConfigTitle withDivider>{t('dnsQuery')}</ConfigTitle>
|
<Show when={!isSingBox(backendVersion())}>
|
||||||
|
<ConfigTitle withDivider>{t('dnsQuery')}</ConfigTitle>
|
||||||
|
|
||||||
<DNSQueryForm />
|
<DNSQueryForm />
|
||||||
|
</Show>
|
||||||
|
|
||||||
<ConfigTitle withDivider>{t('coreConfig')}</ConfigTitle>
|
<ConfigTitle withDivider>{t('coreConfig')}</ConfigTitle>
|
||||||
|
|
||||||
<ConfigForm />
|
<ConfigForm backendVersion={backendVersion} />
|
||||||
|
|
||||||
<ConfigTitle withDivider>{t('xdConfig')}</ConfigTitle>
|
<ConfigTitle withDivider>{t('xdConfig')}</ConfigTitle>
|
||||||
|
|
||||||
@ -504,7 +521,7 @@ export default () => {
|
|||||||
|
|
||||||
<ConfigTitle withDivider>{t('version')}</ConfigTitle>
|
<ConfigTitle withDivider>{t('version')}</ConfigTitle>
|
||||||
|
|
||||||
<Versions />
|
<Versions backendVersion={backendVersion} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user