665 lines
25 KiB
TypeScript
665 lines
25 KiB
TypeScript
'use client';
|
|
|
|
import { ProTable, ProTableActions } from '@/components/pro-table';
|
|
import {
|
|
createSubscribeApplication,
|
|
deleteSubscribeApplication,
|
|
getSubscribeApplicationList,
|
|
updateSubscribeApplication,
|
|
} from '@/services/admin/application';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { ColumnDef } from '@tanstack/react-table';
|
|
import { Badge } from '@workspace/ui/components/badge';
|
|
import { Button } from '@workspace/ui/components/button';
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from '@workspace/ui/components/form';
|
|
import { Input } from '@workspace/ui/components/input';
|
|
import { ScrollArea } from '@workspace/ui/components/scroll-area';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@workspace/ui/components/select';
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetFooter,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
} from '@workspace/ui/components/sheet';
|
|
import { Switch } from '@workspace/ui/components/switch';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
|
|
import { Textarea } from '@workspace/ui/components/textarea';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@workspace/ui/components/tooltip';
|
|
import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
|
|
import { GoTemplateEditor } from '@workspace/ui/custom-components/editor';
|
|
import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
|
|
import { Icon } from '@workspace/ui/custom-components/icon';
|
|
import { UploadImage } from '@workspace/ui/custom-components/upload-image';
|
|
import { useTranslations } from 'next-intl';
|
|
import Image from 'next/image';
|
|
import { useRef, useState } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { toast } from 'sonner';
|
|
import { z } from 'zod';
|
|
|
|
// 表单验证规则 - 基于 API.CreateSubscribeApplicationRequest
|
|
const createClientFormSchema = (t: any) =>
|
|
z.object({
|
|
name: z.string().min(1, t('form.validation.nameRequired')),
|
|
description: z.string().optional(),
|
|
icon: z.string().optional(),
|
|
user_agent: z.string().min(1, `User-Agent ${t('form.validation.userAgentRequiredSuffix')}`),
|
|
schema: z.string().default(''),
|
|
template: z.string().default(''),
|
|
output_format: z.string().default(''),
|
|
download_link: z.object({
|
|
windows: z.string().optional(),
|
|
mac: z.string().optional(),
|
|
linux: z.string().optional(),
|
|
ios: z.string().optional(),
|
|
android: z.string().optional(),
|
|
harmony: z.string().optional(),
|
|
}),
|
|
});
|
|
|
|
type ClientFormData = z.infer<ReturnType<typeof createClientFormSchema>>;
|
|
|
|
export function ProtocolForm() {
|
|
const t = useTranslations('subscribe');
|
|
const [loading, setLoading] = useState(false);
|
|
const [open, setOpen] = useState(false);
|
|
const [editingClient, setEditingClient] = useState<API.SubscribeApplication | null>(null);
|
|
const tableRef = useRef<ProTableActions>(null);
|
|
|
|
const clientFormSchema = createClientFormSchema(t);
|
|
|
|
const form = useForm<ClientFormData>({
|
|
resolver: zodResolver(clientFormSchema),
|
|
defaultValues: {
|
|
name: '',
|
|
description: '',
|
|
icon: '',
|
|
user_agent: '',
|
|
schema: '',
|
|
template: '',
|
|
output_format: '',
|
|
download_link: {
|
|
windows: '',
|
|
mac: '',
|
|
linux: '',
|
|
ios: '',
|
|
android: '',
|
|
harmony: '',
|
|
},
|
|
},
|
|
});
|
|
|
|
// API请求函数
|
|
const request = async (
|
|
pagination: { page: number; size: number },
|
|
filter: Record<string, unknown>,
|
|
) => {
|
|
const { data } = await getSubscribeApplicationList({
|
|
page: pagination.page,
|
|
size: pagination.size,
|
|
});
|
|
|
|
return {
|
|
list: data.data?.list || [],
|
|
total: data.data?.total || 0,
|
|
};
|
|
};
|
|
|
|
// 表格列定义
|
|
const columns: ColumnDef<API.SubscribeApplication, any>[] = [
|
|
{
|
|
accessorKey: 'is_default',
|
|
header: t('table.columns.default'),
|
|
cell: ({ row }) => (
|
|
<Switch
|
|
checked={row.original.is_default || false}
|
|
onCheckedChange={async (checked) => {
|
|
await updateSubscribeApplication({
|
|
...row.original,
|
|
is_default: checked,
|
|
});
|
|
tableRef.current?.refresh();
|
|
}}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'name',
|
|
header: t('table.columns.name'),
|
|
cell: ({ row }) => (
|
|
<div className='flex items-center gap-2'>
|
|
{row.original.icon && (
|
|
<div className='relative h-6 w-6 flex-shrink-0'>
|
|
<Image
|
|
src={row.original.icon}
|
|
alt={row.original.name}
|
|
width={24}
|
|
height={24}
|
|
className='rounded object-contain'
|
|
onError={() => {
|
|
console.log(`Failed to load image for ${row.original.name}`);
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
<span className='font-medium'>{row.original.name}</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'description',
|
|
header: t('table.columns.description'),
|
|
cell: ({ row }) => (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
<div className='text-muted-foreground max-w-[200px] truncate text-sm'>
|
|
{row.original.description}
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent className='max-w-xs'>
|
|
<p>{row.original.description}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'output_format',
|
|
header: t('table.columns.outputFormat'),
|
|
cell: ({ row }) => (
|
|
<Badge variant='secondary' className='text-xs'>
|
|
{t(`outputFormats.${row.original.output_format}`) || row.original.output_format}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'download_link',
|
|
header: t('table.columns.supportedPlatforms'),
|
|
cell: ({ row }) => {
|
|
return (
|
|
<div className='flex flex-wrap gap-1'>
|
|
{Object.entries(row.original.download_link || {}).map(([key, value]) => {
|
|
if (value) {
|
|
return (
|
|
<Badge key={key} variant='secondary' className='text-xs'>
|
|
{t(`platforms.${key}`)}
|
|
</Badge>
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'user_agent',
|
|
header: 'User-Agent',
|
|
cell: ({ row }) => (
|
|
<div className='text-muted-foreground max-w-[150px] truncate font-mono text-sm'>
|
|
{row.original.user_agent}
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
const handleAdd = () => {
|
|
setEditingClient(null);
|
|
form.reset({
|
|
name: '',
|
|
description: '',
|
|
icon: '',
|
|
user_agent: '',
|
|
schema: '',
|
|
template: '',
|
|
output_format: '',
|
|
download_link: {
|
|
windows: '',
|
|
mac: '',
|
|
linux: '',
|
|
ios: '',
|
|
android: '',
|
|
harmony: '',
|
|
},
|
|
});
|
|
setOpen(true);
|
|
};
|
|
|
|
const handleEdit = (client: API.SubscribeApplication) => {
|
|
setEditingClient(client);
|
|
form.reset({
|
|
name: client.name,
|
|
description: client.description || '',
|
|
icon: client.icon || '',
|
|
user_agent: client.user_agent,
|
|
schema: client.proxy_template || '',
|
|
template: client.template || '',
|
|
output_format: client.output_format || '',
|
|
download_link: {
|
|
windows: '',
|
|
mac: '',
|
|
linux: '',
|
|
ios: '',
|
|
android: '',
|
|
harmony: '',
|
|
},
|
|
});
|
|
setOpen(true);
|
|
};
|
|
|
|
const handleDelete = async (client: API.SubscribeApplication) => {
|
|
setLoading(true);
|
|
try {
|
|
await deleteSubscribeApplication({ id: client.id });
|
|
tableRef.current?.refresh();
|
|
toast.success(t('actions.deleteSuccess'));
|
|
} catch (error) {
|
|
console.error('Failed to delete client:', error);
|
|
toast.error(t('actions.deleteFailed'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleBatchDelete = async (clients: API.SubscribeApplication[]) => {
|
|
setLoading(true);
|
|
try {
|
|
await Promise.all(clients.map((client) => deleteSubscribeApplication({ id: client.id })));
|
|
tableRef.current?.refresh();
|
|
toast.success(t('actions.batchDeleteSuccess', { count: clients.length }));
|
|
} catch (error) {
|
|
console.error('Failed to batch delete clients:', error);
|
|
toast.error(t('actions.deleteFailed'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const onSubmit = async (data: ClientFormData) => {
|
|
setLoading(true);
|
|
try {
|
|
if (editingClient) {
|
|
await updateSubscribeApplication({
|
|
...data,
|
|
proxy_template: data.schema || '',
|
|
is_default: editingClient.is_default,
|
|
id: editingClient.id,
|
|
});
|
|
toast.success(t('actions.updateSuccess'));
|
|
} else {
|
|
await createSubscribeApplication({
|
|
...data,
|
|
proxy_template: data.schema || '',
|
|
is_default: false,
|
|
});
|
|
toast.success(t('actions.createSuccess'));
|
|
}
|
|
|
|
setOpen(false);
|
|
tableRef.current?.refresh();
|
|
} catch (error) {
|
|
console.error('Failed to save client:', error);
|
|
toast.error(t('actions.saveFailed'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ProTable<API.SubscribeApplication, Record<string, unknown>>
|
|
action={tableRef}
|
|
columns={columns}
|
|
request={request}
|
|
header={{
|
|
title: <h2 className='text-lg font-semibold'>{t('protocol.title')}</h2>,
|
|
toolbar: <Button onClick={handleAdd}>{t('actions.add')}</Button>,
|
|
}}
|
|
actions={{
|
|
render: (row) => [
|
|
<Button
|
|
key='edit'
|
|
onClick={() => handleEdit(row as unknown as API.SubscribeApplication)}
|
|
>
|
|
{t('actions.edit')}
|
|
</Button>,
|
|
<ConfirmButton
|
|
key='delete'
|
|
trigger={
|
|
<Button variant='destructive' disabled={loading}>
|
|
{t('actions.delete')}
|
|
</Button>
|
|
}
|
|
title={t('actions.confirmDelete')}
|
|
description={t('actions.deleteWarning')}
|
|
onConfirm={() => handleDelete(row as unknown as API.SubscribeApplication)}
|
|
cancelText={t('actions.cancel')}
|
|
confirmText={t('actions.confirm')}
|
|
/>,
|
|
],
|
|
batchRender: (rows) => [
|
|
<ConfirmButton
|
|
key='batchDelete'
|
|
trigger={<Button variant='destructive'>{t('actions.batchDelete')}</Button>}
|
|
title={t('actions.confirmDelete')}
|
|
description={t('actions.batchDeleteWarning', { count: rows.length })}
|
|
onConfirm={() => handleBatchDelete(rows as unknown as API.SubscribeApplication[])}
|
|
cancelText={t('actions.cancel')}
|
|
confirmText={t('actions.confirm')}
|
|
/>,
|
|
],
|
|
}}
|
|
/>
|
|
|
|
<Sheet open={open} onOpenChange={setOpen}>
|
|
<SheetContent className='w-[580px] max-w-full md:max-w-screen-md'>
|
|
<SheetHeader>
|
|
<SheetTitle>{editingClient ? t('form.editTitle') : t('form.addTitle')}</SheetTitle>
|
|
</SheetHeader>
|
|
<ScrollArea className='h-[calc(100dvh-48px-36px-36px)]'>
|
|
<Form {...form}>
|
|
<form className='space-y-6 py-4'>
|
|
<Tabs defaultValue='basic' className='w-full'>
|
|
<TabsList className='grid w-full grid-cols-3'>
|
|
<TabsTrigger value='basic'>{t('form.tabs.basic')}</TabsTrigger>
|
|
<TabsTrigger value='template'>{t('form.tabs.template')}</TabsTrigger>
|
|
<TabsTrigger value='download'>{t('form.tabs.download')}</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value='basic' className='space-y-4'>
|
|
<FormField
|
|
control={form.control}
|
|
name='icon'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('form.fields.icon')}</FormLabel>
|
|
<FormControl>
|
|
<EnhancedInput
|
|
type='text'
|
|
placeholder='https://example.com/icon.png'
|
|
suffix={
|
|
<UploadImage
|
|
className='bg-muted h-9 rounded-none border-none px-2'
|
|
onChange={(value) => {
|
|
form.setValue(field.name, value as string);
|
|
}}
|
|
/>
|
|
}
|
|
value={field.value}
|
|
onValueChange={(value) => {
|
|
form.setValue(field.name, value as string);
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>{t('form.descriptions.icon')}</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name='name'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('form.fields.name')}</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder='Clash for Windows' {...field} />
|
|
</FormControl>
|
|
<FormDescription>{t('form.descriptions.name')}</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name='user_agent'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>User-Agent</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder='Clash' {...field} />
|
|
</FormControl>
|
|
<FormDescription>
|
|
{t('form.descriptions.userAgentPrefix')}
|
|
</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name='description'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('form.fields.description')}</FormLabel>
|
|
<FormControl>
|
|
<Textarea placeholder={t('form.descriptions.description')} {...field} />
|
|
</FormControl>
|
|
<FormDescription>{t('form.descriptions.description')}</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value='template' className='space-y-4'>
|
|
<FormField
|
|
control={form.control}
|
|
name='output_format'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('form.fields.outputFormat')}</FormLabel>
|
|
<FormControl>
|
|
<Select value={field.value} onValueChange={field.onChange}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder='Select ...' />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value='base64'>{t('outputFormats.base64')}</SelectItem>
|
|
<SelectItem value='yaml'>{t('outputFormats.yaml')}</SelectItem>
|
|
<SelectItem value='json'>{t('outputFormats.json')}</SelectItem>
|
|
<SelectItem value='conf'>{t('outputFormats.conf')}</SelectItem>
|
|
<SelectItem value='plain'>{t('outputFormats.plain')}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</FormControl>
|
|
<FormDescription>{t('form.descriptions.outputFormat')}</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name='schema'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('form.fields.schema')}</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder='clash://install-config?url={url}&name={name}'
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>{t('form.descriptions.schema')}</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name='template'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t('form.fields.template')}</FormLabel>
|
|
<FormControl>
|
|
<GoTemplateEditor
|
|
schema={{
|
|
SiteName: { type: 'string', description: 'Site name' },
|
|
SubscribeName: { type: 'string', description: 'Subscribe name' },
|
|
Nodes: {
|
|
type: 'array',
|
|
description: 'Array of proxy nodes',
|
|
items: {
|
|
type: 'object',
|
|
properties: {
|
|
Name: { type: 'string', description: 'Node name' },
|
|
Host: { type: 'string', description: 'Server host' },
|
|
Port: { type: 'number', description: 'Server port' },
|
|
Type: { type: 'string', description: 'Proxy type' },
|
|
Tags: {
|
|
type: 'array',
|
|
description: 'Node tags',
|
|
items: { type: 'string' },
|
|
},
|
|
SNI: {
|
|
type: 'string',
|
|
description: 'Server Name Indication',
|
|
},
|
|
AllowInsecure: {
|
|
type: 'boolean',
|
|
description: 'Allow insecure connections',
|
|
},
|
|
Fingerprint: {
|
|
type: 'string',
|
|
description: 'Client fingerprint',
|
|
},
|
|
RealityServerAddr: {
|
|
type: 'string',
|
|
description: 'Reality server address',
|
|
},
|
|
RealityServerPort: {
|
|
type: 'number',
|
|
description: 'Reality server port',
|
|
},
|
|
RealityPrivateKey: {
|
|
type: 'string',
|
|
description: 'Reality private key',
|
|
},
|
|
RealityPublicKey: {
|
|
type: 'string',
|
|
description: 'Reality public key',
|
|
},
|
|
RealityShortId: {
|
|
type: 'string',
|
|
description: 'Reality short ID',
|
|
},
|
|
Network: { type: 'string', description: 'Network protocol' },
|
|
Path: { type: 'string', description: 'HTTP path' },
|
|
ServiceName: {
|
|
type: 'string',
|
|
description: 'gRPC service name',
|
|
},
|
|
Method: { type: 'string', description: 'Encryption method' },
|
|
ServerKey: { type: 'string', description: 'Server key' },
|
|
Flow: { type: 'string', description: 'Flow control' },
|
|
HopPorts: { type: 'string', description: 'Hop ports list' },
|
|
HopInterval: {
|
|
type: 'number',
|
|
description: 'Hop interval in seconds',
|
|
},
|
|
ObfsPassword: {
|
|
type: 'string',
|
|
description: 'Obfuscation password',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
UserInfo: {
|
|
type: 'object',
|
|
description: 'User information',
|
|
properties: {
|
|
Password: { type: 'string', description: 'User password' },
|
|
ExpiredAt: { type: 'string', description: 'Expiration date' },
|
|
Download: { type: 'number', description: 'Downloaded bytes' },
|
|
Upload: { type: 'number', description: 'Uploaded bytes' },
|
|
Traffic: { type: 'number', description: 'Total traffic bytes' },
|
|
SubscribeURL: {
|
|
type: 'string',
|
|
description: 'Subscription URL',
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
enableSprig
|
|
value={field.value || ''}
|
|
onChange={(value) => field.onChange(value)}
|
|
/>
|
|
</FormControl>
|
|
<FormDescription>{t('form.descriptions.template')}</FormDescription>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value='download' className='space-y-4'>
|
|
<div className='space-y-4'>
|
|
<div className='grid gap-3'>
|
|
{['windows', 'mac', 'linux', 'ios', 'android', 'harmony'].map((key) => (
|
|
<FormField
|
|
key={key}
|
|
control={form.control}
|
|
name={
|
|
`download_link.${key}` as `download_link.${keyof ClientFormData['download_link']}`
|
|
}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>{t(`platforms.${key}`)}</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} />
|
|
</FormControl>
|
|
<FormDescription>
|
|
{t(`platforms.${key}`)} {t('form.descriptions.downloadLink')}
|
|
</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</form>
|
|
</Form>
|
|
</ScrollArea>
|
|
<SheetFooter className='flex-row justify-end gap-2 pt-3'>
|
|
<Button variant='outline' onClick={() => setOpen(false)}>
|
|
{t('actions.cancel')}
|
|
</Button>
|
|
<Button onClick={form.handleSubmit(onSubmit)} disabled={loading}>
|
|
{loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
|
|
{editingClient ? t('actions.update') : t('actions.add')}
|
|
</Button>
|
|
</SheetFooter>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</>
|
|
);
|
|
}
|