mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-24 09:45:35 +08:00
feat(config): support tun related configurations
This commit is contained in:
parent
0efced7e13
commit
512accd425
@ -85,7 +85,7 @@ export const fetchBackendConfigAPI = () => {
|
|||||||
|
|
||||||
export const updateBackendConfigAPI = async (
|
export const updateBackendConfigAPI = async (
|
||||||
key: keyof Config,
|
key: keyof Config,
|
||||||
value: Config[keyof Config],
|
value: Partial<Config[keyof Config]>,
|
||||||
refetch: ResourceActions<Config | undefined>['refetch'],
|
refetch: ResourceActions<Config | undefined>['refetch'],
|
||||||
) => {
|
) => {
|
||||||
try {
|
try {
|
||||||
|
@ -4,7 +4,7 @@ export const ConfigTitle: ParentComponent<{ withDivider?: boolean }> = (
|
|||||||
props,
|
props,
|
||||||
) => (
|
) => (
|
||||||
<div
|
<div
|
||||||
class="pb-4 text-lg font-semibold"
|
class="py-2 text-center text-lg font-semibold"
|
||||||
classList={{
|
classList={{
|
||||||
divider: props.withDivider,
|
divider: props.withDivider,
|
||||||
}}
|
}}
|
||||||
|
@ -237,9 +237,8 @@ export const ConnectionsSettingsModal = (props: {
|
|||||||
tags.filter((tag) => tag.tagName !== tagName),
|
tags.filter((tag) => tag.tagName !== tagName),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
icon={<IconX size={12} />}
|
||||||
<IconX size={12} />
|
/>
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</For>
|
</For>
|
||||||
|
@ -97,4 +97,8 @@ export default {
|
|||||||
version: 'Version',
|
version: 'Version',
|
||||||
expire: 'Expire',
|
expire: 'Expire',
|
||||||
noExpire: 'Null',
|
noExpire: 'Null',
|
||||||
|
enableTunDevice: 'Enable TUN Device',
|
||||||
|
tunModeStack: 'TUN Mode Stack',
|
||||||
|
tunDeviceName: 'TUN Device Name',
|
||||||
|
interfaceName: 'Interface Name',
|
||||||
}
|
}
|
||||||
|
@ -99,4 +99,8 @@ export default {
|
|||||||
version: '版本',
|
version: '版本',
|
||||||
expire: '到期时间',
|
expire: '到期时间',
|
||||||
noExpire: '不限时',
|
noExpire: '不限时',
|
||||||
|
enableTunDevice: '开启 TUN 转发',
|
||||||
|
tunModeStack: 'TUN 模式堆栈',
|
||||||
|
tunDeviceName: 'TUN 设备名称',
|
||||||
|
interfaceName: '接口名称',
|
||||||
} satisfies Dict
|
} satisfies Dict
|
||||||
|
@ -178,11 +178,6 @@ const ConfigForm = () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const onSwitchEndpointClick = () => {
|
|
||||||
setSelectedEndpoint('')
|
|
||||||
navigate(ROUTES.Setup)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-4">
|
||||||
<select
|
<select
|
||||||
@ -201,11 +196,12 @@ const ConfigForm = () => {
|
|||||||
<For each={portList}>
|
<For each={portList}>
|
||||||
{(item) => (
|
{(item) => (
|
||||||
<div class="form-control">
|
<div class="form-control">
|
||||||
<label class="label">
|
<label for={item.key} class="label">
|
||||||
<span class="label-text">{item.label}</span>
|
<span class="label-text">{item.label}</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
|
id={item.key}
|
||||||
name={item.key}
|
name={item.key}
|
||||||
type="number"
|
type="number"
|
||||||
class="input input-bordered"
|
class="input input-bordered"
|
||||||
@ -217,6 +213,89 @@ const ConfigForm = () => {
|
|||||||
</For>
|
</For>
|
||||||
</form>
|
</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">
|
<div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||||
<Button
|
<Button
|
||||||
class="btn-primary"
|
class="btn-primary"
|
||||||
@ -258,7 +337,13 @@ const ConfigForm = () => {
|
|||||||
{t('restartCore')}
|
{t('restartCore')}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button class="btn-info" onClick={onSwitchEndpointClick}>
|
<Button
|
||||||
|
class="btn-info"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedEndpoint('')
|
||||||
|
navigate(ROUTES.Setup)
|
||||||
|
}}
|
||||||
|
>
|
||||||
{t('switchEndpoint')}
|
{t('switchEndpoint')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@ -270,9 +355,9 @@ const ConfigForXd = () => {
|
|||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="grid grid-cols-2 place-items-center gap-4">
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-2">
|
||||||
<div>
|
<div class="flex flex-col items-center">
|
||||||
<ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>
|
<ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
@ -284,7 +369,7 @@ const ConfigForXd = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Show when={autoSwitchTheme()}>
|
<Show when={autoSwitchTheme()}>
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-2">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<ConfigTitle>{t('favDayTheme')}</ConfigTitle>
|
<ConfigTitle>{t('favDayTheme')}</ConfigTitle>
|
||||||
|
|
||||||
@ -322,7 +407,7 @@ const ConfigForXd = () => {
|
|||||||
</Show>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="flex flex-col items-center">
|
||||||
<ConfigTitle>{t('useTwemoji')}</ConfigTitle>
|
<ConfigTitle>{t('useTwemoji')}</ConfigTitle>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
|
Loading…
Reference in New Issue
Block a user