feat(config): support tun related configurations

This commit is contained in:
kunish 2023-09-22 22:03:22 +08:00
parent 0efced7e13
commit 512accd425
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
6 changed files with 109 additions and 17 deletions

View File

@ -85,7 +85,7 @@ export const fetchBackendConfigAPI = () => {
export const updateBackendConfigAPI = async (
key: keyof Config,
value: Config[keyof Config],
value: Partial<Config[keyof Config]>,
refetch: ResourceActions<Config | undefined>['refetch'],
) => {
try {

View File

@ -4,7 +4,7 @@ export const ConfigTitle: ParentComponent<{ withDivider?: boolean }> = (
props,
) => (
<div
class="pb-4 text-lg font-semibold"
class="py-2 text-center text-lg font-semibold"
classList={{
divider: props.withDivider,
}}

View File

@ -237,9 +237,8 @@ export const ConnectionsSettingsModal = (props: {
tags.filter((tag) => tag.tagName !== tagName),
)
}
>
<IconX size={12} />
</Button>
icon={<IconX size={12} />}
/>
</div>
)}
</For>

View File

@ -97,4 +97,8 @@ export default {
version: 'Version',
expire: 'Expire',
noExpire: 'Null',
enableTunDevice: 'Enable TUN Device',
tunModeStack: 'TUN Mode Stack',
tunDeviceName: 'TUN Device Name',
interfaceName: 'Interface Name',
}

View File

@ -99,4 +99,8 @@ export default {
version: '版本',
expire: '到期时间',
noExpire: '不限时',
enableTunDevice: '开启 TUN 转发',
tunModeStack: 'TUN 模式堆栈',
tunDeviceName: 'TUN 设备名称',
interfaceName: '接口名称',
} satisfies Dict

View File

@ -178,11 +178,6 @@ const ConfigForm = () => {
}
})
const onSwitchEndpointClick = () => {
setSelectedEndpoint('')
navigate(ROUTES.Setup)
}
return (
<div class="flex flex-col gap-4">
<select
@ -201,11 +196,12 @@ const ConfigForm = () => {
<For each={portList}>
{(item) => (
<div class="form-control">
<label class="label">
<label for={item.key} class="label">
<span class="label-text">{item.label}</span>
</label>
<input
id={item.key}
name={item.key}
type="number"
class="input input-bordered"
@ -217,6 +213,89 @@ const ConfigForm = () => {
</For>
</form>
<div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
<div class="form-control">
<label for="enable-tun-device" class="label gap-2">
<span class="label-text">{t('enableTunDevice')}</span>
</label>
<input
id="enable-tun-device"
type="checkbox"
class="toggle"
checked={configsData()?.tun.enable}
onChange={(e) =>
void updateBackendConfigAPI(
'tun',
{ enable: e.target.checked },
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 class="grid grid-cols-2 gap-2 sm:grid-cols-3">
<Button
class="btn-primary"
@ -258,7 +337,13 @@ const ConfigForm = () => {
{t('restartCore')}
</Button>
<Button class="btn-info" onClick={onSwitchEndpointClick}>
<Button
class="btn-info"
onClick={() => {
setSelectedEndpoint('')
navigate(ROUTES.Setup)
}}
>
{t('switchEndpoint')}
</Button>
</div>
@ -270,9 +355,9 @@ const ConfigForXd = () => {
const { t } = useI18n()
return (
<div class="grid grid-cols-2 place-items-center gap-4">
<div class="flex flex-col gap-4">
<div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div class="flex flex-col gap-2">
<div class="flex flex-col items-center">
<ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>
<input
@ -284,7 +369,7 @@ const ConfigForXd = () => {
</div>
<Show when={autoSwitchTheme()}>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<div class="flex flex-col">
<ConfigTitle>{t('favDayTheme')}</ConfigTitle>
@ -322,7 +407,7 @@ const ConfigForXd = () => {
</Show>
</div>
<div>
<div class="flex flex-col items-center">
<ConfigTitle>{t('useTwemoji')}</ConfigTitle>
<input