mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-12-25 19:14:12 +08:00
feat(config): support tun related configurations
This commit is contained in:
kunish
parent
0efced7e13
commit
512accd425
@ -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 {
|
||||
|
||||
@ -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,
|
||||
}}
|
||||
|
||||
@ -237,9 +237,8 @@ export const ConnectionsSettingsModal = (props: {
|
||||
tags.filter((tag) => tag.tagName !== tagName),
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconX size={12} />
|
||||
</Button>
|
||||
icon={<IconX size={12} />}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
|
||||
@ -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',
|
||||
}
|
||||
|
||||
@ -99,4 +99,8 @@ export default {
|
||||
version: '版本',
|
||||
expire: '到期时间',
|
||||
noExpire: '不限时',
|
||||
enableTunDevice: '开启 TUN 转发',
|
||||
tunModeStack: 'TUN 模式堆栈',
|
||||
tunDeviceName: 'TUN 设备名称',
|
||||
interfaceName: '接口名称',
|
||||
} satisfies Dict
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user