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:
yaotthaha 2023-10-16 20:26:16 +08:00 committed by GitHub
parent ef1fa19e94
commit 79335831cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 137 additions and 116 deletions

View File

@ -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}`

View File

@ -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>
) )
} }