💄 style(node): Form

This commit is contained in:
web@ppanel 2024-12-02 13:22:43 +07:00
parent bfb6c27028
commit d5f5add61a

View File

@ -452,7 +452,7 @@ export default function NodeForm<T extends { [x: string]: any }>({
control={form.control} control={form.control}
name='vmess.host' name='vmess.host'
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className='col-span-2'>
<FormLabel>{t('form.Host Name')}</FormLabel> <FormLabel>{t('form.Host Name')}</FormLabel>
<FormControl> <FormControl>
<EnhancedInput <EnhancedInput
@ -486,6 +486,56 @@ export default function NodeForm<T extends { [x: string]: any }>({
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name='vmess.network'
render={({ field }) => (
<FormItem className='col-span-2'>
<FormLabel>{t('form.networkType')}</FormLabel>
<FormControl>
<Select
value={field.value}
onValueChange={(value) => {
form.setValue(field.name, value);
form.setValue('vmess.transport', undefined);
}}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder={t('form.networkType')} />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value='tcp'>TCP</SelectItem>
<SelectItem value='websocket'>WebSocket</SelectItem>
<SelectItem value='grpc'>gRPC</SelectItem>
<SelectItem value='quic'>QUIC</SelectItem>
<SelectItem value='mkcp'>mkcp</SelectItem>
<SelectItem value='httpupgrade'>HTTPUPgrade</SelectItem>
<SelectItem value='splithttp'>SplitHTTP</SelectItem>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='vmess.enable_tls'
render={({ field }) => (
<FormItem>
<FormLabel>
{t('form.enableTls')}
<Sheet>
<SheetTrigger asChild>
<a className='text-primary ml-2 cursor-pointer'>{t('form.edit')}</a>
</SheetTrigger>
<SheetContent className='p-4'>
<SheetHeader>
<SheetTitle>{t('form.editSecurity')}</SheetTitle>
</SheetHeader>
<div className='grid grid-cols-1 gap-2 pt-4'>
<FormField <FormField
control={form.control} control={form.control}
name='vmess.tls_config.server_name' name='vmess.tls_config.server_name'
@ -504,26 +554,6 @@ export default function NodeForm<T extends { [x: string]: any }>({
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name='vmess.enable_tls'
render={({ field }) => (
<FormItem>
<FormLabel>{t('form.enableTls')}</FormLabel>
<FormControl>
<div className='pt-2'>
<Switch
checked={!!field.value}
onCheckedChange={(value) => {
form.setValue(field.name, value);
}}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name='vmess.tls_config.allow_insecure' name='vmess.tls_config.allow_insecure'
@ -544,36 +574,19 @@ export default function NodeForm<T extends { [x: string]: any }>({
</FormItem> </FormItem>
)} )}
/> />
</div>
<FormField </SheetContent>
control={form.control} </Sheet>
name='vmess.network' </FormLabel>
render={({ field }) => (
<FormItem>
<FormLabel>{t('form.networkType')}</FormLabel>
<FormControl> <FormControl>
<Select <div className='pt-2'>
value={field.value} <Switch
onValueChange={(value) => { checked={!!field.value}
onCheckedChange={(value) => {
form.setValue(field.name, value); form.setValue(field.name, value);
form.setValue('vmess.transport', undefined);
}} }}
> />
<FormControl> </div>
<SelectTrigger>
<SelectValue placeholder={t('form.networkType')} />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value='tcp'>TCP</SelectItem>
<SelectItem value='websocket'>WebSocket</SelectItem>
<SelectItem value='grpc'>gRPC</SelectItem>
<SelectItem value='quic'>QUIC</SelectItem>
<SelectItem value='mkcp'>mkcp</SelectItem>
<SelectItem value='httpupgrade'>HTTPUPgrade</SelectItem>
<SelectItem value='splithttp'>SplitHTTP</SelectItem>
</SelectContent>
</Select>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@ -1116,7 +1129,7 @@ export default function NodeForm<T extends { [x: string]: any }>({
control={form.control} control={form.control}
name='vless.network' name='vless.network'
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className='col-span-2'>
<FormLabel>{t('form.networkType')}</FormLabel> <FormLabel>{t('form.networkType')}</FormLabel>
<FormControl> <FormControl>
<Select <Select
@ -1151,7 +1164,7 @@ export default function NodeForm<T extends { [x: string]: any }>({
control={form.control} control={form.control}
name='vless.xtls' name='vless.xtls'
render={({ field }) => ( render={({ field }) => (
<FormItem className='col-span-2'> <FormItem>
<FormLabel>{t('form.xtls')}</FormLabel> <FormLabel>{t('form.xtls')}</FormLabel>
<FormControl> <FormControl>
<Select <Select