✨ feat(relay): Add relay mode configuration and update related schemas
This commit is contained in:
web@ppanel
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -177,7 +177,7 @@ export default function Node() {
|
||||
</Table>
|
||||
<div className='flex flex-col-reverse gap-8 px-4 pt-6 md:flex-row md:items-start'>
|
||||
<div className='w-full md:w-1/2'>
|
||||
<ChartContainer config={chartConfig} className='mx-auto aspect-square max-w-[400px]'>
|
||||
<ChartContainer config={chartConfig} className='mx-auto aspect-[4/3] max-w-[400px]'>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={chartTimeSlots}
|
||||
|
||||
Reference in New Issue
Block a user