S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(relay): Add relay mode configuration and update related schemas

Browse Source
This commit is contained in:
web@ppanel
2024-12-30 17:28:24 +07:00
parent c44ad47f3c
commit 3cc94773ef
32 changed files with 346 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin/app/dashboard/server/form-schema.ts
+11 -3
View File
@@ -92,9 +92,17 @@ const baseFormSchema = z.object({
speed_limit: z.number().nullish(),
traffic_ratio: z.number().default(1),
group_id: z.number().nullish(),
enable_relay: z.boolean().nullish().default(false),
relay_host: nullableString,
relay_port: portSchema,
relay_mode: z.string().nullish().default('none'),
relay_node: z
.array(
z.object({
host: z.string(),
port: portSchema,
prefix: z.string().nullish(),
}),
)
.nullish()
.default([]),
});
export const formSchema = z.intersection(baseFormSchema, protocolConfigSchema);
apps/admin/app/dashboard/server/node-form.tsx
+85 -62
View File
@@ -33,6 +33,7 @@ import {
import { Switch } from '@workspace/ui/components/switch';
import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
import { Combobox } from '@workspace/ui/custom-components/combobox';
import { ArrayInput } from '@workspace/ui/custom-components/dynamic-Inputs';
import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
import { cn } from '@workspace/ui/lib/utils';
import { unitConversion } from '@workspace/ui/utils';
@@ -75,6 +76,7 @@ export default function NodeForm<T extends { [x: string]: any }>({
const protocol = form.watch('protocol');
const transport = form.watch('config.transport');
const security = form.watch('config.security');
const relayMode = form.watch('relay_mode');
useEffect(() => {
form?.reset(initialValues);
@@ -105,7 +107,7 @@ export default function NodeForm<T extends { [x: string]: any }>({
{trigger}
</Button>
</SheetTrigger>
<SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
<SheetContent className='w-[520px] max-w-full md:max-w-screen-md'>
<SheetHeader>
<SheetTitle>{title}</SheetTitle>
</SheetHeader>
@@ -214,65 +216,6 @@ export default function NodeForm<T extends { [x: string]: any }>({
</FormItem>
)}
/>
<FormField
control={form.control}
name='enable_relay'
render={({ field }) => (
<FormItem>
<FormLabel>{t('form.enableRelay')}</FormLabel>
<FormControl>
<div className='pt-2'>
<Switch
checked={!!field.value}
onCheckedChange={(value) => {
form.setValue(field.name, value);
}}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='relay_host'
render={({ field }) => (
<FormItem>
<FormLabel>{t('form.relayHost')}</FormLabel>
<FormControl>
<EnhancedInput
{...field}
onValueChange={(value) => {
form.setValue(field.name, value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='relay_port'
render={({ field }) => (
<FormItem>
<FormLabel>{t('form.relayPort')}</FormLabel>
<FormControl>
<EnhancedInput
{...field}
type='number'
min={1}
max={65535}
onValueChange={(value) => {
form.setValue(field.name, value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
@@ -358,6 +301,7 @@ export default function NodeForm<T extends { [x: string]: any }>({
<EnhancedInput
{...field}
type='number'
placeholder='1-65535'
min={1}
max={65535}
onValueChange={(value) => {
@@ -389,6 +333,7 @@ export default function NodeForm<T extends { [x: string]: any }>({
<EnhancedInput
{...field}
type='number'
placeholder='1-65535'
onValueChange={(value) => {
form.setValue(field.name, value);
}}
@@ -499,7 +444,7 @@ export default function NodeForm<T extends { [x: string]: any }>({
control={form.control}
name='config.transport'
render={({ field }) => (
<FormItem className='min-w-32'>
<FormItem className='!mt-0 min-w-32'>
<FormControl>
<Select
value={field.value}
@@ -603,7 +548,7 @@ export default function NodeForm<T extends { [x: string]: any }>({
control={form.control}
name='config.security'
render={({ field }) => (
<FormItem className='min-w-32'>
<FormItem className='!mt-0 min-w-32'>
<Select
value={field.value}
onValueChange={(value) => {
@@ -814,6 +759,84 @@ export default function NodeForm<T extends { [x: string]: any }>({
</Card>
</div>
)}
<Card>
<CardHeader className='flex flex-row items-center justify-between p-3'>
<CardTitle>{t('form.relayMode')}</CardTitle>
<FormField
control={form.control}
name='relay_mode'
render={({ field }) => (
<FormItem className='!mt-0 min-w-32'>
<FormControl>
<Select
value={field.value}
onValueChange={(value) => {
form.setValue(field.name, value);
}}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder={t('form.selectRelayMode')} />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value='none'>
{t('form.relayModeOptions.none')}
</SelectItem>
<SelectItem value='all'>{t('form.relayModeOptions.all')}</SelectItem>
<SelectItem value='random'>
{t('form.relayModeOptions.random')}
</SelectItem>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</CardHeader>
{relayMode !== 'none' && (
<CardContent className='w-full space-y-3 px-3'>
<FormField
control={form.control}
name='relay_node'
render={({ field }) => (
<FormItem>
<FormControl>
<ArrayInput
fields={[
{
name: 'host',
type: 'text',
placeholder: t('form.relayHost'),
},
{
name: 'port',
type: 'number',
min: 1,
max: 65535,
placeholder: t('form.relayPort'),
},
{
name: 'prefix',
type: 'text',
placeholder: t('form.relayPrefix'),
},
]}
value={field.value}
onChange={(value) => {
form.setValue(field.name, value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</CardContent>
)}
</Card>
</form>
</Form>
</ScrollArea>